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