mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-11-03 06:13:56 +08:00
77 lines
5.0 KiB
CSS
77 lines
5.0 KiB
CSS
@layer theme {
|
|
/* phone overflow safety net (<=767px): .fs-main is overflow-x: clip, cutting anything wider silently; tablets were clean */
|
|
/* split-button labels wrap under 360px — docs/css.md "Responsive: a split button's label must wrap under 360px" */
|
|
@container fs-view (max-width: 360px) {
|
|
#view .cbi-button, #view .btn,
|
|
#view input[type="button"], #view input[type="submit"], #view input[type="reset"] {
|
|
white-space: normal;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
/* foreign-<table> fallback unguarded now in theme/30-tables.css: fit is content/column, never viewport */
|
|
|
|
/* button dropdowns: no floor, capped to the column */
|
|
.cbi-dropdown { min-width: 0; max-width: 100%; }
|
|
/* form dropdowns: 65-dropdown.css's (0,3,0) 210px/400px floor outranks the rule above, a @media adds no
|
|
* specificity; the doubled class lifts this one to (0,4,0), min() so a 320px modal field is not overflowed */
|
|
.cbi-dropdown.cbi-dropdown:not(.btn):not(.cbi-button) { min-width: min(210px, 100%); max-width: 100%; }
|
|
/* phone tier over 65-dropdown.css's `width: max-content` (0,3,1): the doubled class makes this (0,4,1); trigger already capped to field width, `auto` keeps the popup on-screen */
|
|
.cbi-dropdown[open] > ul.dropdown.dropdown { width: auto; }
|
|
|
|
/* package-manager.js injects an unlayered `.controls > * > label { min-width: 250px }` (overflows ~360px) and `.controls { display: flex }`; !important beats that sheet, and the two pager rows' inline display:none until the first display() */
|
|
:where(#view)[data-page="admin-system-package-manager"] .controls { display: block !important; }
|
|
/* :not(.pager): blocking it stacked « / text / » onto three lines */
|
|
:where(#view)[data-page="admin-system-package-manager"] .controls > div:not(.pager) { display: block !important; min-width: 0; margin-bottom: var(--fs-space-2); }
|
|
:where(#view)[data-page="admin-system-package-manager"] .controls > .pager {
|
|
display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: var(--fs-space-2);
|
|
}
|
|
:where(#view)[data-page="admin-system-package-manager"] .controls > .pager > .text { flex: 0 1 auto; min-width: 0; }
|
|
/* disk gauge value moved BELOW the bar — docs/css.md "Responsive: the disk gauge value moves below the bar" */
|
|
:where(#view)[data-page="admin-system-package-manager"] label + .cbi-progressbar {
|
|
width: 100%; margin-bottom: 3em;
|
|
}
|
|
:where(#view)[data-page="admin-system-package-manager"] label + .cbi-progressbar::after {
|
|
top: calc(100% + 5px); inset-inline: 0 auto; bottom: auto;
|
|
text-align: start; white-space: normal; max-width: 100%;
|
|
}
|
|
/* `> div > label`: only the TITLE label, a bare `.controls label` also caught nested radio labels */
|
|
:where(#view)[data-page="admin-system-package-manager"] .controls > div > label { display: block; min-width: 0; white-space: normal; margin-bottom: var(--fs-space-1); }
|
|
/* radio row: stock's text nodes don't stop a mid-choice split, a real gap does */
|
|
:where(#view)[data-page="admin-system-package-manager"] .controls > div > div:has(> label > input[type="radio"]) {
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-space-1) var(--fs-space-5);
|
|
}
|
|
:where(#view)[data-page="admin-system-package-manager"] .controls .control-group { display: flex; flex-wrap: wrap; min-width: 0; gap: var(--fs-space-2); }
|
|
:where(#view)[data-page="admin-system-package-manager"] .controls .control-group input { flex: 1 1 140px; min-width: 0; max-width: 100%; }
|
|
|
|
/* Diagnostics stack not here: fs-select.js writes .fs-rowstack at any width, theme/30-tables.css carries it */
|
|
|
|
/* no `table.fs-dt { display: block }`: discards the table context — docs/css.md "Responsive: no `display: block` on `table.fs-dt`" */
|
|
|
|
/* generic caps: a field never exceeds its column */
|
|
.cbi-value-field input, .cbi-value-field select { max-width: 100%; }
|
|
/* content-sized leaves half the row empty; checkbox/radio/file keep intrinsic size */
|
|
.cbi-value-field select,
|
|
.cbi-value-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
|
|
.cbi-value-field .cbi-dropdown:not(.btn):not(.cbi-button),
|
|
.cbi-value-field .cbi-dynlist,
|
|
.cbi-value-field .cbi-select { width: 100%; }
|
|
/* min-width: 0 only, base/40-tables.css already breaks a long value */
|
|
#view .fs-ovl .table .td, #view .fs-ovl .table .th { min-width: 0; }
|
|
|
|
/* side-by-side squeezes a field to ~120px; not #view-scoped, ui.js appends modals to <body> */
|
|
.cbi-value > .cbi-value-title { flex: 1 1 100%; text-align: start; padding-top: 0; }
|
|
.cbi-value > .cbi-value-field { flex: 1 1 100%; min-width: 0; }
|
|
|
|
/* stock phone contract; `.td.hide-xs` not redundant, stacking rules (0,2,1)/(0,2,0) outrank a bare `.hide-xs` (0,1,0) */
|
|
.hide-sm, .hide-xs,
|
|
.table .td.hide-sm, .table .td.hide-xs,
|
|
.table .th.hide-sm, .table .th.hide-xs { display: none; }
|
|
/* .col-N weights UNGUARDED now, theme/30-tables.css: flex is inert on a non-flex item */
|
|
|
|
/* no field-size rule here: the 16px iOS floor is the --fs-type-field token, set under this query in 02-tokens.css */
|
|
}
|
|
}
|