app.css (4441B)
1 :root { 2 --bg-color: #fff; 3 --fg-color: #111; 4 --link-color: darkblue; 5 } 6 7 * {box-sizing: border-box; margin:0;padding:0} 8 html, body { 9 position: fixed; 10 width: 100vw; 11 height: 100vh; 12 color: var(--fg-color); 13 background: var(--bg-color); 14 font-family: sans-serif 15 } 16 body[data-theme="dark"] { 17 --bg-color: #111; 18 --fg-color: #fff; 19 --link-color: cyan; 20 } 21 22 .preheader {position: absolute; top: 0; left: 0; width: 100%; height: 26px; background: #111} 23 header {position: absolute; top: 26px; left: 0; padding-left: 1px; width: 100%; height: 26px; border-bottom: 1px solid var(--fg-color); vertical-align: middle} 24 main {position: absolute; top: 52px; left: 0; width: 100%; height: calc(100% - 72px);font-size: 16px} 25 footer {position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 4px; height: 20px; border-top: 1px solid var(--fg-color); font-size: 14px} 26 27 header>* {display:inline-block; font-size: 18px; padding: 2px; vertical-align: middle;line-height:22px} 28 header .addr {text-overflow: ellipsis; overflow: hidden; max-width: 87%; white-space: nowrap} 29 footer .status {width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap} 30 31 .content { 32 position: absolute; 33 left: 2%; 34 width: 96%; 35 height: 100%; 36 overflow: scroll; 37 line-height:1.5em; 38 white-space: pre; 39 } 40 41 .content[data-wrap="1"] { 42 white-space: pre-wrap; 43 } 44 45 .content[data-format="plain"] { 46 font-family: "Droid Sans Mono", monospace; 47 font-size: 15px; 48 } 49 50 .content pre { 51 font-family: "Droid Sans Mono", monospace; 52 font-size: 15px; 53 white-space: inherit!important; 54 } 55 56 .content a:before { 57 content: "\21d2 "; 58 color: var(--link-color); 59 text-decoration: none; 60 } 61 .content a, .content a:visited, .content a:active { 62 color: var(--link-color); 63 text-decoration: none; 64 } 65 .content a[data-focused="1"] {text-decoration: underline} 66 67 /* Terminal infoline styling */ 68 69 /* modes = ['', 'BB', 'FN', 'IT', 'UL', 'BL', '', 'IN', 'HI', 'ST'] */ 70 71 /* colors (FC/BC): 0 black, 1 red, 2 green, 3 yellow, 4 blue, 5 magenta, 6 cyan, 7 white */ 72 73 .content span[data-styling] { 74 --ds-fg-color: var(--fg-color); 75 --ds-bg-color: var(--bg-color); 76 background: var(--ds-bg-color); 77 color: var(--ds-fg-color); 78 } 79 80 @keyframes strict_blink { 81 0% {visibility: hidden} 82 50% {visibility: hidden} 83 100% {visibility: visible} 84 } 85 86 .content span[data-styling~="BB"] {font-weight: bold} 87 .content span[data-styling~="FN"] {font-weight: lighter} 88 .content span[data-styling~="IT"] {font-style: italic} 89 .content span[data-styling~="UL"] {text-decoration: underline} 90 .content span[data-styling~="BL"] {animation: 2s linear infinite strict_blink} 91 .content span[data-styling~="IN"] {background:var(--ds-fg-color);color:var(--ds-bg-color)} 92 .content span[data-styling~="HI"] {visibility: hidden} 93 .content span[data-styling~="ST"] {text-decoration: line-through} 94 /* normal color variants */ 95 .content span[data-styling~="FC0"] {--ds-fg-color: #111} 96 .content span[data-styling~="FC1"] {--ds-fg-color: red} 97 .content span[data-styling~="FC2"] {--ds-fg-color: green} 98 .content span[data-styling~="FC3"] {--ds-fg-color: yellow} 99 .content span[data-styling~="FC4"] {--ds-fg-color: blue} 100 .content span[data-styling~="FC5"] {--ds-fg-color: magenta} 101 .content span[data-styling~="FC6"] {--ds-fg-color: cyan} 102 .content span[data-styling~="FC7"] {--ds-fg-color: #fff} 103 /* bright/bold color variants */ 104 .content span[data-styling~="FC0"][data-styling~="BB"] {--ds-fg-color: black} 105 .content span[data-styling~="FC1"][data-styling~="BB"] {--ds-fg-color: red} 106 .content span[data-styling~="FC2"][data-styling~="BB"] {--ds-fg-color: lime} 107 .content span[data-styling~="FC3"][data-styling~="BB"] {--ds-fg-color: yellow} 108 .content span[data-styling~="FC4"][data-styling~="BB"] {--ds-fg-color: deepskyblue} 109 .content span[data-styling~="FC5"][data-styling~="BB"] {--ds-fg-color: fuchsia} 110 .content span[data-styling~="FC6"][data-styling~="BB"] {--ds-fg-color: cyan} 111 .content span[data-styling~="FC7"][data-styling~="BB"] {--ds-fg-color: white} 112 113 .content span[data-styling~="BC0"] {--ds-bg-color: black} 114 .content span[data-styling~="BC1"] {--ds-bg-color: red} 115 .content span[data-styling~="BC2"] {--ds-bg-color: green} 116 .content span[data-styling~="BC3"] {--ds-bg-color: yellow} 117 .content span[data-styling~="BC4"] {--ds-bg-color: blue} 118 .content span[data-styling~="BC5"] {--ds-bg-color: magenta} 119 .content span[data-styling~="BC6"] {--ds-bg-color: cyan} 120 .content span[data-styling~="BC7"] {--ds-bg-color: white} 121