mirror of
https://github.com/openwrt/luci.git
synced 2025-12-21 17:04:35 +04:00
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>
This commit is contained in:
committed by
Paul Donald
parent
1dca4dde96
commit
3c3a5e2b1a
@@ -115,6 +115,9 @@
|
|||||||
--disabled-opacity: .7;
|
--disabled-opacity: .7;
|
||||||
|
|
||||||
color-scheme: light;
|
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"] {
|
:root[data-darkmode="true"] {
|
||||||
@@ -252,7 +255,7 @@ input[type="search"]::-webkit-search-decoration {
|
|||||||
textarea {
|
textarea {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
font-family: monospace;
|
font-family: var(--font-mono);
|
||||||
}
|
}
|
||||||
|
|
||||||
.control-group {
|
.control-group {
|
||||||
@@ -273,7 +276,7 @@ textarea {
|
|||||||
* ------------------------------------------------------------------------------------------- */
|
* ------------------------------------------------------------------------------------------- */
|
||||||
body {
|
body {
|
||||||
background-color: var(--background-color-high);
|
background-color: var(--background-color-high);
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font-family: var(--font-sans);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
@@ -480,7 +483,7 @@ address {
|
|||||||
|
|
||||||
code, pre {
|
code, pre {
|
||||||
padding: 0 3px 2px;
|
padding: 0 3px 2px;
|
||||||
font-family: Monaco, Andale Mono, Courier New, monospace;
|
font-family: var(--font-mono);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
@@ -532,7 +535,7 @@ label,
|
|||||||
input,
|
input,
|
||||||
button,
|
button,
|
||||||
select {
|
select {
|
||||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font-family: var(--font-sans);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
@@ -1448,7 +1451,7 @@ body.modal-overlay-active #modal_overlay {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn .close, .alert-message .close {
|
.btn .close, .alert-message .close {
|
||||||
font-family: Arial, sans-serif;
|
font-family: var(--font-sans);
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -2017,7 +2020,7 @@ form.inline { display: inline; margin-bottom: 0; }
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
color: var(--text-color-highest);
|
color: var(--text-color-highest);
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
font-family: monospace;
|
font-family: var(--font-mono);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cbi-section-table .tr:hover .td,
|
.cbi-section-table .tr:hover .td,
|
||||||
@@ -2391,7 +2394,7 @@ div.cbi-value var.cbi-tooltip-container,
|
|||||||
.uci-dialog ins,
|
.uci-dialog ins,
|
||||||
.uci-dialog var {
|
.uci-dialog var {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-family: monospace;
|
font-family: var(--font-mono);
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
color: var(--text-color-high);
|
color: var(--text-color-high);
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
Reference in New Issue
Block a user