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

update 2026-11-01 11:53:54
marry-jell / merge (push) Waiting to run
Details

Browse Source
This commit is contained in:
action committed 2026-11-01 11:53:54 +08:00
1 parent 24c9105eb9
commit a97651184f
158 files changed
+38212 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

luci-theme-footstrap/styles/theme/75-search.css
+80
View File
@@ -0,0 +1,80 @@
@layer theme {
/* page-search palette. fs-search.js parents it to <body>: .fs-sidebar is overflow:auto, which
* would clip a child of the trigger, and the overlay covers the whole viewport anyway. */
/* --fs-scrim is the theme's one colour literal (plain black at .7) on purpose: absence of light behind a dialog, not a tint of any palette token */
.fs-search-ov {
position: fixed; inset: 0; z-index: var(--fs-z-popover);
/* what the `hidden` attribute has to beat — base/10-reset.css covers every element now */
display: flex; justify-content: center;
/* not centred vertically: the box grows DOWNWARD as results come in, centred would slide the input out from under the user's eyes on every keystroke */
align-items: flex-start;
padding: max(8vh, var(--fs-space-6)) var(--fs-space-4) var(--fs-space-4);
background: var(--fs-scrim);
animation: fs-fade var(--fs-dur-fade);
}
/* a SCROLL CONTAINER, not decoration: uncapped the box grows past a short viewport (phone
* landscape ~380px), and a position:fixed popup cannot be scrolled by the page */
.fs-search-box {
display: flex; flex-direction: column; min-height: 0;
width: 100%; max-width: 560px; max-height: min(70dvh, 560px);
background: var(--fs-panel);
border: var(--fs-hairline); border-radius: var(--fs-radius-lg);
box-shadow: var(--fs-shadow-pop);
overflow: hidden;
}
.fs-search-row {
display: flex; align-items: center; gap: var(--fs-space-2-5); flex: 0 0 auto;
padding: var(--fs-space-3) var(--fs-space-3-5);
border-bottom: var(--fs-hairline);
}
.fs-search-ico { display: inline-flex; color: var(--fs-faint); }
.fs-search-ico .fs-ico { width: 18px; height: 18px; }
/* the ROW is the field, the input carries no frame of its own — two classes (0,2,0) needed to
* outrank 60-inputs.css's generic field box (0,1,1) in the same layer regardless of source
* order. --fs-type-floor at every width, not the body size: below 16px iOS Safari zooms the page
* on focus, and this field focuses as the palette opens. */
.fs-search-row .fs-search-input {
flex: 1 1 auto; min-width: 0;
margin: 0; padding: 0; border: 0; min-height: 0; background: transparent;
color: var(--fs-text);
font-family: inherit; font-size: var(--fs-type-floor); font-weight: var(--fs-weight); line-height: 1.4;
}
.fs-search-row .fs-search-input:focus { outline: none; box-shadow: none; }
/* ink comes from base ::placeholder (one for the whole theme); only the weight is restated */
.fs-search-row .fs-search-input::placeholder { font-weight: var(--fs-weight); }
.fs-search-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--fs-space-1-5); }
.fs-search-opt {
display: flex; align-items: baseline; gap: var(--fs-space-2-5);
padding: var(--fs-space-2) var(--fs-space-2-5); border-radius: var(--fs-radius);
color: var(--fs-text); text-decoration: none; cursor: pointer;
}
/* one highlight for pointer AND keyboard: .active is set on both aria-activedescendant and pointermove, so mouse and arrow keys can never disagree which row Enter opens */
.fs-search-opt.active { background: var(--fs-accent-soft); color: var(--fs-accent); }
.fs-search-opt-title { flex: 0 1 auto; font-weight: var(--fs-weight-bold); font-size: var(--fs-type); }
.fs-search-opt-path {
flex: 1 1 auto; min-width: 0;
color: var(--fs-faint); font-size: var(--fs-type); text-align: end;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fs-search-opt.active .fs-search-opt-path { color: inherit; }
.fs-search-note {
flex: 0 0 auto;
padding: var(--fs-space-2-5) var(--fs-space-3-5) var(--fs-space-0-5);
color: var(--fs-eyebrow-color);
font-size: var(--fs-type-xs); font-weight: var(--fs-eyebrow-weight); letter-spacing: var(--fs-eyebrow-tracking); text-transform: uppercase;
}
/* empty state ("No pages found") reads as a sentence, not an eyebrow label. :has(), not a
* sibling combinator: the note sits ABOVE the list it describes, `+` cannot reach back to it. */
.fs-search-box:has(.fs-search-list:empty) .fs-search-note {
padding: var(--fs-space-6) var(--fs-space-3-5) var(--fs-space-7);
text-align: center; text-transform: none; letter-spacing: 0;
font-size: var(--fs-type); font-weight: var(--fs-weight);
}
}