Adrien Maston
df2e4c1518
* main: (35 commits) Replace the whole card on update Include bottom inset on the modal and footer, too Attempt to fix expanded search input Lose the second close button This seems to have caused the unwanted effect of not focusing the field in Mobile Safari Always display the cancel button, `esc` isn't obvious Nothing should cover the bar, trays or search results Dark theme color isn't black Add env constaints for mobile layout Smaller on mobile Reasonalbe max heights Remove top orientation (it doesn't work well), make right and left classes exclusive This is too fancy, remove it Set reasonable maxes Restore bubble to Maybe Restore structured logging of `queenbee_id` Add a kamal pre-build hook with some safety checks Configure beta to use production blob store Configure beta load balancer Update beta deployment and secrets config ...
206 lines
4.2 KiB
CSS
206 lines
4.2 KiB
CSS
@layer components {
|
|
.popup {
|
|
--btn-background: transparent;
|
|
--panel-border-radius: 0.5em;
|
|
--panel-padding: var(--block-space);
|
|
--panel-size: auto;
|
|
--popup-icon-size: 24px;
|
|
--popup-item-padding-inline: 0.5rem;
|
|
--popup-display: flex;
|
|
|
|
inset: 0 auto auto 50%;
|
|
max-block-size: 70dvh;
|
|
max-inline-size: min(55ch, calc(100vw - (var(--panel-padding) * 2)));
|
|
min-inline-size: min(25ch, calc(100vw - (var(--panel-padding) * 2)));
|
|
overflow: auto;
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
z-index: var(--z-popup);
|
|
|
|
&[open] {
|
|
display: var(--popup-display);
|
|
}
|
|
|
|
&.orient-left {
|
|
inset-inline: auto 0;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
&.orient-right {
|
|
inset-inline: 0 auto;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
form {
|
|
display: contents;
|
|
}
|
|
}
|
|
|
|
.popup__title {
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Hide lists when all the items within are hidden */
|
|
.popup__section {
|
|
&:not(:has(.popup__list)),
|
|
&:not(:has(.popup__list > *)),
|
|
&:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.popup__section-title {
|
|
background: var(--color-canvas);
|
|
font-size: var(--text-small);
|
|
font-weight: bold;
|
|
inset-block-start: 0;
|
|
list-style: none;
|
|
padding: var(--block-space-half) var(--inline-space-half);
|
|
position: sticky;
|
|
text-transform: uppercase;
|
|
z-index: 1;
|
|
|
|
&:is(summary) {
|
|
align-items: center;
|
|
cursor: pointer;
|
|
display: flex;
|
|
gap: 2ch;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.icon--caret-down {
|
|
opacity: 0.66;
|
|
transition: rotate 150ms ease-out;
|
|
}
|
|
|
|
.popup__section:not([open]) & {
|
|
.icon--caret-down {
|
|
rotate: -90deg;
|
|
}
|
|
}
|
|
}
|
|
|
|
.popup__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
inline-size: 100%;
|
|
list-style: none;
|
|
margin: 0;
|
|
max-inline-size: 100%;
|
|
padding: 0;
|
|
row-gap: 1px;
|
|
}
|
|
|
|
.popup__item {
|
|
align-items: center;
|
|
background: transparent;
|
|
border-radius: 0.3em;
|
|
display: flex;
|
|
inline-size: 100%;
|
|
max-inline-size: 100%;
|
|
|
|
@media (any-hover: hover) {
|
|
&:hover {
|
|
background: var(--color-ink-lightest);
|
|
}
|
|
}
|
|
|
|
.checked {
|
|
display: none;
|
|
}
|
|
|
|
&[aria-checked="true"] .checked {
|
|
display: block;
|
|
}
|
|
|
|
&[aria-selected] {
|
|
background-color: var(--color-selected);
|
|
|
|
@media (any-hover: hover) {
|
|
&:hover {
|
|
background-color: var(--color-selected);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* The actionable thing with padding within popup__item */
|
|
.popup__btn {
|
|
--btn-border-radius: 0.3em;
|
|
--btn-border-size: 0;
|
|
|
|
flex: 1 1 auto;
|
|
font-weight: 500;
|
|
justify-content: start;
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
max-inline-size: 100%;
|
|
padding: var(--inline-space-half) var(--popup-item-padding-inline);
|
|
text-align: start;
|
|
}
|
|
|
|
.popup__icon {
|
|
--icon-size: 1em;
|
|
|
|
inline-size: var(--popup-icon-size);
|
|
margin-inline-start: var(--popup-item-padding-inline);
|
|
}
|
|
|
|
.popup__radio {
|
|
--icon-size: var(--text-x-small);
|
|
|
|
block-size: var(--popup-icon-size);
|
|
inline-size: var(--popup-icon-size);
|
|
margin-inline-start: var(--popup-item-padding-inline);
|
|
flex-shrink: 0;
|
|
|
|
&:hover {
|
|
--btn-border-color: var(--color-ink);
|
|
}
|
|
}
|
|
|
|
/* Animated
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
.popup--animated {
|
|
opacity: 0;
|
|
transform: scale(0.2) translateX(-50%);
|
|
transform-origin: top left;
|
|
transition: var(--dialog-duration) allow-discrete;
|
|
transition-property: display, opacity, overlay, transform;
|
|
|
|
&::backdrop {
|
|
background-color: var(--color-always-black);
|
|
opacity: 0;
|
|
transform: scale(1);
|
|
transition: var(--dialog-duration) allow-discrete;
|
|
transition-property: display, opacity, overlay;
|
|
}
|
|
|
|
&[open] {
|
|
opacity: 1;
|
|
transform: scale(1) translateX(-50%);
|
|
|
|
&::backdrop {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@starting-style {
|
|
&[open] {
|
|
opacity: 0;
|
|
transform: scale(0.2) translateX(-50%);
|
|
}
|
|
|
|
&[open]::backdrop {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|