mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-10-31 22:25:13 +08:00
120 lines
3.0 KiB
CSS
120 lines
3.0 KiB
CSS
@layer base {
|
|
/* small widgets any luci-app-* can drop anywhere: tooltip, progress bar, zone badge, close
|
|
* cross, alert box, .label pill. Arrow: content, not paint — colour is theme/45-misc.css. */
|
|
.cbi-title-ref::after {
|
|
content: "➙";
|
|
}
|
|
|
|
.cbi-tooltip-container {
|
|
cursor: help;
|
|
}
|
|
|
|
.cbi-tooltip {
|
|
position: absolute;
|
|
z-index: var(--fs-z-tooltip);
|
|
/* docs/css.md "Widgets: the tooltip parks past the unreachable edge, and the close cross
|
|
* needs the same mirror" — a physical `left` grows a 10000px RTL scrollbar. */
|
|
inset-inline-start: -10000px;
|
|
border-radius: var(--fs-radius-sm);
|
|
background: var(--fs-panel);
|
|
/* pre-wrap, never pre: docs/css.md "Typography and widgets: an opaque token needs
|
|
* overflow-wrap: anywhere, a tooltip needs pre-wrap". */
|
|
white-space: pre-wrap;
|
|
padding: var(--fs-space-0-5) var(--fs-space-1);
|
|
opacity: 0;
|
|
transition: opacity var(--fs-dur-fade);
|
|
}
|
|
|
|
.cbi-tooltip-container:hover .cbi-tooltip:not(:empty) {
|
|
inset-inline-start: auto;
|
|
opacity: 1;
|
|
transition: opacity var(--fs-dur-fade);
|
|
}
|
|
|
|
/* .cbi-progressbar paint: theme/25-progressbar.css — absorbed. The fill's starting
|
|
* width stays: the poll JS animates the inline width up from it. */
|
|
.cbi-progressbar > div {
|
|
width: 0%;
|
|
}
|
|
|
|
.zonebadge .cbi-tooltip {
|
|
padding: 1px;
|
|
background: inherit;
|
|
margin: -1.6em 0 0 -5px;
|
|
border-radius: var(--fs-radius-sm);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.zonebadge .cbi-tooltip > * {
|
|
margin: 1px;
|
|
z-index: var(--fs-z-raise);
|
|
position: relative;
|
|
}
|
|
|
|
.zone-forwards {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.zone-forwards > * {
|
|
flex: 1 1 40%;
|
|
padding: 1px;
|
|
text-wrap: auto;
|
|
}
|
|
|
|
.zone-forwards > span {
|
|
flex-basis: 10%;
|
|
text-align: center;
|
|
}
|
|
|
|
.zone-forwards .zone-src,
|
|
.zone-forwards .zone-dest {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.btn.disabled,
|
|
.btn[disabled] {
|
|
cursor: default;
|
|
opacity: var(--fs-disabled-opacity);
|
|
}
|
|
|
|
/* .btn.large/.btn.small, close cross colour/shadow/opacities: theme/55-buttons.css and
|
|
* theme/70-modal.css — absorbed. Left here: geometry only. */
|
|
/* Physical, hand-mirrored: docs/css.md "Widgets: the tooltip parks past the unreachable edge,
|
|
* and the close cross needs the same mirror" — appears in every modal and .alert-message. */
|
|
.close {
|
|
float: right;
|
|
font-size: var(--fs-type-xl);
|
|
font-weight: var(--fs-weight-bold);
|
|
line-height: 1;
|
|
}
|
|
:root[dir="rtl"] .close { float: left; }
|
|
|
|
.close:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* alert paint: theme/35-alerts.css — absorbed. Left: geometry and the white-space reset. */
|
|
.alert-message {
|
|
position: relative;
|
|
margin-bottom: var(--fs-space-2);
|
|
white-space: unset;
|
|
}
|
|
|
|
.alert-message .close {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.alert-message button {
|
|
margin: var(--fs-space-1) 0;
|
|
}
|
|
|
|
/* .label pill and the indicator pill: theme/35-alerts.css / theme/20-shell.css — absorbed. */
|
|
header [data-indicator] {
|
|
white-space: nowrap;
|
|
text-shadow: none;
|
|
margin: var(--fs-space-1) 0 var(--fs-space-1) var(--fs-space-1);
|
|
}
|
|
}
|