views/style.css (view raw)
1html {
2 --bg-page: #306;
3 --bg-dark: #002;
4 --fg: #dcf;
5 --hl: #dcf;
6 --fg-subtle: #a9c;
7 --fg-limited: #a79;
8}
9
10body {
11 background: var(--bg-page);
12 color: var(--fg);
13 font-size: 1em;
14 word-wrap: break-word;
15 font-family: sans-serif, "Noto Color Emoji";
16 line-height: 1.2;
17 overscroll-behavior-y: contain;
18}
19pre, code {
20 white-space: pre-wrap;
21}
22blockquote {
23 margin-left: 0em;
24 padding-left: 0.5em;
25 border-left: 1px solid var(--fg-subtle);
26}
27blockquote cite {
28 margin-left: 2em;
29}
30table {
31 display: block;
32 max-width: 100%;
33 overflow-x: auto;
34}
35a {
36 color: var(--fg);
37}
38form, input, textarea {
39 font-family: monospace, "Noto Color Emoji";
40}
41p {
42 margin-top: 1em;
43 margin-bottom: 1em;
44}
45input {
46 background: var(--bg-page);
47 color: var(--fg);
48 font-size: 1.0em;
49 line-height: 1.2em;
50 padding: 0.4em;
51}
52#honkform input {
53 font-size: 0.8em;
54}
55body > header {
56 margin: 1em auto;
57 font-size: 1.5em;
58}
59body > header span {
60 margin-left: 2em;
61}
62body > header p {
63 padding: 1em;
64}
65header > details {
66 background: var(--bg-page);
67 padding: 1em 1em 1em 1em;
68 position: fixed;
69 top: 0;
70 left: 0;
71 display: inline;
72 max-height: calc(100% - 1em);
73 overflow: auto;
74 opacity: 0.7;
75 overscroll-behavior: contain;
76}
77header > details[open] {
78 padding: 1em 1em 0em 1em;
79 background: var(--bg-dark);
80 border: 1px solid var(--hl);
81 margin-bottom: 1em;
82 opacity: 1.0;
83}
84header > details summary span {
85 display: none;
86}
87header > details[open] summary span {
88 display: inline;
89}
90header > details li {
91 margin: 1em 0em 1em 0em;
92}
93details summary {
94 display: inline;
95}
96@supports (-moz-appearance:none) {
97 details summary {
98 display: list-item;
99 }
100}
101main {
102 max-width: 1200px;
103 margin: auto;
104 font-size: 1.5em;
105}
106hr {
107 border-color: var(--hl);
108}
109.info {
110 background: var(--bg-dark);
111 border: 1px solid var(--hl);
112 margin-bottom: 1em;
113 padding: 0em 1em 0em 1em;
114}
115.info div {
116 margin-top: 1em;
117 margin-bottom: 1em;
118}
119label {
120 font-size: 0.8em;
121}
122label.button, button, select {
123 font-size: 16px;
124 font-family: monospace;
125 color: var(--fg);
126 background: var(--bg-page);
127 border: 1px solid var(--hl);
128 padding: 0.5em;
129 white-space: nowrap;
130}
131.buttonarray {
132 margin-top: -2.0em;
133}
134.buttonarray button, .buttonarray > span {
135 margin-top: 2.0em;
136 display: inline-block;
137}
138button a {
139 text-decoration: none;
140}
141form {
142 margin-top: 1em;
143}
144textarea {
145 padding: 0.5em;
146 font-size: 1em;
147 background: var(--bg-page);
148 color: var(--fg);
149 width: 600px;
150 height: 4em;
151 margin-bottom: 0.5em;
152 box-sizing: border-box;
153 max-width: 100%;
154}
155textarea#honknoise {
156 height: 10em;
157}
158input[type="checkbox"] {
159 position: fixed;
160 top: -9999px;
161}
162input[type="checkbox"] + span:after {
163 content: "no";
164}
165input[type="checkbox"]:checked + span:after {
166 content: "yes";
167}
168input[type="checkbox"]:focus + span:after {
169 outline: 1px solid var(--fg);
170}
171input[type=file] {
172 display: none;
173}
174
175.glow {
176 box-shadow: 0px 0px 16px var(--hl);
177}
178
179.honk {
180 margin: auto;
181 background: var(--bg-dark);
182 border: 1px solid var(--hl);
183 border-radius: 1em;
184 margin-bottom: 1em;
185 padding-left: 1em;
186 padding-right: 1em;
187 padding-top: 0;
188 overflow: hidden;
189}
190
191.honk #honkform {
192 padding: 1em;
193 border: 1px solid var(--fg);
194 }
195.honk a {
196 color: var(--fg);
197 }
198.honk header {
199 white-space: nowrap;
200 overflow: hidden;
201 text-overflow: ellipsis;
202 font-size: 0.8em;
203 line-height: 1.1;
204 margin-top: 1em;
205 height: 64px;
206 }
207
208.honk header .clip a {
209 color: var(--fg-subtle);
210 }
211.honk header img {
212 float: left;
213 margin-right: 1em;
214 width: 64px;
215 height: 64px;
216 }
217.honk header p {
218 margin-top: 0px;
219 }
220.honk .actions button {
221 margin-left: 4em;
222 margin-top: 2em;
223 }
224.honk .noise {
225 line-height: 1.4;
226 }
227
228.honk .noise code .kw { font-weight: bold; }
229.honk .noise code .bi { font-weight: bold; }
230.honk .noise code .st { color: var(--fg-subtle); }
231.honk .noise code .nm { color: #ba88ff; }
232.honk .noise code .op { color: #ba88ff; }
233.honk .noise code .tp { font-weight: bold; }
234.honk .noise code .cm { color: var(--fg-subtle); font-style: italic; }
235.honk .noise code .al { color: #aaffbb; }
236.honk .noise code .dl { color: #ffaabb; }
237
238.honk details.actions summary {
239 color: var(--fg-subtle);
240}
241.subtle .noise {
242 color: var(--fg-subtle);
243 font-size: 0.8em;
244}
245.subtle .noise a {
246 color: var(--fg-subtle);
247}
248.limited {
249 border: 1px solid var(--fg-limited);
250 color: var(--fg-limited);
251}
252.limited .glow {
253 box-shadow: 0px 0px 16px var(--fg-limited);
254}
255.limited .noise {
256 color: var(--fg-limited);
257 }
258.limited .noise a {
259 color: var(--fg-limited);
260 }
261.limited details.actions summary {
262 color: var(--fg-limited);
263 }
264details.noise[open] summary {
265 display: none;
266}
267h1, h2 {
268 font-size: 1.2em;
269}
270h3, h4 {
271 font-size: 1.1em;
272}
273
274img:not(.emu) {
275 background: var(--bg-page);
276}
277img, video {
278 max-width: 100%;
279 max-height: 600px;
280}
281.noise img:not(.emu) {
282 display: block;
283}
284img.emu {
285 width: 2em;
286 height: 2em;
287 vertical-align: middle;
288 margin: -2px;
289 object-fit: contain;
290}
291@media screen and (max-width: 740px) {
292 body {
293 font-size: 12px;
294 }
295 .honk header {
296 height: 52px;
297 }
298 .honk header img {
299 width: 48px;
300 height: 48px;
301 }
302}
303@media print {
304 #topmenu, #topspacer, #infobox, #refreshbox, .actions {
305 display: none;
306 }
307 html {
308 --bg-page: white;
309 --bg-dark: white;
310 --fg: black;
311 --fg-subtle: black;
312 --fg-limited: #a79;
313 }
314}