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-master.tar.gz
thelounge-theme-vulpes-master.tar.bz2
thelounge-theme-vulpes-master.zip
UpdateHEADmaster
Diffstat
-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;