Skip to content

Instantly share code, notes, and snippets.

@natyusha

natyusha/4chanx.css

Last active July 28, 2017 03:56
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save natyusha/7798aa89207b49f5485e to your computer and use it in GitHub Desktop.
Save natyusha/7798aa89207b49f5485e to your computer and use it in GitHub Desktop.
Download ZIP
4chan X Custom CSS
Raw
4chanx.css
/* Board title rice */
div.boardTitle {
font-weight: 400 !important;
}
:root.yotsuba div.boardTitle {
font-family: sans-serif !important;
text-shadow: 1px 1px 1px rgba(100,0,0,0.6);
}
:root.yotsuba-b div.boardTitle {
font-family: sans-serif !important;
text-shadow: 1px 1px 1px rgba(105,10,15,0.6);
}
:root.photon div.boardTitle {
font-family: sans-serif !important;
text-shadow: 1px 1px 1px rgba(0,74,153,0.6);
}
:root.tomorrow div.boardTitle {
font-family: sans-serif !important;
text-shadow: 1px 1px 1px rgba(167,170,168,0.6);
}
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://boards.4chan.org/"),
url-prefix("https://boards.4chan.org/") {
*:not(.fa):not(.YTLT-player-titlebar-button) {
font-family:"Dina TTF"!important;
font-size:12px!important;
font-style:normal!important;
font-weight:400!important;
}
body {
background:#121314!important;
color:#e9e6e6!important;
padding:0 1px 0 1px;
}
/* Hidden elements */
hr:not(#unread-line),
.qr-link-container,
div.center,
.sideArrows,
.postInfo > input[type="checkbox"],
.hide-reply-button,
.boardBanner,
.bottomCtrl,
.pagelist,
#boardNavDesktopFoot,
#qr .close,
#blotter,
#absbot {
display:none!important;
}
:root .fixed.bottom-header body {
padding-bottom:1em!important;
}
.postContainer .menu-button {
opacity:0;
float:right;
right:-2px;
top:-10px;
transition:top 0.25s ease, opacity 0.1s ease;
}
.stub .menu-button,
.opContainer .postInfo .menu-button,
.postContainer .postInfo .menu-button.open,
.postContainer:hover .postInfo .menu-button {
opacity:1;
top:0;
}
.stub .menu-button {
right:6px;
}
.opContainer .postInfo .menu-button {
right:7px;
}
.inline .postInfo .menu-button {
float:none;
opacity:1;
right:0!important;
top:0!important;
}
:root .thumb > .menu-button > i {
background:#1b1b1b!important;
}
.thumb > .menu-button > i {
font-size:14px!important;
height:16px!important;
width:16px!important;
border-radius:0 0 0 4px!important;
}
.menu-button + .container:not(:empty) {
margin-left:0!important;
}
:root s .quote:not(:hover),
:root s a:not(:hover) {
color:#000!important;
}
#notifications .notification a {
color:#e9e6e6!important;
}
#notifications .notification a:not(.close) {
text-decoration:underline!important;
}
#thread-watcher:before,
:root a.replylink:not(:hover),
:root a,
:root a:visited,
:root .deadlink:not(.forwardlink),
.button {
color:#f4702d!important;
text-decoration:none!important;
}
#thread-watcher:hover:before,
:root a.backlink,
:root .container > a.backlink.deadlink,
.warning,
div.post div.postInfo span.postNum a:hover,
:root a.replylink:hover,
:root a:not(.entry):hover {
color:#A497B0!important;
}
div.post div.postInfo span.nameBlock span.name {
color:#947686!important;
}
div.subject,
div.post div.postInfo span.subject {
color:#94aad1!important;
}
div.post div.postInfo span.nameBlock span.postertrip {
color:#9f1765!important;
}
:root .quote {
color:#00AB3F!important;
}
:root .dateTime {
color:#a49c9c!important;
}
div.pagelist,
:root #header-bar,
:root #qr select,
:root #qr option,
:root .entry,
:root .field {
color:#e9e6e6!important;
}
div.stub {
padding:3px 0 3px 6px!important;
}
.stub > a.show-post-button {
vertical-align:bottom;
}
.stub,
#nav-links,
#qr option,
#dump-button,
:root .field,
:root .dialog {
background:#1b1b1b!important;
border-color:#121314!important;
}
#qr option:hover,
#dump-button:hover,
:root .field:hover,
#menu .entry.focused,
:root .field:focus {
background:#1b1b1b!important;
border-color:#121314!important;
}
:root .field[name="name"]:not(:hover):not(:focus) {
color:transparent!important;
}
.prettyprint,
:root #qp .opContainer,
:root .inline .post,
.stub,
#nav-links,
div.reply,
div.reply:target {
border:none!important;
}
:root #fourchanx-settings fieldset {
border-color:#121314!important;
}
:root .entry {
border-bottom-color:#121314!important;
}
#menu .entry input {
vertical-align:top;
}
:root #qp {
background:none!important;
border:0!important;
}
:root .inline {
background:none!important;
border:1px solid #121314!important;
}
:root .suboption-list > div,
:root #qp .opContainer {
background:#1b1b1b!important;
}
:root .inline .post {
padding:1px!important;
}
.pinned .thumb,
:root .qphl {
border-color:#A497B0!important;
outline:none!important;
}
.replyContainer {
display:flex;
}
.stub,
div.reply {
background:#1b1b1b!important;
flex:1 0;
margin:1px 0 0 0!important;
padding:0!important;
width:100%;
-moz-box-sizing:border-box!important;
}
div.reply:target {
background:#2a2a2a!important;
}
.thread:not([hidden]) + hr:not(:last-child) {
border-color:#121314!important;
display:block!important;
}
.thread {
padding-top:0.5em!important;
}
.navLinks {
margin:0 0 0 2px!important;
}
:root div.postInfo {
padding:1px 0 8px 1px!important;
}
div.post blockquote.postMessage {
margin:4px 16px 6px!important;
}
.reply .postInfo {
background:#1b1b1b!important;
border-bottom:none;
display:block!important;
padding:1px 0 2px!important;
}
#qr .field:not([name="email"]),
#qr .captcha-input,
#qr #dump-button,
#thread-watcher {
border-left:0!important;
}
#nav-links,
#updater:hover,
#qr .field,
#qr #dump-button {
border-right:0!important;
}
#nav-links
#updater:hover,
#qr .captcha-input,
#qr:not(.dump) .textarea textarea {
border-top:0!important;
}
#qr,
#thread-watcher {
border-bottom:0!important;
}
#qr .textarea textarea {
max-height:184px;
transition:none!important;
}
#qr .move,
#thread-stats .move,
#thread-watcher .move,
#updater .move {
cursor:default!important;
}
#custom-board-list a {
border-top:1px transparent!important;
padding:5px 1px 1px!important;
transition:all 300ms ease;
}
#custom-board-list a.current,
#custom-board-list a:hover {
border-bottom:0!important;
border-top:1px solid #f4702d!important;
}
.thread:not(:last-of-type) > .expanded-image > .op > .file::after {
clear:none!important;
}
#unread-line {
background-image:linear-gradient(to left, rgba(117, 135, 99, 0), rgb(117, 135, 99), rgba(117, 135, 99, 0));
border:0!important;
height:1px!important;
margin-top:1px!important;
}
#delform {
margin:0 0 36px!important;
}
#delform .catalog-small,
#delform .catalog-large {
padding-top:32px;
}
.watched > a > img{
border-color:#f4702d!important;
}
/* Pretty Print */
.prettyprint {
background-color:#1b1b1b!important;
margin-bottom:1px!important;
padding:4px!important;
vertical-align:middle!important;
}
.op .prettyprint {
background-color:#121314!important;
border-color:#111!important;
}
.prettyprint span[class] {
font-family:"MonteCarlo"!important;
font-size:11px!important;
}
.prettyprint .com {
color:#5b595a!important;
}
.prettyprint .kwd {
color:#94aad1!important;
}
.prettyprint .lit {
color:#A497B0!important;
}
.prettyprint .pln {
color:#e9e6e6!important;
}
.prettyprint .pun {
color:#c59f6f!important;
}
.prettyprint .str {
color:#9ebf7c!important;
}
.prettyprint .tag {
color:#70819e!important;
}
.prettyprint .typ {
color:#edc472!important;
}
.quotelink.forwardlink,
.backlink.forwardlink {
text-decoration:none;
border-bottom:1px dashed;
}
.yotsuba-b:root .watch-thread-link {
background-image: url("data:image/svg+xml,<svg viewBox='0 0 26 26' preserveAspectRatio='true' xmlns='http://www.w3.org/2000/svg'><path fill='rgb(207,114,117)' d='M24.132,7.971c-2.203-2.205-5.916-2.098-8.25,0.235L15.5,8.588l-0.382-0.382c-2.334-2.333-6.047-2.44-8.25-0.235c-2.204,2.203-2.098,5.916,0.235,8.249l8.396,8.396l8.396-8.396C26.229,13.887,26.336,10.174,24.132,7.971z'/></svg>");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment