aredn_dark.css

/*
  aredn_dark.css by KM6IAU on 2021/OCT/20

  A "dark-mode" style sheet for AREDN nodes, as described here:
  https://www.arednmesh.org/content/aredn-dark-mode-theme

  2023/DEC/30: Added Message box styling, ping status icon styling

*/

body { font-family:Verdana,arial,sans-serif; background: #181818; color:#c0c0c0; }
a:link, a:visited, a:active { color: #be1e28; }


h1 {
  font-family:Verdana,arial,sans-serif;
  color: #be1e28;
  text-shadow: -1px 0 #606060, 0 1px #000000, 1px 0 #000000, 0 -1px #606060;
}


hr {
  width           : 100%;
  height          : 2px;
  margin-left     : auto;
  margin-right    : auto;
  color           : #1ebeb4;
  background-color: #0b4744;
  border-top      : 1px solid #606060;
  border-left     : 1px solid #606060;
  border-right    : 1px solid #000000;
  border-bottom   : 1px solid #000000;
}

body table { font-size: 12px; }

.dist-alert { border: medium solid red; }
.dist-norm  { border: none;             }


.navbar_select { background: #0b4744; color: #ffffff; border-radius: 2px; }
.navbar_select a:link, .navbar_select a:visited, .navbar_select a:active { color:#ffffff; }


input[type=text], input[type=password], textarea, select { filter: invert(1) saturate(0) contrast(0.75); }
button, input[type=submit], input[type=button]           { filter: invert(1) saturate(0) contrast(0.75); }
input[type=file]                                         { filter: invert(1) saturate(0) contrast(0.5) ; }

input[type=checkbox], input[type=range] { filter: invert(1) sepia(1) saturate(2) hue-rotate(127deg) brightness(0.75); }

/* This colorizes the various "question mark" icons on throughout the config pages */
body center form table tbody tr td table tbody tr td span img,
body center form table tbody tr td table tbody tr td table tbody tr td a img
{
  filter:
    brightness(0)
    invert(54%) sepia(79%) saturate(432%) hue-rotate(127deg) brightness(99%) contrast(89%);
}


.TopBanner { width:100%; }
.LogoDiv { position:absolute left:0px; width:100%; height:95; }
.AREDNLogo { filter: invert(1) brightness(0.75); position:absolute; left:10%; width:175; height:95; border-style: none; }
.PartOfAREDN { font-family:Verdana,arial,sans-serif; font-size:xx-small; text-align:center; }

/* Message box styling */
body > form > center > div:nth-child(2) > div { background-color:#403d20 !important; color:#c0c0c0 !important; }

/* ping status icon styling */
img.ping_true   { filter: brightness(0) invert(54%) sepia(79%) saturate( 432%) hue-rotate(127deg) brightness( 99%) contrast( 89%) opacity(100%) !important; }
img.ping_false  { filter: brightness(0) invert(54%) sepia(79%) saturate( 432%) hue-rotate(127deg) brightness( 99%) contrast( 89%) opacity( 25%) !important; }


/* WiFi Scan page styling */
table.sortable thead { background: #303030 !important;  color: #be1e28 !important; }
table.sortable thead th { text-decoration: underline; cursor:pointer; }
.wscan-row-node { background-color: #0c4744; color: #ffffff; }


/* Tunnel Page styling */
.tun_network_row td {
  padding: 5px;
  border-top   : 1px solid #606060;
  border-left  : 1px solid #606060;
  border-right : 1px solid #000000;
  border-bottom: 1px solid #000000;
  border-radius: 2px;
  background-color: #0e5a5a;
}
.tun_client_row td { padding: 2px; }
.tun_client_list1:nth-child(even) { background: #30303020; }
.tun_client_list1:nth-child(odd)  { background: #60606020; }
.tun_client_list2:nth-child(odd)  { background: #30303020; }
.tun_client_list2:nth-child(even) { background: #60606020; }
.tun_client_center_item { vertical-align:middle; text-align:center; }
img.tun_client_active_img   { filter: brightness(0) invert(54%) sepia(79%) saturate( 432%) hue-rotate(127deg) brightness( 99%) contrast( 89%)   ; }
img.tun_client_inactive_img { filter: brightness(0); }
img.tun_client_mailto_img   {
  filter:
    invert(8%) sepia(98%) saturate(6725%) hue-rotate(354deg) brightness(97%) contrast(79%)
    drop-shadow(-1px  0px #606060)
    drop-shadow( 0px -1px #606060)
    drop-shadow( 1px  0px #000000)
    drop-shadow( 0px  1px #000000);
}


#node_description_entry {
vertical-align: middle;
resize: none;
}
#node_description_display {
  text-align       : center;
  vertical-align   : middle;
  background-color : #242424;
  border-radius    : 2px;
  font-size        : 12pt;
  width            : 40%;
}

/* Mesh Status page styling */
td.hidden-hosts { filter: opacity(25%); }
.aliased-hosts { color: #225383; }

/* Charts page styling */
div.canvasjs-chart-container canvas.canvasjs-chart-canvas:nth-child(1) {
  filter: invert(1) hue-rotate(165deg);
}