Alexander Zaytsev
137 lines
3.0 KiB
CSS
137 lines
3.0 KiB
CSS
@layer components {
|
|
.settings {
|
|
--settings-spacer: var(--block-space);
|
|
--settings-item-padding-inline: 0.5ch;
|
|
|
|
align-items: start;
|
|
display: flex;
|
|
gap: calc(var(--settings-spacer) * 2);
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
max-inline-size: min(100ch, 100%);
|
|
|
|
@media (min-width: 960px) {
|
|
flex-direction: row;
|
|
|
|
.settings__panel {
|
|
max-inline-size: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Sections & Panels
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
.settings__panel {
|
|
--panel-size: 100%;
|
|
--panel-padding: calc(var(--settings-spacer) / 1);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--panel-padding);
|
|
min-block-size: 100%;
|
|
min-inline-size: 0;
|
|
|
|
@media (min-width: 640px) {
|
|
--panel-padding: calc(var(--settings-spacer) * 2);
|
|
}
|
|
}
|
|
|
|
.settings__panel--users {
|
|
@media (min-width: 640px) {
|
|
max-height: 80dvh;
|
|
}
|
|
|
|
@media (min-width: 960px) {
|
|
max-height: calc(100dvh - 12rem);
|
|
}
|
|
}
|
|
|
|
.settings__section {
|
|
h2 {
|
|
font-size: var(--text-large);
|
|
}
|
|
|
|
> * + * {
|
|
margin-block-start: calc(var(--panel-padding) / 2);
|
|
}
|
|
|
|
&:is(:first-child):has(h2) {
|
|
margin-top: -0.33lh; /* Align h2 letters caps with panel padding */
|
|
}
|
|
}
|
|
|
|
.settings__section--negative {
|
|
h2 {
|
|
color: var(--color-negative);
|
|
}
|
|
|
|
.divider {
|
|
--divider-color: oklch(var(--lch-red-light));
|
|
}
|
|
}
|
|
|
|
.settings__section:has(.settings__scrollable-list) {
|
|
@media (min-width: 640px) {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
}
|
|
}
|
|
|
|
.settings__scrollable-list {
|
|
flex: 1 1 auto;
|
|
list-style: none;
|
|
margin: calc(var(--settings-spacer) / -4) calc(-1 * var(--settings-item-padding-inline));
|
|
padding: 0;
|
|
overflow: auto;
|
|
|
|
li {
|
|
border-radius: 0.5em;
|
|
|
|
/* Add padding if it's not already on a link within */
|
|
&:not(:has(a:first-child)) { padding-inline-end: var(--settings-item-padding-inline); }
|
|
&:not(:has(a:last-child)) { padding-inline-end: var(--settings-item-padding-inline); }
|
|
}
|
|
|
|
a {
|
|
padding: calc(var(--settings-spacer) / 4) var(--settings-item-padding-inline);
|
|
|
|
@media(any-hover: hover) {
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Only add a BG color when you can actually navigate */
|
|
.settings__user-filter:focus-within & {
|
|
[aria-selected] {
|
|
background: var(--color-selected);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Users
|
|
/* ------------------------------------------------------------------------ */
|
|
|
|
.settings__user-filter {
|
|
--btn-size: 3.5ch;
|
|
--avatar-size: var(--btn-size);
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: calc(var(--settings-spacer) / 2);
|
|
min-height: 0;
|
|
}
|
|
|
|
.settings__user-filter--bg {
|
|
background-color: var(--color-ink-lightest);
|
|
border-radius: 0.5em;
|
|
margin-block: 0;
|
|
padding: var(--settings-spacer);
|
|
}
|
|
}
|