summaryrefslogtreecommitdiffstats
path: root/theme.css
diff options
context:
space:
mode:
Diffstat (limited to 'theme.css')
-rw-r--r--theme.css105
1 files changed, 102 insertions, 3 deletions
diff --git a/theme.css b/theme.css
index 1265c9d..1eeef98 100644
--- a/theme.css
+++ b/theme.css
@@ -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,