From 049a87c402818a04914745ae8c5caa73c0c2cc91 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 8 Nov 2020 19:01:38 +0100 Subject: [PATCH] Override fonts using Fomantic config (#13465) Saves is from doing it manually and saves a few CSS bytes. Co-authored-by: techknowlogick --- web_src/fomantic/_site/globals/site.variables | 5 +- web_src/fomantic/build/semantic.css | 38 +++++++-------- web_src/less/_base.less | 47 +------------------ 3 files changed, 24 insertions(+), 66 deletions(-) diff --git a/web_src/fomantic/_site/globals/site.variables b/web_src/fomantic/_site/globals/site.variables index 5a8b8033f..efd2e2a27 100644 --- a/web_src/fomantic/_site/globals/site.variables +++ b/web_src/fomantic/_site/globals/site.variables @@ -1 +1,4 @@ -@fontName : 'Roboto'; +/* https://github.com/fomantic/Fomantic-UI/blob/develop/src/themes/default/globals/site.variables */ + +@headerFont: var(--fonts-regular); +@pageFont: var(--fonts-regular); diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index c227185b2..8fe1c7384 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -43,7 +43,7 @@ .ui.accordion .title:not(.ui) { padding: 0.5em 0; - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); font-size: 1em; color: rgba(0, 0, 0, 0.87); } @@ -423,7 +423,7 @@ vertical-align: baseline; background: #E0E1E2 none; color: rgba(0, 0, 0, 0.6); - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); margin: 0 0.25em 0 0; padding: 0.78571429em 1.5em 0.78571429em; text-transform: none; @@ -5179,7 +5179,7 @@ .ui.card > .content > .header { display: block; margin: ''; - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); color: rgba(0, 0, 0, 0.85); } @@ -7619,7 +7619,7 @@ a.inverted.ui.card:hover, /* Text Container */ .ui.text.container { - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); max-width: 700px; line-height: 1.5; font-size: 1.14285714rem; @@ -10723,7 +10723,7 @@ select.ui.dropdown { .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] { - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); margin: 0; outline: none; -webkit-appearance: none; @@ -10755,7 +10755,7 @@ select.ui.dropdown { box-shadow: 0 0 0 0 transparent inset; transition: color 0.1s ease, border-color 0.1s ease; font-size: 1em; - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); line-height: 1.2857; resize: vertical; } @@ -14784,7 +14784,7 @@ select.ui.dropdown { border: none; margin: calc(2rem - 0.1428571428571429em) 0 1rem; padding: 0 0; - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); font-weight: bold; line-height: 1.28571429em; text-transform: none; @@ -24986,7 +24986,7 @@ img.ui.bordered.image { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); text-align: left; line-height: 1.21428571em; - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); padding: 0.67857143em 1em; background: #FFFFFF; border: 1px solid rgba(34, 36, 38, 0.15); @@ -25868,7 +25868,7 @@ img.ui.bordered.image { .ui.items > .item > .content > .header { display: inline-block; margin: -0.21425em 0 0; - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); font-weight: bold; color: rgba(0, 0, 0, 0.85); } @@ -28905,7 +28905,7 @@ ol.ui.list ol li, .ui.list > .item .header { display: block; margin: 0; - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); font-weight: bold; color: rgba(0, 0, 0, 0.87); } @@ -30779,7 +30779,7 @@ ol.ui.suffixed.list li:before, .ui.menu { display: flex; margin: 1rem 0; - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); background: #FFFFFF; font-weight: normal; border: 1px solid rgba(34, 36, 38, 0.15); @@ -33232,7 +33232,7 @@ Floated Menu / Item .ui.message .header { display: block; - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); font-weight: bold; margin: -0.14285714em 0 0 0; } @@ -33958,7 +33958,7 @@ Floated Menu / Item .ui.modal > .header { display: block; - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); background: #FFFFFF; margin: 0; padding: 1.25rem 1.5rem; @@ -34747,7 +34747,7 @@ Floated Menu / Item .ui.popup > .header { padding: 0; - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); font-size: 1.14285714em; line-height: 1.2; font-weight: bold; @@ -37054,7 +37054,7 @@ template { .ui.search > .results .result .title { margin: -0.14285714em 0 0; - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); font-weight: bold; font-size: 1em; color: rgba(0, 0, 0, 0.85); @@ -37080,7 +37080,7 @@ template { } .ui.search > .results > .message .header { - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); font-size: 1rem; font-weight: bold; color: rgba(0, 0, 0, 0.87); @@ -37288,7 +37288,7 @@ template { width: 100px; white-space: nowrap; background: transparent; - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); font-size: 1em; padding: 0.4em 1em; font-weight: bold; @@ -39034,7 +39034,7 @@ body { overflow-x: hidden; min-width: 320px; background: #FFFFFF; - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); font-size: 14px; line-height: 1.4285em; color: rgba(0, 0, 0, 0.87); @@ -39049,7 +39049,7 @@ h2, h3, h4, h5 { - font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: var(--fonts-regular); line-height: 1.28571429em; margin: calc(2rem - 0.1428571428571429em) 0 1rem; font-weight: bold; diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 29eca15d2..3f1d5a5a5 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -104,52 +104,7 @@ url("../fonts/noto-color-emoji/NotoColorEmoji.ttf") format("truetype"); } -/* Most of these selectors override fomantic ui */ -body, -textarea, -h1, -h2, -h3, -h4, -h5, -.markdown:not(code), -.ui.accordion .title:not(.ui), -.ui.button, -.ui.card > .content > .header.ui.card > .content > .header, -.ui.category.search > .results .category > .name, -.ui.form input:not([type]), -.ui.form input[type="date"], -.ui.form input[type="datetime-local"], -.ui.form input[type="email"], -.ui.form input[type="file"], -.ui.form input[type="number"], -.ui.form input[type="password"], -.ui.form input[type="search"], -.ui.form input[type="tel"], -.ui.form input[type="text"], -.ui.form input[type="time"], -.ui.form input[type="url"], -.ui.input textarea, -.ui.form textarea, -.ui.header, -.ui.items > .item > .content > .header, -.ui.list .list > .item .header, -.ui.list > .item .header, -.ui.menu, -.ui.message .header, -.ui.modal > .header, -.ui.popup > .header, -.ui.search > .results .result .title, -.ui.search > .results > .message .header, -.ui.input > input, -.ui.input input, -.ui.statistics .statistic > .value, -.ui.statistic > .value, -.ui.statistics .statistic > .label, -.ui.statistic > .label, -.ui.steps .step .title, -.ui.text.container, -.ui.language > .menu > .item { +textarea { font-family: var(--fonts-regular); }