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