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