diff options
Diffstat (limited to 'theme.css')
-rw-r--r-- | theme.css | 105 |
1 files changed, 102 insertions, 3 deletions
@@ -1,3 +1,5 @@ | |||
1 | @import 'default.css'; | ||
2 | |||
1 | :root { | 3 | :root { |
2 | --gray0: hsl(270, 0%, 7%); | 4 | --gray0: hsl(270, 0%, 7%); |
3 | --gray1: hsl(270, 0%, 10%); | 5 | --gray1: hsl(270, 0%, 10%); |
@@ -226,6 +228,69 @@ body { | |||
226 | box-shadow: none; | 228 | box-shadow: none; |
227 | } | 229 | } |
228 | 230 | ||
231 | .window h1 { | ||
232 | color: var(--fg-lo); | ||
233 | font-size: 1em; | ||
234 | font-weight: bold; | ||
235 | text-transform: uppercase; | ||
236 | } | ||
237 | |||
238 | .window h2 { | ||
239 | margin: calc(var(--dim--spacing) * 2) 0 0; | ||
240 | padding-bottom: 0; | ||
241 | border-bottom: 0; | ||
242 | color: var(--fg-lo); | ||
243 | font-size: 1em; | ||
244 | } | ||
245 | |||
246 | .window h2 small { | ||
247 | color: var(--fg); | ||
248 | font-size: 1em; | ||
249 | line-height: inherit; | ||
250 | } | ||
251 | |||
252 | .window h1 + *, | ||
253 | .window h2 + *, | ||
254 | .window h2 + .sr-only + * { | ||
255 | margin-top: var(--dim--spacing); | ||
256 | } | ||
257 | |||
258 | /* CONNECT FORM */ | ||
259 | |||
260 | #connect .connect-row { | ||
261 | align-items: baseline; | ||
262 | margin-top: var(--dim--spacing); | ||
263 | } | ||
264 | |||
265 | #connect .connect-row + .connect-row { | ||
266 | margin-top: calc(var(--dim--spacing) * .5); | ||
267 | } | ||
268 | |||
269 | #connect label { | ||
270 | margin-top: 0; | ||
271 | white-space: nowrap; | ||
272 | } | ||
273 | |||
274 | #connect .btn { | ||
275 | margin-top: calc(var(--dim--spacing) * 2); | ||
276 | } | ||
277 | |||
278 | #connect .connect-row > .input, | ||
279 | #connect .connect-row > .input-wrap { | ||
280 | width: 100%; | ||
281 | } | ||
282 | |||
283 | @media (max-width: 479px) { | ||
284 | #connect .connect-row + .connect-row { | ||
285 | margin-top: var(--dim--spacing); | ||
286 | } | ||
287 | |||
288 | #connect .connect-row > .input, | ||
289 | #connect .connect-row > .input-wrap { | ||
290 | margin-top: calc(var(--dim--spacing) * .5); | ||
291 | } | ||
292 | } | ||
293 | |||
229 | /* SIDEBAR */ | 294 | /* SIDEBAR */ |
230 | 295 | ||
231 | #sidebar { | 296 | #sidebar { |
@@ -245,7 +310,7 @@ body { | |||
245 | .channel-list-item, | 310 | .channel-list-item, |
246 | .channel-list-item[data-type="lobby"], | 311 | .channel-list-item[data-type="lobby"], |
247 | .jump-to-results .channel-list-item[data-type="lobby"] { | 312 | .jump-to-results .channel-list-item[data-type="lobby"] { |
248 | padding: var(--dim--btn--pad-v) var(--dim--container--pad); | 313 | padding: var(--dim--btn--pad-v) calc(var(--dim--container--pad) + var(--dim--btn--pad-v)); |
249 | } | 314 | } |
250 | 315 | ||
251 | #footer button.active, | 316 | #footer button.active, |
@@ -329,6 +394,24 @@ textarea.input { | |||
329 | min-height: var(--dim--input--height); | 394 | min-height: var(--dim--input--height); |
330 | } | 395 | } |
331 | 396 | ||
397 | .password-container input { | ||
398 | padding-right: calc(2 * var(--dim--input--pad-h) + var(--dim--input--height) - 2 * 2px); | ||
399 | } | ||
400 | |||
401 | .password-container .reveal-password { | ||
402 | right: var(--dim--input--pad-h); | ||
403 | } | ||
404 | |||
405 | .password-container .reveal-password span { | ||
406 | width: calc(var(--dim--input--height) - 2 * 2px); | ||
407 | height: calc(var(--dim--input--height) - 2 * 2px); | ||
408 | color: var(--color--sidebar-input--fg); | ||
409 | } | ||
410 | |||
411 | .password-container .reveal-password-visible span::before { | ||
412 | color: var(--color--red); | ||
413 | } | ||
414 | |||
332 | /* HEADER */ | 415 | /* HEADER */ |
333 | 416 | ||
334 | #chat .header { | 417 | #chat .header { |
@@ -438,8 +521,9 @@ textarea.input { | |||
438 | } | 521 | } |
439 | 522 | ||
440 | #chat .time { | 523 | #chat .time { |
441 | grid-area: time; | 524 | grid-area: time; |
442 | justify-self: flex-start; | 525 | justify-self: flex-start; |
526 | font-variant-numeric: tabular-nums; | ||
443 | } | 527 | } |
444 | 528 | ||
445 | #chat .from:empty, | 529 | #chat .from:empty, |
@@ -486,6 +570,21 @@ textarea.input { | |||
486 | width: 100%; | 570 | width: 100%; |
487 | } | 571 | } |
488 | 572 | ||
573 | #chat .msg[data-type="monospace_block"] { | ||
574 | grid-template-columns: auto 1fr; | ||
575 | grid-template-areas: "time user" "content content"; | ||
576 | } | ||
577 | |||
578 | #chat .msg[data-type="monospace_block"] .text { | ||
579 | margin-top: calc(var(--dim--spacing) * .5); | ||
580 | padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h); | ||
581 | border-radius: 0; | ||
582 | background-color: var(--color--msg--bg); | ||
583 | color: var(--color--msg--fg); | ||
584 | font-family: monospace; | ||
585 | font-size: 15px; | ||
586 | } | ||
587 | |||
489 | #chat .msg[data-type="away"] .content, | 588 | #chat .msg[data-type="away"] .content, |
490 | #chat .msg[data-type="back"] .content, | 589 | #chat .msg[data-type="back"] .content, |
491 | #chat .msg[data-type="condensed"] .content, | 590 | #chat .msg[data-type="condensed"] .content, |