update 2026-10-25 02:32:31

luci-theme-footstrap/styles/theme/50-toplayout.css

@@ -0,0 +1,32 @@
+@layer theme {
+	/* a DELTA on top of the bar's unguarded base (20-shell.css), every width — no @media floor,
+	 * fitChrome measures instead — docs/css.md "Toplayout: measured, not media-queried". */
+	:root[data-layout="top"] .fs-sidebar {
+		/* min-height not height: a long hostname wraps the capped brand onto a second line (20-shell.css) */
+		min-height: var(--fs-bar-h);
+		gap: var(--fs-space-3);
+	}
+	/* the stacked bar (.fs-bar-stack, set by fitChrome in fs-chrome.js, not a media query) IS the
+	 * base bar, so the delta below skips it instead of restating the base values */
+	:root[data-layout="top"] .fs-sidebar:not(.fs-bar-stack) {
+		/* nowrap or flexbox wraps the BAR itself instead of the menu's own pills — the signal fitChrome measures */
+		flex-wrap: nowrap;
+		/* aligns the bar to .fs-content so the brand/menu line up with the headings below */
+		padding: 0 max(20px, calc((100% - var(--fs-content-max)) / 2 + var(--fs-content-pad)));
+	}
+
+	/* flex:1 opens the gap pushing the right cluster to the column's edge */
+	:root[data-layout="top"] .fs-sidebar:not(.fs-bar-stack) ul.nav {
+		order: 2; flex: 1 1 auto; margin-inline-start: var(--fs-space-2);
+	}
+	:root[data-layout="top"] .fs-sidebar:not(.fs-bar-stack) #indicators,
+	:root[data-layout="top"] .fs-sidebar:not(.fs-bar-stack) .fs-themerow,
+	:root[data-layout="top"] .fs-sidebar:not(.fs-bar-stack) .fs-logout { order: 3; margin-inline-start: 0; }
+
+	/* dropdown anchor/bridge/clamp live unguarded in 20-shell.css, not here (issue #19) */
+
+	/* placement only: the strip's own show/hide (empty, single) lives in 20-shell.css */
+	:root[data-layout="top"] .fs-modemenu { order: 4; flex: 1 1 100%; gap: var(--fs-space-1); }
+
+	:root[data-layout="top"] .fs-content { padding-top: var(--fs-space-6); }
+}