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