saxamaphone69 / ss21

a fresh attempt at a 4chan userstyle

ss21

a self-centered, fresh attempt at (user)styling 4chan

following the success (or lack of) from curabitr and xl, ss21 provides a fresh and clean userstyle for use with either ccd0's 4chan x or tuxedotako's typescript fork in 2019, 2020, 2021, 2022, 2023, 2024!

created by saxamaphone "sax" !3.saxN0DHY, who has been making userstyles for 4chan since 2009 with styles such as 3 Shades of 4chan (which only exists as Midnight Caek in App/OneeChan now), curabitr, and xl

ss21 is a fresh attempt to make a userstyle that looks radically different from the typical App/OneeChan aesthetic of today, utilising modern web standards and bleeding edge CSS technologies

about

feature	detail
documented	looking through the original ss21 file contains comments that explain what things do and why they are there
variables	thankfully, we now use the preprocessor .styl within stylus for built in functions not previously possible
sidedish	unlike most userstyles, ss21 requires a companion userscript for additonal rice and features not found in 4chan X
filters	through the use of 4chan X's filtering system, additional classes are added to certain posts for further enhancements
web fonts	using @import, we can load fonts from the web, no longer requiring downloaded and locally installed fonts
rebase	utilising code from well-established web projects such as bootstrap, carbon, and the material design guidelines, elements are rendered consistently and correctly across browsers

it should be noted that ss21 does not function with the default 4chan extension or App/OneeChan

it is highly recommended you play with the settings within the userstyle

installation

this userstyle is currently being actively developed for chrome first, with firefox as an after thought. you will require stylus (don't use stylish anymore), a userscript manager such as tampermonkey, and a blocking extension such as ublock origin.

1. install ss21.user.styl (stylus should prompt you to install)
2. install sidedish.user.js (your userscript manager should prompt you to install)
3. add the blocking filters (to your blocking extension) and 4chan x filters (to 4chan x) below
4. cross your fingers and hope it works!

blocker filters

a blocker is used to not only hide ads, but also block some other stuff to save on network requests. go to your blocker-of-choice options, and locate where you can add your own filters. add the following:

4chan.org##script:inject(abort-current-inline-script.js, String.fromCharCode)
@@||4chan.org^*$csp=default-src 'self' * data: 'unsafe-inline' 'unsafe-eval'

4channel.org##script:inject(abort-current-inline-script.js, String.fromCharCode)
@@||4channel.org^*$csp=default-src 'self' * data: 'unsafe-inline' 'unsafe-eval'

*//s.4cdn.org/js/prettify/prettify.*.css
*//s.4cdn.org/css^$domain=boards.4chan.org
*//s.4cdn.org/css^$domain=boards.4channel.org
*//s.4cdn.org/image/title/*
*//s.4cdn.org/image/contest_banners/*
!*//s.4cdn.org/js/core.min.*.js
*//s.4cdn.org/js/extension.min.*.js

@@||s.4cdn.org/css/flags.*.css
@@||s.4cdn.org/css/painter.*.css
@@||s.4cdn.org/css/yui.css
@@||s.4cdn.org/css/global.*.css
@@||s.4cdn.org/css/error.css
@@||4cdn.org$xmlhttprequest,domain=4chan.org
@@||4cdn.org$xmlhttprequest,domain=4channel.org

essentially:

• block those bitcoin mining ads hiroshimoot uses
• all 4chan css, with a few exceptions listed at the end
• title and contest banners (technically skippable)
• 4chan-JS code that isn't needed, as we use 4chan x

4chan x filters

ss21 makes use of the highlighting feature in 4chan x to give certain posts extra styling. if you'd like to experience ss21 as intended, add these filters:

section	filter
post numbers	/(\d)\1$/;highlight:post--dubs;top:no;boards:s4s
capcodes	/Founder$/;highlight:poster--founder;op:yes /Admin$/;highlight:poster--admin;op:yes /Mod$/;highlight:poster--mod;op:yes /Manager$/;highlight:poster--manager;op:yes /Developer$/;highlight:poster--developer;op:yes /Verified$/;highlight:poster--verified;op:yes
pass dates	/./;highlight:poster--pass;top:no;
subject	/./;op:only;top:no;highlight:thread--subject /(.){40,}/;op:only;top:no;highlight:thread--subject-long
comment	/^\W*(\w+\b\W*){50,90}$/;op:only;top:no;highlight:thread--long /^\W*(\w+\b\W*){91,149}$/;op:only;top:no;highlight:thread--extra-long /^\W*(\w+\b\W*){150,}$/;op:only;top:no;highlight:thread--silly-long /(?:[^\n]*(\n+)){5,}/;op:only;top:no;highlight:thread--new-lines
filenames	/.webm$/;highlight:file--video;top:no; /.gif$/;highlight:file--gif;top:no;
image dimensions	/\d{4}x/;highlight:file--wide;top:no; /x\d{4}/;highlight:file--high;top:no;
filesize	/MB/;op:yes;highlight:file--huge;top:no;

reporting bugs and feature requests

feel free to open an issue for any bugs or requests here on the issue tracker

licensing

code released under CC-BY-SA-4.0
contains code from https://github.com/ryanmorr/ready
icons provided by https://www.material.io/resources/icons/

ss21's Issues

Bootstrap icons don't work with navigation rail setting

further to do and wishlist

• address issue with full board list in header (either scrollable or make it on 2 lines)
• address specificity with regards to checkboxes in settings
• thread watcher buttons, and thread watcher in general
• qr buttons, and potentially qr in general
• general alignment (paddings, margins, line-heights, vertial-alignments)
• footer
• :visited styles for links

userscript

• css isnt always fully removed
• scolling class isnt always added

read me is a joke

pls reformat

improve fresh install experience

fresh install and firefox quirks

• custom css is enabled by default, causes the title to not be circular on fresh install
• specify how to install style on firefox

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500|Roboto+Mono|Material+Icons');

@-moz-document domain('boards.4chan.org') {
/*
ss16 goes here...
*/
}

things that dont work in firefox

• placeholder for index search is grey as opposed to white
• svg icons (might need to be data URI)
• padding on the bottom of #fourchanx-settings when scrolled
• pseudo elements cannot be applied to input elements (.ua-gecko usage incoming)

also

i don't know if it was portable firefox, but holy crap, using the inspector at the same time created a massive amount of lag and hung the browser every 5 seconds

and you can't actually edit the userstyle because it refuses to open, due to being so large

Post Navigation Rail Update; Catalog display

Post the navigation rail update, the catalog threads are displayed differently, I'm not sure if it's user error on my part, but I did look through the settings and I do not think I've overlooked a setting for how threads are displayed.

The above picture is the latest user style version 2.2.4; The below the previous before navigation rail Version 2.2.1

In my opinion, 2.2.4 looks less appealing on certain boards with long-running threads or text intensive opening posts and was wondering if the option to return to the previous more uniform style was available or if it's a toggle I did overlook.

Not a big issue, as one can give up the sleekness of the new navigation rail and simply revert to 2.2.1, I was just curious if it's a design decision or if I've overlooked something obvious.
Thanks for creating and sharing the style.

Clean up stylus code

https://franktheprogrammer.com/blog/html-css/using-selectors-in-stylus-css-pre-processor
https://stylus-lang.com/docs/selectors.html

probably could take advantage of this for a few things

base ss16 is too large

right now, ss16 is ~290 KB

compressed, it gets down to ~250 KB

circular (book and medium weight) is ~120 KB on its own

included banners (/fit/ and /fa/) are ~90 KB on their own

removing the banners brings ss16 to ~200 KB, and ~160 KB compressed

options:

• by default, have no included banners (preferred option)
• use a different grotesque font, or load circular from another resource
• remove both (ss16 goes down to ~80 KB, ~45 KB compressed)

to-do before 2.1.0 release

initial list

• oneechan support
• 4chan x 100% support
• icons/header links slightly transparent unless hovered/active
• catalogue (hover to expand the card / replies)
• consolidate code
• lint etc.
• comment code appropriately
• @media
• full usercss variable support

officially coming soon^tm

comments list

• webm on .io site needs to be trimmed
• support retina display (this is currently solved by blocking js on 4chan)

• .postInfo { padding-right: 2.5rem; ) means that menu and hiders wont appear over long subjects or multiple backlinks
• .postInfo size changes 3 times, depending on content - not to mention when the subject overflows:

• with the domain split, the bottom full board list didn't make the switch

getting the list from the 4chan homepage would be cool

• oh, 2.1.0 will probably feature full customisation via usercss settings (full width replies, colours, padding and margin being either 'comfortable' or 'compact', and whatever else should be user defined)

• post info/backlinks change size when they are inlined, probably because i make .postMessage { font-size: 1.1rem; } or whatever it is

• sidedish needs a minified version for publishing

• #archive-board-select should be moved to under the legend as opposed to the side

• when thread watcher/qr is active - the icon should reflect that

• normal backlinks look whack

• have sidedish.user.js manage:

  • oneechan support (blocks the default styles, should have a message that appears)
  • no 4chan x support
  • 4chan extension support

• specify that font and banners need to be installed with the https://boards\.4chan(?:nel)?\.org.* regex, or include these in mozilla format instead and have stylus import

other issues?

food for thought:

• material icons v42 woff2 file from google: 57 KB, takes ~40 ms

  • now, if we were to only grab the SVGs of the icons we needed, it would be about ~10 KB for ~40 icons
  • this would add 10 KB to ss16, even minified (right?)
  • should still be able to control colour/size via custom properties (right?)

• custom properties like ``--text-hint-on-background` or whatever aren't used

  • using stylus functions would eliminate the need for --red-50/300/500/700

userscript

while you'll never write that 4chan x + c4 alternative, you can at least attempt to add some quality of life improvements to ss16 and 4chan x

ideas

• DAMS toggle (and ensure ss16 still looks good)
• add class when user hasn't got 4chan x running or has oneechan running, and display a notification / warning message(s)
• improve search aesthetics (stop using #id_css for everything)

Selector Performance

https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/

After reading this article, ran it through the Edge DevTools.

Keep it mind that some of the selectors are actually from uBlock.

.stub ~ *
:where(b, strong, th, legend, .subject, .name)
.fileText .file-info:has(.fnswitch)
:where(button, input, option, select, textarea)

On page load seem to be the most expensive.

Other notable selectors are

::selection
*
::before
:disabled
:root
::after
::-webkit-scrollbar-thumb
::-webkit-scrollbar
.fileText .file-info a:has(> .fnswitch)
.globalMessage *
.catalog-post .postlnfo *
.pagelist .pages:not(.cataloglink) *
.catalog-post [class^="qmark"]
.fileText a
.file:hover .fileText
:root:not(.bottom-backlinks) .container.not(:empty)::before
#fourchanx-settings legend + *
.postNum > a:first-child
.catalog-post > .postInfo > :not(.subject):not(.nameBlock):not(.dateTime)
#qr .oekaki-bg > *
.stub ~ :not(.threadDivider)

Keep it mind this is with 4x CPU throttling, but faster CSS is faster CSS regardless of throttle.

Also to keep in mind is this appears to only really happen in threads with over 150 replies.

Noticings

• - OpenSettings event isn't fired by 4chan X, so removing the : from setting descriptions doesn't happen. Super minor and only happens if you JUST got 4chan X.
  
• - Blotter looks awful
• - Top backlinks are default, and in the addition to Material 3 buttons, .postInfo can get big
• - Default purple should be changed to Pantone 2023 #bb2649
• - Open in new thread FAB options are misaligned
  
• - New thread FAB should open in a new tab without needing to middle click, would need to detect when .summary is in this state
• - .summary doesn't wrap post and image numbers on expansion, or contraction
• - Clashes with .fileInfo on hover, always displayed, and card display
• - :focus when tabbing with on hover doesn't show, make it appear
• - Card display also gives posts a different colour background?
• - option don't inherit font
  
• - sidedish search curtain doesn't even work anymore?
• - hey im here in console when Settings opened...
• - Watch thread button on hover doesn't even do that
  
• - When no post filters, .identityIcon isn't shown
• - Default file formatting has the download button right near the filename (using gap here might be better than margin?)
  
• - Hide bottom board links disabled by default, either override/enforce or mention)
  
• - Buttons (to me) appear to be "off"
• - Catalogue "show replies" doesn't actually do anything? In both modes???
• - By default expand image on hover is enabled, and shows in the catalogue
• - Threads in catalogue mode are "off" because videos render around the same time margin calculations are done
• - grid-template-rows: masonry is under a flag, that's why it uses the
• - When masonry catalogue is on, the small/large option doesn't do anything so it could be hidden
• - Opening menu on post in catalogue is messed up (in default-esque) due to the "grow on hover"
• - Masonry mode results in (Firefox and Chrome) a very interesting bottom-of-page, but not much can be done
• - :root.catalog-mode #boardNavDesktopFoot {margin-top: 1000px} can be deleted
• - got a grid, going to masonry it in console when Settings opened...
  - [ - [
• progress element doesn't render correctly
• - scrollbar doesn't render consistently:
  
• - When only 1-3 threads are in the catalogue, they take full-width (which to be fair is what is coded, but it doesn't look good)
  
• - .navLinks behaves differently at narrow resolutions
• 
• - Suggest users change quote backlinks, file info formatting
• - Unread favicon section looks bad (Firefox and Chrome)
• 
• - Depending on width, the spinning 4chan text can overlay footer info
  
• Firefox shows number arrows by default?
• - Does Werk Tyme even work with ss21? Let alone in catalogue
  
• full board overflow doesn't feel the same
  
• never noticed how big the spacing is between #shortcuts
• Default ss21 options are stuck in 2020
• Speaking of ss21 options, finally support anime "girls"

import allowed in user css now

update everything accordingly

[Minor issues]4chan's new captcha & Dark mode

(My blocker-of-choice is uBlock Origin)
(Browser is Firefox ver 89.0.2)

Blocker

New captcha won't load unless
[Blocker filter]
*//s.4cdn.org/js/core.min.*.js
Is commented out; disabled in my filters

Dark mode

Dark mode's default colors obscure the new captcha entry text box.
this is the default light theme

this is how it looks in dark mode

The problem is the text in the text box becomes unreadable with the default settings, you can still use it and post fine, but you won't be able to see what you type in it.
if you change the ss21TextPrimary color

you'll be able to see what you're typing

but this comes at the expense of changing a lot of the colors you'll see in a thread.

My guess is the box isn't inverting properly not sure, only seems to be an issue if you use default dark mode.

gnomed

https://boards.4chan.org/g/thread/67602305
https://boards.4chan.org/gd/thread/342071#p345035

clean up repo

• no longer intend on using github docs, so that folder can be removed
• remove old preview
• move "old" ss16 to another branch or a folder

too many display: none's

ss16.user.css currently has display: none written 55 times throughout the userstyle

given the stylelint formatting, this is roughly 1.26KB alone in repeated declarations

.hi {
  display: none;
}

.hi {
  display: none;
}

using csso (which brings it to a single declaration, albeit without whitespaces, and not accounting for longer selectors) brings it down to 17B

.hi{display:none}

just wondering if the trade off for size is affected by the tradeoff for (potential) speed

some issues to fix

https://boards.4channel.org/g/thread/79845120

79855007 (You)
thanks!
After some time with this setup I have to say it's pretty sweet but here are a few of my thoughts.
1.Perhaps the reading mode should be more adjustable, the light and dark mode are a little extreme in regards to contrast.
2. For the life of me I am unable to find a way to not have catalog items expand on mouse over which can get a bit annoying during navigation
3. Captcha does not display well in the reply bar and there is no way to scroll it into view unless the user uses mouse and keyboard on the bright side everything follows accessibility standards on that front.
4.setting text above 16pt in the stylus settings causes the following to display a bit poorly
Overall I'm impressed

79855926
Another two things I noticed is that the quick reply doesn't display the post in dark mode also the submit button doesn't follow the button style setting (not included in screenshot).

update urls

ss21 needs its meta information about, both the userstyle and userscript

Hide all names/tripcodes/IDs

What is the point of keeping this option if 4chan X has already got a forced anonymisation option ?

display contents

https://css-tricks.com/get-ready-for-display-contents/

https://codepen.io/rachelandrew/pen/oNYapVb

how did i forget about this

to do and what not

• header
• qr
• thread watcher
• settings
• make menus look better
• file name on hover is ruined by the blue, make it white and always expanded
• now that variables are supported, go back and change it around 👍