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