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