kopher/app.css

:root {
  --bg-color: #fff;
  --fg-color: #111;
  --link-color: darkblue;
}

* {box-sizing: border-box; margin:0;padding:0}
html, body {
  position: fixed;
  width: 100vw;
  height: 100vh;
  color: var(--fg-color);
  background: var(--bg-color);
  font-family: sans-serif
}
body[data-theme="dark"] {
  --bg-color: #111;
  --fg-color: #fff;
  --link-color: cyan;
}

.preheader {position: absolute; top: 0; left: 0; width: 100%; height: 26px; background: #111}
header {position: absolute; top: 26px; left: 0; padding-left: 1px; width: 100%; height: 26px; border-bottom: 1px solid var(--fg-color); vertical-align: middle}
main {position: absolute; top: 52px; left: 0; width: 100%; height: calc(100% - 72px);font-size: 16px}
footer {position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 4px; height: 20px; border-top: 1px solid var(--fg-color); font-size: 14px}

header>* {display:inline-block; font-size: 18px; padding: 2px; vertical-align: middle;line-height:22px}
header .addr {text-overflow: ellipsis; overflow: hidden; max-width: 87%; white-space: nowrap}
footer .status {width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap}

.content {
  position: absolute;
  left: 2%;
  width: 96%;
  height: 100%;
  overflow: scroll;
  line-height:1.5em;
  white-space: pre;
}

.content[data-wrap="1"] {
  white-space: pre-wrap;
}

.content[data-format="plain"] {
  font-family: "Droid Sans Mono", monospace;
  font-size: 15px;
}

.content pre {
  font-family: "Droid Sans Mono", monospace;
  font-size: 15px;
  white-space: inherit!important;
}

.content a:before {
  content: "\21d2  ";
  color: var(--link-color);
  text-decoration: none;
}
.content a, .content a:visited, .content a:active {
  color: var(--link-color);
  text-decoration: none;
}
.content a[data-focused="1"] {text-decoration: underline}

/* Terminal infoline styling */

/* modes = ['', 'BB', 'FN', 'IT', 'UL', 'BL', '', 'IN', 'HI', 'ST'] */

/* colors (FC/BC): 0 black, 1 red, 2 green, 3 yellow, 4 blue, 5 magenta, 6 cyan, 7 white */

.content span[data-styling] {
  --ds-fg-color: var(--fg-color);
  --ds-bg-color: var(--bg-color);
  background: var(--ds-bg-color);
  color: var(--ds-fg-color);
}

@keyframes strict_blink {
  0% {visibility: hidden}
  50% {visibility: hidden}
  100% {visibility: visible}
}

.content span[data-styling~="BB"] {font-weight: bold}
.content span[data-styling~="FN"] {font-weight: lighter}
.content span[data-styling~="IT"] {font-style: italic}
.content span[data-styling~="UL"] {text-decoration: underline}
.content span[data-styling~="BL"] {animation: 2s linear infinite strict_blink}
.content span[data-styling~="IN"] {background:var(--ds-fg-color);color:var(--ds-bg-color)}
.content span[data-styling~="HI"] {visibility: hidden}
.content span[data-styling~="ST"] {text-decoration: line-through}
/* normal color variants */
.content span[data-styling~="FC0"] {--ds-fg-color: #111}
.content span[data-styling~="FC1"] {--ds-fg-color: red}
.content span[data-styling~="FC2"] {--ds-fg-color: green}
.content span[data-styling~="FC3"] {--ds-fg-color: yellow}
.content span[data-styling~="FC4"] {--ds-fg-color: blue}
.content span[data-styling~="FC5"] {--ds-fg-color: magenta}
.content span[data-styling~="FC6"] {--ds-fg-color: cyan}
.content span[data-styling~="FC7"] {--ds-fg-color: #fff}
/* bright/bold color variants */
.content span[data-styling~="FC0"][data-styling~="BB"] {--ds-fg-color: black}
.content span[data-styling~="FC1"][data-styling~="BB"] {--ds-fg-color: red}
.content span[data-styling~="FC2"][data-styling~="BB"] {--ds-fg-color: lime}
.content span[data-styling~="FC3"][data-styling~="BB"] {--ds-fg-color: yellow}
.content span[data-styling~="FC4"][data-styling~="BB"] {--ds-fg-color: deepskyblue}
.content span[data-styling~="FC5"][data-styling~="BB"] {--ds-fg-color: fuchsia}
.content span[data-styling~="FC6"][data-styling~="BB"] {--ds-fg-color: cyan}
.content span[data-styling~="FC7"][data-styling~="BB"] {--ds-fg-color: white}

.content span[data-styling~="BC0"] {--ds-bg-color: black}
.content span[data-styling~="BC1"] {--ds-bg-color: red}
.content span[data-styling~="BC2"] {--ds-bg-color: green}
.content span[data-styling~="BC3"] {--ds-bg-color: yellow}
.content span[data-styling~="BC4"] {--ds-bg-color: blue}
.content span[data-styling~="BC5"] {--ds-bg-color: magenta}
.content span[data-styling~="BC6"] {--ds-bg-color: cyan}
.content span[data-styling~="BC7"] {--ds-bg-color: white}