├── img └── browser-2023-03-04.png ├── previous ├── ss18-font.user.css ├── ss16boardbanner.css ├── ss18-catalog.user.css ├── ss19-catalog.user.css ├── curabitr2.user.css ├── curabitr1.user.css └── ss16.user.min.css ├── readme.md ├── ss21boardbanner.css └── sidedish.user.js /img/browser-2023-03-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/saxamaphone69/ss21/HEAD/img/browser-2023-03-04.png -------------------------------------------------------------------------------- /previous/ss18-font.user.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Arimo:400,700|Karla:400|Inconsolata:400|Material+Icons&display=swap'); 2 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # ss21 2 | a self-centered, fresh attempt at (user)styling 4chan 3 | 4 | ![screenshot of ss21 applied](img/browser-2023-03-04.png) 5 | 6 | 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](https://ccd0.github.io/4chan-x/) or [tuxedotako's typescript fork](https://github.com/TuxedoTako/4chan-xt) in ~~2019, 2020, 2021, 2022, 2023, 2024~~, 2025! 7 | 8 | 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 9 | 10 | 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 11 | 12 | ## about 13 | | feature | detail | 14 | | --- | --- | 15 | | **documented** | looking through the original `ss21` file contains comments that explain what things do and why they are there | 16 | | **variables** | thankfully, we now use the preprocessor `.styl` within stylus for built in functions not previously possible | 17 | | **sidedish** | unlike most userstyles, `ss21` requires a companion userscript for additonal rice and features not found in 4chan X | 18 | | **filters** | through the use of 4chan X's filtering system, additional classes are added to certain posts for further enhancements | 19 | | **web fonts** | using `@import`, we can load fonts from the web, no longer requiring downloaded and locally installed fonts | 20 | | **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 | 21 | 22 | ### another userscript? a.k.a. why you need `sidedish` too 23 | `sidedish` adds those few extra ricing options: 24 | - removes the `:` from the settings' option labels and their descriptions 25 | - adds a scrolling progress indicator to the header 26 | - posts that have 8 or more backlinks have an additional class added to them indicating 'hotness' for styling 27 | - wraps the numbers in thread summaries in `b` to make them stand out 28 | - swaps the post info and file elements in OPs for consistent styling across posts 29 | - strips the brackets around the page number in the post info on the index 30 | - gives 'tall' posts a discernible class for styling 31 | - approximates aspect ratio of files and adds a `data-aspect-ratio` attribute for styling 32 | - adds a shortcut to crudely download all files within a thread 33 | - adds an off-canvas navigation menu/drawer of all the boards 34 | - changes the text of the QR buttons so they can become icons 35 | - adds a `captcha-loaded` discernible class to the captcha for styling 36 | - resizes large quote previews to fix the viewport 37 | - stylises the bottom board list to match the footer aesthetic, including moving the pass link 38 | - adds a discernible class for index sorting mode 39 | - if enabled in `ss21`, provides a polyfill for `display: masonry` 40 | - adds a imperial/metric weight and length unit converter for /fit/ 41 | - adds OPs image/video to the banner for aesthetics 42 | 43 | it should be noted that `ss21` **does not** function properly with the default 4chan extension or App/OneeChan 44 | 45 | it is **highly** recommended you play with the settings within the userstyle 46 | 47 | ## installation 48 | this userstyle is currently being actively developed for chrome first, with firefox as an after thought. you will require [stylus](http://add0n.com/stylus.html) ([don't use stylish anymore](https://robertheaton.com/2018/08/16/stylish-is-back-and-you-still-shouldnt-use-it/)), a userscript manager such as [tampermonkey](https://tampermonkey.net/), and a blocking extension such as [ublock origin](https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm?hl=en). 49 | 50 | 1. install [`ss21.user.styl`](https://github.com/saxamaphone69/ss21/raw/main/ss21.user.styl) (stylus should prompt you to install) 51 | 2. install [`sidedish.user.js`](https://github.com/saxamaphone69/ss21/raw/main/sidedish.user.js) (your userscript manager should prompt you to install) 52 | 3. add the blocking filters (to your blocking extension) and 4chan x filters (to 4chan x) below 53 | 4. cross your fingers and hope it works! 54 | 55 | ### blocker filters 56 | a blocker is used to not only hide ads, but also block some other stuff to save on network requests. 57 | `danbo` and `pubfuture` ads are blocked via easylist. if you're not using that, you'll need to zap them on your own. 58 | go to your blocker-of-choice options, and locate where you can add your own filters. add the following: 59 | 60 | ``` 61 | ! ss21 Blocking Suggestions 62 | ! REQUIRED: Block all external stylesheets (Yostuba, Tomorrow, etc.) 63 | *//s.4cdn.org/css^$domain=boards.4chan.org 64 | *//s.4cdn.org/js/prettify/prettify.*.css 65 | 66 | ! REQUIRED: Block potentially harmful scripts inserted into 4chan 67 | @@||4chan.org^*$csp=default-src 'self' * data: 'unsafe-inline' 'unsafe-eval' 68 | 69 | ! This one used to work, or was needed for something, but I don't remember. Here for archives sake: 70 | ! 4chan.org##script:inject(abort-current-inline-script.js, String.fromCharCode) 71 | 72 | ! Add exceptions to certain stylesheets (flags, tegaki, etc.) 73 | @@||s.4cdn.org/css/flags.*.css 74 | @@||s.4cdn.org/css/painter.*.css 75 | @@||s.4cdn.org/css/tegaki.*.css 76 | @@||s.4cdn.org/css/yui.css 77 | @@||s.4cdn.org/css/global.*.css 78 | @@||s.4cdn.org/css/error.css 79 | 80 | ! RECOMMENDED: Block board banners (above /g/ - Technology) 81 | *//s.4cdn.org/image/title/*^$domain=boards.4chan.org,important 82 | 83 | ! RECOMMENDED: Block contest banners (advertisements to other boards) 84 | *//s.4cdn.org/image/contest_banners/*^$domain=boards.4chan.org,important 85 | 86 | ! OPTIONAL: Block snow.js, which adds snowflakes at Christmas 87 | *//s.4cdn.org/js/snow.js$script,important 88 | 89 | ! OPTIONAL: Block the Google Analytics script 90 | *//www.google-analytics.com/analytics.js^$domain=boards.4chan.org 91 | ``` 92 | 93 | essentially: 94 | - block those bitcoin mining ads hiroshimoot uses 95 | - all 4chan css, with a few exceptions 96 | - title and contest banners (technically skippable) 97 | 98 | ### 4chan x filters 99 | 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: 100 | 101 | | section | filter | 102 | | --- | --- | 103 | | **post numbers** | `/(\d)\1$/;highlight:post--dubs;top:no;boards:s4s` | 104 | | **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` | 105 | | **pass dates** | `/./;highlight:poster--pass;top:no;` | 106 | | **subject** | `/./;op:only;top:no;highlight:thread--subject`
`/(.){40,}/;op:only;top:no;highlight:thread--subject-long` | 107 | | **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` | 108 | | **filenames** | `/.webm$/;highlight:file--video;top:no;`
`/.gif$/;highlight:file--gif;top:no;` | 109 | | **image dimensions** | `/\d{4}x/;highlight:file--wide;top:no;`
`/x\d{4}/;highlight:file--high;top:no;` | 110 | | **filesize** | `/MB/;op:yes;highlight:file--huge;top:no;` | 111 | 112 | ## reporting bugs and feature requests 113 | feel free to open an issue for any bugs or requests here on the issue tracker 114 | 115 | ## licensing 116 | code released under CC-BY-SA-4.0
117 | contains code from https://github.com/ryanmorr/ready
118 | icons provided by https://www.material.io/resources/icons/ 119 | -------------------------------------------------------------------------------- /previous/ss16boardbanner.css: -------------------------------------------------------------------------------- 1 | @-moz-document regexp("https://boards\\.4chan(?:nel)?\\.org.*") { 2 | /* 3 | .board_ .boardBanner::after { 4 | background-image: url(''); 5 | } 6 | */ 7 | .board_g .boardBanner::after { 8 | background-image: url('data:image/jpeg;base64,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'); 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /ss21boardbanner.css: -------------------------------------------------------------------------------- 1 | @-moz-document regexp("https://boards\\.4chan(?:nel)?\\.org.*") { 2 | /* 3 | Use the following format as a guide: 4 | .board_[ENTER_THE_BOARD_LETTER_HERE].boardBanner::after { 5 | background-image: url(''); 6 | } 7 | */ 8 | .board_g .boardBanner::after { 9 | background-image: url('data:image/jpeg;base64,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'); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /previous/ss18-catalog.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name ss18 catalogue 3 | @namespace github.com/openstyles/stylus 4 | @version 1.0.0 5 | @description A new userstyle 6 | @author Me 7 | ==/UserStyle== */ 8 | 9 | @-moz-document domain("boards.4chan.org"), 10 | domain('boards.4channel.org') { 11 | /** 12 | * catalogue support 😂👌 13 | * what level of css archeticure are you on? 14 | * idk, bem or something 15 | * ha, pathetic; watch this 16 | * 17 | */ 18 | 19 | /** 20 | * if you switch from catalogue view to any other index view, the catalogue 21 | * specific elements remain in the dom, so need to hide them 22 | */ 23 | 24 | :root:not(.catalog-mode) .board [class^=catalog] { 25 | display: none; 26 | } 27 | 28 | .catalog-container > .hide-thread-button, 29 | .catalog-post .fileThumb, 30 | :root.bottom-backlinks .catalog-post > .container, 31 | .werkTyme-filename { 32 | display: none; 33 | } 34 | 35 | :root.catalog-mode .board { 36 | max-width: 100%; 37 | width: 100%; 38 | display: grid; 39 | grid-gap: 1rem; 40 | grid-auto-rows: 22.5rem; 41 | grid-auto-flow: dense; 42 | justify-content: stretch; 43 | padding: 0 1.5rem; 44 | margin-bottom: 2rem; 45 | } 46 | 47 | :root.catalog-mode .board .thread:last-of-type { 48 | margin-bottom: 0; 49 | } 50 | 51 | :root.catalog-mode .board.catalog-small { 52 | grid-template-columns: repeat(12, 1fr); 53 | } 54 | 55 | :root.catalog-mode .board.catalog-large { 56 | grid-template-columns: repeat(6, 1fr); 57 | } 58 | 59 | /** 60 | * by default, each thread takes up 1 column. we also have to remove the 61 | * `padding` and `margin` we give to normal threads 62 | */ 63 | 64 | .catalog-thread { 65 | position: relative; 66 | grid-column: span 1; 67 | padding: 0; 68 | margin-bottom: 0; 69 | /*overflow: hidden;*/ 70 | z-index: 2; 71 | max-height: 20rem; 72 | border-radius: 2px; 73 | box-shadow: 0 .125rem .25rem rgba(33, 33, 33, .25); 74 | transition: all .25s; 75 | } 76 | 77 | .catalog-thread.thread--long { 78 | grid-column: span 2; 79 | } 80 | 81 | .catalog-thread.thread--extra-long { 82 | grid-column: span 2; 83 | grid-row: span 2; 84 | max-height: 41rem; 85 | } 86 | /* 87 | .catalog-thread::after { 88 | content: ''; 89 | display: block; 90 | position: absolute; 91 | left: -1rem; 92 | top: -1rem; 93 | width: calc(100% + 2rem); 94 | height: calc(100% + 2rem); 95 | background-color: transparent; 96 | transition: background-color .25s, transform .25s; 97 | transform: scale(0); 98 | } 99 | 100 | .catalog-thread:hover::after { 101 | background-color: var(--background-primary); 102 | box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 103 | 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 104 | 0px 1px 10px 0px rgba(0, 0, 0, 0.12); 105 | transform: scale(1); 106 | z-index: 3; 107 | } 108 | */ 109 | /* 110 | .catalog-thread:hover .catalog-post { 111 | z-index: 4; 112 | transform: scale(1.2); 113 | } 114 | */ 115 | /* 116 | 117 | .catalog-thread:hover { 118 | transform: scale(1.02); 119 | z-index: 3; 120 | } 121 | 122 | .catalog-thread::after { 123 | content: ''; 124 | display: block; 125 | position: absolute; 126 | left: -1rem; 127 | top: -1rem; 128 | width: calc(100% + 2rem); 129 | height: calc(100% + 2rem); 130 | background-color: transparent; 131 | transition: background-color .25s; 132 | z-index: 2; 133 | } 134 | 135 | .catalog-thread:hover::after { 136 | background-color: var(--background-primary); 137 | box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 138 | 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 139 | 0px 1px 10px 0px rgba(0, 0, 0, 0.12); 140 | }*/ 141 | 142 | .catalog-post { 143 | display: flex; 144 | flex-direction: column; 145 | align-items: stretch; 146 | padding: 0; 147 | min-height: 20rem; 148 | position: relative; 149 | transition: transform .25s; 150 | } 151 | 152 | .catalog-post > .postInfo > :not(.subject), 153 | .catalog-post .subject:not(:empty)::after { 154 | display: none; 155 | } 156 | 157 | .catalog-post .file { 158 | order: 1; 159 | } 160 | 161 | .catalog-thread.thread--extra-long .catalog-post { 162 | min-height: 41rem; 163 | } 164 | 165 | .catalog-link { 166 | display: block; 167 | position: relative; 168 | order: 2; 169 | } 170 | 171 | .catalog-thumb { 172 | object-fit: cover; 173 | object-position: 50% 50%; 174 | width: 100% !important; 175 | height: 10rem !important; 176 | } 177 | 178 | .catalog-stats { 179 | order: 5; 180 | position: relative; 181 | padding: 0 .5rem 0 .75rem; 182 | display: flex; 183 | align-items: center; 184 | height: 3rem; 185 | background-color: var(--background-secondary); 186 | border-top: 1px solid var(--background-outline); 187 | } 188 | 189 | .catalog-stats > span[title] { 190 | color: var(--text-hint-on-background); 191 | cursor: help; 192 | } 193 | 194 | .catalog-stats > span[title] > span { 195 | color: var(--text-primary-on-background); 196 | } 197 | 198 | .catalog-stats > .catalog-icons { 199 | flex: 1; 200 | } 201 | 202 | .catalog-icons > img { 203 | margin-left: .5rem; 204 | } 205 | 206 | .catalog-stats > .menu-button { 207 | position: relative; 208 | top: auto; 209 | right: auto; 210 | display: inline-flex; 211 | align-items: center; 212 | } 213 | 214 | .catalog-post > .postInfo { 215 | order: 3; 216 | position: relative; 217 | } 218 | 219 | .catalog-post .subject:not(:empty) { 220 | color: var(--text-primary-on-dark); 221 | background-color: rgba(0, 0, 0, .5); 222 | display: block; 223 | position: absolute; 224 | top: -3rem; 225 | width: 100%; 226 | padding: 0 1rem; 227 | height: 3rem; 228 | line-height: 3; 229 | overflow: hidden; 230 | white-space: nowrap; 231 | text-overflow: ellipsis; 232 | pointer-events: none; 233 | } 234 | 235 | .catalog-post > .postMessage { 236 | font-size: .875rem; 237 | padding: 1rem 1rem 1.5rem; 238 | margin: 0; 239 | flex: 1 1 4.5rem; 240 | overflow: hidden; 241 | order: 4; 242 | word-break: break-word; 243 | } 244 | /* 245 | .catalog-post > .postMessage:empty { 246 | display: none; 247 | } 248 | */ 249 | .catalog-replies { 250 | display: none; 251 | order: 6; 252 | } 253 | /* 254 | .catalog-thread:hover .catalog-post > .postMessage { 255 | overflow: auto; 256 | } 257 | */ 258 | /** 259 | * idea of a "full card" on hover taken from smashing magazine redesign and also 260 | * 4chan x's catalogue 261 | */ 262 | 263 | /* 264 | .article--grid::before { 265 | display: block; 266 | width: calc(100% + 60px); 267 | height: calc(100% + 60px); 268 | height: 100%; 269 | content: ""; 270 | position: absolute; 271 | left: -30px; 272 | top: -30px; 273 | transition: background-color .1s ease-out; 274 | background-color: transparent; 275 | padding: 30px; 276 | } 277 | .article--grid:not(.col--article--meow):hover::before { 278 | background-color: #fff; 279 | box-shadow: 0 0 40px rgba(0,0,0,.15); 280 | } 281 | 282 | .article--grid { 283 | display: -ms-flexbox; 284 | display: flex; 285 | -ms-flex-direction: column; 286 | flex-direction: column; 287 | min-height: 0; 288 | padding: 0 1em; 289 | padding-bottom: 150px; 290 | transition: all .2s ease-out; 291 | position: relative; 292 | } 293 | .article--grid:not(.col--article--meow):hover { 294 | transform: scale(1.02); 295 | } 296 | .article--grid__title a { 297 | transition: all .2s ease-out; 298 | color: #111; 299 | text-decoration: none; 300 | padding: 10px 0; 301 | background-image: linear-gradient(#2da2c5,#2da2c5); 302 | background-repeat: no-repeat; 303 | background-size: 100% 1.5px; 304 | background-position: center bottom 29%; 305 | background-origin: padding-box; 306 | text-shadow: 3px 0 #f6f3f2, 2px 0 #f6f3f2, 1px 0 #f6f3f2, -1px 0 #f6f3f2, -2px 0 #f6f3f2, -3px 0 #f6f3f2; 307 | transition: color .1s ease-out; 308 | position: static; 309 | } 310 | .article--grid:hover .article--grid__title a { 311 | color: #d33a2c; 312 | text-decoration: none; 313 | padding: 10px 0; 314 | background-image: linear-gradient(#666,#666); 315 | background-repeat: no-repeat; 316 | background-size: 100% 1.5px; 317 | background-position: center bottom 29%; 318 | background-origin: padding-box; 319 | text-shadow: 3px 0 #fff, 2px 0 #fff, 1px 0 #fff, -1px 0 #fff, -2px 0 #fff, -3px 0 #fff; 320 | transition: color .1s ease-out; 321 | } 322 | */ 323 | } 324 | -------------------------------------------------------------------------------- /previous/ss19-catalog.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name ss19 catalogue 3 | @namespace github.com/openstyles/stylus 4 | @version 1.0.0 5 | @description A new userstyle 6 | @author Me 7 | ==/UserStyle== */ 8 | @-moz-document domain('boards.4chan.org'), 9 | domain('boards.4channel.org'){ 10 | 11 | /* 12 | * hides the file thumbnail 13 | */ 14 | 15 | :root:not(.catalog-mode) .board [class^=catalog], 16 | .catalog-container > .hide-thread-button, 17 | .catalog-post > .file, 18 | .catalog-post > .postInfo > :not(.subject), 19 | .catalog-post .subject:not(:empty)::after, 20 | :root .catalog-post > .container { 21 | display: none; 22 | } 23 | 24 | /* 25 | .catalog-container:not(:hover) > * > .file, 26 | .catalog-container:not(:hover) > * > .postInfo > :not(.subject), 27 | .catalog-container:not(:hover) > * > .catalog-replies, 28 | .catalog-container:not(:hover) .extra-linebreak, 29 | .catalog-container:not(:hover) .abbr, 30 | :root:not(.catalog-hover-expand) .catalog-container > * > .file, 31 | :root:not(.catalog-hover-expand) .catalog-container > * > .postInfo > :not(.subject), 32 | :root:not(.catalog-hover-expand) .catalog-container > * > .catalog-replies, 33 | :root:not(.catalog-hover-expand) .catalog-container .extra-linebreak, 34 | :root:not(.catalog-hover-expand) .catalog-container .abbr, 35 | .catalog-thread > .catalog-container > :not(.catalog-post), 36 | .catalog-post > .file > :not(.fileText), 37 | .catalog-post > * > .fileText > :not(:first-child), 38 | .catalog-post > .postInfo > :not(.subject):not(.nameBlock):not(.dateTime), 39 | .catalog-post > * > * > .posteruid, 40 | :root.bottom-backlinks .catalog-post > .container, 41 | .post:not(.catalog-post) > .catalog-link, 42 | .post:not(.catalog-post) > .catalog-stats, 43 | .post:not(.catalog-post) > .catalog-replies { 44 | display: none; 45 | } 46 | */ 47 | /* 48 | * in catalogue mode, reset the board to take full width 49 | */ 50 | 51 | :root.catalog-mode .board { 52 | max-width: none; 53 | padding: 0 3.5rem; 54 | display: grid; 55 | grid-gap: 1rem; 56 | grid-auto-rows: 15rem; 57 | align-items: stretch; 58 | grid-auto-flow: dense; 59 | } 60 | 61 | :root.catalog-mode .board.catalog-small { 62 | grid-template-columns: repeat(12, 1fr); 63 | } 64 | 65 | :root.catalog-mode .board.catalog-large { 66 | grid-template-columns: repeat(8, 1fr); 67 | } 68 | 69 | @media (max-width: 75rem) { 70 | :root.catalog-mode .board.catalog-small { 71 | grid-template-columns: repeat(6, 1fr); 72 | } 73 | 74 | :root.catalog-mode .board.catalog-large { 75 | grid-template-columns: repeat(4, 1fr); 76 | } 77 | } 78 | 79 | /** 80 | * by default, each thread takes up 1 column. we also have to remove the 81 | * `padding` and `margin` we give to normal threads 82 | */ 83 | 84 | .catalog-thread { 85 | position: relative; 86 | grid-column: span 1; 87 | padding: 0; 88 | margin: 0; 89 | z-index: 2; 90 | min-height: 15rem; 91 | max-height: 15rem; 92 | /*box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 93 | 0 2px 2px 0 rgba(0,0,0,.14), 94 | 0 1px 5px 0 rgba(0,0,0,.12);*/ 95 | transition: all .25s; 96 | border-radius: 4px; 97 | } 98 | 99 | .catalog-thread.thread--long { 100 | grid-column: span 2; 101 | } 102 | 103 | .catalog-thread.thread--extra-long { 104 | grid-column: span 2; 105 | grid-row: span 2; 106 | max-height: 31rem; 107 | } 108 | 109 | .catalog-post { 110 | display: flex; 111 | flex-direction: column; 112 | align-items: stretch; 113 | position: relative; 114 | box-shadow: none; 115 | transition: all .25s; 116 | min-height: 15rem; 117 | border-radius: 4px; 118 | overflow: hidden; 119 | } 120 | 121 | .catalog-thread.thread--extra-long .catalog-post { 122 | min-height: 31rem; 123 | } 124 | 125 | .catalog-post .postInfo { 126 | background: none; 127 | padding: 0; 128 | order: 3; 129 | position: relative; 130 | line-height: inherit; 131 | height: auto; 132 | } 133 | 134 | .catalog-post .subject:not(:empty) { 135 | color: var(--text-primary-on-dark); 136 | background-color: rgba(0, 0, 0, .5); 137 | display: block; 138 | position: absolute; 139 | top: calc(-1 * (18px + 32px)); 140 | width: 100%; 141 | max-width: none; 142 | padding: 0 .5rem; 143 | height: 2rem; 144 | line-height: 2; 145 | letter-spacing: .02em; 146 | overflow: hidden; 147 | white-space: nowrap; 148 | text-overflow: ellipsis; 149 | pointer-events: none; 150 | } 151 | 152 | .catalog-link { 153 | display: block; 154 | position: relative; 155 | order: 1; 156 | border-top-left-radius: 4px; 157 | border-top-right-radius: 4px; 158 | overflow: hidden; 159 | } 160 | 161 | .catalog-stats { 162 | order: 2; 163 | text-align: center; 164 | font-size: .75rem; 165 | } 166 | 167 | .catalog-stats > span[title] { 168 | color: var(--text-hint-on-background); 169 | } 170 | 171 | .catalog-stats > span[title] > span { 172 | color: var(--text-primary-on-background); 173 | } 174 | 175 | .catalog-post:not(:hover) .menu-button { 176 | opacity: 0; 177 | } 178 | 179 | .catalog-icons { 180 | display: inline-block; 181 | transform: scale(.75); 182 | } 183 | 184 | .catalog-stats #menu { 185 | text-align: left; 186 | } 187 | 188 | .catalog-thumb { 189 | object-fit: cover; 190 | object-position: 50% 50%; 191 | width: 100% !important; 192 | height: 7.5rem !important; 193 | } 194 | 195 | .catalog-post > .postMessage { 196 | font-size: .75rem; 197 | letter-spacing: 0.025em; 198 | flex: 1 1 auto; 199 | margin: 0; 200 | order: 4; 201 | padding: .5rem .75rem; 202 | position: relative; 203 | } 204 | /* 205 | .catalog-post::before { 206 | content: ''; 207 | display: block; 208 | width: calc(100% + 2rem); 209 | height: calc(100% + 2rem); 210 | position: absolute; 211 | left: -1rem; 212 | top: -1rem; 213 | transition: all .25s ease-out; 214 | background-color: transparent; 215 | padding: 1rem; 216 | border-radius: 3px; 217 | } 218 | 219 | .catalog-post:hover::before { 220 | background-color: #fff; 221 | box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 222 | 0 3px 14px 2px rgba(0,0,0,0.12), 223 | 0 5px 5px -3px rgba(0,0,0,0.2); 224 | } 225 | */ 226 | .catalog-replies { 227 | font-size: .75rem; 228 | position: relative; 229 | order: 6; 230 | } 231 | /* 232 | .catalog-post:hover { 233 | transform: scale(1.02); 234 | z-index: 1; 235 | } 236 | */ 237 | .catalog-container:not(:hover) > * > .file, 238 | .catalog-container:not(:hover) > * > .postInfo > :not(.subject), 239 | .catalog-container:not(:hover) > * > .catalog-replies, 240 | .catalog-container:not(:hover) .extra-linebreak, 241 | .catalog-container:not(:hover) .abbr, 242 | :root:not(.catalog-hover-expand) .catalog-container > * > .file, 243 | :root:not(.catalog-hover-expand) .catalog-container > * > .postInfo > :not(.subject), 244 | :root:not(.catalog-hover-expand) .catalog-container > * > .catalog-replies, 245 | :root:not(.catalog-hover-expand) .catalog-container .extra-linebreak, 246 | :root:not(.catalog-hover-expand) .catalog-container .abbr, 247 | .catalog-thread > .catalog-container > :not(.catalog-post), 248 | .catalog-post > .file > :not(.fileText), 249 | .catalog-post > * > .fileText > :not(:first-child), 250 | .catalog-post > .postInfo > :not(.subject):not(.nameBlock):not(.dateTime), 251 | .catalog-post > * > * > .posteruid, 252 | :root.bottom-backlinks .catalog-post > .container, 253 | .post:not(.catalog-post) > .catalog-link, 254 | .post:not(.catalog-post) > .catalog-stats, 255 | .post:not(.catalog-post) > .catalog-replies { 256 | display: none; 257 | } 258 | 259 | .catalog-replies::before { 260 | content: ''; 261 | height: 1px; 262 | width: calc(100% - 1rem); 263 | margin: auto; 264 | background-color: var(--background-outline); 265 | display: block; 266 | } 267 | 268 | .catalog-reply { 269 | white-space: nowrap; 270 | 271 | display: flex; 272 | flex-direction: row; 273 | align-items: stretch; 274 | } 275 | .catalog-reply > * { 276 | padding: 3px; 277 | overflow: hidden; 278 | flex: none; 279 | } 280 | .catalog-reply > span { 281 | font-style: italic; 282 | font-weight: bold; 283 | } 284 | .catalog-reply-excerpt { 285 | -webkit-flex: 1 1 auto; 286 | flex: 1 1 auto; 287 | } 288 | 289 | .catalog-container:not(:hover) { 290 | overflow: hidden; 291 | box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 292 | 0 2px 2px 0 rgba(0,0,0,.14), 293 | 0 1px 5px 0 rgba(0,0,0,.12); 294 | } 295 | 296 | .catalog-container { 297 | position: absolute; 298 | top: 0; 299 | left: 0; 300 | right: 0; 301 | bottom: 0; 302 | z-index: 9; 303 | } 304 | 305 | .catalog-post { 306 | margin: 0; 307 | overflow: visible; 308 | } 309 | 310 | .catalog-post { 311 | position: absolute; 312 | top: 0; 313 | left: 0; 314 | right: 0; 315 | } 316 | 317 | .catalog-container:hover .catalog-post { 318 | top: .5rem; 319 | margin: -1rem -3rem; 320 | transform: scale(1.02) translateY(-1%); 321 | box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14), 322 | 0 3px 14px 2px rgba(0,0,0,0.12), 323 | 0 5px 5px -3px rgba(0,0,0,0.2); 324 | } 325 | 326 | .catalog-thread:hover { 327 | z-index: 10; 328 | } 329 | 330 | } 331 | -------------------------------------------------------------------------------- /previous/curabitr2.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name curabitr 2 3 | @namespace github.com/openstyles/stylus 4 | @version 1.0.0 5 | @description A new userstyle 6 | @author Me 7 | ==/UserStyle== */ 8 | @-moz-document domain("boards.4chan.org") { 9 | 10 | /* 11 | aw yeah, google web fonts BITCH 12 | */ 13 | @font-face { 14 | font-family: Gudea; 15 | src: url('http://themes.googleusercontent.com/font?kit=thW9JAelqegPZr6cy_hdlJuy9QftGgiCbPT5J2Tle6QGEtCW0q5T6QHEAICoCh1h9R715REvNVFz5maQ3RAjMvuvYlUZxjWJuWoIFYd8ZVs9VGRJmXaKNSd0UG6XHo4E&text') format('woff'); 16 | } 17 | 18 | @font-face { 19 | font-family: GudeaBold; 20 | font-weight: 800; 21 | src: url('http://themes.googleusercontent.com/font?kit=6M2RKly85u67vSsXH0-zqihqGa-CSr3nQtF3lrv2wWeu7RP096c_0cFQ7arjjB7ybFaXKHeky_O7IdzbE_trRh2NL1ThVuLv506WDWjwTFK0tkCcv8VGcP6XCC56Ww8-&text') format('woff'); 22 | } 23 | 24 | /* 25 | next, we kill the crab (getting rid of shit i don't personally use) 26 | 1) banner and heading 27 | 2) posting mode: reply 28 | 3) [return] [bottom] [top] 29 | 4) bottom navigation 30 | 5) horizontal lines 31 | 6) style changer (you're using this one!) and reporting/post deletion (NO SHAME, NO BLAME) 32 | 7) copyright crap 33 | 8) ads (>not using adblock, >2025) 34 | */ 35 | .boardBanner, 36 | /* 1) */ 37 | .postingMode, 38 | /* 2) */ 39 | .navLinks, 40 | /* 3) */ 41 | #boardNavDesktopFoot, 42 | /* 4) */ 43 | hr, 44 | /* 5) */ 45 | .deleteform, 46 | .stylechanger, 47 | /* 6) */ 48 | #absbot, 49 | /* 7) */ 50 | img[src^="//static.4chan.org/support/"]/* 8) */ 51 | { 52 | display: none!important 53 | } 54 | 55 | /* 56 | postform specific crap (only effects you if you AREN'T using quick reply for some reason) 57 | 1) formally .postblock 58 | 2) recaptcha buttons 59 | 3) more recaptcha stuff 60 | 4) browse button (file input for firefox) 61 | 5) (password used for file deletion) 62 | 6) posting rules 63 | */ 64 | #postForm > tbody > tr > td:first-child, 65 | /* 1) */ 66 | #recaptcha_table tr[height] > td:not(:first-child), 67 | /* 2) */ 68 | #recaptcha_table tr[height] + tr > td:not(:first-child), 69 | /* 3) */ 70 | #postForm #postFile > input[type=button], 71 | /* 4) */ 72 | #postForm #postPassword + span, 73 | /* 5) */ 74 | #postForm .rules/* 6) */ 75 | { 76 | display: none!important 77 | } 78 | 79 | /* 80 | general reset: 81 | 1) border-box because fuck you when i say 70 i mean 70 82 | 2) indian red selection (feel free to make highlighed text your own colour) 83 | 3) i don't want no ugly border around focused elements, i'm not blind 84 | 4) font reset (and making sure bold is actual bold, not faux bold) 85 | 5) links 86 | 6) text-shadow for web2.0 87 | */ 88 | * { 89 | /* 1) */ 90 | -moz-box-sizing: border-box !important; 91 | box-sizing: border-box !important; 92 | } 93 | 94 | ::selection { 95 | /* 2) */ 96 | color: #fafafa !important; 97 | background: indianRed !important; 98 | } 99 | 100 | ::-moz-selection { 101 | color: #fafafa !important; 102 | background: indianRed !important; 103 | } 104 | 105 | :focus, 106 | :active { 107 | /* 3) */ 108 | outline: 0 !important; 109 | } 110 | 111 | /* 112 | -moz-hyphens:auto; 113 | -ms-hyphens:auto; 114 | -webkit-hyphens:auto; 115 | hyphens:auto; 116 | word-wrap:break-word; 117 | */ 118 | html { 119 | word-wrap: break-word; 120 | overflow-wrap: break-word; 121 | overflow-y: scroll; 122 | position: relative; 123 | height: 100%; 124 | } 125 | 126 | body, 127 | span, 128 | div, 129 | input, 130 | textarea, 131 | select, 132 | td, 133 | strong, 134 | a, 135 | big { 136 | /* 4) */ 137 | font-family: Gudea, Helvetica, Arial, sans-serif !important; 138 | font-size: 1em !important; 139 | font-weight: 400 !important; 140 | line-height: 1.4 !important; 141 | letter-spacing: .2px; 142 | color: #2d2d2d !important; 143 | vertical-align: baseline !important; 144 | } 145 | 146 | .subject, 147 | .name, 148 | .capcode, 149 | .pages strong, 150 | #boardNavDesktop .current { 151 | font-family: GudeaBold, Helvetica, Arial, sans-serif !important; 152 | font-weight: 800 !important; 153 | } 154 | 155 | a { 156 | /* 5) */ 157 | color: cornflowerBlue !important; 158 | text-decoration: none !important; 159 | } 160 | 161 | blockquote { 162 | /* 6) */ 163 | text-shadow: 0 1px 1px #fafafa; 164 | } 165 | 166 | .abbr, 167 | .summary { 168 | color: #ababab !important; 169 | } 170 | 171 | .spoiler { 172 | text-shadow: none; 173 | background: #2d2d2d !important; 174 | border-radius: 3px; 175 | -moz-transition: color .1s; 176 | } 177 | 178 | .spoiler:hover { 179 | color: #fafafa !important; 180 | } 181 | 182 | /* 183 | the meaty part (vanilla 4chan only) 184 | */ 185 | body { 186 | /*background-color: 187 | background-image: 188 | background-position: 189 | background-repeat: 190 | background-attachment:*/ 191 | padding: 0 !important; 192 | margin: 0 !important; 193 | position: relative; 194 | height: 100%; 195 | } 196 | 197 | body { 198 | /* this means no harmony */ 199 | background-size: calc(10 * 0.5px) calc(10 * 0.5px), cover; 200 | background-image: radial-gradient(#ddd 0.5px, transparent 0.5px), -webkit-radial-gradient(50% 50%, circle cover, #fafafa, #ededed 100%) !important; 201 | background-attachment: fixed !important; 202 | background-repeat: repeat !important; 203 | /* but what is that you say? you want harmony? uncomment the following line for permanent harmony oh love */ 204 | /*background: url("http://static.4chan.org/image/tmp/rainbow.gif") repeat scroll 0 0 #EEF2FF !important;*/ 205 | } 206 | 207 | /* 208 | body::after { 209 | content: ''; 210 | display: block; 211 | height: 935px; 212 | width: 715px; 213 | background: url('file:///W:/curabitr/ANIME.png'); 214 | position: fixed; 215 | bottom: -250px; 216 | right: -100px; 217 | pointer-events: none; 218 | z-index: 2; 219 | opacity: .2; 220 | } 221 | */ 222 | /*url('file:///W:/curabitr/ANIME.png'),*/ 223 | /* 224 | navigation 225 | */ 226 | #boardNavDesktop { 227 | font-size: 12px !important; 228 | position: fixed; 229 | /*bottom: 0; 230 | left: 0;*/ 231 | width: 100%; 232 | color: #bababa !important; 233 | background-image: -moz-linear-gradient(#4c4c4c, #2d2d2d); 234 | text-align: center; 235 | padding-bottom: 2px; 236 | box-shadow: 0 1px 10px rgba(0, 0, 0, .25); 237 | z-index: 5; 238 | -moz-user-select: none; 239 | /*-moz-transition: left .2s ease-in-out;*/ 240 | } 241 | 242 | /* 243 | #boardNavDesktop:not(:hover) { 244 | left: -95%; 245 | border-radius: 5px; 246 | } 247 | */ 248 | #boardNavDesktop a { 249 | color: #fafafa !important; 250 | -moz-transition: text-shadow .2s ease-in-out; 251 | } 252 | 253 | #boardNavDesktop a:hover { 254 | text-shadow: 0 0 1px #fafafa; 255 | } 256 | 257 | #navtopr { 258 | float: none !important; 259 | } 260 | 261 | /* 262 | #boardNavDesktop { 263 | font-size: 0 !important; 264 | color: transparent !important; 265 | position: fixed; 266 | width: 100%; 267 | text-align: center; 268 | background: black; 269 | padding-bottom: 2px; 270 | box-shadow: 0 2px 10px rgba(0,0,0,.25); 271 | z-index: 5; 272 | opacity: .25; 273 | -moz-transition: opacity .1s ease-in-out; 274 | } 275 | 276 | #boardNavDesktop:hover { 277 | opacity: .75; 278 | } 279 | 280 | #boardNavDesktop a { 281 | font-size: 14px !important; 282 | color: #fafafa !important; 283 | -moz-transition: text-shadow .2s ease-in-out; 284 | } 285 | 286 | #boardNavDesktop a:hover { 287 | text-shadow: 0 0 1px #fafafa; 288 | } 289 | 290 | #navtopr { 291 | float: none !important; 292 | }*/ 293 | /* 294 | #boardNavDesktop { 295 | position: fixed; 296 | width: 100%; 297 | text-align: center; 298 | background: black; 299 | padding-bottom: 2px; 300 | box-shadow: 0 2px 10px rgba(0,0,0,.25); 301 | z-index: 5; 302 | opacity: .25; 303 | -moz-transition: opacity .1s ease-in-out; 304 | } 305 | 306 | #boardNavDesktop:hover { 307 | opacity: .75; 308 | } 309 | 310 | #boardNavDesktop a { 311 | color: #fafafa !important; 312 | -moz-transition: text-shadow .2s ease-in-out; 313 | } 314 | 315 | #boardNavDesktop a:hover { 316 | text-shadow: 0 0 1px #fafafa; 317 | } 318 | */ 319 | #navtopr { 320 | font-size: 0 !important; 321 | color: transparent !important; 322 | float: none !important; 323 | } 324 | 325 | #navtopr > a:first-child::before { 326 | content: ''; 327 | font-family: Webdings !important; 328 | font-size: 16px !important; 329 | color: #fafafa !important; 330 | } 331 | 332 | /* 4chan s */ 333 | /* 334 | #boardNavDesktop { 335 | position: fixed !important; 336 | top: 0 !important; 337 | left: 0 !important; 338 | right: 0 !important; 339 | padding: 5px; 340 | color: #aaa !important; 341 | text-align: center !important; 342 | background-image: -webkit-linear-gradient(#3d3d3d,#2d2d2d); 343 | background-image: -moz-linear-gradient(#3d3d3d,#2d2d2d); 344 | box-shadow: 0 1px 3px rgba(0,0,0,.25); 345 | z-index: 2; 346 | -webkit-user-select: none; 347 | -moz-user-select: none; 348 | user-select: none; 349 | } 350 | 351 | #boardNavDesktop a { 352 | color: #fafafa !important; 353 | padding: 0 !important; 354 | } 355 | 356 | #boardNavDesktop a:hover { 357 | text-shadow: 0 0 3px rgba(255,255,255,.75), 0 0 5px rgba(255,255,255,.5); 358 | } 359 | 360 | #boardNavDesktop, #navtopr { 361 | float: none !important; 362 | } 363 | 364 | .current { 365 | font-weight: bold !important; 366 | text-shadow: 0 0 3px rgba(255,255,255,.75), 0 0 5px rgba(255,255,255,.5); 367 | } 368 | */ 369 | /* 4chan s' hidden menu */ 370 | .hidemeaway { 371 | position: relative; 372 | cursor: pointer; 373 | color: #bababa !important; 374 | } 375 | 376 | .hiddenmenu { 377 | display: none; 378 | position: absolute; 379 | background: #2d2d2d; 380 | box-shadow: 0 0 3px rgba(0, 0, 0, .25); 381 | top: 100%; 382 | left: 0; 383 | width: 82px; 384 | padding: 5px 0; 385 | } 386 | 387 | .hiddenmenu a { 388 | display: block; 389 | } 390 | 391 | .hidemeaway:hover .hiddenmenu { 392 | display: block; 393 | } 394 | 395 | /* 396 | ensure space between navigation and content 397 | */ 398 | #mpostform + div { 399 | height: 50px; 400 | position: static !important; 401 | } 402 | 403 | /* 404 | postarea/postform 405 | */ 406 | #postForm { 407 | position: fixed; 408 | right: 1%; 409 | bottom: 1%; 410 | } 411 | 412 | .closed { 413 | font-size: 2em !important; 414 | padding: 50px 0 10px 0 !important; 415 | } 416 | 417 | /* 418 | announcements 419 | */ 420 | .globalMessage { 421 | text-shadow: 0 1px 1px #fafafa; 422 | width: 90%; 423 | margin: auto; 424 | } 425 | 426 | .globalMessage strong, 427 | .globalMessage big { 428 | color: #dd3434 !important; 429 | } 430 | 431 | .globalMessage a { 432 | color: #0050b3 !important; 433 | } 434 | 435 | #globalToggle { 436 | display: block !important; 437 | width: 300px; 438 | margin: 0 auto; 439 | text-align: center; 440 | color: #fafafa !important; 441 | background: -moz-linear-gradient(#e01919, #aa1111); 442 | border-radius: 3px; 443 | padding: 4px 0 5px; 444 | } 445 | 446 | .globalMessage.hideMobile { 447 | display: none; 448 | } 449 | 450 | /* 451 | main board 452 | */ 453 | #delform { 454 | width: 80%; 455 | margin: 30px auto; 456 | } 457 | 458 | .thread::before, 459 | .thread::after, 460 | .op::before, 461 | .op::after { 462 | content: ''; 463 | display: table; 464 | } 465 | 466 | .thread::after, 467 | .op::after { 468 | clear: both; 469 | } 470 | 471 | .thread { 472 | margin: 10px 0 !important; 473 | } 474 | 475 | .thread:first-of-type { 476 | margin-top: 0 !important; 477 | } 478 | 479 | .thread:last-of-type { 480 | margin-bottom: 0 !important; 481 | } 482 | 483 | .fileThumb, 484 | .fileThumb img { 485 | margin: 0 !important; 486 | } 487 | 488 | /* 489 | replies 490 | */ 491 | .opContainer { 492 | margin-bottom: 5px; 493 | } 494 | 495 | .replyContainer { 496 | position: relative; 497 | } 498 | 499 | .useremail .name, 500 | .useremail .postertrip { 501 | color: #0050b3 !important; 502 | } 503 | 504 | .fileThumb { 505 | padding: 5px; 506 | background: #ffffff; 507 | border: 1px solid #e3e3e3; 508 | border-radius: 5px; 509 | box-shadow: 0 0 0 rgba(0, 0, 0, .25); 510 | -moz-transition: box-shadow .2s ease-in-out; 511 | } 512 | 513 | .fileThumb:hover { 514 | box-shadow: 0 0 2px rgba(0, 0, 0, .25); 515 | } 516 | 517 | /* get rid of fancy border around expanded images */ 518 | .image_expanded .fileThumb { 519 | padding: 0; 520 | box-shadow: none; 521 | border: 0; 522 | border-radius: 0; 523 | } 524 | 525 | .postNum { 526 | font-size: 0 !important; 527 | color: transparent !important; 528 | } 529 | 530 | .postNum > a:not(:first-child) { 531 | font-size: 16px !important; 532 | color: cornflowerBlue !important; 533 | } 534 | 535 | .postNum > a:first-child::after { 536 | content: '#'; 537 | font-size: 16px !important; 538 | color: cornflowerBlue !important; 539 | } 540 | 541 | .postNum > a.replylink { 542 | font-size: 14px !important; 543 | color: #2d2d2d !important; 544 | /* okay for some nigger reason i need to have the extra a (although i think i know why) */ 545 | text-transform: lowercase; 546 | text-shadow: 0 1px 1px rgba(255, 255, 255, .9); 547 | display: inline-block; 548 | padding: 3px 7px; 549 | margin: 0 5px; 550 | background: -webkit-linear-gradient(#fafafa, #e3e3e3); 551 | background: -moz-linear-gradient(#fafafa, #e3e3e3); 552 | box-shadow: 0 1px 2px rgba(0, 0, 0, .2); 553 | border: 1px solid #bbb; 554 | border-radius: 5px; 555 | cursor: pointer; 556 | } 557 | 558 | .replylink:hover { 559 | box-shadow: 0 1px 3px rgba(0, 0, 0, .2); 560 | } 561 | 562 | .replylink:active { 563 | background-image: -webkit-linear-gradient(#e3e3e3, #fafafa); 564 | background-image: -moz-linear-gradient(#e3e3e3, #fafafa); 565 | position: relative; 566 | top: 1px; 567 | } 568 | 569 | /* 570 | span[id^="nothread"] a:nth-of-type(3) { 571 | font-family: Helvetica, Arial, sans-serif; 572 | font-size: 11pt; 573 | text-transform: lowercase; 574 | text-shadow: 0 1px 1px rgba(255,255,255,.9); 575 | color: #555 !important; 576 | display: inline-block; 577 | padding: 3px 7px; 578 | margin: 0 5px; 579 | background: -webkit-linear-gradient(#fafafa,#e3e3e3); 580 | background: -moz-linear-gradient(#fafafa,#e3e3e3); 581 | box-shadow: 0 1px 2px rgba(0,0,0,.2); 582 | border: 1px solid #bbb; 583 | border-radius: 5px; 584 | outline: 0; 585 | cursor: pointer; 586 | } 587 | 588 | span[id^="nothread"] a:nth-of-type(3):hover { 589 | box-shadow: 0 1px 3px rgba(0,0,0,.2); 590 | } 591 | 592 | span[id^="nothread"] a:nth-of-type(3):active { 593 | background-image: -webkit-linear-gradient(#e3e3e3,#fafafa); 594 | background-image: -moz-linear-gradient(#e3e3e3,#fafafa); 595 | position: relative; 596 | top: 1px; 597 | } 598 | */ 599 | /*.useremail:hover::after {content: attr(href);}*/ 600 | .postMessage > br + br + strong[style] { 601 | color: #dd3434 !important; 602 | } 603 | 604 | a.summary { 605 | display: inline-block; 606 | margin-left: 10px; 607 | position: relative; 608 | top: 1px; 609 | background: #fafafa; 610 | font-size: .9em !important; 611 | padding: 0 3px; 612 | border-top-left-radius: 5px; 613 | border-top-right-radius: 5px; 614 | border: 1px solid #e6e6e6; 615 | border-bottom: 0; 616 | } 617 | 618 | .postertrip { 619 | font-family: monospace !important; 620 | font-size: 1.2em !important; 621 | } 622 | 623 | .dateTime { 624 | color: #bababa !important; 625 | } 626 | 627 | .quote { 628 | color: #5c9e0f !important; 629 | } 630 | 631 | /* 632 | .op .file { 633 | float: right !important; 634 | } 635 | */ 636 | .fileInfo { 637 | margin: 0 !important; 638 | } 639 | 640 | /* 641 | .fileInfo > a { 642 | font-size: 0 !important; 643 | color: transparent !important; 644 | -moz-transition: all .2s; 645 | } 646 | 647 | .fileInfo:hover > a { 648 | font-size: .8em !important; 649 | color: cornflowerBlue !important; 650 | } 651 | */ 652 | .fileInfo > a { 653 | font-size: .75em !important; 654 | } 655 | 656 | .subject { 657 | color: #696969 !important; 658 | } 659 | 660 | .sideArrows { 661 | display: none; 662 | } 663 | 664 | .sideArrows.hide_reply_button { 665 | display: block; 666 | font-size: 12px !important; 667 | position: absolute; 668 | top: 1px; 669 | right: 3px; 670 | margin: 0 !important; 671 | opacity: 0; 672 | -moz-transition: opacity .3s ease-in-out; 673 | } 674 | 675 | .op .fileThumb { 676 | float: right !important; 677 | } 678 | 679 | .post.reply .fileThumb { 680 | margin-right: 5px !important; 681 | } 682 | 683 | .postContainer:hover .sideArrows.hide_reply_button { 684 | opacity: .5; 685 | } 686 | 687 | .stub + .sideArrows + .post { 688 | display: none !important; 689 | } 690 | 691 | .post input { 692 | display: none; 693 | } 694 | 695 | .post { 696 | margin: 0 !important; 697 | } 698 | 699 | .post.reply { 700 | clear: both; 701 | display: block !important; 702 | background: #fafafa !important; 703 | padding: 3px 0 3px 10px !important; 704 | border: 1px solid #e6e6e6 !important; 705 | border-bottom: 0 !important; 706 | -moz-transition: background .5s ease-in-out; 707 | } 708 | 709 | .post.reply.highlight { 710 | background: #efefef !important; 711 | } 712 | 713 | .thread .replyContainer:last-child .post.reply { 714 | border-bottom: 1px solid #e3e3e3 !important; 715 | } 716 | 717 | .postMessage { 718 | margin: 0 !important; 719 | } 720 | 721 | /* 722 | /g/ [code] tags 723 | */ 724 | .prettyprint { 725 | background-color: #151717 !important; 726 | padding: 5px !important; 727 | margin: 0; 728 | text-shadow: none; 729 | white-space: pre-wrap; 730 | border-radius: 5px; 731 | } 732 | 733 | .prettyprint span { 734 | font-family: monospace !important; 735 | color: #fafafa !imporant; 736 | /* so that when .prettyprint loads */ 737 | } 738 | 739 | .prettyprint .str { 740 | color: #edd400 !important; 741 | } 742 | 743 | /* string - butter2 */ 744 | .prettyprint .kwd { 745 | color: #fff !important; 746 | font-weight: bold !important; 747 | } 748 | 749 | /* keyword - white */ 750 | .prettyprint .com { 751 | color: #888a85 !important; 752 | } 753 | 754 | /* comment - aluminum4 */ 755 | .prettyprint .typ { 756 | color: #8ae234 !important; 757 | font-weight: bold !important; 758 | } 759 | 760 | /* type - chameleon1 */ 761 | .prettyprint .lit { 762 | color: #edd400 !important; 763 | } 764 | 765 | /* literal - butter2 */ 766 | .prettyprint .pun { 767 | color: #d3d7cf !important; 768 | } 769 | 770 | /* punctuation - aluminium2 */ 771 | .prettyprint .pln { 772 | color: #d3d7cf !important; 773 | } 774 | 775 | /* plaintext - aluminium2 */ 776 | .prettyprint .tag { 777 | color: #729fcf !important; 778 | } 779 | 780 | /* html/xml tag - skyblue1 */ 781 | .prettyprint .atn { 782 | color: #8ae234 !important; 783 | font-weight: bold !important; 784 | } 785 | 786 | /* html/xml attribute name - chameleon1 */ 787 | .prettyprint .atv { 788 | color: #edd400 !important; 789 | } 790 | 791 | /* html/xml attribute value - butter2 */ 792 | .prettyprint .dec { 793 | color: #ce5c00 !important; 794 | } 795 | 796 | /* decimal - orange3 */ 797 | /* 798 | pages 799 | */ 800 | .pagelist .next, 801 | .pagelist .prev { 802 | display: none; 803 | } 804 | 805 | .pagelist { 806 | background: none !important; 807 | padding: 0 !important; 808 | border: 0 !important; 809 | margin-bottom: 30px !important; 810 | float: none !important; 811 | word-spacing: 10px; 812 | text-align: center; 813 | overflow: visible !important; 814 | } 815 | 816 | .pagelist .pages { 817 | padding: 0 !important; 818 | float: none !important; 819 | font-size: 0 !important; 820 | color: transparent !important; 821 | } 822 | 823 | .pagelist .pages strong, 824 | .pagelist .pages a { 825 | display: inline-block; 826 | font-size: 16px !important; 827 | color: #2d2d2d !important; 828 | min-width: 20px; 829 | padding: 3px 7px 1px 8px; 830 | border-radius: 5px; 831 | box-shadow: 0 1px 2px rgba(0, 0, 0, .4); 832 | -webkit-transition: box-shadow .2s; 833 | -moz-transition: box-shadow .2s; 834 | transition: box-shadow .2s; 835 | } 836 | 837 | .pagelist .pages a { 838 | background-image: -webkit-linear-gradient(#fafafa, #e3e3e3); 839 | background-image: -moz-linear-gradient(#fafafa, #e3e3e3); 840 | background-image: linear-gradient(#fafafa, #e3e3e3); 841 | } 842 | 843 | .pagelist .pages strong { 844 | color: #e3e3e3 !important; 845 | background-image: -webkit-linear-gradient(#3d3d3d, #2d2d2d); 846 | background-image: -moz-linear-gradient(#3d3d3d, #2d2d2d); 847 | background-image: linear-gradient(#3d3d3d, #2d2d2d); 848 | } 849 | 850 | .pages a:hover { 851 | box-shadow: 0 1px 4px rgba(0, 0, 0, .75); 852 | } 853 | 854 | /* 855 | 4chan x specific 856 | */ 857 | #overlay { 858 | z-index: 10 !important; 859 | background-image: -moz-radial-gradient(50% 50%, circle cover, rgba(50, 50, 50, .5), rgba(0, 0, 0, .75) 100%) !important; 860 | } 861 | 862 | #options { 863 | background-color: #ededed !important; 864 | border-radius: 5px; 865 | width: 75% !important; 866 | height: 75%; 867 | vertical-align: middle !important; 868 | } 869 | 870 | #content { 871 | height: 95% !important; 872 | } 873 | 874 | form[name=post] > h1 { 875 | display: none; 876 | } 877 | 878 | .reply.dialog { 879 | border: 0 !important; 880 | } 881 | 882 | .hide_thread_button > span { 883 | background-image: -moz-linear-gradient(#fafafa, #e3e3e3); 884 | margin-right: 5px; 885 | text-align: center; 886 | padding: 2px 4px; 887 | border-radius: 5px; 888 | box-shadow: 0 1px 2px rgba(0, 0, 0, .4); 889 | } 890 | 891 | .hide_reply_button.stub { 892 | background: #fafafa; 893 | border: 1px solid #e6e6e6; 894 | border-bottom: 0; 895 | } 896 | 897 | .thread .replyContainer:last-child .hide_reply_button.stub { 898 | border-bottom: 1px solid #e6e6e6; 899 | } 900 | 901 | .hide_reply_button.stub > a { 902 | display: block; 903 | padding: 3px 0 3px 10px; 904 | } 905 | 906 | .hide_reply_button.stub > a > span { 907 | display: none; 908 | } 909 | 910 | .post.reply.highlight { 911 | background: #efefef !important; 912 | } 913 | 914 | .thread .replyContainer:last-child .post.reply { 915 | border-bottom: 1px solid #e3e3e3 !important; 916 | } 917 | 918 | #stats { 919 | font-size: 12px !important; 920 | top: 3px !important; 921 | left: auto !important; 922 | right: 20px !important; 923 | width: 60px; 924 | text-align: right; 925 | z-index: 6; 926 | } 927 | 928 | #stats > .move { 929 | color: #fafafa !important; 930 | cursor: default !important; 931 | } 932 | 933 | #postcount, 934 | #imagecount { 935 | color: #fafafa !important; 936 | } 937 | 938 | #watcher { 939 | position: fixed !important; 940 | width: 200px; 941 | background: #fafafa !important; 942 | border-radius: 5px; 943 | opacity: .5; 944 | box-shadow: 0 2px 4px rgba(0, 0, 0, .25); 945 | z-index: 2; 946 | } 947 | 948 | #watcher:hover { 949 | opacity: .9; 950 | } 951 | 952 | #watcher > div { 953 | color: #bbb !important; 954 | } 955 | 956 | #watcher > .move { 957 | text-align: center; 958 | text-decoration: none !important; 959 | text-transform: lowercase; 960 | } 961 | 962 | #watcher > div > a:first-child { 963 | color: #dd3434 !important; 964 | } 965 | 966 | #imgControls { 967 | height: 0; 968 | } 969 | 970 | #imageType { 971 | display: none; 972 | } 973 | 974 | #imgControls > label { 975 | font-size: 0 !important; 976 | color: transparent !important; 977 | } 978 | 979 | #imageExpand { 980 | position: fixed; 981 | top: 6px; 982 | right: 5px; 983 | z-index: 6; 984 | -moz-appearance: none; 985 | height: 10px; 986 | width: 10px; 987 | border: 1px solid rgba(0, 0, 0, .5) !important; 988 | background: #fafafa !important; 989 | border-radius: 3px !important; 990 | margin: 0; 991 | } 992 | 993 | .container { 994 | display: block; 995 | font-size: .8em !important; 996 | line-height: .8 !important; 997 | color: #bababa !important; 998 | margin-left: 5px; 999 | } 1000 | 1001 | .container::before { 1002 | content: 'le quoted by: '; 1003 | } 1004 | 1005 | .container::after { 1006 | content: '.'; 1007 | } 1008 | 1009 | .container .backlink:not(:only-child):not(:last-child)::after { 1010 | content: ','; 1011 | } 1012 | 1013 | #updater { 1014 | font-size: 12px !important; 1015 | top: auto !important; 1016 | left: auto !important; 1017 | bottom: 0 !important; 1018 | right: 5px !important; 1019 | } 1020 | 1021 | #updater #count:not(.new):not(.error) { 1022 | display: none; 1023 | } 1024 | 1025 | #updater #count.new { 1026 | color: limeGreen !important; 1027 | background: none !important; 1028 | } 1029 | 1030 | #qr { 1031 | right: 5px !important; 1032 | bottom: 5px !important; 1033 | top: auto !important; 1034 | left: auto !important; 1035 | background: none !important; 1036 | opacity: .3; 1037 | -moz-transition: opacity .2s ease-in-out; 1038 | } 1039 | 1040 | #qr:hover { 1041 | opacity: .8; 1042 | } 1043 | 1044 | #qr > .move > #autohide, 1045 | #qr > .move > span, 1046 | /*#qr:not(:hover) > form,*/ 1047 | #qr [type=file] > [type=button] { 1048 | display: none; 1049 | } 1050 | 1051 | #qr > .move { 1052 | color: #bbb !important; 1053 | text-transform: lowercase; 1054 | text-align: center; 1055 | cursor: default !important; 1056 | } 1057 | 1058 | /* 1059 | #qr { 1060 | opacity: .3; 1061 | background: none !important; 1062 | z-index: 6; 1063 | -moz-transition: opacity .2s ease-in-out; 1064 | } 1065 | 1066 | #qr:hover { 1067 | opacity: .8; 1068 | } 1069 | 1070 | #qr > .move { 1071 | display: none; 1072 | } 1073 | 1074 | #qr .field { 1075 | border: 1px solid #bbb !important; 1076 | padding: 0; 1077 | background: #fafafa; 1078 | } 1079 | 1080 | #qr .field:focus { 1081 | border: 1px solid cornflowerBlue !important; 1082 | } 1083 | 1084 | #qr textarea.field { 1085 | min-height: 200px !important; 1086 | resize: vertical; 1087 | } 1088 | 1089 | #qr [type=file] > [type=button] { 1090 | display: none; 1091 | } 1092 | 1093 | #qr [type=file] { 1094 | width: 30% !important; 1095 | margin: 0 !important; 1096 | } 1097 | 1098 | #qr [type=submit] { 1099 | -moz-appearance: none; 1100 | width: 30% !important; 1101 | padding: 0 !important; 1102 | border: 0; 1103 | margin: 0 !important; 1104 | } 1105 | */ 1106 | #qp { 1107 | background: #fafafa !important; 1108 | box-shadow: 0 0 5px rgba(0, 0, 0, .25); 1109 | opacity: .95; 1110 | padding: 3px 10px !important; 1111 | border-radius: 1px; 1112 | } 1113 | 1114 | #qp .post { 1115 | padding: 0 !important; 1116 | border: 0 !important; 1117 | margin: 0 !important; 1118 | } 1119 | 1120 | .qphl { 1121 | outline: 0 !important; 1122 | } 1123 | 1124 | .qphl.reply { 1125 | background: #e6e6e6 !important; 1126 | } 1127 | 1128 | /*.sideArrows.hide_reply_button { 1129 | display: block; 1130 | font-size: 12px !important; 1131 | position: absolute; 1132 | top: 1px; 1133 | right: 3px; 1134 | margin: 0 !important; 1135 | opacity: 0; 1136 | -moz-transition: opacity .3s ease-in-out; 1137 | } 1138 | 1139 | .postContainer:hover .sideArrows.hide_reply_button { 1140 | opacity: .5; 1141 | }*/ 1142 | .menu_button { 1143 | font-size: 12px !important; 1144 | color: #2d2d2d !important; 1145 | position: absolute; 1146 | top: 1px; 1147 | right: 25px; 1148 | opacity: 0; 1149 | -moz-transition: opacity .3s ease-in-out; 1150 | } 1151 | 1152 | .postContainer:hover .menu_button { 1153 | opacity: .5; 1154 | } 1155 | 1156 | /* yay, filters */ 1157 | .filter_highlight { 1158 | box-shadow: none !important; 1159 | } 1160 | 1161 | .filter_highlight .postMessage { 1162 | text-decoration: underline; 1163 | -moz-text-decoration-color: indianRed; 1164 | } 1165 | 1166 | .seaweed .reply, 1167 | #qp.seaweed { 1168 | background: -moz-linear-gradient(to right, #fafafa, #f7d79a) !important; 1169 | } 1170 | 1171 | .zixaphir .reply { 1172 | background: -moz-linear-gradient(to right, #fafafa, #7f89bd) !important; 1173 | } 1174 | 1175 | .sax .reply { 1176 | background: -moz-linear-gradient(to right, #fafafa, #c5e6ee) !important; 1177 | } 1178 | 1179 | .mayhem .reply { 1180 | background: -moz-linear-gradient(to right, #fafafa, #cd93de) !important; 1181 | } 1182 | 1183 | .mod .reply { 1184 | background: -moz-linear-gradient(to right, #fafafa, #c647c6) !important; 1185 | } 1186 | 1187 | .moot .reply { 1188 | background: -moz-linear-gradient(to right, #fafafa, #cc0000) !important; 1189 | } 1190 | 1191 | .large.mb .fileThumb { 1192 | background: skyBlue; 1193 | } 1194 | 1195 | .match .fileThumb { 1196 | background: yellowGreen; 1197 | } 1198 | 1199 | .large .fileThumb { 1200 | background: indianRed; 1201 | } 1202 | 1203 | /* 1204 | @media (min-width: 960px) {} 1205 | 1206 | page is BIGGER than 960px 1207 | 1208 | ---------------------------------------- 1209 | 1210 | @media (max-width: 960px) {} 1211 | 1212 | page is SMALLER than 960px 1213 | 1214 | */ 1215 | } 1216 | -------------------------------------------------------------------------------- /previous/curabitr1.user.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name curabitr 1 3 | @namespace github.com/openstyles/stylus 4 | @version 1.0.0 5 | @description A new userstyle 6 | @author Me 7 | ==/UserStyle== */ 8 | @-moz-document domain("boards.4chan.org") { 9 | 10 | /* defaultan */ 11 | body { 12 | background: #ebebeb url('data:image/png;base64,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') !important; 13 | padding: 0 !important; 14 | margin: 0 !important; 15 | } 16 | 17 | a { 18 | color: #2b75c0 !important; 19 | text-decoration: none !important; 20 | -webkit-transition: text-shadow .3s; 21 | -moz-transition: text-shadow .3s; 22 | } 23 | 24 | a:hover { 25 | text-shadow: 0 0 3px #3b86d2; 26 | } 27 | 28 | a:active, 29 | a:focus { 30 | outline: 0 !important; 31 | } 32 | 33 | ::selection { 34 | color: #fafafa; 35 | background-color: deepPink; 36 | text-shadow: none !important; 37 | } 38 | 39 | ::-moz-selection { 40 | color: #fafafa; 41 | background-color: deepPink; 42 | text-shadow: none !important; 43 | } 44 | 45 | /* shitblockan */ 46 | .boardBanner, 47 | /* heading/logo (cause if you don't know what board you're on, you must have problems) */ 48 | img[src^="http://static.4chan.org/support/"], 49 | /* ads (>2011 >not using adblock) */ 50 | hr, 51 | /* horizontal rules on the page */ 52 | .postingMode, 53 | /* posting mode: reply */ 54 | .navLinks, 55 | /* [return] [bottom/top] */ 56 | .pagelist .prev, 57 | .pagelist .next, 58 | /* previous and next page buttons */ 59 | .stylechanger, 60 | /* yotsuba style selector */ 61 | #absbot/* bottom nav and any copyright crap */ 62 | { 63 | display: none !important; 64 | } 65 | 66 | #boardNavDesktop { 67 | position: fixed !important; 68 | left: 0 !important; 69 | opacity: .5; 70 | top: -21px !important; 71 | -webkit-transition: all.2s; 72 | -moz-transition: all .2s; 73 | right: 0 !important; 74 | text-align: center !important; 75 | background-color: #222; 76 | background-image: -webkit-linear-gradient(#444, #222); 77 | background-image: -moz-linear-gradient(#444, #222); 78 | min-height: 20px; 79 | font-size: 0 !important; 80 | color: transparent !important; 81 | box-shadow: 0 0 20px 0 rgba(0, 0, 0, .75); 82 | border-bottom: 1px solid #222; 83 | z-index: 1; 84 | } 85 | 86 | #boardNavDesktop::after { 87 | content: 'Navigation'; 88 | font-size: 12px; 89 | color: #fafafa; 90 | position: absolute; 91 | display: inline-block; 92 | top: 21px; 93 | width: 200px; 94 | left: 50%; 95 | margin-left: -100px; 96 | background-color: #222; 97 | padding-bottom: 2px; 98 | border-bottom-left-radius: 3px; 99 | border-bottom-right-radius: 3px; 100 | } 101 | 102 | #boardNavDesktop:hover { 103 | opacity: .95; 104 | top: 0 !important; 105 | } 106 | 107 | #boardNavDesktop a { 108 | color: #ebebeb !important; 109 | padding: 0 !important; 110 | font-size: 12px !important; 111 | line-height: 20px; 112 | margin: 0 3px; 113 | -webkit-transition: text-shadow .5s; 114 | -moz-transition: text-shadow .5s; 115 | } 116 | 117 | #boardNavDesktop a:hover { 118 | text-shadow: 0 0 2px #fff, 0 0 5px #eee; 119 | } 120 | 121 | #navtopr { 122 | float: none !important; 123 | } 124 | 125 | /* announcements */ 126 | /* pick a heading and stick with it moot, damn */ 127 | .globalMessage { 128 | margin: 30px 0 20px; 129 | } 130 | 131 | .globalMessage * { 132 | font-family: 'Helvetica', 'Arial', sans-serif; 133 | color: #b90000 !important; 134 | text-shadow: 0 1px 1px #ffe9e9; 135 | margin: 0; 136 | } 137 | 138 | .globalMessage blink { 139 | text-decoration: none !important; 140 | } 141 | 142 | .globalMessage a { 143 | color: #2083fe !important; 144 | } 145 | 146 | .globalMessage a:hover { 147 | text-shadow: none; 148 | } 149 | 150 | /* for when moot and mods want to add youtube/sounds */ 151 | /* so, with some CSS, you can at least see the button, to pause the music :) */ 152 | embed { 153 | position: fixed; 154 | bottom: 0; 155 | left: 0; 156 | width: 30px !important; 157 | height: 25px !important; 158 | } 159 | 160 | /* main body */ 161 | #delform { 162 | width: 900px; 163 | margin: /*30px 75px 0 20px*/ 164 | 0 auto !important; 165 | } 166 | 167 | /* postarea */ 168 | /* to-do from the top of my head */ 169 | /* use the spoiler image from master (cause i reckon it's sexy), 170 | add :place-holder text styling, 171 | add button[disabled] (cooldown, 404) styling, 172 | either wait for the #qr rewrite, or make it look a bit more presentable: 173 | captcha image 174 | autohide fanciness 175 | opcaity transitions 176 | captcha counter 177 | autosubmit checkbox/label 178 | multiple files 179 | */ 180 | /* hiding shiz */ 181 | #postForm input[type="file"] > input[type="button"], 182 | #postForm #postPassword + span, 183 | #postForm .rules, 184 | #postForm span:empty, 185 | #postForm td:empty, 186 | #postForm > tbody > tr > td:first-of-type { 187 | display: none; 188 | } 189 | 190 | #postForm { 191 | position: fixed; 192 | right: -325px; 193 | bottom: 30px; 194 | -webkit-transition: right 2s ease-in-out 3s; 195 | -moz-transition: right 2s ease-in-out 3s; 196 | z-index: 5; 197 | } 198 | 199 | #postForm:hover { 200 | right: 5px; 201 | -webkit-transition: right .5s; 202 | -moz-transition: right .5s; 203 | } 204 | 205 | #postForm:hover textarea { 206 | right: 0; 207 | -webkit-transition: right .5s; 208 | -moz-transition: right .5s; 209 | } 210 | 211 | #postForm input:focus { 212 | right: 330px; 213 | -webkit-transition: right 1s ease-in-out 3.5s; 214 | -moz-transition: right 1s ease-in-out 3.5s; 215 | } 216 | 217 | #postForm:hover input:focus, 218 | #postForm:hover textarea:focus { 219 | right: 0; 220 | -webkit-transition: right .5s; 221 | -moz-transition: right .5s; 222 | } 223 | 224 | #postForm input:not(:focus) { 225 | right: 0; 226 | -webkit-transition: right .5s; 227 | -moz-transition: right .5s; 228 | } 229 | 230 | #postForm textarea { 231 | position: relative; 232 | right: 50px; 233 | -webkit-transition: right 1s ease-in-out 3.5s; 234 | -moz-transition: right 1s ease-in-out 3.5s; 235 | } 236 | 237 | #postForm textarea:focus { 238 | right: 330px; 239 | } 240 | 241 | #postForm input[type="text"], 242 | #postForm input[type="file"] > input[type="text"], 243 | #postForm input[name="recaptcha_response_field"] { 244 | -webkit-appearance: none; 245 | -moz-appearance: none; 246 | font-family: Helvetica, Arial, sans-serif !important; 247 | font-size: 13px !important; 248 | line-height: 18px !important; 249 | color: #222; 250 | background-color: #fafafa; 251 | padding: 2px 2px 3px !important; 252 | border: 1px solid #bbb !important; 253 | border-radius: 3px; 254 | margin: 0 !important; 255 | margin-bottom: 1px !important; 256 | width: 300px !important; 257 | vertical-align: baseline; 258 | position: relative !important; 259 | } 260 | 261 | #postForm input[type="file"] { 262 | -webkit-appearance: none; 263 | margin: 0; 264 | width: 244px !important; 265 | } 266 | 267 | #postForm input[type="text"], 268 | #postForm input[type="file"] > input[type="text"], 269 | #postForm input[name="recaptcha_response_field"] { 270 | height: auto !important; 271 | } 272 | 273 | #postForm textarea { 274 | min-height: 200px; 275 | resize: vertical; 276 | overflow: auto; 277 | } 278 | 279 | #postForm input[name="recaptcha_response_field"] { 280 | color: #222 !important; 281 | background-color: #fff; 282 | border-top-width: 0 !important; 283 | border-top-left-radius: 0; 284 | border-top-right-radius: 0; 285 | } 286 | 287 | /* silly chrumb~ */ 288 | /* well, not really. it's just that an id overrides selectors such as above (in chrumb at least) */ 289 | #postForm .recaptchatable #recaptcha_image { 290 | border: 0 !important; 291 | } 292 | 293 | #postForm .recaptchatable #recaptcha_response_field { 294 | border: 1px solid #bbb !important; 295 | border-top-width: 0 !important; 296 | } 297 | 298 | #postForm input[name="sub"], 299 | #postForm input[type="file"] > input[type="text"] { 300 | width: 244px !important; 301 | } 302 | 303 | #postForm input[name="pwd"] { 304 | color: #bbb; 305 | width: 55px !important; 306 | position: absolute !important; 307 | bottom: 0; 308 | right: 0; 309 | -webkit-transition: width .2s; 310 | -moz-transition: width .2s; 311 | } 312 | 313 | .webkit #postForm input[name="pwd"] { 314 | bottom: -1px; 315 | } 316 | 317 | #postForm input:focus { 318 | outline: none; 319 | } 320 | 321 | #postForm input[name="pwd"]:focus { 322 | width: 90px !important; 323 | z-index: 2; 324 | -webkit-transition: width .2s; 325 | -moz-transition: width .2s; 326 | } 327 | 328 | #postForm input[type="submit"], 329 | #postForm input[type="submit"][disabled] { 330 | -webkit-appearance: none; 331 | -moz-appearance: none; 332 | font-family: Helvetica, Arial, sans-serif; 333 | font-size: 13px; 334 | line-height: 18px !important; 335 | text-shadow: 0 1px 0 #fafafa; 336 | text-transform: lowercase; 337 | color: #777 !important; 338 | background-image: -webkit-linear-gradient(#fafafa, #cdcdcd); 339 | background-image: -moz-linear-gradient(#fafafa, #cdcdcd); 340 | padding: 0px 4px; 341 | border: 1px solid #bbb !important; 342 | border-radius: 3px; 343 | margin: 0 0 -0 1px !important; 344 | min-width: 55px; 345 | width: 55px; 346 | max-width: 55px; 347 | min-height: 25px; 348 | height: 25px; 349 | max-height: 25px; 350 | vertical-align: top; 351 | position: relative; 352 | cursor: pointer; 353 | } 354 | 355 | #postForm input[type="submit"][disabled]:active { 356 | background-color: #cdcdcd; 357 | } 358 | 359 | 360 | #postForm input[type="file"]::-webkit-file-upload-button { 361 | -webkit-appearance: none; 362 | -moz-appearance: none; 363 | font-family: Helvetica, Arial, sans-serif; 364 | font-size: 13px; 365 | line-height: 18px !important; 366 | text-shadow: 0 1px 0 #fafafa; 367 | text-transform: lowercase; 368 | color: #777 !important; 369 | background-image: -webkit-linear-gradient(#fafafa, #cdcdcd); 370 | background-image: -moz-linear-gradient(#fafafa, #cdcdcd); 371 | padding: 0px 4px; 372 | border: 1px solid #bbb; 373 | border-radius: 3px; 374 | margin: 0 0 -0 1px !important; 375 | min-width: 100px; 376 | width: 100px; 377 | max-width: 100px; 378 | min-height: 25px; 379 | height: 25px; 380 | max-height: 25px; 381 | vertical-align: top; 382 | position: relative; 383 | cursor: pointer; 384 | } 385 | 386 | #postForm input[type="submit"]:disabled { 387 | cursor: default; 388 | text-shadow: none; 389 | background-image: none; 390 | background-color: #cdcdcd; 391 | } 392 | 393 | #postForm { 394 | border-spacing: 0; 395 | border-collapse: collapse; 396 | } 397 | 398 | #postForm #recaptcha_table tr[height="73"] td[style] a:not(:first-of-type), 399 | #postForm #recaptcha_table tr[height="73"] td:last-of-type, 400 | #postForm #recaptcha_table tr:last-of-type td:not(:first-of-type) { 401 | display: none; 402 | } 403 | 404 | #postForm #recaptcha_widget_div { 405 | width: 300px !important; 406 | position: relative; 407 | } 408 | 409 | #postForm #recaptcha_table tr[height] { 410 | height: auto !important; 411 | } 412 | 413 | #postForm #recaptcha_table *:not(input):not(img) { 414 | padding: 0 !important; 415 | } 416 | 417 | #postForm #recaptcha_image { 418 | border: 0 !important; 419 | position: relative !important; 420 | } 421 | 422 | #postForm #recaptcha_image > img { 423 | width: 298px !important; 424 | border: 1px solid #bbb !important; 425 | border-bottom: 0 !important; 426 | border-top-left-radius: 3px; 427 | border-top-right-radius: 3px; 428 | } 429 | 430 | #postForm #recaptcha_reload { 431 | position: absolute !important; 432 | top: 0 !important; 433 | right: 0 !important; 434 | background-image: url('http://i.imgur.com/ljf6O.png'); 435 | height: 0 !important; 436 | width: 16px !important; 437 | padding-top: 16px !important; 438 | } 439 | 440 | /* [O Spoiler Image] */ 441 | #postForm tr:nth-of-type(3) td:not(.postblock) { 442 | font-size: 0 !important; 443 | color: transparent; 444 | } 445 | 446 | #postForm tr:nth-of-type(3) label { 447 | font-size: 8pt; 448 | position: absolute; 449 | bottom: 2px; 450 | left: 5px; 451 | line-height: 25px; 452 | text-transform: lowercase; 453 | letter-spacing: -5px; 454 | -webkit-transition-property: color, letter-spacing; 455 | -webkit-transition: .5s ease-in-out; 456 | -moz-transition-property: color, letter-spacing; 457 | -moz-transition: .5s ease-in-out; 458 | z-index: 5; 459 | } 460 | 461 | #postForm tr:nth-of-type(3) label:hover { 462 | color: black; 463 | letter-spacing: 0; 464 | } 465 | 466 | #postForm input[type="checkbox"] { 467 | -moz-appearance: none; 468 | border: 1px solid #bbb !important; 469 | border-radius: 3px !important; 470 | margin: 0 3px 0 0; 471 | vertical-align: middle; 472 | } 473 | 474 | /* okay, so chrumb fucks us over with checkboxes */ 475 | /* it removes the tick! so, either have a border/box-shadow/background-color change */ 476 | /* seaweeedchan has content: 'img'; (would it be cross browser?) */ 477 | /* images with the borders */ 478 | img:-moz-broken { 479 | background: black; 480 | } 481 | 482 | img[md5] { 483 | border: 4px solid #fafafa !important; 484 | border-radius: 4px; 485 | box-shadow: 0 0 0 1px #bbb, 0 0 0px rgba(0, 0, 0, .25); 486 | margin: 3px 7px 5px 3px !important; 487 | -moz-transition: box-shadow .2s; 488 | } 489 | 490 | img[md5]:hover { 491 | box-shadow: 0 0 0 1px #bbb, 0 0 5px rgba(0, 0, 0, .25); 492 | } 493 | 494 | .reply img, 495 | .replyhl img { 496 | margin-bottom: 0 !important; 497 | } 498 | 499 | .abbr, 500 | span.omittedposts { 501 | color: #222 !important; 502 | } 503 | 504 | .omittedposts { 505 | font-size: 11px; 506 | text-shadow: none !important; 507 | display: block; 508 | clear: both; 509 | float: right; 510 | padding: 2px 5px; 511 | margin-right: 20px; 512 | margin-bottom: -1px; 513 | background-image: -webkit-linear-gradient(#fafafa, #ddd); 514 | background-image: -moz-linear-gradient(#fafafa, #ddd); 515 | border-top-left-radius: 5px; 516 | border-top-right-radius: 5px; 517 | } 518 | 519 | .container { 520 | display: block; 521 | font-size: 8pt; 522 | margin-left: 30px; 523 | line-height: 10pt; 524 | color: #777; 525 | } 526 | 527 | .container + br { 528 | display: none; 529 | } 530 | 531 | .container::before { 532 | content: 'quoted by: '; 533 | } 534 | 535 | .container::after { 536 | content: '.'; 537 | } 538 | 539 | .container .backlink:last-of-type:not(:first-of-type)::before { 540 | content: ' and '; 541 | color: #777; 542 | text-shadow: none; 543 | cursor: text; 544 | } 545 | 546 | .container .backlink:not(:last-of-type):not(:nth-last-of-type(2))::after { 547 | content: ','; 548 | color: #777; 549 | text-shadow: none; 550 | cursor: text; 551 | } 552 | 553 | span[id^="no"] > a:nth-of-type(1) { 554 | font-size: 0; 555 | color: transparent !important; 556 | } 557 | 558 | span[id^="no"] > a:nth-of-type(1):before { 559 | content: "#"; 560 | font-size: 10pt; 561 | color: #2b75c0 !important; 562 | } 563 | 564 | span[id^="nothread"] { 565 | font-size: 0; 566 | color: transparent; 567 | } 568 | 569 | span[id^="nothread"] a { 570 | font-size: 10pt; 571 | color: #2b75c0; 572 | } 573 | 574 | span[id^="nothread"] a:nth-of-type(3) { 575 | display: inline-block; 576 | background-image: -webkit-linear-gradient(#fafafa, #ccc); 577 | background-image: -moz-linear-gradient(#fafafa, #ccc); 578 | border: 1px solid #bbb; 579 | border-radius: 3px; 580 | text-transform: lowercase; 581 | color: #555 !important; 582 | text-shadow: 0 1px 0 #fff; 583 | padding: 3px 5px; 584 | margin: 0 5px; 585 | } 586 | 587 | span[id^="nothread"] a:nth-of-type(3):hover { 588 | box-shadow: 0 0 2px #bbb; 589 | } 590 | 591 | span[id^="nothread"] a:nth-of-type(3):active { 592 | background-image: -webkit-linear-gradient(#ccc, #eee); 593 | background-image: -moz-linear-gradient(#ccc, #eee); 594 | } 595 | 596 | /* put all replies underneath op */ 597 | table { 598 | clear: both; 599 | position: relative; 600 | } 601 | 602 | /* replies */ 603 | .post { 604 | font: 10pt 'Helvetica', 'Arial', sans-serif !important; 605 | line-height: 12pt !important; 606 | color: #777 !important; 607 | background-image: -webkit-linear-gradient(#eee, #ddd) !important; 608 | background-image: -moz-linear-gradient(#eee, #ddd) !important; 609 | box-shadow: 0 0 1px #999; 610 | padding: 5px !important; 611 | border: 0 !important; 612 | border-radius: 5px !important; 613 | position: relative; 614 | width: 100%; 615 | } 616 | 617 | td.replyhl { 618 | font: 10pt 'Helvetica', 'Arial', sans-serif !important; 619 | line-height: 12pt !important; 620 | color: #777 !important; 621 | background-image: -webkit-linear-gradient(#eee, #ddd) !important; 622 | background-image: -moz-linear-gradient(#eee, #ddd) !important; 623 | box-shadow: 0 0 5px #999; 624 | padding: 5px !important; 625 | border: 0 !important; 626 | border-radius: 5px !important; 627 | position: relative; 628 | width: 100%; 629 | } 630 | 631 | /* post time */ 632 | time, 633 | .posttime { 634 | color: #777; 635 | } 636 | 637 | /* filesize and filenames */ 638 | .filesize { 639 | font: 10pt 'Helvetica', 'Arial', sans-serif; 640 | color: #777; 641 | line-height: 12pt; 642 | } 643 | 644 | .filesize a:first-of-type::after { 645 | content: " "; 646 | } 647 | 648 | .reply .filesize a:first-of-type::before, 649 | .replyhl .filesize a:first-of-type::before { 650 | content: " : "; 651 | color: #777; 652 | } 653 | 654 | .filesize span { 655 | font-size: 0; 656 | color: transparent !important; 657 | } 658 | 659 | .filesize span:after { 660 | content: attr(title); 661 | font-size: 10pt; 662 | color: #777 !important; 663 | } 664 | 665 | .forwardlink { 666 | color: #102073 !important; 667 | } 668 | 669 | .unkfunc { 670 | color: #669933 !important; 671 | } 672 | 673 | /* (user was warned/banned for this post) */ 674 | blockquote > b[style="color:red;"] { 675 | background-color: rgba(255, 0, 0, 0.15); 676 | border-radius: 3px; 677 | padding: 2px 5px 3px; 678 | } 679 | 680 | /* moot and mods */ 681 | .postername > span, 682 | .postertrip > span, 683 | .commentpostername > span { 684 | font-size: 12pt; 685 | text-shadow: 0px 0px 5px pink; 686 | } 687 | 688 | blockquote > div { 689 | background-color: rgba(255, 0, 0, .15); 690 | padding: 3px !important; 691 | border: 0 !important; 692 | margin: 0 !important; 693 | } 694 | 695 | /* subject / name */ 696 | .filetitle, 697 | .replytitle, 698 | .postername, 699 | .commentpostername { 700 | font-weight: 600 !important; 701 | background: none !important; 702 | display: inline-block; 703 | unicode-bidi: normal; 704 | } 705 | 706 | .filetitle, 707 | .replytitle { 708 | color: #575757 !important; 709 | } 710 | 711 | .filetitle:not(:empty), 712 | .replytitle:not(:empty) { 713 | margin-left: 2px; 714 | } 715 | 716 | /* 717 | .linkmail { 718 | color: #102073 !important; 719 | text-shadow: 0 0 3px #3b86d2; 720 | } 721 | 722 | .linkmail > .postertrip { 723 | color: blue; 724 | } 725 | 726 | .postername + .linkmail::before, 727 | .commentpostername + .linkmail::before { 728 | font-weight: 100; 729 | content: ' ['attr(href)']'; 730 | } 731 | 732 | .postername > .linkmail::after, 733 | .commentpostername > .linkmail::after { 734 | font-weight: 100; 735 | content: ' ['attr(href)']'; 736 | } 737 | */ 738 | .linkmail { 739 | color: #222 !important; 740 | } 741 | 742 | span + .linkmail:before { 743 | content: ''; 744 | } 745 | 746 | .linkmail:before { 747 | content: ' ['attr(href)'] '; 748 | font-weight: 100; 749 | } 750 | 751 | .postername, 752 | .commentpostername { 753 | color: #222 !important; 754 | } 755 | 756 | /* trip */ 757 | .postertrip { 758 | font-family: "Courier New", monospace; 759 | color: #222 !important; 760 | text-shadow: 0 0 1px #102073; 761 | background: none !important; 762 | } 763 | 764 | blockquote { 765 | font: 10pt 'Helvetica', 'Arial', sans-serif !important; 766 | color: #222; 767 | line-height: 12pt !important; 768 | margin: 0 0 0 20px !important; 769 | } 770 | 771 | input[type="checkbox"] { 772 | -moz-appearance: none; 773 | margin: 0; 774 | border: 1px solid #AAA !important; 775 | background: rgba(255, 255, 255, .5) !important; 776 | border-radius: 3px !important; 777 | } 778 | 779 | /* bye bye unicode fags :) */ 780 | .filetitle, 781 | .replytitle, 782 | .postername, 783 | .commentpostername, 784 | .postertrip { 785 | unicode-bidi: normal; 786 | display: inline-block; 787 | } 788 | 789 | /* spoilers */ 790 | .spoiler { 791 | color: transparent !important; 792 | background: #222 !important; 793 | border-radius: 3px; 794 | box-shadow: 0 0 3px rgba(0, 0, 0, .25); 795 | -webkit-transition: all .2s; 796 | -moz-transition: all .2s; 797 | } 798 | 799 | .spoiler:hover { 800 | color: #222 !important; 801 | background: none !important; 802 | box-shadow: none; 803 | } 804 | 805 | .quotelink { 806 | text-shadow: none; 807 | } 808 | 809 | .spoiler .unkfunc { 810 | color: transparent !important; 811 | text-shadow: none; 812 | } 813 | 814 | .spoiler:hover .unkfunc { 815 | color: #669933 !important; 816 | } 817 | 818 | /* pages */ 819 | .pages { 820 | float: none !important; 821 | border-spacing: 0; 822 | border-collapse: collapse; 823 | display: block; 824 | position: relative; 825 | clear: both; 826 | width: 100%; 827 | background: none !important; 828 | border: 0 !important; 829 | text-align: center; 830 | margin: 20px 0; 831 | } 832 | 833 | .pages, 834 | .pages tbody, 835 | .pages tr, 836 | .pages td { 837 | display: block; 838 | } 839 | 840 | .pages td { 841 | padding: 0 !important; 842 | font-size: 0 !important; 843 | color: transparent; 844 | word-spacing: 7px; 845 | } 846 | 847 | .pages td:not(:nth-of-type(2)) { 848 | display: none; 849 | } 850 | 851 | .pages a, 852 | .pages b { 853 | font-size: 14px !important; 854 | color: #2d2d2d !important; 855 | padding: 3px 2px !important; 856 | min-width: 16px; 857 | display: inline-block; 858 | background-image: -webkit-linear-gradient(#fff, #ddd); 859 | background-image: -moz-linear-gradient(#fff, #ddd); 860 | box-shadow: 0 1px 2px rgba(0, 0, 0, .5); 861 | border-radius: 3px !important; 862 | -webkit-transition: box-shadow .2s; 863 | -moz-transition: box-shadow .2s; 864 | text-shadow: none; 865 | } 866 | 867 | .pages a:hover { 868 | box-shadow: 0 1px 4px rgba(0, 0, 0, .75); 869 | } 870 | 871 | .pages b { 872 | font-weight: 600; 873 | color: #ededed !important; 874 | background-image: -webkit-linear-gradient(#4c4c4c, #2d2d2d); 875 | background-image: -moz-linear-gradient(#4c4c4c, #2d2d2d); 876 | cursor: default; 877 | } 878 | 879 | /* deleting posts and reporting */ 880 | table[align=right] td { 881 | font: 8pt 'Helvetica', 'Arial', sans-serif !important; 882 | color: #777; 883 | background-color: #fafafa; 884 | position: fixed; 885 | right: -277px; 886 | bottom: 425px; 887 | opacity: .5; 888 | padding: 1px 0 0 5px !important; 889 | height: 25px; 890 | line-height: 25px !important; 891 | border-top-left-radius: 5px; 892 | border-bottom-left-radius: 5px; 893 | -webkit-transition: all .2s; 894 | -moz-transition: all .2s; 895 | } 896 | 897 | table[align=right] td:hover { 898 | opacity: .9; 899 | right: 0; 900 | } 901 | 902 | table[align=right] input[name=pwd] { 903 | -webkit-appearance: none; 904 | -moz-appearance: none; 905 | padding: 3px 2px !important; 906 | border: 1px solid #bbb !important; 907 | color: #bbb; 908 | border-radius: 3px; 909 | margin: 0 !important; 910 | line-height: 16px !important; 911 | width: 75px !important; 912 | } 913 | 914 | table[align=right] input[value=Delete], 915 | table[align=right] input[value=Report] { 916 | -webkit-appearance: none; 917 | -moz-appearance: none; 918 | cursor: pointer; 919 | font: 8pt 'Helvetica', 'Arial', sans-serif; 920 | background-image: -webkit-linear-gradient(#fafafa, #ccc); 921 | background-image: -moz-linear-gradient(#fafafa, #ccc); 922 | border: 1px solid #bbb; 923 | border-radius: 3px; 924 | text-transform: lowercase; 925 | color: #555; 926 | text-shadow: 0 1px 0 #fff; 927 | padding: 2px 0 1px 0 !important; 928 | min-height: 24px !important; 929 | margin-right: 3px; 930 | } 931 | 932 | .stub { 933 | margin: 8px 0; 934 | clear: both; 935 | padding: 5px; 936 | background-image: -webkit-linear-gradient(#eee, #ddd); 937 | background-image: -moz-linear-gradient(#eee, #ddd); 938 | box-shadow: 0 0 1px #999; 939 | border-radius: 5px; 940 | } 941 | 942 | .stub a { 943 | display: block; 944 | } 945 | 946 | .op > a[href="javascript:;"]:first-of-type { 947 | padding: 2px; 948 | margin-right: 5px; 949 | background-image: -webkit-linear-gradient(#eee, #ddd); 950 | background-image: -moz-linear-gradient(#eee, #ddd); 951 | box-shadow: 0 0 1px #999; 952 | border-radius: 5px; 953 | } 954 | 955 | .stub:hover { 956 | box-shadow: 0 0 2px #999; 957 | } 958 | 959 | .stub:hover a { 960 | text-shadow: none 961 | } 962 | 963 | /* thread watcher */ 964 | #watcher { 965 | position: fixed !important; 966 | opacity: .5; 967 | padding: 5px; 968 | border: 0 !important; 969 | border-radius: 4px; 970 | background-color: #e7e7e7 !important; 971 | box-shadow: 0 0 10px rgba(0, 0, 0, .25); 972 | -webkit-transition: opacity .1s; 973 | -moz-transition: opacity .1s; 974 | } 975 | 976 | #watcher:hover { 977 | opacity: .8; 978 | } 979 | 980 | #watcher > div { 981 | padding: 0 !important; 982 | } 983 | 984 | #watcher > .move { 985 | color: #777; 986 | text-align: center; 987 | text-transform: lowercase; 988 | text-decoration: none !important; 989 | } 990 | 991 | /* stats */ 992 | #stats { 993 | color: #222; 994 | opacity: .5; 995 | padding: 5px; 996 | border-radius: 4px; 997 | background-color: #e7e7e7 !important; 998 | box-shadow: 0 0 10px rgba(0, 0, 0, .25); 999 | } 1000 | 1001 | #stats:hover #postcount::after { 1002 | content: " post(s)"; 1003 | } 1004 | 1005 | #stats:hover #imagecount::after { 1006 | content: " image(s)"; 1007 | } 1008 | 1009 | #qp { 1010 | border: 0 !important; 1011 | background: rgba(235, 235, 235, .85) !important; 1012 | padding: 5px !important; 1013 | border-radius: 3px; 1014 | } 1015 | 1016 | .qphl { 1017 | outline: 0 !important; 1018 | box-shadow: 0 0 5px #999 !important; 1019 | } 1020 | 1021 | #updater { 1022 | color: #777 !important; 1023 | background-image: -webkit-linear-gradient(#eee, #ddd) !important; 1024 | background-image: -moz-linear-gradient(#eee, #ddd) !important; 1025 | top: auto !important; 1026 | right: 30px !important; 1027 | bottom: 0 !important; 1028 | left: auto !important; 1029 | border: 0 !important; 1030 | padding: 3px; 1031 | border-top-left-radius: 3px; 1032 | border-top-right-radius: 3px; 1033 | box-shadow: 0 0 1px #999; 1034 | z-index: 3; 1035 | } 1036 | 1037 | #updater .move { 1038 | cursor: default !important; 1039 | text-align: center; 1040 | } 1041 | 1042 | #updater #count:not(.new):not(.error) { 1043 | display: none; 1044 | } 1045 | 1046 | #updater .new { 1047 | color: #20cc50; 1048 | background: none !important; 1049 | } 1050 | 1051 | #updater .error { 1052 | color: #b90000 !important; 1053 | } 1054 | 1055 | #updater input { 1056 | margin-left: 3px; 1057 | } 1058 | 1059 | #updater input[name="Interval"] { 1060 | -webkit-appearance: none; 1061 | -moz-appearance: none; 1062 | text-align: center; 1063 | padding: 3px 2px; 1064 | border: 1px solid #bbb; 1065 | border-radius: 3px; 1066 | } 1067 | 1068 | #updater div:last-of-type { 1069 | text-align: center; 1070 | } 1071 | 1072 | #updater input[value="Update Now"] { 1073 | -webkit-appearance: none; 1074 | -moz-appearance: none; 1075 | cursor: pointer; 1076 | font-family: 'Helvetica', 'Arial', sans-serif; 1077 | color: #555; 1078 | text-shadow: 0 1px 0 #fff; 1079 | background-image: -webkit-linear-gradient(#fafafa, #ccc); 1080 | background-image: -moz-linear-gradient(#fafafa, #ccc); 1081 | padding: 1px 3px; 1082 | border: 1px solid #bbb; 1083 | border-radius: 3px; 1084 | margin: 1px; 1085 | } 1086 | 1087 | #updater input[value="Update Now"]:hover { 1088 | box-shadow: 0 0 2px #bbb; 1089 | } 1090 | 1091 | #imgControls input[type="checkbox"] { 1092 | -moz-appearance: none; 1093 | border: 1px solid #bbb !important; 1094 | border-radius: 3px !important; 1095 | margin: 0 4px 0 0; 1096 | vertical-align: baseline; 1097 | } 1098 | 1099 | #imgControls { 1100 | background-image: -webkit-linear-gradient(#eee, #ddd); 1101 | background-image: -moz-linear-gradient(#eee, #ddd); 1102 | padding: 3px 2px 2px; 1103 | border-top-left-radius: 3px; 1104 | border-top-right-radius: 3px; 1105 | box-shadow: 0 0 1px #999; 1106 | position: fixed; 1107 | bottom: 0; 1108 | right: 75px; 1109 | z-index: 2; 1110 | } 1111 | 1112 | #imgControls:hover > #imageType { 1113 | visibility: visible; 1114 | width: auto; 1115 | } 1116 | 1117 | #imgControls > #imageType { 1118 | -moz-appearance: none; 1119 | visibility: collapse; 1120 | width: 1px; 1121 | color: #777; 1122 | background: none; 1123 | border: 0; 1124 | } 1125 | 1126 | #imageType > *:not(option) { 1127 | visibility: collapse; 1128 | } 1129 | 1130 | #imgControls > label { 1131 | font-size: 0; 1132 | } 1133 | 1134 | .op { 1135 | position: relative; 1136 | } 1137 | 1138 | .reportbutton { 1139 | color: #2d2d2d !important; 1140 | text-shadow: none !important; 1141 | background-image: -webkit-linear-gradient(#eee, #ddd); 1142 | background-image: -moz-linear-gradient(#eee, #ddd); 1143 | padding: 2px 3px 3px; 1144 | border-radius: 3px; 1145 | box-shadow: 0 0 1px #999; 1146 | position: absolute; 1147 | top: 0; 1148 | right: 0; 1149 | -webkit-transition: box-shadow .2s; 1150 | -moz-transition: box-shadow .2s; 1151 | } 1152 | 1153 | .reportbutton:hover { 1154 | box-shadow: 0 0 3px #999; 1155 | } 1156 | } 1157 | -------------------------------------------------------------------------------- /previous/ss16.user.min.css: -------------------------------------------------------------------------------- 1 | /* ==UserStyle== 2 | @name ss18 3 | @version 2.0.6 4 | @namespace https://github.com/saxamaphone69/ 5 | @description a self-centered, fresh attempt at (user)styling 4chan 6 | @author sax 7 | @homepageURL https://github.com/saxamaphone69/ss16 8 | @supportURL https://github.com/saxamaphone69/ss16/issues 9 | @license CC-BY-SA-4.0 10 | ==/UserStyle== */ 11 | @-moz-document domain('boards.4chan.org'){:root{--primary-50:rgba(243,229,245,.5);--primary-300:#ba68c8;--primary-500:#9c27b0;--primary-700:#7b1fa2;--primary-dark:#454545;--secondary-300:#ffb74d;--secondary-500:#ff9800;--secondary-700:#f57c00;--background-primary:#fff;--background-secondary:#fafafa;--background-hint:#e8e8e8;--background-outline:rgba(205,205,205,.75);--red-50:#ffebee;--red-300:#e57373;--red-500:#f44336;--red-700:#d32f2f;--blue-50:#e3f2fd;--blue-300:#64b5f6;--blue-500:#2196f3;--blue-700:#1976d2;--green-50:#e8f5e9;--green-300:#81c784;--green-500:#4caf50;--green-700:#388e3c;--purple-50:#f3e5f5;--purple-300:#ba68c8;--purple-500:#9c27b0;--purple-700:#7b1fa2;--orange-50:#fff3e0;--orange-300:#ffb74d;--orange-500:#ff9800;--orange-700:#f57c00;--gray-50:#fafafa;--gray-100:#f5f5f5;--gray-300:#e0e0e0;--gray-500:#9e9e9e;--gray-700:#616161;--gray-900:#212121;--text-primary-on-primary:#fff;--text-secondary-on-primary:rgba(255,255,255,.7);--text-hint-on-primary:rgba(255,255,255,.5);--text-disabled-on-primary:rgba(255,255,255,.5);--text-icon-on-primary:rgba(255,255,255,.5);--text-primary-on-primary-light:#fff;--text-secondary-on-primary-light:rgba(255,255,255,.7);--text-hint-on-primary-light:rgba(255,255,255,.5);--text-disabled-on-primary-light:rgba(255,255,255,.5);--text-icon-on-primary-light:rgba(255,255,255,.5);--text-primary-on-primary-dark:#fff;--text-secondary-on-primary-dark:rgba(255,255,255,.7);--text-hint-on-primary-dark:rgba(255,255,255,.5);--text-disabled-on-primary-dark:rgba(255,255,255,.5);--text-icon-on-primary-dark:rgba(255,255,255,.5);--text-primary-on-secondary:rgba(0,0,0,.87);--text-secondary-on-secondary:rgba(0,0,0,.54);--text-hint-on-secondary:rgba(0,0,0,.38);--text-disabled-on-secondary:rgba(0,0,0,.38);--text-icon-on-secondary:rgba(0,0,0,.38);--text-primary-on-secondary-light:rgba(0,0,0,.87);--text-secondary-on-secondary-light:rgba(0,0,0,.54);--text-hint-on-secondary-light:rgba(0,0,0,.38);--text-disabled-on-secondary-light:rgba(0,0,0,.38);--text-icon-on-secondary-light:rgba(0,0,0,.38);--text-primary-on-secondary-dark:#fff;--text-secondary-on-secondary-dark:rgba(255,255,255,.7);--text-hint-on-secondary-dark:rgba(255,255,255,.5);--text-disabled-on-secondary-dark:rgba(255,255,255,.5);--text-icon-on-secondary-dark:rgba(255,255,255,.5);--text-primary-on-background:rgba(0,0,0,.87);--text-secondary-on-background:rgba(0,0,0,.54);--text-hint-on-background:rgba(0,0,0,.38);--text-disabled-on-background:rgba(0,0,0,.38);--text-icon-on-background:rgba(0,0,0,.38);--text-primary-on-light:rgba(0,0,0,.87);--text-secondary-on-light:rgba(0,0,0,.54);--text-hint-on-light:rgba(0,0,0,.38);--text-disabled-on-light:rgba(0,0,0,.38);--text-icon-on-light:rgba(0,0,0,.38);--text-primary-on-dark:#fff;--text-secondary-on-dark:rgba(255,255,255,.7);--text-hint-on-dark:rgba(255,255,255,.5);--text-disabled-on-dark:rgba(255,255,255,.5);--text-icon-on-dark:rgba(255,255,255,.5);--font-family-default:arimo,roboto,helvetica,arial,sans-serif;--font-family-compliment:karla,sans-serif;--font-family-monospace:inconsolata,roboto mono,monospace,monospace;--font-family-icon:material icons,font awesome;--depth-material:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);--depth-default:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2)}:root.ss16--invert{--primary-50:rgba(60,1,68,.25);--background-primary:#2b3942;--background-secondary:#2c343a;--background-hint:#1e2a31;--background-outline:rgba(33,40,44,.5);--text-primary-on-background:#8a9ba1;--text-secondary-on-background:rgba(138,155,161,.7);--text-hint-on-background:rgba(138,155,161,.5)}:root.nws{--primary-50:rgba(239,235,233,.5);--primary-300:#a1887f;--primary-500:#795548;--primary-700:#5d4037;--secondary-300:#81c784;--secondary-500:#4caf50;--secondary-700:#388e3c}:root.site-loading #delform::before{content:'';display:block;border:.5rem solid var(--text-hint-on-background);border-top-color:var(--primary-500);width:10rem;height:10rem;margin:auto;border-radius:50%;animation:loading 1s infinite}:root.site-loading #delform{display:flex;align-items:center;justify-content:center;height:calc(100vh - 30rem)}:root.site-loading,:root.site-loading body{padding:0!important}:root.site-loading #bannerCnt,:root.site-loading #header-bar,:root.site-loading .board,:root.site-loading .navLinks,:root.site-loading .pagelist{display:none!important}@keyframes loading{to{transform:rotate(359deg)}}.arc-ads,.center,[hidden]{display:none!important}#navbotright,.ad-plea,.desktop:not(#bannerCnt):not(.postInfo):not(.postNum):not(.summary):not(.pagelist):not(#boardNavDesktopFoot),.mobile,.postForm,.postInfo>input,.qr-link-container,.sideArrows,hr:not(#unread-line){display:none}:root{font-family:var(--font-family-default);font-size:1rem;line-height:1.5;color:var(--text-primary-on-background);background-color:var(--background-hint);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-y:scroll;box-sizing:border-box}*,::after,::before{box-sizing:inherit}:focus{outline:0}::-moz-selection{background-color:var(--primary-50)}::selection{background-color:var(--primary-50)}::-webkit-scrollbar{width:.5rem;height:.5rem;background-color:var(--gray-300)}::-webkit-scrollbar-thumb{background-color:var(--gray-500)}blockquote,body,h1,h2,h3,h4,h5,h6,p{margin:0}h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:700;margin-bottom:.5rem}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-bottom:1rem}.name,.subject,b,legend,strong,th{font-weight:700}[style*='weight:']{font-weight:700!important}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:inherit;background-color:transparent;text-decoration:none;transition:color .25s}.linkify{text-decoration:solid underline;text-decoration-skip:ink}.postertrip,pre{font-size:1em}.postertrip,.posteruid,code,kbd,pre{font-family:var(--font-family-monospace)}code,kbd{font-size:87.5%;padding:.25rem .5rem .125rem;border-radius:2px}code{word-break:break-word;color:var(--text-primary-on-light);background-color:var(--gray-100)}kbd{color:var(--text-primary-on-dark);background-color:var(--gray-900)}embed,iframe,img,svg,video{vertical-align:middle;height:auto;max-width:100%}audio{vertical-align:middle}svg{fill:currentColor}iframe{border:0}table{border-collapse:collapse;border-spacing:0}progress{vertical-align:baseline}button,input,select,textarea{font:inherit;color:inherit;margin:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical;overflow:auto}fieldset{min-width:0;padding:0;border:0;margin:0}legend{box-sizing:border-box;color:inherit;display:block;max-width:100%;padding:0;white-space:normal}.hand,label{cursor:pointer}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}.postNum .replylink::after{content:'View'}.postNum .replylink::after,button,input[type=button],input[type=submit]{font-size:1rem;color:var(--text-primary-on-primary);background-color:var(--primary-500);text-align:center;display:inline-block;vertical-align:middle;padding:.375rem .75rem;border:0;border-radius:2px;transition:background-color .25s}.postNum .replylink:hover::after,button:hover,input[type=button]:hover,input[type=submit]:hover{background-color:var(--primary-700);cursor:pointer}button:disabled{opacity:.75;background-color:var(--primary-500);cursor:not-allowed}.field{background-color:transparent;padding:.375rem .75rem;border:1px solid var(--background-outline);border-radius:2px;transition:all .25s}.field:focus{border-color:var(--primary-300)}.field:disabled{color:var(--text-disabled-on-light);background-color:var(--background-hint);cursor:not-allowed}::placeholder{color:var(--text-hint-on-background);opacity:1}select{background-color:transparent;padding:.375rem .75rem;border:1px solid var(--background-outline);border-radius:2px}.postMessage>s{text-decoration:none;color:var(--gray-900)!important;background-color:var(--gray-900);transition:color .25s}.postMessage s:hover{color:var(--gray-50)!important}.postMessage s a{color:var(--gray-900);border-bottom:0}.postMessage s a:hover{color:var(--gray-50)}#unread-line{box-sizing:content-box;height:1px;background-color:var(--green-500);overflow:visible;border:0;margin:0 0 1rem}.prettyprinted{font-size:87.5%;-webkit-font-smoothing:subpixel-antialiased;white-space:pre-wrap;word-spacing:normal;word-break:normal;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;overflow:auto;padding:.5rem;margin:0;display:inline-block;vertical-align:middle;max-width:100%;background-color:#2f3640;border-radius:2px}.prettyprinted .kwd,.prettyprinted .typ{color:#4fc1e9}.prettyprinted .com{color:#656d78}.prettyprinted .tag{color:#ed5565}.prettyprinted .atn{color:#a0d468}.prettyprinted .atv,.prettyprinted .str{color:#ffce54}.prettyprinted .dec,.prettyprinted .lit{color:#ac92ec}.prettyprint,.prettyprinted .clo,.prettyprinted .fun,.prettyprinted .opn,.prettyprinted .pln,.prettyprinted .pun,.prettyprinted .var{color:#e6e9ed}.prettyprint{font-size:87.5%;-webkit-font-smoothing:subpixel-antialiased;white-space:pre-wrap;word-spacing:normal;word-break:normal;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;hyphens:none;overflow:auto;padding:.5rem;margin:0;display:inline-block;vertical-align:middle;max-height:70vh;max-width:100%;background-color:#2f3640;border-radius:2px}.menu-button{display:inline-block;position:relative;cursor:pointer}#add-post::after,#index-rev::after,#index-search-clear::after,#navlinks a::after,.checkbox-letter::after,.close::after,.copy-text-link::after,.download-link::after,.entry input[type=checkbox]::after,.fa::after,.file--gif:not(.expanded-image)>.post>.file>.fileThumb::after,.file--video:not(.expanded-image)>.post>.file>.fileThumb::after,.gal-close::after,.gal-next::after,.gal-prev::after,.gal-start::after,.gal-stop::after,.has-submenu::after,.jump::after,.menu-button::after,.n-pu::after,.pagelist .next a::after,.pagelist .prev a::after,.qr-preview-spoiler::after,.report-link::after,.show-announcement.entry::after,.watch-thread-link::after{font-family:var(--font-family-icon);font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';color:inherit;visibility:visible}.fa-spin::after{animation:spin 2s infinite linear}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(359deg)}}.menu-button::after{content:'more_vert'}.fa-eye::after{content:'remove_red_eye'}.fa-expand::after{content:'fullscreen'}.fa-compress::after{content:'fullscreen_exit'}.fa-picture-o::after{content:'photo'}.fa-comment-o::after{content:'comment'}.fa-refresh::after{content:'refresh'}.fa-wrench::after{content:'settings'}.fa-minus-square-o::after,.fa-minus-square::after{content:'remove_circle'}.fa-plus-square-o::after,.fa-plus-square::after{content:'add_circle'}.close::after,.fa-times::after,.gal-close::after{content:'close'}.watch-thread-link::after{content:'favorite_border'}.watch-thread-link.watched::after{content:'favorite'}#navlinks a:first-of-type::after{content:'keyboard_arrow_up'}#navlinks a:last-of-type::after{content:'keyboard_arrow_down'}#index-rev::after{content:'swap_vert'}.pagelist .prev a::after{content:'arrow_back'}.pagelist .next a::after{content:'arrow_forward'}.fa-edit::after{content:'format_paint'}.copy-text-link::after,.fa-link::after{content:'link'}#paste-area::after{content:'content_paste'}.fa-clock-o::after{content:'timer'}#index-search-clear::after,.fa-times-circle::after{content:'cancel'}.checkbox-letter::after,.qr-preview-spoiler::after{content:'strikethrough_s'}#add-post::after,#qr .fa-plus-square::after{content:'add_box'}.gal-start::after{content:'play_arrow'}.gal-stop::after{content:'stop'}.gal-prev::after,.left .has-submenu::after{content:'keyboard_arrow_left'}.gal-next::after,.has-submenu::after{content:'keyboard_arrow_right'}.jump::after{content:'subdirectory_arrow_right'}.show-announcement.entry::after{content:'chat_bubble'}.report-link::after{content:'warning'}.file--video:not(.expanded-image)>.post>.file>.fileThumb::after{content:'play_circle_outline'}.file--gif:not(.expanded-image)>.post>.file>.fileThumb::after{content:'gif'}.download-link::after,.fa-download::after{content:'file_download'}.n-pu::after{content:'person'}.entry input[type=checkbox]::after{content:'check_box_outline_blank';font-size:1.125rem;color:var(--text-icon-on-background);visibility:visible;display:block}.entry input[type=checkbox]:checked::after{content:'check_box';color:var(--green-500)}.archivedIcon,.closedIcon,.stickyIcon{background-image:url("data:image/svg+xml, %3Csvg height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");height:0;width:1.5rem;padding-top:1.5rem;background-repeat:no-repeat}.archivedIcon,.stickyIcon{background-image:url("data:image/svg+xml, %3Csvg height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E")}.stickyIcon{background-image:url("data:image/svg+xml, %3Csvg height='24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E")}.identityIcon{vertical-align:baseline}:root.shortcut-icons #shortcuts .fa{font-size:0;visibility:hidden}:root:not(.shortcut-icons) #shortcuts .fa::after{display:none}#watcher-link.replies-quoting-you::after{color:var(--secondary-500)}.boardBanner{color:var(--text-primary-on-primary);text-align:center;height:40vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background-image:linear-gradient(pink,#6495ed);overflow:hidden;pointer-events:none;user-select:none;contain:strict}.boardTitle{font-family:var(--font-family-compliment);font-size:calc(100% + 5vw);line-height:1;text-transform:lowercase;text-shadow:1rem 1rem 0 var(--primary-500);will-change:text-shadow;transition:text-shadow .1s;z-index:1}.boardSubtitle,.boardTitle{white-space:pre-line}.boardSubtitle[title],.boardTitle[title]{cursor:help}.boardSubtitle[contenteditable=true],.boardTitle[contenteditable=true]{cursor:text;border-bottom:1px dashed}.postMessage>.quote{color:var(--green-500)}.warning{color:var(--red-500)}[color=red],[style*='color: red'],[style*='color:red']{color:var(--red-500)!important}.move{cursor:grab;overflow:hidden}.move:active{cursor:grabbing}.posteruid{font-size:0}.painted{font-size:1rem;display:inline-flex;align-items:center;justify-content:center;padding:.25rem .5rem .125rem;border-radius:2px;position:relative}.painted:hover::after{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;background-color:rgba(0,0,0,.1)}:root.fixed.top-header{padding-top:3rem}:root.fixed.bottom-header{padding-bottom:3rem}:root.fixed.top-header #header-bar{top:0}:root.fixed.bottom-header #header-bar{bottom:0}:root.fixed #header-bar{position:fixed}:root.centered-links #board-list,:root.centered-links #full-board-list .boardList,:root.centered-links #header-bar .boardList{justify-content:center}#header-bar{color:var(--text-primary-on-primary);background-color:var(--primary-500);position:relative;z-index:10;padding:0 1.5rem;left:0;right:0;display:flex;justify-content:space-between;align-items:center;will-change:background-color,transform;transition:background-color .25s,transform .25s}:root.fixed.top-header #header-bar.autohide:not(:hover){margin-bottom:-1rem;transform:translateY(-100%)}:root.fixed.bottom-header #header-bar.autohide:not(:hover){transform:translateY(100%)}#board-list,#custom-board-list,#full-board-list,#full-boord-list .boardList{display:flex;align-items:center}#board-list{font-family:var(--font-family-compliment);flex:1;user-select:none}#board-list .boardList{flex-wrap:wrap}#board-list a{text-transform:lowercase;display:inline-flex;justify-content:center;align-items:center;position:relative;padding:0 .75rem;height:3rem;min-width:3.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:opacity;transition:opacity .25s;flex-grow:0;flex-shrink:0}#board-list a:not(.current){opacity:.7}#board-list a:not(.current):hover{opacity:.85}#board-list .current{opacity:1}#board-list a::after{display:none;position:absolute;bottom:0;left:0;width:100%;height:2px;content:'';pointer-events:none;background-color:var(--secondary-500)}#board-list .current::after,#board-list a:hover::after,#fourchanx-settings label{display:block}#full-board-list .boardList span,.pagelist button{display:none}#shortcuts:empty{display:none}:root.autohiding-scrollbar #shortcuts{margin-right:2rem}:root:not(.fappeTyme) #shortcut-fappe,:root:not(.werkTyme) #shortcut-werk{display:none}.indicator,.shortcut{display:inline-flex;align-items:center;justify-content:center}.indicator{background-color:var(--secondary-500);width:2rem;border-radius:2px;color:var(--text-primary-on-primary);height:2rem;transition:background-color .25s}.indicator:hover{background-color:var(--secondary-700);cursor:pointer}#shortcuts{display:flex;align-items:center}.shortcut{color:var(--text-icon-on-primary);min-width:3rem;height:3rem;padding:0 .5rem;transition:opacity .25s}.shortcut:hover{color:var(--text-secondary-on-primary)}.shortcut:not(#shortcut-fappe):not(#shortcut-werk):not(#shortcut-updater):not(#shortcut-stats):not(#shortcut-menu){font-family:var(--font-family-compliment)}.shortcut>.menu-button{display:inline-flex}#scroll-marker{position:absolute;display:none;height:1rem;left:0;right:0}#header-bar:not(.autohide) #scroll-marker{pointer-events:none}:root.fixed #scroll-marker{display:block}:root.fixed.top-header #scroll-marker{top:100%}:root.fixed.bottom-header #scroll-marker{bottom:100%}#scroll-progress{position:absolute;top:100%;left:0;width:100%;height:.25rem;opacity:0;background-color:var(--gray-300);border:0;will-change:opacity;transition:opacity .25s;pointer-events:none}:root.bottom-header #scroll-progress{bottom:100%;top:auto}#header-bar.scrolled #scroll-progress,#index-search-clear:hover::after,.notification .fa-times:hover::after{opacity:1}#scroll-progress::-webkit-progress-bar{background-color:var(--gray-300)}#scroll-progress::-webkit-progress-value{background-color:var(--green-500)}#scroll-progress::-moz-progress-bar{background-color:var(--green-500)}#notifications{position:fixed;top:0;height:0;text-align:center;left:0;right:0;visibility:visible}:root.fixed.top-header #header-bar.autohide #notifications,:root.fixed.top-header:not(.gallery-open) #notifications{position:absolute;top:100%}.notification{color:var(--text-primary-on-primary);margin:.5rem auto 0;border-radius:2px;width:50rem;max-width:100%;position:relative;padding:.5rem 1rem;will-change:opacity;transition:opacity .25s}.notification.error{background-color:var(--red-500)}.notification.warning{background-color:var(--orange-500)}.notification.success{background-color:var(--green-500)}.notification.info{background-color:var(--blue-500)}.notification .fa-times::after{position:absolute;right:1rem;top:50%;transform:translateY(-50%);opacity:.75;transition:opacity .25s}.message{white-space:pre-line;margin-right:2rem;max-height:10rem;overflow:auto}#boardNavDesktopFoot a:hover::after,.message a{border-bottom:1px solid}:root.hide-announcement .globalMessage,:root.tainted .report-error{display:none}.globalMessage{contain:content;position:fixed;bottom:1.5rem;left:1.5rem;max-width:25vw;z-index:7;background-color:var(--background-primary);display:flex;align-items:center;justify-content:flex-start;padding:1rem 1rem .5rem 1.5rem;border-radius:2px;box-shadow:0 0 1.5rem rgba(33,33,33,.25);transition:box-shadow .25s}.globalMessage:hover{box-shadow:0 0 1.75rem rgba(33,33,33,.5)}.globalMessage .hide-announcement{font-size:0;margin-left:.5rem}.globalMessage .hide-announcement>a{font-size:1rem;color:var(--primary-500);text-transform:uppercase;display:inline-block;padding:.25rem .5rem;border-radius:2px;transition:all .25s}.globalMessage .hide-announcement>a:hover{background-color:var(--primary-50)}#thread-stats,#updater{font-family:var(--font-family-monospace)}:root.float #thread-stats,:root.float #updater{position:fixed;z-index:5;background-color:var(--primary-500);display:inline-flex;justify-content:center;align-items:center;height:1.75rem;padding:.5rem}#thread-stats span,#updater{color:var(--text-secondary-on-primary)}#updater>.move{position:absolute;z-index:-1;top:-.125rem;right:-.125rem;bottom:-.125rem;left:-.125rem}#updater .new{color:var(--green-500)}#update-status:not(.empty)+#update-timer:not(.empty):not(.loading){margin-left:.5rem}#page-count,#update-timer{cursor:pointer}#thread-stats{color:var(--text-hint-on-primary)}#thread-stats .warning{color:var(--red-500)}:root.float #thread-stats>.move>span:not(#page-count){pointer-events:none}.navLinks.json-index{color:var(--text-primary-on-primary);background-color:var(--primary-500);width:75rem;padding:0 1.5rem;max-width:100%;margin:-2rem auto 3rem;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:3rem}#index-search{color:var(--text-primary-on-background);background-color:var(--background-primary);padding-right:1.5rem;margin:0 1rem}#index-search-clear{font-size:0;width:0}#index-search-clear::after{position:relative;color:var(--red-500);font-size:1.125rem;left:-2.5rem;opacity:.75;transition:opacity .25s}#hidden-label{color:var(--text-secondary-on-primary)}#index-rev{visibility:hidden;width:1.5rem;height:100%;margin:0 .25rem;display:inline-flex;align-items:center}#index-rev::after{color:var(--text-icon-on-primary);visibility:visible;cursor:pointer;transition:color .25s}#index-rev:checked::after{color:var(--secondary-500)}.navLinks select{color:var(--text-primary-on-background);background-color:var(--background-primary);margin-right:.25rem}#index-search:not([data-searching])+#index-search-clear,.archlistlink,.bottomlink,.cataloglink,.indexlink,:root:not(.catalog-mode) #hidden-label,:root:not(.catalog-mode) #index-size,:root:not(.paged-mode) .pagelist{display:none}#index-options{display:flex;align-items:center}#lastlong-options{display:inline-flex;flex-direction:column;margin-right:.25rem}#lastlong-options>input{font-family:var(--font-family-monospace);text-align:center;background:0 0;height:50%;width:2.25rem;padding:0;border:0;margin:1px 0}@media (max-width:75rem){#header-bar{padding:0 .5rem}#board-list a,.shortcut{font-size:80%;padding:0 .25rem;min-width:1rem}}:root.index .board{min-height:calc(100vh - (40vh + 6rem))}:root.thread-view .board{min-height:calc(100vh - (40vh + 2rem + 95px + 121px))}.closed{position:fixed;display:flex;z-index:10;bottom:0;left:50%;height:3rem;align-items:center;justify-content:center;padding:0 1.5rem;transform:translate(-50%,0);color:var(--text-primary-on-dark);border-radius:2px;background-color:var(--gray-900)}.board{max-width:70rem;margin:-2rem auto 0;position:relative;z-index:1;contain:layout}.thread{padding:0 1.5rem;margin-bottom:1rem}.board .thread:last-of-type{margin-bottom:2rem}.postContainer{position:relative;margin-bottom:1rem}.section-main>fieldset>div[data-name]:last-of-type,.thread .postContainer:last-of-type{margin-bottom:0}.post,.summary{background-color:var(--background-primary)}.summary{text-align:center;line-height:3;margin-top:1px;z-index:1;position:relative;display:block}.post{display:flow-root;border-radius:2px;padding:.5rem 1rem;transition:background-color .25s;box-shadow:0 2px 10px 0 rgba(33,33,33,.1)}.container>a,.postMessage a,.postNum>a,.summary>.replylink{color:var(--primary-500)}.container>a:hover,.postMessage a:hover,.postNum>a:hover,.summary>.replylink:hover{color:var(--primary-700)}.postInfo{display:flex;align-items:center;padding:.5rem 1rem .275rem .5rem;background-color:rgba(117,117,117,.025)}.noFile .postInfo{border-bottom:1px solid var(--background-hint)}.postInfo>.subject{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.post{padding:0}.replylink:visited::after{background-color:var(--primary-700)}.postMessage:empty{display:none}.postMessage{font-size:1.125rem;margin:.5rem 1rem}:root.bottom-backlinks .container{display:block;font-size:87.5%;font-family:var(--font-family-monospace);padding:.25rem .5rem;background-color:rgba(117,117,117,.025);border-top:1px solid var(--background-hint);clear:both}:root .container:empty{display:none}.summary{margin-bottom:1rem}.inlined{opacity:.7}.inline{margin:.5rem 0;clear:both;display:flow-root;box-shadow:0 0 1rem rgba(33,33,33,.25);border-radius:2px}.postMessage .inline{margin-bottom:-1rem}.container+.inline{margin-top:1.5rem}.container~.inline:last-of-type{margin-bottom:.5rem}.postNum>span:last-child{font-size:0;vertical-align:middle}.pagelist,:root .pagelist:not(.json-index){display:flex;text-align:center}.pagelist a{color:var(--text-secondary-on-background);display:block;transition:color .25s,background-color .25s}.pagelist .pages>strong>a,.pagelist a:hover{color:var(--text-primary-on-primary);background-color:var(--primary-300)}.pagelist .pages>strong>a{background-color:var(--primary-500)}.pagelist .next,.pagelist .prev{width:10%}.pagelist .next a::after,.pagelist .prev a::after{font-size:4.25rem;flex:1;height:3rem;overflow:hidden;display:block;padding-top:.25rem}.pagelist .pages:not(.cataloglink){font-size:0;flex:1;display:flex}.pages a{font-size:3.5rem;font-weight:700;line-height:1;padding-top:.25rem;height:3rem;flex:1;overflow:hidden}.pages strong{flex:1}:root.hide-bottom-board-list #boardNavDesktopFoot{display:none}#boardNavDesktopFoot::before{content:'Full 4chan Board List';font-size:1.25rem;display:block;padding:2rem 1.5rem 0;max-width:75rem;margin:auto;cursor:ns-resize;color:var(--text-primary-on-background)}#boardNavDesktopFoot:not(.is-active)::before{padding-bottom:2rem}#boardNavDesktopFoot{font-size:0;font-family:var(--font-family-compliment);color:var(--text-secondary-on-background);background-color:var(--background-primary);border-top:1px solid var(--background-outline)}#boardNavDesktopFoot .boardList{display:flex;flex-wrap:wrap;flex-direction:column;height:calc(2rem*20);padding:1rem 1.5rem 2rem;width:100%;max-width:75rem;margin:auto;transition:height .25s;overflow-x:auto}#boardNavDesktopFoot:not(.is-active) .boardList{height:0;padding:0;overflow:hidden}#boardNavDesktopFoot a{display:block;margin-right:1rem;margin-bottom:.25rem}#boardNavDesktopFoot .current,#boardNavDesktopFoot a:hover,#footer-links a:hover{color:var(--text-primary-on-background)}#boardNavDesktopFoot a::before{content:attr(href);font-size:1rem;display:inline-block;margin-right:.5rem;min-width:5ch}#boardNavDesktopFoot a::after{content:attr(title);font-size:1rem;display:inline}.absBotText{font-size:.85rem;color:var(--text-secondary-on-background);background-color:var(--background-primary);user-select:none}.absBotDisclaimer{display:block;max-width:75rem;padding:2rem 1.5rem 1rem;margin:auto;border-top:1px solid var(--background-outline)}#footer-links{font-size:0;max-width:75rem;padding:0 1.5rem 2rem;margin:0 auto;position:relative}#footer-links a{font-size:.85rem;display:inline-block;width:calc((100%/4) - 1rem);margin-right:1rem}#footer-links::after{content:url(https://s.4cdn.org/image/favicon.ico);display:block;height:1rem;width:1rem;position:absolute;right:1.5rem;bottom:2.125rem;filter:grayscale(1);opacity:.5}.subject:not(:empty)::after{content:' by ';font-weight:400;color:var(--text-secondary-on-background);margin-right:.25rem}.ip-counter{color:var(--text-secondary-on-background)}.abbr,.dateTime,.page-num{color:var(--text-hint-on-background)}.dateTime{margin:0 .25rem}.postNum>a:first-child{font-size:0}.postNum>a:first-child::after{content:'#';font-size:1rem}.file{color:var(--text-hint-on-light);position:relative}.fileThumb{float:left;margin:.5rem}.fileText{font-size:87.5%;padding:0 1rem .125rem;background-color:rgba(117,117,117,.025);border-bottom:1px solid var(--background-hint)}.fileText a{color:var(--primary-300);unicode-bidi:isolate}.fa-download::after{font-size:1.125rem;vertical-align:bottom}.expanded-image>.post>.file>.fileThumb>img[data-md5],.expanded-image>.post>.file>.fileThumb>video[data-md5],.fileText-original,.fnswitch:hover>.fntrunc,.fnswitch:not(:hover)>.fnfull,.full-image{display:none}.fnfull{overflow-wrap:break-word}.full-image{cursor:pointer}video.full-image{min-width:20rem}.expanded-image>.post>.file>.fileThumb>.full-image{display:inline}.expanded-image{clear:left}.expanding{opacity:.5}:root.fit-height .full-image{max-height:100vh}:root.fixed.fit-height .full-image{max-height:calc(100vh - 3rem)}:root.fit-width .full-image{max-width:100%}:root.ua-gecko.fit-width .full-image{width:100%}.expanded-image.file--wide .postMessage,.fileThumb>.warning{clear:both}.expanded-image.file--wide>.post>.file>.fileThumb{position:relative;display:block!important;max-width:80vw;width:80vw;left:calc(-40vw + (70rem/2) - 2rem)}.expanded-image.file--wide>.post>.file>.fileThumb>.full-image{width:100%}.hide-reply-button,.hide-thread-button{position:absolute;top:1rem;right:2.5rem;opacity:0;z-index:1;will-change:opacity;transition:opacity .25s}.postContainer:hover>.hide-thread-button,.postContainer:hover>div>.hide-reply-button{opacity:.75}.fa-minus-square-o::after,.fa-minus-square::after{font-size:1.125rem;color:var(--text-secondary-on-background)}.stub~*,div[data-checked=false]>.suboption-list{display:none}.stub{display:flex;background-color:var(--background-primary);justify-content:space-between;align-items:center;padding:.5rem 1rem;height:3rem}.stub>a:first-child{display:flex}.stub .fa-plus-square,.stub .fa-plus-square-o{display:inline-flex;align-items:center;justify-content:center;margin-right:.25rem}.stub>.menu-button{color:var(--text-icon-on-background);display:inline-flex;align-items:center;justify-content:center;opacity:0;will-change:opacity;transition:opacity .25s}.stub:hover>.menu-button,.stub>.menu-button.active{opacity:1}#ihover,#qp{position:fixed;z-index:15}#qp .post{border:1px solid var(--background-outline);margin:1rem 1rem 1rem -1rem}#qp.warning{background-color:var(--background-primary);padding:.5rem 1rem}:root.catalog-mode #navlinks,:root.fappeTyme .thread>.noFile,:root.fappeTyme .threadContainer>.noFile{display:none}:root.werkTyme .catalog-thumb:not(.deleted-file):not(.no-file),:root.werkTyme .postContainer:not(.noFile) .fileThumb,:root:not(.werkTyme) .werkTyme-filename{display:none}.exif{font-size:.75rem;display:none}#overlay{position:fixed;z-index:16;background-color:rgba(33,33,33,.75);top:0;left:0;width:100%;height:100%}#fourchanx-settings{position:fixed;z-index:17;background-color:var(--background-primary);top:50%;left:50%;transform:translate(-50%,-50%);width:75rem;max-width:90%;height:90vh;margin:auto;display:flex;flex-direction:column;contain:paint;animation-name:bounceIn;animation-duration:.75s;animation-fill-mode:both}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate(-50%,-50%) scale3d(.3,.3,.3)}20%{transform:translate(-50%,-50%) scale3d(1.1,1.1,1.1)}40%{transform:translate(-50%,-50%) scale3d(.9,.9,.9)}60%{opacity:1;transform:translate(-50%,-50%) scale3d(1.03,1.03,1.03)}80%{transform:translate(-50%,-50%) scale3d(.97,.97,.97)}to{opacity:1;transform:translate(-50%,-50%) scale3d(1,1,1)}}#fourchanx-settings nav{font-size:0;font-family:var(--font-family-compliment);color:var(--text-primary-on-primary);background-color:var(--primary-500);display:flex;align-items:center;padding:0 1.5rem;text-transform:lowercase}.credits,.sections-list{display:flex}#fourchanx-settings nav a:not([download]){font-size:1rem;display:inline-flex;justify-content:center;align-items:center;height:3rem;padding:0 .75rem;position:relative;min-width:3.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;will-change:opacity;opacity:.7;transition:opacity .25s;flex-grow:0;flex-shrink:0}#fourchanx-settings nav a:not([download]):hover{opacity:.85;cursor:pointer}#fourchanx-settings nav a.tab-selected,.post:hover>.postInfo>.menu-button,.post>.postInfo>.menu-button.active{opacity:1}#fourchanx-settings nav a:not(.close)::after{display:none;position:absolute;bottom:0;left:0;width:100%;height:2px;content:'';pointer-events:none;background-color:var(--secondary-500)}#fourchanx-settings nav a.tab-selected::after,#fourchanx-settings nav a:not(.close):hover::after{display:block}.imp-exp-result{flex:1;margin:0}.section-container{flex:1;overflow:auto;overscroll-behavior:contain;padding:0 1rem}.section-container>section{padding:.5rem 0 1rem}#fourchanx-settings fieldset{padding:1rem;border:1px solid rgba(33,33,33,.25);border-radius:2px;margin-bottom:1rem}#fourchanx-settings fieldset:last-of-type{margin:0}#fourchanx-settings legend{padding:0 .5rem}#fourchanx-settings textarea{font-family:var(--font-family-monospace);width:100%}#fourchanx-settings .description{color:var(--text-secondary-on-background);display:block}#fourchanx-settings button+.description{display:inline-block;margin-left:1rem}.suboption-list{position:relative;margin-left:1rem}.section-main>fieldset>div[data-name]{margin-left:4rem;margin-bottom:.5rem}.suboption-list>div[data-name]{margin-top:.5rem}.suboption-list>div[data-name]:not(:last-of-type){margin-bottom:.5rem}.section-main input[type=checkbox]{visibility:hidden;position:absolute;left:-99rem}.section-main label{position:relative}.section-main label::after,.section-main label::before{content:'';display:inline-block;position:absolute;transition:all .25s}.section-main label::before{opacity:.38;border-radius:1rem;width:3rem;height:1rem;background-color:#000;left:-4rem;top:1rem}.section-main div[data-checked=true]>label::before{background-color:var(--secondary-300);opacity:.5}.section-main label::after{background-color:#fafafa;border-radius:50%;width:1.5rem;height:1.5rem;left:-4.25rem;top:.75rem;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.section-main div[data-checked=true]>label::after{background-color:var(--secondary-500);transform:translateX(2rem)}.section-filter select{width:100%;margin-bottom:1rem}.section-filter ul{padding:0 2rem;margin:1rem 0}.section-filter textarea,.section-sauce textarea{height:40rem}#sauce-doc-expand:not(:checked)~#sauce-doc{max-height:12rem;overflow:auto}#sauce-doc>label{float:right;margin:0 .5rem}#sauce-doc{margin-bottom:1rem}#sauce-doc-expand+.riceCheck{display:none}.section-advanced>fieldset:first-child{position:relative}#archive-board-select{position:absolute;background-color:var(--background-primary);top:0;left:7.5rem}#archive-table{width:100%}#archive-table .archive-cell{text-align:center;width:calc(100%/3)}#lastarchivecheck+label{float:right}.section-advanced .note{font-size:80%;color:var(--text-secondary-on-background);margin-left:1rem}.section-advanced a{color:var(--primary-500)}.section-advanced textarea{height:10rem}.section-advanced textarea[name=archiveLists]{height:5rem}.favicon-preview>img:nth-of-type(3n+1){margin-left:.5rem}.section-keybinds table{margin:auto}.section-keybinds .field{font-family:var(--font-family-monospace)}.unscroll{overflow:hidden}#navlinks{position:fixed;z-index:10;top:5rem;right:0;font-size:0;color:var(--text-secondary-on-primary);background-color:var(--primary-500)}#navlinks a:hover::after{background-color:var(--primary-700);transition:background-color .25s}.post .menu-button{position:absolute;top:1rem;right:1rem;z-index:2}.post .menu-button::after{font-size:1.125rem;color:var(--text-secondary-on-background)}.post>.postInfo>.menu-button{opacity:0;will-change:opacity;transition:opacity .25s}.menu-button.active::after{border-radius:2px;box-shadow:0 0 .125rem .125em var(--primary-50)}#menu,.submenu{background-color:var(--background-primary);padding:.5rem 0;border:1px solid rgba(33,33,33,.25);border-radius:2px}#menu{z-index:16;font-size:90%;color:var(--text-primary-on-background);white-space:nowrap;position:fixed}.entry{line-height:2.5rem;display:block;position:relative;min-width:12.5rem;cursor:pointer;padding:0 1rem;transition:background-color .25s}.entry:hover{background-color:var(--background-secondary)}.entry .shortcut-text{font-size:75%;color:var(--text-hint-on-background);margin-left:.5rem}.entry.has-shortcut-text{display:flex;justify-content:space-between;align-items:center}.entry::after,.show-announcement.entry::after{color:var(--text-icon-on-background);position:absolute;right:.5rem;font-size:1rem;line-height:2.5rem}.submenu{display:none;position:absolute;left:100%;margin-top:calc((.5rem + 1px)*-1)}.submenu[style*='m: 0']{margin-top:0;margin-bottom:calc((.5rem + 1px)*-1)}.focused>.submenu{display:block}.entry .field{width:auto}.entry input[type=number]{width:5rem;padding:0 0 0 .375rem}.entry input[type=checkbox]{visibility:hidden;margin-right:.5rem}:root.ua-gecko .entry input[type=checkbox]{visibility:visible}:root.fixed-watcher #thread-watcher{z-index:10;position:fixed}#thread-watcher{z-index:5;position:absolute;background-color:var(--background-primary);white-space:nowrap;min-width:10rem}#thread-watcher>.move{font-family:var(--font-family-compliment);text-transform:lowercase;background-color:var(--primary-500);display:flex;align-items:center;height:3rem;padding:0 1.5rem;color:var(--text-primary-on-primary)}#thread-watcher>.move>.refresh{display:inline-flex;align-items:center;margin-left:.5rem;opacity:.7;transition:opacity .25s}#thread-watcher>.move>.refresh:hover,.watch-thread-link:hover::after{opacity:.85}#watcher-status{flex:1}#thread-watcher>.move>.menu-button{font-family:var(--font-family-default);text-transform:capitalize;display:inline-flex;align-items:center;margin-right:.5rem}#thread-watcher>.move>.close{font-size:0}#watched-threads{overflow-x:hidden;overflow-y:auto;border:1px solid var(--background-outline);border-top:0}#watched-threads:empty::after{content:'No threads being watched.';display:block;color:var(--text-hint-on-background);padding:.25rem 1rem}:root.fixed-watcher #watched-threads{max-height:85vh}:root:not(.fixed-watcher) #watched-threads:not(:hover){max-height:210px;overflow-y:hidden}#watched-threads>div{display:flex;align-items:center;height:3rem;padding:0 1.5rem}#watched-threads>div:nth-of-type(even),.flashListing tr:nth-of-type(odd){background-color:var(--background-secondary)}#watched-threads .fa-times{display:inline-flex;align-items:center;margin-right:.5rem;color:var(--red-500)}#watched-threads .fa-times:hover{color:var(--red-700)}#watched-threads .dead-thread>.watcher-link{text-decoration:line-through;color:var(--text-hint-on-background);opacity:.75}#watched-threads .replies-read{color:var(--text-secondary-on-background)}#watched-threads>.current .watcher-title{font-weight:700}#watched-threads .watcher-link{max-width:22.5rem;display:inline-flex;flex-direction:row}#watched-threads .watcher-unread{flex:0;margin-right:.25rem}#watched-threads .watcher-title{overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}#watched-threads .replies-unread .watcher-link{color:var(--blue-500)}#watched-threads .replies-quoting-you .watcher-link{color:var(--red-500)}.watch-thread-link{position:relative;display:inline-block;vertical-align:middle}.watch-thread-link::after{color:var(--red-500);opacity:.7;transition:opacity .25s}.watch-thread-link.watched::after{opacity:1}.watch-thread-link::before{content:'';position:absolute;opacity:0;pointer-events:none;border-radius:50%;background-color:rgba(222,68,44,.26);height:1.25rem;width:1.25rem;transform-origin:50% 50%;transform:scale(.75);transition:opacity .25s,transform .25s}.watch-thread-link:active::before{opacity:1;transform:scale(2)}#embedding{position:fixed;z-index:10}#embedding.empty,.embedder:not(.embedded)>span{display:none}#embedding>div:first-child{display:flex;font-size:0;color:var(--text-primary-on-primary);background-color:var(--primary-500);padding:0 1.5rem;height:3rem;align-items:center}#embedding .move{flex:1}#embedding .move::before{content:'embedded content';font-family:var(--font-family-compliment);font-size:1rem}#embedding .jump::after,#qr .persona button{margin-right:.5rem}#media-embed{background-color:var(--background-primary)}#autohide,#file-n-submit:not(.has-file) #qr-filerm,#qr .oekaki-bg input[name=oekaki-bg]:not(:checked)+input[name=oekaki-bgcolor],#qr .oekaki.has-file,#qr select[data-name=thread],#qr.autohide:not(.focus):not(:hover):not(:active)>form,#qr.forced-anon [name=name],#qr.forced-anon [name=sub],#qr.reply-to-thread [name=filetag],#qr.reply-to-thread [name=sub],#qr.tex-preview .textarea>:not(#tex-preview),#qr:not(.dump) #dump-list-container,#qr:not(.has-math) #tex-preview-button,#qr:not(.has-sjis) #sjis-toggle,#qr:not(.tex-preview) #tex-preview,body:not(.board_f) #qr [name=filetag]{display:none}#qr{position:fixed;z-index:10;background-color:var(--background-primary);min-width:30rem;max-width:50rem;contain:paint;box-shadow:0 2px 10px 0 rgba(33,33,33,.1)}#qr>.move{color:var(--text-primary-on-primary);background-color:var(--primary-500);padding:0 1.5rem;display:flex;height:3rem;align-items:center;justify-content:space-between}#qr>.move>label{font-family:var(--font-family-compliment);text-transform:lowercase}#qr>.move>.close{font-size:0}#qr>form{padding:1rem;border:1px solid var(--background-outline);border-top:0;max-height:calc(100vh - 5rem);overflow-x:hidden;overflow-y:auto}#qr .persona{display:flex;margin-bottom:.5rem}#qr .persona .field{flex:1}#qr .persona .field:not(:first-of-type){margin-left:.5rem}#qr .persona .field:focus,#qr .persona .field:hover{flex:1.5}#qr.sjis-preview #sjis-toggle,#qr.tex-preview #tex-preview-button{background-color:var(--primary-300)}#qr .captcha-root,#qr .textarea{position:relative;margin-bottom:.5rem}#qr textarea{display:block;min-height:10rem;min-width:100%}#char-count{position:absolute;pointer-events:none;font-size:.75rem;right:.5rem;bottom:.5rem}#qr.captcha-v1 #qr-captcha-iframe{display:none}#qr.captcha-v1 .captcha-img{text-align:center;min-height:59px;min-width:302px;margin-bottom:.5rem;cursor:pointer}#qr.captcha-v1 .captcha-input{width:100%;margin-bottom:.5rem}#qr .captcha-container>div{margin:auto;width:304px;overflow:hidden}#qr .captcha-counter{display:block;width:100%;text-align:center;pointer-events:none}#qr.captcha-open .captcha-counter{position:absolute;bottom:3px}#qr .captcha-counter>a{pointer-events:auto;display:inline-block}#qr:not(.captcha-open) .captcha-counter>a{display:block;width:100%}#qr.captcha-v2 #qr-captcha-iframe{width:302px;height:423px;border:0;display:block;margin:auto}.goog-bubble-content{max-width:100vw;max-height:100vh;overflow:auto}.goog-bubble-content iframe{position:static!important}#g-recaptcha{min-height:78px;height:auto}#dump-list-container{position:relative;overflow-y:hidden;margin-bottom:.5rem}#dump-list{overflow:auto;white-space:nowrap;display:flex;flex-wrap:wrap;min-height:8.5rem;max-height:10rem}#dump-list .qr-preview:only-of-type>.remove,#file-n-submit.has-file #paste-area,#file-n-submit.has-file #url-button,#file-n-submit:not(.custom-cooldown) #custom-cooldown-button,#file-n-submit:not(.has-file) #qr-spoiler-label,#qr:not(.has-spoiler) #qr-spoiler-label,#qr:not(.has-spoiler) .qr-preview-spoiler,.qr-preview:not(.has-file) label{display:none}.qr-preview{display:inline-block;flex:none;counter-increment:thumbnails;height:7.5rem;width:7.5rem;cursor:move;padding:.25rem;opacity:.5;margin-right:.25rem;margin-bottom:.25rem;position:relative;overflow:hidden;background-size:cover;background-color:var(--gray-50);will-change:opacity,transform;transition:opacity .25s,transform .25s}.qr-preview::before{content:counter(thumbnails);position:aboslute;top:0;right:0;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;width:1.5rem;height:1.5rem;color:var(--text-primary-on-dark);background-color:var(--background-outline);border-radius:50%}.qr-preview:focus,.qr-preview:hover{opacity:.85}#selected{opacity:1}.qr-preview.drag{transform:scale(.8)}.qr-preview.over{transform:scale(1.1);z-index:1}.qr-preview .fa-times-circle::after{font-size:1.125rem;color:var(--red-500);cursor:pointer}.qr-preview.has-file>span{color:var(--text-primary-on-primary)}#add-post,.qr-preview-spoiler{font-size:0}#add-post{position:absolute;right:0;bottom:0}#add-post::after{font-size:3rem;color:var(--blue-500);transition:color .25s}#add-post:hover::after{color:var(--blue-700)}#qr .oekaki{display:flex;align-items:stretch;margin-bottom:.5rem}#qr-draw-button{width:15%;margin-right:.5rem}#qr .oekaki>label{flex:1;margin-right:.5rem}#qr .oekaki>label>span{color:var(--text-hint-on-background);margin-right:.25rem}#qr .oekaki>label>input{max-width:10rem}#qr .oekaki-bg{display:inline-block;width:15%}#qr .oekaki-bg input[name=oekaki-bg]{position:absolute;z-index:1}#qr .oekaki-bg input[name=oekaki-bgcolor]{position:absolute;top:0;left:0;height:100%;width:100%;border:none;padding:0;background:0 0}#file-n-submit{display:flex;align-items:stretch}#qr-file-button{width:15%;margin-right:.5rem}#qr-filename-container{all:unset;flex:1;display:flex;align-items:stretch;position:relative;margin-right:.5rem}#file-n-submit.has-file #qr-no-file,#qr-filename{display:none}#file-n-submit.has-file #qr-filename,#qr-no-file{flex:1;padding:.375rem .75rem .375rem 0;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#qr-no-file{color:var(--text-hint-on-background)}#qr-filename{background-color:transparent;border:0}#qr .oekaki-bg,.qr-spoiler-label{position:relative}#qr-file-spoiler{position:absolute;opacity:0;pointer-events:none}#qr-file-spoiler:checked+.checkbox-letter::after{opacity:1}.checkbox-letter{font-size:0}#qr-filename-container .fa::after,.checkbox-letter::after{margin-top:.375rem;margin-right:.25rem;opacity:.55;cursor:pointer;transition:opacity .25s}#qr-filename-container .fa:hover::after,#qr.dump #dump-button .fa::after,.checkbox-letter:hover::after,.gal-buttons>a:hover::after{opacity:.85}#custom-cooldown-button.disabled{opacity:.25}#file-n-submit input[type=submit]{background-color:var(--secondary-500);width:25%}#file-n-submit input[type=submit]:hover{background-color:var(--secondary-700)}#qr [type=file]{visibility:hidden;position:absolute}.flagSelector,select[name=filetag]{width:100%;margin-top:.5rem}.hashlink::before{content:' '}.backlink.forwardlink,.quotelink.forwardlink{background-image:url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cstyle%3E.st%7Banimation:shift .5s linear infinite;stroke:currentColor;%7D@keyframes shift %7Bto %7Btransform:translateX%28-20px%29;%7D%7D%3C/style%3E%3Cpath fill='none' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3' class='st' style='stroke:var%28--primary-500, currentColor%29;'/%3E%3C/svg%3E");background-position:0 100%;background-size:auto 3px;background-repeat:repeat-x}.qmark-dead,.qmark-op{opacity:.5;position:relative;font-size:75%;line-height:0;vertical-align:baseline;top:-.5em}.deadlink{opacity:.5;text-decoration:line-through}:root.thread-hide .party-hat{left:19px}.party-hat{left:0;margin-top:-80px;position:absolute;pointer-events:none;z-index:1}.threadContainer{margin:0 0 1rem 1.5rem}#a-gallery,.gal-viewport{display:flex;flex-direction:row}#a-gallery{z-index:20;background-color:rgba(33,33,33,.75);top:0;right:0;bottom:0;left:0;position:fixed}.gal-viewport{align-items:stretch;flex:1;overflow:hidden;position:relative}.gal-buttons{position:absolute;top:1.5rem;left:50%;display:flex;color:var(--text-primary-on-dark);background-color:rgba(33,33,33,.5);padding:.5rem 1rem;border-radius:2px}.gal-buttons.gal-playing>.gal-start,.gal-buttons:not(.gal-playing)>.gal-stop{display:none}.gal-buttons>a::after{font-size:3rem;margin-right:1rem;opacity:.7;transition:opacity .25s}.gal-buttons>a:last-child::after{margin-right:0}.gal-close{font-size:0}.gal-count,.gal-name{display:block;position:absolute;left:50%;transform:translateX(-50%);background-color:rgba(33,33,33,.5);padding:.5rem 1rem;border-radius:2px}.gal-name{z-index:1;bottom:1.5rem;color:var(--text-primary-on-dark)}.gal-name:hover{color:var(--primary-300)}.gal-count{bottom:4.5rem;color:var(--text-hint-on-dark);pointer-events:none}.gal-count>span{color:var(--text-primary-on-dark)}.gal-image{flex:1;display:flex;align-items:flex-start;justify-content:space-around;overflow:hidden}.gal-image>a{display:block;margin:auto;max-width:100%}.gal-image iframe,:root.gal-pdf .gal-image a{width:100%;height:100%}:root.gal-fit-width .gal-image [src]{max-width:100%}:root.gal-fit-height .gal-image [src]{max-height:100vh}.gal-next,.gal-prev{color:var(--text-primary-on-dark)}.gal-next{cursor:pointer}.gal-next::after,.gal-prev::after{font-size:3rem;display:inline-flex;align-items:center;justify-content:center;height:100vh;padding:0 .75rem;opacity:.7}.gal-next:hover::after,.gal-prev:hover::after{background-color:rgba(33,33,33,.5)}.gal-prev{cursor:url('data:image/svg+xml;utf8, ') 16 16,auto}.gal-thumbnails{display:flex;flex-direction:column;align-items:center;overflow-y:auto}.gal-thumb{display:block}.gal-thumb:not(:last-of-type){margin-bottom:.5rem}.gal-highlight{outline:1px solid var(--secondary-500)}.is_arclist h4.center{display:block!important;text-align:center;color:var(--text-primary-on-primary);background-color:var(--red-500);padding:.5rem 1rem;margin:0}.flashListing{background-color:var(--background-primary);max-width:100%;margin:auto}.flashListing tr.highlightPost{background-color:#fffde7}.board_f.is_index .board{max-width:80%;margin-bottom:2rem}#arc-list{position:relative;max-width:70rem;z-index:1;margin:-2rem auto 0}#arc-list thead td,.board_f .flashListing>tbody>tr:first-child td{color:var(--text-primary-on-primary);text-align:center;background-color:var(--primary-500);border:1px solid var(--primary-700);padding:0 .5rem;min-width:5rem;height:3rem}.flashListing td{height:3rem;padding:0 .5rem;border:1px solid var(--background-outline)}.flashListing>tbody tr td:first-of-type{text-align:center}.file-col,.flashListing .subject span{font-size:0}.file-col a::after{color:var(--primary-500);border-bottom:1px solid}.file-col a:hover::after{color:var(--primary-700)}.flashListing .subject::after{display:none}.file-col a::after,.flashListing .subject span::after{content:attr(title);font-size:1rem}.board_f .flashListing tr:not(:first-child) td:nth-child(4),.board_f .flashListing tr:not(:first-child) td:nth-child(8){text-align:center}.board_f .flashListing tr:not(:first-child) td:nth-child(6){text-align:right}.board_f .flashListing tr:not(:first-child) td:nth-child(9){font-size:0;padding:0;border-color:var(--primary-700)}.board_f .flashListing tr:not(:first-child) td:nth-child(9) a::after{content:'View';font-size:1rem;color:var(--text-primary-on-primary);background-color:var(--primary-500);display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}#arc-list tr td:nth-of-type(1n){width:15%}#arc-list tr td:nth-of-type(2n){width:75%}#arc-list tr td:nth-of-type(3n){width:10%}#swf-embed{z-index:50}.post--hot>.post{background-image:linear-gradient(to bottom,var(--background-primary),#ffebee)}:root.ss16--invert .post--hot>.post{background-image:linear-gradient(to bottom,var(--background-primary),#573737)}.highlight,.post:target,.qphl,.yourPost>.post,:root.highlight-own .yourPost .stub{background-color:#fffde7}.quotesYou>.post{background-color:#fff8e1}.poster--founder>.post{background-color:#e0f2f1}.poster--founder .nameBlock{color:#009688}.poster--admin>.post{background-color:#ffebee}.capcodeAdmin,.poster--admin .nameBlock{color:#f44336}.poster--mod>.post{background-color:#ede7f6}.capcodeMod,.poster--mod .nameBlock{color:#673ab7}.poster--developer>.post{background-color:#e0f7fa}.poster--developer .nameBlock{color:#00bcd4}.poster--manager>.post{background-color:#fce4ec}.poster--manager .nameBlock{color:#e91e63}.poster--verified>.post{background-color:#e8eaf6}.poster--verified .nameBlock{color:#3f51b5}.poster--pass>.post{background-color:#f9fbe7}.poster--pass .n-pu{color:#afb42b;display:inline-block;vertical-align:middle}.file--gif .fileThumb,.file--video .fileThumb{position:relative}.file--gif:not(.expanded-image)>.post>.file>.fileThumb::after,.file--video:not(.expanded-image)>.post>.file>.fileThumb::after{font-size:3rem;position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(to bottom,rgba(33,33,33,0),#212121);opacity:.7;transition:opacity .25s}.file--gif:not(.expanded-image)>.post>.file:hover>.fileThumb::after,.file--video:not(.expanded-image)>.post>.file:hover>.fileThumb::after{opacity:.55}audio.controls-added{display:block;margin:auto}:root.anti-autoplay div.embed{position:static;width:auto;height:auto;text-align:center}:root.anti-autoplay .autoplay-removed{visibility:visible!important;min-width:640px;min-height:360px}:root[xmlns] #doc{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100vh}:root[xmlns] #doc a{color:var(--primary-500)}:root[xmlns] #doc a:hover{color:var(--primary-700);border-bottom:1px solid}:root[xmlns] #doc .boxbar{color:var(--red-500)}:root[xmlns] #doc .boxcontent{margin-top:1rem}:root[xmlns] #copyright{color:var(--text-secondary-on-background);margin:0}.ss16--dialog{position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;z-index:50;background-color:rgba(33,33,33,.75)}.ss16--dialog-window{background-color:var(--background-primary);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);border-radius:2px;padding:1rem 1.5rem}.ss16--dialog-header{font-size:2.5rem;font-weight:700;margin-bottom:1rem}.ss16--dialog-description{color:var(--text-secondary-on-background);margin-bottom:.5rem}.ss16--index-searching-curtain{position:fixed;top:0;left:0;width:100%;height:100vh;pointer-events:none;background-image:linear-gradient(to bottom,rgba(33,33,33,.75),rgba(33,33,33,0))}:root.ss16--index-searching .board:empty::after{content:'No threads found; try searching again.';color:var(--text-secondary-on-background);background-color:var(--background-primary);max-width:75%;margin:auto;display:flex;align-items:center;justify-content:center;height:40vh}.ss16--board-drawer-background{position:fixed;overflow:hidden;contain:strict;width:100%;height:100%;top:0;left:0;pointer-events:none;z-index:99}.ss16--board-drawer-background::before{content:'';display:block;will-change:opacity;background-color:rgba(33,33,33,.6);position:absolute;top:0;left:0;height:100%;width:100%;opacity:0;transition:opacity .25s}.drawer-open{pointer-events:auto}.drawer-open::before{opacity:1}.ss16--board-drawer{width:320px;background:var(--background-primary);left:0;right:initial;height:100%;display:flex;position:absolute;flex-direction:column;will-change:transform;transform:translateX(-100%);transition:transform .25s;overflow-y:scroll}.drawer-open .ss16--board-drawer{transform:translateX(0)}.board-list-entry{display:block;color:var(--text-primary-on-background);text-decoration:none;height:3rem;line-height:3;padding-left:1rem;transition:background-color .25s}.board-list-entry:hover{background-color:rgba(33,33,33,.12)}.board-list-entry.board--ws{color:#000;background-color:#d6daf0}.board-list-entry.board--nws{color:maroon;background-color:#f0e0d6}#board-list a.ss16--board-drawer-toggle{order:-1;opacity:1}:root.ss16--yotsuba.ws{--text-primary-on-primary:#000;--text-icon-on-primary:#000;--background-primary:#d6daf0;--background-secondary:#c7cbe4;--background-outline:rgba(161,166,202,.5);--primary-500:#c7cbe4;--primary-700:#a1a6ca}:root.ss16--yotsuba.ws body{color:#000;background-color:#eef2ff!important}:root.ss16--yotsuba.ws .abbr,:root.ss16--yotsuba.ws .dateTime,:root.ss16--yotsuba.ws .page-num{color:#000}:root.ss16--yotsuba.ws a{color:#34345c}:root.ss16--yotsuba.ws .post{background-color:#d6daf0!important}:root.ss16--yotsuba.ws .boardTitle{color:#af0a0f}:root.ss16--yotsuba.ws .subject{color:#0f0c5d}:root.ss16--yotsuba.ws .name{color:#117743}:root.ss16--yotsuba.ws .quote{color:#789922}:root.ss16--yotsuba.ws .quotelink,:root.ss16--yotsuba.ws .shortcut:hover,:root.ss16--yotsuba.ws a:hover{color:#d00}:root.ss16--yotsuba.nws .field:not(#qr-filename-container),:root.ss16--yotsuba.nws select,:root.ss16--yotsuba.ws .field:not(#qr-filename-container),:root.ss16--yotsuba.ws select{background-color:#fff!important;border-color:#ccc!important}:root.ss16--yotsuba.ws .field:focus,:root.ss16--yotsuba.ws select:focus{border-color:#98e!important}:root.ss16--yotsuba.ws.bottom-backlinks .container{background-color:#c7cbe4;border-color:#b7c5d9}:root.ss16--yotsuba.nws{--text-primary-on-primary:maroon;--text-icon-on-primary:maroon;--background-primary:#f0e0d6;--background-secondary:#ddcabe;--background-outline:rgba(198,178,165,.5);--primary-500:#ddcabe;--primary-700:#c6b0a2}:root.ss16--yotsuba.nws body{color:maroon;background-color:#ffe!important}:root.ss16--yotsuba.nws .abbr,:root.ss16--yotsuba.nws .dateTime,:root.ss16--yotsuba.nws .page-num{color:maroon}:root.ss16--yotsuba.nws a{color:#00e}:root.ss16--yotsuba.nws .quotelink{color:navy}:root.ss16--yotsuba.nws .post{background-color:#f0e0d6!important}:root.ss16--yotsuba.nws .boardTitle{color:#af0a0f}:root.ss16--yotsuba.nws .subject{color:#cc1105}:root.ss16--yotsuba.nws .name{color:#117743}:root.ss16--yotsuba.nws .quote{color:#789922}:root.ss16--yotsuba.nws .shortcut:hover,:root.ss16--yotsuba.nws a:hover{color:red}:root.ss16--yotsuba.nws .field:not(#qr-filename-container):focus,:root.ss16--yotsuba.nws select:focus{border-color:#ea8!important}:root.ss16--yotsuba.nws.bottom-backlinks .container{background-color:#ddcabe;border-color:#d9bfb7}.n-atb{border-radius:2px;padding:1px 4px;color:#353839}.atsb2018 table{width:100%;max-width:70rem;margin:1rem auto 2rem;border-radius:2px;background-color:var(--background-primary);box-shadow:0 2px 10px 0 rgba(33,33,33,.1)}.atsb2018 td,.atsb2018 th{padding:.5rem .75rem;border-bottom:1px solid var(--background-hint)}.atsb2018 tr:not(:first-child) td:first-child,.atsb2018 tr:not(:first-child) td:last-child{font-family:var(--font-family-monospace);font-size:1.125rem;text-align:center}.atsb2018 .atsgc{width:75%}.atsb2018 .atgg{height:2rem}.n-atb-0{background-color:#f56fa1}.n-atb-1{background-color:#7b3f00;color:#f2f3f4}.n-atb-2{background-color:#fffdd0}.n-atb-3{background-color:#e4d00a}.n-atb-4{background-color:#50c878}.n-atb-0::after{content:'Team Peep'}.n-atb-1::after{content:'Team Chocolate'}.n-atb-2::after{content:'Team Creme'}.n-atb-3::after{content:'Team Peanut Butter'}.n-atb-4::after{content:'Team Mini'}} 12 | -------------------------------------------------------------------------------- /sidedish.user.js: -------------------------------------------------------------------------------- 1 | // ==UserScript== 2 | // @name ss21 sidedish 3 | // @version 2.5.3 4 | // @description A companion userscript for the ss21 userstyle. 5 | // @author saxamaphone69 6 | // @namespace https://github.com/saxamaphone69/ss21 7 | // @match *://boards.4chan.org/* 8 | // @match *://find.4chan.org/* 9 | // @match *://www.4chan.org/* 10 | // @connect 4chan.org 11 | // @connect a.4cdn.org 12 | // @connect 4cdn.org 13 | // @grant GM.xmlHttpRequest 14 | // @run-at document-start 15 | // @icon data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 96 960 960'%3E%3Cpath d='M70 622q0-15 11-29.5t29-23.5q22-9 44-22.5t54-13.5q48 0 72.5 28.5T343 590q37 0 64-28.5t74-28.5q47 0 72.5 28.5T618 590q36 0 62-28.5t73-28.5q33 0 54.5 14t43.5 23q18 9 29 23t11 29q0 13-9 21.5t-21 6.5q-36-8-56.5-26T753 606q-37 0-63.5 28.5T617 663q-48 0-74-28.5T481 606q-36 0-63.5 28.5T342 663q-47 0-72-28.5T208 606q-31 0-51.5 18T101 650q-13 2-22-6.5T70 622Zm0 185q0-14 10.5-28.5T110 756q22-9 44-23t54-14q47 0 72 28.5t63 28.5q37 0 64-28.5t74-28.5q47 0 72.5 28.5T617 776q36 0 62.5-28.5T753 719q32 0 54 14t45 23q18 8 28.5 22t10.5 29q0 14-9 22t-21 6q-36-8-56.5-25.5T753 792q-37 0-63.5 28.5T617 849q-48 0-74-28.5T481 792q-36 0-63.5 28.5T343 849q-47 0-73-28.5T208 792q-31 0-51.5 17.5T100 835q-12 2-21-6t-9-22Zm0-371q0-15 11-29.5t29-23.5q22-9 44-22.5t54-13.5q48 0 72.5 28.5T343 404q37 0 64-28.5t74-28.5q47 0 72.5 28.5T618 404q36 0 62-28.5t73-28.5q33 0 54.5 14t43.5 23q18 9 29 23t11 29q0 13-9 21.5t-21 6.5q-36-8-56.5-26T753 420q-37 0-63.5 28.5T617 477q-48 0-74-28.5T481 420q-36 0-64 28.5T342 477q-47 0-72-28.5T208 420q-31 0-51.5 18T101 464q-13 2-22-6.5T70 436Z'/%3E%3C/svg%3E 16 | // @noframes 17 | // @updateURL https://github.com/saxamaphone69/ss21/raw/main/sidedish.user.js 18 | // @downloadURL https://github.com/saxamaphone69/ss21/raw/main/sidedish.user.js 19 | // ==/UserScript== 20 | (async () => { 21 | "use strict"; 22 | //console.group("Initialising ss21 sidedish..."); 23 | /*! @ryanmorr/ready v1.4.0 | https://github.com/ryanmorr/ready */ 24 | function _typeof(a){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}(function(a,b){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))&&"undefined"!=typeof module?module.exports=b():"function"==typeof define&&define.amd?define(b):(a=a||self,a.ready=b())})(this,function(){'use strict';function a(a){for(var b,c=a.selector,d=a.callback,e=g.querySelectorAll(c),f=0,j=e.length;f { 30 | switch (location.pathname.split("/")[2]) { 31 | case "thread": 32 | return "thread"; 33 | case "catalog": 34 | return "catalog"; 35 | case "archive": 36 | return "archive"; 37 | default: 38 | return "index"; 39 | } 40 | })(); 41 | 42 | function $(sel, root) { 43 | return (root || d).querySelector(sel); 44 | } 45 | 46 | function $$(sel, root) { 47 | return [...(root || d).querySelectorAll(sel)]; 48 | } 49 | 50 | // add `.site-loading` to `html` so css can hide the page loading 51 | doc.classList.add("site-loading"); 52 | 53 | if (location.pathname.split("/")[1] === 'search') { 54 | doc.classList.remove("site-loading"); 55 | doc.classList.add("is-search"); 56 | $('link[title]', d.head).disabled = true; 57 | } 58 | 59 | function on(sel, events, cb) { 60 | sel = Array.isArray(sel) ? sel : [sel]; 61 | let event = events.split(/\s+/); 62 | sel.forEach((sel) => { 63 | event.forEach((ev) => { 64 | sel.addEventListener(ev, cb, { 65 | passive: true, 66 | }); 67 | }); 68 | }); 69 | return this; 70 | } 71 | 72 | function make(obj) { 73 | let key, 74 | el = d.createElement(obj.el); 75 | if (obj.cl4ss) { 76 | el.className = obj.cl4ss; 77 | } 78 | if (obj.html) { 79 | el.innerHTML = obj.html; 80 | } 81 | if (obj.attr) { 82 | for (key in obj.attr) { 83 | if (obj.attr.hasOwnProperty(key)) { 84 | el.setAttribute(key, obj.attr[key]); 85 | } 86 | } 87 | } 88 | if (obj.appendTo) { 89 | let parent = obj.appendTo; 90 | if (typeof parent === "string") { 91 | $(parent).appendChild(el); 92 | } else { 93 | parent.appendChild(el); 94 | } 95 | } 96 | if (obj.prepend) { 97 | let parent = obj.prepend; 98 | if (typeof parent === "string") { 99 | $(parent).prepend(el); 100 | } else { 101 | parent.prepend(el); 102 | } 103 | } 104 | return el; 105 | } 106 | 107 | function removeStyle(sel) { 108 | if (sel) { 109 | console.log( 110 | "%css21 sidedish is removing this stylesheet: ", 111 | "color:green;", 112 | sel 113 | ); 114 | sel.remove(); 115 | return true; 116 | } else { 117 | console.log("%css21 sidedish was unable to find: ", "color:red;", sel); 118 | return false; 119 | } 120 | } 121 | 122 | function sendNotification(type, content) { 123 | d.dispatchEvent( 124 | new CustomEvent("CreateNotification", { 125 | detail: { 126 | type: type, // success, info, warning, error 127 | content: content, 128 | lifetime: 0, 129 | }, 130 | }) 131 | ); 132 | } 133 | 134 | function removeStyles() { 135 | removeStyle($("link[rel='stylesheet']", d.head)); 136 | removeStyle($("style[type]", d.head)); // this removes the inline mobile css 137 | removeStyle($("#fourchanx-css", d.head)); // this removes the css required by 4chan x 138 | removeStyle($("#custom-css", d.head)); // this removes extra, custom css by 4chan x 139 | //removeStyle($("#sound-player-css", d.head)); // sounds player 140 | } 141 | 142 | function replace4chanFooterList() { 143 | // Okay, so this used to work fine. Then Cloudflare has added some CDN protection thingy to 4chan.org, which makes any attempts to read the HTML not work. 144 | // I had this as a request so that if any boards were added, it would auto update. I'll stick to hard coding it instead. 145 | let footer = $("#boardNavDesktopFoot"); 146 | let boardList = `
147 |

Japanese Culture

148 | 160 |

Video Games

161 | 171 |
172 |
173 |

Interests

174 | 191 |
192 |
193 |

Creative

194 | 210 |
211 |
212 |

Other

213 | 225 |

Misc.(NSFW)

226 | 234 |
235 |
236 |

Adult(NSFW)

237 | 252 |
`; 253 | if (footer) { 254 | footer.innerHTML = `
${boardList}
`; 255 | footer.classList.add('ss21--footer-enhanced'); 256 | if ($(`#boardNavDesktopFoot a[href$="/${currentBoard}/`)) { 257 | $(`#boardNavDesktopFoot a[href$="/${currentBoard}/`).classList.add('current'); 258 | } 259 | } 260 | } 261 | 262 | function init() { 263 | on(d, "IndexBuild", doc.classList.remove("site-loading")); 264 | 265 | const isChanX = doc && doc.classList.contains('fourchan-x'); 266 | 267 | if (!isChanX) { 268 | doc.classList.remove("site-loading"); 269 | doc.classList.add("is-ext"); 270 | } 271 | 272 | on(d, "OpenSettings", function () { 273 | const settingDescriptions = $$(".description"); 274 | for (let settingDescription of settingDescriptions) { 275 | const content = settingDescription.textContent.slice(2); 276 | settingDescription.textContent = content; 277 | } 278 | }); 279 | 280 | removeStyles(); 281 | 282 | // this should return the `#header-bar` element 283 | const headerBar = $("#header-bar") || $('#boardNavDesktop'); 284 | // set the header height as its own variable for reference in css 285 | const updateHeight = () => 286 | doc.style.setProperty('--headerBar-height', `${headerBar.offsetHeight}px`); 287 | new ResizeObserver(updateHeight).observe(headerBar); 288 | updateHeight(); 289 | 290 | const scrollProgress = make({ 291 | //el: "progress", 292 | el: "div", 293 | attr: { 294 | id: "scroll-progress"//, 295 | //value: 0, 296 | //max: 100, 297 | }, 298 | appendTo: headerBar, 299 | }); 300 | /* 301 | const hero = $(".boardBanner"), 302 | heroHeight = 480, 303 | boardTitle = $(".boardTitle"), 304 | mVal = 300; 305 | 306 | //boardTitle.style.setProperty("--length", boardTitle.innerText.length); 307 | 308 | let ticking = false; 309 | 310 | function rAF(args) { 311 | if (!ticking) { 312 | window.requestAnimationFrame(function () { 313 | ticking = false; 314 | }); 315 | } 316 | ticking = true; 317 | }*/ 318 | /* 319 | //https://github.com/adactio/FitText.js/blob/master/fittext.js 320 | //https://github.com/rikschennink/fitty/blob/gh-pages/src/fitty.js 321 | function fitText(el) { 322 | el.style.fontSize = Math.max(Math.min(el.clientWidth / 10, parseFloat(1/0)), parseFloat(-1/0)) + 'px'; 323 | } 324 | 325 | fitText(hero); 326 | */ 327 | // https://codepen.io/shshaw/pen/LYVBVve 328 | /* 329 | [...document.querySelectorAll("[data-fit-text]")].forEach(el => { 330 | // We just need the length of the string as a CSS variable... 331 | el.style.setProperty("--length", el.innerText.length); 332 | }); 333 | */ 334 | /* 335 | [data-fit-text] { 336 | // Sized via the viewport, but the --width variable could be set by JS based on the element or parent's width. 337 | --width: 100vw; 338 | 339 | // Adjust scale depending on your exact font. 340 | --scale: 0.9; 341 | 342 | font-size: calc(var(--width) / (var(--length, 1) * 0.5) * var(--scale, 1)); 343 | 344 | font-family: "Poppins", sans-serif; 345 | font-weight: 600; 346 | line-height: 1; 347 | margin: 1rem 0; 348 | } 349 | */ 350 | /* 351 | function fancyShadow(el) { 352 | let oVal = window.scrollY, 353 | nVal = (oVal / 2.5) * 0.1; 354 | if (oVal >= heroHeight) { 355 | headerBar.classList.add("scrolled"); 356 | el.style.textShadow = "0 0 var(--primary-500)"; 357 | } else { 358 | headerBar.classList.remove("scrolled"); 359 | el.style.textShadow = 360 | 16 + -nVal + "px " + (16 + -nVal) + "px var(--primary-500)"; 361 | } 362 | } 363 | 364 | function parallaxHero(el) { 365 | let oVal, cVal; 366 | oVal = Math.round(window.scrollY / 3); 367 | if (oVal < mVal) { 368 | cVal = oVal; 369 | } else { 370 | cVal = mVal; 371 | } 372 | el.style.transform = "translate3d(0, " + cVal + "px, 0)"; 373 | } 374 | 375 | function progressScroll(el) { 376 | let dHeight = d.body.clientHeight, 377 | wHeight = window.innerHeight, 378 | scrollPercent = (window.scrollY / (dHeight - wHeight)) * 100; 379 | el.value = scrollPercent.toFixed(2); 380 | } 381 | 382 | on(window, "scroll", function (e) { 383 | rAF(parallaxHero(hero)); 384 | rAF(fancyShadow(boardTitle)); 385 | rAF(progressScroll(scrollProgress)); 386 | }); 387 | */ 388 | function countBacks() { 389 | //console.log("Counting backlinks"); 390 | let posts = $$(".post"); 391 | for (let post of posts) { 392 | let backlinks = $$(".backlink", post); 393 | post.setAttribute("data-backlinks-length", backlinks.length); 394 | if (backlinks.length > 8) { 395 | post.parentNode.classList.add("post--hot"); 396 | } 397 | } 398 | } 399 | 400 | function convertSummaries() { 401 | //console.log("Converting summaries"); 402 | let summaries = $$(".summary:not(.summary-bottom, .preview-summary)"); 403 | for (let summary of summaries) { 404 | summary.classList.add('summary--converted'); 405 | let oldText, newText; 406 | oldText = summary.innerHTML; 407 | newText = oldText.replace(/(\d+(?=\ ))/g, "$1"); 408 | summary.innerHTML = newText; 409 | //summary.innerHTML = `open_in_new` + newText + ``; 410 | } 411 | } 412 | 413 | function markExternalLinks() { 414 | document.querySelectorAll('.postMessage .linkify').forEach(link => { 415 | // If a string is passed, convert it into an anchor element 416 | if (typeof link === 'string') { 417 | const temp = document.createElement('a'); 418 | temp.href = link; 419 | link = temp; 420 | } 421 | 422 | let url; 423 | try { 424 | url = new URL(link.href); 425 | } catch (err) { 426 | // Skip this link if it's not a valid URL 427 | return link; 428 | } 429 | 430 | // Skip internal links 431 | if (url.origin === window.location.origin) return link; 432 | 433 | // Clear content and mark the link as parsed 434 | link.textContent = ''; 435 | link.classList.add('link-parsed'); 436 | 437 | // Define parts to wrap 438 | const parts = [ 439 | { name: 'schema', value: url.protocol + '//' }, 440 | { name: 'host', value: url.hostname }, 441 | { name: 'path', value: url.pathname }, 442 | { name: 'query', value: url.search }, 443 | { name: 'hash', value: url.hash } 444 | ]; 445 | 446 | // Create and append spans 447 | for (const { name, value } of parts) { 448 | if (value) { 449 | const span = document.createElement('span'); 450 | span.classList.add(`link-parsed--${name}`); 451 | span.textContent = value; 452 | link.appendChild(span); 453 | } 454 | } 455 | 456 | return link; 457 | }); 458 | } 459 | 460 | function checkers() { 461 | let obs = $$('.thread'); 462 | [...obs].forEach((ob) => { 463 | const observer = new MutationObserver(function(mutations) { 464 | mutations.forEach(function(mutation) { 465 | if (mutation.type == 'childList') { 466 | convertSummaries() 467 | } 468 | }); 469 | }); 470 | observer.observe(ob, {childList: true}); 471 | })/* 472 | const observer = new MutationObserver(function(mutations) { 473 | mutations.forEach(function(mutation) { 474 | console.log(mutation.removedNodes); 475 | }); 476 | }); 477 | observer.observe(ob, {childList: true}); 478 | }*/ 479 | } 480 | if (config === "index") { 481 | on(d, "IndexRefresh", checkers); 482 | } 483 | /* 484 | function watchElForDeletion(elToWatch, callback, parent = document.querySelector('body')){ 485 | const observer = new MutationObserver(function (mutations) { 486 | 487 | // loop through all mutations 488 | mutations.forEach(function (mutation) { 489 | 490 | // check for changes to the child list 491 | if (mutation.type === 'childList') { 492 | 493 | // check if anything was removed and if the specific element we were looking for was removed 494 | if (mutation.removedNodes.length > 0 && mutation.removedNodes[0] === elToWatch) { 495 | callback(); 496 | } 497 | } 498 | }); 499 | }); 500 | 501 | // start observing the parent - defaults to document body 502 | observer.observe(parent, { childList: true }); 503 | }; 504 | 505 | const target = $(".board"); 506 | const config = { 507 | childList: true, 508 | }; 509 | 510 | function subscriber(mutations) { 511 | convertSummaries(); 512 | swapInfo(); 513 | disabledPrevAndNext(); 514 | } 515 | const observer = new MutationObserver(subscriber); 516 | observer.observe(target, config); 517 | */ 518 | /* 519 | function watchThreadForSummary() { 520 | let threads = $$('.thread'); 521 | for (let thread of threads) { 522 | const observer = new MutationObserver(function(mutations) { 523 | mutations.forEach(function(mutation) { 524 | if (mutation.type === 'childList') { 525 | console.log(mutation.target); 526 | if (mutation.target.classList.contains('summary')) { 527 | let summary = mutation.target; 528 | console.log(summary); 529 | //let oldText, newText; 530 | //oldText = summary.innerHTML; 531 | //newText = oldText.replace(/(\d+(?=\ ))/g, "$1"); 532 | //summary.innerHTML = `open_in_new` + newText + ``; 533 | //summary.innerHTML = `open_in_new` + newText + ``; 534 | } 535 | } 536 | }); 537 | }); 538 | observer.observe(thread, {childList:true}); 539 | } 540 | } 541 | */ 542 | /* 543 | function getSumms() { 544 | console.log('RUNNING GETSUMMS'); 545 | ready('.summary:not(.summary-bottom)', (element) => { 546 | let summary = element; 547 | let oldText, newText; 548 | 549 | oldText = summary.innerHTML; 550 | newText = oldText.replace(/(\d+(?=\ ))/g, "$1"); 551 | console.log('old: ' + oldText + ', new: ' + newText); 552 | summary.innerHTML = `open_in_new` + newText + ``; 553 | }); 554 | convertSummaries(); 555 | } 556 | */ 557 | //getSumms(); 558 | 559 | function swapInfo() { 560 | //console.log("Switching OP's post info"); 561 | let ops = $$(".op"); 562 | for (let op of ops) { 563 | let opPostInfo = $(".postInfo", op); 564 | op.prepend(opPostInfo); 565 | op.classList.add("post--file-swapped"); 566 | } 567 | } 568 | 569 | function stripPageBrackets() { 570 | //console.log("Switching OP's post info"); 571 | let pagenums = $$(".page-num:not(.page-num--converted)"); 572 | for (let pagenum of pagenums) { 573 | let oldText, newText; 574 | oldText = pagenum.innerText; 575 | newText = oldText.match(/\d+/)[0]; 576 | pagenum.innerHTML = `${newText}`; 577 | pagenum.classList.add('page-num--converted'); 578 | } 579 | } 580 | 581 | // if a thumbnail has a tall aspect ratio, allow for greater styling control 582 | function checkHeights() { 583 | let thumbs = $$(".fileThumb"); 584 | for (let thumb of thumbs) { 585 | let thumbSize = $("img", thumb); 586 | let thumbHeight = thumbSize.style.height; 587 | let thumbWidth = thumbSize.style.width; 588 | if (thumbHeight.slice(0, -2) > thumbWidth.slice(0, -2)) { 589 | // adds it to the `.thread` container 590 | thumb.parentNode.parentNode.parentNode.parentNode.classList.add("file--tall"); 591 | } 592 | } 593 | } 594 | 595 | function checkAspect() { 596 | // https://stackoverflow.com/a/61544600 597 | let ERROR_ALLOWED = 0.05 598 | let STANDARD_ASPECT_RATIOS = [ 599 | [1, '1'], 600 | [4/3, '43'], 601 | [5/4, '54'], 602 | [3/2, '32'], 603 | [16/10, '1610'], 604 | [16/9, '169'], 605 | [21/9, '219'], 606 | [32/9, '329'], 607 | ] 608 | let RATIOS = STANDARD_ASPECT_RATIOS.map(function(tpl){return tpl[0]}).sort() 609 | let LOOKUP = Object() 610 | for (let i=0; i < STANDARD_ASPECT_RATIOS.length; i++){ 611 | LOOKUP[STANDARD_ASPECT_RATIOS[i][0]] = STANDARD_ASPECT_RATIOS[i][1] 612 | } 613 | 614 | /* 615 | Find the closest value in a sorted array 616 | */ 617 | function findClosest(arrSorted, value){ 618 | var closest = arrSorted[0] 619 | var closestDiff = Math.abs(arrSorted[0] - value) 620 | for (let i=1; i { 742 | const item = document.getElementById(id); 743 | if (item) { 744 | // Save original position 745 | originalPositions.set(id, { parent: item.parentElement, nextSibling: item.nextElementSibling }); 746 | 747 | // Clone and append to placeholder 748 | const clone = item.cloneNode(true); 749 | clone.id = `${id}-clone`; // Ensure unique ID for the clone 750 | shortcutPlaceholder.appendChild(clone); 751 | 752 | // Initially hide the clone 753 | clone.hidden = true; 754 | } 755 | }); 756 | 757 | const moveItemsToMenu = () => { 758 | const menu = document.querySelector('#shortcut-menu #menu'); 759 | if (menu) { 760 | itemsToMove.forEach(id => { 761 | const clone = document.getElementById(`${id}-clone`); 762 | if (clone && clone.parentElement !== menu) { 763 | menu.appendChild(clone); 764 | clone.hidden = false; // Show the clone when added to the menu 765 | } 766 | }); 767 | } 768 | }; 769 | 770 | const handleResize = (width) => { 771 | if (width < 600) { 772 | const menu = document.querySelector('#shortcut-menu #menu'); 773 | if (!menu) { 774 | // Hide originals and show clones in the placeholder 775 | itemsToMove.forEach(id => { 776 | const original = document.getElementById(id); 777 | const clone = document.getElementById(`${id}-clone`); 778 | if (original) original.hidden = true; 779 | if (clone) clone.hidden = false; 780 | }); 781 | } 782 | 783 | // Observe for menu creation and move clones to it 784 | const menuObserver = new MutationObserver((mutations) => { 785 | mutations.forEach(mutation => { 786 | if (mutation.type === 'childList') { 787 | const menu = document.querySelector('#shortcut-menu #menu'); 788 | if (menu) { 789 | moveItemsToMenu(); 790 | menuObserver.disconnect(); // Stop observing once #menu is created 791 | } 792 | } 793 | }); 794 | }); 795 | 796 | menuObserver.observe(shortcutMenu, { childList: true, subtree: true }); 797 | } else { 798 | // Restore originals and hide clones when width >= 600px 799 | itemsToMove.forEach(id => { 800 | const original = document.getElementById(id); 801 | const clone = document.getElementById(`${id}-clone`); 802 | if (original) original.hidden = false; 803 | if (clone) clone.hidden = true; 804 | 805 | // Restore original position if it's not already in place 806 | const originalPosition = originalPositions.get(id); 807 | if (originalPosition && original.parentElement !== originalPosition.parent) { 808 | const { parent, nextSibling } = originalPosition; 809 | parent.insertBefore(original, nextSibling || null); 810 | } 811 | }); 812 | } 813 | }; 814 | 815 | const resizeObserver = new ResizeObserver(entries => { 816 | for (let entry of entries) { 817 | if (entry.target === document.body) { 818 | const width = entry.contentRect.width; 819 | handleResize(width); 820 | } 821 | } 822 | }); 823 | 824 | resizeObserver.observe(document.body); 825 | } 826 | 827 | moveShortcuts(); 828 | */ 829 | // two from https://github.com/duanemoody 830 | // javascript:let p=$$("a.download-button"), i=0, v=setInterval(() => {p[i++].click(); (i>p.length) && clearInterval(v);}, 1000); 831 | // javascript:var pics=document.querySelectorAll("a.download-button"), counter=0, interval=setInterval(function() {pics[counter].click(); counter++; if (counter > pics.length) {clearInterval(interval);}}, 1000); 832 | // https://stackoverflow.com/questions/30088897/trying-to-download-all-of-the-images-on-the-website-using-javascript 833 | // https://gist.github.com/sfrdmn/8834747 834 | // https://gist.github.com/lucidBrot/432d2c6184a188a060e58dbb36bd2084 835 | function downloadMedia() { 836 | ready('#shortcuts', (element) => { 837 | let _this = element; 838 | make({ 839 | el: 'a', 840 | cl4ss: 'material-icons shortcut ss21--download-all', 841 | attr: { 842 | title: 'Download all media in thread' 843 | }, 844 | prepend: _this, 845 | html: `download_for_offline` 846 | }); 847 | }); 848 | let imgToggle = $('.ss21--download-all'); 849 | imgToggle.addEventListener('click', function() { 850 | let allMedia = [].slice.call($$('.download-button')); 851 | let i = 0; 852 | try { 853 | allMedia.forEach(function(media) { 854 | downloadThem(media, i++); 855 | }) 856 | } catch(e) { 857 | console.log('Something went wrong...', e); 858 | } 859 | function downloadThem(media) { 860 | setTimeout(() => { 861 | media.click(); 862 | }, i * 500) 863 | } 864 | }); 865 | } 866 | if (config === "thread") { 867 | downloadMedia(); 868 | } 869 | 870 | function boardDrawer() { 871 | let boardDrawer = make({ 872 | el: "aside", 873 | cl4ss: "ss21--board-drawer-background", 874 | appendTo: "body", 875 | html: ``, 876 | }); 877 | ready("#board-list", (element) => { 878 | let _this = element; 879 | make({ 880 | el: "a", 881 | cl4ss: "material-icons ss21--board-drawer-toggle", 882 | prepend: headerBar, 883 | attr: { 884 | title: "Open board list drawer", 885 | }, 886 | html: `menu`, 887 | }); 888 | }); 889 | let boardNavToggle = $(".ss21--board-drawer-toggle"); 890 | let url = "https://a.4cdn.org/boards.json"; 891 | 892 | function createNode(element) { 893 | return d.createElement(element); 894 | } 895 | 896 | function append(parent, el) { 897 | return parent.appendChild(el); 898 | } 899 | 900 | boardDrawer.addEventListener("click", function (e) { 901 | if (e.target === boardDrawer) { 902 | boardDrawer.classList.remove("drawer-open"); 903 | } 904 | }); 905 | 906 | on(boardNavToggle, "click", function () { 907 | boardDrawer.classList.add("drawer-open"); 908 | fetch(url) 909 | .then((resp) => resp.json()) 910 | .then(function (data) { 911 | let boards = data.boards; 912 | return boards.map(function (board) { 913 | let anchor = createNode("a"); 914 | anchor.classList.add("board-list-entry"); 915 | anchor.textContent = `/${board.board}/ - ${board.title}`; 916 | if (board.ws_board === 0) { 917 | anchor.classList.add("board--nws"); 918 | anchor.href = `https://boards.4chan.org/${board.board}/`; 919 | } else { 920 | anchor.classList.add("board--ws"); 921 | anchor.href = `https://boards.4chan.org/${board.board}/`; 922 | } 923 | append($(".ss21--board-drawer"), anchor); 924 | }); 925 | }); 926 | }); 927 | } 928 | 929 | //boardDrawer(); 930 | /* 931 | function getBoardInfo() { 932 | let cbBoard, cbTitle, cbMetad; 933 | fetch("https://a.4cdn.org/boards.json") 934 | .then(resp => resp.json()) 935 | .then(data => { 936 | let foundBoard = data.boards.find(board => board.board === currentBoard); 937 | cbBoard = foundBoard.board; 938 | cbTitle = foundBoard.title; 939 | cbMetad = foundBoard.meta_description.replace(/"/g, '"').replace(/&/g, '&'); 940 | }); 941 | } 942 | 943 | getBoardInfo(); 944 | */ 945 | function changeFileName(observer) { 946 | // Temporarily disconnect the observer to avoid a loop 947 | if (observer) observer.disconnect(); 948 | 949 | $('#qr-file-button').value = 'upload'; 950 | $('#file-n-submit input[type="submit"]').value = 'send'; 951 | 952 | // Reconnect the observer after the change with inline config 953 | if (observer) { 954 | observer.observe($('#qr'), { 955 | attributes: true,// Watch for attribute changes 956 | attributeFilter: ['value'], // Only watch the 'value' attribute 957 | subtree: true,// Monitor changes within child elements of #qr 958 | }); 959 | } 960 | } 961 | /* 962 | on(d, 'QRDialogCreation', function() { 963 | const captchaContainer = document.querySelector(".captcha-root"); 964 | 965 | let tBgObserver = null; 966 | 967 | const observeTBgStyle = (tBg) => { 968 | // Disconnect any existing observer to avoid duplicate listeners 969 | if (tBgObserver) { 970 | tBgObserver.disconnect(); 971 | tBgObserver = null; 972 | } 973 | 974 | // If tBg exists, observe its style attribute 975 | if (tBg) { 976 | tBgObserver = new MutationObserver(() => { 977 | const bgImage = window.getComputedStyle(tBg).backgroundImage; 978 | 979 | if (bgImage && bgImage !== "none") { 980 | captchaContainer.classList.add("captcha-loaded"); 981 | } else { 982 | captchaContainer.classList.remove("captcha-loaded"); 983 | } 984 | }); 985 | 986 | tBgObserver.observe(tBg, { 987 | attributes: true, 988 | attributeFilter: ["style"], // Only watch the style attribute 989 | }); 990 | 991 | // Run the check immediately to handle cases where the background-image is already set 992 | const bgImage = window.getComputedStyle(tBg).backgroundImage; 993 | if (bgImage && bgImage !== "none") { 994 | captchaContainer.classList.add("captcha-loaded"); 995 | } else { 996 | captchaContainer.classList.remove("captcha-loaded"); 997 | } 998 | } else { 999 | // If tBg is not present, ensure the class is removed 1000 | captchaContainer.classList.remove("captcha-loaded"); 1001 | } 1002 | }; 1003 | 1004 | const observer = new MutationObserver(() => { 1005 | const tBg = captchaContainer.querySelector("#t-bg"); 1006 | observeTBgStyle(tBg); // Attach a new observer to the re-added #t-bg element 1007 | }); 1008 | 1009 | observer.observe(captchaContainer, { 1010 | childList: true, // Monitor direct child changes 1011 | subtree: true, // Monitor all descendant changes 1012 | }); 1013 | 1014 | }); 1015 | */ 1016 | on(d, 'QRDialogCreation', function() { 1017 | const observer = new MutationObserver((mutationsList) => { 1018 | for (const mutation of mutationsList) { 1019 | if (mutation.target.matches('#file-n-submit input[type="submit"]') && mutation.attributeName === 'value') { 1020 | changeFileName(observer); 1021 | } 1022 | } 1023 | }); 1024 | 1025 | // Initial call to set the values 1026 | changeFileName(observer); 1027 | observer.observe($('#qr'), { 1028 | attributes: true,// Watch for attribute changes 1029 | attributeFilter: ['value'], // Only watch the 'value' attribute 1030 | subtree: true,// Monitor changes within child elements of #qr 1031 | }); 1032 | }); 1033 | 1034 | function resizeQuotePreviews() { 1035 | ready("#qp", (element) => { 1036 | let _this = element; 1037 | let winHeight = window.innerHeight; 1038 | let qpHeight = _this.offsetHeight + 32; 1039 | if (qpHeight > winHeight) { 1040 | let scaledHeight = winHeight / qpHeight; 1041 | _this.style.transformOrigin = "top left"; 1042 | _this.style.transform = "scale(" + scaledHeight + ")"; 1043 | } 1044 | }); 1045 | } 1046 | 1047 | resizeQuotePreviews(); 1048 | 1049 | replace4chanFooterList(); 1050 | 1051 | function getSortMode() { 1052 | //console.log('sorting mode'); 1053 | let sorter, boardCon, oldVal; 1054 | sorter = $("#index-sort"); 1055 | boardCon = $(".board"); 1056 | oldVal = sorter.value; 1057 | boardCon.classList.add(oldVal); 1058 | on(sorter, "change", () => { 1059 | boardCon.classList.remove(oldVal); 1060 | boardCon.classList.add(sorter.value); 1061 | }); 1062 | } 1063 | 1064 | if (config === "index") { 1065 | on(d, "IndexRefresh", getSortMode); 1066 | } 1067 | 1068 | function passLinker() { 1069 | let passLink, bottomLinks; 1070 | passLink = $(".pass-link-container"); 1071 | bottomLinks = $("#footer-links"); 1072 | if (passLink) { 1073 | bottomLinks.appendChild(passLink); 1074 | } else { 1075 | return false; 1076 | } 1077 | } 1078 | 1079 | passLinker(); 1080 | 1081 | function masonry() { 1082 | if(!getComputedStyle(document.documentElement).getPropertyValue("--masonry")) { 1083 | return false; 1084 | } 1085 | let grids = [...document.querySelectorAll(':root.catalog-mode .board')]; 1086 | 1087 | if (grids.length && getComputedStyle(grids[0]).gridTemplateRows !== 'masonry' && getComputedStyle(grids[0]).gridAutoRows !== '240px') { 1088 | //console.log('got a grid, going to masonry it', grids); 1089 | grids = grids.map(grid => ({ 1090 | _el: grid, 1091 | gap: parseFloat(getComputedStyle(grid).gridRowGap), 1092 | items: [...grid.childNodes].filter(c => c.nodeType === 1 && +getComputedStyle(c).gridColumnEnd !== -1), 1093 | ncol: 0, 1094 | mod: 0 })); 1095 | 1096 | function layout() { 1097 | //console.log('running layout'); 1098 | grids.forEach(grid => { 1099 | /* get the post relayout number of columns */ 1100 | let ncol = getComputedStyle(grid._el).gridTemplateColumns.split(' ').length; 1101 | 1102 | grid.items.forEach(c => { 1103 | let new_h = c.getBoundingClientRect().height; 1104 | 1105 | if (new_h !== +c.dataset.h) { 1106 | c.dataset.h = new_h; 1107 | grid.mod++; 1108 | } 1109 | }); 1110 | 1111 | /* if the number of columns has changed */ 1112 | if (grid.ncol !== ncol || grid.mod) { 1113 | /* update number of columns */ 1114 | grid.ncol = ncol; 1115 | 1116 | /* revert to initial positioning, no margin */ 1117 | grid.items.forEach(c => c.style.removeProperty('margin-top')); 1118 | 1119 | /* if we have more than one column */ 1120 | if (grid.ncol > 1) { 1121 | grid.items.slice(ncol).forEach((c, i) => { 1122 | let prev_fin = grid.items[i].getBoundingClientRect().bottom /* bottom edge of item above */, 1123 | curr_ini = c.getBoundingClientRect().top /* top edge of current item */; 1124 | c.style.marginTop = `${prev_fin + grid.gap - curr_ini}px`; 1125 | }); 1126 | } 1127 | 1128 | grid.mod = 0; 1129 | } 1130 | }); 1131 | } 1132 | layout(); 1133 | //addEventListener('load', e => { 1134 | // layout(); /* initial load */ 1135 | addEventListener('resize', layout, false); /* on resize */ 1136 | //}, false); 1137 | } 1138 | } 1139 | if (config === "index") { 1140 | const target = $(".board"); 1141 | const config = { 1142 | childList: true, 1143 | }; 1144 | 1145 | function subscriber(mutations) { 1146 | masonry(); 1147 | //if(!getComputedStyle(document.documentElement).getPropertyValue("--masonry")) { 1148 | // masonry(); 1149 | //} 1150 | } 1151 | const observer = new MutationObserver(subscriber); 1152 | observer.observe(target, config); 1153 | } 1154 | //on(d, "IndexBuild", masonry); 1155 | //const isInViewport = (e, {top:t, height:h} = e.getBoundingClientRect()) => t <= innerHeight && t + h >= 0; 1156 | /* 1157 | function switchOPimg() { 1158 | let files = $$('.catalog-post'); 1159 | for (let file of files) { 1160 | let fullLink = $("a.fileThumb", file); 1161 | let thumbLink = $("a.fileThumb img", file); 1162 | let catLink = $(".catalog-thumb", file); 1163 | if (!fullLink) { 1164 | console.log('no file'); 1165 | } else if (fullLink.href.endsWith("m")) { 1166 | let OpVideo = d.createElement("video"); 1167 | OpVideo.classList.add("catalog-thumb-video"); 1168 | OpVideo.poster = thumbLink.src; 1169 | OpVideo.loop = true; 1170 | OpVideo.playsinline = true; 1171 | OpVideo.autoplay = true; 1172 | OpVideo.src = fullLink; 1173 | //OpVideo.play(); 1174 | OpVideo.muted = true; 1175 | catLink.before(OpVideo); 1176 | catLink.remove(); 1177 | // let playPromise = OpVideo.play(); 1178 | // if (playPromise !== undefined) { 1179 | // playPromise.then((_) => { 1180 | // // all good, video started 1181 | // }).catch((error) => { 1182 | // // hey the video didn't play 1183 | // //if (isInViewport(OpVideo) === true) { 1184 | // OpVideo.play(); 1185 | // //} 1186 | // }); 1187 | // } 1188 | } else { 1189 | catLink.src = fullLink.href; 1190 | } 1191 | } 1192 | } 1193 | function playVids() { 1194 | const OPvids = [...document.querySelectorAll('.file--video')]; 1195 | OPvids.forEach(el => { 1196 | el.addEventListener("mouseover", (e) => { 1197 | $('.catalog-thumb-video', el).play(); 1198 | }, false); 1199 | el.addEventListener('mouseleave', (e) => { 1200 | $('.catalog-thumb-video', el).pause(); 1201 | }, false); 1202 | }) 1203 | } 1204 | if (doc.classList.contains('catalog-mode')) { 1205 | on(d, "IndexRefresh", switchOPimg); 1206 | on(d, "IndexRefresh", playVids); 1207 | //on(d, "IndexBuild", switchOPimg); 1208 | //on(d, "IndexRefresh", masonry); 1209 | // window.addEventListener('resize', masonry); 1210 | // masonry(); 1211 | } 1212 | */ 1213 | 1214 | 1215 | // https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/ 1216 | // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API 1217 | /* 1218 | function intObs() { 1219 | const boxes = [...document.querySelectorAll('.catalog-thumb-video')] 1220 | 1221 | const getOptions = () => { 1222 | return { 1223 | root: null, 1224 | rootMargin: '0px', 1225 | threshold: 1 1226 | } 1227 | } 1228 | 1229 | const setInViewStyles = (target) => { 1230 | target.classList.add('is-inview') 1231 | target.play() 1232 | //$('.catalog-thumb-video', target).play(); 1233 | //dElementToInfoBox(target) 1234 | // console.log('in view') 1235 | } 1236 | 1237 | const setOutOfViewStyles = (target) => { 1238 | target.classList.remove('is-inview') 1239 | target.pause() 1240 | //$('.catalog-thumb-video', target).pause(); 1241 | //moveElementFromInfoBox(target) 1242 | // console.log('out of view') 1243 | } 1244 | 1245 | const onIntersect = (entries) => { 1246 | entries.forEach(entry => { 1247 | const { target, isIntersecting, intersectionRatio } = entry 1248 | //console.log(entry) 1249 | 1250 | if (intersectionRatio >= 1 && isIntersecting) { 1251 | return setInViewStyles(target) 1252 | } 1253 | 1254 | return setOutOfViewStyles(target) 1255 | }) 1256 | } 1257 | 1258 | const reinitObserver = (options) => { 1259 | if (observer) { 1260 | observer.disconnect() 1261 | } 1262 | 1263 | setTimeout(() => { 1264 | observer = new IntersectionObserver(onIntersect, options) 1265 | 1266 | boxes.forEach(el => { 1267 | observer.observe(el) 1268 | }) 1269 | }, 100) 1270 | } 1271 | 1272 | let observer = new IntersectionObserver(onIntersect, getOptions()) 1273 | 1274 | boxes.forEach(el => { 1275 | observer.observe(el) 1276 | }) 1277 | } 1278 | 1279 | on(d, "IndexRefresh", intObs); 1280 | */ 1281 | 1282 | function spinnerText() { 1283 | let footer = $("#absbot"); 1284 | let svgSpin = make({ 1285 | el: "div", 1286 | cl4ss: "ss21--spinner-text", 1287 | html: `
4chan4chan4chan4chan
`, 1288 | appendTo: footer 1289 | }); 1290 | } 1291 | 1292 | spinnerText(); 1293 | 1294 | if (location.pathname.split("/")[1] === "fit") { 1295 | function weightConverter() { 1296 | let weightElement = make({ 1297 | el: "aside", 1298 | cl4ss: "ss21--fit ss21--fit-weight", 1299 | appendTo: "body", 1300 | html: `
1301 | lbs
1302 | 0kg 1303 |
`, 1304 | }); 1305 | } 1306 | 1307 | weightConverter(); 1308 | 1309 | function heightConverter() { 1310 | let heightElement = make({ 1311 | el: "aside", 1312 | cl4ss: "ss21--fit ss21--fit-height", 1313 | appendTo: "body", 1314 | html: `
1315 | ′ 1316 | ″
1317 | 0cm 1318 |
`, 1319 | }); 1320 | } 1321 | 1322 | heightConverter(); 1323 | } 1324 | 1325 | function searchCurtain() { 1326 | ready("#index-search", (element) => { 1327 | let _this = element; 1328 | make({ 1329 | el: "aside", 1330 | cl4ss: "ss21--index-searching-curtain", 1331 | appendTo: "body", 1332 | }); 1333 | on(_this, "focus", function () { 1334 | doc.classList.add("ss21--index-searching"); 1335 | }); 1336 | on(_this, "blur", function () { 1337 | if (_this.dataset.searching != 1) { 1338 | doc.classList.remove("ss21--index-searching"); 1339 | } 1340 | }); 1341 | }); 1342 | } 1343 | 1344 | if (config === "index") { 1345 | searchCurtain(); 1346 | } 1347 | /* 1348 | function checkBlockedBanner() { 1349 | ready('#bannerCnt > img', (element) => { 1350 | let _this = element; 1351 | setTimeout(function () { 1352 | if (_this.attributes.length === 3) { 1353 | doc.classList.add("ss21--banner-blocked"); 1354 | //_this.parentNode.removeAttribute('title'); 1355 | $('#bannerCnt').removeAttribute('title'); 1356 | } 1357 | }, 1000); 1358 | }); 1359 | } 1360 | 1361 | on(d, "IndexRefresh", checkBlockedBanner); 1362 | */ 1363 | function checkBlockedBanner() { 1364 | function rrready(selector, callback) { 1365 | const observer = new MutationObserver((mutations, observer) => { 1366 | const element = document.querySelector(selector); 1367 | if (element) { 1368 | observer.disconnect(); 1369 | callback(element); 1370 | } 1371 | }); 1372 | 1373 | observer.observe(document.body, { 1374 | childList: true, 1375 | subtree: true 1376 | }); 1377 | 1378 | // Check if the element is already present 1379 | const element = document.querySelector(selector); 1380 | if (element) { 1381 | observer.disconnect(); 1382 | callback(element); 1383 | } 1384 | } 1385 | 1386 | rrready('#bannerCnt > img', (element) => { 1387 | function checkImage() { 1388 | if (element.complete && element.naturalWidth === 0) { 1389 | rrready('img[alt="4chan"]', (element) => { 1390 | if (element.attributes.length === 3) { 1391 | document.documentElement.classList.add("ss21--banner-blocked"); 1392 | element.parentNode.removeAttribute('title'); 1393 | } else { 1394 | setTimeout(checkImage, 1000); 1395 | } 1396 | }); 1397 | } else if (element.complete) { 1398 | document.documentElement.classList.add("ss21--banner-unblocked"); 1399 | } else { 1400 | setTimeout(checkImage, 1000); // Retry after 1 second if not complete 1401 | } 1402 | } 1403 | 1404 | checkImage(); 1405 | }); 1406 | } 1407 | 1408 | // Usage 1409 | checkBlockedBanner(); 1410 | 1411 | function relocateElementBySelector(elementSelector, destSelector, location) { 1412 | // Find the element to relocate 1413 | let element = document.querySelector(elementSelector); 1414 | 1415 | if (!element) { 1416 | console.error('Element not found'); 1417 | return; 1418 | } 1419 | 1420 | // Find the destination element where the element will be moved 1421 | let destElement = document.querySelector(destSelector); 1422 | 1423 | if (!destElement) { 1424 | console.error('Destination element not found'); 1425 | return; 1426 | } 1427 | 1428 | // Remove the element from its current parent 1429 | let elementParent = element.parentElement; 1430 | if (elementParent) { 1431 | elementParent.removeChild(element); 1432 | } 1433 | 1434 | // Append the element to the destination element 1435 | if (location === 'append') { 1436 | destElement.appendChild(element); 1437 | } else if (location === 'prepend') { 1438 | destElement.prepend(element); 1439 | } 1440 | } 1441 | 1442 | // 2025GRID 1443 | //relocateElementBySelector('.pagelist', '#delform', 'append'); 1444 | //relocateElementBySelector('.navLinks.json-index', '#delform', 'prepend'); 1445 | /** 1446 | * Clone a node, remove the original, and prepend the clone to a target element. 1447 | * @param {string} nodeSelector - The CSS selector of the node to clone and remove. 1448 | * @param {string} targetSelector - The CSS selector of the target element to prepend the clone. 1449 | */ 1450 | function cloneAndPrepend(nodeSelector, targetSelector) { 1451 | // Step 1: Select the node you want to clone and remove 1452 | const originalNode = document.querySelector(nodeSelector); 1453 | 1454 | if (!originalNode) { 1455 | console.error('Original node not found'); 1456 | return; 1457 | } 1458 | 1459 | // Step 2: Clone the node 1460 | const clonedNode = originalNode.cloneNode(true); // true means a deep clone 1461 | 1462 | // Step 3: Remove the original node 1463 | originalNode.remove(); 1464 | 1465 | // Step 4: Select the target element where you want to prepend the cloned node 1466 | const targetElement = document.querySelector(targetSelector); 1467 | 1468 | if (!targetElement) { 1469 | console.error('Target element not found'); 1470 | return; 1471 | } 1472 | 1473 | // Step 5: Prepend the cloned node to the target element 1474 | targetElement.prepend(clonedNode); 1475 | } 1476 | 1477 | // 2025GRID 1478 | //cloneAndPrepend('.boardBanner', '#delform'); 1479 | 1480 | function OPAsBanner() { 1481 | ready(".thread > .opContainer > .op > .file .fileThumb", (element) => { 1482 | let _this = element, 1483 | banner = $(".boardBanner"); 1484 | let OpFullFile = _this.href; 1485 | if (OpFullFile.endsWith("m") || OpFullFile.endsWith("4")) { 1486 | //comment start 1487 | /* 1488 | let OpVideo = document.createElement("video"); 1489 | OpVideo.classList.add("ss21--op-banner"); 1490 | OpVideo.loop = true; 1491 | OpVideo.src = OpFullFile; 1492 | let playPromise = OpVideo.play(); 1493 | if (playPromise !== undefined) { 1494 | playPromise.then((_) => {}).catch((error) => {}); 1495 | } 1496 | OpVideo.muted = true; 1497 | banner.appendChild(OpVideo); 1498 | //comment end 1499 | */ 1500 | const OpVideo = document.createElement("video"); 1501 | OpVideo.classList.add("ss21--op-banner"); 1502 | OpVideo.loop = true; 1503 | OpVideo.src = OpFullFile; 1504 | OpVideo.muted = true; 1505 | banner.appendChild(OpVideo); 1506 | 1507 | const playPromise = OpVideo.play(); 1508 | if (playPromise !== undefined) { 1509 | playPromise.then(() => { 1510 | console.log("Video is playing"); 1511 | }).catch((error) => { 1512 | console.error("Error playing video:", error); 1513 | }); 1514 | } 1515 | } else { 1516 | let OpImage = new Image(); 1517 | OpImage.classList.add("ss21--op-banner"); 1518 | OpImage.src = OpFullFile; 1519 | banner.appendChild(OpImage); 1520 | } 1521 | }); 1522 | } 1523 | 1524 | if (config === "thread") { 1525 | OPAsBanner(); 1526 | } 1527 | 1528 | /* 1529 | async function OPAsBanner() { 1530 | // Wait for the ".op .fileThumb" element to be ready 1531 | ready(".op .fileThumb", async (element) => { 1532 | const banner = document.querySelector(".boardBanner"); 1533 | const OpFullFile = element.href; 1534 | 1535 | // If the file is a video 1536 | if (OpFullFile.endsWith("m")) { 1537 | const OpVideo = document.createElement("video"); 1538 | OpVideo.classList.add("ss21--op-banner"); 1539 | OpVideo.loop = true; 1540 | OpVideo.src = OpFullFile; 1541 | OpVideo.muted = true; 1542 | banner.appendChild(OpVideo); 1543 | 1544 | try { 1545 | await OpVideo.play(); // Wait for the video to start playing 1546 | console.log("Video is playing"); 1547 | } catch (error) { 1548 | console.error("Error playing video:", error); 1549 | } 1550 | 1551 | } else { // If the file is an image 1552 | const OpImage = new Image(); 1553 | OpImage.classList.add("ss21--op-banner"); 1554 | OpImage.src = OpFullFile; 1555 | 1556 | // Create a promise that resolves when the image has loaded 1557 | await new Promise((resolve, reject) => { 1558 | OpImage.onload = resolve; 1559 | OpImage.onerror = reject; 1560 | }); 1561 | 1562 | banner.appendChild(OpImage); 1563 | console.log("Image loaded and appended to banner"); 1564 | } 1565 | }); 1566 | } 1567 | 1568 | if (config === "thread") { 1569 | OPAsBanner(); 1570 | } 1571 | */ 1572 | /** 1573 | * Wrap the contents of the specified node inside a new div. 1574 | * @param {string} selector - The CSS selector of the node to wrap. 1575 | */ 1576 | function wrapNodeContents(selector) { 1577 | const node = document.querySelector(selector); 1578 | 1579 | if (!node) { 1580 | console.error('Node not found'); 1581 | return; 1582 | } 1583 | 1584 | // Step 2: Create a new wrapper div with a dynamically generated class name 1585 | const wrapper = document.createElement('div'); 1586 | 1587 | // Remove leading dot or hash if it's a class or id selector 1588 | let baseClass = selector.replace(/^[.#]/, ''); 1589 | wrapper.classList.add(`${baseClass}_inner`); 1590 | 1591 | // Step 3: Move the children of the original node into the new wrapper 1592 | while (node.firstChild) { 1593 | wrapper.appendChild(node.firstChild); 1594 | } 1595 | 1596 | // Step 4: Append the new wrapper to the original node 1597 | node.appendChild(wrapper); 1598 | } 1599 | // 2025GRID 1600 | //wrapNodeContents('.navLinks'); 1601 | //wrapNodeContents('#header-bar'); 1602 | //wrapNodeContents('#thread-watcher'); 1603 | 1604 | // Function to extract the initial number and update the data attribute 1605 | if (config === "index") { 1606 | function updateHiddenCount(element) { 1607 | if (!element) { 1608 | return false; 1609 | } 1610 | const text = element.textContent; 1611 | const match = text.match(/(\d+)/); 1612 | if (match) { 1613 | const count = parseInt(match[1], 10); 1614 | document.querySelector('#hidden-toggle > a').dataset.hiddenCount = count; 1615 | } else { 1616 | document.querySelector('#hidden-toggle > a').dataset.hiddenCount = 0; // Default to 0 if no match 1617 | } 1618 | } 1619 | 1620 | // Initial setup 1621 | const hiddenCountElement = document.getElementById('hidden-count'); 1622 | updateHiddenCount(hiddenCountElement); 1623 | 1624 | // Create a MutationObserver to watch for changes to the element's text content 1625 | const observer = new MutationObserver((mutationsList) => { 1626 | for (const mutation of mutationsList) { 1627 | if (mutation.type === 'childList' || mutation.type === 'characterData') { 1628 | updateHiddenCount(hiddenCountElement); 1629 | } 1630 | } 1631 | }); 1632 | 1633 | document.querySelector('#hidden-toggle > a').onclick = function(e) { 1634 | e.target.classList.toggle('hidden-view-toggle'); 1635 | }; 1636 | document.querySelector('#hidden-toggle > a').title = "Toggle hidden threads"; 1637 | 1638 | // Observe changes to the element's text content 1639 | observer.observe(hiddenCountElement, { childList: true, characterData: true, subtree: true }); 1640 | } 1641 | 1642 | doc.classList.add("sidedish-enabled"); 1643 | 1644 | // Adds a discernable class to `html` when 4chan sounds player is enabled 1645 | ready("#sound-player-css", (element) => { 1646 | doc.classList.add('fcsp-enabled'); 1647 | }); 1648 | 1649 | ready("#StyleChanLink", (element) => { 1650 | doc.classList.add('stylechan-enabled'); 1651 | $("#ch4SS", document.head).remove(); 1652 | $("#fourchanx-bgcolor-css", document.head).remove(); 1653 | }); 1654 | 1655 | ready("#mascot", (element) => { 1656 | // in theory, this means the user has oneechan enabled 1657 | console.log("%cSilly goose, you left OneeChan on.", "color:red;"); 1658 | function backupStyleRemoval(sel) { 1659 | if (sel) { 1660 | console.log("%css21 sidedish is removing this stylesheet: ","color:green;",sel); 1661 | sel.remove(); 1662 | return true; 1663 | } else { 1664 | console.log("%css21 sidedish was unable to find: ","color:red;",sel); 1665 | return false; 1666 | } 1667 | } 1668 | backupStyleRemoval($("#ch4SS")); 1669 | backupStyleRemoval($("#fourchanx-bgcolor-css")); 1670 | if (element) { 1671 | make({ 1672 | el: "aside", 1673 | cl4ss: "fcx-announcement warning", 1674 | html: `ss21 is not compatible with OneeChan; please disable it to continue using ss21 as intended.`, 1675 | appendTo: "body", 1676 | }); 1677 | } 1678 | console.timeLog("Running init() from sidedish"); 1679 | }); 1680 | } 1681 | 1682 | on(d, "4chanXInitFinished", init); 1683 | 1684 | if (window.location.host.split('.')[0] === 'find') { 1685 | doc.classList.remove("site-loading"); 1686 | doc.classList.add("sidedish-enabled"); 1687 | doc.classList.add("is-search"); 1688 | let currentSearch = window.location.href;//window.location.search; 1689 | document.addEventListener('DOMContentLoaded', (event) => { 1690 | function swapInfo() { 1691 | let ops = $$(".op"); 1692 | for (let op of ops) { 1693 | let opPostInfo = $(".postInfo", op); 1694 | op.prepend(opPostInfo); 1695 | op.classList.add("post--file-swapped"); 1696 | } 1697 | } 1698 | swapInfo(); 1699 | function fitText(el) { 1700 | // el.style.fontSize = Math.max(Math.min(el.clientWidth / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)) + 'px'; 1701 | el.style.fontSize = Math.max(Math.min(el.clientWidth / 10, parseFloat(1/0)), parseFloat(-1/0)) + 'px'; 1702 | el.style.setProperty("--length", el.innerText.length); 1703 | } 1704 | 1705 | fitText($('.boardTitle')); 1706 | make({ 1707 | el: "aside", 1708 | cl4ss: "fcx-announcement warning", 1709 | html: `4chan X doesn't work on the find subdomain, though ss21 tries to style it.`, 1710 | appendTo: "body", 1711 | }); 1712 | function pageCurrent() { 1713 | let pagelists = $$('.pagelist.desktop .pages a'); 1714 | let firstPageStrong = null; 1715 | let matched = false; 1716 | pagelists.forEach((pagelist, index) => { 1717 | let parentStrong = pagelist.parentNode; 1718 | parentStrong.classList.remove('current-page'); 1719 | pagelist.textContent = pagelist.textContent.trim(); 1720 | if (index === 0) { 1721 | firstPageStrong = parentStrong; 1722 | } 1723 | if (pagelist.href === currentSearch) { 1724 | parentStrong.classList.add('current-page'); 1725 | matched = true; 1726 | } 1727 | }); 1728 | if (!matched && firstPageStrong) { 1729 | firstPageStrong.classList.add('current-page'); 1730 | } 1731 | } 1732 | pageCurrent(); 1733 | }) 1734 | } 1735 | //on(d, "PlayerEvent", removeStyle($("#sound-player-css", d.head))); 1736 | /* 1737 | function backup() { 1738 | doc.classList.remove('site-loading'); 1739 | doc.classList.add('no-fourchan-x'); 1740 | on(d, "4chanXInitFinished", doc.classList.remove('no-fourchan-x')); 1741 | } 1742 | 1743 | on(d, 'DOMContentLoaded', backup); 1744 | */ 1745 | ready(".custom-menu-ctrl", (element) => { 1746 | //doc.classList.remove('site-loading'); 1747 | //doc.classList.add('fourchan-ext'); 1748 | init(); 1749 | }); 1750 | 1751 | on(d, '4chanMainInit', function() { 1752 | //doc.classList.remove('site-loading'); 1753 | // doc.classList.add('fourchan-ext'); 1754 | function removeStyle(sel) { 1755 | if (sel) { 1756 | console.log( 1757 | "%css21 sidedish is removing this stylesheet: ", 1758 | "color:green;", 1759 | sel 1760 | ); 1761 | sel.remove(); 1762 | return true; 1763 | } else { 1764 | console.log("%css21 sidedish was unable to find: ", "color:red;", sel); 1765 | return false; 1766 | } 1767 | } 1768 | removeStyle($("style[type]", d.head)); // this removes the inline mobile css 1769 | on(d, 'DOMContentLoaded', replace4chanFooterList); 1770 | function swapInfo() { 1771 | let ops = $$(".op"); 1772 | for (let op of ops) { 1773 | let opPostInfo = $(".postInfo", op); 1774 | op.prepend(opPostInfo); 1775 | op.classList.add("post--file-swapped"); 1776 | } 1777 | } 1778 | on(d, 'DOMContentLoaded', swapInfo); 1779 | }); 1780 | })(); 1781 | --------------------------------------------------------------------------------