views/style.css (view raw)
1:root {
2 --bg-page: #F5EFFF;
3 --bg-dark: #6BD2F2;
4 --bg-limited: #4CC9F0;
5 --fg: #02013C;
6 --fg-subtle: #3A0CA3;
7 --fg-limited: #F72585;
8 --hl: #4361EE;
9 --header: #F72585;
10 --header-fg: var(--bg-page);
11}
12
13::selection {
14 background: var(--fg-limited);
15 color: white;
16}
17
18@media (prefers-color-scheme: dark) {
19 :root {
20 --bg-page: #111;
21 --bg-dark: #222;
22 --fg: #ccc;
23 --hl: #333;
24 --fg-subtle: #ccc;
25 --fg-limited: #509c93;
26 --bg-limited: #777;
27 --header: #509c93;
28 --header-fg: #111;
29 }
30}
31
32* {
33 font-size: 14px !important;
34}
35
36body {
37 padding: 0px;
38 margin: 0px;
39 background: var(--bg-page);
40 color: var(--fg);
41 font-size: 14px !important;
42 word-wrap: break-word;
43 font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
44 line-height: 1.2;
45 overscroll-behavior-y: contain;
46}
47pre, code {
48 white-space: pre-wrap;
49}
50blockquote {
51 margin-left: 0em;
52 margin-bottom: 0em;
53 padding-left: 0.5em;
54 border-left: 1px solid var(--fg-subtle);
55}
56cite {
57 margin-left: 2em;
58}
59table {
60 display: block;
61 max-width: 100%;
62 overflow-x: auto;
63}
64
65form, input, textarea {
66 font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
67}
68p {
69 margin-top: 1em;
70 margin-bottom: 1em;
71}
72input {
73 background: var(--bg-page);
74 color: var(--fg);
75 font-size: 1.0em;
76 line-height: 1.2em;
77 padding: 0.4em;
78 border: 1px solid var(--hl);
79}
80#honkform input {
81 font-size: 0.8em;
82}
83body > header {
84 background: var(--header);
85 max-width: 100%;
86 margin: 0px;
87 padding: 1em 0em 2em 0em;
88 font-size: 1.5em;
89 color: var(--header-fg);
90}
91body > header span {
92 margin-left: 2em;
93}
94
95.easylinks a {
96 text-decoration: none !important;
97 color: var(--header-fg);
98}
99
100header > details {
101 padding: 1em 1em 1em 1em;
102 color: var(--header-fg);
103 position: fixed;
104 top: 0;
105 left: 0;
106 display: inline;
107 max-height: calc(100% - 1em);
108 overflow: auto;
109 opacity: 1;
110 overscroll-behavior: contain;
111 z-index: 2;
112}
113header > details[open] {
114 color: var(--fg);
115 padding: 1em 1em 0em 1em;
116 background: var(--bg-dark);
117 margin-bottom: 1em;
118 opacity: 1.0;
119}
120header > details summary span {
121 display: none;
122}
123header > details[open] summary span {
124 display: inline;
125}
126header > details li {
127 margin: 1em 0em 1em 0em;
128}
129details summary {
130 cursor: pointer;
131}
132main {
133 max-width: 655px;
134 margin: auto;
135 font-size: 1.5em;
136}
137hr {
138 border-color: var(--hl);
139}
140.info {
141 background: var(--bg-page);
142 border: 1px solid var(--hl);
143 margin-bottom: 1em;
144 padding: 0em 1em 0em 1em;
145 margin-top: 1em;
146}
147.info div {
148 margin-top: 1em;
149 margin-bottom: 1em;
150}
151label {
152 font-size: 0.8em;
153}
154label.button, button, select {
155 border: none;
156 font-size: 14px;
157 font-family: -apple-system, "Inter", sans-serif, "Noto Color Emoji";
158 color: var(--fg);
159 padding: 0.2em;
160 background: var(--bg-dark);
161 white-space: nowrap;
162}
163
164button:hover {
165 background: var(--bg-limited);
166}
167
168.buttonarray {
169 margin-top: -2.0em;
170}
171.buttonarray button, .buttonarray > span {
172 margin-top: 2.0em;
173 display: inline-block;
174}
175button a {
176 text-decoration: none;
177}
178button {
179 cursor: pointer;
180}
181form {
182 margin-top: 1em;
183}
184textarea {
185 border: 1px solid var(--hl);
186 padding: 0.5em;
187 font-size: 1em;
188 background: var(--bg-page);
189 color: var(--fg);
190 width: 600px;
191 height: 4em;
192 margin-bottom: 0.5em;
193 box-sizing: border-box;
194 max-width: 100%;
195}
196textarea#honknoise {
197 height: 10em;
198}
199input[type="checkbox"] {
200 position: fixed;
201 top: -9999px;
202}
203input[type="checkbox"] + span:after {
204 content: "no";
205}
206input[type="checkbox"]:checked + span:after {
207 content: "yes";
208}
209input[type="checkbox"]:focus + span:after {
210 outline: 1px solid var(--fg);
211}
212input[type=file] {
213 display: none;
214}
215
216.glow {
217 box-shadow: 0px 0px 16px var(--hl);
218}
219.honk {
220 margin: auto;
221 background: var(--bg-page);
222 border-top: 1px solid var(--hl);
223 border-left: 1px solid var(--hl);
224 border-right: 1px solid var(--hl);
225 padding-left: 1em;
226 padding-right: 1em;
227 padding-top: 0;
228 overflow: hidden;
229}
230
231.level1 {
232 margin-left: 0.5em;
233}
234.level1::before {
235 position: absolute;
236 content: ">";
237}
238.level2 {
239 margin-left: 1.0em;
240}
241.level2::before {
242 position: absolute;
243 content: ">>";
244}
245.level3 {
246 margin-left: 1.5em;
247}
248.level3::before {
249 position: absolute;
250 content: ">>>";
251}
252.level4 {
253 margin-left: 2.0em;
254}
255.level4::before {
256 position: absolute;
257 content: ">>>>";
258}
259
260.chat {
261 border-bottom: 0.5px solid var(--fg-subtle);
262 padding-left: 1em;
263}
264.chat p {
265 margin-top: 0.2em;
266 margin-bottom: 0.2em;
267}
268.chattarget {
269 border-bottom: 1px solid var(--fg-subtle);
270}
271.chatstamp {
272 margin-left: -1em;
273}
274
275.honk #honkform {
276 padding: 1em;
277 border: 1px solid var(--fg);
278}
279.honk a {
280 color: var(--fg);
281}
282.honk header {
283 white-space: nowrap;
284 overflow: hidden;
285 text-overflow: ellipsis;
286 font-size: 0.8em;
287 line-height: 1.1;
288 margin-top: 1em;
289}
290
291.honk header .clip a {
292 color: var(--fg-subtle);
293}
294
295.clip {
296 text-transform: lowercase;
297}
298
299.honk header img {
300 float: left;
301 margin-right: 1em;
302 border-radius: 10%;
303 width: 64px;
304 height: 64px;
305}
306.honk header p {
307 margin-top: 0px;
308}
309
310.honk .noise {
311 line-height: 1.4;
312}
313
314.honk .noise code .kw { font-weight: bold; }
315.honk .noise code .bi { font-weight: bold; }
316.honk .noise code .st { color: var(--fg-subtle); }
317.honk .noise code .nm { color: #ba88ff; }
318.honk .noise code .op { color: #ba88ff; }
319.honk .noise code .tp { font-weight: bold; }
320.honk .noise code .cm { color: var(--fg-subtle); font-style: italic; }
321.honk .noise code .al { color: #aaffbb; }
322.honk .noise code .dl { color: #ffaabb; }
323
324summary::marker {
325 content: '\2192';
326}
327
328.honk details.actions summary {
329 color: var(--fg-subtle);
330}
331
332#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 5px var(--fg-subtle);text-align:center;display:none;}
333#emupicker img{margin:0;}
334.emuload{background:var(--bg-page);padding:0.5em;}
335
336.subtle .noise {
337 color: var(--fg-subtle);
338 font-size: 0.8em;
339}
340.subtle .noise a {
341 color: var(--fg-subtle);
342}
343.limited {
344 background: var(--bg-limited);
345 border: 0px solid var(--fg-limited);
346 color: var(--fg-subtle);
347}
348.limited .glow {
349 box-shadow: 0px 0px 16px var(--fg-limited);
350}
351.limited .noise {
352 color: var(--fg-subtle);
353}
354.limited .noise a {
355 color: var(--fg-limited);
356}
357.limited details.actions summary {
358 color: var(--fg-limited);
359}
360details.noise[open] summary {
361 display: none;
362}
363h1, h2 {
364 font-size: 1.2em;
365}
366h3, h4 {
367 font-size: 1.1em;
368}
369
370#topmenu ul {
371 list-style: none;
372 padding-left: 1em;
373}
374
375.honkmeta {
376 color: var(--fg-subtle);
377 float: right;
378 display: inline-flex;
379 padding: 0;
380 margin: 0;
381 list-style: none;
382}
383
384.honkmeta a {
385 color: var(--fg-subtle);
386}
387
388.honkmeta li:after {
389 content: '\00B7';
390 padding-right: 2px;
391 padding-left: 2px;
392}
393
394.honkmeta li:last-child:after {
395 content: '';
396}
397
398.honkmeta li {
399 padding-left: 2px;
400 display: inline-block;
401}
402
403nav {
404 float: right;
405 max-width: 100%;
406}
407
408nav ul {
409 padding: 0;
410 margin: 0;
411 list-style: none;
412 padding-bottom: 20px;
413}
414
415nav ul li {
416 padding-right: 10px;
417 display: inline-block;
418}
419
420img:not(.emu) {
421 background: var(--bg-page);
422}
423img, video {
424 max-width: 100%;
425 max-height: 600px;
426}
427.noise img:not(.emu) {
428 display: block;
429}
430img.emu {
431 width: 2em;
432 height: 2em;
433 vertical-align: middle;
434 margin: -2px;
435 object-fit: contain;
436}
437.nophone {
438 position: fixed;
439 opacity: 0.7;
440 cursor: pointer;
441}
442
443#emupicker{height:300px;overflow-y:scroll;padding:3px;background:var(--bg-dark);border:solid 1px var(--fg-subtle);text-align:center;}
444#emupicker img{margin:0;}
445
446a {
447 color: var(--fg);
448}
449
450a:hover {
451 background: var(--bg-limited);
452}
453
454
455
456@media screen and (max-width: 1360px) {
457 .nophone {
458 display: none;
459 }
460}
461@media screen and (max-width: 740px) {
462 body {
463 font-size: 12px;
464 }
465
466 main {
467 margin: 0 -0.6rem;
468 }
469
470 .honk header img {
471 width: 48px;
472 height: 48px;
473 border-radius: 10%;
474 }
475 details summary {
476 outline: none;
477 }
478}
479@media print {
480 #topmenu, #topspacer, #infobox, #refreshbox, .actions {
481 display: none;
482 }
483 html {
484 --bg-page: white;
485 --bg-dark: white;
486 --fg: black;
487 --fg-subtle: black;
488 --fg-limited: #a79;
489 }
490}
491
492/*
493 * CSP: style-src: self
494 */
495
496li.details {
497 list-style-type: none;
498 margin-left: -1em;
499}
500
501.left1em {
502 margin-left: 1em;
503}
504
505.hide {
506 display: none;
507}
508
509.textright {
510 text-align: right;
511}
512
513.font08em {
514 font-size: 0.8em;
515}
516
517.font18em {
518 font-size: 1.8em;
519}
520
521.wsnowrap {
522 white-space: nowrap;
523}
524
525.skinny main {
526 max-width: 700px;
527}
528
529.fontmonospace {
530 font-family: monospace;
531}