1408 lines
29 KiB
CSS
1408 lines
29 KiB
CSS
/*
|
|
|
|
Copyright 2020, 2021 Michael Rose
|
|
Copyright 2017, 2018 Max H. Parke KA1RBI
|
|
|
|
This file is part of OP25
|
|
|
|
OP25 is free software; you can redistribute it and/or modify it
|
|
under the terms of the GNU General Public License as published by
|
|
the Free Software Foundation; either version 3, or (at your option)
|
|
any later version.
|
|
|
|
OP25 is distributed in the hope that it will be useful, but WITHOUT
|
|
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
|
|
or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public
|
|
License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
along with OP25; see the file COPYING. If not, write to the Free
|
|
Software Foundation, Inc., 51 Franklin Street, Boston, MA
|
|
02110-1301, USA.
|
|
|
|
*/
|
|
|
|
/* ------------- LIGHT MODE -------------------- */
|
|
:root { /* default */
|
|
--logo: url("op25.png");
|
|
--cbox: url("cx-lite.png");
|
|
--sysmsg-text: #666;
|
|
--label-hold: #c00;
|
|
--syscrptro: #f00000; /* encrypted text */
|
|
|
|
--bg-color: #fff; /* main page background color */
|
|
--sysmsg-background: #f9f9f9;
|
|
--div-border-1: grey; /* border color for a main div */
|
|
--div-border-2: #ccc; /* a lighter div border (sysMsg) */
|
|
--div-background-1: #eee;
|
|
|
|
--button-grad-1: #31687e; /* button fades (skip, hold, home, config, etc) */
|
|
--button-grad-2: #56a0bd;
|
|
--button-bord-1: gray;
|
|
--button-text-1: white;
|
|
--button-text-2: black;
|
|
|
|
--table-grad-1: #31687e; /* table headers gradient */
|
|
--table-grad-2: #56a0bd;
|
|
--table-header-text: #fff;
|
|
|
|
--hover-1: #ddd; /* Table hover */
|
|
|
|
--status-grad-1: white; /* main display border fade effect */
|
|
--status-grad-2: silver;
|
|
--status-border: #f00; /* intended for no gradient browser, not used */
|
|
|
|
--nav-grad-1: #bbb;
|
|
--nav-grad-2: #ccc;
|
|
--nav-background: #bbb; /* no grad browser support */
|
|
|
|
--display-grad-1: LightGray; /* the main tg/system display bg fade */
|
|
--display-grad-2: White; /* 2 is the middle, 1 is the upper/lower */
|
|
|
|
--red-value: #f00000; /* red text, others */
|
|
--value: #000060; /* main display, tg id, source, freq, and others */
|
|
|
|
--system-text: #000060; /* main display, system, talkgroup */
|
|
--gray-text-1: #999;
|
|
|
|
--default-text: #000;
|
|
|
|
|
|
--label: #484848; /* misc lables */
|
|
--label-sm: #444;
|
|
|
|
--input-background: #fff;
|
|
--input-background-2: #eee;
|
|
--input-text: #000;
|
|
|
|
/* talkgroup colors: */
|
|
--c1: #0066ff; /* blue - SmartColor 1 */
|
|
--c2: #ff0000; /* red - SmartColor 2 */
|
|
--c3: #ff6600; /* orange - SmartColor 3 */
|
|
--c4: #000; /* black */
|
|
--c5: #800080; /* purple */
|
|
--c6: #00cc00; /* lime green */
|
|
--c7: #009933; /* green */
|
|
--c8: #cc9900; /* yellow */
|
|
--c9: #a6a6a6; /* gray */
|
|
--c10: #ff6666; /* pink (!) */
|
|
--c11: #005580; /* lighter blue */
|
|
}
|
|
|
|
/* ------------- DARK MODE -------------------- */
|
|
|
|
[data-theme="dark"] {
|
|
--logo: url("op25-dark.png");
|
|
--cbox: url("cx.png");
|
|
--sysmsg-text: #666;
|
|
--label-hold: #ff0000;
|
|
--syscrptro: #f00000; /* encrypted text */
|
|
|
|
--bg-color: Black; /* main page background color */
|
|
--sysmsg-background: #060606;
|
|
--div-border-1: #444; /* border color for any old div */
|
|
--div-border-2: #ccc; /* a lighter div border (sysMsg) */
|
|
--div-background-1: #eee;
|
|
|
|
--button-grad-1: #444; /* button fades (skip, hold, home, config, etc) */
|
|
--button-grad-2: black;
|
|
--button-bord-1: gray;
|
|
--button-text-1: yellow;
|
|
--button-text-2: white;
|
|
|
|
--table-grad-1: #444; /* table headers */
|
|
--table-grad-2: black;
|
|
--table-header-text: #ddd;
|
|
|
|
--hover-1: #333; /* Table hover */
|
|
|
|
--status-grad-1: #cca300; /* main display border fade effect */
|
|
--status-grad-2: #0c0;
|
|
--status-border: #f00; /* intended for no gradient browser, not used */
|
|
|
|
--nav-grad-1: #225; /* nav menu fade effect */
|
|
--nav-grad-2: #444;
|
|
--nav-background: #222; /* no grad browser support */
|
|
|
|
--display-grad-1: #222; /* the main tg/system display bg fade */
|
|
--display-grad-2: black; /* 2 is the middle, 1 is the upper/lower */
|
|
|
|
--red-value: #ff0000; /* red text, others */
|
|
--value: #66ff66; /* main display, tg id, source, freq, and others */
|
|
|
|
--system-text: #66ff66; /* main display, system, talkgroup */
|
|
--gray-text-1: #eee;
|
|
|
|
--default-text: #ddd;
|
|
|
|
--label: #eee; /* misc lables */
|
|
--label-sm: #eee;
|
|
|
|
--input-background: #000;
|
|
--input-background-2: #111;
|
|
--input-text: #fff;
|
|
|
|
|
|
/* talkgroup & tag colors: */
|
|
--c1: #0066ff; /* blue - SmartColor 1 */
|
|
--c2: #ff0000; /* red - SmartColor 2 */
|
|
--c3: #ff6600; /* orange */
|
|
--c4: #fff; /* white */
|
|
--c5: #9966ff; /* purple */
|
|
--c6: #00ff00; /* lime green */
|
|
--c7: #009933; /* green */
|
|
--c8: #ffff00; /* yellow */
|
|
--c9: #eee; /* gray */
|
|
--c10: #ff3355; /* pink (!) */
|
|
--c11: #0080C0; /* lighter blue */
|
|
|
|
}
|
|
|
|
/* END DARK MODE */
|
|
|
|
|
|
body {
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
/* BEGIN 2 COLUMN LAYOUT ELEMENTS */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Create two equal columns that floats next to each other */
|
|
.column {
|
|
float: left;
|
|
width: 50%;
|
|
padding: 5px;
|
|
/* height: 300px; /* Should be removed. Only for demonstration */ */
|
|
}
|
|
|
|
/* Clear floats after the columns */
|
|
.row:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
|
|
@media screen and (max-width: 740px) {
|
|
.column {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
/* END 2 COLUMN LAYOUT ELEMENTS */
|
|
|
|
|
|
.main {
|
|
margin-top: 5px;
|
|
/* make margin-top 60px for fixed nav-bar, see also .nav-bar below. */
|
|
|
|
}
|
|
|
|
a {
|
|
color: var(--red-value);
|
|
}
|
|
|
|
|
|
/*
|
|
#div_status body {
|
|
|
|
background-color: var(--bg-color);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
*/
|
|
|
|
header {
|
|
/* empty */
|
|
}
|
|
|
|
#div_status table { /* rx screen */
|
|
border-collapse: collapse;
|
|
/* font-family: "Courier New", Courier, Monospace; */
|
|
/* font-family: Arial, Helvetica, sans-serif; */
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
border: 1px solid var(--div-border-1);
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
#div_status th {
|
|
|
|
border: 1px solid var(--div-border-1);
|
|
padding: 3px;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--table-header-text);
|
|
font-weight: bold;
|
|
background: var(--button-grad-1); /* For browsers that do not support gradients */
|
|
background: linear-gradient(var(--table-grad-1), var(--table-grad-2));
|
|
}
|
|
|
|
#div_status td {
|
|
border: 0px solid var(--div-border-1);
|
|
padding: 3px;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
#div_images table {
|
|
width: 730px;
|
|
border: 1px solid var(--div-border-1);
|
|
background-color: black;
|
|
}
|
|
|
|
#div_s2 table {
|
|
border: 0px solid var(--div-border-1);
|
|
}
|
|
|
|
#div_s2 td {
|
|
border-bottom: 1px solid var(--div-border-1);
|
|
border-top: 1px solid var(--div-border-1);
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
padding: 3px;
|
|
background: transparent;
|
|
}
|
|
|
|
.tt {
|
|
font-family:'Lucida Console', monospace;
|
|
}
|
|
|
|
.colorPicker {
|
|
/* use this to set the background color
|
|
of the color picker widget, default for now */
|
|
}
|
|
|
|
.colorReplacer {
|
|
/* just the color picker button */
|
|
background: var(--div-border-2);
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
display:none;
|
|
}
|
|
|
|
input[type="checkbox"] + label {
|
|
color: var(--default-text);
|
|
font-family:Arial, sans-serif;
|
|
font-size:14px;
|
|
}
|
|
|
|
input[type="checkbox"] + label span {
|
|
display:inline-block;
|
|
width:19px;
|
|
height:19px;
|
|
margin:-1px 4px 0 0;
|
|
vertical-align:middle;
|
|
background:var(--cbox) left top no-repeat;
|
|
cursor:pointer;
|
|
}
|
|
|
|
input[type="checkbox"]:checked + label span {
|
|
background:var(--cbox) -19px top no-repeat;
|
|
}
|
|
|
|
|
|
select {
|
|
margin: 0px 10px 0px 0px;
|
|
width: 150px;
|
|
padding: 2px 2px 2px 2px;
|
|
font-size: 14px;
|
|
border: 0px solid var(--div-border-2);
|
|
height: 20px;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
color: var(--default-text);
|
|
background: url(da.png) 100% / 20% no-repeat var(--sysmsg-background);
|
|
}
|
|
|
|
button {
|
|
border-color: var(--button-bord-1);
|
|
color: var(--button-text-1);
|
|
padding: 4px 6px 8px 6px;
|
|
text-decoration: none;
|
|
margin: 1px 1px 1px 1px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2), 0 2px 5px 0 rgba(0,0,0,0.19);
|
|
background: var(--button-grad-1); /* For browsers that do not support gradients */
|
|
background: linear-gradient(var(--button-grad-1), var(--button-grad-2));
|
|
}
|
|
|
|
button:hover {
|
|
background: linear-gradient(var(--button-grad-2), var(--button-grad-1));
|
|
}
|
|
|
|
.btn {
|
|
color: var(--button-text-1);
|
|
}
|
|
|
|
.btnExp {
|
|
color: var(--button-text-2);
|
|
background-color: var(--bg-color);
|
|
background: none;
|
|
float: right;
|
|
border: 0px solid var(--div-border-1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* CAUTION: IE hackery ahead */
|
|
select::-ms-expand {
|
|
display: none; /* remove default arrow on ie10 and ie11 */
|
|
}
|
|
|
|
/* target Internet Explorer 9 to undo the custom arrow */
|
|
@media screen and (min-width:0\0) {
|
|
select {
|
|
background:none\9;
|
|
padding: 5px\9;
|
|
}
|
|
}
|
|
|
|
.time { /* 24 hour time hh:mm:ss -- not currently used */
|
|
text-overflow: hidden;
|
|
max-width: 8ch;
|
|
}
|
|
|
|
.historyLabel {
|
|
width: 725px;
|
|
/*
|
|
background: linear-gradient(
|
|
180deg, var(--bg-color) calc(50% - 1px),
|
|
var(--div-border-1) calc(50%),
|
|
var(--bg-color) calc(50% + 1px)
|
|
);
|
|
*/
|
|
|
|
vertical-align: bottom;
|
|
border-collapse: collapse;
|
|
/* height: 48px; */
|
|
border: 0px solid var(--div-border-1);
|
|
margin: 0px 0px 0px 1px;
|
|
padding: 0px 6px 4px 6px;
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
color: var(--default-text);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.hlabel {
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
.history {
|
|
width: 705px;
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--div-border-1);
|
|
padding: 3px;
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
color: var(--default-text);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.history th, td {
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--div-border-1);
|
|
color: var(--default-text);
|
|
padding: 3px;
|
|
}
|
|
|
|
.history th {
|
|
background: var(--button-grad-1); /* For browsers that do not support gradients */
|
|
background: linear-gradient(var(--table-grad-1), var(--table-grad-2));
|
|
color: var(--table-header-text);
|
|
/* fixed table heading */
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.history td {
|
|
font-size: 10pt;
|
|
}
|
|
|
|
.plot td {
|
|
text-align: center;
|
|
}
|
|
|
|
#div_logs {
|
|
width: 730px;
|
|
}
|
|
|
|
#bandplan th, td {
|
|
/* background: none; */
|
|
border: 0px solid;
|
|
}
|
|
|
|
hr {
|
|
width: 718px;
|
|
float: left;
|
|
padding: 0px;
|
|
}
|
|
|
|
.control-button { /* skip/hold/lockout buttons */
|
|
border-color: var(--button-bord-1);
|
|
height: 42px;
|
|
color: var(--button-text-1);
|
|
padding: 10px 10px;
|
|
text-decoration: none;
|
|
margin: 1px 1px;
|
|
cursor: pointer;
|
|
width: 98px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2), 0 2px 5px 0 rgba(0,0,0,0.19);
|
|
background: var(--button-grad-1); /* For browsers that do not support gradients */
|
|
background: linear-gradient(var(--button-grad-1), var(--button-grad-2));
|
|
}
|
|
|
|
.control-button:hover {
|
|
background: linear-gradient(var(--button-grad-2), var(--button-grad-1));
|
|
}
|
|
|
|
.controlsDisplay { /* holds buttons, and display */
|
|
width: 725px; /* 730 */
|
|
border: 0px solid var(--div-border-1);
|
|
vertical-align: top;
|
|
height: 178px;
|
|
padding: 2px;
|
|
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
|
|
background: var(--status-grad-1); /* For browsers that do not support gradients */
|
|
background: linear-gradient(var(--status-grad-1), var(--status-grad-2));
|
|
}
|
|
|
|
.controls { /* skip/hold/lockout buttons (1) */
|
|
|
|
border: 1px solid var(--button-bord-1);
|
|
width: 100px;
|
|
float: left;
|
|
height: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.cfg_list {
|
|
border: 1px solid var(--div-border-1);
|
|
padding: 5px;
|
|
width: 260px;
|
|
}
|
|
|
|
.displaySettings {
|
|
border: 1px solid var(--div-border-1);
|
|
padding: 0px;
|
|
width: 720px;
|
|
|
|
}
|
|
|
|
.statDisplay { /* main display - freq, sys, tgid (2) */
|
|
padding: 0px;
|
|
width: 522px;
|
|
float: left;
|
|
position: relative;
|
|
display: inline-block;
|
|
border: 1px solid (var(--div-border-1));
|
|
height: 100%;
|
|
background: var(--display-grad-1); /* For browsers that do not support gradients */
|
|
background: linear-gradient(var(--display-grad-1), var(--display-grad-2), var(--display-grad-1));
|
|
}
|
|
|
|
.sysMsg { /* OP25 logo and message box on right (3) */
|
|
padding: 0px;
|
|
/* display: inline-block; */
|
|
float: right; /* works left or right, right gives margin in between this & 2 */
|
|
width: 95px;
|
|
height: 99%;
|
|
background-color: var(--sysmsg-background);
|
|
background-image: var(--logo);
|
|
background-repeat: no-repeat;
|
|
background-position: right;
|
|
border: 1px solid var(--div-border-1);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--sysmsg-text);
|
|
font-size: 8pt;
|
|
}
|
|
|
|
.aboutMsg { /* OP25 logo and message box on right (3) */
|
|
padding: 0px;
|
|
/* display: inline-block; */
|
|
float: right; /* works left or right, right gives margin in between this & 2 */
|
|
width: 95px;
|
|
height: 99%;
|
|
background-color: var(--sysmsg-background);
|
|
background-image: var(--logo);
|
|
background-repeat: no-repeat;
|
|
background-position: right;
|
|
border: 0px solid var(--div-border-2);
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--sysmsg-text);
|
|
font-size: 8pt;
|
|
}
|
|
|
|
div.info { /* main info container for the two tables */
|
|
width: 730px;
|
|
border: 0px solid var(--div-border-1);
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
div.system { /* system frequencies container that holds the table */
|
|
float: left;
|
|
width: 48%;
|
|
height: auto;
|
|
border: 0px solid var(--div-border-1);
|
|
}
|
|
|
|
div.adjacent { /* adjacent sites container that holds the table */
|
|
margin-left: 29px;
|
|
float: left;
|
|
width: 48%;
|
|
height: auto;
|
|
border: 0px solid var(--div-border-1);
|
|
}
|
|
|
|
/* labels, values, system and tg text */
|
|
|
|
.copyr {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 14px;
|
|
color: var(--label);
|
|
float: right;
|
|
margin-top: 22px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.label {
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
color: var(--label);
|
|
}
|
|
|
|
.label-hold {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--label-hold);
|
|
font-size: 8pt;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
vertical-align: center;
|
|
height: 50%;
|
|
}
|
|
|
|
.label-sm {
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
color: var(--label-sm);
|
|
font-size: 8pt;
|
|
padding: 2px;
|
|
}
|
|
|
|
.label-lc { /* Last Command text */
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
color: var(--label-sm);
|
|
font-size: 8pt;
|
|
padding: 2px;
|
|
text-align: center;
|
|
}
|
|
|
|
.red_value {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--red-value);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.value {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--value);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.systgid { /* System and Talkgroup Text */
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--system-text);
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.syscrypto { /* alg/key text */
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--syscrypto);
|
|
font-size: 24px;
|
|
}
|
|
|
|
.boxtitle {
|
|
font-weight: bold;
|
|
text-align: left;
|
|
}
|
|
|
|
.nac { /* the whole NAC string... NAC, freq tsbks, etc. */
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--system-text);
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.s1 {
|
|
border: 0px solid var(--gray-text-1);
|
|
width: 730px;
|
|
}
|
|
|
|
.s2 {
|
|
border: 0px solid var(--gray-text-1);
|
|
position: relative;
|
|
display: inline-block;
|
|
max-height: 112px;
|
|
width: 512px;
|
|
padding: 5px;
|
|
margin: 0 0 0 2px;
|
|
}
|
|
|
|
.copyright-text {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--system-text);
|
|
/* font-size: 10px; */
|
|
}
|
|
|
|
.nav-ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background-color: var(--nav-background);
|
|
background: linear-gradient(var(--nav-grad-1), var(--nav-grad-2));
|
|
}
|
|
|
|
.nav-li {
|
|
float: left;
|
|
border-right: 1px solid var(--div-border-1);
|
|
background: linear-gradient(var(--nav-grad-1), var(--nav-grad-2));
|
|
|
|
}
|
|
|
|
.nav-li-active {
|
|
float: left;
|
|
border-right: 1px solid var(--div-border-1);
|
|
}
|
|
|
|
.nav-bar {
|
|
width: 730px;
|
|
padding: 0;
|
|
border: 1px solid var(--div-border-1);
|
|
|
|
|
|
/* uncomment below for fixed top nav-bar */
|
|
/*
|
|
position: fixed;
|
|
top: 5px;
|
|
z-index: 99;
|
|
*/
|
|
}
|
|
|
|
|
|
|
|
.nav-button {
|
|
background-color: var(--nav-background);
|
|
background: linear-gradient(var(--nav-grad-1), var(--nav-grad-2));
|
|
color: var(--button-text-2);
|
|
width: 85px;
|
|
border: 0px;
|
|
padding: 20px;
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nav-button2 {
|
|
background-color: var(--nav-background);
|
|
background: linear-gradient(var(--nav-grad-1), var(--nav-grad-2));
|
|
color: var(--button-text-2);
|
|
width: 15px;
|
|
border: 0px;
|
|
padding: 20px;
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nav-button-active {
|
|
background-color: var(--button-grad-2);
|
|
background: linear-gradient(var(--button-grad-2), var(--button-grad-1));
|
|
color: var(--button-text-1);
|
|
width: 85px;
|
|
border: 0px;
|
|
padding: 20px;
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.nav-button:hover {
|
|
background-color: var(--button-grad-2);
|
|
background: linear-gradient(var(--button-grad-2), var(--button-grad-1));
|
|
color: var(--button-text-1);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-button-active:hover {
|
|
background-color: var(--button-grad-1);
|
|
background: linear-gradient(var(--button-grad-1), var(--button-grad-2));
|
|
color: var(--button-text-1);
|
|
}
|
|
/*
|
|
|
|
#div_settings table {
|
|
border-color: var(--div-border-1);
|
|
}
|
|
|
|
#div_settings tr {
|
|
border-top: none;
|
|
border-bottom: solid;
|
|
}
|
|
|
|
#div_settings th.boxtitle-th {
|
|
text-align: left;
|
|
}
|
|
|
|
.div_settings th {
|
|
max-width: 75px;
|
|
border-style: none;
|
|
padding: 3px;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 12px;
|
|
background: var (--div-background-1);
|
|
color: var(--default-text);
|
|
text-align: right;
|
|
font-weight: normal;
|
|
}
|
|
|
|
#div_settings td {
|
|
max-width: 75px;
|
|
border-style: none;
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
*/
|
|
|
|
|
|
.dsettings {
|
|
width: 730px;
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--div-border-1);
|
|
padding: 3px;
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
color: var(--default-text);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.dsettings th, td {
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--div-border-1);
|
|
color: var(--default-text);
|
|
padding: 5px;
|
|
}
|
|
|
|
.dsettings th {
|
|
color: var(--table-header-text);
|
|
background: var(--button-grad-1); /* For browsers that do not support gradients */
|
|
background: linear-gradient(var(--table-grad-1), var(--table-grad-2));
|
|
}
|
|
|
|
.dsettings td {
|
|
padding: 10px;
|
|
font-size: 10pt;
|
|
border: 1px solid var(--div-border-1);
|
|
}
|
|
|
|
.dsettings input[type="text"] {
|
|
height: 14px;
|
|
width: 75%;
|
|
padding: 4px;
|
|
font-size: 12pt;
|
|
background-color: var(--input-background-2);
|
|
color: var(--input-text);
|
|
border: 0px solid var( --div-border-1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
|
|
.editor {
|
|
width: 705px;
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--div-border-1);
|
|
padding: 3px;
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
color: var(--default-text);
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
.editor th, td {
|
|
border-collapse: collapse;
|
|
border: 1px solid var(--div-border-1);
|
|
color: var(--default-text);
|
|
padding: 3px;
|
|
}
|
|
|
|
.editor th {
|
|
color: var(--table-header-text);
|
|
background: var(--button-grad-1); /* For browsers that do not support gradients */
|
|
background: linear-gradient(var(--table-grad-1), var(--table-grad-2));
|
|
|
|
/* fixed table heading */
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.editor td {
|
|
font-size: 10pt;
|
|
border: 1px solid var(--div-border-1);
|
|
}
|
|
|
|
#editor input {
|
|
height: 28px;
|
|
width: 95%;
|
|
padding: 4px;
|
|
font-size: 12pt;
|
|
background-color: var(--input-background);
|
|
color: var(--input-text);
|
|
border: 0px solid var( --div-border-1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
input[type="file"] {
|
|
height: 28px;
|
|
padding: 4px;
|
|
background-color: var(--input-background);
|
|
color: var(--input-text);
|
|
border: 1px solid var( --div-border-1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#editor .delbutton {
|
|
color: var(--red-value);
|
|
background-color: var(--input-background);
|
|
}
|
|
|
|
#editor-help {
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
width: 696px;
|
|
padding: 4px;
|
|
background-color: var(--input-background);
|
|
color: var(--default-text);
|
|
border: 1px solid var( --div-border-1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.tsv-controls {
|
|
/* position: fixed; */
|
|
background-color: var(--bg-color);
|
|
width: 100%;
|
|
}
|
|
|
|
#save-div {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
#editor .savebutton {
|
|
/* empty */
|
|
}
|
|
|
|
#editor .newtg {
|
|
color: var(--system-text:);
|
|
animation: blinker 2s linear infinite;
|
|
}
|
|
|
|
.tsv {
|
|
width: 705px;
|
|
border-collapse: collapse;
|
|
border: 0px solid var(--bg-color);
|
|
padding: 3px;
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
color: var(--default-text);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.tsv td, tr {
|
|
border-collapse: collapse;
|
|
border: 0px;
|
|
}
|
|
|
|
|
|
.footer {
|
|
position: fixed;
|
|
left: 5;
|
|
border: 2px solid var(--div-border-1);
|
|
bottom: 0;
|
|
width: 702px;
|
|
background-color: var(--sysmsg-background);
|
|
color: white;
|
|
text-align: center;
|
|
height: 4rem;
|
|
}
|
|
|
|
|
|
#displaySettings input[type=text] {
|
|
width: 400px;
|
|
height: 24px;
|
|
padding: 4px;
|
|
background-color: var(--input-background);
|
|
color: var(--input-text);
|
|
border: 1px solid var( --div-border-1);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.scolor {
|
|
width: 500px;
|
|
border-collapse: collapse;
|
|
border: 0px solid var(--div-border-1);
|
|
padding: 3px;
|
|
font-family: Verdana, Arial, Helvetica, sans-serif;
|
|
color: var(--default-text);
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
.scolor th, td {
|
|
border-collapse: collapse;
|
|
border: 0px solid var(--div-border-1);
|
|
color: var(--default-text);
|
|
padding: 3px;
|
|
}
|
|
|
|
/*
|
|
#div_settings input[type=text] {
|
|
max-width: 200px;
|
|
border-top: none;
|
|
border-bottom-width: 1px;
|
|
border-bottom: dotted;
|
|
border-right: none;
|
|
border-left: none;
|
|
text-align: right;
|
|
}
|
|
*/
|
|
|
|
#div_settings input[type=button] {
|
|
max-width: 75px;
|
|
padding: 10px;
|
|
color: var(--red-value);
|
|
border: 0;
|
|
}
|
|
|
|
#div_settings select {
|
|
max-width: 100px;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
#div_settings option {
|
|
max-width: 100px;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.boxtitle {
|
|
text-align: left;
|
|
}
|
|
|
|
div#cfg_list_area select {
|
|
width: 250px;
|
|
max-width: 250px;
|
|
}
|
|
|
|
#div_rx_opts td {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 12px;
|
|
border-style: none;
|
|
}
|
|
|
|
#div_rx_opts input[type=text] {
|
|
max-width: 75px;
|
|
border-top: none;
|
|
border-bottom-width: 1px;
|
|
border-bottom: dotted;
|
|
border-right: none;
|
|
border-left: none;
|
|
text-align: right;
|
|
}
|
|
|
|
.help {
|
|
max-width: 640px;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: var(--default-text);``
|
|
}
|
|
|
|
|
|
.aboutTable {
|
|
width: 730px;
|
|
border: 1px solid var(--div-border-1);
|
|
vertical-align: top;
|
|
height: 178px;
|
|
padding: 2px;
|
|
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
|
|
background: var(--sysmsg-background); /* For browsers that do not support gradients */
|
|
/* background: linear-gradient(var(--display-grad-1), var(--display-grad-2), var(--display-grad-1)); */
|
|
}
|
|
|
|
.aboutLogo {
|
|
height: 178px;
|
|
background-image: var(--logo);
|
|
}
|
|
|
|
.c {
|
|
/* no color selected */
|
|
}
|
|
|
|
@keyframes blinker {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/*
|
|
.example_blinker {
|
|
color: var(--c1);
|
|
background-color: var(--c3);
|
|
animation: blinker 1s linear infinite;
|
|
}
|
|
*/
|
|
|
|
.enc { /* the enc symbol in the freq table */
|
|
font-size: 9pt;
|
|
color: var (--default-text);
|
|
animation: blinker 1s linear infinite;
|
|
}
|
|
|
|
.c0 {
|
|
/* no color, leave blank so parent can color the element */
|
|
}
|
|
/*
|
|
|
|
.c1 {
|
|
color: var(--c1);
|
|
}
|
|
|
|
.c2 {
|
|
color: var(--c2);
|
|
}
|
|
|
|
.c3 {
|
|
color: var(--c3);
|
|
}
|
|
|
|
.c4 {
|
|
color: var(--c4);
|
|
}
|
|
|
|
.c5 {
|
|
color: var(--c5);
|
|
}
|
|
|
|
.c6 {
|
|
color: var(--c6);
|
|
}
|
|
|
|
.c7 {
|
|
color: var(--c7);
|
|
}
|
|
|
|
.c8 {
|
|
color: var(--c8);
|
|
}
|
|
|
|
.c9 {
|
|
color: var(--c9);
|
|
}
|
|
|
|
.c10 {
|
|
color: var(--c10);
|
|
}
|
|
|
|
.c11 {
|
|
color: var(--c11);
|
|
}
|
|
|
|
.c97 {
|
|
color: var(--c8);
|
|
background-color: var(--c1);
|
|
animation: blinker 1.5s linear infinite;
|
|
}
|
|
|
|
.c98 {
|
|
color: white;
|
|
background-color: var(--c1);
|
|
animation: blinker 1.5s linear infinite;
|
|
}
|
|
|
|
.c99 {
|
|
color: var(--c4);
|
|
background-color: var(--c10);
|
|
animation: blinker 1.5s linear infinite;
|
|
}
|
|
*/
|
|
|
|
table.fixed {
|
|
table-layout: fixed;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
table.fixed td {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
table.fixed tr {
|
|
border-bottom: 1px solid var(--hover-1);
|
|
}
|
|
|
|
|
|
table.fixed tr:hover {
|
|
background-color: var(--hover-1);
|
|
}
|
|
|
|
|
|
table.rxsys {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
table.rxsys td {
|
|
/*
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
*/
|
|
}
|
|
|
|
table.rxsys tr:hover {
|
|
background-color: var(--hover-1);
|
|
}
|
|
|
|
|
|
#searchInput {
|
|
background-image: url('search.png');
|
|
background-position: 10px 10px;
|
|
background-repeat: no-repeat;
|
|
background-color: var(--sysgmsg-background);
|
|
color: var(--default-text);
|
|
width: 100%;
|
|
font-size: 16px;
|
|
padding: 12px 20px 12px 40px;
|
|
border: 1px solid var(--div-border-1);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
#searchTable {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
border: 1px solid var(--div-border-1);
|
|
font-size: 18px;
|
|
}
|
|
|
|
#searchTable th, #myTable td {
|
|
text-align: left;
|
|
padding: 12px;
|
|
}
|
|
|
|
#searchTable tr {
|
|
border-bottom: 1px solid var(--div-border-1);
|
|
}
|
|
|
|
#searchTable tr.header, #searchTable tr:hover {
|
|
background-color: var(--div-border-1);
|
|
}
|
|
|
|
/* these are the little divs for the search box and css download icon in the search windows */
|
|
.stc {
|
|
height: auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sr {
|
|
width: 40px;
|
|
float: right;
|
|
|
|
}
|
|
|
|
.sl {
|
|
width: auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/* Custom dialog styles */
|
|
#popup_title {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
line-height: 1.75em;
|
|
color: #FFFFFF;
|
|
background: #006699;
|
|
border: solid 1px #006699;
|
|
border-bottom: solid 1px #006699;
|
|
cursor: default;
|
|
padding: 0em;
|
|
margin: 0em;
|
|
}
|
|
|
|
#popup_container {
|
|
font-family: AntipastoRegular, sans-serif;
|
|
font-size: 14px;
|
|
min-width: 300px; /* Dialog will be no smaller than this */
|
|
max-width: 600px; /* Dialog will wrap after this width */
|
|
background: #FFFFFF;
|
|
border: solid 5px #006699;
|
|
color: #000000;
|
|
-moz-border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#popup_content {
|
|
/*background: 16px 16px no-repeat url(images/info.gif);*/
|
|
padding: 1em 1.75em;
|
|
margin: 0em;
|
|
}
|
|
|
|
/*
|
|
#popup_content.alert {
|
|
background-image: url(images/info.gif);
|
|
}
|
|
|
|
#popup_content.confirm {
|
|
background-image: url(images/important.gif);
|
|
}
|
|
|
|
#popup_content.prompt {
|
|
background-image: url(images/help.gif);
|
|
}
|
|
*/
|
|
|
|
#popup_message {
|
|
/*padding-left: 10px;*/
|
|
margin:0px auto;
|
|
}
|
|
|
|
#popup_panel {
|
|
text-align: center;
|
|
margin: 1em 0em 0em 1em;
|
|
}
|
|
|
|
#popup_prompt {
|
|
margin: .5em 0em;
|
|
}
|
|
|
|
|
|
#popup_container INPUT[type='button'] {
|
|
width: 100px;
|
|
height: 30px;
|
|
border: outset 2px #006699;
|
|
color: #FFFFFF;
|
|
background: #006699;
|
|
}
|
|
|
|
|
|
/* some expiremental stuff below, not being used. */
|
|
|
|
|
|
/* signal stuff is for a signal strength indicator (3 bars) */
|
|
/* not currently used */
|
|
|
|
.signal-icon {
|
|
height: 18px;
|
|
width: 18px;
|
|
/* To show you the power of flexbox! */
|
|
display: flex;
|
|
/* Bars should be placed left to right */
|
|
flex-direction: row;
|
|
/* Evenly space the bars with space in between */
|
|
justify-content: space-between;
|
|
/* Sink the bars to the bottom, so they go up in steps */
|
|
align-items: baseline;
|
|
}
|
|
.signal-icon .signal-bar {
|
|
/* 4 + 3 + 4 + 3 + 4 = 18px (as set above)
|
|
4px per bar and 3px margins between */
|
|
width: 4px;
|
|
/* All bars faded by default */
|
|
opacity: 30%;
|
|
/* Choose a color */
|
|
background: #aa2200;
|
|
}
|
|
|
|
/* 3 different heights for 3 different bars */
|
|
.signal-icon .signal-bar:nth-child(1) { height: 40%; }
|
|
.signal-icon .signal-bar:nth-child(2) { height: 70%; }
|
|
.signal-icon .signal-bar:nth-child(3) { height: 100%; }
|
|
|
|
/* Emphasize different bars depending on
|
|
weak/medium/strong classes */
|
|
.signal-icon.weak .signal-bar:nth-child(1),
|
|
.signal-icon.medium .signal-bar:nth-child(1),
|
|
.signal-icon.medium .signal-bar:nth-child(2),
|
|
.signal-icon.strong .signal-bar:nth-child(1),
|
|
.signal-icon.strong .signal-bar:nth-child(2),
|
|
.signal-icon.strong .signal-bar:nth-child(3)
|
|
{ opacity: 100%; }
|
|
|
|
|
|
/* spinner */
|
|
.loader {
|
|
display: block;
|
|
margin-left: 350px;
|
|
margin-right: auto;
|
|
position: absolute;
|
|
display: none;
|
|
width: 40%;
|
|
border: 8px solid var(--div-border-1);
|
|
border-radius: 50%;
|
|
border-top: 8px solid var(--div-border-2);
|
|
width: 25px;
|
|
height: 25px;
|
|
-webkit-animation: spin 2s linear infinite; /* Safari */
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
|
|
/* Safari */
|
|
@-webkit-keyframes spin {
|
|
0% { -webkit-transform: rotate(0deg); }
|
|
100% { -webkit-transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
|
|
/*
|
|
Start by setting display:none to make this hidden.
|
|
Then we position it in relation to the viewport window
|
|
with position:fixed. Width, height, top and left speak
|
|
for themselves. Background we set to 80% white with
|
|
our animation centered, and no-repeating
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background: rgba( 255, 255, 255, .8 )
|
|
url('FhHRx.gif')
|
|
50% 50%
|
|
no-repeat;
|
|
}
|
|
|
|
When the body has the loading class, we turn
|
|
the scrollbar off with overflow:hiddenbody.loading .modal {
|
|
overflow: hidden;
|
|
}
|
|
|
|
Anytime the body has the loading class, our
|
|
modal element will be visiblebody.loading .modal {
|
|
display: block;
|
|
}
|
|
*/
|