Jason Zimdars
85 lines
1.7 KiB
CSS
85 lines
1.7 KiB
CSS
@layer components {
|
|
.popup {
|
|
--panel-border-radius: 0.5em;
|
|
--panel-padding: 0.4em 0.5em 0.5em;
|
|
--panel-size: auto;
|
|
|
|
inline-size: auto;
|
|
inset: 0 auto auto 0;
|
|
min-inline-size: 20ch;
|
|
max-inline-size: 40ch;
|
|
position: absolute;
|
|
z-index: 2;
|
|
|
|
&[open] {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.popup__item {
|
|
--btn-background: var(--color-subtle-light);
|
|
--btn-border-radius: 0.3em;
|
|
--btn-border-size: 0;
|
|
--btn-font-weight: 500;
|
|
--btn-padding: var(--inline-space-half) var(--inline-space-half) var(--inline-space-half) var(--inline-space);
|
|
--hover-size: 0;
|
|
--outline-color: transparent;
|
|
|
|
justify-content: start;
|
|
|
|
&::after {
|
|
border-radius: var(--btn-border-radius);
|
|
border: var(--btn-border-size) solid var(--btn-border-color, var(--color-subtle));
|
|
content: "";
|
|
display: block;
|
|
inline-size: calc(100% - var(--btn-padding) * 2);
|
|
block-size: calc(100% - var(--btn-padding) * 2);
|
|
|
|
}
|
|
|
|
@media (any-hover: hover) {
|
|
&:where(:not(:active):hover) {
|
|
--btn-background: var(--color-selected);
|
|
}
|
|
}
|
|
|
|
&:has(input:checked) {
|
|
--btn-background: var(--color-selected);
|
|
--btn-color: var(--color-ink);
|
|
|
|
img {
|
|
filter: invert(0);
|
|
|
|
&.checked {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
img {
|
|
filter: invert(1);
|
|
}
|
|
}
|
|
|
|
@media (any-hover: hover) {
|
|
&:where(:not(:active):hover) {
|
|
--btn-background: var(--color-selected);
|
|
}
|
|
}
|
|
}
|
|
|
|
img.checked {
|
|
block-size: 1em;
|
|
inline-size: 1em;
|
|
}
|
|
}
|
|
|
|
.popup__list {
|
|
row-gap: 2px;
|
|
}
|
|
|
|
.popup__title {
|
|
font-weight: 800;
|
|
}
|
|
}
|