summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-10-10 21:45:30 +0200
committerVolpeon <git@volpeon.ink>2023-10-10 21:45:30 +0200
commita8dd7125f16a559ba96a9713759e78862c7a48cf (patch)
tree278ebae2197b5f4177ac04854f1a6d309385786e
parentTable fix (diff)
downloadthelounge-theme-vulpes-a8dd7125f16a559ba96a9713759e78862c7a48cf.tar.gz
thelounge-theme-vulpes-a8dd7125f16a559ba96a9713759e78862c7a48cf.tar.bz2
thelounge-theme-vulpes-a8dd7125f16a559ba96a9713759e78862c7a48cf.zip
-rw-r--r--theme.css440
1 files changed, 225 insertions, 215 deletions
diff --git a/theme.css b/theme.css
index 974e8d7..c10fb14 100644
--- a/theme.css
+++ b/theme.css
@@ -1,4 +1,4 @@
1@import 'default.css'; 1@import "default.css";
2 2
3:root { 3:root {
4 --gray0: hsl(270deg, 0%, 7%); 4 --gray0: hsl(270deg, 0%, 7%);
@@ -12,83 +12,83 @@
12 12
13 /* * */ 13 /* * */
14 14
15 --bg-hi: var(--gray0); 15 --bg-hi: var(--gray0);
16 --bg: var(--gray1); 16 --bg: var(--gray1);
17 17
18 --obj-hi: var(--gray2); 18 --obj-hi: var(--gray2);
19 --obj: var(--gray3); 19 --obj: var(--gray3);
20 --obj-lo: var(--gray4); 20 --obj-lo: var(--gray4);
21 21
22 --fg-hi: var(--gray5); 22 --fg-hi: var(--gray5);
23 --fg: var(--gray6); 23 --fg: var(--gray6);
24 --fg-lo: var(--gray7); 24 --fg-lo: var(--gray7);
25 25
26 /* * */ 26 /* * */
27 27
28 --color--red: hsl(0, 91%, 73%); 28 --color--red: hsl(0, 91%, 73%);
29 --color--dark-red: hsl(0, 79%, 64%); 29 --color--dark-red: hsl(0, 79%, 64%);
30 --color--brown: hsl(14, 58%, 59%); 30 --color--brown: hsl(14, 58%, 59%);
31 --color--orange: hsl(19, 100%, 76%); 31 --color--orange: hsl(19, 100%, 76%);
32 --color--blue: hsl(214, 100%, 76%); 32 --color--blue: hsl(214, 100%, 76%);
33 --color--dark-blue: hsl(214, 100%, 57%); 33 --color--dark-blue: hsl(214, 100%, 57%);
34 --color--yellow: hsl(38, 100%, 76%); 34 --color--yellow: hsl(38, 100%, 76%);
35 --color--green: hsl(123, 43%, 66%); 35 --color--green: hsl(123, 43%, 66%);
36 --color--dark-green: hsl(123, 43%, 56%); 36 --color--dark-green: hsl(123, 43%, 56%);
37 --color--cyan: hsl(180, 43%, 66%); 37 --color--cyan: hsl(180, 43%, 66%);
38 --color--dark-cyan: hsl(180, 43%, 54%); 38 --color--dark-cyan: hsl(180, 43%, 54%);
39 --color--purple: hsl(267, 69%, 73%); 39 --color--purple: hsl(267, 69%, 73%);
40 --color--pink: hsl(294, 69%, 73%); 40 --color--pink: hsl(294, 69%, 73%);
41 --color--gray: hsl(0, 0%, 58%); 41 --color--gray: hsl(0, 0%, 58%);
42 --color--light-gray: hsl(204, 5%, 82%); 42 --color--light-gray: hsl(204, 5%, 82%);
43 43
44 /* * */ 44 /* * */
45 45
46 --color--sidebar--bg: var(--bg-hi); 46 --color--sidebar--bg: var(--bg-hi);
47 --color--sidebar--fg: var(--fg); 47 --color--sidebar--fg: var(--fg);
48 --color--sidebar--fg-hi: var(--fg-hi); 48 --color--sidebar--fg-hi: var(--fg-hi);
49 49
50 --color--window--bg: var(--bg); 50 --color--window--bg: var(--bg);
51 --color--header--title-fg: var(--fg-lo); 51 --color--header--title-fg: var(--fg-lo);
52 52
53 --color--input--bg: var(--obj); 53 --color--input--bg: var(--obj);
54 --color--input--fg: var(--fg-lo); 54 --color--input--fg: var(--fg-lo);
55 --color--input--ph-fg: var(--fg-hi); 55 --color--input--ph-fg: var(--fg-hi);
56 56
57 --color--sidebar-input--bg: var(--obj-hi); 57 --color--sidebar-input--bg: var(--obj-hi);
58 --color--sidebar-input--fg: var(--fg-lo); 58 --color--sidebar-input--fg: var(--fg-lo);
59 --color--sidebar-input--ph-fg: var(--fg-hi); 59 --color--sidebar-input--ph-fg: var(--fg-hi);
60 60
61 --color--sidebar-btn--bg: var(--obj-hi); 61 --color--sidebar-btn--bg: var(--obj-hi);
62 --color--sidebar-btn--fg: var(--fg); 62 --color--sidebar-btn--fg: var(--fg);
63 --color--sidebar-btn--active-fg: var(--fg-lo); 63 --color--sidebar-btn--active-fg: var(--fg-lo);
64 64
65 --color--sidebar-badge--bg: var(--obj); 65 --color--sidebar-badge--bg: var(--obj);
66 --color--sidebar-badge--fg: var(--fg-lo); 66 --color--sidebar-badge--fg: var(--fg-lo);
67 67
68 --color--header--bg: var(--obj-hi); 68 --color--header--bg: var(--obj-hi);
69 --color--header--fg: var(--fg); 69 --color--header--fg: var(--fg);
70 --color--header--title-fg: var(--fg-lo); 70 --color--header--title-fg: var(--fg-lo);
71 71
72 --color--date-marker--fg: var(--fg-hi); 72 --color--date-marker--fg: var(--fg-hi);
73 --color--date-marker--border: var(--obj); 73 --color--date-marker--border: var(--obj);
74 74
75 --color--msg--bg: var(--obj-hi); 75 --color--msg--bg: var(--obj-hi);
76 --color--msg--border: var(--obj); 76 --color--msg--border: var(--obj);
77 --color--msg--fg: var(--fg); 77 --color--msg--fg: var(--fg);
78 --color--msg--emph-fg: var(--fg-lo); 78 --color--msg--emph-fg: var(--fg-lo);
79 --color--msg--meta-fg: var(--fg-hi); 79 --color--msg--meta-fg: var(--fg-hi);
80 --color--msg--self-bg: var(--obj); 80 --color--msg--self-bg: var(--obj);
81 --color--msg--self-fg: var(--fg-lo); 81 --color--msg--self-fg: var(--fg-lo);
82 --color--msg--self-border: var(--fg-lo); 82 --color--msg--self-border: var(--fg-lo);
83 --color--msg--action-fg: var(--fg-hi); 83 --color--msg--action-fg: var(--fg-hi);
84 84
85 --color--channels--title: var(--fg-lo); 85 --color--channels--title: var(--fg-lo);
86 --color--channels--border: var(--obj); 86 --color--channels--border: var(--obj);
87 87
88 --color--cform--bg: var(--obj-hi); 88 --color--cform--bg: var(--obj-hi);
89 --color--cform--fg: var(--fg-lo); 89 --color--cform--fg: var(--fg-lo);
90 --color--cform--btn-fg: var(--fg); 90 --color--cform--btn-fg: var(--fg);
91 --color--cform--ph-fg: var(--fg-hi); 91 --color--cform--ph-fg: var(--fg-hi);
92 --color--cform--nick-bg: var(--obj-lo); 92 --color--cform--nick-bg: var(--obj-lo);
93 --color--cform--nick-fg: var(--fg-lo); 93 --color--cform--nick-fg: var(--fg-lo);
94 94
@@ -98,55 +98,57 @@
98 --color--tooltip--bg: var(--obj); 98 --color--tooltip--bg: var(--obj);
99 --color--tooltip--fg: var(--fg-lo); 99 --color--tooltip--fg: var(--fg-lo);
100 100
101 --color--popup--bg: var(--obj-hi); 101 --color--popup--bg: var(--obj-hi);
102 --color--popup--fg: var(--fg); 102 --color--popup--fg: var(--fg);
103 --color--popup--title-fg: var(--fg-lo); 103 --color--popup--title-fg: var(--fg-lo);
104 --color--popup--meta-fg: var(--fg-hi); 104 --color--popup--meta-fg: var(--fg-hi);
105 --color--popup--border: var(--obj); 105 --color--popup--border: var(--obj);
106 --color--popup--item-hover-bg: var(--obj); 106 --color--popup--item-hover-bg: var(--obj);
107 --color--popup--item-hover-fg: var(--fg-lo); 107 --color--popup--item-hover-fg: var(--fg-lo);
108 --color--popup--msg-bg: var(--obj); 108 --color--popup--msg-bg: var(--obj);
109 --color--popup--msg-fg: var(--fg-lo); 109 --color--popup--msg-fg: var(--fg-lo);
110 110
111 /* * */ 111 /* * */
112 112
113 --dim--spacing: 1rem; 113 --dim--spacing: 1rem;
114 114
115 --dim--container--pad: .75rem; 115 --dim--container--pad: 0.75rem;
116 --dim--container-lg--pad: 1.5rem; 116 --dim--container-lg--pad: 1.5rem;
117 117
118 --dim--input--height: 2.2rem; 118 --dim--input--height: 2.2rem;
119 --dim--input--pad-h: .7rem; 119 --dim--input--pad-h: 0.7rem;
120 120
121 --dim--btn--pad-v: .6rem; 121 --dim--btn--pad-v: 0.6rem;
122 --dim--btn--pad-h: .7rem; 122 --dim--btn--pad-h: 0.7rem;
123 123
124 --dim--msg--pad-v: .5rem; 124 --dim--msg--pad-v: 0.5rem;
125 --dim--msg--pad-h: .7rem; 125 --dim--msg--pad-h: 0.7rem;
126 126
127 --dim--popup--pad: .3rem; 127 --dim--popup--pad: 0.3rem;
128 --dim--popup--item-pad-v: .4rem; 128 --dim--popup--item-pad-v: 0.4rem;
129 --dim--popup--item-pad-h: .7rem; 129 --dim--popup--item-pad-h: 0.7rem;
130 130
131 /* * */ 131 /* * */
132 132
133 --body-bg-color: var(--color--sidebar--bg); 133 --body-bg-color: var(--color--sidebar--bg);
134 --window-bg-color: var(--color--window--bg); 134 --window-bg-color: var(--color--window--bg);
135 --window-heading-color: var(--color--header--title-fg); 135 --window-heading-color: var(--color--header--title-fg);
136 --body-color: var(--color--sidebar--fg); 136 --body-color: var(--color--sidebar--fg);
137 --body-color-muted: var(--color--sidebar--fg-hi); 137 --body-color-muted: var(--color--sidebar--fg-hi);
138 --link-color: var(--color--yellow); 138 --link-color: var(--color--yellow);
139 --unread-marker-color: var(--color--yellow); 139 --unread-marker-color: var(--color--yellow);
140 --date-marker-color: var(--color--date-marker--fg); 140 --date-marker-color: var(--color--date-marker--fg);
141 --highlight-bg-color: var(--bg-lo); 141 --highlight-bg-color: var(--bg-lo);
142 --highlight-border-color: var(--color--yellow); 142 --highlight-border-color: var(--color--yellow);
143 --overlay-bg-color: rgba(0, 0, 0, .75); 143 --overlay-bg-color: rgba(0, 0, 0, 0.75);
144 --button-color: var(--color--yellow); 144 --button-color: var(--color--yellow);
145 --button-text-color-hover: #000; 145 --button-text-color-hover: #000;
146} 146}
147 147
148body { 148body {
149 font-family: IBM Plex Sans, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, Arial; 149 font-family: IBM Plex Sans, -apple-system, system-ui, Segoe UI, Roboto,
150 Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont,
151 Helvetica Neue, Arial;
150 scrollbar-color: var(--color--scrollbar--fg) var(--color--scrollbar--bg); 152 scrollbar-color: var(--color--scrollbar--fg) var(--color--scrollbar--bg);
151} 153}
152 154
@@ -240,27 +242,27 @@ body {
240 242
241.window { 243.window {
242 border-radius: 0; 244 border-radius: 0;
243 box-shadow: none; 245 box-shadow: none;
244} 246}
245 247
246.window h1 { 248.window h1 {
247 color: var(--fg-lo); 249 color: var(--fg-lo);
248 font-size: 1em; 250 font-size: 1em;
249 font-weight: bold; 251 font-weight: bold;
250 text-transform: uppercase; 252 text-transform: uppercase;
251} 253}
252 254
253.window h2 { 255.window h2 {
254 margin: calc(var(--dim--spacing) * 2) 0 0; 256 margin: calc(var(--dim--spacing) * 2) 0 0;
255 padding-bottom: 0; 257 padding-bottom: 0;
256 border-bottom: 0; 258 border-bottom: 0;
257 color: var(--fg-lo); 259 color: var(--fg-lo);
258 font-size: 1em; 260 font-size: 1em;
259} 261}
260 262
261.window h2 small { 263.window h2 small {
262 color: var(--fg); 264 color: var(--fg);
263 font-size: 1em; 265 font-size: 1em;
264 line-height: inherit; 266 line-height: inherit;
265} 267}
266 268
@@ -274,15 +276,15 @@ body {
274 276
275#connect .connect-row { 277#connect .connect-row {
276 align-items: baseline; 278 align-items: baseline;
277 margin-top: var(--dim--spacing); 279 margin-top: var(--dim--spacing);
278} 280}
279 281
280#connect .connect-row + .connect-row { 282#connect .connect-row + .connect-row {
281 margin-top: calc(var(--dim--spacing) * .5); 283 margin-top: calc(var(--dim--spacing) * 0.5);
282} 284}
283 285
284#connect label { 286#connect label {
285 margin-top: 0; 287 margin-top: 0;
286 white-space: nowrap; 288 white-space: nowrap;
287} 289}
288 290
@@ -302,7 +304,7 @@ body {
302 304
303 #connect .connect-row > .input, 305 #connect .connect-row > .input,
304 #connect .connect-row > .input-wrap { 306 #connect .connect-row > .input-wrap {
305 margin-top: calc(var(--dim--spacing) * .5); 307 margin-top: calc(var(--dim--spacing) * 0.5);
306 } 308 }
307} 309}
308 310
@@ -323,7 +325,7 @@ body {
323 325
324#footer button { 326#footer button {
325 border-radius: 0; 327 border-radius: 0;
326 color: var(--color--sidebar-btn--fg); 328 color: var(--color--sidebar-btn--fg);
327} 329}
328 330
329.channel-list-item, 331.channel-list-item,
@@ -346,17 +348,17 @@ body {
346#footer button:hover, 348#footer button:hover,
347.channel-list-item:hover { 349.channel-list-item:hover {
348 background-color: var(--color--sidebar-btn--bg); 350 background-color: var(--color--sidebar-btn--bg);
349 color: var(--color--sidebar-btn--active-fg); 351 color: var(--color--sidebar-btn--active-fg);
350} 352}
351 353
352.channel-list-item.active::after { 354.channel-list-item.active::after {
353 content: ""; 355 content: "";
354 display: block; 356 display: block;
355 position: absolute; 357 position: absolute;
356 top: 0; 358 top: 0;
357 bottom: 0; 359 bottom: 0;
358 left: calc(var(--dim--container--pad) * -1); 360 left: calc(var(--dim--container--pad) * -1);
359 width: 2px; 361 width: 2px;
360 background-color: #fff; 362 background-color: #fff;
361} 363}
362 364
@@ -374,11 +376,11 @@ body {
374 376
375.channel-list-item .badge { 377.channel-list-item .badge {
376 background-color: var(--color--sidebar-badge--bg); 378 background-color: var(--color--sidebar-badge--bg);
377 color: var(--color--sidebar-badge--fg); 379 color: var(--color--sidebar-badge--fg);
378} 380}
379 381
380#sidebar .network .collapse-network { 382#sidebar .network .collapse-network {
381 width: 14px; 383 width: 14px;
382 margin-right: 12px; 384 margin-right: 12px;
383 padding-left: 0; 385 padding-left: 0;
384} 386}
@@ -395,17 +397,17 @@ body {
395 397
396.input, 398.input,
397#chat .userlist .search { 399#chat .userlist .search {
398 height: var(--dim--input--height); 400 height: var(--dim--input--height);
399 padding: 0 var(--dim--input--pad-h); 401 padding: 0 var(--dim--input--pad-h);
400 transition: border-color .2s, box-shadow .2s; 402 transition: border-color 0.2s, box-shadow 0.2s;
401 border: 2px solid transparent; 403 border: 2px solid transparent;
402 border-radius: 3px; 404 border-radius: 3px;
403 color: var(--color--input--fg); 405 color: var(--color--input--fg);
404 line-height: var(--dim--input--height); 406 line-height: var(--dim--input--height);
405} 407}
406 408
407.input { 409.input {
408 margin: 0; 410 margin: 0;
409 background-color: var(--color--input--bg); 411 background-color: var(--color--input--bg);
410} 412}
411 413
@@ -417,17 +419,17 @@ body {
417 419
418.jump-to-input::before, 420.jump-to-input::before,
419#chat .count::before { 421#chat .count::before {
420 right: var(--dim--input--pad-h); 422 right: var(--dim--input--pad-h);
421 color: var(--color--sidebar-input--ph-fg); 423 color: var(--color--sidebar-input--ph-fg);
422 font-size: 14px; 424 font-size: 14px;
423 line-height: var(--dim--input--height) !important; 425 line-height: var(--dim--input--height) !important;
424} 426}
425 427
426.jump-to-input .input { 428.jump-to-input .input {
427 border: 2px solid transparent; 429 border: 2px solid transparent;
428 border-radius: 3px; 430 border-radius: 3px;
429 background-color: var(--color--sidebar-input--bg); 431 background-color: var(--color--sidebar-input--bg);
430 color: var(--color--sidebar-input--fg); 432 color: var(--color--sidebar-input--fg);
431} 433}
432 434
433.jump-to-input .input::placeholder { 435.jump-to-input .input::placeholder {
@@ -445,7 +447,7 @@ body {
445} 447}
446 448
447#chat .userlist .count { 449#chat .userlist .count {
448 height: var(--dim--input--height); 450 height: var(--dim--input--height);
449 background-color: var(--color--sidebar-input--bg); 451 background-color: var(--color--sidebar-input--bg);
450} 452}
451 453
@@ -454,7 +456,9 @@ textarea.input {
454} 456}
455 457
456.password-container input { 458.password-container input {
457 padding-right: calc(2 * var(--dim--input--pad-h) + var(--dim--input--height) - 2 * 2px); 459 padding-right: calc(
460 2 * var(--dim--input--pad-h) + var(--dim--input--height) - 2 * 2px
461 );
458} 462}
459 463
460.password-container .reveal-password { 464.password-container .reveal-password {
@@ -462,9 +466,9 @@ textarea.input {
462} 466}
463 467
464.password-container .reveal-password span { 468.password-container .reveal-password span {
465 width: calc(var(--dim--input--height) - 2 * 2px); 469 width: calc(var(--dim--input--height) - 2 * 2px);
466 height: calc(var(--dim--input--height) - 2 * 2px); 470 height: calc(var(--dim--input--height) - 2 * 2px);
467 color: var(--color--sidebar-input--fg); 471 color: var(--color--sidebar-input--fg);
468} 472}
469 473
470.password-container .reveal-password-visible span::before { 474.password-container .reveal-password-visible span::before {
@@ -474,15 +478,15 @@ textarea.input {
474/* HEADER */ 478/* HEADER */
475 479
476#chat .header { 480#chat .header {
477 position: relative; 481 position: relative;
478 z-index: 5; 482 z-index: 5;
479 border-bottom: 0; 483 border-bottom: 0;
480 background-color: var(--color--header--bg); 484 background-color: var(--color--header--bg);
481 box-shadow: 0 0 2rem rgba(0, 0, 0, .25); 485 box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25);
482} 486}
483 487
484.header .title { 488.header .title {
485 color: var(--color--header--title-fg); 489 color: var(--color--header--title-fg);
486 font-weight: bold; 490 font-weight: bold;
487} 491}
488 492
@@ -509,14 +513,15 @@ textarea.input {
509/* USERLIST */ 513/* USERLIST */
510 514
511#chat .userlist { 515#chat .userlist {
512 padding: var(--dim--container--pad); 516 padding: var(--dim--container--pad);
513 border-left: 0; 517 border-left: 0;
514 background: transparent linear-gradient(to top, transparent, var(--color--sidebar--bg) 80px); 518 background: transparent
519 linear-gradient(to top, transparent, var(--color--sidebar--bg) 80px);
515 line-height: inherit; 520 line-height: inherit;
516} 521}
517 522
518#chat .user-mode { 523#chat .user-mode {
519 margin-top: var(--dim--spacing); 524 margin-top: var(--dim--spacing);
520 margin-bottom: 0; 525 margin-bottom: 0;
521} 526}
522 527
@@ -526,7 +531,7 @@ textarea.input {
526 531
527#chat .user-mode::before, 532#chat .user-mode::before,
528#chat .names .user { 533#chat .names .user {
529 padding: calc(var(--dim--btn--pad-v) * .5) var(--dim--btn--pad-h); 534 padding: calc(var(--dim--btn--pad-v) * 0.5) var(--dim--btn--pad-h);
530} 535}
531 536
532#chat .user-mode::before { 537#chat .user-mode::before {
@@ -539,7 +544,7 @@ textarea.input {
539 544
540#chat .userlist .user.active { 545#chat .userlist .user.active {
541 background-color: var(--color--sidebar-btn--bg); 546 background-color: var(--color--sidebar-btn--bg);
542 color: var(--color--sidebar-btn--active-fg); 547 color: var(--color--sidebar-btn--active-fg);
543} 548}
544 549
545@media (max-width: 768px) { 550@media (max-width: 768px) {
@@ -570,7 +575,7 @@ textarea.input {
570 #chat .date-marker, 575 #chat .date-marker,
571 #chat .unread-marker { 576 #chat .unread-marker {
572 margin-right: var(--dim--container--pad); 577 margin-right: var(--dim--container--pad);
573 margin-left: var(--dim--container--pad); 578 margin-left: var(--dim--container--pad);
574 } 579 }
575} 580}
576 581
@@ -581,10 +586,10 @@ textarea.input {
581} 586}
582 587
583#chat .messages { 588#chat .messages {
584 display: flex; 589 display: flex;
585 flex-direction: column; 590 flex-direction: column;
586 align-items: stretch; 591 align-items: stretch;
587 padding: var(--dim--container-lg--pad) 0; 592 padding: var(--dim--container-lg--pad) 0;
588} 593}
589 594
590#chat .chat-view[data-type="special"] .messages { 595#chat .chat-view[data-type="special"] .messages {
@@ -592,13 +597,13 @@ textarea.input {
592} 597}
593 598
594#chat .msg { 599#chat .msg {
595 display: grid; 600 display: grid;
596 align-self: flex-start; 601 align-self: flex-start;
597 grid-template-columns: auto auto 1fr; 602 grid-template-columns: auto auto 1fr;
598 grid-template-rows: auto; 603 grid-template-rows: auto;
599 grid-template-areas: "time user content"; 604 grid-template-areas: "time user content";
600 margin-top: calc(var(--dim--spacing) * .5); 605 margin-top: calc(var(--dim--spacing) * 0.5);
601 padding: 0 var(--dim--container-lg--pad); 606 padding: 0 var(--dim--container-lg--pad);
602} 607}
603 608
604#chat .ban-list, 609#chat .ban-list,
@@ -612,34 +617,34 @@ textarea.input {
612#chat .from, 617#chat .from,
613#chat .time { 618#chat .time {
614 align-self: baseline; 619 align-self: baseline;
615 padding: 0; 620 padding: 0;
616 font-size: 13px; 621 font-size: 13px;
617} 622}
618 623
619#chat .from, 624#chat .from,
620#chat .time { 625#chat .time {
621 width: auto; 626 width: auto;
622 margin-right: var(--dim--spacing); 627 margin-right: var(--dim--spacing);
623 color: var(--color--msg--meta-fg); 628 color: var(--color--msg--meta-fg);
624} 629}
625 630
626#chat .content { 631#chat .content {
627 grid-area: content; 632 grid-area: content;
628 border-left: 0; 633 border-left: 0;
629 color: var(--color--msg--action-fg); 634 color: var(--color--msg--action-fg);
630} 635}
631 636
632#chat .from { 637#chat .from {
633 grid-area: user; 638 grid-area: user;
634 min-width: 1.2rem; 639 min-width: 1.2rem;
635 text-align: left; 640 text-align: left;
636 -webkit-mask-image: none; 641 -webkit-mask-image: none;
637 mask-image: none; 642 mask-image: none;
638} 643}
639 644
640#chat .time { 645#chat .time {
641 grid-area: time; 646 grid-area: time;
642 justify-self: flex-start; 647 justify-self: flex-start;
643 font-variant-numeric: tabular-nums; 648 font-variant-numeric: tabular-nums;
644} 649}
645 650
@@ -649,9 +654,9 @@ textarea.input {
649} 654}
650 655
651#chat .msg[data-type="message"] { 656#chat .msg[data-type="message"] {
652 max-width: 80%; 657 max-width: 80%;
653 grid-template-columns: auto 1fr; 658 grid-template-columns: auto 1fr;
654 grid-template-areas: "user time" "content content"; 659 grid-template-areas: "user time" "content content";
655} 660}
656 661
657#chat .msg[data-type="message"] .time { 662#chat .msg[data-type="message"] .time {
@@ -659,11 +664,11 @@ textarea.input {
659} 664}
660 665
661#chat .msg[data-type="message"] .content { 666#chat .msg[data-type="message"] .content {
662 margin-top: calc(var(--dim--spacing) * .5); 667 margin-top: calc(var(--dim--spacing) * 0.5);
663 padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h); 668 padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h);
664 background-color: var(--color--msg--bg); 669 background-color: var(--color--msg--bg);
665 color: var(--color--msg--fg); 670 color: var(--color--msg--fg);
666 font-size: 15px; 671 font-size: 15px;
667} 672}
668 673
669#chat:not(.colored-nicks) .msg[data-type="message"] .content .user { 674#chat:not(.colored-nicks) .msg[data-type="message"] .content .user {
@@ -681,7 +686,7 @@ textarea.input {
681 686
682#chat .self[data-type="message"] .content { 687#chat .self[data-type="message"] .content {
683 background-color: var(--color--msg--self-bg); 688 background-color: var(--color--msg--self-bg);
684 color: var(--color--msg--self-fg); 689 color: var(--color--msg--self-fg);
685} 690}
686 691
687#chat .msg[data-type="condensed"] { 692#chat .msg[data-type="condensed"] {
@@ -694,7 +699,7 @@ textarea.input {
694 699
695#chat .msg[data-type="monospace_block"] { 700#chat .msg[data-type="monospace_block"] {
696 grid-template-columns: auto 1fr; 701 grid-template-columns: auto 1fr;
697 grid-template-areas: "time user" "content content"; 702 grid-template-areas: "time user" "content content";
698} 703}
699 704
700#chat .msg[data-type="monospace_block"] .content { 705#chat .msg[data-type="monospace_block"] .content {
@@ -702,14 +707,14 @@ textarea.input {
702} 707}
703 708
704#chat .msg[data-type="monospace_block"] .text { 709#chat .msg[data-type="monospace_block"] .text {
705 margin-top: calc(var(--dim--spacing) * .5); 710 margin-top: calc(var(--dim--spacing) * 0.5);
706 padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h); 711 padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h);
707 border-radius: 0; 712 border-radius: 0;
708 background-color: var(--color--msg--bg); 713 background-color: var(--color--msg--bg);
709 color: var(--color--msg--fg); 714 color: var(--color--msg--fg);
710 font-family: monospace; 715 font-family: monospace;
711 font-size: 15px; 716 font-size: 15px;
712 white-space: pre; 717 white-space: pre;
713} 718}
714 719
715#chat .msg[data-type="notice"] .content, 720#chat .msg[data-type="notice"] .content,
@@ -753,7 +758,7 @@ textarea.input {
753} 758}
754 759
755#chat .msg + .previous-source[data-type="message"] { 760#chat .msg + .previous-source[data-type="message"] {
756 margin-top: calc(var(--dim--spacing) * .25); 761 margin-top: calc(var(--dim--spacing) * 0.25);
757} 762}
758 763
759#chat .msg + .previous-source[data-type="message"] .from, 764#chat .msg + .previous-source[data-type="message"] .from,
@@ -766,40 +771,41 @@ textarea.input {
766} 771}
767 772
768#chat .chat-view[data-type="channel"] .msg.highlight { 773#chat .chat-view[data-type="channel"] .msg.highlight {
769 border-left: 0; 774 border-left: 0;
770 background-color: transparent; 775 background-color: transparent;
771 box-shadow: 2px 0 var(--color--msg--self-border) inset; 776 box-shadow: 2px 0 var(--color--msg--self-border) inset;
772} 777}
773 778
774#chat .chat-view[data-type="channel"] .msg.highlight .time { 779#chat .chat-view[data-type="channel"] .msg.highlight .time {
775 padding-left: 0; 780 padding-left: 0;
776 color: var(--color--msg--meta-fg); 781 color: var(--color--msg--meta-fg);
777} 782}
778 783
779#chat .chat-view[data-type="channel"] .msg.highlight .content { 784#chat .chat-view[data-type="channel"] .msg.highlight .content {
780 background-color: var(--color--msg--self-bg); 785 background-color: var(--color--msg--self-bg);
781 color: var(--color--msg--self-fg); 786 color: var(--color--msg--self-fg);
782} 787}
783 788
784#chat .preview { 789#chat .preview {
785 margin: var(--dim--msg--pad-v) calc(var(--dim--msg--pad-h) * -1) calc(var(--dim--msg--pad-v) * -1); 790 margin: var(--dim--msg--pad-v) calc(var(--dim--msg--pad-h) * -1)
791 calc(var(--dim--msg--pad-v) * -1);
786 border-top: 1px solid var(--color--msg--border); 792 border-top: 1px solid var(--color--msg--border);
787} 793}
788 794
789#chat .preview::after { 795#chat .preview::after {
790 content: ""; 796 content: "";
791 display: block; 797 display: block;
792 width: 1px; 798 width: 1px;
793 min-width: 0; 799 min-width: 0;
794} 800}
795 801
796#chat .toggle-content { 802#chat .toggle-content {
797 flex: 0 0 auto; 803 flex: 0 0 auto;
798 margin: 0; 804 margin: 0;
799 padding: var(--dim--msg--pad-h); 805 padding: var(--dim--msg--pad-h);
800 border-radius: 0; 806 border-radius: 0;
801 background-color: transparent; 807 background-color: transparent;
802 box-shadow: none; 808 box-shadow: none;
803} 809}
804 810
805#chat .toggle-content .toggle-text, 811#chat .toggle-content .toggle-text,
@@ -838,9 +844,9 @@ textarea.input {
838#chat table.channel-list, 844#chat table.channel-list,
839#chat table.ignore-list, 845#chat table.ignore-list,
840#chat table.invite-list { 846#chat table.invite-list {
841 width: 100%; 847 width: 100%;
842 margin: 0; 848 margin: 0;
843 table-layout: fixed; 849 table-layout: fixed;
844 border-spacing: 0; 850 border-spacing: 0;
845} 851}
846 852
@@ -851,7 +857,7 @@ textarea.input {
851#chat table.ignore-list th, 857#chat table.ignore-list th,
852#chat table.invite-list td, 858#chat table.invite-list td,
853#chat table.invite-list th { 859#chat table.invite-list th {
854 padding: var(--dim--container--pad); 860 padding: var(--dim--container--pad);
855 border-color: var(--color--channels--border); 861 border-color: var(--color--channels--border);
856} 862}
857 863
@@ -859,19 +865,23 @@ textarea.input {
859 color: var(--color--channels--title); 865 color: var(--color--channels--title);
860} 866}
861 867
868#chat table.channel-list .topic {
869 white-space: normal;
870}
871
862#chat table.channel-list .channel { 872#chat table.channel-list .channel {
863 width: 20%; 873 width: 20%;
864} 874}
865 875
866#chat table.channel-list .users { 876#chat table.channel-list .users {
867 width: 5em; 877 width: 5em;
868 text-align: right; 878 text-align: right;
869} 879}
870 880
871/* SCROLL DOWN BUTTON */ 881/* SCROLL DOWN BUTTON */
872 882
873.scroll-down { 883.scroll-down {
874 right: var(--dim--container-lg--pad); 884 right: var(--dim--container-lg--pad);
875 bottom: 0; 885 bottom: 0;
876} 886}
877 887
@@ -884,16 +894,16 @@ textarea.input {
884/* CHAT INPUT */ 894/* CHAT INPUT */
885 895
886#form { 896#form {
887 margin: var(--dim--container-lg--pad); 897 margin: var(--dim--container-lg--pad);
888 border-top: 0; 898 border-top: 0;
889 background-color: var(--color--cform--bg); 899 background-color: var(--color--cform--bg);
890 box-shadow: 0 .5rem 2rem rgba(0, 0, 0, .25); 900 box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.25);
891 color: var(--color--cform--ph-fg); 901 color: var(--color--cform--ph-fg);
892} 902}
893 903
894#form #nick { 904#form #nick {
895 background-color: var(--color--cform--nick-bg); 905 background-color: var(--color--cform--nick-bg);
896 color: var(--color--cform--nick-fg); 906 color: var(--color--cform--nick-fg);
897} 907}
898 908
899#form #input { 909#form #input {
@@ -926,22 +936,22 @@ textarea.input {
926#context-menu, 936#context-menu,
927.mentions-popup, 937.mentions-popup,
928.textcomplete-menu { 938.textcomplete-menu {
929 z-index: 2000; 939 z-index: 2000;
930 padding: var(--dim--popup--pad); 940 padding: var(--dim--popup--pad);
931 border: 0; 941 border: 0;
932 border-radius: 0; 942 border-radius: 0;
933 background-color: var(--color--popup--bg); 943 background-color: var(--color--popup--bg);
934 box-shadow: 0 .3rem 1.5rem rgba(0, 0, 0, .4); 944 box-shadow: 0 0.3rem 1.5rem rgba(0, 0, 0, 0.4);
935 color: var(--color--popup--fg); 945 color: var(--color--popup--fg);
936} 946}
937 947
938.context-menu-item, 948.context-menu-item,
939.textcomplete-item { 949.textcomplete-item {
940 margin-top: 0; 950 margin-top: 0;
941 margin-bottom: 0; 951 margin-bottom: 0;
942 padding: var(--dim--popup--item-pad-v) var(--dim--popup--item-pad-h); 952 padding: var(--dim--popup--item-pad-v) var(--dim--popup--item-pad-h);
943 border-radius: 0; 953 border-radius: 0;
944 color: var(--color--popup--fg); 954 color: var(--color--popup--fg);
945} 955}
946 956
947.textcomplete-item a { 957.textcomplete-item a {
@@ -953,7 +963,7 @@ textarea.input {
953.textcomplete-item:hover, 963.textcomplete-item:hover,
954.textcomplete-menu .active { 964.textcomplete-menu .active {
955 background-color: var(--color--popup--item-hover-bg); 965 background-color: var(--color--popup--item-hover-bg);
956 color: var(--color--popup--item-hover-fg); 966 color: var(--color--popup--item-hover-fg);
957} 967}
958 968
959.textcomplete-item.active a { 969.textcomplete-item.active a {
@@ -971,17 +981,17 @@ textarea.input {
971} 981}
972 982
973.mentions-popup > .mentions-popup-title { 983.mentions-popup > .mentions-popup-title {
974 align-items: center; 984 align-items: center;
975 margin-bottom: 0; 985 margin-bottom: 0;
976 padding: var(--dim--container--pad); 986 padding: var(--dim--container--pad);
977 color: var(--color--popup--title-fg); 987 color: var(--color--popup--title-fg);
978 font-size: 1em; 988 font-size: 1em;
979 font-weight: bold; 989 font-weight: bold;
980} 990}
981 991
982.mentions-popup > .mentions-popup-title + p { 992.mentions-popup > .mentions-popup-title + p {
983 margin: 0; 993 margin: 0;
984 padding: var(--dim--container--pad); 994 padding: var(--dim--container--pad);
985 border-top: 1px solid var(--color--popup--border); 995 border-top: 1px solid var(--color--popup--border);
986} 996}
987 997
@@ -990,27 +1000,27 @@ textarea.input {
990} 1000}
991 1001
992.mentions-popup .from { 1002.mentions-popup .from {
993 color: var(--color--popup--title-fg); 1003 color: var(--color--popup--title-fg);
994 font-size: 13px; 1004 font-size: 13px;
995} 1005}
996 1006
997.mentions-popup .time { 1007.mentions-popup .time {
998 color: var(--color--popup--meta-fg); 1008 color: var(--color--popup--meta-fg);
999 font-size: 13px; 1009 font-size: 13px;
1000} 1010}
1001 1011
1002.mentions-popup .msg { 1012.mentions-popup .msg {
1003 margin-bottom: 0; 1013 margin-bottom: 0;
1004 padding: var(--dim--container--pad); 1014 padding: var(--dim--container--pad);
1005 border-top: 1px solid var(--color--popup--border); 1015 border-top: 1px solid var(--color--popup--border);
1006} 1016}
1007 1017
1008.mentions-popup .msg .content { 1018.mentions-popup .msg .content {
1009 margin-top: calc(var(--dim--spacing) * .5); 1019 margin-top: calc(var(--dim--spacing) * 0.5);
1010 padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h); 1020 padding: var(--dim--msg--pad-v) var(--dim--msg--pad-h);
1011 border-radius: 0; 1021 border-radius: 0;
1012 background-color: var(--color--popup--msg-bg); 1022 background-color: var(--color--popup--msg-bg);
1013 color: var(--color--popup--msg-fg); 1023 color: var(--color--popup--msg-fg);
1014} 1024}
1015 1025
1016@media (max-width: 768px) { 1026@media (max-width: 768px) {
@@ -1022,9 +1032,9 @@ textarea.input {
1022/* TOOLTIP */ 1032/* TOOLTIP */
1023 1033
1024.tooltipped::after { 1034.tooltipped::after {
1025 border-radius: 0; 1035 border-radius: 0;
1026 background-color: var(--color--tooltip--bg); 1036 background-color: var(--color--tooltip--bg);
1027 color: var(--color--tooltip--fg); 1037 color: var(--color--tooltip--fg);
1028} 1038}
1029 1039
1030.tooltipped-s::before, 1040.tooltipped-s::before,