purpleish.css (9501B)
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 Attachments */
205 .ui.feed > .event img.extra.image,
206 .ui.feed > .event video.extra.video,
207 .ui.feed > .event div.extra.text figure img.ui.image,
208 .ui.feed > .event div.extra.text figure vid.ui.video
209 {
210 color: var(--fg1); /* alt text */
211 }
212
213 /* Post Actions */
214 .ui.button,
215 section.ui.feed .content .meta .ui.inline.form,
216 section.ui.feed .content .meta a,
217 .ui.mini.iconic,
218 .ui.mini.iconic.button .icon,
219 .ui.mini.iconic.button.iconic.dangerous,
220 .ui.text.container .ui.feed .event.activity-announce .content .meta .ui.inline.form .ui.button.mini.dangerous.iconic,
221 .ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox,
222 .ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox label,
223 .ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox input
224 {
225 color: var(--fg1) !important;
226 background-color: var(--bg1) !important;
227 }
228 section.ui.feed .content .meta a.blue,
229 section.ui.feed .content .meta a.purple,
230 .ui.mini.iconic.blue,
231 .ui.mini.iconic.purple,
232 .ui.mini.iconic.button.blue,
233 .ui.mini.iconic.button.blue .icon,
234 .ui.mini.iconic.button.purple,
235 .ui.mini.iconic.button.purple .icon,
236 .ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox.checked,
237 .ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox.checked label,
238 .ui.text.container .ui.feed .threaded.event .content .meta .ui.form .ui.mini.toggle.checkbox.checked input
239 {
240 color: var(--hl1) !important
241 }
242 .ui.button:hover,
243 section.ui.feed .content .meta .ui.inline.form:hover,
244 section.ui.feed .content .meta a:hover,
245 .ui.mini.iconic:hover,
246 .ui.mini.iconic.button .icon:hover
247 .ui.feed > .event > .content .meta a:hover,
248 .ui.feed > .event > .content .meta a:hover > button > .icon,
249 .ui.feed > .event > .content .meta .ui.inline.form:hover > button,
250 .ui.feed > .event > .content .meta .ui.inline.form:hover > button > .icon,
251 .ui.button:active,
252 section.ui.feed .content .meta .ui.inline.form:active,
253 section.ui.feed .content .meta a:active,
254 .ui.mini.iconic:active,
255 .ui.mini.iconic.button .icon:active,
256 .ui.feed > .event > .content .meta a:active,
257 .ui.feed > .event > .content .meta a:active > button > .icon,
258 .ui.feed > .event > .content .meta .ui.inline.form:active > button,
259 .ui.feed > .event > .content .meta .ui.inline.form:active > button > .icon
260 {
261 color: var(--hl1) !important;
262 }
263 .ui.feed > .event > .content .meta .ui.inline.form:hover > button.dangerous,
264 .ui.feed > .event > .content .meta .ui.inline.form:hover > button.dangerous > .icon
265 {
266 color: var(--danger) !important;
267 }
268
269 /* Profile Button */
270 .ui.button
271 {
272 color: var(--fg1) !important;
273 background-color: var(--hl1) !important;
274 }
275
276 /* Profile cards */
277 .ui.text.container .ui.cards .ui.fluid.actor.card,
278 .ui.text.container .ui.cards .ui.fluid.actor.card .extra.content
279 {
280 color: var(--fg1) !important;
281 background-color: var(--bg2) !important;
282 }
283 .ui.text.container .ui.cards .ui.fluid.actor.card .extra.content a .meta {
284 color: var(--hl1) !important;
285 }
286
287 /* Code Blocks */
288 code, pre
289 {
290 background-color: var(--bg2) !important
291 }
292
293 /* Paging Buttons */
294 .ui.pagination.menu,
295 .ui.pagination.menu a
296 {
297 color: var(--fg1) !important;
298 background-color: var(--bg1) !important;
299 }
300
301 /* Filter */
302 .ui.text.container #terms .terms .ui.very.basic.table tbody .term td .ui.filter.term .wildcard
303 {
304 background-color: var(--bg1) !important;
305 color: var(--fg1) !important;
306 }
307
308 /* There is nothing there yet notification */
309 .ui.text.container .ui.basic.very.padded.center.aligned.segment .ui.icon.header,
310 .ui.text.container .ui.basic.very.padded.center.aligned.segment .ui.icon.header .icon
311 {
312 color: var(--fg1) !important;
313 }
314
315 /* Danger Buttons */
316 .ui.dangerous.button,
317 .ui.text.container .ui.cards .ui.fluid.actor.card .extra.content .ui.form.right.floated .ui.button.dangerous,
318 .ui.text.container .ui.actor.segments .ui.basic.segment .ui.inline.form .ui.button.dangerous,
319 .ui.text.container .ui.form .ui.dangerous.button
320 {
321 background-color: var(--danger);
322 color: var(--fg1) !important;
323 }
324
325 /* Pagination Buttons */
326 .ui.text.container .ui.secondary.pagination.menu .item
327 {
328 background-color: var(--bg2) !important;
329 border-radius: 3px;
330 margin-top: 0.5em;
331 margin-bottom: 1em;
332 }
