mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-11-01 16:44:45 +08:00
62 lines
1.6 KiB
CSS
62 lines
1.6 KiB
CSS
@layer base {
|
|
/* the modal overlay ui.js shows for config diffs, uploads and login */
|
|
#modal_overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
background: var(--fs-scrim);
|
|
z-index: var(--fs-z-overlay);
|
|
overflow: auto;
|
|
transition: opacity var(--fs-dur);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.modal {
|
|
width: 90%;
|
|
margin: var(--fs-space-6) auto; /* clear of the sticky bar, and centred */
|
|
min-height: var(--fs-control-h);
|
|
max-width: 600px;
|
|
border-radius: var(--fs-radius-lg); /* a modal is a card — the large radius, like every panel */
|
|
background: var(--fs-panel);
|
|
border: var(--fs-hairline);
|
|
padding: var(--fs-card-pad);
|
|
min-width: 270px;
|
|
}
|
|
|
|
/* .modal > * / pre / textarea: theme/70-modal.css — absorbed with the heading ramp and the
|
|
* generic field box, both of which would out-layer a restatement here. */
|
|
|
|
.modal > .button-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.modal > .button-row > button:not(:last-of-type) {
|
|
margin-inline-end: var(--fs-space-2);
|
|
}
|
|
|
|
.modal > .button-row > button:first-of-type {
|
|
margin-inline-end: auto;
|
|
}
|
|
|
|
body.modal-overlay-active {
|
|
overflow: hidden;
|
|
height: 100svh; /* not vh (crops under URL bar) or dvh (re-lays out each frame it slides) */
|
|
}
|
|
|
|
body.modal-overlay-active #modal_overlay {
|
|
inset-inline: 0;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.btn .close, .alert-message .close {
|
|
font-family: var(--fs-font-sans);
|
|
}
|
|
|
|
/* Colour-word block absorbed, do not re-add: .btn.<word> theme/55-buttons.css,
|
|
* .alert-message/.cbi-tooltip.<word> theme/35-alerts.css. */
|
|
}
|