uBlock Origin cosmetic filters for twhl.info

Posted 7 months ago2023-12-26 00:23:26 UTC
Just wanna share some goodies I put into uBlock Origin (uBO). This is partly an exercise to explore uBO's CSS capabilities which I recently learned is a thing, so you can just use uBO for simple CSS injections without requiring a user style extension.
! exclamation mark at start of line marks a line comment
! similarly you can comment out entries below by prefixing with !

! 26/12/2023 https://twhl.info

! these 2 lines remove the background for a better Dark Reader result
||twhl.info/images/body-background.png$image
twhl.info##body:style(background-image:none !important)

! this makes textareas use monospaced font
! trust me, you're going to need this!
twhl.info##textarea:style(font-family:monospace !important)

! this compresses entity guide's attribute value lists into 3 columns
twhl.info##[id^="Attributes"] + ul > li > ul:style(columns:3)
twhl.info##[id^="Attributes"] + .card + ul > li > ul:style(columns:3)

! this compresses Render FX list into 6 columns
twhl.info##[id^="Attributes"] + ul > li:has-text(/^Render FX/) > ul:style(columns:6 !important)
twhl.info##[id^="Attributes"] + .card + ul > li:has-text(/^Render FX/) > ul:style(columns:6 !important)

! this hides the bloated TFC entity guide panels below most entity guide pages
twhl.info##[id^="Team_Fortress_Classic_only"]:upward(1):style(display:none !important)

! 2024-05-23 resize game icons in articles down from 32px
twhl.info##.inline img[src^="https://twhl.info/images/games/"]:style(width:20px)

! 2024-06-22 make overflowing card scrollable
twhl.info##.card:style(overflow:auto)

! 2024-02-14 https://twhl.info
! === wiki edit pages ===
! makes edit page fullwidth
twhl.info##form[action="https://twhl.info/wiki/edit"]:upward(1):style(max-width:100vw !important)
twhl.info##form[action="https://twhl.info/wiki/create"]:upward(1):style(max-width:100vw !important)
! reset original width for preview
twhl.info##.wikicode-input>:last-child:style(max-width:1140px; margin:auto)
! 2024-05-08 added fira code for code blocks
twhl.info##code, kbd, pre, samp:style(font-family:Fira Code,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace !important)
! 2024-06-10 side-by-side editor-preview adjust size of preview card
twhl.info##.full-screen-wikicode-editor .form-group:last-child .card:style(max-height: calc(100vh - 60px))
Here's a preview (Dark mode achieved with Dark Reader extension):
BeforeBefore
AfterAfter

3 Comments

Commented 7 months ago2023-12-26 00:37:32 UTC Comment #105789
Thanks for sharing!
- A fellow uBlock Origin and Dark Reader user
Commented 7 months ago2023-12-26 12:24:34 UTC Comment #105796
Just one small addition
! this keeps the snowflakes white when using Dark Reader
twhl.info##.header-desktop .snowfield .snowflake:style(background:#fff !important)
Commented 6 months ago2024-01-24 05:38:29 UTC Comment #105925
thanks i get it now

You must log in to post a comment. You can login or register a new account.