-
Notifications
You must be signed in to change notification settings - Fork 21
Custom Themes1
prfctvaccum edited this page Jun 27, 2022
·
1 revision
@-moz-document domain("boards.4chan.org") { /* THIS CONTAINS STOLEN CODE */
/* i found this CSS a while ago and ended up
doing my own work to it, i don't remember
whose it is anymore. i hope they don't sue */
/* this prolly contains a lot of redundant/un-
needed stuff. i don't claim 2 b good or
anything.*/
body {
background: #fff !important;
font-family: 'Open Sans', sans-serif !important;
color: #787878 !important;
font-size: 11px !important;
margin-right: 0px !important;
margin-left: 15px !important;
padding-left: 0px !important;
padding-right: 18px !important; /*idk why i had to adjust these, change em as u please if centering's off*/
}
hr {
padding-top: 5px !important;
border: 0 !important;
}
/* Links */
a {
color: #6f6f6f !important;
}
/* Foreground of the header bar */
#board-list,
#custom-board-list {
color: #fff !important;
font-family: 'Ubuntu', sans-serif !important;
font-weight: 400 !important;
font-size: 14px !important;
margin-right: 0px !important;
}
#header-bar a {
color: #fff !important;
}
/* Background of the header bar */
#header-bar.dialog {
background: #5978ff !important;
border: 0 !important;
}
/* Color of the selected board on the header bar. */
#header-bar a.current {
color: #FFB9BC !important;
}
.fixed #header-bar{
padding: 1px 2px 0px
}
.fa::before{
color: #5978ff !important;
}
.yotsuba-b:root #header-bar, .yotsuba-b:root #notification{
color: #5978ff !important;
}
/* Appearance of the menus. */
#menu.dialog,
.entry {
background: #2f2f2f !important;
border: 0 !important;
color: #ccc !important;
font-family: 'Open Sans', sans-serif !important;
font-size: 0.750rem !important;
}
/* Catalog search and page links, This is not ready. */
div.navLinks,
div.pagelist {
background: transparent !important;
font-family: 'Open Sans', sans-serif !important;
font-size: 0.750rem !important;
border: 0 !important;
display: inline-block !important;
margin-bottom: 0 !important;
}
/* Appearance of the thread updater and thread stats. */
#index-search.field,
#updater.dialog,
#thread-stats.dialog {
font-family: 'Open Sans', sans-serif !important;
font-size: 0.750rem !important;
background: transparent !important;
color: #2f2f2f !important;
border-style: none !important;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
}
/* Thread updater menu */
#index-search.field:hover,
#updater.dialog:hover {
background: #eee !important;
color: #2f2f2f !important;
}
/* Clean up. */
.bottomCtrl.desktop,
#absbot.absBotText,
.navLinks.desktop,
.navLinks.navLinksBot.desktop,
.sideArrows{
display: none !important;
}
/* Hide ads? */
div.center,
div.topad.center,
div.middlead.center,
div.bottomad.center,
div.ad-plea {
display: none !important;
}
.boardBanner {
display: none !important;
}
.post.reply {
font-family: 'Gotham Rounded', sans-serif !important;
font-size: 20px !important;
font-weight: 400 !important;
font-style: normal;
background: #ffffff !important;
color: #666666 !important;
width: 85% !important;
border: 0px solid #e6e6e6 !important;
padding: 4px !important;
text-decoration: none !important;
margin-top: auto !important;
margin-right: auto !important;
margin-left: auto !important;
line-height: 1.6em !important;
text-align: justify !important;
}
.thread {
margin-top: -10px !important;
margin-right: -17px !important;
margin-left: 0px !important;
}
div.postContainer.opContainer {
display: inline-block !important;
width: 100% !important;
margin: auto !important;
}
.inline {
padding-left: 15px !important;
padding-right: 15px !important;
border: 0 !important;
}
.inline .post.reply {
background-color: #fff !important;
border: 0 !important;
}
span.subject {
color: #AEAFC9 !important;
}
span.postertrip, span.nameBlock {
color: #FFB9BC !important;
}
a {
text-decoration: none !important;
color: #aaaaaa !important;
}
/*hover colors*/
a:hover,
div.post div.postInfo
span.postNum a:hover,
.posteruid .hand:hover {
color: #FFB9BC !important;
}
/*desperation*/
.postertrip,
.useremail:not(:hover) .name:not(.capcode),
.useremail:not(:hover) .postertrip:not(.capcode) {
color: #FFB9BC !important;
font-family: 'Gotham Rounded', sans-serif !important; font-weight: 700 !important; font-size: 20px !important; } /*email trips / .postertrip:not(.capcode),.useremail:not(:hover),.useremail { text-decoration: none !important; } / Post numbers. */ span.postNum a { color: #ffffff !important; }
/* Poster's name. */
span.name {
font-size: 21px !important;
color: #434a54 !important;
font-family: 'Gotham Rounded', sans-serif !important;
font-weight: 700 !important;
}
/* Date and time of the posts. */
span.dateTime {
color: #ffffff !important;
}
/* Quote links. */
a.quotelink {
color: #8EB2C5 !important;
text-decoration: none !important;
}
/* Link to posts quoting the current post. */
a.backlink {
float: right;
color: #ccc !important;
}
/* Greentext. */
span.quote {
color: #8cc152 !important;
}
/* Post menu button. */
.post .menu-button {
float: right;
position: relative;
left: 0px;
}
/* Hide "hide reply" buttons. */
.postInfo > input,
a.hide-reply-button > span {
display: none !important;
}
/* Relative to post info, i.e. Post name, tripcode, post date, etc. */
.postInfo a,
div.postInfo {
color: #ccc !important;
font-size: 10px !important;
}
/* Relative to file info, i.e. filename, file size, resolution, etc. */
div.fileText {
font-family: 'Segoe UI', sans-serif !important;
font-size: 0px !important;
color: #c8c8c8 !important;
}
/* Fix post previews. */
#qp {
border: 0 !important;
box-shadow: none !important;
}
/* Relative to the quick reply. */
#qr {
background: #2f2f2f !important;
color: #eee !important;
border: none !important;
border-radius: 2px !important;
box-shadow: none !important;
transition: all 0.2s ease 0s;
}
#qr form {
bottom: 12px !important;
right: 0% !important;
width: 300px !important;
padding: 4px !important;
margin-top: 23px !important;
padding-top: 10px !important;
padding-bottom: 3px !important;
background: #2f2f2f !important;
border-color: #2f2f2f !important;
border-radius: 4px !important;
}
#dump-button {
background: #3d3d3d !important;
border-color: #3d3d3d !important;
color: #eee !important;
}
/* Color of the fields. */
#qr .field {
background: #fefefe !important;
border-color: #2f2f2f !important;
color: #2f2f2f !important;
}
/* Movable QR? */
#qr span.move {
display: none !important;
}
/* Remove menu */
#qr select {
display: none !important;
}
/* Make the name field become invisible when there's something in it... */
#qr input.field:nth-child(2) {
background: #fefefe !important;
color: #fefefe !important;
}
/* ... And then make it visible again when you hover over it. */
#qr input.field:nth-child(2):hover {
background: #fefefe !important;
color: #2f2f2f !important;
}
/* Remove bar above the fields. */
#qr > div {
position: fixed !important;
}
/* Relative to 4chan X's menu */
#fourchanx-settings.dialog,
fieldset legend,
a.tab-main.tab-selected {
font-family: sans-serif !important;
font-size: 11px !important;
background: #2f2f2f !important;
color: #dedede !important;
}
/*** Animations ***/
/* Change backlinks to >> and animate them. */
a.backlink {
text-decoration: none !important;
font-size: 9px !important;;
}
.backlink:after {
font-size: 10px !important;
padding: 1px;
opacity: 0.4;
text-decoration: none !important;
}
.backlink:hover::after,
.backlink.inlined::after {
opacity: 1;
}
#.backlink:not(:first-child) {
# margin-left: -1.0rem;
# transition: all .1s linear .2s;
# opacity: 0;
}
/* Post menu animations. */
.postContainer:hover .backlink {
margin-left: 0rem;
transition-delay: .1s;
opacity: 100;
}
.post.reply a.menu-button {
opacity: 0;
transition: all .2s;
}
.post.reply:hover .menu-button {
opacity: 100;
transition: all .1s;
}
/* QR animations. */
#qr.dialog.has-captcha.autohide,
#qr.dialog.autohide {
top: -300px !important;
height: 21px !important;
transition: all 0.7s ease 0s;
}
}