purpleish.css (9125B)
1 :root
2 {
3 --bg1: #f8f8f2;
4 --bg2: #e3e3d9;
5 --fg1: #1d1e26;
6 --hl1: #7277cf;
7 --hl2: #3f426c;
8 --invalid: #848484;
9 --danger: #ff0000;
10 --iconfilter: invert(0%) sepia(100%) saturate(20%) hue-rotate(39deg) brightness(101%) contrast(107%);
11 }
12
13
14 @media (prefers-color-scheme: dark) {
15 :root
16 {
17 --bg1: #212121;
18 --bg2: #2b2b2b;
19 --fg1: #dcdcdc;
20 --iconfilter: invert(98%) sepia(98%) saturate(0%) hue-rotate(294deg) brightness(102%) contrast(102%);
21 }
22 }
23
24 /* Whole Content */
25 body,
26 table,
27 tbody,
28 tr,
29 td
30 {
31 background-color: var(--bg1) !important;
32 color: var(--fg1) !important;
33 }
34
35 /* Text */
36 p,
37 label,
38 h1,
39 h2,
40 h3,
41 h4,
42 h5,
43 h6
44 {
45 color: var(--fg1) !important;
46 }
47
48 /* Links */
49 a:not(.item)
50 {
51 color: var(--hl1) !important;
52 }
53 a:not(.item):hover
54 {
55 color: var(--hl1) !important;
56 text-decoration: underline;
57 }
58
59 /* Navigation Bar */
60 nav,
61 nav > .item,
62 nav .menu,
63 nav .container .item .menu,
64 nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item,
65 nav.ui.top.fixed.inverted.navigation.menu .ui.text.container .item
66 {
67 background: var(--bg2) !important;
68 color: var(--fg1) !important;
69 }
70 nav .item:hover,
71 nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:hover,
72 nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:active,
73 nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:hover > p > a,
74 nav.ui.inverted.navigation.menu div.ui.text.container div.compact.menu div.ui.simple.dropdown.item div.menu .item:active > p > a
75 {
76 background: var(--hl1) !important;
77 color: var(--fg1) !!important;
78 }
79
80 /* Notification Counter */
81 .ui.text.container .ui.stackable.secondary.menu > .item.notifications > .label,
82 .red
83 {
84 background-color: var(--hl2) !important;
85 }
86
87 /* Navigation Mobile bar in bright mode (if used) */
88 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > a.item::after,
89 nav.ui.top.fixed.inverted.navigation.menu > div.ui.text.container > div.compact.menu div.ui.simple.dropdown.item::after
90 {
91 filter: var(--iconfilter) !important;
92 }
93
94 /* Secondary Mobile bar colours (if used) */
95 .ui.text.container .ui.stackable.secondary.menu:before
96 {
97 background-color: var(--hl1) !important;
98 color: var(--fg1) !important;
99 }
100
101 /* Footer */
102 nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item:hover p a,
103 nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item p:hover a,
104 nav.ui.bottom.forced.inverted.menu div.ui.text.container span.link.item p a:hover
105 {
106 color: var(--fg1) !important;
107 }
108
109 /* Menu Entries */
110 .ui.stackable.secondary.menu .item,
111 .ui.stackable.secondary.menu .item a
112 {
113 color: var(--fg1) !important;
114 text-decoration: none !important;
115 }
116 .ui.stackable.secondary.menu .item:hover,
117 .ui.stackable.secondary.menu .item a:hover
118 {
119 color: var(--hl1) !important;
120 text-decoration: none !important;
121 }
122
123 /* Menu Controllers */
124 .ui.text.container .ui.stackable.secondary.menu .ui.right.dropdown.item form.menu,
125 .ui.text.container .ui.stackable.secondary.menu .ui.right.dropdown.item form.menu .item .ui.slider.checkbox label
126 {
127 color: var(--fg1) !important;
128 background-color: var(--bg2) !important;
129 }
130 .ui.text.container .ui.stackable.secondary.menu .ui.right.dropdown.item form.menu
131 {
132 box-shadow: 3px 3px 3px var(--bg1); /* Increases visibility */
133 }
134
135 /* Editor Form */
136 trix-editor,
137 textarea,
138 .trix-dialog,
139 input,
140 table,
141 .ui.selection.dropdown
142 {
143 background-color: var(--bg2) !important;
144 color: var(--fg1) !important;
145 box-shadow: 0 0 0.1em var(--hl1) !important;
146 }
147
148 /* Editor Buttons */
149 .ui.compact.mini.icon.menu,
150 .ui.compact.mini.icon.menu .item,
151 .ui.buttons .ui.button
152 {
153 color: var(--fg1) !important;
154 background-color: var(--hl1) !important;
155 }
156 .ui.compact.mini.icon.menu .trix-active,
157 .ui.buttons .ui.button:active,
158 .buttons .ui.button:hover
159 {
160 background-color: var(--hl2) !important;
161 }
162
163 /* Refresh Banner */
164 .ui.text.container .ui.feed #refresh-posts-message
165 {
166 background-color: var(--bg2) !important;
167 color: var(--fg1) !important;
168 box-shadow: 0 0 2px var(--fg1) !important;
169 }
170 .ui.text.container .ui.feed #refresh-posts-message .icon,
171 .ui.text.container .ui.feed #refresh-posts-message .content,
172 .ui.text.container .ui.feed #refresh-posts-message .content .header
173 {
174 color: var(--fg1) !important;
175 }
176
177 /* Posts */
178 section.ui.feed,
179 section.ui.feed .content,
180 section.ui.feed .content .label,
181 section.ui.feed .content .summary,
182 section.ui.feed .content .extra.text,
183 section.ui.feed .content .meta
184 {
185 color: var(--fg1) !important;
186 }
187
188 /* Post Labels */
189 .ui.text.container .ui.feed .detailed.event .content .extra.detail .ui.labels .ui.small.label,
190 .ui.text.container .ui.feed .detailed.event .content .extra.detail .ui.labels .ui.small.label a
191 {
192 background-color: var(--bg2) !important;
193 color: var(--fg1) !important;
194 }
195
196 /* Posts Contributors and Tags */
197 .ui.text.container #thread_page_thread_controls .ui.thread.segments .ui.segment,
198 .ui.text.container #tag_page_tag_controls .ui.thread.segments .ui.segment
199 {
200 background-color: var(--bg2) !important;
201 color: var(--fg1) !important;
202 }
203
204 /* Post Actions */
205 .ui.button,
206 section.ui.feed .content .meta .ui.inline.form,
207 section.ui.feed .content .meta a,
208 .ui.mini.iconic,
209 .ui.mini.iconic.button .icon,
210 .ui.mini.iconic.button.iconic.dangerous,
211 .ui.text.container .ui.feed .event.activity-announce .content .meta .ui.inline.form .ui.button.mini.dangerous.iconic,
212 .ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox,
213 .ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox label,
214 .ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox input
215 {
216 color: var(--fg1) !important;
217 background-color: var(--bg1) !important;
218 }
219 section.ui.feed .content .meta a.blue,
220 .ui.mini.iconic.blue,
221 .ui.mini.iconic.button.blue,
222 .ui.mini.iconic.button.blue .icon,
223 .ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox.checked,
224 .ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox.checked label,
225 .ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox.checked input
226 {
227 color: var(--hl1) !important
228 }
229 .ui.button:hover,
230 section.ui.feed .content .meta .ui.inline.form:hover,
231 section.ui.feed .content .meta a:hover,
232 .ui.mini.iconic:hover,
233 .ui.mini.iconic.button .icon:hover
234 .ui.feed > .event > .content .meta a:hover,
235 .ui.feed > .event > .content .meta a:hover > button > .icon,
236 .ui.feed > .event > .content .meta .ui.inline.form:hover > button,
237 .ui.feed > .event > .content .meta .ui.inline.form:hover > button > .icon,
238 .ui.button:active,
239 section.ui.feed .content .meta .ui.inline.form:active,
240 section.ui.feed .content .meta a:active,
241 .ui.mini.iconic:active,
242 .ui.mini.iconic.button .icon:active,
243 .ui.feed > .event > .content .meta a:active,
244 .ui.feed > .event > .content .meta a:active > button > .icon,
245 .ui.feed > .event > .content .meta .ui.inline.form:active > button,
246 .ui.feed > .event > .content .meta .ui.inline.form:active > button > .icon
247 {
248 color: var(--hl1) !important;
249 }
250 .ui.feed > .event > .content .meta .ui.inline.form:hover > button.dangerous,
251 .ui.feed > .event > .content .meta .ui.inline.form:hover > button.dangerous > .icon
252 {
253 color: var(--danger) !important;
254 }
255
256 /* Profile Button */
257 .ui.button
258 {
259 color: var(--fg1) !important;
260 background-color: var(--hl1) !important;
261 }
262
263 /* Profile cards */
264 .ui.text.container .ui.cards .ui.fluid.actor.card,
265 .ui.text.container .ui.cards .ui.fluid.actor.card .extra.content
266 {
267 color: var(--fg1) !important;
268 background-color: var(--bg2) !important;
269 }
270 .ui.text.container .ui.cards .ui.fluid.actor.card .extra.content a .meta {
271 color: var(--hl1) !important;
272 }
273
274 /* Code Blocks */
275 code, pre
276 {
277 background-color: var(--bg2) !important
278 }
279
280 /* Paging Buttons */
281 .ui.pagination.menu,
282 .ui.pagination.menu a
283 {
284 color: var(--fg1) !important;
285 background-color: var(--bg1) !important;
286 }
287
288 /* Filter */
289 .ui.text.container #terms .terms .ui.very.basic.table tbody .term td .ui.filter.term .wildcard
290 {
291 background-color: var(--bg1) !important;
292 color: var(--fg1) !important;
293 }
294
295 /* There is nothing there yet notification */
296 .ui.text.container .ui.basic.very.padded.center.aligned.segment .ui.icon.header,
297 .ui.text.container .ui.basic.very.padded.center.aligned.segment .ui.icon.header .icon
298 {
299 color: var(--fg1) !important;
300 }
301
302 /* Danger Buttons */
303 .ui.dangerous.button,
304 .ui.text.container .ui.cards .ui.fluid.actor.card .extra.content .ui.form.right.floated .ui.button.dangerous,
305 .ui.text.container .ui.actor.segments .ui.basic.segment .ui.inline.form .ui.button.dangerous,
306 .ui.text.container .ui.form .ui.dangerous.button
307 {
308 background-color: var(--danger);
309 color: var(--fg1) !important;
310 }
311
312 /* Pagination Buttons */
313 .ui.text.container .ui.secondary.pagination.menu .item
314 {
315 background-color: var(--bg2) !important;
316 border-radius: 3px;
317 margin-top: 0.5em;
318 margin-bottom: 1em;
319 }
