summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-03-10 10:13:37 +0100
committerVolpeon <git@volpeon.ink>2021-03-10 10:13:37 +0100
commit4b122cac999b896bb13bd90c1e67e90be63ab8a5 (patch)
treebc07e5772b819517665c3c5690013cbc52fa7cef
parentNo shadow for mentions popup in fullscreen mode (diff)
downloadthelounge-theme-vulpes-4b122cac999b896bb13bd90c1e67e90be63ab8a5.tar.gz
thelounge-theme-vulpes-4b122cac999b896bb13bd90c1e67e90be63ab8a5.tar.bz2
thelounge-theme-vulpes-4b122cac999b896bb13bd90c1e67e90be63ab8a5.zip
Improved sidebar and message appearance when highlighted
-rw-r--r--theme.css74
1 files changed, 47 insertions, 27 deletions
diff --git a/theme.css b/theme.css
index ea8de23..e6e8f13 100644
--- a/theme.css
+++ b/theme.css
@@ -72,14 +72,15 @@
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--action-fg: var(--fg-hi); 82 --color--msg--self-border: var(--fg-lo);
83 --color--msg--action-fg: var(--fg-hi);
83 84
84 --color--channels--title: var(--fg-lo); 85 --color--channels--title: var(--fg-lo);
85 --color--channels--border: var(--obj); 86 --color--channels--border: var(--obj);
@@ -308,12 +309,16 @@ body {
308/* SIDEBAR */ 309/* SIDEBAR */
309 310
310#sidebar { 311#sidebar {
311 padding: var(--dim--container--pad) 0 0; 312 color: var(--color--sidebar--fg);
312 color: var(--color--sidebar--fg);
313} 313}
314 314
315.jump-to-input { 315#sidebar .logo-container {
316 margin: var(--dim--container--pad); 316 margin-top: var(--dim--spacing);
317}
318
319.jump-to-input,
320#sidebar .network {
321 margin: var(--dim--spacing) var(--dim--container--pad) 0;
317} 322}
318 323
319#footer button { 324#footer button {
@@ -324,7 +329,16 @@ body {
324.channel-list-item, 329.channel-list-item,
325.channel-list-item[data-type="lobby"], 330.channel-list-item[data-type="lobby"],
326.jump-to-results .channel-list-item[data-type="lobby"] { 331.jump-to-results .channel-list-item[data-type="lobby"] {
327 padding: var(--dim--btn--pad-v) calc(var(--dim--container--pad) + var(--dim--btn--pad-v)); 332 padding: var(--dim--btn--pad-v) var(--dim--container--pad);
333}
334
335#footer button.active,
336.channel-list-item.active {
337 position: relative;
338}
339
340#footer button.active {
341 box-shadow: 0 -2px #fff inset;
328} 342}
329 343
330#footer button.active, 344#footer button.active,
@@ -335,12 +349,15 @@ body {
335 color: var(--color--sidebar-btn--active-fg); 349 color: var(--color--sidebar-btn--active-fg);
336} 350}
337 351
338#footer button.active { 352.channel-list-item.active::after {
339 box-shadow: 0 -2px #fff inset; 353 content: "";
340} 354 display: block;
341 355 position: absolute;
342.channel-list-item.active { 356 top: 0;
343 box-shadow: -2px 0 #fff inset; 357 bottom: 0;
358 left: calc(var(--dim--container--pad) * -1);
359 width: 2px;
360 background-color: #fff;
344} 361}
345 362
346.channel-list-item.not-connected, 363.channel-list-item.not-connected,
@@ -557,7 +574,7 @@ textarea.input {
557 display: flex; 574 display: flex;
558 flex-direction: column; 575 flex-direction: column;
559 align-items: stretch; 576 align-items: stretch;
560 padding: var(--dim--container-lg--pad); 577 padding: var(--dim--container-lg--pad) 0;
561} 578}
562 579
563#chat .chat-view[data-type="special"] .messages { 580#chat .chat-view[data-type="special"] .messages {
@@ -571,6 +588,7 @@ textarea.input {
571 grid-template-rows: auto; 588 grid-template-rows: auto;
572 grid-template-areas: "time user content"; 589 grid-template-areas: "time user content";
573 margin-top: calc(var(--dim--spacing) * .5); 590 margin-top: calc(var(--dim--spacing) * .5);
591 padding: 0 var(--dim--container-lg--pad);
574} 592}
575 593
576#chat .ban-list, 594#chat .ban-list,
@@ -732,11 +750,16 @@ textarea.input {
732#chat .chat-view[data-type="channel"] .msg.highlight { 750#chat .chat-view[data-type="channel"] .msg.highlight {
733 border-left: 0; 751 border-left: 0;
734 background-color: transparent; 752 background-color: transparent;
753 box-shadow: 2px 0 var(--color--msg--self-border) inset;
754}
755
756#chat .chat-view[data-type="channel"] .msg.highlight .time {
757 padding-left: 0;
758 color: var(--color--msg--meta-fg);
735} 759}
736 760
737#chat .chat-view[data-type="channel"] .msg.highlight .content { 761#chat .chat-view[data-type="channel"] .msg.highlight .content {
738 background-color: var(--color--msg--self-bg); 762 background-color: var(--color--msg--self-bg);
739 box-shadow: -2px 0 var(--highlight-border-color);
740 color: var(--color--msg--self-fg); 763 color: var(--color--msg--self-fg);
741} 764}
742 765
@@ -785,12 +808,9 @@ textarea.input {
785} 808}
786 809
787@media (max-width: 479px) { 810@media (max-width: 479px) {
788 #chat .messages { 811 #chat .msg,
789 padding: var(--dim--container--pad); 812 #chat .chat-view[data-type="channel"] .msg.highlight {
790 } 813 padding: 0 var(--dim--container--pad);
791
792 #chat .msg {
793 padding: 0;
794 } 814 }
795} 815}
796 816