From ae875339da5b93ddfb065069982edfcbb8c844e8 Mon Sep 17 00:00:00 2001 From: Kyle K Date: Tue, 3 Sep 2019 08:03:25 +0000 Subject: [PATCH] refactor CSS references to Open Sans font The old way of using Open Sans was taking some browser quirk into consideration, instead of asking for the web font such as 'Open Sans' in bold, css would ask for a font called 'open_sansbold' I also found two instances of 'regularbutton' class being defined for tabs, while the class is styled globally in main.css This fixes a bug I caused where on Windows you can just ask for a bold version of a font, and it'll do it. macOS doesn't really do this properly, so the langauge selector was hard to see. --- src/css/main.css | 32 +++--- src/css/opensans_webfontkit/fonts.css | 125 +++++---------------- src/css/tabs-dark/onboard_logging-dark.css | 4 - src/css/tabs/configuration.css | 5 +- src/css/tabs/failsafe.css | 9 +- src/css/tabs/landing.css | 7 +- src/css/tabs/motors.css | 3 +- src/css/tabs/onboard_logging.css | 38 ------- src/css/tabs/osd.css | 6 +- src/css/tabs/pid_tuning.css | 47 +------- src/css/tabs/ports.css | 1 - src/css/tabs/receiver_msp.css | 3 +- src/css/tabs/setup.css | 5 +- src/css/tabs/transponder.css | 1 - src/css/tabs/vtx.css | 3 +- 15 files changed, 65 insertions(+), 224 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index 445818f9..e38f4846 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -28,7 +28,7 @@ html, body { } body { - font-family: 'open_sansregular', 'Segoe UI', Tahoma, sans-serif; + font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif; font-size: 12px; color: #303030; background-color: #3d3f3e; @@ -82,7 +82,7 @@ a.disabled { border: 1px solid #e8b423; color: #000; float: right; - font-family: 'open_sansbold', Arial; + font-weight: bold; font-size: 10px; line-height: 17px; text-shadow: 0px 1px rgba(255, 255, 255, 0.25); @@ -589,7 +589,6 @@ input[type="number"]::-webkit-inner-spin-button { } #tabs li a { - font-family: 'open_sansregular', Arial; font-weight: normal; padding-left: 33px; padding-top: 5px; @@ -1043,7 +1042,7 @@ dialog { font-size: 20px; line-height: 24px; height: 30px; - font-family: 'open_sanslight', Arial; + font-weight: 300; margin-bottom: 15px; } @@ -1055,7 +1054,7 @@ dialog { margin-top: 0px; border-radius: 3px; font-size: 11px; - font-family: 'open_sansregular', Arial; + font-weight: normal; } .note_spacer { @@ -1093,7 +1092,7 @@ dialog { border: 1px solid #dba718; color: #000; float: right; - font-family: 'open_sansbold', Arial; + font-weight: bold; font-size: 12px; text-shadow: 0px 1px rgba(255, 255, 255, 0.25); display: block; @@ -1243,7 +1242,6 @@ dialog { float: left; width: calc(100% - 2px); margin-bottom: 10px; - font-family: 'open_sansregular', Arial; } .gui_warning { @@ -1291,7 +1289,7 @@ dialog { padding-bottom: 0px; float: left; margin-bottom: 7px; - font-family: 'open_sanssemibold', Arial; + font-weight: 600; } .gui_box_bottombar { @@ -1302,7 +1300,7 @@ dialog { height: 27px; padding-top: 0px; float: left; - font-family: 'open_sanssemibold', Arial; + font-weight: 600; } .spacer_box { @@ -1339,7 +1337,7 @@ dialog { border: 1px solid #dba718; color: #000; float: right; - font-family: 'open_sansbold', Arial; + font-weight: bold; font-size: 12px; text-shadow: 0px 1px rgba(0, 0, 0, 0.25); display: block; @@ -1372,7 +1370,7 @@ dialog { border-radius: 4px; border: 1px solid #dba718; color: #000; - font-family: 'open_sanssemibold', Arial; + font-weight: 600; font-size: 12px; line-height: 13px; display: block; @@ -1413,7 +1411,7 @@ dialog { border-radius: 3px; border: 1px solid #dba718; color: #000; - font-family: 'open_sansbold', Arial; + font-weight: bold; font-size: 12px; text-shadow: 0px 1px rgba(255, 255, 255, 0.25); display: inline-block; @@ -1442,7 +1440,7 @@ dialog { border-radius: 3px; border: 1px solid #949494; color: #fff; - font-family: 'open_sanssemibold', Arial; + font-weight: 600; font-size: 11px; line-height: 11px; display: block; @@ -1666,7 +1664,6 @@ dialog { text-align: center; color: #fff; font-size: 12px; - font-family: 'open_sansregular', Arial; font-weight: normal; text-shadow: 0px 1px rgba(0, 0, 0, 0.25); margin-top: -1px; @@ -1679,7 +1676,6 @@ dialog { text-align: center; color: #fff; font-size: 12px; - font-family: 'open_sansregular', Arial; font-weight: normal; text-shadow: 0px 1px rgba(0, 0, 0, 0.25); margin-top: -1px; @@ -1950,7 +1946,7 @@ button { background-color: #ccc; color: #666; border: 1px solid var(--subtleAccent); - font-family: 'open_sanssemibold', Arial; + font-weight: 600; font-size: 10pt; cursor: pointer; } @@ -1975,7 +1971,7 @@ button.active { .tab_title { font-size: 16px; line-height: 18px; - font-family: 'open_sanslight', Arial; + font-weight: 300; margin-bottom: 10px; height: 22px; } @@ -2001,7 +1997,7 @@ button.active { } #tabs li a { - font-family: 'open_sansregular', Arial; + font-weight: normal; font-size: 12px; padding-left: 60px; padding-top: 6px; diff --git a/src/css/opensans_webfontkit/fonts.css b/src/css/opensans_webfontkit/fonts.css index c8c9ba5d..6d22a964 100644 --- a/src/css/opensans_webfontkit/fonts.css +++ b/src/css/opensans_webfontkit/fonts.css @@ -1,113 +1,48 @@ -/* Definition of Fonts */ - +/* Reordered to match the order on https://fonts.google.com/specimen/Open+Sans */ +/* Also left a comment for each style not included */ @font-face { - font-family: 'open_sanssemibold'; - src: url('opensans-semibold-webfont.eot'); - src: url('opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'), - url('opensans-semibold-webfont.woff2') format('woff2'), - url('opensans-semibold-webfont.woff') format('woff'), - url('opensans-semibold-webfont.ttf') format('truetype'), - url('opensans-semibold-webfont.svg#open_sanssemibold') format('svg'); - font-weight: normal; + font-family: 'Open Sans'; + src: url('opensans-light-webfont.woff2') format('woff2'), + url('opensans-light-webfont.woff') format('woff'); + font-weight: 300; font-style: normal; } - +/* Light Italic? */ @font-face { - font-family: 'open_sansregular'; - src: url('opensans-regular-webfont.eot'); - src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), - url('opensans-regular-webfont.woff2') format('woff2'), - url('opensans-regular-webfont.woff') format('woff'), - url('opensans-regular-webfont.ttf') format('truetype'), - url('opensans-regular-webfont.svg#open_sansregular') format('svg'); + font-family: 'Open Sans'; + src: url('opensans-regular-webfont.woff2') format('woff2'), + url('opensans-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } - @font-face { - font-family: 'open_sanslight'; - src: url('opensans-light-webfont.eot'); - src: url('opensans-light-webfont.eot?#iefix') format('embedded-opentype'), - url('opensans-light-webfont.woff2') format('woff2'), - url('opensans-light-webfont.woff') format('woff'), - url('opensans-light-webfont.ttf') format('truetype'), - url('opensans-light-webfont.svg#open_sanslight') format('svg'); + font-family: 'Open Sans'; + src: url('opensans-italic-webfont.woff2') format('woff2'), + url('opensans-italic-webfont.woff') format('woff'); font-weight: normal; - font-style: normal; + font-style: italic; } - @font-face { - font-family: 'open_sansitalic'; - src: url('opensans-italic-webfont.eot'); - src: url('opensans-italic-webfont.eot?#iefix') format('embedded-opentype'), - url('opensans-italic-webfont.woff2') format('woff2'), - url('opensans-italic-webfont.woff') format('woff'), - url('opensans-italic-webfont.ttf') format('truetype'), - url('opensans-italic-webfont.svg#open_sansitalic') format('svg'); - font-weight: normal; + font-family: 'Open Sans'; + src: url("opensans-semibold-webfont.woff2") format("woff2"), + url("opensans-semibold-webfont.woff") format("woff"); + font-weight: 600; font-style: normal; } - +/* Semi-Bold Italic */ @font-face { - font-family: 'open_sansbold_italic'; - src: url('opensans-bolditalic-webfont.eot'); - src: url('opensans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), - url('opensans-bolditalic-webfont.woff2') format('woff2'), - url('opensans-bolditalic-webfont.woff') format('woff'), - url('opensans-bolditalic-webfont.ttf') format('truetype'), - url('opensans-bolditalic-webfont.svg#open_sansbold_italic') format('svg'); - font-weight: normal; + font-family: 'Open Sans'; + src: url('opensans-bold-webfont.woff2') format('woff2'), + url('opensans-bold-webfont.woff') format('woff'); + font-weight: bold; font-style: normal; } - @font-face { - font-family: 'open_sansbold'; - src: url('opensans-bold-webfont.eot'); - src: url('opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), - url('opensans-bold-webfont.woff2') format('woff2'), - url('opensans-bold-webfont.woff') format('woff'), - url('opensans-bold-webfont.ttf') format('truetype'), - url('opensans-bold-webfont.svg#open_sansbold') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'Open Sans'; + src: url('opensans-bolditalic-webfont.woff2') format('woff2'), + url('opensans-bolditalic-webfont.woff') format('woff'); + font-weight: bold; + font-style: italic; } - -/* Fonts shouldn't be transformed by browser. -Using specific fonts for bold, italic and bold_italic instead.*/ - -i { - font-family: 'open_sansitalic'; - font-weight: normal; - font-style: normal; -} - -em { - font-family: 'open_sansitalic'; - font-style:normal; - font-weight: normal; -} - - -em strong { - font-family: 'open_sansbold_italic'; - font-style:normal; - font-weight: normal; -} - - strong em { - font-family: 'open_sansbold_italic'; - font-style:normal; - font-weight: normal; -} - -strong { - font-family: 'open_sansbold'; - font-weight: normal; - font-style: normal; -} - -b { - font-family: 'open_sansbold'; - font-weight: normal; - font-style: normal; -} \ No newline at end of file +/* Extra-Bold */ +/* Extra-Bold Italic */ diff --git a/src/css/tabs-dark/onboard_logging-dark.css b/src/css/tabs-dark/onboard_logging-dark.css index 34176abd..98d5e2e1 100644 --- a/src/css/tabs-dark/onboard_logging-dark.css +++ b/src/css/tabs-dark/onboard_logging-dark.css @@ -1,7 +1,3 @@ -.tab-onboard_logging .regular-button { - border: 1px solid #9c9c9c; -} - .tab-onboard_logging .regular-button.disabled { background-color: #393b3a; border: 1px solid #9c9c9c; diff --git a/src/css/tabs/configuration.css b/src/css/tabs/configuration.css index 49445669..7c74def0 100644 --- a/src/css/tabs/configuration.css +++ b/src/css/tabs/configuration.css @@ -370,13 +370,12 @@ } .tab-configuration .gui_box { - font-style: bold; - font-family: 'open_sanssemibold', Arial; + font-weight: bold; } .tab-configuration .gui_box span { font-style: normal; - font-family: 'open_sansregular', Arial; + font-weight: normal; line-height: 19px; color: #4f4f4f; font-size: 11px; diff --git a/src/css/tabs/failsafe.css b/src/css/tabs/failsafe.css index 7c1dcc95..6a34afb8 100644 --- a/src/css/tabs/failsafe.css +++ b/src/css/tabs/failsafe.css @@ -73,7 +73,7 @@ margin-top: 38px; margin-left: 15px; font-size: 12px; - font-family: 'open_sansregular', sans-serif; + font-weight: normal; } .tab-failsafe .radiobuttons input { @@ -174,14 +174,14 @@ .tab-failsafe .gui_box { font-style: normal; - font-family: 'open_sanssemibold', sans-serif; + font-weight: bold; margin-bottom: 15px; float: left; } .tab-failsafe .gui_box span { font-style: normal; - font-family: 'open_sansregular', sans-serif; + font-weight: normal; line-height: 19px; color: #4f4f4f; font-size: 11px; @@ -205,8 +205,7 @@ border-radius: 3px; border: 1px solid #686c6a; color: #fff !important; - font-weight: normal; - font-family: 'open_sanssemibold', sans-serif; + font-weight: 600 !important; padding-left: 3px; padding-right: 3px; margin-right: 3px; diff --git a/src/css/tabs/landing.css b/src/css/tabs/landing.css index 6692cbc3..da647d52 100644 --- a/src/css/tabs/landing.css +++ b/src/css/tabs/landing.css @@ -39,7 +39,7 @@ width: 800px; color: var(--defaultText); font-size: 14px; - font-family: 'open_sanslight', Arial; + font-weight: 300; } .tab-landing .logowrapper img { @@ -49,7 +49,7 @@ .tab-landing .logowrapper span { font-size: 22px; - font-family: 'open_sanslight', Arial; + font-weight: 300; } /* sponsors blocks */ @@ -83,7 +83,7 @@ line-height: 22px; color: white; font-weight: normal; - font-family: 'open_sanslight', Arial; + font-weight: 300; } .sponsors li a:hover { @@ -95,7 +95,6 @@ margin-top: 15px; margin-bottom: 15px; font-weight: normal; - font-family: 'open_sansregular', Arial; font-size: 12px; } diff --git a/src/css/tabs/motors.css b/src/css/tabs/motors.css index 95826081..4181b2d3 100644 --- a/src/css/tabs/motors.css +++ b/src/css/tabs/motors.css @@ -57,7 +57,6 @@ border-radius: 3px; border: 1px solid #e8b423; color: #000; - font-family: 'open_sansbold', Arial; font-size: 10px; line-height: 17px; text-shadow: 0px 1px rgba(255, 255, 255, 0.25); @@ -200,7 +199,7 @@ padding-bottom: 2px; text-align: center; font-size: 12px; - font-family: 'open_sanslight', Arial; + font-weight: 300; } .tab-motors .titles { diff --git a/src/css/tabs/onboard_logging.css b/src/css/tabs/onboard_logging.css index d0f1eaf5..88e44331 100644 --- a/src/css/tabs/onboard_logging.css +++ b/src/css/tabs/onboard_logging.css @@ -1,41 +1,3 @@ -.tab-onboard_logging .regular-button { - margin-top: 8px; - margin-bottom: 8px; - margin-right: 10px; - background-color: var(--accent); - border-radius: 3px; - border: 1px solid #dba718; - color: #000; - font-family: 'open_sansbold', Arial; - font-size: 12px; - text-shadow: 0px 1px rgba(255, 255, 255, 0.25); - display: inline-block; - cursor: pointer; - transition: all ease 0.2s; - padding: 0px; - padding-left: 9px; - padding-right: 9px; - line-height: 28px; -} -.tab-onboard_logging .regular-button:hover { - background-color: #ffcc3e; - transition: all ease 0.2s; -} -.tab-onboard_logging .regular-button:active { - background-color: #ffcc3e; - transition: all ease 0.0s; - box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.35); -} -.tab-onboard_logging .regular-button.disabled { - cursor: default; - color: #fff; - background-color: #AFAFAF; - border: 1px solid #AFAFAF; - pointer-events: none; - text-shadow: none; - opacity: 0.5; -} - .tab-onboard_logging .info { margin: 0 0 10px 0; position: relative; diff --git a/src/css/tabs/osd.css b/src/css/tabs/osd.css index dcdbe3f1..809cafaa 100644 --- a/src/css/tabs/osd.css +++ b/src/css/tabs/osd.css @@ -19,6 +19,7 @@ .tab-osd .spacer_box_title { float: none; + font-weight: normal; } .tab-osd .spacer_box_title .profileOsdHeader { @@ -269,7 +270,7 @@ border-radius: 2px; font-size: 11px; font-weight: normal; - font-family: 'open_sansregular', 'Segoe UI', Tahoma, sans-serif; + font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif; } .tab-osd .preview .gui_box_bottombar { @@ -370,7 +371,7 @@ button { padding: 4px 10px !important; - font-family: 'open_sanssemibold', Arial; + font-weight: 600; font-size: 9pt !important; cursor: pointer; } @@ -424,7 +425,6 @@ button { .spacer_box_title span { font-size: 11px; font-weight: normal; - font-family: 'open_sansregular', 'Segoe UI', Tahoma, sans-serif; } .spacer_box div input { diff --git a/src/css/tabs/pid_tuning.css b/src/css/tabs/pid_tuning.css index 0b945a94..86de0753 100644 --- a/src/css/tabs/pid_tuning.css +++ b/src/css/tabs/pid_tuning.css @@ -267,7 +267,7 @@ .tab-pid_tuning .tab_container { float: left; - width: 396px; + width: 408px; height: 29px; border-right-width: 0px; background: #fff; @@ -347,7 +347,6 @@ font-size: 12px; border-bottom: 1px solid #ccc; color: #828282; - /* font-family: 'open_sans', Arial; */ background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, rgba(255, 255, 255, .2) 60%, rgba(255, 255, 255, .2) 70%, transparent 70%, transparent 80%, rgba(255, 255, 255, .2) 80%, rgba(255, 255, 255, .2) 90%, transparent 90%, transparent 100%, rgba(255, 255, 255, .2) 100%, transparent); } @@ -371,7 +370,7 @@ font-size: 12px; border-bottom: 1px solid #ccc; color: #828282; - font-family: 'open_sans', Arial; + font-weight: normal; background-image: linear-gradient(315deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 20%, rgba(255, 255, 255, .2) 20%, rgba(255, 255, 255, .2) 30%, transparent 30%, transparent 40%, rgba(255, 255, 255, .2) 40%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 60%, @@ -490,7 +489,7 @@ .tab-pid_tuning .gui_box span { font-style: normal; - font-family: 'open_sansregular', Arial; + font-weight: normal; line-height: 19px; color: #7d7d7d; font-size: 11px; @@ -735,44 +734,6 @@ margin-bottom: 0.5em; } -.tab-pid_tuning .regular-button { - margin-top: 8px; - margin-bottom: 8px; - margin-right: 10px; - background-color: var(--accent); - border-radius: 3px; - border: 1px solid #dba718; - color: #000; - font-family: 'open_sansbold', Arial; - font-size: 12px; - text-shadow: 0px 1px rgba(255, 255, 255, 0.25); - display: inline-block; - cursor: pointer; - transition: all ease 0.2s; - padding: 0px; - padding-left: 9px; - padding-right: 9px; - line-height: 28px; -} -.tab-pid_tuning .regular-button:hover { - background-color: #ffcc3e; - transition: all ease 0.2s; -} -.tab-pid_tuning .regular-button:active { - background-color: #ffcc3e; - transition: all ease 0.0s; - box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.35); -} -.tab-pid_tuning .regular-button.disabled { - cursor: default; - color: #fff; - background-color: #AFAFAF; - border: 1px solid #AFAFAF; - pointer-events: none; - text-shadow: none; - opacity: 0.5; -} - .tab-pid_tuning dialog select { border: 1px solid silver; margin-left: 5px; @@ -827,4 +788,4 @@ .tab-pid_tuning .subtab-rates .ratePreview.spacer_left { width: 100%; } -} \ No newline at end of file +} diff --git a/src/css/tabs/ports.css b/src/css/tabs/ports.css index 1f71c093..ac2c7a8c 100644 --- a/src/css/tabs/ports.css +++ b/src/css/tabs/ports.css @@ -37,7 +37,6 @@ .tab-ports table thead tr:first-child { font-size: 12px; height: 25px; - font-family: 'open_sansregular', Arial; border-top: 0px; border-right: 0px; border-left: 0px; diff --git a/src/css/tabs/receiver_msp.css b/src/css/tabs/receiver_msp.css index 0f2b5047..9e74a33d 100644 --- a/src/css/tabs/receiver_msp.css +++ b/src/css/tabs/receiver_msp.css @@ -103,7 +103,7 @@ body { a { text-decoration: none; color: #000; - font-family: 'open_sanssemibold', Arial; + font-weigt: bold; } a:hover { @@ -125,7 +125,6 @@ a:hover { border: 1px solid #4c8829; color: #fff; float: left; - font-family: 'open_sansbold', Arial; font-size: 12px; text-shadow: 0px 1px #00000040; display: block; diff --git a/src/css/tabs/setup.css b/src/css/tabs/setup.css index a0ff73d8..9728becd 100644 --- a/src/css/tabs/setup.css +++ b/src/css/tabs/setup.css @@ -222,7 +222,7 @@ border-radius: 4px; border: 1px solid #ffbb00; color: #ffbb00; - font-family: 'open_sanssemibold', Arial; + font-weight: bold; font-size: 12px; line-height: 13px; transition: all ease 0.2s; @@ -245,7 +245,7 @@ border-radius: 4px; border: 1px solid #ffbb00; color: #ffbb00; - font-family: 'open_sanssemibold', Arial; + font-weight: bold; font-size: 12px; line-height: 13px; transition: all ease 0.2s; @@ -266,7 +266,6 @@ border-radius: 3px; border: 1px solid #dba718; color: #000; - font-family: 'open_sansbold', Arial; font-size: 12px; text-shadow: 0px 1px rgba(255, 255, 255, 0.25); display: inline-block; diff --git a/src/css/tabs/transponder.css b/src/css/tabs/transponder.css index a71065ca..4a6e6a58 100644 --- a/src/css/tabs/transponder.css +++ b/src/css/tabs/transponder.css @@ -63,7 +63,6 @@ .tab-transponder .gui_box span { font-style: normal; - font-family: 'open_sansregular', Arial; line-height: 19px; color: #4f4f4f; font-size: 11px; diff --git a/src/css/tabs/vtx.css b/src/css/tabs/vtx.css index 2f688500..2865ff94 100644 --- a/src/css/tabs/vtx.css +++ b/src/css/tabs/vtx.css @@ -51,7 +51,6 @@ .tab-vtx .gui_box span { font-style: normal; - font-family: 'open_sansregular', Arial; line-height: 19px; color: var(--mutedtext); font-size: 11px; @@ -122,4 +121,4 @@ #tab-vtx-templates { display: none; -} \ No newline at end of file +}