mirror of https://gitgud.io/fatchan/jschan.git
parent
fd06c39610
commit
698296d2bb
1 changed files with 347 additions and 0 deletions
@ -0,0 +1,347 @@ |
||||
/* with love from ptchan */ |
||||
|
||||
:root { |
||||
/* light theme colors */ |
||||
--bg: #f7f8fa; |
||||
--bg-light: #fff; |
||||
--bg-dark: #f3f4f6; |
||||
--fg: #292d31; |
||||
--fg-dark: #24292e; |
||||
--fg-light: #6e7781; |
||||
--selection: #d0d7de; |
||||
--selection-dark: #cdd0d4; |
||||
--blue: #0969da; |
||||
--blue-light: #0072f3; |
||||
--green: #2da44e; |
||||
--orange: #e36209; |
||||
--pink: #ff5fba; |
||||
--red: #d73a49; |
||||
--red-light: #da4a59; |
||||
--yellow: #e3ca09; |
||||
|
||||
/* navbar and green btn colors, dark and light themes share these elements */ |
||||
--bg-navbar: #24292f; |
||||
--fg-navbar: #fff; |
||||
--fg-navbar-hover: #b1bac4; |
||||
--bg-btn-primary: #2da44e; |
||||
--bg-btn-primary-hover: #2c974b; |
||||
--text-btn-primary: #fff; |
||||
--border-btn-primary: rgba(27, 31, 36, 0.15); |
||||
--shadow-btn-primary: 0 1px 0 rgba(27, 31, 36, 0.1); |
||||
--shadow-inset-btn-primary: inset 0 1px 0 rgba(255, 255, 255, 0.03); |
||||
|
||||
/* main colors assignment */ |
||||
--darken: var(--bg-dark); |
||||
--hr: var(--selection); |
||||
--navbar-color: var(--bg-navbar); |
||||
--background-top: var(--bg); |
||||
--background-rest: var(--bg); |
||||
--post-color: var(--bg-light); |
||||
--post-outline-color: var(--selection); |
||||
--highlighted-post-color: var(--bg-light); |
||||
--highlighted-post-outline-color: var(--selection); |
||||
--label-color: var(--bg-dark); |
||||
--box-border-color: var(--selection); |
||||
--alt-label-color: var(--bg); |
||||
--alt-font-color: var(--fg); |
||||
--input-color: var(--fg); |
||||
--input-borders: var(--selection); |
||||
--input-background: var(--bg-light); |
||||
--board-title: var(--fg-dark); |
||||
--title-color: var(--red-light); |
||||
--font-color: var(--fg); |
||||
--name-color: var(--blue); |
||||
--subject-color: var(--fg-dark); |
||||
--link-color: var(--fg-dark); |
||||
--link-hover: var(--blue); |
||||
--post-link-color: var(--fg-dark); |
||||
--dice-color: var(--orange); |
||||
--greentext-color: var(--green); |
||||
--pinktext-color: var(--pink); |
||||
--capcode-color: var(--red); |
||||
--icon-color: saturate(100%) hue-rotate(2deg) brightness(95%) contrast(100%); |
||||
} |
||||
|
||||
@media (prefers-color-scheme: dark) { |
||||
:root { |
||||
/* dark theme colors */ |
||||
--bg: #010409; |
||||
--bg-light: #0d1117; |
||||
--bg-dark: #21262d; |
||||
--fg: #ededf0; |
||||
--fg-dark: #fff; |
||||
--fg-light: #b1bac4; |
||||
--selection: #30363d; |
||||
--blue: #58a6ff; |
||||
--blue-light: #79c0ff; |
||||
--green: #56d364; |
||||
--orange: #d29922; |
||||
--pink: #d2a8ff; |
||||
--red: #ff7b72; |
||||
--red-light: #ffa198; |
||||
--yellow: #e3b341; |
||||
} |
||||
} |
||||
|
||||
#action-menu, |
||||
#customflag, |
||||
#dragHandle, |
||||
#float, |
||||
#livetext, |
||||
#postform, |
||||
#threadstats, |
||||
#threadwatcher, |
||||
.bottom-reply, |
||||
.captcha, |
||||
.catalog-tile, |
||||
.close, |
||||
.collapse, |
||||
.modal, |
||||
.pages, |
||||
.post-container, |
||||
.stickynav, |
||||
input[type=submit] { |
||||
border-radius: 6px !important |
||||
} |
||||
|
||||
.file-thumb, |
||||
.post-file-src * { |
||||
border-radius: 5px |
||||
} |
||||
|
||||
#float { |
||||
box-shadow: none !important |
||||
} |
||||
|
||||
/* darker post-info */ |
||||
.post-container.highlighted .post-info, |
||||
.post-container:target, |
||||
.post-info { |
||||
background: var(--darken); |
||||
margin: -6.5px -6.5px 5px -6.5px; |
||||
border-bottom: 1px solid var(--post-outline-color); |
||||
border-radius: 6px 6px 0 0 |
||||
} |
||||
|
||||
/* darker post-info */ |
||||
@media screen and (min-width:900px) { |
||||
.container { |
||||
width: 78vw; |
||||
margin: 0 auto |
||||
} |
||||
|
||||
/* exceptions */ |
||||
.navbar, |
||||
.main>.container { |
||||
width: 100% |
||||
} |
||||
} |
||||
|
||||
a { |
||||
font-style: italic |
||||
} |
||||
|
||||
/* better highlight */ |
||||
#float, |
||||
.anchor:target+.catalog-tile, |
||||
.anchor:target+.post-container, |
||||
.anchor:target+table, |
||||
.anchor:target+table tbody tr th, |
||||
.post-container.highlighted, |
||||
.post-container.hoverhighlighted { |
||||
outline: 2px solid var(--blue-light) |
||||
} |
||||
|
||||
input:focus, |
||||
select:focus, |
||||
textarea:focus { |
||||
background: var(--highlighted-post-color); |
||||
border: 2px solid var(--blue-light) |
||||
} |
||||
|
||||
/* post menu fixes */ |
||||
.postmenu { |
||||
border: solid var(--font-color); |
||||
border-width: 0 1px 1px 0; |
||||
background: 0 0 |
||||
} |
||||
|
||||
.postmenu:hover { |
||||
border: solid var(--link-hover); |
||||
border-width: 0 1px 1px 0; |
||||
background: 0 0 |
||||
} |
||||
|
||||
.postmenu:focus { |
||||
border: solid var(--font-color); |
||||
border-width: 0 1px 1px 0; |
||||
background: 0 0 |
||||
} |
||||
|
||||
/* files box */ |
||||
.filelabel { |
||||
background: var(--highlighted-post-color); |
||||
border: 2px dashed var(--blue-light) |
||||
} |
||||
|
||||
/* big title */ |
||||
.board-title { |
||||
font-size: 55px |
||||
} |
||||
|
||||
/* navbar */ |
||||
.navbar { |
||||
border: 0; |
||||
box-shadow: none |
||||
} |
||||
|
||||
.stickynav { |
||||
background: var(--bg-navbar); |
||||
border: 0; |
||||
box-shadow: none |
||||
} |
||||
|
||||
a.nav-item { |
||||
color: var(--fg-navbar); |
||||
|
||||
font-weight: bold; |
||||
/* overwrites italic from links */ |
||||
font-style: normal !important |
||||
} |
||||
|
||||
a.nav-item:hover { |
||||
color: var(--fg-navbar-hover) !important |
||||
} |
||||
|
||||
|
||||
/* primary buttons */ |
||||
.bottom-reply.no-decoration, |
||||
.collapse.no-decoration, |
||||
.expand-omitted, |
||||
input[type=submit] { |
||||
background: var(--bg-btn-primary); |
||||
border-color: var(--border-btn-primary); |
||||
color: var(--text-btn-primary); |
||||
box-shadow: var(--shadow-btn-primary), var(--shadow-inset-btn-primary); |
||||
transition: .2s cubic-bezier(.3, 0, .5, 1); |
||||
transition-property: color, background-color, border-color; |
||||
|
||||
font-weight: bold; |
||||
/* overwrites italic from links */ |
||||
font-style: normal !important |
||||
} |
||||
|
||||
.bottom-reply.no-decoration:hover, |
||||
.collapse.no-decoration:hover, |
||||
.expand-omitted:hover, |
||||
input[type=submit]:hover { |
||||
background: var(--bg-btn-primary-hover); |
||||
/* overwrites blue from links hover */ |
||||
color: var(--text-btn-primary) !important |
||||
} |
||||
|
||||
/* grey buttons */ |
||||
#action-menu, |
||||
.close, |
||||
.pages, |
||||
.collapse { |
||||
background: var(--bg-light); |
||||
border-color: var(--selection); |
||||
box-shadow: var(--shadow-btn-primary), var(--shadow-inset-btn-primary); |
||||
transition: .2s cubic-bezier(.3, 0, .5, 1); |
||||
transition-property: color, background-color, border-color; |
||||
} |
||||
|
||||
#action-menu:hover, |
||||
.close:hover, |
||||
.pages:hover, |
||||
.collapse:hover { |
||||
background: var(--bg-dark); |
||||
} |
||||
|
||||
/* dimmed info display */ |
||||
#livetext, |
||||
#threadstats { |
||||
background: 0 0; |
||||
border: none |
||||
} |
||||
|
||||
#livetext, |
||||
#threadstats, |
||||
.board-description, |
||||
.cb, |
||||
.edited, |
||||
.footer, |
||||
.post-date, |
||||
.post-file-info, |
||||
.replies { |
||||
color: var(--fg-light) |
||||
} |
||||
|
||||
/* tables style */ |
||||
table { |
||||
border-collapse: separate; |
||||
border-radius: 6px; |
||||
} |
||||
|
||||
td { |
||||
border-top: 1px solid var(--post-outline-color); |
||||
border-left: 1px solid var(--post-outline-color); |
||||
} |
||||
|
||||
td:first-child, |
||||
th:first-child { |
||||
border-left: none; |
||||
} |
||||
|
||||
|
||||
/* table exceptions */ |
||||
table.boardtable.w900 td:last-child { |
||||
background-color: unset !important; |
||||
text-shadow: unset; |
||||
color: var(--font-color) !important; |
||||
} |
||||
|
||||
#hotposts, |
||||
#hotposts td, |
||||
#hotposts tr { |
||||
border: none; |
||||
background: none; |
||||
} |
||||
|
||||
/* forms (post form and threadwatcher) */ |
||||
.modal, |
||||
#postform, |
||||
#threadwatcher { |
||||
background-color: var(--bg-light); |
||||
outline: 2px solid var(--blue-light); |
||||
} |
||||
|
||||
.label { |
||||
border-radius: 6px 0px 0px 6px !important; |
||||
} |
||||
|
||||
input[type="text"], |
||||
input[type="password"], |
||||
select:not(.postmenu), |
||||
#message, |
||||
#postpassword, |
||||
.filelabel { |
||||
border-radius: 0px 6px 6px 0px !important; |
||||
} |
||||
|
||||
#postform-dragHandle, |
||||
#threadwatcher-dragHandle { |
||||
margin-bottom: 4px; |
||||
border-radius: 6px; |
||||
background-color: var(--bg); |
||||
padding: 5px; |
||||
} |
||||
|
||||
#submitpost { |
||||
margin-top: 6px; |
||||
} |
||||
|
||||
.rlabel { |
||||
border-radius: 0px 6px 6px 0px; |
||||
} |
Loading…
Reference in new issue