i2p.plugins.prometheus/resources/prometheus.css

/* I2P Prometheus plugin theme by dr|z3d */

:root {
  --a: #3b6bbf;
  --active: #f30;
  --bevel: inset 0 0 0 1px #d0d0da, 0 0 1px 1px #97a2ce;
  --bg: #a4a4cb;
  --bg_status: var(--bg_table);
  --bg_table: #f2f2ff;
  --bodybg: var(--bg) url(images/tile2.png) fixed;
  --bodyfont: 10.5pt Open Sans, Segoe UI, Noto Sans, Verdana, Helvetica Neue, sans-serif;
  --border: 1px solid #6c6c93;
  --border_inner: 1px solid #9898b3;
  --btn_active: var(--btn_hover);
  --btn_border: 1px solid #97a2ce;
  --btn_hover: linear-gradient(180deg, #ddd, #fff);
  --btn: linear-gradient(180deg, #fff, #e8e8ff);
  --btn_shadow_active: var(--highlight), inset 4px 4px 4px rgba(0,0,0,.5);
  --codebg:#9d94;
  --configure: url(images/configure.svg);
  --container: linear-gradient(90deg, #fff, #efefff, #fff);
  --cross: url(images/cross.svg);
  --filter_shadow: drop-shadow(0 0 1px var(--hover)) drop-shadow(0 0 2px var(--hover));
  --highlight: inset 0 0 0 1px #fff;
  --highlight_notice: var(--highlight), inset 0 0 1px 1px #900, 0 0 2px 2px rgba(0,0,0,.2);
  --hover: #f60;
  --infohelp: url(images/infohelp.svg);
  --infobox_shadow: 0 0 0 1px #aaa, 0 0 0 1px #fffd inset, 3px 3px 3px #0002;
  --ink: #4f4f63;
  --ink_light: #5b5b71;
  --ink_status_hover: #292d3d;
  --input_text_focus: #fff;
  --input_text: var(--bg_table);
  --logo: url(images/prometheus.svg);
  --monospaced: Fira Sans, Noto Mono, DejaVu Sans Mono, Lucida Console, monospace;
  --outline: 0 0 0 1px rgba(255,96,0,.5);
  --rowEven: repeating-linear-gradient(135deg, rgba(252,252,255,.5) 2px, rgba(240, 240, 255, .3) 3px, #fafaff 5px) #f0f0ff;
  --rowOdd: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 2px, rgba(220, 220, 255, .3) 3px, #fafaff 5px), #fafaff;
  --scrollbar_hover: rgba(16,16,48,.4) var(--bg);
  --scrollbar: rgba(16,16,48,.3) rgba(0,0,0,0);
  --selected: #77f;
  --shadow_input: var(--highlight), inset 1px 1px 1px 1px rgba(0,0,0,.6);
  --shadow_table: 0 0 1px 0 #bbc;
  --starting: url(images/starting.svg);
  --th: linear-gradient(180deg, #fcfcff 50%, #f2f2ff 50%, #efefff);
  --th_sub: linear-gradient(180deg, #fdfdff, #f0f0ff);
  --tick: url(images/tick.svg);
  --txtshadow_title: 0 1px 1px #fff, 0 -1px 1px #e2e2ff, 0 2px 1px #ddf;
  --visited: #2c4e8f;
  --eye:url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m63.95 33.1a2.03 2.03 0 0 0 0-1.97c-6.13-11.3-18.1-18.95-31.85-18.95s-25.7 7.66-31.85 18.94a2.03 2.03 0 0 0 0 1.97c6.13 11.3 18.1 18.95 31.85 18.95s25.7-7.67 31.85-18.95z' fill='%234d5f80'/%3E%3Cpath d='m32.1 47.4c-8.45 0-15.3-6.85-15.3-15.3s6.85-15.3 15.3-15.3 15.3 6.85 15.3 15.3-6.85 15.3-15.3 15.3z' fill='%23fff'/%3E%3Cpath d='m32.1 24.3a7.72 7.72 0 0 0 -1.87.22 4.05 4.05 0 0 1 .99 2.65c0 2.24-1.8 4.04-4.04 4.04-1 0-1.93-.37-2.65-1a7.66 7.66 0 0 0 -.22 1.87 7.79 7.79 0 0 0 7.79 7.79c4.3 0 7.8-3.5 7.8-7.8s-3.5-7.8-7.8-7.8z' fill='%234d5f80'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
  #status .subtitle + tr, #status .subtitle + tr td {
    border-bottom: none !important;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --a: #3b6bbf;
    --active: #f30;
    --bevel: inset 0 0 0 1px #000, 0 0 1px 1px #111, 0 0 0 2px #000;
    --bodyfont: 10pt Droid Sans, Open Sans, Noto Sans, Ubuntu, Segoe UI, Verdana, Helvetica Neue, sans-serif;
    --bg: #111;
    --bg_status: #504a4a;
    --bg_table: #222;
    --bodybg: var(--bg);
    --border: 1px solid #444;
    --border_inner: 1px solid #181818;
    --btn_border: 1px solid #97a2ce;
    --btn_active: linear-gradient(180deg, #333, #444);
    --btn_hover: linear-gradient(180deg, #444, #333 50%, #111);
    --btn: linear-gradient(180deg, #333, #181818);
    --container: #222;
    --highlight: inset 0 0 0 1px rgba(255,255,255,.1);
    --highlight_notice: var(--highlight), inset 0 0 1px 1px #300, 0 0 2px 2px rgba(0,0,0,.5);
    --hover: #f60;
    --infobox_shadow: 0 0 0 1px #111, 0 0 0 1px #fff2 inset, 3px 3px 3px #0004;
    --ink: #ddd;
    --ink_light: #eee;
    --ink_status_hover: #fff;
    --input_text_focus: #333;
    --rowEven: #555;
    --rowOdd: #444;
    --scrollbar_hover: rgba(16,16,48,.4) var(--bg);
    --scrollbar: rgba(16,16,48,.3) rgba(0,0,0,0);
    --selected: #d30;
    --shadow_table: 0 0 0 1px #222, 0 0 0 8px #333;
    --th: linear-gradient(180deg, #303030 50%, #222 50%, #111);
    --th_sub: linear-gradient(180deg, #333, #222);
    --txtshadow_title: 0 0 0 1px #000;
    --visited: #2c4e8f;
    --eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23ddd' d='M64 33.1a2 2 0 000-2 36.2 36.2 0 00-63.8 0 2 2 0 000 2A36.2 36.2 0 0064 33z'/%3E%3Cpath d='M32.1 47.4a15.3 15.3 0 110-30.6 15.3 15.3 0 010 30.6z'/%3E%3Cpath fill='%23ddd' d='M32.1 24.3a7.7 7.7 0 00-1.9.2 4 4 0 011 2.7 4 4 0 01-6.7 3 7.7 7.7 0 00-.2 1.9 7.8 7.8 0 007.8 7.8 7.8 7.8 0 000-15.6z'/%3E%3C/svg%3E");
  }
  #expand img, #collapse img {
    filter: invert(1) opacity(.7);
  }
  #expand:hover img, #collapse:hover img {
    filter: invert(1) opacity(.95) var(--filter_shadow) !important;
  }
  #status {
    border-collapse: separate;
    border-spacing: 0;
    border: var(--border) !important;
  }
  thead th, #configtitle {
    box-shadow: inset 0 0 0 1px #444;
  }
  #expand, #collapse {
    border-left: var(--border) !important;
  }
  #container {
    padding: 0 !important;
  }
}

html, body {
  background: var(--bodybg);
}

body {
  margin: 10px;
  padding: 0;
  min-width: 600px;
  color: var(--ink);
}

body, table {
  font: var(--bodyfont);
}

html {
  scrollbar-color: var(--scrollbar);
}

html:hover {
  scrollbar-color: var(--scrollbar_hover);
}

::selection {
  text-shadow: none;
  color: #fff;
  background: var(--selected);
}

hr, .hidden {
  display: none;
}

a:link, .node a:visited {
  color: var(--a);
  text-decoration: none;
  outline: none;
}

a:visited {
  color: var(--visited);
  text-decoration: none;
}

a:hover, a:focus {
  color: var(--hover);
}

a:active {
  color: var(--active);
}

#container {
  margin: 15px 5px;
  padding: 8px;
  max-width: 1920px;
  border: var(--border);
  box-shadow: var(--bevel);
  background: var(--container);
}

code {
  padding: 0 2px;
  font-family: var(--monospaced);
  color: #373;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: var(--border_inner);
  background: var(--bg_table);
}

tr {
  border: var(--border_inner);
}

#configtitle {
  font-size: 13pt;
}

.subtitle th {
  padding: 6px 8px;
  letter-spacing: normal;
  text-transform: none;
  font-size: 10.5pt;
  background: var(--th_sub);
}

#status {
  border: var(--border_inner);
}

#status th,  #status td {
  text-align: center;
}

#status th, #status td {
  width: 20%;
}

#status td {
  padding: 9px 8px;
  border: var(--border_inner);
  background: var(--bg_status);
}

#status td:first-child {
  text-transform: lowercase;
}

#status td:first-child::first-letter {
  text-transform: uppercase;
}

#status td::before {
  display: none;
}

#starting, #running, #registered, #notregistered {
  vertical-align: middle;
  font-size: 0;
}

#starting::before, #running::before, #registered::before, #notregistered::before {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  background: var(--starting) no-repeat center center / 22px;
  content: "";
  animation: spin linear 3s forwards infinite;
}

#running::before, #registered::before {
  background: var(--tick) no-repeat center center / 16px;
  animation: none;
}

#notregistered::before {
  background: var(--cross) no-repeat center center / 16px;
  animation: none;
}

input.accept {
  padding: 5px 9px 2px 26px;
  background: var(--tick) no-repeat 9px center / 16px;
}

@keyframes spin {
  from {transform: rotate(0)}
  to {transform: rotate(360deg)}
}

table table tr:not(.stream):nth-child(odd), #configuration tr:not(.stream):nth-child(odd) {
  background: var(--rowOdd);
}

table table tr:not(.stream):nth-child(even), #configuration tr:not(.stream):nth-child(even) {
  background: var(--rowEven);
}

td {
  padding: 8px;
}

table table td::before {
  min-height: 20px;
  display: inline-block;
  vertical-align: middle;
  content: "";
}

table table td, #configuration table td {
  padding: 5px 8px;
}

th, #configtitle {
  padding: 6px 8px;
  text-align: left;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11pt;
  background: var(--th);
}

#title {
  padding: 10px 8px 10px 44px;
  font-size: 16pt;
  letter-spacing: .08em !important;
  line-height: 1.1;
  text-shadow: var(--txtshadow_title);
  background: var(--logo) no-repeat 6px center / 32px, var(--th);
}

#configsection, #configsection td {
  border: none;
}

#configsection td {
  padding: 0;
}

#configsection table td {
  padding: 10px;
  vertical-align: text-bottom;
}

#configuration {
  position: relative;
  border: none;
  width: 100%;
}

#configuration tr {
  border-left: none !important;
  border-right: none !important;
}

#configuration td:first-child {
  border-left: none !important;
}

#configuration td:last-child {
  border-right: none !important;
}

#configuration tr:last-child, #configuration tr:last-child td {
  border-bottom: none !important;
}

#configuration th {
  width: 25%;
  letter-spacing: normal;
  text-transform: none;
}

#configuration td:first-child {
  border-left: none !important;
}

#configuration td:last-child {
  border-right: none !important;
  line-height: 1.1;
}

#configuration p {
  padding: 5px 28px;
}

#configuration pre {
  margin: 0 28px;
  padding: 20px;
  font-weight: 600;
  border: 1px solid var(--border_inner);
  border-radius: 6px;
  background: var(--codebg);
  box-shadow: var(--infobox_shadow);
}

#configuration pre::selection {
  color: #fff;
  background: #373;
}

#configuration code, #configuration tt {
  font-weight: 600;
}

#formaction td {
  padding: 12px !important;
  background: var(--th_sub);
}

#configtitle {
  margin: -1px 0;
  padding: 8px 8px 8px 32px;
  width: 100%;
  display: inline-block;
  position: relative;
  z-index: 99;
  box-sizing: border-box;
  text-transform: uppercase;
  font-size: 12.5pt;
  border: var(--border_inner);
  border-left: none;
  border-right: none;
  background: var(--configure) no-repeat 8px center / 18px, var(--th_sub) !important;
  contain: paint;
}

#configtitle b {
  font-weight: 700;
}

#expand, #collapse {
  display: inline-block !important;
  position: absolute;
  top: calc(50% - 18px);
  right: -1px;
  font-size: 0;
  border-left: var(--border_inner);
}

#collapse {
  display: none !important;
}

#expand img, #collapse img {
  padding: 15px;
  width: 8px;
  height: 8px;
  display: inline-block;
  vertical-align: middle;
  transform: scaleX(.6);
}

#collapse img {
  transform: scaleY(.6);
}

#expand:hover img, #collapse:hover img {
  filter: var(--filter_shadow);
  transform: scaleY(1.2) scaleX(.8);
}

#collapse:hover img {
  transform: scaleX(1.2) scaleY(.8);
}

#expand::before, #collapse::before {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
}

#configuration td:nth-child(2) code {
  line-height: 1.15;
  color: #050;
}

#configuration td:nth-child(2) code, #configuration td:nth-child(2) .nowrap {
  display: inline-block;
  vertical-align: middle;
}

.nowrap {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}

#configuration .nowrap {
  font-style: italic;
  color: var(--ink);
}

#configuration i {
  margin-right: 1px;
}

#configuration tr {
  border-top: var(--border_inner);
  border-bottom: var(--border_inner);
}

td, #configuration td {
  border: var(--border_inner);
  border-left-style: solid;
  border-right-style: solid;
  box-shadow: var(--highlight) !important;
}

td:first-child {
  border-left: var(--border_inner) !important;
}

td:last-child {
  border-right: var(--border_inner) !important;
}

#configuration td:first-child {
  text-align: right;
}

#formaction {
  background: var(--th);
}

input[type=text], input[type=password], input[type=submit], a[href$="metrics"] {
  font: var(--bodyfont);
  border: var(--border_inner);
  font-weight: 600;
}

input[type=text], input[type=password] {
  padding: 7px 10px;
  color: var(--ink_lighter);
  background: var(--bg_table);
  box-shadow: var(--shadow_input);
}

input[type=text]:focus, input[type=password]:focus {
  color: var(--ink);
  background: var(--bg_table);
  box-shadow: var(--btn_shadow_active), 0 0 0 1px rgba(255,96,0,.7);
  outline: none;
}

input[type=submit], a[href$="metrics"] {
  padding: 7px 14px 7px 30px;
  color: var(--ink);
  border-radius: 4px;
  box-shadow: var(--highlight);
  background: var(--tick) no-repeat 12px center / 12px, var(--btn);
  cursor: pointer;
}

a[href$="metrics"] {
  margin: -5px 0 0;
  float: right;
  background: var(--eye) no-repeat 12px center / 14px, var(--btn);
}

input[type=submit]:hover, a[href$="metrics"]:hover {
  color: var(--ink_lighter);
  background: var(--tick) no-repeat 12px center / 12px, var(--btn_hover);
  box-shadow: var(--highlight), var(--outline);
}

a[href$="metrics"]:hover {
  background: var(--eye) no-repeat 12px center / 14px, var(--btn_hover);
}


input[type=submit]:active, a[href$="metrics"]:active {
  box-shadow: var(--btn_shadow_active), var(--outline);
  background: var(--tick) no-repeat 12px center / 12px, var(--btn_active);
}

a[href$="metrics"]:active {
  background: var(--eye) no-repeat 12px center / 14px, var(--btn_active);
}

#message {
  padding: 45px 15px 20px;
  width: 400px;
  display: inline-block;
  position: absolute;
  top: 0;
  right: -1000px;
  text-align: center;
  border: var(--border);
  box-shadow: var(--highlight_notice);
  background: var(--infohelp) no-repeat center 22px / 24px, var(--th_sub);
  animation: slideLeft .75s ease-in .1s both, toast 2s ease 4s both;
  filter: opacity(0);
}

#message td {
  border: none !important;
  box-shadow: none !important;
  background: none;
}

@keyframes toast{
  from {top: 0;}
  to {top: -1000px}
}

@keyframes slideLeft {
  from {top: 0; right: -800px; filter: opacity(0)}
  to {top: 0; right: 0; filter: opacity(1)}
}

@media screen and (max-width: 1000px) {
  body {margin: 3px}
  body, table {font-size: 9.5pt}
  .subtitle th {font-size: 10pt}
  #container {margin: 0}
  #title {font-size: 14pt}
  #configtitle {font-size: 12pt}
  #refresh {margin-top: 0}
}