update 2026-10-19 10:54:07

luci-theme-footstrap/styles/base/90-widgets.css

@@ -0,0 +1,118 @@
+@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;
+	}
+
+	/* .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-block: -1.6em 0;
+		margin-inline: -5px 0;
+		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-block: var(--fs-space-1); margin-inline: var(--fs-space-1) 0;
+	}
+}