-
Notifications
You must be signed in to change notification settings - Fork 2
/
ss21.user.styl
6296 lines (5811 loc) · 177 KB
/
ss21.user.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
/* ==UserStyle==
@name ss21
@namespace https://github.com/saxamaphone69/
@version 2.4.3
@description a self-centered, fresh attempt at (user)styling 4chan
@author sax
@homepageURL https://github.com/saxamaphone69/ss21
@updateURL https://github.com/saxamaphone69/ss21/raw/main/ss21.user.styl
@supportURL https://github.com/saxamaphone69/ss21/issues
@license CC-BY-SA-4.0
@preprocessor stylus
@var range ss21fontSize "Default font size" [16, 10, 18, 2, "px"]
@var checkbox ss21roundedCorners "Rounded corners" 1
@var select ss21readingMode "Reading mode" ["ss21dark:Dark theme*", "ss21light:Light theme", "ss21yotsuba:Yotsuba", "ss21tomorrow:Tomorrow", "ss21photon:Photon"]
@var color ss21primary "Primary colour" #FFBE98
@var select ss21spacingLevel "Spacing amount" ["0:Comfortable", "1:Compact"]
@var checkbox ss21underlineLink "Underline external links" 1
@var checkbox ss21postWidth "Full-width posts" 1
@var checkbox ss21boardCenter "Centered board" 1
@var select ss21sidebar "Sidebar" ["0:None*", "1:Right-hand side", "2:Left-hand side"]
@var select ss21QRPosition "QR position" ["1:Floating*", "2:Locked right", "3:Fixed pop-out"]
@var select ss21buttonStyle "Button style" ["1:Contained", "2:Outline", "3:Text", "4:Material 3*"]
@var select ss21textStyle "Text input style" ["1:Outline*", "2:Fill"]
@var checkbox ss21quoteColour "Default olive" 0
@var checkbox ss21boardBanner "Enable board title and banner" 1
@var checkbox ss21evenPosts "Recolour even post backgrounds" 1
@var checkbox ss21blotter "Show blotter" 0
@var select ss21headerHeight "Header height" ["1:Tall", "2:Short"]
@var checkbox ss21opacityHeader "Make header slightly transparent" 1
@var checkbox ss21forcedAnon "Hide all names/tripcodes/IDs" 0
@var checkbox ss21postInfoBg "Give post information a background" 0
@var checkbox ss21postInfoFont "Shrink post information font size" 1
@var checkbox ss21postInfoDisplay "Show post information on hover" 1
@var select ss21fileInfo "File information" ["1:Always displayed", "2:On hover*", "3:As a card"]
@var checkbox ss21twoWide "On wide screens, show 2 threads" 1
@var checkbox ss21thumbnailOpacity "Drastically reduce opacity of thumbnails" 0
@var select ss21flatness "Materialness" ["0:Flat", "1:Elevated", "2:Bordered*"]
@var select ss21openThread "Open Thread style" ["0:Traditional", "1:FAB*"]
@var checkbox ss21allowContest "If unblocked, show contest banners" 0
@var select ss21iconFont "Icon font" ["1:Bootstrap", "2:Material Symbols*"]
@var checkbox ss21navRail "Display settings as navigation rail" 1
@var select ss21watchButton "Watch thread button" ["1:Always displayed*", "2:On hover"]
@var select ss21watchButtonIcon "Watch thread icon" ["1:Heart*", "2:Star"]
@var select ss21catalogueStyle "Catalogue styling" ["1:Default-esque*", "2:Masonry (buggy)"]
@var select ss21backlinkStyle "Backlink styling" ["1:Text*", "2:Icon"]
@var checkbox ss21catalogueIcons "Display icons for catalogue stats" 0
@var checkbox ss21compressBoards "Reduce width of full board list" 0
@var checkbox ss21floatingHeader "Detaches the header from the top" 0
@var checkbox ss21tweetCard "When using fxtwitter for 4chan XT, make inline embeds look like cards" 1
@var checkbox ss21noReplyAllowed "Make 'You cannot reply anymore' appear as a toast" 1
==/UserStyle== */
@-moz-document regexp('https://(boards|find)\\.4chan(?:nel)?\\.org.*')
// XXX: probably should allow custom ui font, and monospace font
@import url('https://rsms.me/inter/inter.css');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
if ss21iconFont == 1
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css");
else if ss21iconFont == 2
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200');
/*
material spec:
text black on white, #000 high .87
text black on white, #000 medium .6
text black on white, #000 disabled .38
icon black on white, active+focus .87
icon black on white, active+NOT focused .54
icon black on white, inactive .38
*/
/*
* yes, ss21 is still around, even 5 years later. it utilises the latest and
* greatest web technologies and practices to create a userstyle that is
* unique; standing out from the (onee|app)chan styles that the majority of
* ricers use.
*/
// really, this should also be able to accept a text emphasis/state level
// and then determine how much opacity to apply
// for example, if te === high, take white and make it .87,
// if te === medium, take white (or black) and make it .6
tc(colour, emphasis)
if emphasis == high
_emphasis = .87
if emphasis == medium
_emphasis = .6
if emphasis == low
_emphasis = .38
if contrast(#fff, colour).ratio >= 4.5
color rgba(255, 255, 255, _emphasis)
else
color rgba(33, 33, 33, _emphasis)
if ss21readingMode == ss21dark
ss21OppColour = #fff
ss21TextPrimary = alpha(#fff, .87)
ss21TextSecondary = alpha(#fff, .6)
ss21TextHint = alpha(#fff, .38)
ss21BackgroundColour = #121212
ss21BackgroundElevated = #1f1f1f
else if ss21readingMode == ss21light
ss21OppColour = #212121
ss21TextPrimary = alpha(#212121, .87)
ss21TextSecondary = alpha(#212121, .6)
ss21TextHint = alpha(#212121, .38)
ss21BackgroundColour = #eaeaea
ss21BackgroundElevated = #fff
else if ss21readingMode == ss21yotsuba
ss21OppColour = #212121
ss21TextPrimary = alpha(#212121, .87)
ss21TextSecondary = alpha(#212121, .6)
ss21TextHint = alpha(#212121, .38)
ss21BackgroundColour = #eef2ff
ss21BackgroundElevated = #d6daf0
:root.ws
--4chan-subject #0f0c5d
--4chan-name #117743
--4chan-trip #117743
--4chan-quote #789922
--4chan-link #34345c
--4chan-link-hover #d00
--4chan-board-title #af0a0f
--4chan-text #000
--4chan-text-link #000
--4chan-background #eef2ff
--4chan-post-bg #d6daf0 // header and dialogs
--4chan-post-border #b7c5d9 // borders and hr
:root.nws
--4chan-subject #cc1105
--4chan-name #117743
--4chan-trip #117743
--4chan-quote #789922
--4chan-link #00e
--4chan-link-hover #f00
--4chan-board-title #800
--4chan-text #800
--4chan-text-link #800
--4chan-background #ffe
--background-primary #f0e0d6 // header and dialogs
--4chan-post-border #d9bfb7 // borders and hr
else if ss21readingMode == ss21tomorrow
ss21OppColour = #212121
ss21TextPrimary = alpha(#c5c8c6, .87)
ss21TextSecondary = alpha(#c5c8c6, .6)
ss21TextHint = alpha(#c5c8c6, .38)
ss21BackgroundColour = #1d1f21
ss21BackgroundElevated = #282a2e
else if ss21readingMode == ss21photon
ss21OppColour = #212121
ss21TextPrimary = alpha(#333, .87)
ss21TextSecondary = alpha(#333, .6)
ss21TextHint = alpha(#333, .38)
ss21BackgroundColour = #eee
ss21BackgroundElevated = #ddd
z-depth(n = 1)
if n == 1
box-shadow 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
if n == 2 // card, button
box-shadow 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
if n == 4 // top app bar, button hover
box-shadow 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)
if n == 6 // snackbar
box-shadow 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)
if n == 8 // menu, button active
box-shadow 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
if n == 16 // nav drawer
box-shadow 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)
if n == 24 // dialogue
box-shadow 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12)
borderRadius()
if ss21roundedCorners
border-radius 4px
i = !important
/* thankfully we have css custom properties (a.k.a. variables) we can use,
* along with stylus-lang to create a dynamic and truly customisable
* userstyle
*/
// stylus variables, only so we can use functions
ss21-primary = ss21primary
ss21-on-primary = tc(ss21primary, high)
ss21-surface = #fff
ss21-on-surface = #000
ss21posterFounder = #117743
ss21posterAdmin = #f44336
ss21posterMod = #9c27b0
ss21posterDev = #0000f0
ss21posterManager = #ff0080
ss21posterVerified = #007fff
ss21posterPass = #afb42b
ss21poster(type)
if type == 'founder'
return #117743
if type == 'admin'
return #f44336
if type == 'mod'
return #9c27b0
if type == 'dev'
return #0000f0
if type == 'manager'
return #ff0080
if type == 'verified'
return #007fff
if type == 'pass'
return #afb42b
ss21red = #f44336
ss21blue = #2196f3
ss21green = #4caf50
ss21purple = #9c27b0
ss21orange = #ff9800
ss21minContrastRatio = 3
// should be tint to lighten
// should be shade to darken
ss21spacer = 1rem
// bootstrap breakpoints
// sm 540, md 720, lg 960, xl 1140, xxl 1320
// https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss
// https://github.com/twbs/bootstrap/blob/master/scss/_functions.scss
:root
--primary ss21primary
--secondary invert(ss21primary)
--text-primary-on-background ss21TextPrimary
--text-secondary-on-background ss21TextSecondary
--text-hint-on-background ss21TextHint
//--text-primary-on-primary ss21-on-primary
/*
--text-primary-on-primary textContraster(ss21primary, .87)
--text-secondary-on-primary textContraster(ss21primary, .6)
--text-hint-on-primary textContraster(ss21primary, .38)
*/
--background-primary ss21BackgroundElevated
--background-secondary ss21BackgroundColour
--grey-100 #f8f8fb
--grey-300 #eeeef2
--grey-500 #b3b3b6
--grey-700 #737376
--grey-900 #303033
--grey-12 #121212
--font-default 'InterVariable', system-ui
--font-monospace 'Inconsolata', monospace, monospace
// SIDEDISH: we add a `site-loading` class to `html` to hide content while
// it loads. also create a pseudo element loader/spinner in the mean time
:root.site-loading
#delform
display flex
align-items center
justify-content center
height 70vh
&::before
content ''
display block
border .5rem solid grayscale(ss21primary)
border-top-color ss21primary
border-radius 50%
width 10rem
height 10rem
margin auto
animation loading 1s infinite
#header-bar,
#bannerCnt,
.navLinks,
.board,
.pagelist
display none i
@css {
@keyframes loading {
to {
transform: rotate(359deg);
}
}
}
// let's hide stuff we don't need: ads!
// first, let's keep `!important` away as to not pollute scope
.center,
.arc-ads,
.adl,
.danbo-slot,
[hidden]
display none i
// and while we're here:
// 1. mobile elements
// 2. a bunch of elements we never use also have `.desktop`, so that's convenient
// 3. all `hr` elements, bar the unread line
// 4. ccd0 caters for mentally challenged people who can't manage to start a thread
// 5. the original post form (use the qr)
// 6. checkboxes next to posts (use the menu)
// 7. ad pleas (buy a 4chan pass, friend)
// 8. the '>>' to the left of posts when reply hiding isn't on
.mobile,
.desktop:not(#bannerCnt, .postInfo, .postNum, .summary, .pagelist, #boardNavDesktopFoot),
hr:not(#unread-line),
.qr-link-container,
.postForm,
.postInfo > input,
.ad-plea,
.adt-800,
.adaps,
.sideArrows,
#navbotright,
#toggleMsgBtn // sometimes this leaks through, so we add it despite it having `.desktop`
display none
// as always, using tried and tested web frameworks and design systems to
// create a reset, reboot, and sensible base
// reset everything on `:root` as opposed to `body`
// 1. use google web fonts, or `system-ui`
// 2. set a relative baseline `font-size` and `line-height` for easy math
// 3. default `color` and `background` to help us determine light|dark mode
// 4. make text render a little nicer
// 5. always apply a scrollbar regardless of page height
:root
font-family var(--font-default)
font-size 1rem
line-height 1.5
color var(--text-primary-on-background)
background-color var(--background-secondary)
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
//scroll-behavior smooth
text-rendering optimizeLegibility // XXX: despite https://marco.org/2012/11/15/text-rendering-optimize-legibility - inter ui needs it for ligatures
overflow-y scroll
overflow-wrap anywhere
//word-break break-word // XXX: might not even work tbh
box-sizing border-box
transition color .25s, background-color .25s
accent-color ss21primary
if ss21readingMode == ss21dark
color-scheme dark
@css {
:root .navLinks {
--is-nws: brown;
background-color: var(--is-nws, var(--primary)) !important;
}
:root.ws .navLinks {
--is-nws: initial;
}
}
// XXX: https://css-tricks.com/fixing-smooth-scrolling-with-find-on-page/
:root:focus-within
scroll-behavior smooth
// https://github.com/csstools/sanitize.css/blob/main/sanitize.css#L54
// this doesn't actually work but?
:where(body)
block-size -moz-available
block-size -webkit-fill-available
block-size stretch
min-height 100vh
//font-size ss21fontSize
// let's reset `box-sizing` so that when we say `1rem`, we mean it
// http://www.paulirish.com/2012/box-sizing-border-box-ftw/ along with
// https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*,
::before,
::after
box-sizing inherit
// it is bad practice/UX to not give focused elements visual feedback (not
// to mention against the law), but there is a 0% chance anyone with visual
// impairments would be using a userstyle
// XXX: i actually want to support this
:focus
outline 0
//box-shadow 0 0 0 .25rem alpha(lighten(ss21primary, 50%), .25)
//isolation isolate
:focus-visible
box-shadow 0 0 0 .25rem alpha(lighten(ss21primary, 50%), .25)
// XXX: should only apply when using keyboard
:root.keyboard-focus .postContainer:focus-within .post
background-color mix(ss21primary, ss21BackgroundElevated, 7%)
box-shadow 0 0 0 .25rem alpha(lighten(ss21primary, 50%), .25)
// 4CHANX: adds `.keyboard-focus` to `html`
// :root:not(.keyboard-focus) a { outline: none; }
// https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
// https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
//[tabindex="-1"]:focus:not(:focus-visible)
// outline 0 !important
// make highlighted elements match the theme. also let's appreciate the fact
// that after 10 years, we no longer need 2 separate declarations here
// https://bugzilla.mozilla.org/show_bug.cgi?id=509958
// https://caniuse.com/#feat=css-selection
::selection
background-color alpha(lighten(ss21primary, 25%), .1)
// give scrollbars in webkit browsers some non-standard love
// https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
// and hopefully one day, a standard is agreed upon
// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars
// https://drafts.csswg.org/css-scrollbars-1/
/*
::-webkit-scrollbar
width .5rem
height .5rem
background-color var(--grey-500)
::-webkit-scrollbar-thumb
background-color var(--grey-700)
*/
// address `font-weight` set incorrectly in all browsers. while we're here we
// set other elements we want to `bold`, too
b, strong, th
font-weight 700
.subject, .name
font-weight 700
// XXX: potentially expensive override to inline-styled elements to ensure
// consistent styling
[style*="weight:"]
font-weight 700 i
// reset the default margin given to these elements
blockquote,
body,
h1, h2, h3, h4, h5, h6,
p
margin 0
// in the off chance that an announcement is done with the heading elements,
// at least make it look nice
h1, h2, h3, h4, h5, h6
line-height 1.2
font-weight 700
margin-bottom .5rem
h1
font-size calc(1.375rem + 1.5vw)
h2
font-size calc(1.325rem + .9vw)
h3
font-size calc(1.3rem + .6vw)
h4
font-size calc(1.275rem + .3vw)
h5
font-size 1.25rem
h6
font-size 1rem
p
margin-bottom 1rem
// ensure the correct `font-size` in all browsers
:where(small)
font-size .875em
// prevent `sup` and `sub` elements from affecting line height
sup,
sub
font-size .75em
line-height 0
vertical-align baseline
position relative
sup
top -.5em
sub
bottom -.25em
// opt for `inherit` being used because very few `a` elements are a consistent
// colour, and also remove all underlines, if enabled
// XXX: linkify links should be the option, not the exception
a
color inherit
text-decoration none
transition color .25s
// the exception being linkified links
.linkify,
//:where(.globalMessage) :where(a):not(.fa), // XXX until theres another global announcement, there is no way this shit is good
.postMessage > a[href*="//"]:not([href*="boards.4chan.org"]),
.postMessage a[href*="boards.4chan.org"]:not(.quotelink):not(.hashlink)
text-decoration solid underline
text-underline-offset 2px // XXX: 1px suddenly stopped looking good?
unless ss21underlineLink
text-decoration none
color ss21primary
&:hover
color shade(ss21primary, 15%)
linkify-icons($icon, $icon2 = null)
content ''
display inline-block
width 1em
height 1em
vertical-align -.125em
margin-right .25rem
background-position 50% 50%
background-repeat no-repeat
if $icon2
background-image $icon, $icon2
else
background-image $icon
// icons are, for the most part, grabbed from font awesome
.linkify
&.youtube::before
linkify-icons(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23f00' d='M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z'/%3E%3C/svg%3E"), radial-gradient(white .25em, transparent .25em))
&.twitter::before
linkify-icons(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231da1f2' d='M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z'/%3E%3C/svg%3E"))
&[href^="https://x.com"]::before
linkify-icons(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='" + hsl(ss21OppColour) + "' d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E"))
&.vocaroo
color #CAFF70 i
&[href^="https://github.com"]::before
linkify-icons(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E"))
&[href*="reddit.com"]::before
linkify-icons(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FF5700' d='M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256L37.1 512c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zM349.6 153.6c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34c-34.5 3.7-61.4 33-61.4 68.4l0 .2c-37.5 1.6-71.8 12.3-99 29.1c-10.1-7.8-22.8-12.5-36.5-12.5c-33 0-59.8 26.8-59.8 59.8c0 24 14.1 44.6 34.4 54.1c2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54c0-33-26.8-59.8-59.8-59.8c-13.7 0-26.3 4.6-36.4 12.4c-27.4-17-62.1-27.7-100-29.1l0-.2c0-25.4 18.9-46.5 43.4-49.9l0 0c4.4 18.8 21.3 32.8 41.5 32.8zM177.1 246.9c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6s-31.4-8.8-30.4-30.5s15.4-38.3 32.1-38.3zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9 .8-6.2 3.9-6.5c18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1 .3 5.1 3.6 3.9 6.5z'/%3E%3C/svg%3E"), radial-gradient(white .45em, transparent .45em))
&.twitchtv::before
linkify-icons(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23a970ff' d='M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z'/%3E%3C/svg%3E"))
// correct some weird browser inconsistencies in font inheritance, and while
// we're here, set tripcodes and user ids to also use a monospace font
pre,
code,
kbd,
.postertrip,
.posteruid
font-family var(--font-monospace)
font-size 1em
.prettyprint
font-size .875rem
-webkit-font-smoothing subpixel-antialiased
white-space pre-wrap
word-wrap normal
word-spacing normal
word-break normal
-moz-tab-size 4
tab-size 4
hyphens none
overflow auto // don't allow content to break outside
padding .125rem .25rem
margin 0 // remove browser default
display inline-block
vertical-align middle
max-width 100%
transition color .25s, background-color .25s
// 4chan uses google prettify to format [code] tags on /g/
// MIT License; github.com/jmblog/color-themes-for-google-code-prettify
// XXX: this can be cleaned up, and should apply to `kbd` and other `pre` too
if ss21readingMode == ss21dark
.prettyprint
color #f5f7ff
background-color #202746
.kwd
.typ
color #6679cc
.com
color #6b7394
.tag
color #c94922
.atn
color #c76b29
.str
.atv
color #ac9739
.lit
.dec
color #c76b29
else if ss21readingMode == ss21light
.prettyprint
color #202746
background-color #f5f7ff
.kwd
.typ
color #6679cc
font-style italic
.com
color #202746
.tag
color #c94922
.atn
color #c76b29
.str
.atv
color #22a2c9
.lit
.dec
color #c76b29
// fix spacing of media objects, and make them responsive by default
// XXX: `video` controls will appear slightly off the bottom of the video
// when height is not a rounded amount
embed,
img,
video
display block // was `vertical-align: middle`
height auto
max-width 100%
// `audio` separate, because it doesn't need to be responsive
:where(audio)
vertical-align middle
width 100%
:where(svg)
height auto
max-width 100%
// remove the default border given to `iframe`
iframe
border 0
vertical-align middle
// prevent double borders in tables
table
border-collapse collapse
border-spacing 0
// reset generic form elements to look consistent across browsers
// XXX: https://bugzil.la/1536148 - except `option` in Firefox, which due to
// how they "render the process" cannot accept web fonts
button,
input,
option,
select,
textarea
font inherit
color inherit
margin 0
button:not(.watch-thread-link),
input[type="button"],
input[type="submit"],
a.replylink,
:root.oneechan .options-button
font-size .875rem
line-height 1
letter-spacing .09em
text-transform uppercase
position relative
display inline-flex
align-items center
justify-content center
//vertical-align middle
padding 0 .75rem
border 0
min-height 2.25rem
min-width 4rem
borderRadius()
cursor pointer
user-select none
transition all .25s
if ss21buttonStyle == 1
background-color ss21primary
tc(ss21primary, high)
z-depth(2)
&:hover
background-color mix(#fff, @background-color, 10%)
&:active
background-color mix(#fff, @background-color, 12%)
transform translateY(1px)
else if ss21buttonStyle == 2
color ss21primary
background transparent
border 1px solid ss21primary
&:hover
background-color rgba(ss21primary, 0.1)
&:active
background-color rgba(ss21primary, 0.25)
transform translateY(1px)
else if ss21buttonStyle == 3
color ss21primary
background transparent
&:hover
background-color rgba(ss21primary, 0.1)
&:active
background-color rgba(ss21primary, 0.25)
transform translateY(1px)
else if ss21buttonStyle == 4
background-color ss21primary
text-transform none
border-radius 32rem
height 40px
padding 0 24px
&:hover
background-color mix(#fff, @background-color, 10%)
&:active
background-color mix(#fff, @background-color, 12%)
a.replylink
min-height initial
height 1.5rem
margin-left .25rem
// okay, so there are only a handful of input fields used in 4chan x anyway:
// index search field (with 3 select dropdowns), qr, and the settings
.field,
:root.is-search .commentForm input[name='q']
display inline-block
background inherit
padding .5rem .75rem
border 1px solid alpha(ss21OppColour, .33)
borderRadius()
transition border .25s, box-shadow .25s
&:hover
border-color alpha(ss21OppColour, .8)
&:focus
border-color ss21primary
box-shadow 0 0 0 .2rem alpha(ss21primary, .25)
if ss21textStyle == 2
.field
background var(--ss21-dc-inverseOnSurface)
border 0
border-bottom-left-radius 0
border-bottom-right-radius 0
border-bottom 1px solid var(--ss21-dc-outline)
// checkboxes used to be pseudo elements, but generic styling is pretty easy and reliable now
// HEAVILY inspired from bootstrap, gov.uk, and carbon
input[type="checkbox"]
width 1.25em
height 1.25em
background-repeat no-repeat
background-position center
background-size contain
border 2px solid alpha(ss21OppColour, .33)
borderRadius()
-webkit-appearance none
-moz-appearance none
appearance none
vertical-align text-top
margin-right .25rem
cursor pointer // opinionated
transition all .25s
&:hover
border-color alpha(ss21OppColour, .8)
&:active
filter brightness(90%)
&:focus
outline 0
box-shadow 0 0 0 .2rem alpha(lighten(ss21primary, 15%), 25%)
&:checked
background-color ss21primary
if contrast(#fff, ss21primary).ratio >= 4.5
$tick = "%23fff"
else
$tick = "%23000"
background-image url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='" + $tick + "' d='M21 7L9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59 21 7z'/%3E%3C/svg%3E")
border-color darken(ss21primary, 33%)
// XXX: dropdown arrow sometimes covers writing, may need more padding on right
// XXX: the border needs to remain transparent OR opaque, cannot go between each
select
display inline-block
tc(ss21BackgroundColour, high)
background-color var(--background-primary)
background-repeat no-repeat
background-position bottom 1rem right .5rem
background-size 16px 12px
background-image url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='" + alpha(ss21OppColour, .54) + "' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'%3E%3C/path%3E%3C/svg%3E")
padding .5rem 1.75rem .5rem .75rem
border 1px solid alpha(ss21OppColour, .33)
borderRadius()
transition border-color .25s, box-shadow .25s
word-wrap normal
-webkit-appearance none
-moz-appearance none
appearance none
&:hover
border 1px solid alpha(ss21OppColour, .8)
&:focus
border 1px solid alpha(tint(ss21primary, 33%), .9)
box-shadow 0 0 0 .25rem alpha(lighten(ss21primary, 50%), .25)
textarea
background inherit
padding .5rem .75rem
border 1px solid alpha(ss21OppColour, .33)
borderRadius()
resize vertical // `textarea` should only resize vertically as to not break their containers
transition border .25s, box-shadow .25s
&:hover
border-color alpha(ss21OppColour, .8)
&:focus
border-color ss21primary
box-shadow 0 0 0 .2rem alpha(ss21primary, .25)
// generic styling for all disabled elements using the pseudo selector
:disabled
color var(--grey-900)
background-color var(--grey-500)
border 1px solid var(--grey-700)
//cursor not-allowed
pointer-events none
opacity .5
// make `label` elements appear clickable, because that's our opinion
// https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b
// https://fvsch.com/styling-buttons/
label
cursor pointer
// make `fieldset` behave more like a block element
fieldset
min-width 0
padding 0
border 0
margin 0
// give `placeholder` text a specific colour, and ensure it renders
// consistently across browsers
::placeholder
color var(--text-hint-on-background)
opacity 1
// correct cursor style of +/- buttons in safari for `input[type="number"]`
:where(input[type="number"])
-moz-appearance textfield
&:hover,
&:focus
-moz-appearance number-input
// removes the 'clear' button that chrome adds to `input[type=search]` elements
::-webkit-search-decoration,
::-webkit-search-cancel-button
-webkit-appearance none
// remove inner padding and border of buttons in firefox
::-moz-focus-inner
padding 0
border-style none
// ensure the only `hr` you will see, `#unread-line`, is styled consistently
// across browsers and also set to green (as opposed to red)
:where(#unread-line)
box-sizing content-box
height 0
overflow visible
border 0
border-top 1px solid ss21green
margin 1rem 0
// `s` is used for [spoiler] text. occasionally, this has issues with
// links and quoted text within spoilers
s,
s > .quote,
s > a
text-decoration none
color var(--grey-12) i
background-color var(--grey-12) i
transition color .25s
s:hover,
s:hover .quote,
s:hover a
color var(--grey-100) i
/*
<blockquote class="postMessage" id="m561357917"><a href="#p561357657" class="quotelink">>>561357657</a><br>Compare pic related to his Dx2 model which looks great<br><s><a class="linkify" rel="noreferrer noopener" target="_blank" href="https://static.wikia.nocookie.net/megamitensei/images/9/95/Metatron_in_DX2.png/revision/latest?cb=20191110121222">https://static.wikia.nocookie.net/m<wbr>egamitensei/images/9/95/Metatron_in<wbr>_DX2.png/revision/latest?cb=2019111<wbr>0121222</a></s></blockquote>
<blockquote class="postMessage" id="m82226876">/mkg/ - God damn it dude I'm so fucking sick of Cherry MX edition<br><br><span class="quote">>Keyboard recommendation template</span><br><a class="linkify pastebin" rel="noreferrer noopener" target="_blank" href="https://pastebin.com/n220xk9V">https://pastebin.com/n220xk9V</a> <a class="embedder" href="javascript:;" data-key="Pastebin" data-uid="n220xk9V" data-options="undefined" data-href="https://pastebin.com/n220xk9V">(<span>un</span>embed)</a><br><br><span class="quote">>Where to buy keyboards</span><br><a class="linkify" rel="noreferrer noopener" target="_blank" href="https://www.alexotos.com/keyboard-vendor-list/">https://www.alexotos.com/keyboard-v<wbr>endor-list/</a><br><a class="linkify" rel="noreferrer noopener" target="_blank" href="https://www.mechmap.tech/themap">https://www.mechmap.tech/themap</a><br><a class="linkify" rel="noreferrer noopener" target="_blank" href="https://keycaplendar.firebaseapp.com">https://keycaplendar.firebaseapp.co<wbr>m</a><br><br><span class="quote">>Charts!</span><br><a class="linkify" rel="noreferrer noopener" target="_blank" href="https://kiibohd.com">https://kiibohd.com</a><br><br><span class="quote">>QMK</span><br><a class="linkify" rel="noreferrer noopener" target="_blank" href="https://config.qmk.fm/">https://config.qmk.fm/</a><br><a class="linkify" rel="noreferrer noopener" target="_blank" href="https://beta.docs.qmk.fm">https://beta.docs.qmk.fm</a><br><br>Last thread: <a href="https://boards.4channel.org/g/thread/82209582/" target="_blank">https://boards.4channel.org/g/threa<wbr>d/82209582/</a></blockquote>
<blockquote class="postMessage" id="m561402095"><a href="#p561401769" class="quotelink">>>561401769</a><br>This is unironically him trying to sweep shit under the rug lmao<br><a href="#p561401960" class="quotelink">>>561401960</a><br>There's archived threads in which he got mass banned, I think this was the first mass ban he scored <a class="linkify quotelink" rel="noreferrer noopener" target="_blank" href="https://arch.b4k.co/v/thread/499343579/#q499358153" data-board-i-d="v" data-thread-i-d="499343579" data-post-i-d="499358153">https://arch.b4k.co/v/thread/499343<wbr>579/#q499358153</a><br>Look for how many posts got deleted</blockquote>
<blockquote class="postMessage" id="m4662311"><a href="#p4662298" class="quotelink">>>4662298</a><br><a href="//boards.4chan.org/r/#s=eddit" class="quotelink">>>>/r/eddit</a></blockquote>
<blockquote class="postMessage" id="m563068435"><s>>Is an asshole to you throughout the game<br><span class="quote">>Tries to kill you and won't tell you why</span><br><span class="quote">>Gets all your friends to betray and try to kill you</span><br><span class="quote">>You still hang out with your "friends" like nothing they don't even bother to tell you why they want you dead and you're such a loser that you're fine with that and them continuing to try to oppose you.</span><br><span class="quote">>You are also fine with her killing your dad, being free to kill you along with your friends trying to kill you.</span><br></s><br><br>No sane humans acts like this.<s><br>Yet you are all fine with it, do you enjoy your friends wanting to kill you and your family?</s><br>Explain.</blockquote>
<blockquote class="postMessage" id="m201302280"><s></s><a class="linkify" rel="noreferrer noopener" target="_blank" href="https://thetvapp.to/tv/hbo-east-live-stream/"><s>https://thetvapp.to/tv/hbo-east-liv<wbr>e-stream/</s></a> ep 4 right now</blockquote>
*/
// 4CHANX: technically not a reset, but this is the only time we mention spoilers
// so we're putting this here. if the reveal spoilers setting is on, support it
:root.reveal-spoilers
s,
s > a
color var(--grey-100) i
.removed-spoiler
&::before
content '[spoiler]'
&::after
content '[/spoiler]'
// https://github.com/stylus/stylus/issues/2750#issuecomment-1378498822
buildL4(type, args...) {
st1 = join('', ':', type, '(', join('\, ', args), ')')
selector(st1)
}
:root.fourchan-xt .icon
display none
icon-style()
if ss21iconFont == 1
display inline-flex
font-family bootstrap-icons
font-style normal
font-size 1.5rem
font-weight normal
font-variant normal
text-transform none
line-height 1
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
visibility visible // added from 4chan x
else if ss21iconFont == 2
font-family 'Material Symbols Outlined'
font-weight normal
font-style normal
font-size 1.5rem
line-height: 1
letter-spacing normal
text-transform none
display inline-flex // better vertical alignment
justify-content center
align-items center
white-space nowrap
word-wrap normal
direction ltr
-webkit-font-feature-settings 'liga'
-webkit-font-smoothing antialiased
color inherit // generally not explicity set, but should be
visibility visible // added from 4chan x
font-variation-settings 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24
:root.fourchan-xt
.shortcut > a,
#thread-watcher .refresh,
.menu-button,
.hide-thread-button,
.hide-reply-button,
.show-thread-button span,
.show-reply-button span,
.download-button,
#qr-oekaki-button
#qr-filerm,
#url-button,
#paste-area,
#custom-cooldown-button,
#dump-button
font-size 0
&::after
icon-style()
// XXX: ICONS! by no means a perfect implementation due to the limitations
// and the "workarounds" used in order to get icons to appear
// XXX: end of 2023 note, this does not support 4chan XT as it removes font-awesome
$icons,
.fa::after,
.menu-button::after,
.n-pu::after,
.contact-links::after,
#navlinks a::after,
.postJumper a::after,
#index-rev::after,
.indicator::after,
.pagelist :is(.prev, .next) a::after,
//.pagelist .next a::after,
.watch-thread-link::after,
#index-search-clear::after,
.has-submenu::after,
.show-announcement::after,
.report-link::after,
.download-link::after,
.copy-text-link::after,
.qr-preview-spoiler::after,
.checkbox-letter::after,
#add-post::after,
.gal-start::after,
.gal-stop::after,
.gal-close::after,
.close::after,
.jump::after,
:is(.file--video, .file--gif, .file--pdf):not(.expanded-image) > .post > .file > .fileThumb::after,
.file--sound:not(.expanded-image) > .post > .file > .fileThumb > .mobile::after
.native-settings::after,
.post--dubs .postNum a:nth-child(2n)::after,
span.fileThumb::before,
.summary::before,
.ss21--board-drawer-toggle,
.ss21--download-all,
.page-num--icon::after
icon-style()
:root.fourchan-xt .spin::after,
.fa-spin::after
animation spin 2s infinite linear
:root.fourchan-xt .close
font-size 0 i
// XXX: we use @css to get rid of the prefixes added by stylus
@css {
@keyframes spin {
0% {