cmc/thelounge-theme-crypto
🎨 Retro & high-contrast theme
clone: git clone https://gitbay.org/cmc/thelounge-theme-crypto.git
master: crypto.css · raw
1/*
2Crypto theme for The Lounge.
3
4Installation instructions can be found here
5https://thelounge.chat/docs/server/configuration.html#theme
6
7Author: Aynik
8GitHub: https://github.com/aynik
9*/
10
11:root {
12 --crypto-black: #000;
13 --crypto-panel: #050805;
14 --crypto-panel-soft: #0a0f0a;
15 --crypto-border: #263426;
16 --crypto-text: #d7d7d7;
17 --crypto-muted: #777;
18 --crypto-dim: #6f7d6f;
19 --crypto-nick: #9fd6a9;
20 --crypto-accent: #00ff41;
21 --crypto-danger: #ff3b30;
22 --crypto-highlight: rgba(0, 255, 65, 0.1);
23 --crypto-highlight-border: rgba(0, 255, 65, 0.8);
24 --crypto-self-bg: rgba(215, 215, 215, 0.15);
25 --crypto-self-border: rgba(215, 215, 215, 0.35);
26 --crypto-quote-bg: rgba(159, 214, 169, 0.06);
27 --body-color: var(--crypto-text);
28 --body-color-muted: var(--crypto-muted);
29 --body-bg-color: var(--crypto-black);
30 --button-color: var(--crypto-accent);
31 --button-text-color-hover: var(--crypto-black);
32 --link-color: var(--crypto-accent);
33 --window-bg-color: var(--crypto-black);
34 --window-heading-color: var(--crypto-muted);
35 --date-marker-color: rgba(0, 255, 65, 0.35);
36 --unread-marker-color: rgba(255, 59, 48, 0.6);
37 --highlight-bg-color: var(--crypto-highlight);
38 --highlight-border-color: var(--crypto-highlight-border);
39 --upload-progressbar-color: var(--crypto-accent);
40}
41
42::placeholder {
43 color: var(--crypto-dim);
44}
45
46body {
47 background: var(--crypto-black);
48 color: var(--crypto-text);
49 font: 15px Menlo, Consolas, Monaco, "Adwaita Mono", "Liberation Mono", "Lucida Console", monospace;
50}
51
52a,
53.link,
54button.link {
55 color: var(--crypto-accent);
56}
57
58a:hover,
59.link:hover,
60button.link:hover {
61 color: #8cff9f;
62}
63
64.irc-fg2 {
65 color: #7ab7ff;
66}
67
68.window,
69#chat .chat,
70#chat .chat-content,
71#chat .messages,
72#chat .userlist,
73.header,
74#form,
75#sidebar,
76#footer,
77#context-menu,
78.context-menu,
79.textcomplete-menu {
80 background: var(--crypto-black);
81 color: var(--crypto-text);
82}
83
84#windows .window h1,
85#windows .window h2,
86#windows .window h3 {
87 color: var(--crypto-muted);
88 letter-spacing: 0;
89}
90
91#windows .window h2 {
92 border-bottom: 1px solid var(--crypto-border);
93}
94
95.container {
96 margin: 40px auto;
97}
98
99.header,
100#chat .header,
101#form,
102#chat .userlist,
103#chat .content,
104.userlist-open .chat-view[data-type="channel"] .scroll-down {
105 border-color: var(--crypto-border);
106}
107
108.header .title {
109 color: var(--crypto-text);
110}
111
112.header .topic,
113#windows .header .topic {
114 color: var(--crypto-muted);
115 line-height: 1.5;
116}
117
118.header button:focus-visible {
119 box-shadow: inset 0 0 0 1px var(--crypto-accent);
120 outline: 1px solid var(--crypto-accent);
121 outline-offset: -1px;
122}
123
124#chat button.close,
125#chat button.mentions,
126#chat button.menu,
127#chat button.search,
128#viewport .lt,
129#viewport .rt {
130 color: var(--crypto-muted);
131}
132
133#chat button.close:hover,
134#chat button.mentions:hover,
135#chat button.menu:hover,
136#chat button.search:hover,
137#viewport .lt:hover,
138#viewport .rt:hover {
139 color: var(--crypto-accent);
140}
141
142#context-menu {
143 border: 1px solid var(--crypto-border);
144 box-shadow: none;
145}
146
147#context-menu .context-menu-item {
148 color: var(--crypto-text);
149}
150
151#context-menu .context-menu-item:hover,
152#context-menu .context-menu-item:focus {
153 background: var(--crypto-panel-soft);
154 color: var(--crypto-accent);
155}
156
157#context-menu .context-menu-divider {
158 background: var(--crypto-border);
159}
160
161#sidebar .logo-inverted {
162 display: none;
163}
164
165#sidebar .logo {
166 display: inline;
167}
168
169#sidebar button,
170#sidebar .chan,
171#sidebar .empty,
172.channel-list-item,
173#footer button {
174 color: var(--crypto-muted);
175}
176
177#sidebar .chan.lobby,
178.channel-list-item[data-type="lobby"] {
179 color: var(--crypto-accent);
180}
181
182#sidebar .active,
183#sidebar button:hover,
184#sidebar .chan:hover,
185.channel-list-item:hover,
186.channel-list-item.active,
187#footer button:hover,
188#footer button.active {
189 background: var(--crypto-panel-soft);
190 color: var(--crypto-text);
191}
192
193.channel-list-item .badge,
194#chat .count::before {
195 background: var(--crypto-panel-soft);
196 color: var(--crypto-muted);
197}
198
199#chat .userlist .count {
200 background: var(--crypto-panel-soft);
201}
202
203.channel-list-item .badge.highlight {
204 background: var(--crypto-accent);
205 color: var(--crypto-black);
206}
207
208.channel-list-item:focus-visible,
209#sidebar button:focus-visible,
210#footer button:focus-visible {
211 box-shadow: inset 0 0 0 1px var(--crypto-accent);
212 outline: 1px solid var(--crypto-accent);
213 outline-offset: -1px;
214}
215
216#chat .time {
217 color: var(--crypto-dim);
218}
219
220#chat .from {
221 color: var(--crypto-text);
222}
223
224#chat .content {
225 border-left: 1px solid var(--crypto-border);
226}
227
228#chat .unhandled .from,
229#chat .msg[data-type="unhandled"] .from,
230#chat .msg[data-type="condensed"] .content,
231#chat .msg[data-type="away"] .content,
232#chat .msg[data-type="back"] .content,
233#chat .msg[data-type="join"] .content,
234#chat .msg[data-type="kick"] .content,
235#chat .msg[data-type="mode"] .content,
236#chat .msg[data-type="nick"] .content,
237#chat .msg[data-type="chghost"] .content,
238#chat .msg[data-type="part"] .content,
239#chat .msg[data-type="quit"] .content,
240#chat .msg[data-type="topic"] .content,
241#chat .msg[data-type="topic_set_by"] .content {
242 color: var(--crypto-muted);
243}
244
245#chat .msg.self {
246 background-color: var(--crypto-self-bg);
247 border-left: 5px solid var(--crypto-self-border);
248}
249
250#chat .msg.self .time {
251 color: var(--crypto-muted);
252 padding-left: 5px;
253}
254
255#chat .msg.self .content {
256 border-left-color: transparent;
257 color: var(--crypto-text);
258}
259
260.user,
261#chat .user,
262.inline-channel {
263 color: var(--crypto-nick);
264 font-weight: 700;
265}
266
267a:focus-visible,
268button.link:focus-visible {
269 box-shadow: inset 0 0 0 1px var(--crypto-accent);
270 outline: 1px solid var(--crypto-accent);
271 outline-offset: -1px;
272}
273
274.header .topic a,
275.header .topic .link,
276#chat .content a,
277#chat .content .link {
278 color: var(--crypto-accent);
279 font-weight: 700;
280}
281
282#chat .userlist .user {
283 color: var(--crypto-muted);
284 font-weight: 600;
285}
286
287#chat .userlist .user:hover,
288#chat .userlist .user.active {
289 color: var(--crypto-accent);
290}
291
292#chat .msg[data-type="action"] .from,
293#chat .msg[data-type="action"] .content,
294#chat .msg[data-type="action"] .user,
295#chat .msg[data-type="notice"] .time,
296#chat .msg[data-type="wallops"] .time,
297#chat .msg[data-type="notice"] .content,
298#chat .msg[data-type="wallops"] .content,
299#chat .msg[data-type="notice"] .user,
300#chat .msg[data-type="wallops"] .user {
301 color: #8cff9f;
302}
303
304#chat .msg[data-type="error"],
305#chat .msg[data-type="error"] .from,
306#connection-error,
307#user-visible-error,
308#settings .error {
309 color: var(--crypto-danger);
310}
311
312#connection-error,
313#user-visible-error {
314 background: var(--crypto-black);
315 border-top: 1px solid var(--crypto-danger);
316 border-bottom: 1px solid var(--crypto-danger);
317}
318
319#chat .chat-view[data-type="channel"] .msg.highlight {
320 background-color: var(--crypto-highlight);
321 border-left: 5px solid var(--crypto-highlight-border);
322}
323
324#chat .chat-view[data-type="channel"] .msg.highlight .time {
325 color: #8cff9f;
326 padding-left: 5px;
327}
328
329#chat .chat-view[data-type="channel"] .msg.highlight .content {
330 border-left-color: transparent;
331}
332
333#chat .date-marker-text::before,
334#chat .unread-marker-text::before {
335 background: var(--crypto-black);
336}
337
338#chat .scroll-down-arrow {
339 background: var(--crypto-black);
340 border-color: var(--crypto-accent);
341 box-shadow: none;
342 color: var(--crypto-accent);
343}
344
345#chat .scroll-down:hover .scroll-down-arrow {
346 background: var(--crypto-accent);
347 color: var(--crypto-black);
348}
349
350code,
351.irc-monospace {
352 background: var(--crypto-panel);
353 border: 1px solid var(--crypto-border);
354 border-radius: 2px;
355 color: var(--crypto-text);
356 padding: 2px 4px;
357}
358
359#chat .msg[data-type="monospace_block"] .text,
360#chat pre,
361#chat code {
362 background: var(--crypto-panel);
363 border: 1px solid var(--crypto-border);
364 color: var(--crypto-text);
365}
366
367#chat pre code {
368 background: transparent;
369 border: 0;
370 padding: 0;
371}
372
373#chat blockquote,
374#chat .content blockquote {
375 background: var(--crypto-quote-bg);
376 border-left: 3px solid var(--crypto-border);
377 color: var(--crypto-muted);
378 margin: 4px 0;
379 padding: 4px 10px;
380}
381
382#chat blockquote p:last-child,
383#chat .content blockquote p:last-child {
384 margin-bottom: 0;
385}
386
387.input {
388 background: var(--crypto-black);
389 border-color: var(--crypto-border);
390 color: var(--crypto-text);
391 font-family: inherit;
392 font-size: 14px;
393}
394
395.input:disabled {
396 background: var(--crypto-panel);
397 color: var(--crypto-dim);
398}
399
400.input:not(:disabled):hover,
401.input:not(:disabled):focus {
402 border-color: var(--crypto-accent);
403 box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.35);
404 outline: none;
405}
406
407.header .topic-input,
408#form #nick,
409#form #input,
410#windows #form .input,
411#windows select.input {
412 background: var(--crypto-black);
413 border-color: var(--crypto-border);
414 color: var(--crypto-text);
415 font-family: inherit;
416}
417
418#windows select.input {
419 height: 38px;
420}
421
422.btn {
423 background: var(--crypto-black);
424 border-color: var(--crypto-accent);
425 color: var(--crypto-accent);
426}
427
428.btn:focus-visible {
429 box-shadow: inset 0 0 0 1px var(--crypto-accent);
430 outline: 1px solid var(--crypto-accent);
431 outline-offset: -1px;
432}
433
434.btn:disabled {
435 background: var(--crypto-black);
436 color: var(--crypto-dim);
437}
438
439.btn:not(:disabled):hover,
440.btn:not(:disabled):focus {
441 background: var(--crypto-accent);
442 color: var(--crypto-black);
443}
444
445#form button:focus-visible {
446 box-shadow: inset 0 0 0 1px var(--crypto-accent);
447 outline: 1px solid var(--crypto-accent);
448 outline-offset: -1px;
449}
450
451#chat .show-more .btn {
452 background: var(--crypto-black);
453}
454
455#form {
456 border-top: 1px solid var(--crypto-border);
457}
458
459#form:focus-within {
460 background: var(--crypto-panel);
461}
462
463#form #input {
464 font-size: 14px;
465}
466
467.header .topic-input:focus {
468 border-color: var(--crypto-accent);
469 box-shadow: 0 0 0 1px rgba(0, 255, 65, 0.35);
470 outline: none;
471}
472
473#form #nick {
474 background: var(--crypto-panel);
475 color: var(--crypto-muted);
476}
477
478#form #upload,
479#form #submit,
480#footer .icon {
481 color: var(--crypto-muted);
482}
483
484#form #upload:hover,
485#form #submit:hover,
486#footer button:hover .icon,
487#footer button.active .icon {
488 color: var(--crypto-accent);
489}
490
491#sign-in label,
492#settings .settings-menu,
493#settings label,
494#settings .opt {
495 color: var(--crypto-muted);
496}
497
498#sign-in label input {
499 margin-top: 10px !important;
500 font-size: 14px;
501}
502
503#settings .opt {
504 display: block;
505 font-size: 14px;
506 line-height: 1.45;
507 padding: 6px 0;
508}
509
510#settings .settings-menu .active,
511#settings .settings-menu .active .icon,
512#settings label:hover,
513#settings .opt:hover {
514 color: var(--crypto-text);
515}
516
517#settings .opt input {
518 margin-right: 8px;
519}
520
521#settings .settings-sync-panel {
522 background: var(--crypto-panel);
523 border: 1px solid var(--crypto-border);
524 color: var(--crypto-muted);
525}
526
527#settings .settings-sync-panel .btn {
528 border-color: var(--crypto-accent);
529 color: var(--crypto-accent);
530}
531
532#settings #play,
533#settings .extra-help,
534#settings h2 .extra-help {
535 color: var(--crypto-muted);
536}
537
538#settings #play:hover,
539#settings .extra-help:hover {
540 color: var(--crypto-accent);
541}
542
543#chat table.channel-list th,
544#chat table.ban-list th,
545#chat table.invite-list th,
546#chat table.ignore-list th,
547#chat table.channel-list td,
548#chat table.ban-list td,
549#chat table.invite-list td {
550 border-bottom-color: var(--crypto-border);
551}
552
553#chat .toggle-text {
554 line-height: 1.4;
555}