ewancroft.uk
my pkgs monorepo
1@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&display=swap');
2
3:root {
4 --pds-crust: #0d1210;
5 --pds-mantle: #141c19;
6 --pds-base: #1a2420;
7 --pds-surface-0: #243028;
8 --pds-surface-1: #2e3d34;
9 --pds-overlay-0: #4d6b58;
10 --pds-text: #cdd6f4;
11 --pds-subtext: #93b09a;
12 --pds-green: #a6e3a1;
13 --pds-red: #f38ba8;
14 --pds-yellow: #f9e2af;
15 --main-bgcolor: var(--pds-crust);
16 --main-textcolor: var(--pds-text);
17 --container-bordercolor: var(--pds-surface-1);
18 --link-textcolor: var(--pds-green);
19 --link-textcolor-hover: var(--pds-yellow);
20 --link-textcolor-visited: var(--pds-subtext);
21 --button-bgcolor: var(--pds-surface-0);
22 --button-bgcolor-hover: var(--pds-surface-1);
23 --button-accent-color: var(--pds-green);
24 --button-accent-color-hover: var(--pds-yellow);
25 --element-bgcolor: var(--pds-mantle);
26 --username-textcolor: var(--pds-green);
27 --username-textcolor-hover: var(--pds-yellow);
28 --url-textcolor: var(--pds-subtext);
29 --popup-textcolor: var(--pds-text);
30 --popup-bgcolor: var(--pds-surface-0);
31 --color-trans: 0.2s cubic-bezier(0.77, 0, 0.23, 1);
32 --image-transoff: 0.25s cubic-bezier(0.88, 0.52, 0.48, 1);
33 --image-trans: 0.25s cubic-bezier(0.81, -0.19, 0.27, 0.34);
34 --mat-sys-outline: var(--pds-overlay-0);
35 --mat-badge-background-color: var(--pds-green);
36 --mat-badge-text-color: var(--pds-crust);
37}
38
39* {
40 font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco,
41 Consolas, 'Liberation Mono', 'Courier New', monospace !important;
42}
43
44.mat-drawer-content {
45 background-color: var(--pds-crust) !important;
46}
47
48div.wafrn-container.mx-1 {
49 background-color: transparent !important;
50 border: none !important;
51 box-shadow: none !important;
52}
53div.wafrn-container.mx-1 h3 {
54 color: var(--pds-overlay-0);
55 font-size: 0.85em;
56 letter-spacing: 0.08em;
57 text-transform: uppercase;
58}
59
60app-post .expand-post,
61button.expand-post,
62[class*="expand"] > button,
63app-thread-summary button,
64.show-more-button {
65 background-color: var(--pds-surface-0) !important;
66 color: var(--pds-subtext) !important;
67 border: 1px solid var(--pds-surface-1) !important;
68 width: 100%;
69 text-align: center;
70 transition: var(--color-trans);
71}
72[class*="expand"] > button:hover,
73app-thread-summary button:hover,
74.show-more-button:hover {
75 background-color: var(--pds-surface-1) !important;
76 color: var(--pds-green) !important;
77 border-color: var(--pds-green) !important;
78 transition: var(--color-trans);
79}
80
81app-post .reply-to-post,
82div.reply-info,
83.replied-indicator {
84 color: var(--pds-subtext);
85}
86fa-icon[ng-reflect-icon*="reply"],
87svg.fa-reply {
88 color: var(--pds-overlay-0) !important;
89}
90
91button[aria-label*="collapse"],
92button[aria-label*="expand"],
93.post-collapse-button {
94 background: none !important;
95 border: none !important;
96 color: var(--pds-overlay-0) !important;
97 transition: var(--color-trans);
98}
99button[aria-label*="collapse"]:hover,
100button[aria-label*="expand"]:hover {
101 color: var(--pds-green) !important;
102 transition: var(--color-trans);
103}
104
105button.notes-button,
106.notes-count,
107app-post-actions .notes {
108 background-color: var(--pds-surface-0) !important;
109 color: var(--pds-subtext) !important;
110 border: 1px solid var(--pds-surface-1) !important;
111 transition: var(--color-trans);
112}
113button.notes-button:hover,
114app-post-actions .notes:hover {
115 color: var(--pds-green) !important;
116 border-color: var(--pds-green) !important;
117 transition: var(--color-trans);
118}
119
120.mat-drawer-inner-container,
121mat-nav-list {
122 background-color: var(--pds-mantle);
123 border-right: 1px solid var(--pds-surface-1);
124}
125mat-nav-list .mdc-list-item,
126mat-nav-list app-menu-item {
127 color: var(--pds-subtext) !important;
128 border-radius: 0.5rem !important;
129 transition: var(--color-trans);
130}
131mat-nav-list .mdc-list-item:hover,
132mat-nav-list app-menu-item:hover {
133 background-color: var(--pds-surface-0) !important;
134 color: var(--pds-text) !important;
135 transition: var(--color-trans);
136}
137mat-nav-list .mdc-list-item--activated,
138mat-nav-list .mdc-list-item.mdc-list-item--activated {
139 background-color: var(--pds-surface-0) !important;
140 color: var(--pds-green) !important;
141 border-left: 2px solid var(--pds-green);
142 border-radius: 0.5rem !important;
143}
144mat-nav-list .mdc-list-item--activated span,
145mat-nav-list .mdc-list-item--activated fa-icon {
146 color: var(--pds-green) !important;
147}
148mat-nav-list .mdc-list-item__primary-text {
149 color: inherit !important;
150}
151mat-nav-list fa-icon {
152 color: var(--pds-overlay-0);
153 transition: var(--color-trans);
154}
155mat-nav-list fa-icon:hover {
156 color: var(--pds-green);
157 transition: var(--color-trans);
158}
159app-menu-item button[aria-label*="oot"],
160button.woot-button,
161a[routerlink*="woot"] mat-list-item,
162mat-nav-list .woot {
163 background-color: color-mix(in srgb, var(--pds-green) 18%, var(--pds-surface-0)) !important;
164 color: var(--pds-green) !important;
165 border: 1px solid color-mix(in srgb, var(--pds-green) 40%, transparent) !important;
166 border-radius: 0.5rem !important;
167 transition: var(--color-trans);
168}
169mat-drawer a {
170 color: var(--pds-subtext);
171 transition: var(--color-trans);
172}
173mat-drawer a:hover {
174 color: var(--pds-green);
175 transition: var(--color-trans);
176}
177
178.wafrn-container {
179 background-color: var(--pds-mantle) !important;
180 color: var(--pds-text);
181 border-radius: 0.75rem;
182 border-width: 1px;
183 border-style: solid;
184 border-color: var(--pds-surface-1);
185 box-shadow:
186 0 0 0 1px color-mix(in srgb, var(--pds-green) 6%, transparent),
187 0 4px 16px color-mix(in srgb, #000000 35%, transparent);
188}
189
190.mat-mdc-card {
191 color: var(--pds-text);
192 background-color: var(--pds-mantle);
193 border-radius: 0.75rem;
194 border: 1px solid var(--pds-surface-1);
195 box-shadow: 0 2px 12px color-mix(in srgb, #000000 30%, transparent);
196 overflow: hidden;
197}
198
199div.wafrn-text-default {
200 color: var(--pds-text);
201 font-family: inherit;
202}
203
204app-post hr {
205 border-color: var(--pds-surface-1) !important;
206 border-width: 1px;
207}
208
209a {
210 color: var(--pds-green);
211 transition: var(--color-trans);
212}
213a:visited {
214 color: var(--pds-subtext);
215}
216a:hover {
217 color: var(--pds-yellow);
218 transition: var(--color-trans);
219}
220a:active {
221 color: var(--pds-yellow);
222}
223
224button {
225 background-color: var(--pds-surface-0);
226 color: var(--pds-text);
227 border: 1px solid var(--pds-surface-1);
228 border-radius: 0.5rem;
229 transition: var(--color-trans);
230}
231button:hover {
232 background-color: var(--pds-surface-1);
233 color: var(--pds-green);
234 border-color: var(--pds-green);
235 transition: var(--color-trans);
236}
237button:active {
238 background-color: var(--pds-surface-1);
239 color: var(--pds-yellow);
240 border-color: var(--pds-yellow);
241 transition: var(--color-trans);
242}
243.mat-mdc-unelevated-button,
244.mat-mdc-unelevated-button.mat-primary {
245 background-color: var(--pds-surface-0) !important;
246 color: var(--pds-green) !important;
247 border: 1px solid var(--pds-surface-1);
248 border-radius: 0.5rem !important;
249 transition: var(--color-trans);
250}
251.mat-mdc-unelevated-button:hover,
252.mat-mdc-unelevated-button.mat-primary:hover {
253 background-color: var(--pds-surface-1) !important;
254 color: var(--pds-yellow) !important;
255 border-color: var(--pds-green);
256 transition: var(--color-trans);
257}
258.mat-mdc-unelevated-button.mat-warn {
259 color: var(--pds-red) !important;
260 background-color: color-mix(in srgb, var(--pds-red) 12%, var(--pds-surface-0)) !important;
261 border-color: var(--pds-red);
262 border-radius: 0.5rem !important;
263 transition: var(--color-trans);
264}
265.mat-mdc-unelevated-button.mat-warn:hover {
266 background-color: color-mix(in srgb, var(--pds-red) 22%, var(--pds-surface-0)) !important;
267}
268
269.mat-mdc-menu-panel {
270 background-color: var(--pds-surface-0);
271 color: var(--pds-text);
272 border: 1px solid var(--pds-surface-1);
273 border-radius: 0.75rem !important;
274 box-shadow: 0 4px 20px color-mix(in srgb, #000000 50%, transparent) !important;
275}
276
277.mdc-tooltip__surface {
278 background-color: var(--pds-surface-0) !important;
279 color: var(--pds-text) !important;
280 border: 1px solid var(--pds-surface-1);
281 border-radius: 0.375rem !important;
282}
283
284.original-poster-name,
285.user-name {
286 color: var(--pds-green) !important;
287 transition: var(--color-trans);
288}
289.original-poster-name:hover,
290.user-name:hover {
291 color: var(--pds-yellow) !important;
292 transition: var(--color-trans);
293}
294.original-poster-url,
295span.user-url {
296 color: var(--pds-subtext);
297 font-family: inherit;
298}
299
300.avatar,
301.avatar img {
302 height: 45px;
303 width: 45px;
304 border-radius: 50% !important;
305 border: 2px solid var(--pds-surface-1);
306}
307
308button.follow-button {
309 background: none !important;
310 color: var(--pds-green) !important;
311 border: none !important;
312 transition: var(--color-trans);
313}
314button.follow-button:hover {
315 background: none !important;
316 color: var(--pds-yellow) !important;
317 border: none !important;
318 transition: var(--color-trans);
319}
320
321#fragment-content-warning {
322 color: var(--pds-text);
323 background-color: var(--pds-base);
324 border-left: 3px solid var(--pds-yellow);
325 padding-left: 0.75rem;
326}
327div.fragment-content-warning div.fragment-content {
328 background-color: var(--pds-crust);
329}
330div.fragment-content-warning button {
331 background-color: var(--pds-surface-0);
332 border: 1px solid var(--pds-yellow);
333 color: var(--pds-yellow);
334}
335
336a.tag {
337 background-color: var(--pds-surface-0) !important;
338 color: var(--pds-green) !important;
339 border: 1px solid var(--pds-surface-1) !important;
340 border-radius: 9999px !important;
341 font-family: inherit;
342 padding: 0.1em 0.6em;
343 transition: var(--color-trans);
344}
345a.tag:hover {
346 color: var(--pds-yellow) !important;
347 border-color: var(--pds-green) !important;
348 transition: var(--color-trans);
349}
350.ql-snow a {
351 color: var(--pds-green);
352}
353
354.mention {
355 background-color: color-mix(in srgb, var(--pds-green) 15%, var(--pds-surface-0)) !important;
356 border: 1px solid color-mix(in srgb, var(--pds-green) 30%, transparent) !important;
357 border-radius: 9999px !important;
358 padding: 0.05em 0.45em;
359}
360a.mention {
361 color: var(--pds-green) !important;
362 transition: var(--color-trans);
363}
364a.mention:hover {
365 color: var(--pds-yellow) !important;
366 transition: var(--color-trans);
367}
368
369div.quoted-post {
370 border: 1px solid var(--pds-surface-1);
371 border-left: 3px solid var(--pds-green);
372 border-radius: 0.5rem;
373 background-color: var(--pds-base);
374 box-shadow: none;
375}
376
377.embed-link {
378 background: var(--pds-surface-0);
379 border: 1px solid var(--pds-surface-1);
380 border-radius: 0.5rem;
381}
382.embed-text {
383 background-color: var(--pds-base);
384 border: 1px solid var(--pds-surface-1);
385 border-radius: 0 0 0.5rem 0.5rem;
386}
387.embed-title,
388.embed-description,
389.embed-url {
390 color: var(--pds-text) !important;
391}
392.embed-link:hover {
393 border-color: var(--pds-green);
394}
395
396.media-content-container,
397.media-container {
398 background-color: var(--pds-crust) !important;
399 border: 1px solid var(--pds-surface-1);
400 border-radius: 0.5rem;
401 overflow: hidden;
402}
403.media-gallery,
404.media-carousel {
405 background-color: var(--pds-crust) !important;
406 border-radius: 0.5rem;
407 overflow: hidden;
408}
409app-wafrn-media img {
410 filter: brightness(0.75);
411 transition: var(--image-transoff);
412 border-radius: 0.375rem;
413}
414app-wafrn-media img:hover {
415 filter: brightness(1);
416 transition: var(--image-trans);
417}
418app-wafrn-media div.media-description {
419 background-color: var(--pds-surface-0) !important;
420 color: var(--pds-subtext);
421 font-size: 11px;
422 border-top: 1px solid var(--pds-surface-1);
423 border-radius: 0 0 0.375rem 0.375rem;
424}
425
426#emoji-reactions {
427 background: none !important;
428 box-shadow: none !important;
429 border-width: 0px !important;
430}
431#emoji-reactions button {
432 background-color: var(--pds-surface-0);
433 border: 1px solid var(--pds-surface-1) !important;
434 transition: var(--color-trans);
435}
436#emoji-reactions button:hover {
437 background-color: var(--pds-surface-1) !important;
438 border-color: var(--pds-green) !important;
439 transition: var(--color-trans);
440}
441#emoji-reactions .mat-mdc-tooltip-trigger {
442 background: none !important;
443 box-shadow: none !important;
444}
445.mat-mdc-raised-button:not(:disabled) {
446 background: none !important;
447 box-shadow: none !important;
448}
449.mat-mdc-button-persistent-ripple {
450 display: none;
451}
452app-emoji-react svg {
453 fill: var(--pds-subtext);
454 transition: var(--color-trans);
455}
456app-emoji-react svg:hover {
457 fill: var(--pds-green);
458 transition: var(--color-trans);
459}
460
461fa-icon {
462 color: var(--pds-subtext);
463 transition: var(--color-trans);
464}
465fa-icon:hover {
466 color: var(--pds-green);
467 transition: var(--color-trans);
468}
469svg.fa-share-nodes,
470svg.fa-chevron-down {
471 color: var(--pds-overlay-0);
472 transition: var(--color-trans);
473}
474svg.fa-share-nodes:hover,
475svg.fa-chevron-down:hover {
476 color: var(--pds-green);
477 transition: var(--color-trans);
478}
479app-post-actions button:hover {
480 background: none !important;
481 border-width: 0px;
482}
483
484.mat-mdc-dialog-container,
485.mat-mdc-dialog-inner-container,
486.mat-mdc-dialog-surface {
487 background-color: var(--pds-base) !important;
488 border: 1px solid var(--pds-surface-1) !important;
489 border-radius: 1rem !important;
490 box-shadow: 0 8px 32px color-mix(in srgb, #000000 60%, transparent) !important;
491}
492.mdc-floating-label {
493 color: var(--pds-subtext) !important;
494}
495.mdc-text-field {
496 background-color: var(--pds-mantle);
497 border-color: var(--pds-surface-1) !important;
498 border-radius: 0.5rem !important;
499}
500.mdc-text-field--filled:not(.mdc-text-field--disabled) {
501 background-color: var(--pds-mantle) !important;
502 border-color: var(--pds-surface-1) !important;
503 border-radius: 0.5rem !important;
504}
505.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-floating-label {
506 color: var(--pds-subtext) !important;
507}
508.mdc-button__label {
509 color: var(--pds-green);
510}
511.ql-snow > .ql-editor {
512 background-color: var(--pds-mantle);
513 color: var(--pds-text) !important;
514 border: 1px solid var(--pds-surface-1);
515 border-radius: 0.5rem;
516 max-height: 600px;
517}
518.ql-snow > .ql-editor:focus {
519 background-color: var(--pds-mantle);
520 color: var(--pds-text);
521 border-color: var(--pds-green);
522}
523
524code {
525 background-color: var(--pds-crust);
526 color: var(--pds-green);
527 border: 1px solid var(--pds-surface-1);
528 border-radius: 0.25rem;
529 padding: 0.1em 0.35em;
530 display: inline;
531}
532pre {
533 background-color: var(--pds-crust);
534 color: var(--pds-green);
535 border: 1px solid var(--pds-surface-1);
536 border-left: 3px solid var(--pds-overlay-0);
537 border-radius: 0.5rem;
538 padding: 0.6em 0.9em;
539 display: block;
540 overflow-x: auto;
541 white-space: pre-wrap;
542 word-break: break-word;
543}
544
545mat-spinner {
546 width: 42px;
547 height: 42px;
548}
549circle {
550 color: var(--pds-green) !important;
551 stroke-dasharray: 77px;
552 stroke-width: 33px;
553}
554p#if-you-see-this-load-more-posts {
555 color: var(--pds-subtext);
556}
557
558a[href*="dQw4w9WgXcQ"]::before {
559 content: "this is a rickroll \2192 ";
560 color: var(--pds-red);
561 background-color: color-mix(in srgb, var(--pds-red) 12%, var(--pds-surface-0));
562 border: 1px solid var(--pds-red);
563 padding: 1px 4px;
564}