rosé pine soft colors and readability tweaks for the anarchist library
veryroundbird.house
1/* ==UserStyle==
2@name rosé pine anarchism
3@namespace veryroundbird.house
4@version 1.0.0
5@description Tweaks theanarchistlibrary.org to be more readable (larger text, fonts for legbility) and also more cute
6@author Carly Smallbird
7@var select font "Font" {
8 "system:System*": "font-family: system-ui, sans-serif",
9 "atkinson:Atkinson Hyperlegible": "'Atkinson Hyperlegible', sans-serif",
10 "geometria:Geometria": "'Geometria', sans-serif",
11 "lexend:Lexend": "'Lexend', sans-serif",
12 "sourceserif:Source Serif Pro": "'Source Serif Pro', serif",
13 "ibmplexserif:IBM Plex Serif": "'IBM Plex Serif', serif",
14 "spacemono:Space Mono": "'Space Mono', monospace",
15 "sligoil:Sligoil": "'Sligoil', monospace",
16 "custom:Custom": "var(--customfont)"
17}
18@var text customfont "Custom Font" ""
19==/UserStyle== */
20
21@-moz-document domain("theanarchistlibrary.org") {
22 :root {
23 --background: #faf4ed;
24 --surface: #fffaf3;
25 --overlay: #f2e9e1;
26 --muted: #9893a5;
27 --subtle: #797593;
28 --text: #575279;
29 --love: #b4637a;
30 --gold: #ea9d34;
31 --rose: #d7827e;
32 --pine: #286983;
33 --foam: #56949f;
34 --iris: #907aa9;
35 --highlightlow: #f4ede8;
36 --highlightmed: #dfdad9;
37 --highlighthi: #cecacd;
38 --darkencolor: #000000;
39
40 @media (prefers-color-scheme: dark) {
41 --background: #232136;
42 --surface: #2a273f;
43 --overlay: #393552;
44 --muted: #6e6a86;
45 --subtle: #908caa;
46 --text: #e0def4;
47 --love: #eb6f92;
48 --gold: #f6c177;
49 --rose: #ea9a97;
50 --pine: #3e8fb0;
51 --foam: #9ccfd8;
52 --iris: #c4a7e7;
53 --highlightlow: #2a283e;
54 --highlightmed: #44415a;
55 --highlighthi: #56526e;
56 --darkencolor: #FFFFFF;
57 }
58 }
59
60 /* GENERAL COMPONENTS */
61
62 body {
63 font-family: var(--font);
64 font-size: 16px;
65 background-color: var(--background);
66 color: var(--text);
67 }
68
69 a {
70 color: var(--love);
71 }
72
73 a:hover {
74 color: color-mix(in srgb-linear, var(--love), var(--darkencolor) 50%);
75 }
76
77 blockquote {
78 font-size: 20px;
79 font-style: italic;
80 border-left: 8px var(--rose) solid;
81 }
82
83 blockquote blockquote {
84 border-color: var(--gold);
85 }
86
87 hr {
88 border-color: var(--highlighthi);
89 }
90
91 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
92 color: var(--text);
93 font-family: var(--font);
94 }
95
96 h1, .h1 {
97 font-size: 2.5em;
98 }
99
100 h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
101 color: var(--subtle);
102 }
103
104 .well,
105 .jumbotron {
106 background-image: none;
107 background-color: var(--surface);
108 border-color: var(--highlighthi);
109 }
110
111 .text-primary, .text-primary:hover {
112 color: var(--foam);
113 }
114
115 .fa-border {
116 border-width: 1px;
117 border-color: var(--highlighthi);
118 background-color: var(--surface);
119 }
120
121 .label-default {
122 background-color: var(--iris);
123 color: var(--background);
124 }
125
126 .badge {
127 background-color: var(--foam);
128 }
129
130 /* BUTTONS */
131
132 .btn-primary {
133 background-image: none;
134 background-color: var(--pine);
135 color: var(--background);
136 border-color: color-mix(in srgb-linear, var(--pine), var(--darkencolor) 20%);
137 }
138
139 .btn-primary:hover,
140 .btn-primary:focus {
141 background-color: color-mix(in srgb-linear, var(--pine), var(--darkencolor) 20%);
142 border-color: color-mix(in srgb-linear, var(--pine), var(--darkencolor) 40%);
143 }
144
145 .btn-default {
146 background-color: var(--rose);
147 color: var(--background);
148 border-color: color-mix(in srgb-linear, var(--rose), var(--darkencolor) 20%);
149 background-image: none;
150 text-shadow: none;
151 }
152
153 .btn-default:hover,
154 .btn-default:focus {
155 background-color: color-mix(in srgb-linear, var(--rose), var(--darkencolor) 20%);
156 border-color: color-mix(in srgb-linear, var(--rose), var(--darkencolor) 40%);
157 color: var(--background);
158 }
159
160 .btn-sm, .btn-group-sm > .btn {
161 font-size: 14px;
162 }
163
164 /* FORM CONTROLS */
165
166 legend {
167 border-color: var(--highlighthi);
168 color: var(--subtle);
169 }
170
171 .form-control {
172 border-color: var(--highlighthi);
173 color: var(--text);
174 }
175
176 .form-control::placeholder {
177 color: var(--muted);
178 }
179
180 .form-control::-moz-placeholder {
181 color: var(--muted);
182 }
183
184 .form-control::-webkit-placeholder {
185 color: var(--muted);
186 }
187
188 .form-control:focus {
189 border-color: var(--pine);
190 box-shadow: inset 0 1px 1px color-mix(in srgb-linear, var(--muted), transparent 25%), 0 0 8px color-mix(in srgb-linear, var(--pine), transparent 40%);
191 }
192
193 /* PAGE STRUCTURE */
194
195 .navbar-default {
196 background-image: none;
197 color: var(--text);
198 background-color: var(--surface);
199 border-color: var(--highlighthi);
200 }
201
202 b.caret {
203 border-top-color: var(--subtle);
204 }
205
206 .dropdown-toggle:hover b.caret {
207 border-top-color: var(--rose);
208 }
209
210 .navbar-default .navbar-nav > .open > a b.caret,
211 .navbar-default .navbar-nav > .active > a b.caret {
212 border-top-color: var(--text);
213 }
214
215 .amw-navlogo b.caret {
216 border-top-color: var(--foam);
217 }
218
219 .navbar-header .amw-navlogo {
220 position: relative;
221 display: block;
222 background-color: white;
223
224 @media (prefers-color-scheme: dark) {
225 background-color: black;
226 }
227 }
228
229 .navbar-header .amw-navlogo img {
230 @media (prefers-color-scheme: dark) {
231 filter: contrast(1.5) invert(1);
232 }
233 }
234
235 .navbar-header .amw-navlogo:before,
236 .navbar-header .amw-navlogo:after {
237 content: "";
238 display: block;
239 width: 100%;
240 height: 100%;
241 top: 0;
242 left: 0;
243 position: absolute;
244 }
245
246 .navbar-header .amw-navlogo:before {
247 background-color: var(--surface);
248 mix-blend-mode: multiply;
249 z-index: 5;
250
251 @media (prefers-color-scheme: dark) {
252 mix-blend-mode: screen;
253 z-index: 3;
254 }
255 }
256
257 .navbar-header .amw-navlogo:after {
258 background-color: var(--text);
259 mix-blend-mode: screen;
260 z-index: 3;
261
262 @media (prefers-color-scheme: dark) {
263 mix-blend-mode: multiply;
264 z-index: 5;
265 }
266 }
267
268 .navbar-default .navbar-nav > li > a {
269 color: var(--subtle);
270 }
271
272 .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .active > a {
273 color: var(--text);
274 background-image: none;
275 background-color: var(--overlay);
276 box-shadow: none;
277 }
278
279 .navbar-default .navbar-nav > .open > a,
280 .navbar-default .navbar-nav > .open > a:hover,
281 .navbar-default .navbar-nav > .open > a:focus {
282 color: var(--rose);
283 }
284
285 .navbar-default .navbar-nav > .open > a .caret,
286 .navbar-default .navbar-nav > .open > a:hover .caret,
287 .navbar-default .navbar-nav > .open > a:focus .caret {
288 border-top-color: var(--rose);
289 }
290
291 .dropdown-menu {
292 background-color: var(--surface);
293 border-color: var(--highlighthi);
294 font-size: 16px;
295 }
296
297 .dropdown-menu li.divider {
298 background-color: var(--highlighthi);
299 margin: 0;
300 }
301
302 .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
303 background-image: none;
304 background-color: var(--love);
305 color: var(--background);
306 }
307
308 .dropdown-menu > li > a {
309 color: var(--text);
310 padding: 6px 20px;
311 }
312
313 .dropdown-menu > li > a:hover,
314 .dropdown-menu > li > a:focus {
315 background-image: none;
316 background-color: var(--highlightmed);
317 color: var(--text);
318 }
319
320 .dropdown-header {
321 color: var(--subtle);
322 text-transform: uppercase;
323 font-size: 14px;
324 }
325
326 .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
327 color: var(--rose);
328 }
329
330 .ui-autocomplete {
331 background-color: var(--surface);
332 }
333
334 .ui-menu-item-wrapper {
335 padding: 5px 10px;
336 }
337
338 .breadcrumb {
339 background-color: var(--surface);
340 color: var(--muted);
341 }
342
343 .nav-tabs a,
344 .nav-pills a,
345 .breadcrumb a,
346 .pager a {
347 color: var(--muted);
348 }
349
350 .breadcrumb > .active {
351 color: var(--subtle);
352 }
353
354 .breadcrumb > li + li::before {
355 color: var(--muted);
356 }
357
358 .page-header {
359 border-color: var(--highlighthi);
360 }
361
362 p.tableofcontentline a {
363 color: var(--subtle);
364 }
365
366 #downloadformats a {
367 color: var(--foam);
368 }
369
370 .list-group-item {
371 background-color: var(--surface);
372 color: var(--subtle);
373 border-color: var(--highlighthi);
374 }
375
376 a.list-group-item, button.list-group-item {
377 color: var(--subtle);
378 }
379
380 a.list-group-item:hover,
381 button.list-group-item:hover,
382 a.list-group-item:focus,
383 button.list-group-item:focus {
384 background-color: var(--highlightlow);
385 color: var(--text);
386 }
387
388 .pagination > li > a, .pagination > li > span {
389 background-color: var(--highlightmed);
390 color: var(--text);
391 border-color: var(--highlighthi);
392 }
393
394 .pagination > li > a:hover,
395 .pagination > li > span:hover,
396 .pagination > li > a:focus,
397 .pagination > li > span:focus {
398 background-color: var(--foam);
399 color: var(--background);
400 }
401
402 .pagination > .active > a,
403 .pagination > .active > span,
404 .pagination > .active > a:hover,
405 .pagination > .active > span:hover,
406 .pagination > .active > a:focus,
407 .pagination > .active > span:focus {
408 background-color: var(--pine);
409 color: var(--background);
410 }
411
412 .footer {
413 background-color: var(--surface);
414 color: var(--text);
415 padding-bottom: 20px;
416 }
417
418 .footer a {
419 color: var(--subtle);
420 }
421}