SHARE
TWEET

4chan theme fork

a guest Jun 12th, 2019 92 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @-moz-document domain("4chan.org")
  2. {
  3. /* 4chin Script
  4.  
  5. God this is so long and such a mess I'm v sorry.
  6. M A K E S U R E you import this file into 4chan X jfc pls: https://www.dropbox.com/s/e4o8nl37jy55zmx/4chinX.zip?dl=0
  7. Options/Settings > Import > Refresh
  8.  
  9. Uncomment line 48 (header-bar) to bring back the header image.
  10.  
  11. Comment line 57 (boardTitle) to show the header title.
  12.  
  13. Comment out line 66 (bannerCnt) to show the 4chin banner.
  14.  
  15. If you show one/both of these change line 62 (body) to 0px.
  16.  
  17. Enjoy. <3
  18.  
  19. /*
  20.  
  21.  
  22. /* Customize colors below */
  23.    
  24.    
  25. /* custom colors */             /*var(--alt-bg)*/
  26. :root {
  27. --post-bg: #14151F !important;                /* header bg */
  28. --alt-bg: #1d1e2a !important;                /* bg */    
  29. --header-bg: #1a1b26 !important;                /* post bg */        
  30. --main-text: #ccc !important;      /* main text */
  31. --secondary-text: #74857C !important;        /* name >text and quote */
  32. --third-text: #a88085 !important;       /* date and links */
  33. --title-text: #B294BB !important;       /* board title */    
  34. }      
  35.    
  36.    
  37. body, html {
  38.     background: var(--alt-bg) !important;
  39.     background-repeat: repeat !important;
  40.     background-attachment: fixed !important;
  41.     background-position: center center !important;
  42.     margin: 0 auto !important;  
  43. }  
  44.    
  45.          /* header bg - make sure the image is around 2000 x 140 */
  46.    
  47.    
  48. #header-bar::before {
  49.          /* default */
  50.    /* content: url("http://i.imgur.com/urpV4LK.png") !important;*/
  51.     /* merry christmas!
  52.      content: url("http://i.imgur.com/RSufmER.jpg") !important;*/
  53. }
  54.    
  55.  
  56.                 /* remove header title */
  57.  
  58. .div.boardTitle, .yotsuba-b:root div.boardTitle, div.boardTitle {
  59.  display: none !important;
  60.     margin-top: 40px !important;    
  61. }    
  62.  
  63. body {
  64.      margin-top: 40px !important;  /* 40 or 0 probably */
  65. }  
  66.  
  67. #bannerCnt {
  68.  display: none !important;
  69.  margin-top: 45px !important;
  70. }  
  71.  
  72.                            /* img - your bae/waifu/etc goes here */
  73.  
  74. /*
  75. body::after {
  76.    content: url("http://i.imgur.com/wWiIpQd.png");
  77.     position: fixed !important;
  78.     margin: auto !important;
  79.     margin-top: 10px !important;
  80.     left: 0 !important;
  81.     bottom: 0 !important;    
  82.     margin-left: 100px !important;  
  83.     z-index: 1 !important;    
  84. }      
  85. */    
  86.    
  87.                                         /* op height */  
  88. div.opContainer {
  89.     min-height: 225px !important;
  90. }    
  91.    
  92.                            /* header title */
  93.    
  94. .div.boardTitle, .yotsuba-b:root div.boardTitle, div.boardTitle {    
  95.     text-align: center;
  96.     /*margin-left: 60px !important;   */    
  97.     font-family: "Segoe Script", cursive !important;
  98.     font-size: 48px !important;    
  99.     padding: 0px !important;
  100.     color: var(--title-text) !important;
  101.     text-shadow: 3px 3px 3px rgba(0,0,0,0.3) !important;
  102. }    
  103.    
  104.    
  105. body, #qr, #thread-watcher, #thread-watcher .refresh, .menu-button .fa, #watched-threads .watcher-title, #watched-threads .watcher-unread, #thread-watcher a, .entry, #qr textarea.field, .right-box, .field, .globalMessage, div#boardNavDesktop, table.postForm > tbody > tr > td:first-child, input[type="text"], input[type="password"], table.postForm > tbody textarea, #recaptcha_response_field, div#boardNavDesktopFoot, .gal-count, #index-search, .expand-all-shortcut, .subject, div.post div.postInfo span.subject, #custom-board-list, .yotsuba-b:root #board-list a, .yotsuba:root #board-list a {
  106. color: var(--main-text) !important;
  107. }
  108.  
  109.    
  110. /* watcher and name block bg, quote text */
  111. #watcher-link, .warning, div.post div.postInfo span.nameBlock span.name, div.post div.postInfo span.nameBlock span.postertrip, .nameBlock, .yotsuba_b_new .backlink, .quotelink, .yotsuba_b_new .backlink a, a:hover, code, blockquote > span.quote, .catalog-thread > .comment > span.quote, .yotsuba:root #board-list a:hover, #watched-threads .watcher-title:hover, .section-main label {
  112. color: var(--secondary-text) !important;        
  113. }
  114.    
  115.    
  116. a, div.post div.postInfo span.postNum a:hover, a.deadlink, a.close, .tab-filter, a.tab-main.tab-selected, #qr-no-file, .yotsuba-b:root .entry, #boards a, .boxbar, .deadlink, .gal-name, #qr select, select, kbd, #thread-watcher > .move, .qr-shortcut, span.dateTime, .yotsuba.fixed:root #custom-board-list .current, .yotsuba-b.fixed:root #custom-board-list .current, .yotsuba-b:root #header-bar:hover, .yotsuba-b:root #board-list a:hover, .quotelink:hover, .settings-link, span.menu-button, #thread-stats, .container, .fileText, .yotsuba:root #header-bar, .yotsuba:root #notifications, div.post div.postInfo span.postNum, div.post div.postInfo span.postNum a {
  117. color: var(--third-text) !important;        
  118. }
  119.    
  120.    
  121.                                     /* bg colors */
  122.    
  123.    
  124. div.reply, .catalog-mode:root .board, .inline .post {
  125. background: var(--post-bg) !important;
  126. }  
  127.    
  128.    
  129. .boxcontent, .top-box, .left-box, .right-box, #recent-images a {
  130. background: var(--post-bg) !important;
  131. }
  132.    
  133.  
  134. #fourchanx-settings.dialog,
  135. fieldset legend, .yotsuba-b:root .suboption-list > div:last-of-type, .dialog:not(#qr):not(#thread-watcher):not(#header-bar), #fourchanx-settings code, kbd, .reply:target, .reply.highlight, .yotsuba-b:root .inline {
  136. background: var(--post-bg) !important;
  137. }
  138.    
  139. #header-bar, .yotsuba-b:root:not(.fixed) #header-bar, span.boardList, .yotsuba:root .suboption-list > div:last-of-type {
  140.     background: var(--header-bg) !important;
  141. }    
  142.    
  143.    
  144.    
  145. /* quoted bg */
  146.  .yotsuba:root .inline, .boxbar, #qr select {
  147.      background: var(--alt-bg) !important;
  148.  }    
  149.    
  150.    
  151.    
  152. #ft li, .right-box,  .boxcontent, .top-box, .left-box, #recent-images .boxcontent, #qr select, #archive-board-select, select {
  153.     border: none !important;
  154. }    
  155.    
  156. .top-box .menubutton, .right-box .menubutton {
  157.     background-image: none !important;
  158. }    
  159.    
  160. #ft li, #ft ul {
  161.     background: none !important;
  162.     border: none !important;
  163. }    
  164.  
  165.    
  166.                                                              /* misc */    
  167.    
  168. img:hover {
  169.         opacity: 0.3 !important;
  170.         transition: 0.4s ease-in-out !important;
  171.     }    
  172.    
  173.           /* unscrollable horizontally, fixes stupid header issues */    
  174. body {
  175. overflow-x: hidden !important;
  176. }      
  177.  
  178. /* quotes to (you) border color */
  179. .highlight-you:root .quotesYou.opContainer, .highlight-you:root .quotesYou > .reply {
  180.     border-top: 1px solid var(--secondary-text) !important;
  181. }  
  182.  
  183.                             /* highlight "selected" posts */
  184. .post.reply.highlight {
  185.       border-top: 1px solid var(--secondary-text) !important;
  186. }  
  187.    
  188. /* notifications */
  189. .message {
  190.     background-color: var(--post-bg) !important;
  191.     color: var(--main-text) !important;
  192.     text-shadow: none !important;
  193. }    
  194.    
  195. /* transition for links */
  196. .yotsuba:root #board-list a, a:hover, #watched-threads .watcher-title:hover {
  197.     transition: ease-in-out .2s !important;
  198.     }
  199.    
  200. /* hide fields when not hovering - hide yo trip */        
  201. #qr input.field {
  202.     opacity: 0 !important;
  203. }
  204.  
  205. #qr input.field:hover {
  206.     opacity: 1 !important;
  207. }    
  208.    
  209.    
  210.    
  211.                                /* adjust header */
  212.    
  213.    
  214.     /*
  215. #header-bar {
  216.     height: 200px !important;
  217.     background: url("http://i.imgur.com/QMSDOia.png") !important;
  218.     background-size: cover !important;
  219.     z-index: -10 !important;
  220. }          
  221.     */
  222.    
  223.        /* bg of header items */
  224.    
  225. .centered-links:root #custom-board-list, #thread-stats, .settings-link, span.menu-button, #watcher-link , #shortcut-gallery, #thread-stats, .div.boardTitle, .yotsuba-b:root div.boardTitle, div.boardTitle {
  226.      background: rgba(0,0,0,0) !important;  
  227. }      
  228.    
  229. #header-bar {
  230.      background: var(--post-bg) !important;  
  231.     max-height: 50px !important;    
  232.     }
  233.    
  234. #header-bar::before {
  235.     position: absolute !important;
  236.     margin: auto !important;
  237.     left: 0 !important;
  238.     top: 0 !important;
  239.     margin-top: 40px !important;
  240.     max-height: 100px !important;
  241.     width: 800px !important;    
  242.     }  
  243.    
  244.          
  245.                                                    /* thread */    
  246. div.thread {
  247.     max-width: 1100px !important;
  248.     margin: 0 auto !important;
  249. }      
  250.    
  251. /*div.thread, .replyContainer, .postContainer {
  252.     background: transparent !important;
  253. }  */
  254.    
  255.    
  256. div.op {
  257.     margin-top: 0px !important;
  258. }  
  259.    
  260. .yotsuba:root .watch-thread-link, .watch-thread-link {
  261.     background: url("http://puu.sh/oj6ff/fc91658f7b.png") !important;  
  262.     width: 33px !important;
  263.     height: 5px !important;
  264.     }          
  265.    
  266. /*#fT1834928 {
  267.     margin-top: -10px !important;
  268.     margin-right: 141px !important;
  269. }    */  
  270.    
  271. #header-bar {
  272.     border: 0 !important;
  273.     margin: 0 auto !important;
  274.    margin-top: 0px !important;
  275. /* max-width: 1096px !important;  */
  276.     display: inline-block !important;
  277. }            
  278.        
  279. span.boardList {
  280.     margin-top: 0px !important;
  281.     display: inline-block !important;
  282.     }    
  283. .hide-board-list-button {
  284.    margin-top: 28px !important;
  285.    display: inline-block !important;
  286.     }    
  287.  
  288.     /*
  289. #full-board-list, .centered-links:root #header-bar {
  290.     z-index: 200 !important;
  291. }    
  292. #thread-stats:hover {
  293.     z-index: -20 !important;
  294. }    
  295.     */
  296.    
  297. .yotsuba-b:root #board-list {
  298.     max-width: 396px !important;
  299. }      
  300.    
  301. /*.centered-links:root #shortcuts, #custom-board-list {  
  302.     left: 56px !important;    
  303. }    
  304.  
  305. #shortcuts {
  306.         float: none !important;
  307.     }    */
  308.    
  309. #header-bar a.current, .yotsuba-b:root #board-list a, .section-main label {
  310.     text-decoration: none !important;    
  311. }  
  312.    
  313. .index-refresh-shortcut, span.shortcut:nth-child(5), #shortcut-index-refresh > a:nth-child(1) {
  314.     display: none !important;
  315. }    
  316.        
  317. div.reply {
  318.     box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);  
  319.     /*box-shadow: none !important;*/
  320. }
  321. div.reply:hover {
  322.     box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
  323.     /*box-shadow: none !important;*/
  324. }    
  325.    
  326.    
  327. /* reply and op bg colors */    
  328.  
  329. .replyContainer {
  330.     padding: 0px !important;
  331. }    
  332.    
  333. .postContainer.replyContainer {
  334.     margin-top: 15px !important;
  335. }    
  336.    
  337. .post.reply, .opContainer, .post.reply:hover {
  338.     width: 100% !important;
  339.     padding: 10px !important;
  340.     -moz-box-sizing:border-box!important;
  341. }    
  342.    
  343. div.opContainer {
  344.         width: 98% !important;
  345.          margin: 0 auto !important;
  346.     }    
  347.    
  348. .opContainer {
  349.     padding-bottom: 3px !important;
  350. }    
  351.    
  352. span.postNum a:hover {
  353.    /* font-family:  Open Sans !important;*/
  354. }
  355.    
  356. /* give reply borders  */
  357. div.reply, .post.reply, .opContainer {
  358.     border: 0px !important;
  359.     border-style: solid !important;
  360. }          
  361.    
  362.    
  363. div.post blockquote.postMessage {
  364.     width: 96% !important;
  365. }    
  366.      
  367.     /* reply link, backlink location
  368.    
  369. div.post div.postInfo span.postNum a {
  370.     visibility: hidden !important;
  371.     float:right;
  372. }                  
  373. div.post div.postInfo span.postNum a:before {
  374.     content: url(https://puu.sh/k0oPB/098f590af7.png) !important;
  375.     opacity: 0.6 !important;  
  376.     visibility: visible;
  377.     float:right;
  378.     margin-left: -9px !important;
  379.     margin-top: -10px !important;
  380.     width: 8px !important;
  381. }     */
  382.    
  383. div.post div.postInfo span.postNum {
  384.     padding: 8px !important;
  385.     float: right !important;
  386.     margin-right: 4px !important;
  387.     margin-top: -8px !important;
  388. }        
  389.              
  390. span.dateTime {
  391.     padding: 4px !important;
  392.     right: 27% !important;
  393.     margin-top: -4px !important;
  394. }            
  395.    
  396. /* menu dropdown */    
  397. .fa-angle-down::before, .op .menu-button, .postContainer .menu-button {
  398.     content: url("http://i.imgur.com/6aLeXdr.png") !important;
  399.     margin-right: 0px;
  400.     margin-top: 1px;
  401.     float:right;
  402.     width: 10px !important;
  403.     height: 10px !important;
  404.     /*box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);*/
  405. }        
  406.  
  407. .fa-angle-down::before {
  408.     opacity: 0.5 !important;
  409. }      
  410.  
  411. /* give image borders */    
  412. img {
  413.      border: 0px !important;
  414.     border-color: var(--alt-bg) !important;
  415.     border-style: solid !important;
  416. }    
  417.    
  418. /* Replace backlinks by arrow icons */
  419. .backlink:first-child::before {
  420. margin-left: -5px !important;
  421. }
  422. .backlink {
  423. font-size: 0 !important;
  424. }
  425. .backlink:after {
  426. content: url("http://i.imgur.com/7E3vTXf.png") !important;
  427. font-size: 12px !important;
  428. margin-right: 0px !important;
  429. opacity: 0.5 !important;    
  430. }
  431. .backlink:after {
  432.     margin-left: 8px !important;
  433. }
  434. .backlink:hover::after, .backlink.filtered:hover::after {
  435. opacity: 0.65 !important;
  436. }
  437. .backlink.filtered:after {
  438. opacity: 0.65 !important;
  439. }
  440. .post.op .backlink:first-child {
  441. margin-left: 0px !important;
  442. }      
  443.  
  444. /* fonts */
  445. body, .post.reply, .opContainer, #board-list, #custom-board-list, #menu.dialog, .entry, .yotsuba-b:root .suboption-list > div:last-of-type, option, #qr textarea.field, .field, #index-search.field, #updater.dialog, #thread-stats.dialog, #thread-stats, .boardSubtitle, #thread-watcher, div.post div.postInfo span.nameBlock span.postertrip, div.post div.postInfo span.nameBlock span.name, div.post div.postInfo span.subject, #qr:not(.captcha-open) .captcha-counter > a, #file-n-submit > input, #watcher-link, .settings-link, .expand-all-shortcut, .qr-shortcut, div#boardNavDesktop, .yotsuba_b_new .backlink, .quotelink, div#boardNavDesktop a, table.postForm > tbody > tr > td:first-child, input[type="text"], input[type="password"], table.postForm > tbody textarea, #recaptcha_response_field, div#boardNavDesktopFoot a, #qr select {
  446.   font-family: "Open Sans", "Segoe UI" !important;
  447.   font-weight: 600 !important;
  448.   font-size: 13px !important;
  449. }
  450.    
  451. /* change the margin depending on whether you show the banner and the header */    
  452. hr {
  453.     margin-top:0px !important;
  454.     padding-top: 0px !important;
  455.     border: 0 !important;
  456. }
  457.    
  458. /* buttons */
  459.    
  460. .settings-link.fa-wrench:before, .qr-shortcut:before, #watcher-link:before {
  461.     /*font-family:  Open Sans !important;
  462.     font-weight: 600 !important;*/
  463.     font-size: 12px !important;
  464. }    
  465.    
  466. #thread-stats {
  467.     position: absolute !important;
  468.     left: 14px !important;
  469.   }            
  470.  
  471. /*.qr-shortcut {
  472.     margin-left: -45px !important;
  473. }    
  474. .qr-shortcut:before {
  475.     content: "Reply" !important;
  476.     margin-right: 5px !important;
  477.     z-index: 3 !important;
  478.   }      */  
  479.    
  480. .settings-link {
  481.     position: absolute !important;
  482.     right: 15px !important;
  483.   }
  484. .settings-link.fa-wrench:before {
  485.     content: "Options" !important;
  486.     margin-right: 5px !important;
  487.     z-index: 3 !important;
  488.   }  
  489.    
  490.     .fa-comment-o {
  491.     position: absolute !important;
  492.     right: 160px !important;  
  493.     top: 18px !important;
  494.     }    
  495.            
  496. /* fade images
  497.    
  498. div.boardBanner, img {
  499.     opacity: 0.5 !important;
  500. }  
  501.    
  502. div.boardBanner:hover, img.hover, .expanded-image > .post > .file > .fileThumb > .full-image {
  503.     opacity: 0.9 !important;
  504. }       */
  505.        
  506.    
  507. /* Links */
  508. a, a:hover, div.post div.postInfo span.postNum a:hover, a.quotelink, a.deadlink {
  509. text-decoration: none !important;
  510. }    
  511.    
  512. /*.backlink.deadlink:not(.forwardlink), .quotelink.deadlink:not(.forwardlink) {
  513.     text-decoration: none !important;
  514. }  */  
  515.    
  516. /* if you use thread conversations */
  517.    
  518. .threadContainer {
  519.     border-left: 1px solid #434359 !important;
  520. }    
  521.  
  522. #header-bar .brackets-wrap:after,
  523. #header-bar .brackets-wrap:before,
  524. .shortcut:not(:last-child):after {
  525.     content:""!important;
  526. }
  527.    
  528. #update-timer {
  529.     color: transparent !important;
  530. }    
  531.    
  532. a.current:nth-child(5), .yotsuba.fixed:root #custom-board-list .current:hover, .yotsuba-b.fixed:root #custom-board-list .current {
  533.     border-bottom: 0px;
  534. }
  535.    
  536. /*#nav-links {
  537.     right:0;
  538.     padding:0px;
  539.     position:fixed;
  540.     bottom:0;
  541.     z-index:10;
  542. }*/
  543.    
  544. .navLinks {
  545.    margin-top: 50px !important;
  546. }    
  547.    
  548. #index-size, #index-sort, #index-mode {
  549.     border: none !important;
  550. }    
  551.    
  552. span.navLinks:nth-child(1) {
  553.     display: none;
  554. }    
  555.          
  556. div.sideArrows,    
  557. .qr-link-container,    
  558. .boardSubtitle,    
  559. .bottomCtrl.desktop,
  560. #absbot.absBotText,
  561. .navLinks.desktop,
  562. .navLinks.navLinksBot.desktop {
  563.     display: none !important;
  564. }
  565.  
  566. div.center:nth-child(16), div.center:nth-child(6) {
  567.     display: none !important;
  568. }
  569.    
  570. div.center:nth-child(4) {
  571.     border: none !important;
  572. }    
  573.  
  574. .yotsuba:root .hide-post-button,
  575. .yotsuba-b:root .hide-post-button {
  576.     display: none !important;
  577. }
  578.    
  579. #unread-line {
  580.     border:0!important;
  581.     height:1px!important;
  582.     margin-top:-10px!important;
  583. }
  584.    
  585. .inline {
  586.     padding-left: 15px !important;
  587.     padding-right: 15px !important;
  588.     border: 0 !important;
  589. }
  590.    
  591.                    /* overlay and menu */
  592.    
  593. #overlay {
  594.         background: rgba(0,0,0,0.7) !important;
  595. }    
  596.    
  597.    
  598. #fourchanx-settings legend {
  599.         font-family: "Pacifico", "Segoe Script" !important;
  600.        font-size: 25px !important;
  601.     font-weight: 200 !important;
  602. }    
  603.    
  604. :root a.backlink,
  605. :root .backlink-container > a.backlink.deadlink,
  606. .warning,
  607. :root a.replylink:hover,
  608. :root a:not(.entry):hover {
  609.    /* background: url(http://i.imgur.com/lFuGnSO.png) center no-repeat !important; */
  610.    /* content: url('http://i.imgur.com/lFuGnSO.png') !important;*/
  611. }
  612.    
  613. :root a.backlink {
  614.     margin-left: 5px !important;
  615. }      
  616.  
  617. .postInfo > input,
  618. a.hide-reply-button > span {
  619.     display: none !important;
  620. }
  621.  
  622. .fileText a {
  623.     text-decoration: none;
  624. }    
  625.  
  626. #qp, kbd {
  627.     border: 0 !important;
  628.     box-shadow: none !important;
  629. }
  630.  
  631. .close.fa.fa-times{
  632. display: none !important;
  633. }
  634.  
  635. #qr.dialog.has-captcha.autohide{
  636. border: 0px solid #6b454f !important;
  637. }
  638.    
  639. #qr.autohide:not(:hover):not(.has-focus) {
  640.     max-height:21px;
  641.     transition:max-height 0.7s ease 1s;
  642. }
  643.  
  644. #qr > form {
  645.      padding-top:4px!important;
  646. }
  647.  
  648. #qr {
  649.     background: var(--header-bg) !important;
  650.     box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.3);
  651.     border-radius: 0px !important;
  652.     transition: all 0.2s ease 0s;
  653.     transition:max-height 0.4s ease;
  654.     z-index:1!important;
  655. }
  656.    
  657. #qr > div, #qr {
  658.         box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  659.     }    
  660.  
  661. #qr label input[type="checkbox"] {
  662.     opacity: 0.4 !important;
  663. }
  664.    
  665. #qr label input[type="checkbox"]:hover {
  666.      opacity: 0.7 !important;
  667. }    
  668.    
  669. #qr .textarea textarea {
  670.     max-height:184px;
  671.     transition:none!important;
  672. }
  673.    
  674. .field, #qr option:hover,
  675. #dump-button:hover,
  676. :root .field:hover,
  677. #menu .entry.focused,
  678. :root .field:focus, #file-n-submit > input {
  679.   background: var(--header-bg) !important;
  680.   border-color: var(--header-bg) !important;
  681.    color: var(--main-text) !important;
  682. }    
  683.    
  684. #qr form {
  685.     bottom: 10px !important;
  686.     right: 0% !important;
  687.     width: 300px !important;
  688.     border: 1px var(--header-bg) !important;
  689.     padding: 0px !important;
  690.     padding-top: 0px !important;
  691.     padding-bottom: 0px !important;
  692.     background: var(--header-bg) !important;
  693.     border-color: var(--post-bg) !important;
  694.     border-radius: 0px !important;
  695.     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  696. }
  697.    
  698. #dump-button {
  699.     background: var(--header-bg) !important;
  700.     border-color: var(--post-bg) !important;
  701.     color: var(--main-text) !important;
  702. }
  703.  
  704. #qr .field, .field {
  705.     background: var(--header-bg) !important;
  706.     border: 1px var(--header-bg) !important;
  707.     color: var(--main-text) !important;
  708. }  
  709.    
  710. .replyContainer {
  711.     padding: 10px !important;
  712. }
  713.    
  714. .fileText {
  715.         opacity: 0 !important;
  716.         max-height: 0px !important;
  717.         transition: .4s ease-out !important;
  718.     }
  719.  
  720. .file:hover .fileText, .file.image-expanded .fileText {
  721.         opacity: 1 !important;
  722.         max-height: 22px !important;
  723.     }    
  724.        
  725. /* info box block */    
  726.    
  727. .fileText {
  728.     margin-top: 0px !important;
  729.     margin-left: -3px !important;
  730.     padding: 4px !important;
  731.     max-width: 440px !important;
  732. }    
  733.    
  734.  
  735. /* name block */    
  736.    
  737. div.post div.postInfo span.nameBlock span.name, div.post div.postInfo span.nameBlock span.postertrip, .nameBlock {
  738.     padding: 4px !important;
  739.     margin-left: -3px !important;
  740. }      
  741.    
  742. .warning {
  743.     padding: 4px !important;
  744.     margin-left: -3px !important;
  745. }  
  746.    
  747. /* time block */  
  748.    
  749. /* replies block */    
  750.    
  751. .container {
  752.     padding: 4px !important;
  753.     margin-left: -3px !important;
  754. }    
  755.    
  756. /* subject block */  
  757.    
  758. .subject, div.post div.postInfo span.subject {
  759.     padding: 4px !important;
  760.     margin-left: -3px !important;
  761. }          
  762.    
  763. #thread-stats {
  764.     padding: 6px !important;
  765.     margin-left: -13px !important;
  766. }      
  767.    
  768. .expand-all-shortcut {
  769.     padding: 6px !important;
  770.     margin-top: -3px !important;
  771.     margin-left: -168px !important;
  772.     display: none !important;
  773. }    
  774.    
  775. .expand-all-shortcut {
  776.     position: absolute !important;
  777. }  
  778.    
  779. .contract-all-shortcut {
  780.     margin-left: -160px !important;
  781.     top: 10px !important;
  782.     display: none !important;
  783. }            
  784.    
  785. /*.qr-shortcut {
  786.     display: inline-block !important;
  787.    background: url('https://puu.sh/k0xOW/ddda4484a4.png');
  788.     position: fixed !important;
  789.     top: 0 !important;
  790.     margin-left: 1140px !important;
  791.     margin-top: 182px !important;
  792. }       */
  793.    
  794. /*.qr-shortcut {
  795.     padding: 6px !important;
  796.     margin-left: -107px !important;
  797.     opacity: 1 !important;
  798.     margin-top: -3px !important;
  799.     position: absolute !important;
  800. }    */
  801.              
  802. #fourchanx-settings.dialog,
  803. fieldset legend, .yotsuba-b:root .suboption-list > div:last-of-type, .dialog:not(#qr):not(#thread-watcher):not(#header-bar), #fourchanx-settings code, kbd {
  804.     border: none !important;
  805. }
  806.  
  807. #fourchanx-settings fieldset {
  808.     border: 0px solid;
  809.     border-radius: 3px;
  810. }      
  811.    
  812. /* hide notifications */
  813.  
  814. #blotter, .globalMessage {
  815.    display: none !important ;
  816. }
  817.    
  818. #toggleMsgBtn {
  819.     opacity: 0 !important;
  820. }    
  821. #toggleMsgBtn:hover {
  822.     opacity: 0.8 !important;
  823. }        
  824.                  
  825. div.post div.postInfo span.postNum {
  826.     opacity: 0.8 !important;
  827. }    
  828. div.post div.postInfo span.postNum:hover {
  829.     opacity: 0.5 !important;
  830. }                
  831.    
  832. .qr-shortcut {
  833.     position: absolute !important;
  834.     margin-left: 800px !important;
  835.     margin-top: 300px !important;
  836.     font-size: 0px !important;
  837.     background: transparent !important;
  838.     color: var(--post-bg) !important;
  839.     opacity: 1 !important;
  840. }    
  841. .qr-shortcut:after {
  842.     position: absolute !important;
  843.     content: url('https://puu.sh/l7Ee0/18e02e57cd.png');
  844.     margin-right: 0px !important;
  845.     font-size: 0px !important;
  846.     color: var(--post-bg) !important;
  847.     right: 0 !important;
  848.     bottom: 0 !important;
  849.   }            
  850.    
  851. .gal-prev, .gal-next, .gal-count, .gal-name {
  852.     background: transparent !important;
  853.     border: none !important;
  854. }    
  855.    
  856. #a-gallery {
  857.     background: rgba(20, 21, 31, 0.7) none repeat scroll 0% 0% !important;
  858. }    
  859.    
  860. .gal-prev::after {
  861.     border-right: 12px solid var(--secondary-text) !important;
  862. }    
  863.    
  864. .gal-next::after  {
  865.     border-left: 12px solid var(--secondary-text) !important;
  866. }      
  867.    
  868. /* old qr */
  869. table.postForm > tbody > tr > td:first-child, input[type="text"], input[type="password"], table.postForm > tbody textarea, #recaptcha_response_field {
  870.     background: transparent !important;
  871.     border: none !important;
  872. }    
  873.        
  874. #bannerCnt {
  875.     border: none;
  876. /*     height: 50px !important; */
  877.     padding: 0px !important;
  878.     opacity: 0.6 !important;
  879.     box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.3);
  880. }              
  881. #bannerCnt:hover {
  882.     opacity: 0.5 !important;
  883. }
  884.    
  885. .qr-link-container + #togglePostFormLink, #appchan-gal {
  886.     display: none !important;
  887. }    
  888.    
  889. div.thread {
  890.     background: transparent !important;
  891. }    
  892.    
  893. /* op */
  894. .opContainer {
  895.     background: var(--post-bg) !important;
  896.     box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  897. }        
  898.    
  899. a.fileThumb, div.post div.file .fileThumb img {
  900.     float: right !important;
  901.     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  902. }      
  903.          
  904. /* catalog */  
  905.    
  906. .board {
  907.     margin: 0 auto !important;
  908.     max-width: 1500px !important;
  909.     margin-top: 20px !important;
  910. }    
  911.    
  912. .catalog-mode:root .board {
  913.         box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  914.     }    
  915.    
  916. .navLinks {
  917.     background: var(--post-bg) !important;
  918.     padding: 0px !important;
  919.     margin: 0 auto !important;
  920.     max-width: 1540px !important;
  921.     margin-top: 60px !important;
  922.     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
  923. }    
  924.  
  925. .catalog-mode:root .board {
  926.   padding: 25px !important;
  927. }  
  928.    
  929. .catalog-stats {
  930.     background: var(--alt-bg) !important;
  931.     padding: 5px !important;
  932. }      
  933. .catalog-thread > .subject {
  934.     background: var(--header-bg) !important;
  935.     padding: 5px !important;
  936. }    
  937. .catalog-thread > .comment {
  938.     background: var(--header-bg) !important;
  939.     padding: 5px !important;
  940. }    
  941.    
  942.    
  943. /* catalog hover */
  944. .catalog-reply, .catalog-post.catalog-post:hover {
  945. background: var(--alt-bg) !important;        
  946. border: none !important;    
  947. }        
  948.    
  949. .catalog-post.catalog-post:hover {
  950. box-shadow: 2px 2px 6px 8px rgba(0,0,0,0.2) !important;        
  951. }    
  952.    
  953. div.navLinks {
  954.     padding: 5px !important;
  955. }    
  956.  
  957. .bottomlink, .archlistlink, .indexlink {
  958.         display: none !important;
  959.  }
  960.    
  961. .brackets-wrap::after, .brackets-wrap::before {
  962.     content: "" !important;
  963. }    
  964. #index-search, #index-size, #index-sort, #index-mode {
  965.     background: var(--header-bg) !important;
  966. }    
  967.        
  968. span.postNum.desktop a[title="Link to this post"] {
  969.     font-size: 0px !important;
  970.   }
  971.  
  972.   span.postNum.desktop a[title="Link to this post"]:after {
  973.     content: "#" !important;
  974.     font-size: 12px !important;
  975.   }    
  976.    
  977. .centered-links:root #custom-board-list {
  978.     top: 13px !important;
  979.     padding: 10px !important;
  980. }    
  981.    
  982. #thread-stats, .settings-link {
  983.    padding: 15px !important;
  984.     /*top: -1px !important;*/
  985. }        
  986.    
  987. span.menu-button {
  988.     padding: 15px !important;
  989.     top: 0px !important;
  990.     left: 1% !important;
  991.     width: 3px !important;
  992.     }    
  993.    
  994. #watcher-link {
  995.     padding: 15px !important;
  996.     margin-left: -115px !important;
  997.    /* margin-top: -4px !important;*/
  998.     opacity: 1 !important;
  999.     position: absolute !important;
  1000. }    
  1001.    
  1002. #shortcut-gallery {
  1003.     padding: 15px !important;
  1004.     margin-left: -109px !important;
  1005.     margin-top: -4px !important;
  1006.     opacity: 1 !important;
  1007.     position: absolute !important;    
  1008.     display: none !important;
  1009. }    
  1010.  
  1011. #header-bar .menu-button i {
  1012.     margin-top: -2px !important;
  1013.     }          
  1014.    
  1015. div.post div.postInfo span.nameBlock:after {
  1016.         content: "||" !important;
  1017.     }    
  1018.    
  1019. span.postNum.desktop a[title="Link to this post"]:after {
  1020.         opacity: 0.8 !important;
  1021.     }    
  1022.    
  1023.    
  1024.                 /* remove skellington (gtfo out of here 4chin w/ this shiiiiiit)*/
  1025.    
  1026.     #skellington {
  1027.         display: none !important;
  1028.     }    
  1029.      
  1030. #thread-watcher {
  1031.     border: none !important;
  1032.     position: fixed !important;
  1033.     top: 0 !important;
  1034.     left: 0 !important;
  1035.     z-index: 999 !important;
  1036.     left: -16% !important;
  1037.     top: 5% !important;
  1038.     cursor: default !important;
  1039.     background: var(--post-bg) !important;
  1040.     box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.2);
  1041.     height: 93% !important;        
  1042.     width: 15% !important;    
  1043.     transition: ease-in-out .3s !important;
  1044.     padding: 20px !important;
  1045. }
  1046.    
  1047. #thread-watcher:hover {
  1048.     left: 0% !important;
  1049.     transition: ease-in-out .3s !important;
  1050. }    
  1051.    
  1052. /* div.boardBanner {
  1053.        width: 700px !important;
  1054.        height: 100px !important;
  1055.        margin: 0 auto !important;
  1056. }     */
  1057.        
  1058. #header-bar::before {
  1059. z-index: -1 !important;
  1060. }    
  1061.        
  1062. div.boardBanner > div.boardTitle {
  1063. z-index: 9999 !important;
  1064. }    
  1065.    
  1066.      
  1067.    
  1068. /*    
  1069. .fourchan-x:root body, .fixed.top-header body {
  1070.         z-index: -1 !important;
  1071. }  
  1072.     */
  1073.    
  1074.                    /* dropdowns */    
  1075.    
  1076. select {    
  1077.     text-align: center !important;
  1078.     width: 130px !important;    
  1079.     height: 23px !important;
  1080. }    
  1081.    
  1082. #index-options select {
  1083.     margin-right: 10px !important;
  1084. }    
  1085.    
  1086.    
  1087.     /*
  1088. #menu {
  1089.        z-index: 99999 !important;
  1090.        margin-right: 50px !important;
  1091.        margin-top: 0px !important;
  1092.        position: absolute !important;
  1093.        right: 0 !important;
  1094.        top: 0 !important;
  1095.        max-width: 200px !important;
  1096. }      
  1097.     */
  1098.    
  1099. .dialog.submenu {
  1100.     margin-top: -40px !important;
  1101.     z-index: 99999 !important;
  1102.     padding: 0px !important;    
  1103. }    
  1104.    
  1105. #full-board-list {
  1106.        z-index: 99999 !important;
  1107.        margin-top: -40px !important;
  1108.        position: fixed !important;
  1109.        right: 0 !important;
  1110.        top: 0 !important;
  1111.     padding: 10px !important;
  1112. }    
  1113.    
  1114.    
  1115. #header-bar, #header-bar::before, .yotsuba:root:not(.fixed) #header-bar {
  1116.     min-width: 100% !important;
  1117.     top: 0 !important;    
  1118.     /* comment this next line to fix the J hotkey not working and/or to have the header show always */
  1119.     position: absolute !important;      
  1120. }    
  1121.    
  1122.    
  1123.    
  1124. /* Only show date/dropdown arrow/quotelinks on hover
  1125.    
  1126. div.post div.postInfo span.postNum a {
  1127.     opacity: 0 !important;
  1128.     transition: .2s ease-out !important;
  1129.     }    
  1130. div.post div.postInfo span.postNum a:hover {
  1131.     opacity: 1 !important;
  1132.     transition: .2s ease-out !important;
  1133.     }
  1134.  
  1135. span.dateTime {
  1136.     opacity: 0 !important;
  1137.      position: absolute !important;
  1138.     transition: .2s ease-out;
  1139. }      
  1140. span.dateTime:hover {
  1141.     opacity: 1 !important;
  1142.     transition: .2s ease-out;
  1143. }      
  1144.  */
  1145. .fa-angle-down::before, .op .menu-button, .postContainer .menu-button {
  1146. transition: .2s ease-out;
  1147.     opacity: 0.5 !important;
  1148. }    
  1149. .fa-angle-down:hover, .op .menu-button:hover, .postContainer .menu-button:hover {
  1150.         transition: .2s ease-out;
  1151.         opacity: 1 !important;
  1152.     }      
  1153.    
  1154.              
  1155.                       /* remove christmas hats */
  1156.    
  1157. .hats-enabled:root .catalog-small > .catalog-thread::after, .party-hat {
  1158.         display: none !important;
  1159. }
  1160. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top