mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-09-13 03:45:11 +08:00
113 lines
2.9 KiB
CSS
113 lines
2.9 KiB
CSS
@layer base {
|
|
/* Element reset (Meyer, trimmed to what a LuCI view can emit). */
|
|
|
|
/* scroll-margin-top: an anchor jump must clear the sticky bar or it lands underneath
|
|
* it (WCAG 2.2 SC 2.4.11). Token, never a literal — the bar is 46px, not the 40 this
|
|
* used to guess. */
|
|
*, *::before, *::after {
|
|
scroll-margin-top: var(--fs-bar-h);
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
abbr[title], acronym[title] {
|
|
border-bottom: 1px dotted;
|
|
font-weight: inherit;
|
|
cursor: help;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
ol, ul {
|
|
list-style: none;
|
|
}
|
|
|
|
html {
|
|
font-size: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* :focus-visible, not :focus — the ring is for the keyboard; a mouse click focuses too and
|
|
* the UA heuristic keeps the ring off it. Replaces the 2001-era `thin dotted` (plus its
|
|
* `a:hover, a:active { outline: 0 }` companion, needless once the ring is keyboard-only):
|
|
* dotted 1px was the only focus indicator generic links had, and it is near-invisible on
|
|
* a dark panel. */
|
|
a:focus-visible {
|
|
outline: 2px solid var(--fs-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
sub, sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sup {
|
|
top: -.5em;
|
|
}
|
|
|
|
sub {
|
|
bottom: -.25em;
|
|
}
|
|
|
|
/* font-size: theme/60-inputs.css (the control-typography rule + `option`) — absorbed */
|
|
button,
|
|
input,
|
|
select,
|
|
option,
|
|
textarea {
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
button,
|
|
input[type="button"],
|
|
input[type="reset"],
|
|
input[type="submit"] {
|
|
cursor: pointer;
|
|
appearance: button;
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* disabled-opacity fade: 30-forms.css, same elements + pointer-events/cursor */
|
|
|
|
input[type="search"] {
|
|
appearance: textfield;
|
|
/* NO box-sizing: content-box. It contradicts the universal border-box above;
|
|
* the theme sizes fields by padding, so a search box came out ~22px too wide. */
|
|
}
|
|
|
|
input[type="search"]::-webkit-search-decoration {
|
|
appearance: none;
|
|
}
|
|
|
|
textarea {
|
|
overflow: auto;
|
|
vertical-align: top;
|
|
font-family: var(--fs-font-mono);
|
|
}
|
|
|
|
/* LuCI's .control-group is bootstrap's JOINED input-group: the trailing button was pulled back
|
|
* over the input so their 1px borders coincided, and its left corners were squared to match.
|
|
* This theme does not join controls — theme/55-buttons.css gives every button the full token
|
|
* radius, and a LAYER beats base unconditionally, so the squared corners never applied while
|
|
* the pull-back still did: the button's ROUNDED left corner sat on top of the input's rounded
|
|
* right corner (issue #7 — package-manager's Filter/Clear and "Download and install"/OK).
|
|
* Separate controls with a real gap instead.
|
|
*
|
|
* The password reveal is the one group that IS joined, and theme/60-inputs.css builds that seam
|
|
* itself (one border around the group, `gap: 0`) — it does not need the pull-back either. */
|
|
.control-group {
|
|
display: inline-flex;
|
|
gap: var(--fs-space-2);
|
|
}
|
|
}
|