diff --git a/gulp/res/css/themes/cybhub.css b/gulp/res/css/themes/cybhub.css new file mode 100644 index 00000000..e6e56756 --- /dev/null +++ b/gulp/res/css/themes/cybhub.css @@ -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; +}