From: Akihiro Nagai <bashing.tremors_0f@icloud.com>
Date: Tue, 18 Nov 2025 08:32:44 +0000 (+0900)
Subject: luci-theme-bootstrap: fall back to system font stack with CSS custom properties
X-Git-Url: http://git.openwrt.org/?a=commitdiff_plain;h=3c3a5e2b1a658fdf07b2d4a32e913502c6d32e5c;p=project%2Fluci.git

luci-theme-bootstrap: fall back to system font stack with CSS custom properties

Replace hardcoded font-family declarations with CSS custom properties
(--font-sans, --font-serif, --font-mono) that fall back to system UI fonts.

Signed-off-by: Akihiro Nagai <bashing.tremors_0f@icloud.com>
---

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index a874c2e11d..318ddeef63 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -115,6 +115,9 @@
 	--disabled-opacity: .7;
 
 	color-scheme: light;
+
+	--font-sans: Helvetica Neue, Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
+	--font-mono: Monaco, Andale Mono, Courier New, ui-monospace, monospace;
 }
 
 :root[data-darkmode="true"] {
@@ -252,7 +255,7 @@ input[type="search"]::-webkit-search-decoration {
 textarea {
 	overflow: auto;
 	vertical-align: top;
-	font-family: monospace;
+	font-family: var(--font-mono);
 }
 
 .control-group {
@@ -273,7 +276,7 @@ textarea {
  * ------------------------------------------------------------------------------------------- */
 body {
 	background-color: var(--background-color-high);
-	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-family: var(--font-sans);
 	font-size: 13px;
 	font-weight: normal;
 	line-height: 18px;
@@ -480,7 +483,7 @@ address {
 
 code, pre {
 	padding: 0 3px 2px;
-	font-family: Monaco, Andale Mono, Courier New, monospace;
+	font-family: var(--font-mono);
 	font-size: 12px;
 	border-radius: 3px;
 }
@@ -532,7 +535,7 @@ label,
 input,
 button,
 select {
-	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-family: var(--font-sans);
 	font-size: 13px;
 	font-weight: normal;
 	line-height: normal;
@@ -1448,7 +1451,7 @@ body.modal-overlay-active #modal_overlay {
 }
 
 .btn .close, .alert-message .close {
-	font-family: Arial, sans-serif;
+	font-family: var(--font-sans);
 	line-height: 18px;
 }
 
@@ -2017,7 +2020,7 @@ form.inline { display: inline; margin-bottom: 0; }
 	width: 100%;
 	color: var(--text-color-highest);
 	margin-bottom: 18px;
-	font-family: monospace;
+	font-family: var(--font-mono);
 }
 
 .cbi-section-table .tr:hover .td,
@@ -2391,7 +2394,7 @@ div.cbi-value var.cbi-tooltip-container,
 .uci-dialog ins,
 .uci-dialog var {
 	text-decoration: none;
-	font-family: monospace;
+	font-family: var(--font-mono);
 	font-style: normal;
 	color: var(--text-color-high);
 	display: block;