sundowndev
/
betaflight-configurator
mirror of https://github.com/sundowndev/betaflight-configurator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Refactored some CSS to use vars (#1549) 

Refactored some CSS to use vars
10.7.0-preview
Michael Keller 2019-08-01 22:27:30 +12:00 committed by GitHub
parent 6f525c376c 35f4b699d9
commit 5eedc3b507
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 48 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/css/main.css
View File

@ -1,6 +1,7 @@
:root {
--accent: #ffbb00;
--subtleAccent: #ddd;
--error: red;
--subtleAccent: #dddddd;
--quietText: #ffffff;
--quietHeader: #828885;
--defaultText: #000000;
@ -76,7 +77,7 @@ a.disabled {
.cf_doc_version_bt a {
padding: 1px 9px 1px 9px;
margin-top: -45px;
background-color: #ffbb00;
background-color: var(--accent);
border-radius: 3px;
border: 1px solid #e8b423;
color: #000;
@ -127,11 +128,11 @@ input[type="number"]::-webkit-inner-spin-button {
}
.message-positive {
color: #ffbb00 !important;
color: var(--accent) !important;
}
.message-negative {
color: red !important;
color: var(--error);
font-weight: bold;
}
@ -217,7 +218,7 @@ input[type="number"]::-webkit-inner-spin-button {
border-radius: 3px;
padding: 3px;
margin-bottom: 5px;
color: #ddd;
color: var(--subtleAccent);
position: absolute;
margin-top: -59px;
margin-left: -187px;
@ -228,7 +229,7 @@ input[type="number"]::-webkit-inner-spin-button {
}
#port-picker .auto_connect, .gray {
color: #ddd;
color: var(--subtleAccent);
}
#header_dataflash {
@ -545,7 +546,7 @@ input[type="number"]::-webkit-inner-spin-button {
float: left;
height: calc(100% - 150px);
width: 200px;
border-right: 4px solid #ffbb00;
border-right: 4px solid var(--accent);
background-color: #2e2e2e;
transition: all 0.2s;
@ -618,7 +619,7 @@ input[type="number"]::-webkit-inner-spin-button {
}
#tabs li.active a {
background-color: #ffbb00;
background-color: var(--accent);
color: #000;
transition: none;
text-shadow: 0px 1px rgba(255, 255, 255, 0.45);
@ -627,7 +628,7 @@ input[type="number"]::-webkit-inner-spin-button {
#tabs li.active a:hover {
cursor: default;
background-color: #ffbb00;
background-color: var(--accent);
}
.tabicon {
@ -1028,7 +1029,7 @@ dialog {
/* Tab Title */
.tab_title {
border-bottom: 1px solid #ffbb00;
border-bottom: 1px solid var(--accent);
font-size: 20px;
line-height: 24px;
height: 30px;
@ -1077,7 +1078,7 @@ dialog {
margin-top: 0px;
margin-bottom: 0px;
margin-right: 20px;
background-color: #ffbb00;
background-color: var(--accent);
border-radius: 3px;
border: 1px solid #dba718;
color: #000;
@ -1100,7 +1101,7 @@ dialog {
}
.content_toolbar .btn a:active {
background-color: #ffbb00;
background-color: var(--accent);
transition: all ease 0.0s;
box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.35);
}
@ -1255,7 +1256,7 @@ dialog {
}
.gui_note .gui_box_titlebar {
background-color: #ffbb00;
background-color: var(--accent);
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .3) 10%, transparent 10%, transparent 20%,
rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, .3) 30%, transparent 30%, transparent 40%,
rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, .3) 50%, transparent 50%, transparent 60%,
@ -1323,7 +1324,7 @@ dialog {
margin-top: 9px;
margin-bottom: 0px;
margin-right: 20px;
background-color: #ffbb00;
background-color: var(--accent);
border-radius: 3px;
border: 1px solid #dba718;
color: #000;
@ -1357,7 +1358,7 @@ dialog {
.default_btn a {
padding: 5px 0px 5px 0px;
text-align: center;
background-color: #ffbb00;
background-color: var(--accent);
border-radius: 4px;
border: 1px solid #dba718;
color: #000;
@ -1398,7 +1399,7 @@ dialog {
margin-top: 8px;
margin-bottom: 8px;
margin-right: 10px;
background-color: #ffbb00;
background-color: var(--accent);
border-radius: 3px;
border: 1px solid #dba718;
color: #000;
@ -1439,10 +1440,10 @@ dialog {
}
.small a:hover {
background-color: #ffbb00;
background-color: var(--accent);
color: #000;
text-shadow: 0px 1px rgba(255, 255, 255, 0.25);
border: 1px solid #ffbb00;
border: 1px solid var(--accent);
transition: all ease 0.2s;
}
@ -1453,7 +1454,7 @@ dialog {
}
.green a {
background-color: #ffbb00;
background-color: var(--accent);
text-shadow: 0px 1px rgba(255, 255, 255, 0.25);
color: #000;
border: 1px solid #dba718;
@ -1507,7 +1508,7 @@ dialog {
}
.gps_true {
background-color: #ffbb00;
background-color: var(--accent);
padding: 1px 7px 2px 7px;
border-radius: 3px;
color: #FFFFFF;
@ -1575,7 +1576,7 @@ dialog {
}
.connect_b a.connect {
background-color: #ffbb00;
background-color: var(--accent);
border: 1px solid #dba718;
background-image: url(../images/icons/cf_icon_usb2_white.svg);
background-repeat: no-repeat;
@ -1621,7 +1622,7 @@ dialog {
}
.firmware_b a.flash {
background-color: #ffbb00;
background-color: var(--accent);
border: 1px solid #dba718;
background-image: url(../images/icons/cf_icon_flasher_white.svg);
background-repeat: no-repeat;
@ -1754,7 +1755,7 @@ dialog {
.dataflash-free_global {
background-color: #ffbb00;
background-color: var(--accent);
border-radius: 4px;
}
@ -1804,7 +1805,7 @@ dialog {
}
#expertMode {
color: #ddd;
color: var(--subtleAccent);
margin-top: 27px;
width:125px;
float: right;
@ -1875,7 +1876,7 @@ dialog {
position: relative;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.20);
border-radius: 0px;
background-color: #ffbb00;
background-color: var(--accent);
/* border-radius: 4px; */
margin-top: 0px;
}
@ -1940,7 +1941,7 @@ button {
}
button.active {
background-color: #ffbb00;
background-color: var(--accent);
border: 1px solid #dba718;
color: #000;
}
@ -2079,7 +2080,7 @@ input {
.jBox-container {
background: #fff;
border:1px solid #ffbb00;
border:1px solid var(--accent);
font-size: 11px;
line-height: 13px;
color: #525352;
@ -2103,5 +2104,5 @@ input {
.jBox-pointer:after {
width: 10px;
height: 9px;
border:1px solid #ffbb00;
border:1px solid var(--accent);
}

2
src/css/tabs/adjustments.css
View File

@ -3,7 +3,7 @@
}
.tab-adjustments .range .marker, .tab-adjustments .channel-slider .noUi-connect {
background: #ffbb00;
background: var(--accent);
box-shadow: inset 0 0px 2px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.6);
}

6
src/css/tabs/auxiliary.css
View File

@ -16,17 +16,17 @@
}
.tab-auxiliary .range .marker, .tab-auxiliary .channel-slider .noUi-connect {
background: #ffbb00;
background: var(--accent);
border-radius: 3px;
}
.tab-auxiliary .mode.on .info {
background: #ffbb00;
background: var(--accent);
color: black;
}
.tab-auxiliary .mode.on:nth-child(odd) .info {
background: #ffbb00;
background: var(--accent);
}
.tab-auxiliary .mode.off .info {

2
src/css/tabs/help.css
View File

@ -28,7 +28,7 @@
}
.tab-help li span a {
color: #ffbb00;
color: var(--accent);
}
.tab-help .subline {

10
src/css/tabs/landing.css
View File

@ -21,7 +21,7 @@
}
.tab-landing .content_mid {
background-color: #ffbb00;
background-color: var(--accent);
overflow: hidden;
}
@ -193,7 +193,7 @@
#changelog .wrapper {
height: 100%;
padding: 0 20px;
border-left: 5px solid #ffbb00;
border-left: 5px solid var(--accent);
overflow-y: auto;
display: none;
}
@ -203,7 +203,7 @@
top: 50px;
right: 215px;
position: absolute;
background: #ffbb00;
background: var(--accent);
border-radius: 5px 5px 0 0;
border-bottom: none;
height: 30px;
@ -269,7 +269,7 @@
#privacy_policy .wrapper {
height: 100%;
padding: 0 20px;
border-left: 5px solid #ffbb00;
border-left: 5px solid var(--accent);
overflow-y: auto;
display: none;
}
@ -279,7 +279,7 @@
top: 170px;
right: 450px;
position: absolute;
background: #ffbb00;
background: var(--accent);
border-radius: 5px 5px 0 0;
border-bottom: none;
height: 30px;

2
src/css/tabs/led_strip.css
View File

@ -392,7 +392,7 @@
.tab-led-strip .wires-remaining div {
font-size: 40px;
color: #ffbb00;
color: var(--accent);
margin-bottom: -5px;
margin-top: -10px;
}

2
src/css/tabs/motors.css
View File

@ -53,7 +53,7 @@
}
.tab-motors .plot_control .motor-button a {
background-color: #ffbb00;
background-color: var(--accent);
border-radius: 3px;
border: 1px solid #e8b423;
color: #000;

4
src/css/tabs/onboard_logging.css
View File

@ -2,7 +2,7 @@
margin-top: 8px;
margin-bottom: 8px;
margin-right: 10px;
background-color: #ffbb00;
background-color: var(--accent);
border-radius: 3px;
border: 1px solid #dba718;
color: #000;
@ -145,7 +145,7 @@
.tab-onboard_logging .dataflash-used,
.tab-onboard_logging .sdcard-other {
background-color: #ffbb00;
background-color: var(--accent);
border-radius: 4px;
}

8
src/css/tabs/pid_tuning.css
View File

@ -394,7 +394,7 @@
}
.tab-pid_tuning .tab_container td.active {
background-color: #ffbb00;
background-color: var(--accent);
color: #000;
transition: none;
height: 27px;
@ -403,7 +403,7 @@
}
.tab-pid_tuning .tab_container td.active a {
background-color: #ffbb00;
background-color: var(--accent);
color: #000;
text-shadow: 0px 1px rgba(255, 255, 255, 0.45);
}
@ -811,7 +811,7 @@ width: 40%;
}
.tab-pid_tuning .tabboarder {
background-color: #ffbb00;
background-color: var(--accent);
float: left;
width: 100%;
height: 3px;
@ -850,7 +850,7 @@ width: 40%;
margin-top: 8px;
margin-bottom: 8px;
margin-right: 10px;
background-color: #ffbb00;
background-color: var(--accent);
border-radius: 3px;
border: 1px solid #dba718;
color: #000;

2
src/css/tabs/receiver_msp.css
View File

@ -120,7 +120,7 @@ a:hover {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #ffbb00;
background-color: var(--accent);
border-radius: 3px;
border: 1px solid #4c8829;
color: #fff;