cwx/small-packages
1
0 Fork 0
mirror of https://github.com/caiwx86/small-packages.git synced 2026-11-05 18:44:06 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

update 2026-10-11 18:30:33

Browse Source
This commit is contained in:
action committed 2026-10-11 18:30:33 +08:00
1 parent 93f2a53ca4
commit 8ccdf8f9f7
156 files changed
+40396 -114
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

luci-theme-footstrap/styles/theme/90-responsive.css
+89
View File
@@ -0,0 +1,89 @@
@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;
word-break: normal;
overflow-wrap: break-word;
}
}
@media (max-width: 767px) {
/* foreign-<table> fallback unguarded now in theme/30-tables.css: fit is content/column, never viewport */
/* must stay INSIDE this @media: theme/65-dropdown.css's cap is (0,3,0) vs this (0,1,0) */
.cbi-dropdown { min-width: 0; max-width: 100%; }
/* base's 250px label overflows ~360px; !important beats package-manager.js's inline style */
: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 > .btn { flex: 0 0 auto; }
: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 &nbsp; 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, .cbi-value-field .cbi-dropdown { 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 */
/* iOS Safari zooms in when focused text is under 16px and never zooms back out */
input, textarea, select, .cbi-dropdown > ul > li { font-size: var(--fs-type-lg); }
}
/* anchored to its widget: ui.js's touch branch assumes the viewport as containing block; !important beats the inline style */
.cbi-dropdown[open] > ul.dropdown {
inset-inline-start: 0 !important;
inset-inline-end: auto !important;
min-width: 100%;
/* desktop only: min(92vw,420px) ignores trigger's left offset, grew past viewport under 767px (113 findings, task audit-09) */
width: max-content;
max-width: min(92vw, 420px);
}
@media (max-width: 767px) {
/* phone tier, after the rule above (later wins): trigger already capped to field width, `auto` keeps the popup on-screen */
.cbi-dropdown[open] > ul.dropdown { width: auto; }
}
}