add: better user settings page

This commit is contained in:
trisua 2025-08-30 19:30:54 -04:00
parent e8cc541f45
commit 4735832cef
16 changed files with 2398 additions and 2241 deletions

View file

@ -466,7 +466,7 @@ button.camo:hover,
input,
textarea,
select {
padding: 0.35rem var(--pad-3);
padding: var(--pad-2) var(--pad-3);
border-radius: var(--radius);
outline: none;
transition: background 0.15s;
@ -481,6 +481,10 @@ select {
color: var(--color-text-lowered);
}
input {
height: 32px;
}
textarea {
min-height: 5rem;
}
@ -564,10 +568,27 @@ input[type="checkbox"]:checked {
background-image: url("/icons/check.svg");
}
input[type="file"] {
height: max-content;
}
label {
cursor: pointer;
}
.round_form input,
.round_form .square {
border-radius: var(--circle);
}
.round_form input {
padding: var(--pad-2) var(--pad-4);
}
.round_form input[type="file"] {
padding: 0 var(--pad-4);
}
/* pillmenu */
.pillmenu {
display: flex;
@ -874,12 +895,12 @@ nav .button:not(.title):not(.active):hover {
display: none;
}
.mobile_nav .pillmenu a:first-of-type {
.mobile_nav .pillmenu a:not(.dropdown *):first-of-type {
border-top-left-radius: var(--radius) !important;
border-bottom-left-radius: var(--radius) !important;
}
.mobile_nav .pillmenu a:last-of-type {
.mobile_nav .pillmenu a:not(.dropdown *):last-of-type {
border-top-right-radius: var(--radius) !important;
border-bottom-right-radius: var(--radius) !important;
}
@ -1033,14 +1054,14 @@ dialog:is(.dark *)::backdrop {
}
.dropdown .inner .active::after {
top: 0;
left: 0;
top: 10%;
left: 5px;
width: 5px;
content: "";
height: 100%;
height: 80%;
position: absolute;
background: var(--color-primary);
border-radius: var(--radius);
border-radius: var(--circle);
}
.dropdown:not(nav *):has(.inner.open) button:not(.inner button) {
@ -1085,7 +1106,7 @@ dialog:is(.dark *)::backdrop {
width: max-content;
max-width: calc(100dvw - var(--pad-4));
border-radius: var(--radius);
padding: var(--pad-3) var(--pad-4);
padding: var(--pad-2) var(--pad-3);
animation: popin ease-in-out 1 0.15s running;
display: flex;
justify-content: space-between;
@ -1502,3 +1523,47 @@ details.accordion .inner {
top: 0;
border-radius: var(--radius);
}
/* menus */
menu {
display: flex;
}
menu a {
justify-content: flex-start;
width: 100%;
text-decoration: none !important;
background: var(--color-raised);
color: var(--color-text-raised);
padding: var(--pad-2) var(--pad-3);
font-weight: 500;
display: flex;
align-items: center;
gap: var(--pad-2);
}
menu a:hover {
background: var(--color-super-raised);
}
menu a.active {
background: var(--color-primary);
color: var(--color-text-primary);
}
menu.col {
flex-direction: column;
width: 25rem;
max-width: 100%;
padding: var(--pad-3) 0;
}
menu a:first-child {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
menu a:last-child {
border-bottom-left-radius: var(--radius);
border-bottom-right-radius: var(--radius);
}