sprinkle in some new bright colors for sensor status, reworking meters in receiver tab
cTn
parent
0cb69faf00
commit
e7534f8035
4
main.css
4
main.css
|
|
@ -127,13 +127,13 @@ input[type="number"]::-webkit-inner-spin-button {
|
|||
border: 1px solid #c0c0c0;
|
||||
border-right: 0;
|
||||
|
||||
background-color: #901515;
|
||||
background-color: #e32424;
|
||||
}
|
||||
#sensor-status li:last-child {
|
||||
border-right: 1px solid #c0c0c0;
|
||||
}
|
||||
#sensor-status .on {
|
||||
background-color: #076b0c;
|
||||
background-color: #b8cf02;
|
||||
}
|
||||
#options {
|
||||
float: right;
|
||||
|
|
|
|||
|
|
@ -11,42 +11,7 @@
|
|||
}
|
||||
.tab-receiver .bars ul {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(1) {
|
||||
color: #00A8F0;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(2) {
|
||||
color: #C0D800;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(3) {
|
||||
color: #f8921a;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(4) {
|
||||
color: #f02525;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(5) {
|
||||
color: #9440ED;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(6) {
|
||||
color: #45147a;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(7) {
|
||||
color: #cf7a26;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(8) {
|
||||
color: #147a66;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(9) {
|
||||
color: #0609a9;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(10) {
|
||||
color: #7a1445;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(11) {
|
||||
color: #267acf;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(12) {
|
||||
color: #7a6614;
|
||||
clear: left;
|
||||
}
|
||||
.tab-receiver .bars li {
|
||||
float: left;
|
||||
|
|
@ -54,23 +19,77 @@
|
|||
height: 22px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(1) meter::-webkit-meter-optimum-value {
|
||||
background: #00A8F0;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(2) meter::-webkit-meter-optimum-value {
|
||||
background: #C0D800;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(3) meter::-webkit-meter-optimum-value {
|
||||
background: #f8921a;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(4) meter::-webkit-meter-optimum-value {
|
||||
background: #f02525;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(5) meter::-webkit-meter-optimum-value {
|
||||
background: #9440ED;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(6) meter::-webkit-meter-optimum-value {
|
||||
background: #45147a;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(7) meter::-webkit-meter-optimum-value {
|
||||
background: #cf7a26;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(8) meter::-webkit-meter-optimum-value {
|
||||
background: #147a66;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(9) meter::-webkit-meter-optimum-value {
|
||||
background: #0609a9;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(10) meter::-webkit-meter-optimum-value {
|
||||
background: #7a1445;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(11) meter::-webkit-meter-optimum-value {
|
||||
background: #267acf;
|
||||
}
|
||||
.tab-receiver .bars ul:nth-of-type(12) meter::-webkit-meter-optimum-value {
|
||||
background: #7a6614;
|
||||
}
|
||||
.tab-receiver .bars .name {
|
||||
width: 60px;
|
||||
padding: 0 10px 0 0;
|
||||
|
||||
width: 40px;
|
||||
|
||||
text-align: right;
|
||||
}
|
||||
.tab-receiver .bars .meter {
|
||||
width: 70%;
|
||||
position: relative;
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
.tab-receiver .bars .meter meter {
|
||||
margin-top: 4px;
|
||||
-webkit-appearance: none;
|
||||
|
||||
margin-top: 2px;
|
||||
|
||||
width: 100%;
|
||||
height: 14px;
|
||||
height: 17px; /* border doesn't count here */
|
||||
|
||||
border: 1px solid silver;
|
||||
}
|
||||
.tab-receiver .bars .meter meter::-webkit-meter-bar {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.tab-receiver .bars .value {
|
||||
position: absolute;
|
||||
|
||||
margin-top: 2px;
|
||||
left: calc(50% - 25px);
|
||||
width: 50px;
|
||||
margin-left: 10px;
|
||||
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
color: white;
|
||||
text-shadow: 0px 0px 2px #000000;
|
||||
}
|
||||
.tab-receiver .tunings {
|
||||
float: right;
|
||||
|
|
|
|||
|
|
@ -60,10 +60,11 @@ TABS.receiver.initialize = function (callback) {
|
|||
bar_container.append('\
|
||||
<ul>\
|
||||
<li class="name">' + name + '</li>\
|
||||
<li class="meter"><meter min="800" max="2200"></meter></li>\
|
||||
<li class="value"></li>\
|
||||
<li class="meter">\
|
||||
<span class="value"></span>\
|
||||
<meter min="800" max="2200"></meter>\
|
||||
</li>\
|
||||
</ul>\
|
||||
<div class="clear-both"></div>\
|
||||
');
|
||||
}
|
||||
|
||||
|
|
@ -296,7 +297,7 @@ TABS.receiver.initialize = function (callback) {
|
|||
// update bars with latest data
|
||||
for (var i = 0; i < RC.active_channels; i++) {
|
||||
meter_array[i].val(RC.channels[i]);
|
||||
meter_values_array[i].text('[ ' + RC.channels[i] + ' ]');
|
||||
meter_values_array[i].text(RC.channels[i]);
|
||||
}
|
||||
|
||||
// push latest data to the main array
|
||||
|
|
|
|||
Loading…
Reference in New Issue