a clean tomorrow theme
4chan-tomorrow-theme-modified by diegostafa
Imported and mirrored from https://github.com/diegostafa/userstyles/raw/master/4chan-tomorrow-theme-modified.user.css
Details
Authordiegostafa
LicenseNo License
Categoryunset
Created
Updated
Size16 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
- the tomorrow theme needs to be set for this style to work properly
- mobile layout is not supported
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name 4chan-tomorrow-theme-modified
@namespace github.com/diegostafa/userstyles
@version 12
@description a clean tomorrow theme
@author Diego <dstafa.dev@gmail.com> (github.com/diegostafa)
@preprocessor stylus
@var color accentColor "accent color" #458588
@var checkbox hideRefreshTW "Hide refresh icon (thread watcher)?" 0
@var checkbox hideAutoUpdateCB "Hide bottom auto update checkbox?" 0
==/UserStyle== */
@media (prefers-color-scheme: light) {
:root{
--main-bgc: white !important;
--secondary-bgc: #f4f4f4 !important;
--text-color: black !important;
--border-color: #ababab !important;
--you-reply: red !important;
}
}
@media (prefers-color-scheme: dark) {
:root{
--main-bgc: #1d2021 !important;
--secondary-bgc: #282828 !important;
--text-color: #dfdfdf !important;
--border-color: #4b4b4b !important;
--you-reply: #c4ae00 !important;
}
}
@-moz-document regexp("https?://(www\\.)?4chan(nel)?\\.org/.*") {
* {
color: var(--text-color) !important;
background-color: var(--main-bgc) !important;
}
html:has(.zone-name-title) * {
margin: 0 !important;
max-width: 100% !important;
background-color: var(--main-bgc) !important;
}
#boards {
vertical-align: middle;
font-family: 'liberation sans' !important;
font-weight: 300;
}
#bd *{
background-color: var(--secondary-bgc) !important;
}
#logo-fp,
#popular-threads,
#ft,
#abc-cnt,
#announce,
.danbo-slot {
display: none !important;
}
body {
padding: 15px 80px;
margin: 0;
background: var(--main-bgc) !important;
}
html {
background-color: var(--main-bgc) !important;
}
.box-outer.top-box {
border: 2px dashed var(--border-color) !important;
}
#doc {
margin: auto;
padding: 0;
width: 100%;
min-width: auto;
background-color: var(--main-bgc) !important;
}
.boxcontent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.column {
padding-top: 10px;
margin: 0;
}
@media only screen and (max-width: 768px) {
body {
padding: 10px;
}
}
}
@-moz-document regexp("https?://boards\\.4chan(nel)?\\.org/.*") {
* {
filter: none !important;
}
@media (prefers-color-scheme: light) {
* {
color: var(--text-color);
}
}
body,
html {
background-color: var(--main-bgc) !important;
background-image: none !important;
}
html {
padding: 0 1% !important;
}
a:link,
a:visited {
color: accentColor !important;
}
a:hover,
a:active {
color: accentColor !important;
}
.deadlink {
text-decoration: none !important;
}
.deadlink a:link,
.deadlink a:visited {
color: #9b0000 !important;
}
.deadlink a:hover,
.deadlink a:active {
color: #c10000 !important;
}
input:focus,
input:active {
outline: none !important;
}
#save-captcha,
label[for="save-captcha"],
.danbo-slot,
#js-snowfield,
.sideArrows,
#boardNavDesktopFoot,
#toggleMsgBtn,
#bannerCnt,
#globalMessage,
#blotter,
#globalToggle,
.middlead.center,
.abovePostForm,
.aboveMidAd,
hr,
#absbot,
.navLinks.navLinksBot.desktop .thread-stats,
.ctrl-wrap,
.postInfo.desktop input[type=checkbox],
.adc-resp-bg,
.navLinks.navLinksBottom.mobilebtn,
#t-help,
tr.rules,
div.passNotice,
#postForm>tbody>tr[data-type=Name],
#postForm>tbody>tr[data-type=Options],
img.party-hat,
.adl,
.postInfoM.mobile,
.boardBanner {
display: none !important;
}
if hideRefreshTW {
#twPrune {
display: none !important;
}
}
if hideAutoUpdateCB {
.navLinksBot label{
display: none
}
}
#boardNavMobile {
background-color: var(--main-bgc) !important;
border-width: 0px !important;
}
/* new post*/
#postForm {
background-color: var(--main-bgc) !important;
padding: 0 !important;
border: 2px dashed var(--border-color) !important;
}
#postForm tbody tr td {
text-align: center !important;
background-color: var(--secondary-bgc) !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
#postForm tbody tr[data-type=Subject] td {
width: 100% !important;
}
#postForm tbody tr[data-type=Subject] td:nth-child(2) {
display: flex !important;
flex-direction: row !important;
}
#postForm tbody tr[data-type=Subject] td input[type=text] {
background-color: var(--secondary-bgc) !important;
color: var(--text-color) !important;
border: none !important;
width: 80% !important;
}
#postForm tbody tr td textarea {
color: var(--text-color) !important;
text-align: left;
border: none !important;
background-color: var(--secondary-bgc) !important;
margin: 0 !important;
padding: 0 !important;
min-width: 360px !important;
min-height: 100px !important;
box-sizing: content-box !important;
}
#postForm tbody tr[data-type=Subject] td input[type=submit] {
width: 20%;
border: none !important;
color: #c5c8c6 !important;
background-color: var(--main-bgc) !important;
font-size: 11px !important;
font-family: 'liberation mono' !important;
}
#t-root {
margin: 0 !important;
padding: 0 !important;
min-height: fit-content !important;
background-color: var(--main-bgc) !important;
border: none !important;
}
#t-root:not(:has(iframe)) {
width: 100% !important;
}
#postFile {
width: 100% !important;
font-size: 11px !important;
font-family: 'liberation mono';
}
/* catalog */
#content {
color: var(--text-color) !important;
width: 100% !important;
}
#content #threads {
border: 2px dashed var(--border-color) !important;
background-color: var(--secondary-bgc) !important;
padding: 20px 0 !important;
display: flex !important;
justify-content: space-evenly !important;
flex-wrap: wrap;
margin: 0 !important;
}
/* header */
.boardBanner {
margin: 80px 0 !important;
}
.boardTitle {
color: var(--text-color) !important;
font-family: 'liberation mono' !important;
font-weight: 200 !important;
}
#togglePostFormLink {
color: accentColor !important;
font-size: 14px !important;
font-weight: 400 !important;
}
/* nav links*/
.navLinks.desktop,
#ctrl {
margin: 20px 0 !important;
}
.navLinks.navLinksBot.desktop {
text-align: center !important;
margin: 0 auto !important;
}
/* thread watcher */
#threadWatcher {
margin: 0 !important;
border: 1px solid accentColor !important;
background-color: var(--secondary-bgc) !important;
max-height: 300px !important;
}
#watchList {
max-height: 200px !important;
overflow: scroll !important;
}
#watchList .hasYouReplies {
color: var(--you-reply) !important;
}
#threadWatcher>div {
position: relative !important;
}
#twHeader {
font-size: 12px !important;
text-align: center !important;
}
#watchList li {
border: none !important;
}
#watchList li a:hover {
color: #5f89ac !important;
}
#watchList .hasYouReplies:hover {
color: #a69800 !important;
}
/* OP */
.postContainer.opContainer {
color: var(--text-color) !important;
display: block !important;
background-color: var(--main-bgc) !important;
border: 2px dashed var(--border-color) !important;
padding: 15px !important;
margin-bottom: 10px !important;
}
.postContainer.opContainer .fileText {
width: 100% !important;
font-size: 12px !important;
margin: 0 !important;
}
.postContainer.opContainer .fileThumb {
margin-top: 15px !important;
margin-bottom: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
.postContainer.opContainer .postInfo.desktop {
margin-top: 15px !important;
margin-bottom: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
.postContainer.opContainer .postMessage {
margin-top: 15px !important;
margin-bottom: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
/* replies */
.extPanel.reply {
border: 2px dashed var(--border-color) !important;
background-color: var(--secondary-bgc) !important;
}
.post.reply:has(.ql-tracked){
border: 2px dashed var(--you-reply) !important;
}
.post.reply {
color: var(--text-color) !important;
border: 2px dashed var(--border-color) !important;
background-color: var(--secondary-bgc) !important;
display: block !important;
padding: 15px !important;
margin: 10px auto !important;
}
.postInfo.desktop {
width: 100% !important;
display: inline-block !important;
font-size: 12px !important;
padding: 0 !important;
margin: 0 !important;
...