From 5270d2974912b4a189dcf9eb151498d07e85f69e Mon Sep 17 00:00:00 2001 From: ccd0 Date: Mon, 31 Oct 2016 13:18:04 -0700 Subject: [PATCH] Bring back CSS tweaks for Halloween theme. --- src/Posting/Captcha.v2.coffee | 2 +- src/css/CSS.js | 2 +- src/css/spooky.css | 163 ++++++++++++++++++++++++++++++++++ src/main/Main.coffee | 6 ++ 4 files changed, 171 insertions(+), 2 deletions(-) create mode 100644 src/css/spooky.css diff --git a/src/Posting/Captcha.v2.coffee b/src/Posting/Captcha.v2.coffee index 95513c578..dad266681 100644 --- a/src/Posting/Captcha.v2.coffee +++ b/src/Posting/Captcha.v2.coffee @@ -109,7 +109,7 @@ Captcha.v2 = container = document.querySelector '#qr .captcha-container' container.dataset.widgetID = window.grecaptcha.render container, sitekey: '<%= meta.recaptchaKey %>' - theme: if classList.contains('tomorrow') or classList.contains('dark-captcha') then 'dark' else 'light' + theme: if classList.contains('tomorrow') or classList.contains('spooky') or classList.contains('dark-captcha') then 'dark' else 'light' callback: (response) -> window.dispatchEvent new CustomEvent('captcha:success', {detail: response}) if window.grecaptcha diff --git a/src/css/CSS.js b/src/css/CSS.js index 2bb0209df..cbafdda42 100644 --- a/src/css/CSS.js +++ b/src/css/CSS.js @@ -2,7 +2,7 @@ var inc = require['style']; var faCSS = read('/node_modules/font-awesome/css/font-awesome.css'); var faWebFont = readBase64('/node_modules/font-awesome/fonts/fontawesome-webfont.woff'); - var mainCSS = ['font-awesome', 'style', 'yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon'].map(x => read(`${x}.css`)).join(''); + var mainCSS = ['font-awesome', 'style', 'yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon', 'spooky'].map(x => read(`${x}.css`)).join(''); var iconNames = files.filter(f => /^linkify\.[^.]+\.png$/.test(f)); var icons = iconNames.map(readBase64); %>CSS = { diff --git a/src/css/spooky.css b/src/css/spooky.css new file mode 100644 index 000000000..a7db8fcf5 --- /dev/null +++ b/src/css/spooky.css @@ -0,0 +1,163 @@ +/* General */ +:root.spooky .dialog { + background-color: #171526; + border-color: #707070; +} +:root.spooky .field:focus, +:root.spooky .field.focus { + border-color: #98E; +} + +/* Header */ +:root.spooky #header-bar.dialog { + background-color: rgba(23,21,38,0.98); +} +:root.spooky:not(.fixed) #header-bar, :root.spooky #notifications { + font-size: 9pt; +} +:root.spooky #header-bar, :root.spooky #notifications { + color: #C49756; +} +:root.spooky #board-list a, :root.spooky #shortcuts a { + color: #FE9600; +} +:root.spooky.shortcut-icons .native-settings { + background-image: url('//s.4cdn.org/image/favicon-ws.ico'); +} + +/* Settings */ +:root.spooky #fourchanx-settings fieldset, :root.spooky .section-main div::before { + border-color: #707070; +} +:root.spooky .suboption-list > div:last-of-type { + background-color: #171526; +} + +/* Catalog */ +:root.spooky.catalog-hover-expand .catalog-container:hover > .post { + background-color: #171526; +} +:root.spooky.werkTyme .catalog-thread:not(:hover), +:root.spooky.werkTyme:not(.catalog-hover-expand) .catalog-thread, +:root.spooky.catalog-hover-expand .catalog-container:hover > .post, +:root.spooky.catalog-hover-expand .catalog-container:hover .catalog-reply { + border-color: #707070; +} + +/* Quote */ +:root.spooky #arc-list span.quote { + color: #634C2C; +} +:root.spooky .backlink.deadlink { + color: #FE9600 !important; +} +:root.spooky .inline { + border-color: #707070; + background-color: rgba(255, 255, 255, .14); +} + +/* Fappe and Werk Tyme */ +:root.spooky .indicator { + color: #171526; +} + +/* Highlighting */ +:root.spooky .qphl { + outline: 2px solid rgba(145, 182, 214, .8); +} +:root.spooky.highlight-you .quotesYou.opContainer, +:root.spooky.highlight-you .quotesYou > .reply { + border-left: 3px solid rgba(145, 182, 214, .8); +} +:root.spooky.highlight-own .yourPost.opContainer, +:root.spooky.highlight-own .yourPost > .reply { + border-left: 3px dashed rgba(145, 182, 214, .8); +} +:root.spooky .opContainer.filter-highlight, +:root.spooky .filter-highlight > .reply { + box-shadow: inset 5px 0 rgba(145, 182, 214, .5); +} +:root.spooky.highlight-own .yourPost > div.sideArrows, +:root.spooky.highlight-you .quotesYou > div.sideArrows, +:root.spooky .filter-highlight > div.sideArrows { + color: rgb(155, 185, 210); +} + +/* QR */ +.spooky #dump-list::-webkit-scrollbar-thumb { + background-color: #171526; + border-color: #707070; +} +:root.spooky .qr-preview { + background-color: rgba(0, 0, 0, .15); +} +:root.spooky #qr .field { + background-color: rgb(26, 27, 29); + color: rgb(197,200,198); + border-color: rgb(40, 41, 42); +} +:root.spooky #qr .field:focus, +:root.spooky #qr .field.focus { + border-color: rgb(254, 150, 0) !important; + background-color: rgb(30,32,36); +} +:root.spooky .persona button { + background: linear-gradient(to bottom, #2E3035, #222427) no-repeat; + color: rgb(197,200,198); + border-color: rgb(40, 41, 42); + outline: none; +} +:root.spooky .persona button::-moz-focus-inner { + border: none; +} +:root.spooky .persona button:focus { + border-color: rgb(254, 150, 0); +} +:root.spooky #qr.sjis-preview #sjis-toggle, +:root.spooky #qr.tex-preview #tex-preview-button { + background: rgb(26, 27, 29); +} +:root.spooky #qr select, +:root.spooky #file-n-submit > input, +:root.spooky #qr-draw-button { + border-color: rgb(40, 41, 42); +} +:root.spooky #qr-filename { + color: rgb(197,200,198); +} + +:root.spooky .qr-link { + border-color: rgb(8, 6, 23) rgb(8, 6, 23) rgb(0, 0, 8); + background: linear-gradient(#262435, #171526) repeat scroll 0% 0% transparent; +} +:root.spooky .qr-link:hover { + background: #1A1829; +} + + +/* Menu */ +:root.spooky #menu { + color: #FE9600; +} +:root.spooky .entry { + font-size: 10pt; +} +:root.spooky .focused.entry { + background: rgba(255, 255, 255, .33); +} + +/* Unread */ +:root.spooky #unread-line { + border-color: rgb(197, 200, 198); +} + +/* Thread Watcher */ +:root.spooky .replies-quoting-you > a, :root.spooky #watcher-link.replies-quoting-you { + color: #F00 !important; +} + +/* Watcher Favicon */ +:root.spooky .watch-thread-link +{ + background-image: url("data:image/svg+xml,"); +} diff --git a/src/main/Main.coffee b/src/main/Main.coffee index 78c0d0f19..3921ff298 100644 --- a/src/main/Main.coffee +++ b/src/main/Main.coffee @@ -205,6 +205,12 @@ Main = Main.setClass() setClass: -> + if (spooky = $ 'link[rel="stylesheet"][href^="//s.4cdn.org/css/spooky."]', d.head) + spooky.removeAttribute 'media' + if getComputedStyle(d.body).color is 'rgb(196, 151, 86)' # not blocked + $.addClass doc, 'spooky' + return + if g.VIEW is 'catalog' $.addClass doc, $.id('base-css').href.match(/catalog_(\w+)/)[1].replace('_new', '').replace /_+/g, '-' return