css updates thx Triptolemus
This commit is contained in:
parent
91dead3b5b
commit
dced944480
|
|
@ -1,484 +0,0 @@
|
|||
/*
|
||||
|
||||
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.
|
||||
|
||||
*/
|
||||
|
||||
body {
|
||||
|
||||
/* color: white; */
|
||||
background-color: black;
|
||||
|
||||
}
|
||||
|
||||
#div_help {
|
||||
|
||||
color: #eee;
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
color: #f00;
|
||||
|
||||
}
|
||||
|
||||
#div_status body {
|
||||
|
||||
background-color: black;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
#div_status table {
|
||||
border-collapse: collapse;
|
||||
font-family: "Courier New", Courier, Monospace;
|
||||
}
|
||||
|
||||
#div_status th {
|
||||
|
||||
border-style: solid;
|
||||
padding: 3px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
background: #669999; /* For browsers that do not support gradients */
|
||||
background: linear-gradient(#444, black);
|
||||
}
|
||||
|
||||
#div_status td {
|
||||
|
||||
border: 1px solid #666;
|
||||
padding: 3px;
|
||||
|
||||
}
|
||||
|
||||
#div_s2 td {
|
||||
|
||||
border-bottom: 1px solid #888;
|
||||
border-top: 1px solid #888;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
padding: 3px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 730px;
|
||||
float: left;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
|
||||
.control-button { /* skip/hold/lockout buttons */
|
||||
|
||||
border-color: gray;
|
||||
height: 42px;
|
||||
color: yellow;
|
||||
padding: 10px 10px;
|
||||
text-decoration: none;
|
||||
margin: 1px 1px;
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
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: #31687e; /* For browsers that do not support gradients */
|
||||
background: linear-gradient(#666, black);
|
||||
}
|
||||
|
||||
.control-button:hover {
|
||||
|
||||
background: linear-gradient(black, silver);
|
||||
}
|
||||
|
||||
.controlsDisplay { /* holds buttons, and display */
|
||||
|
||||
width: 730px;
|
||||
border: 0px solid #aaa;
|
||||
vertical-align: top;
|
||||
height: 178px;
|
||||
padding: 2px;
|
||||
box-shadow: 0 4px 8px 0 rgba(150,50,0,0.75), 0 3px 10px 0 rgba(0,0,150,0.4);
|
||||
/* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19); */
|
||||
background: LightGray; /* For browsers that do not support gradients */
|
||||
background: linear-gradient(White, Silver);
|
||||
}
|
||||
|
||||
.controls { /* skip/hold/lockout buttons (1) */
|
||||
|
||||
border: 1px solid #aaa;
|
||||
width: 104px;
|
||||
float: left;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.cfg_list {
|
||||
|
||||
border: 1px solid #000;
|
||||
padding: 5px;
|
||||
width: 260px;
|
||||
|
||||
}
|
||||
|
||||
.displaySettings {
|
||||
|
||||
border: 1px solid #000;
|
||||
padding: 5px;
|
||||
width: 720px;
|
||||
|
||||
}
|
||||
.statDisplay { /* main display - freq, sys, tgid (2) */
|
||||
|
||||
padding: 0px;
|
||||
width: 522px;
|
||||
float: left;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border: 1px solid #aaa;
|
||||
height: 100%;
|
||||
background: LightGray; /* For browsers that do not support gradients */
|
||||
background: linear-gradient(#222, Black, #222);
|
||||
}
|
||||
|
||||
.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: 100%;
|
||||
background-color:#060606;
|
||||
background-image: url("op25-dark.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right;
|
||||
border: 1px solid #aaa;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #666;
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
div.info { /* main info container for the two tables */
|
||||
|
||||
width: 730px;
|
||||
border: 0px solid #a00;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
div.system { /* system frequencies container that holds the table */
|
||||
|
||||
float: left;
|
||||
width: 48%;
|
||||
height: auto;
|
||||
border: 0px solid #d00;
|
||||
}
|
||||
|
||||
div.adjacent { /* adjacent sites container that holds the table */
|
||||
|
||||
margin-left: 29px;
|
||||
float: left;
|
||||
width: 48%;
|
||||
height: auto;
|
||||
border: 0px solid #00f;
|
||||
}
|
||||
|
||||
/* labels, values, system and tg text */
|
||||
|
||||
.copyr {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #484848;
|
||||
float: right;
|
||||
margin-top: 22px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.label-hold {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #c00;
|
||||
font-size: 8pt;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.label-sm {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #ccc;
|
||||
font-size: 8pt;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.label-lc { /* Last Command text */
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #aaa;
|
||||
font-size: 8pt;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.red_value {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #f00000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.value {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #8f8;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.systgid { /* System and Talkgroup Text */
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #8f8;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.syscrypto { /* alg/key text */
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #f00000;
|
||||
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: #8f8;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
|
||||
.s1 {
|
||||
/* empty */
|
||||
}
|
||||
|
||||
.s2 {
|
||||
border: 0px solid #999;
|
||||
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: #eee;
|
||||
/* font-size: 10pt; */
|
||||
}
|
||||
|
||||
.nav-ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #bbb;
|
||||
background: linear-gradient(#111, #222);
|
||||
}
|
||||
|
||||
.nav-li {
|
||||
float: left;
|
||||
border-right: 1px solid #000;
|
||||
background: linear-gradient(#333, #444);
|
||||
}
|
||||
|
||||
.nav-li-active {
|
||||
float: left;
|
||||
background-color: #000;
|
||||
color: #0080c0;
|
||||
border-right: 0px solid #f00;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
width: 730px;
|
||||
padding: 0;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background-color: #bbb;
|
||||
background: linear-gradient(#333, #444);
|
||||
width: 85px;
|
||||
color: #ddd;
|
||||
border: 0px;
|
||||
padding: 20px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-button-active {
|
||||
background-color: #666;
|
||||
background: linear-gradient(#777, #888);
|
||||
color: #fff;
|
||||
border: 0px;
|
||||
padding: 20px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
background-color: #699;
|
||||
background: linear-gradient(#999, #aaa);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav-button-active:hover {
|
||||
background-color: #699;
|
||||
background: linear-gradient(#999, #aaa);
|
||||
}
|
||||
|
||||
#div_settings table {
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
#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;
|
||||
color: #000;
|
||||
background: #eee;
|
||||
text-align: right;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#div_settings td {
|
||||
max-width: 75px;
|
||||
border-style: none;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#div_settings 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;
|
||||
}
|
||||
|
||||
#div_settings input[type=button] {
|
||||
max-width: 75px;
|
||||
padding: 10px;
|
||||
color: red;
|
||||
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;
|
||||
}
|
||||
|
||||
.aboutTable {
|
||||
width: 730px;
|
||||
border: 1px solid #aaa;
|
||||
vertical-align: top;
|
||||
height: 178px;
|
||||
padding: 2px;
|
||||
box-shadow: 0 4px 8px 0 rgba(150,50,0,0.75), 0 3px 10px 0 rgba(0,0,150,0.4);
|
||||
/* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19); */
|
||||
background: LightGray; /* For browsers that do not support gradients */
|
||||
background: linear-gradient(Black, #333);
|
||||
}
|
||||
}
|
||||
|
||||
.aboutLogo {
|
||||
background-image: url("op25-dark.png");
|
||||
}
|
||||
|
||||
|
|
@ -21,57 +21,191 @@
|
|||
|
||||
*/
|
||||
|
||||
#div_status body {
|
||||
|
||||
background-color: LightGray;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
/* ------------- LIGHT MODE -------------------- */
|
||||
:root { /* default */
|
||||
--logo: url("op25.png");
|
||||
--sysmsg-text: #666;
|
||||
--label-hold: #c00;
|
||||
--syscrptro: #f00000; /* encrypted text */
|
||||
|
||||
--bg-color: White; /* 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;
|
||||
|
||||
--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: #000; /* 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;
|
||||
}
|
||||
|
||||
/* ------------- DARK MODE -------------------- */
|
||||
|
||||
[data-theme="dark"] {
|
||||
--logo: url("op25-dark.png");
|
||||
--sysmsg-text: #666;
|
||||
--label-hold: #ff0000;
|
||||
--syscrptro: #f00000; /* encrypted text */
|
||||
|
||||
--bg-color: Black; /* main page background color */
|
||||
--sysmsg-background: #060606;
|
||||
|
||||
--div-border-1: grey; /* 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;
|
||||
|
||||
--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;
|
||||
}
|
||||
|
||||
/* END DARK MODE */
|
||||
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--red-value);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
#div_status body {
|
||||
|
||||
background-color: var(--bg-color);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
*/
|
||||
|
||||
#div_status table {
|
||||
|
||||
border-collapse: collapse;
|
||||
font-family: "Courier New", Courier, Monospace;
|
||||
border: 1px solid var(--div-border-1);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#div_status th {
|
||||
|
||||
border-style: solid;
|
||||
#div_status th {
|
||||
|
||||
border: 1px solid var(--div-border-1);
|
||||
padding: 3px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #000;
|
||||
color: var(--default-text);
|
||||
font-weight: bold;
|
||||
background: #669999; /* For browsers that do not support gradients */
|
||||
background: linear-gradient(#31687e, #56a0bd);
|
||||
background: var(--button-grad-1); /* For browsers that do not support gradients */
|
||||
background: linear-gradient(var(--button-grad-1), var(--button-grad-2));
|
||||
}
|
||||
|
||||
#div_status td {
|
||||
|
||||
border: 1px solid #666;
|
||||
border: 0px solid var(--div-border-1);
|
||||
padding: 3px;
|
||||
|
||||
}
|
||||
|
||||
#div_images table {
|
||||
width: 730px;
|
||||
border: 1px solid var(--div-border-1);
|
||||
}
|
||||
|
||||
#div_s2 table {
|
||||
border: 0px solid var(--div-border-1);
|
||||
}
|
||||
|
||||
#div_s2 td {
|
||||
|
||||
border-bottom: 1px solid #888;
|
||||
border-top: 1px solid #888;
|
||||
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;
|
||||
}
|
||||
|
||||
.history {
|
||||
width: 705px;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid var(--div-border-1);
|
||||
padding: 3px;
|
||||
font-family: 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;
|
||||
|
||||
}
|
||||
|
||||
#div_logs {
|
||||
width: 730px;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 730px;
|
||||
float: left;
|
||||
padding: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.control-button { /* skip/hold/lockout buttons */
|
||||
|
||||
border-color: gray;
|
||||
border-color: var(--button-bord-1);
|
||||
height: 42px;
|
||||
color: white;
|
||||
color: var(--button-text-1);
|
||||
padding: 10px 10px;
|
||||
text-decoration: none;
|
||||
margin: 1px 1px;
|
||||
|
|
@ -80,130 +214,116 @@ hr {
|
|||
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: #31687e; /* For browsers that do not support gradients */
|
||||
background: linear-gradient(#31687e, #56a0bd);
|
||||
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(#56a0bd, #31687e);
|
||||
background: linear-gradient(var(--button-grad-2), var(--button-grad-1));
|
||||
}
|
||||
|
||||
.controlsDisplay { /* holds buttons, and display */
|
||||
|
||||
width: 730px;
|
||||
border: 0px solid #aaa;
|
||||
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: LightGray; /* For browsers that do not support gradients */
|
||||
background: linear-gradient(White, Silver);
|
||||
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 #aaa;
|
||||
border: 1px solid var(--button-bord-1);
|
||||
width: 104px;
|
||||
float: left;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.cfg_list {
|
||||
|
||||
border: 1px solid #000;
|
||||
border: 1px solid var(--div-border-1);
|
||||
padding: 5px;
|
||||
width: 260px;
|
||||
|
||||
}
|
||||
|
||||
.displaySettings {
|
||||
|
||||
border: 1px solid #000;
|
||||
border: 1px solid var(--div-border-1);
|
||||
padding: 5px;
|
||||
width: 720px;
|
||||
|
||||
}
|
||||
.statDisplay { /* main display - freq, sys, tgid (2) */
|
||||
|
||||
.statDisplay { /* main display - freq, sys, tgid (2) */
|
||||
padding: 0px;
|
||||
width: 522px;
|
||||
float: left;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border: 1px solid #aaa;
|
||||
border: 1px solid (var(--div-border-1));
|
||||
height: 100%;
|
||||
background: LightGray; /* For browsers that do not support gradients */
|
||||
background: linear-gradient(LightGray, White, LightGray);
|
||||
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: 100%;
|
||||
background-color:#f9f9f9;
|
||||
background-image: url("op25.png");
|
||||
height: 99%;
|
||||
background-color: var(--sysmsg-background);
|
||||
background-image: var(--logo);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right;
|
||||
border: 1px solid #aaa;
|
||||
border: 1px solid var(--div-border-2);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #666;
|
||||
color: var(--sysmsg-text);
|
||||
font-size: 8pt;
|
||||
}
|
||||
|
||||
div.info { /* main info container for the two tables */
|
||||
|
||||
width: 730px;
|
||||
border: 0px solid #a00;
|
||||
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 #d00;
|
||||
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 #00f;
|
||||
border: 0px solid var(--div-border-1);
|
||||
}
|
||||
|
||||
/* labels, values, system and tg text */
|
||||
|
||||
.copyr {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #484848;
|
||||
color: var(--label);
|
||||
float: right;
|
||||
margin-top: 22px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.label {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #484848;
|
||||
color: var(--label);
|
||||
}
|
||||
|
||||
.label-hold {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #c00;
|
||||
color: var(--label-hold);
|
||||
font-size: 8pt;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
|
@ -212,48 +332,42 @@ div.adjacent { /* adjacent sites container that holds the table */
|
|||
}
|
||||
|
||||
.label-sm {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #444;
|
||||
color: var(--label-sm);
|
||||
font-size: 8pt;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.label-lc { /* Last Command text */
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #444;
|
||||
color: var(--label-sm);
|
||||
font-size: 8pt;
|
||||
padding: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.red_value {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #f00000;
|
||||
color: var(--red-value);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.value {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #000000;
|
||||
color: var(--value);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.systgid { /* System and Talkgroup Text */
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #000060;
|
||||
color: var(--system-text);
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.syscrypto { /* alg/key text */
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #f00000;
|
||||
color: var(--syscrypto);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
|
|
@ -264,20 +378,19 @@ div.adjacent { /* adjacent sites container that holds the table */
|
|||
|
||||
|
||||
.nac { /* the whole NAC string... NAC, freq tsbks, etc. */
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #000060;
|
||||
color: var(--system-text);
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
|
||||
.s1 {
|
||||
/* empty */
|
||||
border: 0px solid var(--gray-text-1);
|
||||
width: 730px;
|
||||
}
|
||||
|
||||
.s2 {
|
||||
border: 0px solid #999;
|
||||
border: 0px solid var(--gray-text-1);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-height: 112px;
|
||||
|
|
@ -287,9 +400,8 @@ div.adjacent { /* adjacent sites container that holds the table */
|
|||
}
|
||||
|
||||
.copyright-text {
|
||||
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #000060;
|
||||
color: var(--system-text);
|
||||
/* font-size: 10px; */
|
||||
}
|
||||
|
||||
|
|
@ -298,33 +410,31 @@ div.adjacent { /* adjacent sites container that holds the table */
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #bbb;
|
||||
background: linear-gradient(#bbbbbb, #cccccc);
|
||||
background-color: var(--nav-background);
|
||||
background: linear-gradient(var(--nav-grad-1), var(--nav-grad-2));
|
||||
}
|
||||
|
||||
.nav-li {
|
||||
float: left;
|
||||
border-right: 1px solid #000;
|
||||
background: linear-gradient(#bbbbbb, #cccccc);
|
||||
border-right: 1px solid var(--div-border-1);
|
||||
background: linear-gradient(var(--nav-grad-1), var(--nav-grad-2));
|
||||
}
|
||||
|
||||
.nav-li-active {
|
||||
float: left;
|
||||
background-color: #c0c0c0;
|
||||
color: #0080c0;
|
||||
border-right: 1px solid #000;
|
||||
border-right: 1px solid var(--div-border-1);
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
width: 730px;
|
||||
padding: 0;
|
||||
border: 1px solid #000;
|
||||
border: 1px solid var(--div-border-1);
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background-color: #bbb;
|
||||
background: linear-gradient(#bbbbbb, #cccccc);
|
||||
color: #000;
|
||||
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;
|
||||
|
|
@ -335,9 +445,10 @@ div.adjacent { /* adjacent sites container that holds the table */
|
|||
|
||||
|
||||
.nav-button-active {
|
||||
background-color: #9cc;
|
||||
background: linear-gradient(#31687e, #56a0bd);
|
||||
color: #fff;
|
||||
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;
|
||||
|
|
@ -346,18 +457,19 @@ div.adjacent { /* adjacent sites container that holds the table */
|
|||
}
|
||||
|
||||
.nav-button:hover {
|
||||
background-color: #699;
|
||||
background: linear-gradient(#56a0bd, #31687e);
|
||||
color: #fff;
|
||||
background-color: var(--button-grad-2);
|
||||
background: linear-gradient(var(--button-grad-2), var(--button-grad-1));
|
||||
color: var(--button-text-1);
|
||||
}
|
||||
|
||||
.nav-button-active:hover {
|
||||
background-color: #699;
|
||||
background: linear-gradient(#56a0bd, #31687e);
|
||||
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: black;
|
||||
border-color: var(--div-border-1);
|
||||
}
|
||||
|
||||
#div_settings tr {
|
||||
|
|
@ -375,8 +487,8 @@ div.adjacent { /* adjacent sites container that holds the table */
|
|||
padding: 3px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
background: #eee;
|
||||
background: var (--div-background-1);
|
||||
color: var(--default-text);
|
||||
text-align: right;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
|
@ -401,7 +513,7 @@ div.adjacent { /* adjacent sites container that holds the table */
|
|||
#div_settings input[type=button] {
|
||||
max-width: 75px;
|
||||
padding: 10px;
|
||||
color: red;
|
||||
color: var(--red-value);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
|
@ -445,20 +557,22 @@ div#cfg_list_area select {
|
|||
.help {
|
||||
max-width: 640px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: var(--default-text);``
|
||||
}
|
||||
|
||||
|
||||
.aboutTable {
|
||||
width: 730px;
|
||||
border: 1px solid #aaa;
|
||||
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: LightGray; /* For browsers that do not support gradients */
|
||||
background: linear-gradient(White, Silver);
|
||||
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));
|
||||
}
|
||||
|
||||
.aboutLogo {
|
||||
background-image: url("op25.png");
|
||||
height: 178px;
|
||||
background-image: var(--logo);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -371,22 +371,15 @@ function adjacent_data(d) {
|
|||
if (Object.keys(d).length < 1)
|
||||
return "";
|
||||
var html = "<div class=\"adjacent\">"; // open div-adjacent
|
||||
html += "<table border=1 borderwidth=0 cellpadding=0 cellspacing=0 width=100%>";
|
||||
html += "<table border=1 border width=0 cellpadding=0 cellspacing=0 width=100%>";
|
||||
html += "<tr><th colspan=99 style=\"align: center\">Adjacent Sites</th></tr>";
|
||||
html += "<tr><th>Frequency</th><th>Sys ID</th><th>RFSS</th><th>Site</th><th>Uplink</th></tr>";
|
||||
var ct = 0;
|
||||
for (var freq in d) {
|
||||
var color = "#d0d0d0";
|
||||
if ((ct & 1) == 0)
|
||||
color = "#c0c0c0";
|
||||
ct += 1;
|
||||
html += "<tr style=\"background-color: " + color + ";\"><td>" + freq / 1000000.0 + "</td><td>" + d[freq]['sysid'].toString(16) + "</td><td>" + d[freq]["rfid"] + "</td><td>" + d[freq]["stid"] + "</td><td>" + (d[freq]["uplink"] / 1000000.0) + "</td></tr>";
|
||||
html += "<tr><td>" + freq / 1000000.0 + "</td><td>" + d[freq]['sysid'].toString(16) + "</td><td>" + d[freq]["rfid"] + "</td><td>" + d[freq]["stid"] + "</td><td>" + (d[freq]["uplink"] / 1000000.0) + "</td></tr>";
|
||||
}
|
||||
html += "</table></div>"; // close div-adjacent
|
||||
|
||||
// end adjacent sites table
|
||||
|
||||
return html;
|
||||
return html; // end adjacent sites table
|
||||
}
|
||||
|
||||
function trunk_summary(d) {
|
||||
|
|
@ -464,7 +457,7 @@ function f_enable_changed(ele, nac) {
|
|||
|
||||
// additional system info: wacn, sysID, rfss, site id, secondary control channels, freq error
|
||||
|
||||
function trunk_detail(d) {
|
||||
function trunk_detail(d) { // json_type = trunk_update
|
||||
var html = "";
|
||||
for (var nac in d) {
|
||||
if (!is_digit(nac.charAt(0)))
|
||||
|
|
@ -472,8 +465,10 @@ function trunk_detail(d) {
|
|||
last_srcaddr[nac] = d[nac]['srcaddr'];
|
||||
last_alg[nac] = d[nac]['alg'];
|
||||
last_algid[nac] = d[nac]['algid'];
|
||||
last_keyid[nac] = d[nac]['keyid'];
|
||||
html += "<div class=\"content\">"; // open div-content
|
||||
last_keyid[nac] = d[nac]['keyid'];
|
||||
|
||||
|
||||
html += "<div class=\"content\">"; // open div-content
|
||||
html += "<span class=\"nac\">";
|
||||
html += "<br>" + d[nac]["sysname"] + " <br> ";
|
||||
html += "NAC " + "0x" + parseInt(nac).toString(16) + " ";
|
||||
|
|
@ -482,7 +477,7 @@ function trunk_detail(d) {
|
|||
html += d[nac]['txchan'] / 1000000.0;
|
||||
html += " tsbks " + comma(d[nac]['tsbks']);
|
||||
html += "</span><br>";
|
||||
|
||||
|
||||
html += "<span class=\"label\">WACN: </span>" + "<span class=\"value\">0x" + parseInt(d[nac]['wacn']).toString(16) + " </span>";
|
||||
html += "<span class=\"label\">System ID: </span>" + "<span class=\"value\">0x" + parseInt(d[nac]['sysid']).toString(16) + " </span>";
|
||||
html += "<span class=\"label\">RFSS ID: </span><span class=\"value\">" + d[nac]['rfid'] + " </span>";
|
||||
|
|
@ -492,7 +487,7 @@ function trunk_detail(d) {
|
|||
for (i=0; i<d[nac]["secondary"].length; i++) {
|
||||
html += d[nac]["secondary"][i] / 1000000.0;
|
||||
html += " ";
|
||||
}
|
||||
}
|
||||
html += "</span><br>";
|
||||
}
|
||||
if (error_val != null) {
|
||||
|
|
@ -500,25 +495,24 @@ function trunk_detail(d) {
|
|||
html += "<span class=\"label\">Fine tune: </span><span class=\"value\">" + fine_tune + "</span><br>";
|
||||
}
|
||||
|
||||
|
||||
// system frequencies table
|
||||
|
||||
|
||||
html += "<br><div class=\"info\"><div class=\"system\">"; // open div-info open div-system
|
||||
html += "<table border=1 borderwidth=0 cellpadding=0 cellspacing=0 width=100%>";
|
||||
html += "<table border=1 border width=0 cellpadding=0 cellspacing=0 width=100%>";
|
||||
html += "<tr><th colspan=99 style=\"align: center\">System Frequencies</th></tr>";
|
||||
html += "<tr><th>Frequency</th><th>Last Seen</th><th colspan=2>Talkgoup ID</th><th>Count</th></tr>";
|
||||
html += "<tr><th>Frequency</th><th>Last</th><th colspan=2>Talkgoup</th><th>Hits</th></tr>";
|
||||
var ct = 0;
|
||||
for (var freq in d[nac]['frequency_data']) {
|
||||
tg2 = d[nac]['frequency_data'][freq]['tgids'][1];
|
||||
if (tg2 == null)
|
||||
tg2 = " ";
|
||||
var color = "#d0d0d0";
|
||||
if ((ct & 1) == 0)
|
||||
color = "#c0c0c0";
|
||||
ct += 1;
|
||||
html += "<tr style=\"background-color: " + color + ";\"><td>" + parseInt(freq) / 1000000.0 + "</td><td>" + d[nac]['frequency_data'][freq]['last_activity'] + "</td><td>" + d[nac]['frequency_data'][freq]['tgids'][0] + "</td><td>" + tg2 + "</td><td>" + d[nac]['frequency_data'][freq]['counter'] + "</td></tr>";
|
||||
html += "<tr><td>" + parseInt(freq) / 1000000.0 + "</td><td>" + d[nac]['frequency_data'][freq]['last_activity'] + "</td><td>" + d[nac]['frequency_data'][freq]['tgids'][0] + "</td><td>" + tg2 + "</td><td>" + d[nac]['frequency_data'][freq]['counter'] + "</td></tr>";
|
||||
}
|
||||
html += "</table></div>"; // close div-system // end system freqencies table
|
||||
|
||||
|
||||
html += adjacent_data(d[nac]['adjacent_data']);
|
||||
html += "</div><br></div><hr><br>"; // close div-content close div-info box-br hr-separating each NAC
|
||||
}
|
||||
|
|
@ -973,9 +967,12 @@ function popOut() {
|
|||
|
||||
// toggle dark/light mode
|
||||
function toggleCSS() {
|
||||
var a = document.getElementById("style");
|
||||
a.x = 'dark' == a.x ? 'main' : 'dark'; // short if
|
||||
a.href = a.x + '.css';
|
||||
var x = document.documentElement.getAttribute('data-theme');
|
||||
if (x == "dark") {
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
}
|
||||
}
|
||||
|
||||
// add comma formatting to number (tsbk)
|
||||
|
|
|
|||
Loading…
Reference in New Issue