1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-23 16:25:22 +03:00

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.
This commit is contained in:
Kyle K 2019-09-03 08:03:25 +00:00
parent f547d84eef
commit ae875339da
15 changed files with 65 additions and 224 deletions

View file

@ -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;

View file

@ -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;
}
/* Extra-Bold */
/* Extra-Bold Italic */

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;
}

View file

@ -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 {

View file

@ -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;

View file

@ -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 {

View file

@ -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%;
}
}
}

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;

View file

@ -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;
}
}