chloechantelle/4chin.css

## 4chin.css
/*
This is extremely long and a super mess, apologies in advance.

First install 4chanX: https://github.com/ccd0/4chan-x
Then import this file into 4chan X: https://www.dropbox.com/s/e4o8nl37jy55zmx/4chinX.zip?dl=0
Options/Settings > Import > Refresh

Uncomment line 48 (header-bar) to bring back the header image.

Comment line 57 (boardTitle) to show the header title.

Comment out line 66 (bannerCnt) to show the 4chin banner.

If you show one/both of these change line 62 (body) to 0px.

Enjoy. <3

/*


/* Customize colors below */


/* custom colors */             /*var(--alt-bg)*/
:root {
--post-bg: #14151F !important;                /* header bg */
--alt-bg: #1d1e2a !important;                /* bg */
--header-bg: #1a1b26 !important;                /* post bg */
--main-text: #ccc !important;      /* main text */
--secondary-text: #74857C !important;        /* name >text and quote */
--third-text: #a88085 !important;       /* date and links */
--title-text: #B294BB !important;       /* board title */
}


body, html {
    background: var(--alt-bg) !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    margin: 0 auto !important;
}

         /* header bg - make sure the image is around 2000 x 140 */


#header-bar::before {
         /* default */
   /* content: url("http://i.imgur.com/urpV4LK.png") !important;*/
    /* merry christmas!
     content: url("http://i.imgur.com/RSufmER.jpg") !important;*/
}


				/* remove header title */

.div.boardTitle, .yotsuba-b:root div.boardTitle, div.boardTitle {
 display: none !important;
    margin-top: 40px !important;
}

body {
     margin-top: 40px !important;  /* 40 or 0 probably */
}

#bannerCnt {
 display: none !important;
 margin-top: 45px !important;
}

                           /* img - your bae/waifu/etc goes here */

/*
body::after {
   content: url("http://i.imgur.com/wWiIpQd.png");
    position: fixed !important;
    margin: auto !important;
    margin-top: 10px !important;
    left: 0 !important;
    bottom: 0 !important;
    margin-left: 100px !important;
    z-index: 1 !important;
}
*/

                                        /* op height */
div.opContainer {
    min-height: 225px !important;
}

                           /* header title */

.div.boardTitle, .yotsuba-b:root div.boardTitle, div.boardTitle {
    text-align: center;
    /*margin-left: 60px !important;   */
    font-family: "Segoe Script", cursive !important;
    font-size: 48px !important;
    padding: 0px !important;
    color: var(--title-text) !important;
    text-shadow: 3px 3px 3px rgba(0,0,0,0.3) !important;
}


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 {
color: var(--main-text) !important;
}


/* watcher and name block bg, quote text */
#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 {
color: var(--secondary-text) !important;
}


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 {
color: var(--third-text) !important;
}


                                    /* bg colors */


div.reply, .catalog-mode:root .board, .inline .post {
background: var(--post-bg) !important;
}


.boxcontent, .top-box, .left-box, .right-box, #recent-images a {
background: var(--post-bg) !important;
}


#fourchanx-settings.dialog,
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 {
background: var(--post-bg) !important;
}

#header-bar, .yotsuba-b:root:not(.fixed) #header-bar, span.boardList, .yotsuba:root .suboption-list > div:last-of-type {
    background: var(--header-bg) !important;
}


/* quoted bg */
 .yotsuba:root .inline, .boxbar, #qr select {
     background: var(--alt-bg) !important;
 }


#ft li, .right-box,  .boxcontent, .top-box, .left-box, #recent-images .boxcontent, #qr select, #archive-board-select, select {
    border: none !important;
}

.top-box .menubutton, .right-box .menubutton {
    background-image: none !important;
}

#ft li, #ft ul {
    background: none !important;
    border: none !important;
}


                                                             /* misc */

img:hover {
        opacity: 0.3 !important;
        transition: 0.4s ease-in-out !important;
    }

          /* unscrollable horizontally, fixes stupid header issues */
body {
overflow-x: hidden !important;
}

/* quotes to (you) border color */
.highlight-you:root .quotesYou.opContainer, .highlight-you:root .quotesYou > .reply {
    border-top: 1px solid var(--secondary-text) !important;
}

                            /* highlight "selected" posts */
.post.reply.highlight {
      border-top: 1px solid var(--secondary-text) !important;
}

/* notifications */
.message {
    background-color: var(--post-bg) !important;
    color: var(--main-text) !important;
    text-shadow: none !important;
}

/* transition for links */
.yotsuba:root #board-list a, a:hover, #watched-threads .watcher-title:hover {
    transition: ease-in-out .2s !important;
    }

/* hide fields when not hovering - hide yo trip */
#qr input.field {
    opacity: 0 !important;
}

#qr input.field:hover {
    opacity: 1 !important;
}


                               /* adjust header */


    /*
#header-bar {
    height: 200px !important;
    background: url("http://i.imgur.com/QMSDOia.png") !important;
    background-size: cover !important;
    z-index: -10 !important;
}
    */

       /* bg of header items */

.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 {
     background: rgba(0,0,0,0) !important;
}

#header-bar {
     background: var(--post-bg) !important;
    max-height: 50px !important;
    }

#header-bar::before {
    position: absolute !important;
    margin: auto !important;
    left: 0 !important;
    top: 0 !important;
    margin-top: 40px !important;
    max-height: 100px !important;
    width: 800px !important;
    }


                                                   /* thread */
div.thread {
    max-width: 1100px !important;
    margin: 0 auto !important;
}

/*div.thread, .replyContainer, .postContainer {
    background: transparent !important;
}  */


div.op {
    margin-top: 0px !important;
}

.yotsuba:root .watch-thread-link, .watch-thread-link {
    background: url("http://puu.sh/oj6ff/fc91658f7b.png") !important;
    width: 33px !important;
    height: 5px !important;
    }

/*#fT1834928 {
    margin-top: -10px !important;
    margin-right: 141px !important;
}    */

#header-bar {
    border: 0 !important;
    margin: 0 auto !important;
   margin-top: 0px !important;
/* max-width: 1096px !important;  */
    display: inline-block !important;
}

span.boardList {
    margin-top: 0px !important;
    display: inline-block !important;
    }
.hide-board-list-button {
   margin-top: 28px !important;
   display: inline-block !important;
    }

    /*
#full-board-list, .centered-links:root #header-bar {
    z-index: 200 !important;
}
#thread-stats:hover {
    z-index: -20 !important;
}
    */

.yotsuba-b:root #board-list {
    max-width: 396px !important;
}

/*.centered-links:root #shortcuts, #custom-board-list {
    left: 56px !important;
}

#shortcuts {
        float: none !important;
    }    */

#header-bar a.current, .yotsuba-b:root #board-list a, .section-main label {
    text-decoration: none !important;
}

.index-refresh-shortcut, span.shortcut:nth-child(5), #shortcut-index-refresh > a:nth-child(1) {
    display: none !important;
}

div.reply {
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
    /*box-shadow: none !important;*/
}
div.reply:hover {
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
    /*box-shadow: none !important;*/
}


/* reply and op bg colors */

.replyContainer {
    padding: 0px !important;
}

.postContainer.replyContainer {
    margin-top: 15px !important;
}

.post.reply, .opContainer, .post.reply:hover {
    width: 100% !important;
    padding: 10px !important;
    -moz-box-sizing:border-box!important;
}

div.opContainer {
        width: 98% !important;
         margin: 0 auto !important;
    }

.opContainer {
    padding-bottom: 3px !important;
}

span.postNum a:hover {
   /* font-family:  Open Sans !important;*/
}

/* give reply borders  */
div.reply, .post.reply, .opContainer {
    border: 0px !important;
    border-style: solid !important;
}


div.post blockquote.postMessage {
    width: 96% !important;
}

    /* reply link, backlink location

div.post div.postInfo span.postNum a {
    visibility: hidden !important;
    float:right;
}
div.post div.postInfo span.postNum a:before {
    content: url(https://puu.sh/k0oPB/098f590af7.png) !important;
    opacity: 0.6 !important;
    visibility: visible;
    float:right;
    margin-left: -9px !important;
    margin-top: -10px !important;
    width: 8px !important;
}     */

div.post div.postInfo span.postNum {
    padding: 8px !important;
    float: right !important;
    margin-right: 4px !important;
    margin-top: -8px !important;
}

span.dateTime {
    padding: 4px !important;
    right: 27% !important;
    margin-top: -4px !important;
}

/* menu dropdown */
.fa-angle-down::before, .op .menu-button, .postContainer .menu-button {
    content: url("http://i.imgur.com/6aLeXdr.png") !important;
    margin-right: 0px;
    margin-top: 1px;
    float:right;
    width: 10px !important;
    height: 10px !important;
    /*box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);*/
}

.fa-angle-down::before {
    opacity: 0.5 !important;
}

/* give image borders */
img {
     border: 0px !important;
    border-color: var(--alt-bg) !important;
    border-style: solid !important;
}

/* Replace backlinks by arrow icons */
.backlink:first-child::before {
margin-left: -5px !important;
}
.backlink {
font-size: 0 !important;
}
.backlink:after {
content: url("http://i.imgur.com/7E3vTXf.png") !important;
font-size: 12px !important;
margin-right: 0px !important;
opacity: 0.5 !important;
}
.backlink:after {
    margin-left: 8px !important;
}
.backlink:hover::after, .backlink.filtered:hover::after {
opacity: 0.65 !important;
}
.backlink.filtered:after {
opacity: 0.65 !important;
}
.post.op .backlink:first-child {
margin-left: 0px !important;
}

/* fonts */
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 {
  font-family: "Open Sans", "Segoe UI" !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* change the margin depending on whether you show the banner and the header */
hr {
    margin-top:0px !important;
    padding-top: 0px !important;
    border: 0 !important;
}

/* buttons */

.settings-link.fa-wrench:before, .qr-shortcut:before, #watcher-link:before {
    /*font-family:  Open Sans !important;
    font-weight: 600 !important;*/
    font-size: 12px !important;
}

#thread-stats {
    position: absolute !important;
    left: 14px !important;
  }

/*.qr-shortcut {
    margin-left: -45px !important;
}
.qr-shortcut:before {
    content: "Reply" !important;
    margin-right: 5px !important;
    z-index: 3 !important;
  }      */

.settings-link {
    position: absolute !important;
    right: 15px !important;
  }
.settings-link.fa-wrench:before {
    content: "Options" !important;
    margin-right: 5px !important;
    z-index: 3 !important;
  }

    .fa-comment-o {
    position: absolute !important;
    right: 160px !important;
    top: 18px !important;
    }

/* fade images

div.boardBanner, img {
    opacity: 0.5 !important;
}

div.boardBanner:hover, img.hover, .expanded-image > .post > .file > .fileThumb > .full-image {
    opacity: 0.9 !important;
}       */


/* Links */
a, a:hover, div.post div.postInfo span.postNum a:hover, a.quotelink, a.deadlink {
text-decoration: none !important;
}

/*.backlink.deadlink:not(.forwardlink), .quotelink.deadlink:not(.forwardlink) {
    text-decoration: none !important;
}  */

/* if you use thread conversations */

.threadContainer {
    border-left: 1px solid #434359 !important;
}

#header-bar .brackets-wrap:after,
#header-bar .brackets-wrap:before,
.shortcut:not(:last-child):after {
    content:""!important;
}

#update-timer {
    color: transparent !important;
}

a.current:nth-child(5), .yotsuba.fixed:root #custom-board-list .current:hover, .yotsuba-b.fixed:root #custom-board-list .current {
    border-bottom: 0px;
}

/*#nav-links {
    right:0;
    padding:0px;
    position:fixed;
    bottom:0;
    z-index:10;
}*/

.navLinks {
   margin-top: 50px !important;
}

#index-size, #index-sort, #index-mode {
    border: none !important;
}

span.navLinks:nth-child(1) {
    display: none;
}

div.sideArrows,
.qr-link-container,
.boardSubtitle,
.bottomCtrl.desktop,
#absbot.absBotText,
.navLinks.desktop,
.navLinks.navLinksBot.desktop {
    display: none !important;
}

div.center:nth-child(16), div.center:nth-child(6) {
    display: none !important;
}

div.center:nth-child(4) {
    border: none !important;
}

.yotsuba:root .hide-post-button,
.yotsuba-b:root .hide-post-button {
    display: none !important;
}

#unread-line {
    border:0!important;
    height:1px!important;
    margin-top:-10px!important;
}

.inline {
    padding-left: 15px !important;
    padding-right: 15px !important;
    border: 0 !important;
}

                   /* overlay and menu */

#overlay {
        background: rgba(0,0,0,0.7) !important;
}


#fourchanx-settings legend {
        font-family: "Pacifico", "Segoe Script" !important;
       font-size: 25px !important;
    font-weight: 200 !important;
}

:root a.backlink,
:root .backlink-container > a.backlink.deadlink,
.warning,
:root a.replylink:hover,
:root a:not(.entry):hover {
   /* background: url(http://i.imgur.com/lFuGnSO.png) center no-repeat !important; */
   /* content: url('http://i.imgur.com/lFuGnSO.png') !important;*/
}

:root a.backlink {
    margin-left: 5px !important;
}

.postInfo > input,
a.hide-reply-button > span {
    display: none !important;
}

.fileText a {
    text-decoration: none;
}

#qp, kbd {
    border: 0 !important;
    box-shadow: none !important;
}

.close.fa.fa-times{
display: none !important;
}

#qr.dialog.has-captcha.autohide{
border: 0px solid #6b454f !important;
}

#qr.autohide:not(:hover):not(.has-focus) {
    max-height:21px;
    transition:max-height 0.7s ease 1s;
}

#qr > form {
     padding-top:4px!important;
}

#qr {
    background: var(--header-bg) !important;
    box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.3);
    border-radius: 0px !important;
    transition: all 0.2s ease 0s;
    transition:max-height 0.4s ease;
    z-index:1!important;
}

#qr > div, #qr {
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    }

#qr label input[type="checkbox"] {
    opacity: 0.4 !important;
}

#qr label input[type="checkbox"]:hover {
     opacity: 0.7 !important;
}

#qr .textarea textarea {
    max-height:184px;
    transition:none!important;
}

.field, #qr option:hover,
#dump-button:hover,
:root .field:hover,
#menu .entry.focused,
:root .field:focus, #file-n-submit > input {
  background: var(--header-bg) !important;
  border-color: var(--header-bg) !important;
   color: var(--main-text) !important;
}

#qr form {
    bottom: 10px !important;
    right: 0% !important;
    width: 300px !important;
    border: 1px var(--header-bg) !important;
    padding: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    background: var(--header-bg) !important;
    border-color: var(--post-bg) !important;
    border-radius: 0px !important;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

#dump-button {
    background: var(--header-bg) !important;
    border-color: var(--post-bg) !important;
    color: var(--main-text) !important;
}

#qr .field, .field {
    background: var(--header-bg) !important;
    border: 1px var(--header-bg) !important;
    color: var(--main-text) !important;
}

.replyContainer {
    padding: 10px !important;
}

.fileText {
        opacity: 0 !important;
        max-height: 0px !important;
        transition: .4s ease-out !important;
    }

.file:hover .fileText, .file.image-expanded .fileText {
        opacity: 1 !important;
        max-height: 22px !important;
    }

/* info box block */

.fileText {
    margin-top: 0px !important;
    margin-left: -3px !important;
    padding: 4px !important;
    max-width: 440px !important;
}


/* name block */

div.post div.postInfo span.nameBlock span.name, div.post div.postInfo span.nameBlock span.postertrip, .nameBlock {
    padding: 4px !important;
    margin-left: -3px !important;
}

.warning {
    padding: 4px !important;
    margin-left: -3px !important;
}

/* time block */

/* replies block */

.container {
    padding: 4px !important;
    margin-left: -3px !important;
}

/* subject block */

.subject, div.post div.postInfo span.subject {
    padding: 4px !important;
    margin-left: -3px !important;
}

#thread-stats {
    padding: 6px !important;
    margin-left: -13px !important;
}

.expand-all-shortcut {
    padding: 6px !important;
    margin-top: -3px !important;
    margin-left: -168px !important;
    display: none !important;
}

.expand-all-shortcut {
    position: absolute !important;
}

.contract-all-shortcut {
    margin-left: -160px !important;
    top: 10px !important;
    display: none !important;
}

/*.qr-shortcut {
    display: inline-block !important;
   background: url('https://puu.sh/k0xOW/ddda4484a4.png');
    position: fixed !important;
    top: 0 !important;
    margin-left: 1140px !important;
    margin-top: 182px !important;
}       */

/*.qr-shortcut {
    padding: 6px !important;
    margin-left: -107px !important;
    opacity: 1 !important;
    margin-top: -3px !important;
    position: absolute !important;
}    */

#fourchanx-settings.dialog,
fieldset legend, .yotsuba-b:root .suboption-list > div:last-of-type, .dialog:not(#qr):not(#thread-watcher):not(#header-bar), #fourchanx-settings code, kbd {
    border: none !important;
}

#fourchanx-settings fieldset {
    border: 0px solid;
    border-radius: 3px;
}

/* hide notifications */

#blotter, .globalMessage {
   display: none !important ;
}

#toggleMsgBtn {
    opacity: 0 !important;
}
#toggleMsgBtn:hover {
    opacity: 0.8 !important;
}

div.post div.postInfo span.postNum {
    opacity: 0.8 !important;
}
div.post div.postInfo span.postNum:hover {
    opacity: 0.5 !important;
}

.qr-shortcut {
    position: absolute !important;
    margin-left: 800px !important;
    margin-top: 300px !important;
    font-size: 0px !important;
    background: transparent !important;
    color: var(--post-bg) !important;
    opacity: 1 !important;
}
.qr-shortcut:after {
    position: absolute !important;
    content: url('https://puu.sh/l7Ee0/18e02e57cd.png');
    margin-right: 0px !important;
    font-size: 0px !important;
    color: var(--post-bg) !important;
    right: 0 !important;
    bottom: 0 !important;
  }

.gal-prev, .gal-next, .gal-count, .gal-name {
    background: transparent !important;
    border: none !important;
}

#a-gallery {
    background: rgba(20, 21, 31, 0.7) none repeat scroll 0% 0% !important;
}

.gal-prev::after {
    border-right: 12px solid var(--secondary-text) !important;
}

.gal-next::after  {
    border-left: 12px solid var(--secondary-text) !important;
}

/* old qr */
table.postForm > tbody > tr > td:first-child, input[type="text"], input[type="password"], table.postForm > tbody textarea, #recaptcha_response_field {
    background: transparent !important;
    border: none !important;
}

#bannerCnt {
    border: none;
/*     height: 50px !important; */
    padding: 0px !important;
    opacity: 0.6 !important;
    box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.3);
}
#bannerCnt:hover {
    opacity: 0.5 !important;
}

.qr-link-container + #togglePostFormLink, #appchan-gal {
    display: none !important;
}

div.thread {
    background: transparent !important;
}

/* op */
.opContainer {
    background: var(--post-bg) !important;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}

a.fileThumb, div.post div.file .fileThumb img {
    float: right !important;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

/* catalog */

.board {
    margin: 0 auto !important;
    max-width: 1500px !important;
    margin-top: 20px !important;
}

.catalog-mode:root .board {
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    }

.navLinks {
    background: var(--post-bg) !important;
    padding: 0px !important;
    margin: 0 auto !important;
    max-width: 1540px !important;
    margin-top: 60px !important;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

.catalog-mode:root .board {
  padding: 25px !important;
}

.catalog-stats {
    background: var(--alt-bg) !important;
    padding: 5px !important;
}
.catalog-thread > .subject {
    background: var(--header-bg) !important;
    padding: 5px !important;
}
.catalog-thread > .comment {
    background: var(--header-bg) !important;
    padding: 5px !important;
}


/* catalog hover */
.catalog-reply, .catalog-post.catalog-post:hover {
background: var(--alt-bg) !important;
border: none !important;
}

.catalog-post.catalog-post:hover {
box-shadow: 2px 2px 6px 8px rgba(0,0,0,0.2) !important;
}

div.navLinks {
    padding: 5px !important;
}

.bottomlink, .archlistlink, .indexlink {
        display: none !important;
 }

.brackets-wrap::after, .brackets-wrap::before {
    content: "" !important;
}
#index-search, #index-size, #index-sort, #index-mode {
    background: var(--header-bg) !important;
}

span.postNum.desktop a[title="Link to this post"] {
    font-size: 0px !important;
  }

  span.postNum.desktop a[title="Link to this post"]:after {
    content: "#" !important;
    font-size: 12px !important;
  }

.centered-links:root #custom-board-list {
    top: 13px !important;
    padding: 10px !important;
}

#thread-stats, .settings-link {
   padding: 15px !important;
    /*top: -1px !important;*/
}

span.menu-button {
    padding: 15px !important;
    top: 0px !important;
    left: 1% !important;
    width: 3px !important;
    }

#watcher-link {
    padding: 15px !important;
    margin-left: -115px !important;
   /* margin-top: -4px !important;*/
    opacity: 1 !important;
    position: absolute !important;
}

#shortcut-gallery {
    padding: 15px !important;
    margin-left: -109px !important;
    margin-top: -4px !important;
    opacity: 1 !important;
    position: absolute !important;
    display: none !important;
}

#header-bar .menu-button i {
    margin-top: -2px !important;
    }

div.post div.postInfo span.nameBlock:after {
        content: "||" !important;
    }

span.postNum.desktop a[title="Link to this post"]:after {
        opacity: 0.8 !important;
    }


                /* remove skellington (gtfo out of here 4chin w/ this shiiiiiit)*/

    #skellington {
        display: none !important;
    }

#thread-watcher {
    border: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 999 !important;
    left: -16% !important;
    top: 5% !important;
    cursor: default !important;
    background: var(--post-bg) !important;
    box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.2);
    height: 93% !important;
    width: 15% !important;
    transition: ease-in-out .3s !important;
    padding: 20px !important;
}

#thread-watcher:hover {
    left: 0% !important;
    transition: ease-in-out .3s !important;
}

/* div.boardBanner {
       width: 700px !important;
       height: 100px !important;
       margin: 0 auto !important;
}     */

#header-bar::before {
z-index: -1 !important;
}

div.boardBanner > div.boardTitle {
z-index: 9999 !important;
}


/*
.fourchan-x:root body, .fixed.top-header body {
        z-index: -1 !important;
}
    */

                   /* dropdowns */

select {
    text-align: center !important;
    width: 130px !important;
    height: 23px !important;
}

#index-options select {
    margin-right: 10px !important;
}


    /*
#menu {
       z-index: 99999 !important;
       margin-right: 50px !important;
       margin-top: 0px !important;
       position: absolute !important;
       right: 0 !important;
       top: 0 !important;
       max-width: 200px !important;
}
    */

.dialog.submenu {
    margin-top: -40px !important;
    z-index: 99999 !important;
    padding: 0px !important;
}

#full-board-list {
       z-index: 99999 !important;
       margin-top: -40px !important;
       position: fixed !important;
       right: 0 !important;
       top: 0 !important;
    padding: 10px !important;
}


#header-bar, #header-bar::before, .yotsuba:root:not(.fixed) #header-bar {
    min-width: 100% !important;
    top: 0 !important;
    /* comment this next line to fix the J hotkey not working and/or to have the header show always */
    position: absolute !important;
}


/* Only show date/dropdown arrow/quotelinks on hover

div.post div.postInfo span.postNum a {
    opacity: 0 !important;
    transition: .2s ease-out !important;
    }
div.post div.postInfo span.postNum a:hover {
    opacity: 1 !important;
    transition: .2s ease-out !important;
    }

span.dateTime {
    opacity: 0 !important;
     position: absolute !important;
    transition: .2s ease-out;
}
span.dateTime:hover {
    opacity: 1 !important;
    transition: .2s ease-out;
}
 */
.fa-angle-down::before, .op .menu-button, .postContainer .menu-button {
transition: .2s ease-out;
    opacity: 0.5 !important;
}
.fa-angle-down:hover, .op .menu-button:hover, .postContainer .menu-button:hover {
        transition: .2s ease-out;
        opacity: 1 !important;
    }


                      /* remove christmas hats */

.hats-enabled:root .catalog-small > .catalog-thread::after, .party-hat {
        display: none !important;
}