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}
93main {
94 max-width: 1200px;
95 margin: auto;
96 font-size: 1.5em;
97}
98hr {
99 border-color: var(--hl);
100}
101.info {
102 background: var(--bg-dark);
103 border: 1px solid var(--hl);
104 margin-bottom: 1em;
105 padding: 0em 1em 0em 1em;
106}
107.info div {
108 margin-top: 1em;
109 margin-bottom: 1em;
110}
111label {
112 font-size: 0.8em;
113}
114label.button, button, select {
115 font-size: 16px;
116 font-family: monospace;
117 color: var(--fg);
118 background: var(--bg-page);
119 border: 1px solid var(--hl);
120 padding: 0.5em;
121 white-space: nowrap;
122}
123.buttonarray {
124 margin-top: -2.0em;
125}
126.buttonarray button, .buttonarray > span {
127 margin-top: 2.0em;
128 display: inline-block;
129}
130button a {
131 text-decoration: none;
132}
133form {
134 margin-top: 1em;
135}
136textarea {
137 padding: 0.5em;
138 font-size: 1em;
139 background: var(--bg-page);
140 color: var(--fg);
141 width: 600px;
142 height: 4em;
143 margin-bottom: 0.5em;
144 box-sizing: border-box;
145 max-width: 100%;
146}
147textarea#honknoise {
148 height: 10em;
149}
150input[type="checkbox"] {
151 position: fixed;
152 top: -9999px;
153}
154input[type="checkbox"] + span:after {
155 content: "no";
156}
157input[type="checkbox"]:checked + span:after {
158 content: "yes";
159}
160input[type="checkbox"]:focus + span:after {
161 outline: 1px solid var(--fg);
162}
163input[type=file] {
164 display: none;
165}
166
167.glow {
168 box-shadow: 0px 0px 16px var(--hl);
169}
170
171.honk {
172 margin: auto;
173 background: var(--bg-dark);
174 border: 1px solid var(--hl);
175 border-radius: 1em;
176 margin-bottom: 1em;
177 padding-left: 1em;
178 padding-right: 1em;
179 padding-top: 0;
180 overflow: hidden;
181}
182
183.chat {
184 border-bottom: 0.5px solid var(--fg-subtle);
185 padding-left: 1em;
186}
187.chat p {
188 margin-top: 0.2em;
189 margin-bottom: 0.2em;
190}
191.chattarget {
192 border-bottom: 1px solid var(--fg-subtle);
193}
194.chatstamp {
195 margin-left: -1em;
196}
197
198.honk #honkform {
199 padding: 1em;
200 border: 1px solid var(--fg);
201 }
202.honk a {
203 color: var(--fg);
204 }
205.honk header {
206 white-space: nowrap;
207 overflow: hidden;
208 text-overflow: ellipsis;
209 font-size: 0.8em;
210 line-height: 1.1;
211 margin-top: 1em;
212 height: 64px;
213 }
214
215.honk header .clip a {
216 color: var(--fg-subtle);
217 }
218.honk header img {
219 float: left;
220 margin-right: 1em;
221 width: 64px;
222 height: 64px;
223 }
224.honk header p {
225 margin-top: 0px;
226 }
227.honk .actions button {
228 margin-left: 4em;
229 margin-top: 2em;
230 }
231.honk .noise {
232 line-height: 1.4;
233 }
234
235.honk .noise code .kw { font-weight: bold; }
236.honk .noise code .bi { font-weight: bold; }
237.honk .noise code .st { color: var(--fg-subtle); }
238.honk .noise code .nm { color: #ba88ff; }
239.honk .noise code .op { color: #ba88ff; }
240.honk .noise code .tp { font-weight: bold; }
241.honk .noise code .cm { color: var(--fg-subtle); font-style: italic; }
242.honk .noise code .al { color: #aaffbb; }
243.honk .noise code .dl { color: #ffaabb; }
244
245.honk details.actions summary {
246 color: var(--fg-subtle);
247}
248.subtle .noise {
249 color: var(--fg-subtle);
250 font-size: 0.8em;
251}
252.subtle .noise a {
253 color: var(--fg-subtle);
254}
255.limited {
256 border: 1px solid var(--fg-limited);
257 color: var(--fg-limited);
258}
259.limited .glow {
260 box-shadow: 0px 0px 16px var(--fg-limited);
261}
262.limited .noise {
263 color: var(--fg-limited);
264 }
265.limited .noise a {
266 color: var(--fg-limited);
267 }
268.limited details.actions summary {
269 color: var(--fg-limited);
270 }
271details.noise[open] summary {
272 display: none;
273}
274h1, h2 {
275 font-size: 1.2em;
276}
277h3, h4 {
278 font-size: 1.1em;
279}
280
281img:not(.emu) {
282 background: var(--bg-page);
283}
284img, video {
285 max-width: 100%;
286 max-height: 600px;
287}
288.noise img:not(.emu) {
289 display: block;
290}
291img.emu {
292 width: 2em;
293 height: 2em;
294 vertical-align: middle;
295 margin: -2px;
296 object-fit: contain;
297}
298@media screen and (max-width: 740px) {
299 body {
300 font-size: 12px;
301 }
302 .honk header {
303 height: 52px;
304 }
305 .honk header img {
306 width: 48px;
307 height: 48px;
308 }
309 details summary {
310 outline: none;
311 }
312}
313@media print {
314 #topmenu, #topspacer, #infobox, #refreshbox, .actions {
315 display: none;
316 }
317 html {
318 --bg-page: white;
319 --bg-dark: white;
320 --fg: black;
321 --fg-subtle: black;
322 --fg-limited: #a79;
323 }
324}