From 41b96cd4c3c18dd1ed6fa311485b2c85656bf301 Mon Sep 17 00:00:00 2001 From: Zixaphir Date: Thu, 11 Apr 2013 00:08:17 -0700 Subject: [PATCH] Bugfix attempt #1 --- appchan-x.user.js | 58 ++++++++++++++---- css/themeoptions.css | 140 +++++++++++++++++++++++++++++++++++++++++++ src/appchan.coffee | 12 ++-- src/features.coffee | 10 +++- 4 files changed, 202 insertions(+), 18 deletions(-) create mode 100644 css/themeoptions.css diff --git a/appchan-x.user.js b/appchan-x.user.js index e9f00cac3..b973410f7 100644 --- a/appchan-x.user.js +++ b/appchan-x.user.js @@ -20,7 +20,7 @@ // @icon data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEX///8EZgR8ulSk0oT///8EAgQ1A88mAAAAAXRSTlMAQObYZgAAAIpJREFUeF6t0sENwjAMhWF84N4H6gAYMUBkdQMYwfuvwmstEeD4kl892P0OaaWcpga2/K0SGII1HNBXARgu7veoY3ANd+esgMHZIz85u0EABrbms3pl/bkC1Tn5ihGOfQwqHeZ/FdYdirEMgCG2ZAQWDTL0m9FvjAhcvoGNAK2gZhGYYX9+ZgFm9gaiNmNkMENY4QAAAABJRU5ErkJggg== // ==/UserScript== -/* appchan x - Version 2.0.0 - 2013-04-10 +/* appchan x - Version 2.0.0 - 2013-04-11 * http://zixaphir.github.com/appchan-x/ * * Copyright (c) 2009-2011 James Campos @@ -3427,8 +3427,8 @@ matrix = function(fg, bg) { return "" + bg.r + " " + (-fg.r) + " 0 0 " + fg.r + "" + bg.g + " " + (-fg.g) + " 0 0 " + fg.g + "" + bg.b + " " + (-fg.b) + " 0 0 " + fg.b + ""; }; - fgHex = Style.colorToHex(text); - bgHex = Style.colorToHex(background); + fgHex = Style.colorToHex(text) || 'ffffff'; + bgHex = Style.colorToHex(background) || '000000'; string = matrix({ r: parseInt(fgHex.substr(0, 2), 16) / 255, g: parseInt(fgHex.substr(2, 2), 16) / 255, @@ -3521,14 +3521,42 @@ }[_conf['Post Form Style']] || "") + "\n\n" + (_conf['Post Form Style'] !== 'tabbed slideout' ? (!(_conf['Post Form Style'] === 'float' || _conf['Show Post Form Header']) ? "#qrtab { display: none; }" : _conf['Post Form Style'] !== 'slideout' ? ".autohide:not(:hover) > form { display: none !important; }" : "") + "#qrtab { margin-bottom: 1px; }" : "") + "\n\n" + (_conf['Post Form Style'] !== 'float' && _conf["Post Form Slideout Transitions"] ? "#qr { " + agent + "transition: " + agent + "transform .3s ease-in-out 1s;}#qr:hover,#qr.focus,#qr.dump { " + agent + "transition: " + agent + "transform .3s linear;}#qrtab { " + agent + "transition: opacity .3s ease-in-out 1s;}#qr:hover #qrtab { " + agent + "transition: opacity .3s linear;}" : "") + "\n\n#qr .close {\n float: right;\n padding: 0 3px;\n}\n#qr .warning {\n min-height: 1.6em;\n vertical-align: middle;\n padding: 0 1px;\n border-width: 1px;\n border-style: solid;\n}\n.persona {\n width: 248px;\n max-width: 100%;\n min-width: 100%;\n}\n#dump-button {\n width: 10%;\n margin: 0;\n}\n\n" + (_conf['Compact Post Form Inputs'] ? ".persona input.field { width: 29.6%; margin: 0 0 0 0.4%;}#qr textarea.field { height: 14.8em; min-height: 9em;}#qr.captcha textarea.field { height: 9em;}" : ".persona input.field { width: 100%;}.persona input.field[name='name'] { width: 89.6%; margin: 0 0 0 0.4%;}#qr textarea.field { height: 11.6em; min-height: 6em;}#qr.captcha textarea.field { height: 6em;}") + "\n\n" + (_conf["Tripcode Hider"] ? "input.field.tripped:not(:hover):not(:focus) { color: transparent !important; text-shadow: none !important;}" : "") + "\n\n#qr textarea {\n resize: " + _conf['Textarea Resize'] + ";\n}\n.captchaimg {\n margin: 1px 0 0;\n text-align: center;\n}\n.captchaimg img {\n width: 100%;\n height: 4em;\n width: 246px;\n}\n.captchainput .field {\n width: 100%;\n margin: 1px 0 0;\n}\n.field,\n.selectrice,\nbutton,\ninput:not([type=radio]) {\n " + Style.sizing + ": border-box;\n font-size: " + (parseInt(_conf['Font Size'], 10)) + "px;\n height: 1.6em;\n margin: 1px 0 0;\n vertical-align: bottom;\n padding: 0 1px;\n}\n#qr textarea {\n min-width: 100%;\n}\n#qr [type='submit'] {\n width: 25%;\n}\n[type='file'] {\n position: absolute;\n opacity: 0;\n z-index: -1;\n}\n#showQR {\n display: " + (_conf["Hide Show Post Form"] ? "none" : "block") + ";\n z-index: 4;\n " + Style.sidebarLocation[0] + ": 2px;\n width: " + width + "px;\n background-color: transparent;\n text-align: center;\n position: fixed;\n top: auto;\n}\n/* Fake File Input */\n#qr-filename,\n.has-file #qr-no-file {\n display: none;\n}\n#qr-no-file,\n.has-file #qr-filename {\n display: block;\n}\n#qr-filename-container {\n " + Style.sizing + ": border-box;\n display: inline-block;\n position: relative;\n width: 100px;\n min-width: 74.6%;\n max-width: 74.6%;\n margin-right: 0.4%;\n overflow: hidden;\n padding: 2px 1px 0;\n}\n#qr-filerm {\n position: absolute;\n right: 3px;\n top: 2px;\n}\n/* Thread Select / Spoiler Label */\n#qr-thread-select {\n vertical-align: bottom;\n width: 49%;\n display: inline-block;\n}\n#qr-spoiler-label {\n vertical-align: bottom;\n width: 49%;\n display: inline-block;\n text-align: right;\n}\n/* Dumping UI */\n.dump #dump-list-container {\n display: block;\n}\n#dump-list-container {\n display: none;\n position: relative;\n overflow-y: hidden;\n margin-top: 1px;\n}\n#dump-list {\n overflow-x: auto;\n overflow-y: hidden;\n white-space: pre;\n width: 248px;\n max-width: 100%;\n min-width: 100%;\n}\n#dump-list:hover {\n overflow-x: auto;\n}\n.qr-preview {\n " + Style.sizing + ": border-box;\n counter-increment: thumbnails;\n cursor: move;\n display: inline-block;\n height: 90px;\n width: 90px;\n padding: 2px;\n opacity: .5;\n overflow: hidden;\n position: relative;\n text-shadow: 0 1px 1px #000;\n " + agent + "transition: opacity .25s ease-in-out;\n vertical-align: top;\n}\n.qr-preview:hover,\n.qr-preview:focus {\n opacity: .9;\n}\n.qr-preview::before {\n content: counter(thumbnails);\n color: #fff;\n position: absolute;\n top: 3px;\n right: 3px;\n text-shadow: 0 0 3px #000, 0 0 8px #000;\n}\n.qr-preview#selected {\n opacity: 1;\n}\n.qr-preview.drag {\n box-shadow: 0 0 10px rgba(0,0,0,.5);\n}\n.qr-preview.over {\n border-color: #fff;\n}\n.qr-preview > span {\n color: #fff;\n}\n.remove {\n background: none;\n color: #e00;\n font-weight: 700;\n padding: 3px;\n}\na:only-of-type > .remove {\n display: none;\n}\n.remove:hover::after {\n content: \" Remove\";\n}\n.qr-preview > label {\n background: rgba(0,0,0,.5);\n color: #fff;\n right: 0; bottom: 0; left: 0;\n position: absolute;\n text-align: center;\n}\n.qr-preview > label > input {\n margin: 0;\n}\n#add-post {\n cursor: pointer;\n font-size: 2em;\n position: absolute;\n top: 50%;\n right: 10px;\n " + agent + "transform: translateY(-50%);\n}\n/* Ads */\n.topad img,\n.middlead img,\n.bottomad img {\n opacity: 0.3;\n " + agent + "transition: opacity .3s linear;\n}\n.topad img:hover,\n.middlead img:hover,\n.bottomad img:hover {\n opacity: 1;\n}\n" + (_conf["Block Ads"] ? "/* AdBlock Minus */.bottomad + hr,.topad img,.middlead img,.bottomad img { display: none;}" : "") + "\n" + (_conf["Shrink Ads"] ? ".topad a img,.middlead a img,.bottomad a img { width: 500px; height: auto;}" : "") + "\n/* Options */\n#overlay {\n position: fixed;\n z-index: 30;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: rgba(0,0,0,.5);\n}\n#appchanx-settings {\n width: auto;\n left: 15%;\n right: 15%;\n top: 15%;\n bottom: 15%;\n position: fixed;\n z-index: 31;\n padding: .3em;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px;" : "") + "\n}\n.description {\n display: none;\n}\n#appchanx-settings h3,\n.section-keybinds,\n.section-mascots,\n.section-script,\n.style {\n text-align: center;\n}\n.section-keybinds table,\n.section-script fieldset,\n.section-style fieldset {\n text-align: left;\n}\n.section-keybinds table {\n margin: auto;\n}\n#appchanx-settings fieldset {\n padding: 5px 0;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px;" : "") + "\n vertical-align: top;\n " + (_conf["Single Column Mode"] ? "margin: 0 auto 6px;" : "margin: 0 3px 6px;\n display: inline-block;") + "\n border: 0;\n}\n.section-container {\n overflow: auto;\n position: absolute;\n top: 1.7em;\n right: 5px;\n bottom: 5px;\n left: 5px;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px;" : "") + "\n}\n.sections-list {\n padding: 0 3px;\n float: left;\n}\n.sections-list > a {\n cursor: pointer;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px 3px 0 0;" : "") + "\n position: relative;\n padding: 0 4px;\n z-index: 1;\n height: 1.4em;\n display: inline-block;\n border-width: 1px 1px 0 1px;\n border-color: transparent;\n border-style: solid;\n}\n.credits {\n float: right;\n}\n#appchanx-settings h3 {\n margin: 0;\n}\n.section-script fieldset > div,\n.section-style fieldset > div,\n.section-rice fieldset > div {\n overflow: visible;\n padding: 0 5px 0 7px;\n}\n#appchanx-settings tr:nth-of-type(2n+1),\n.section-script fieldset > div:nth-of-type(2n+1),\n.section-rice fieldset > div:nth-of-type(2n+1),\n.section-style fieldset > div:nth-of-type(2n+1),\n.section-keybinds tr:nth-of-type(2n+1),\n#selectrice li:nth-of-type(2n+1) {\n background-color: rgba(0, 0, 0, 0.05);\n}\narticle li {\n margin: 10px 0 10px 2em;\n}\n#appchanx-settings .option {\n width: 50%;\n display: inline-block;\n vertical-align: bottom;\n}\n.option input {\n width: 100%;\n}\n.optionlabel {\n padding-left: 18px;\n}\n.rice + .optionlabel {\n padding-left: 0;\n}\n.section-script fieldset,\n.styleoption {\n text-align: left;\n}\n.section-style fieldset {\n width: 370px;\n}\n.section-script fieldset {\n width: 200px;\n}\n.suboptions,\n#mascotcontent,\n#themecontent {\n overflow: auto;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 1.7em;\n left: 0;\n}\n.mAlign {\n height: 250px;\n vertical-align: middle;\n display: table-cell;\n}\n#themecontent {\n top: 1.7em;\n}\n#save,\n.stylesettings {\n position: absolute;\n right: 10px;\n bottom: 0;\n}\n.section-style .suboptions {\n bottom: 0;\n}\n.section-container textarea {\n font-family: monospace;\n min-height: 350px;\n resize: vertical;\n width: 100%;\n}\n/* Hover Functionality */\n#mouseover {\n z-index: 33;\n position: fixed;\n max-width: 70%;\n}\n#mouseover:empty {\n display: none;\n}\n/* Mascot Tab */\n#mascot_hide {\n padding: 3px;\n position: absolute;\n top: 2px;\n right: 18px;\n}\n#mascot_hide .rice {\n float: left;\n}\n#mascot_hide > div {\n height: 0;\n text-align: right;\n overflow: hidden;\n}\n#mascot_hide:hover > div {\n height: auto;\n}\n#mascot_hide label {\n width: 100%;\n display: block;\n clear: both;\n text-decoration: none;\n}\n.mascots {\n padding: 0;\n text-align: center;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px;" : "") + "\n}\n.mascot,\n.mascotcontainer {\n overflow: hidden;\n}\n.mascot {\n position: relative;\n border: none;\n margin: 5px;\n padding: 0;\n width: 200px;\n display: inline-block;\n background-color: transparent;\n}\n.mascotcontainer {\n height: 250px;\n border: 0;\n margin: 0;\n max-height: 250px;\n cursor: pointer;\n bottom: 0;\n border-width: 0 1px 1px;\n border-style: solid;\n border-color: transparent;\n overflow: hidden;\n}\n.mascot img {\n max-width: 200px;\n}\n.mascotname,\n.mascotoptions {\n padding: 0;\n width: 100%;\n}\n.mascot .mascotoptions {\nopacity: 0;\n " + agent + "transition: opacity .3s linear;\n}\n.mascot:hover .mascotoptions {\n opacity: 1;\n}\n.mascotoptions {\n position: absolute;\n bottom: 0;\n right: 0;\n left: 0;\n}\n.mascotoptions a {\n display: inline-block;\n width: 33%;\n}\n#upload {\n position: absolute;\n width: 100px;\n left: 50%;\n margin-left: -50px;\n text-align: center;\n bottom: 0;\n}\n#mascots_batch {\n position: absolute;\n left: 10px;\n bottom: 0;\n}\n/* Themes Tab */\n#themes h1 {\n position: absolute;\n right: 300px;\n bottom: 10px;\n margin: 0;\n " + agent + "transition: all .2s ease-in-out;\n opacity: 0;\n}\n#themes .selectedtheme h1 {\n right: 11px;\n opacity: 1;\n}\n#themeContainer {\n margin-bottom: 3px;\n}\n#addthemes {\n position: absolute;\n left: 10px;\n bottom: 0;\n}\n.theme {\n margin: 1em;\n}\n/* Theme Editor */\n#themeConf {\n position: fixed;\n " + Style.sidebarLocation[1] + ": 2px;\n " + Style.sidebarLocation[0] + ": auto;\n top: 0;\n bottom: 0;\n width: 296px;\n z-index: 10;\n}\n#themebar input {\n width: 30%;\n}\n.color {\n width: 10%;\n border-left: none !important;\n color: transparent !important;\n}\n.colorfield {\n width: 90%;\n}\n.themevar textarea {\n min-width: 100%;\n max-width: 100%;\n height: 20em;\n resize: vertical;\n}\n/* Mascot Editor */\n#mascotConf {\n position: fixed;\n height: 17em;\n bottom: 0;\n left: 50%;\n width: 500px;\n margin-left: -250px;\n overflow: auto;\n z-index: 10;\n}\n#mascotConf .option,\n#mascotConf .optionlabel {\n " + Style.sizing + ": border-box;\n width: 50%;\n display: inline-block;\n vertical-align: middle;\n}\n#mascotConf .option input {\n width: 100%;\n}\n#close {\n position: absolute;\n left: 10px;\n bottom: 0;\n}\n/* Catalog */\n#content .navLinks,\n#info .navLinks,\n.btn-wrap {\n display: block;\n}\n.navLinks > .btn-wrap:not(:first-of-type)::before {\n content: ' - ';\n}\n.button {\n cursor: pointer;\n}\n#content .btn-wrap,\n#info .btn-wrap {\n display: inline-block;\n}\n#settings .selectrice {\n width: 100px;\n display: inline-block;\n}\n#post-preview {\n position: absolute;\n z-index: 22;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px;" : "") + "\n}\n#settings,\n#threads,\n#info .navLinks,\n#content .navLinks {\n text-align: center;\n}\n#threads .thread {\n vertical-align: top;\n display: inline-block;\n word-wrap: break-word;\n overflow: hidden;\n margin-top: 5px;\n padding: 5px 0 3px;\n text-align: center;\n}\n.extended-small .thread,\n.small .thread {\n width: 165px;\n max-height: 320px;\n}\n.small .teaser,\n.large .teaser {\n display: none;\n}\n.extended-large .thread,\n.large .thread {\n width: 270px;\n max-height: 410px;\n}\n.extended-small .thumb,\n.small .thumb {\n max-width: 150px;\n max-height: 150px;\n}\n/* Front Page */\n#logo {\n text-align: center;\n}\n#doc {\n margin: 0 auto;\n width: 1000px;\n position: relative;\n}\n#boards .boxcontent {\n vertical-align: top;\n text-align: center;\n}\n#filter-container,\n#options-container {\n float: right;\n position: relative;\n}\n#optionssmenu {\n top: 100% !important;\n left: 0 !important;\n}\n#boards .column {\n " + Style.sizing + ": border-box;\n display: inline-block;\n width: 16em;\n text-align: left;\n vertical-align: top;\n}\n.bd ul,\n.boxcontent ul {\n vertical-align: top;\n padding: 0;\n}\n.right-box .boxcontent ul {\n padding: 0 10px;\n}\n.yuimenuitem,\n.boxcontent li {\n list-style-type: none;\n}\n.bd ul {\n margin: 0;\n}\n.yuimenuitem::before {\n content: \" [ ] \";\n font-family: monospace;\n}\n.yuimenuitem-checked::before {\n content: \" [x] \"\n}\n.yui-u {\n display: inline-block;\n vertical-align: top;\n width: 475px;\n margin: 10px;\n}\n#recent-images .boxcontent {\n text-align: center;\n}\n#ft {\n text-align: center;\n}\n#ft ul {\n padding: 0;\n}\n#ft li {\n list-style-type: none;\n display: inline-block;\n width: 100px;\n}\n#preview-tooltip-nws,\n#preview-tooltip-ws,\n#ft .fill,\n.clear-bug {\n display: none;\n}"; }, theme: function(theme) { - var agent, backgroundC, bgColor, css, icons, _conf; + var agent, background, backgroundC, bgColor, css, fileHeading, icons, replyHeading, _conf; _conf = Conf; agent = Style.agent; - bgColor = new Style.color(Style.colorToHex(backgroundC = theme["Background Color"])); + bgColor = new Style.color(Style.colorToHex(backgroundC = theme["Background Color"]) || 'aaaaaa'); Style.lightTheme = bgColor.isLight(); icons = "data:image/png;base64," + Icons[_conf["Icons"]]; - return css = ".hide_thread_button span > span,\n.hide_reply_button span > span {\n background-color: " + theme["Links"] + ";\n}\n#mascot_hide label {\n border-bottom: 1px solid " + theme["Reply Border"] + ";\n}\n#content .thumb {\n box-shadow: 0 0 5px " + theme["Reply Border"] + ";\n}\n.mascotname,\n.mascotoptions {\n background: " + theme["Dialog Background"] + ";\n border: 1px solid " + theme["Buttons Border"] + ";\n}\n.opContainer.filter_highlight {\n box-shadow: inset 5px 0 " + theme["Backlinked Reply Outline"] + ";\n}\n.filter_highlight > .reply {\n box-shadow: -5px 0 " + theme["Backlinked Reply Outline"] + ";\n}\nhr {\n border-bottom: 1px solid " + theme["Reply Border"] + ";\n}\na[style=\"cursor: pointer; float: right;\"] + div[style^=\"width: 100%;\"] > table > tbody > tr > td {\n background: " + backgroundC + " !important;\n border: 1px solid " + theme["Reply Border"] + " !important;\n}\n#fs_status {\n background: " + theme["Dialog Background"] + " !important;\n}\n#fs_data tr[style=\"background-color: #EA8;\"] {\n background: " + theme["Reply Background"] + " !important;\n}\n#fs_data,\n#fs_data * {\n border-color: " + theme["Reply Border"] + " !important;\n}\nhtml {\n background: " + (backgroundC || '') + ";\n background-image: " + (theme["Background Image"] || '') + ";\n background-repeat: " + (theme["Background Repeat"] || '') + ";\n background-attachment: " + (theme["Background Attachment"] || '') + ";\n background-position: " + (theme["Background Position"] || '') + ";\n}\n.section-container,\n#exlinks-options-content,\n#mascotcontent,\n#themecontent {\n background: " + backgroundC + ";\n border: 1px solid " + theme["Reply Border"] + ";\n padding: 5px;\n}\n.sections-list > a.tab-selected {\n background: " + backgroundC + ";\n border-color: " + theme["Reply Border"] + ";\n border-style: solid;\n}\n.captchaimg img {\n " + (Style.filter(theme["Text"], theme["Input Background"])) + "\n}\n#boardTitle,\n#prefetch,\n#showQR,\n" + (!_conf["Post Form Decorations"] ? '#spoilerLabel,' : '') + "\n#thread-stats {\n text-shadow:\n 1px 1px 0 " + backgroundC + ",\n -1px -1px 0 " + backgroundC + ",\n 1px -1px 0 " + backgroundC + ",\n -1px 1px 0 " + backgroundC + ",\n 0 1px 0 " + backgroundC + ",\n 0 -1px 0 " + backgroundC + ",\n 1px 0 0 " + backgroundC + ",\n -1px 0 0 " + backgroundC + "\n " + (_conf["Sidebar Glow"] ? ", 0 2px 5px " + theme['Text'] + ";" : ";") + "\n}\n/* Fixes text spoilers */\n" + (_conf['Remove Spoilers'] && _conf['Indicate Spoilers'] ? ".spoiler::before,s::before { content: '[spoiler]';}.spoiler::after,s::after { content: '[/spoiler]';}" : !_conf['Remove Spoilers'] ? ".spoiler:not(:hover) *,s:not(:hover) * { color: rgb(0,0,0) !important; text-shadow: none !important;}.spoiler:not(:hover),s:not(:hover) { background-color: rgb(0,0,0); color: rgb(0,0,0) !important; text-shadow: none !important;}" : "") + "\n#exlinks-options,\n#appchanx-settings,\n#qrtab,\n" + (_conf["Post Form Decorations"] ? "#qr," : "") + "\n#updater,\ninput[type=\"submit\"],\ninput[value=\"Report\"],\nspan[style=\"left: 5px; position: absolute;\"] a {\n background: " + theme["Buttons Background"] + ";\n border: 1px solid " + theme["Buttons Border"] + ";\n}\n.enabled .mascotcontainer {\n background: " + theme["Buttons Background"] + ";\n border-color: " + theme["Buttons Border"] + ";\n}\n#dump,\n#qr-filename-container,\n#appchanx-settings input,\n.captchaimg,\n.dump #dump:not(:hover):not(:focus),\n.qr-preview,\n.selectrice,\nbutton,\ninput,\ntextarea {\n background: " + theme["Input Background"] + ";\n border: 1px solid " + theme["Input Border"] + ";\n color: " + theme["Inputs"] + ";\n}\n#dump:hover,\n#qr-filename-container:hover,\n.selectrice:hover,\n#selectrice li:hover,\n#selectrice li:nth-of-type(2n+1):hover,\ninput:hover,\ntextarea:hover {\n background: " + theme["Hovered Input Background"] + ";\n border-color: " + theme["Hovered Input Border"] + ";\n color: " + theme["Inputs"] + ";\n}\n#dump:active,\n#dump:focus,\n#selectrice li:focus,\n.selectrice:focus,\ninput:focus,\ntextarea:focus,\ntextarea.field:focus {\n background: " + theme["Focused Input Background"] + ";\n border-color: " + theme["Focused Input Border"] + ";\n color: " + theme["Inputs"] + ";\n}\n#mouseover,\n#post-preview,\n#qp .post,\n#xupdater,\n.reply.post {\n border-width: 1px;\n border-style: solid;\n border-color: " + theme["Reply Border"] + ";\n background: " + theme["Reply Background"] + ";\n}\n.thread > .replyContainer > .reply.post {\n border-width: " + (_conf['Post Spacing'] === "0" ? "1px 1px 0 1px" : '1px') + ";\n}\n.exblock.reply,\n.reply.post.highlight,\n.reply.post:target {\n background: " + theme["Highlighted Reply Background"] + ";\n border: 1px solid " + theme["Highlighted Reply Border"] + ";\n}\n#boardNavDesktop,\n.pagelist {\n background: " + theme["Navigation Background"] + ";\n border-style: solid;\n border-color: " + theme["Navigation Border"] + ";\n}\n.thread {\n background: " + theme["Thread Wrapper Background"] + ";\n border: 1px solid " + theme["Thread Wrapper Border"] + ";\n}\n#boardNavDesktopFoot,\n#mascotConf,\n#mascot_hide,\n#menu,\n#selectrice,\n#themeConf,\n#watcher,\n#watcher:hover,\n.submenu,\na[style=\"cursor: pointer; float: right;\"] ~ div[style^=\"width: 100%;\"] > table {\n background: " + theme["Dialog Background"] + ";\n border: 1px solid " + theme["Dialog Border"] + ";\n}\n.deleteform::before,\n.deleteform,\n#qr .warning {\n background: " + theme["Input Background"] + ";\n border-color: " + theme["Input Border"] + ";\n}\n.disabledwarning,\n.warning {\n color: " + theme["Warnings"] + ";\n}\n#navlinks a:first-of-type {\n border-bottom: 11px solid rgb(130,130,130);\n}\n#navlinks a:last-of-type {\n border-top: 11px solid rgb(130,130,130);\n}\n#imgControls .menu-button {\n border-color: rgb(130,130,130);\n color: rgb(130,130,130);\n}\n#charCount {\n color: " + (Style.lightTheme ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.7)") + ";\n}\n.postNum a {\n color: " + theme["Post Numbers"] + ";\n}\n.subject {\n color: " + theme["Subjects"] + " !important;\n}\n.dateTime,\n.post-ago {\n color: " + theme["Timestamps"] + " !important;\n}\n#fs_status a,\n#updater #count:not(.new)::after,\n#showQR,\n#updater,\n.abbr,\n.boxbar,\n.boxcontent,\n.deleteform::before,\n.pages strong,\n.pln,\n.reply,\n.reply.highlight,\n.summary,\nbody,\nbutton,\nspan[style=\"left: 5px; position: absolute;\"] a,\ninput,\ntextarea {\n color: " + theme["Text"] + ";\n}\n#exlinks-options-content > table,\n#appchanx-settings fieldset,\n#selectrice {\n border-bottom: 1px solid " + theme["Reply Border"] + ";\n box-shadow: inset " + theme["Shadow Color"] + " 0 0 5px;\n}\n.quote + .spoiler:hover,\n.quote {\n color: " + theme["Greentext"] + ";\n}\n.forwardlink {\n text-decoration: " + (_conf["Underline Links"] ? "underline" : "none") + ";\n border-bottom: 1px dashed " + theme["Backlinks"] + ";\n}\n.container::before {\n color: " + theme["Timestamps"] + ";\n}\n#menu,\n#post-preview,\n#qp .opContainer,\n#qp .replyContainer,\n.submenu {\n box-shadow: " + (_conf['Quote Shadows'] ? "5px 5px 5px " + theme['Shadow Color'] : "") + ";\n}\n.rice {\n background: " + theme["Checkbox Background"] + ";\n border: 1px solid " + theme["Checkbox Border"] + ";\n}\n.selectrice::before {\n border-left: 1px solid " + theme["Input Border"] + ";\n}\n.selectrice::after {\n border-top: .45em solid " + theme["Inputs"] + ";\n}\n#updater input,\n.bd {\n background: " + theme["Buttons Background"] + ";\n border: 1px solid " + theme["Buttons Border"] + ";\n}\n.pages a,\n#boardNavDesktop a {\n color: " + theme["Navigation Links"] + ";\n}\ninput[type=checkbox]:checked + .rice {\n position: relative;\n}\ninput[type=checkbox]:checked + .rice::after {\n content: \"\";\n display: block;\n width: 5px;\n height: 12px;\n border-radius: 1px;\n border: solid rgb(50, 50, 50);\n border-width: 0 3px 3px 0;\n " + agent + "transform: rotate(45deg);\n position: absolute;\n left: 2px;\n bottom: -1px;\n " + (!Style.lightTheme ? "filter: url(\"data:image/svg+xml,#filters\");" : "") + "\n}\n#addReply,\n#dump,\n.button,\n.entry,\n.replylink,\na {\n color: " + theme["Links"] + ";\n}\n.backlink {\n color: " + theme["Backlinks"] + ";\n}\n.qiQuote,\n.quotelink {\n color: " + theme["Quotelinks"] + ";\n}\n#addReply:hover,\n#dump:hover,\n.entry:hover,\n.sideArrows a:hover,\n.replylink:hover,\n.qiQuote:hover,\n.quotelink:hover,\na .name:hover,\na .postertrip:hover,\na:hover {\n color: " + theme["Hovered Links"] + ";\n}\n#boardNavDesktop a:hover,\n#boardTitle a:hover {\n color: " + theme["Hovered Navigation Links"] + ";\n}\n#boardTitle {\n color: " + theme["Board Title"] + ";\n}\n.name,\n.post-author {\n color: " + theme["Names"] + " !important;\n}\n.post-tripcode,\n.postertrip,\n.trip {\n color: " + theme["Tripcodes"] + " !important;\n}\na .postertrip,\na .name {\n color: " + theme["Emails"] + ";\n}\n.post.reply.qphl,\n.post.op.qphl {\n border-color: " + theme["Backlinked Reply Outline"] + ";\n background: " + theme["Highlighted Reply Background"] + ";\n}\n.inline .post {\n box-shadow: " + (_conf['Quote Shadows'] ? "5px 5px 5px " + theme['Shadow Color'] : "") + ";\n}\n.placeholder,\n#qr input::" + agent + "placeholder,\n#qr textarea::" + agent + "placeholder {\n color: " + (Style.lightTheme ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.2)") + " !important;\n}\n#qr input:" + agent + "placeholder,\n#qr textarea:" + agent + "placeholder,\n.placeholder {\n color: " + (Style.lightTheme ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.2)") + " !important;\n}\n#appchanx-settings fieldset,\n.boxcontent dd,\n.selectrice ul {\n border-color: " + (Style.lightTheme ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)") + ";\n}\n#appchanx-settings li,\n#selectrice li:not(:first-of-type) {\n border-top: 1px solid " + (Style.lightTheme ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.025)") + ";\n}\n#navtopright .exlinksOptionsLink::after,\n#appchanOptions,\n.navLinks > a:first-of-type::after,\n#watcher::after,\n#globalMessage::after,\n#boardNavDesktopFoot::after,\na[style=\"cursor: pointer; float: right;\"]::after,\n#imgControls .expand-all-shortcut,\n#imgControls .contract-all-shortcut,\n#catalog::after,\n#fappeTyme {\n background-image: url('" + icons + "');\n" + (!Style.lightTheme ? "filter: url(\"data:image/svg+xml,#filters\");" : "") + "\n}\n" + theme["Custom CSS"]; + css = ".hide_thread_button span > span,\n.hide_reply_button span > span {\n background-color: " + theme["Links"] + ";\n}\n#mascot_hide label {\n border-bottom: 1px solid " + theme["Reply Border"] + ";\n}\n#content .thumb {\n box-shadow: 0 0 5px " + theme["Reply Border"] + ";\n}\n.mascotname,\n.mascotoptions {\n background: " + theme["Dialog Background"] + ";\n border: 1px solid " + theme["Buttons Border"] + ";\n}\n.opContainer.filter_highlight {\n box-shadow: inset 5px 0 " + theme["Backlinked Reply Outline"] + ";\n}\n.filter_highlight > .reply {\n box-shadow: -5px 0 " + theme["Backlinked Reply Outline"] + ";\n}\nhr {\n border-bottom: 1px solid " + theme["Reply Border"] + ";\n}\na[style=\"cursor: pointer; float: right;\"] + div[style^=\"width: 100%;\"] > table > tbody > tr > td {\n background: " + backgroundC + " !important;\n border: 1px solid " + theme["Reply Border"] + " !important;\n}\n#fs_status {\n background: " + theme["Dialog Background"] + " !important;\n}\n#fs_data tr[style=\"background-color: #EA8;\"] {\n background: " + theme["Reply Background"] + " !important;\n}\n#fs_data,\n#fs_data * {\n border-color: " + theme["Reply Border"] + " !important;\n}\nhtml {\n background: " + (backgroundC || '') + ";\n background-image: " + (theme["Background Image"] || '') + ";\n background-repeat: " + (theme["Background Repeat"] || '') + ";\n background-attachment: " + (theme["Background Attachment"] || '') + ";\n background-position: " + (theme["Background Position"] || '') + ";\n}\n.section-container,\n#exlinks-options-content,\n#mascotcontent,\n#themecontent {\n background: " + backgroundC + ";\n border: 1px solid " + theme["Reply Border"] + ";\n padding: 5px;\n}\n.sections-list > a.tab-selected {\n background: " + backgroundC + ";\n border-color: " + theme["Reply Border"] + ";\n border-style: solid;\n}\n.captchaimg img {\n " + (Style.filter(theme["Text"], theme["Input Background"])) + "\n}\n#boardTitle,\n#prefetch,\n#showQR,\n" + (!_conf["Post Form Decorations"] ? '#spoilerLabel,' : '') + "\n#thread-stats {\n text-shadow:\n 1px 1px 0 " + backgroundC + ",\n -1px -1px 0 " + backgroundC + ",\n 1px -1px 0 " + backgroundC + ",\n -1px 1px 0 " + backgroundC + ",\n 0 1px 0 " + backgroundC + ",\n 0 -1px 0 " + backgroundC + ",\n 1px 0 0 " + backgroundC + ",\n -1px 0 0 " + backgroundC + "\n " + (_conf["Sidebar Glow"] ? ", 0 2px 5px " + theme['Text'] + ";" : ";") + "\n}\n/* Fixes text spoilers */\n" + (_conf['Remove Spoilers'] && _conf['Indicate Spoilers'] ? ".spoiler::before,s::before { content: '[spoiler]';}.spoiler::after,s::after { content: '[/spoiler]';}" : !_conf['Remove Spoilers'] ? ".spoiler:not(:hover) *,s:not(:hover) * { color: rgb(0,0,0) !important; text-shadow: none !important;}.spoiler:not(:hover),s:not(:hover) { background-color: rgb(0,0,0); color: rgb(0,0,0) !important; text-shadow: none !important;}" : "") + "\n#exlinks-options,\n#appchanx-settings,\n#qrtab,\n" + (_conf["Post Form Decorations"] ? "#qr," : "") + "\n#updater,\ninput[type=\"submit\"],\ninput[value=\"Report\"],\nspan[style=\"left: 5px; position: absolute;\"] a {\n background: " + theme["Buttons Background"] + ";\n border: 1px solid " + theme["Buttons Border"] + ";\n}\n.enabled .mascotcontainer {\n background: " + theme["Buttons Background"] + ";\n border-color: " + theme["Buttons Border"] + ";\n}\n#dump,\n#qr-filename-container,\n#appchanx-settings input,\n.captchaimg,\n.dump #dump:not(:hover):not(:focus),\n.qr-preview,\n.selectrice,\nbutton,\ninput,\ntextarea {\n background: " + theme["Input Background"] + ";\n border: 1px solid " + theme["Input Border"] + ";\n color: " + theme["Inputs"] + ";\n}\n#dump:hover,\n#qr-filename-container:hover,\n.selectrice:hover,\n#selectrice li:hover,\n#selectrice li:nth-of-type(2n+1):hover,\ninput:hover,\ntextarea:hover {\n background: " + theme["Hovered Input Background"] + ";\n border-color: " + theme["Hovered Input Border"] + ";\n color: " + theme["Inputs"] + ";\n}\n#dump:active,\n#dump:focus,\n#selectrice li:focus,\n.selectrice:focus,\ninput:focus,\ntextarea:focus,\ntextarea.field:focus {\n background: " + theme["Focused Input Background"] + ";\n border-color: " + theme["Focused Input Border"] + ";\n color: " + theme["Inputs"] + ";\n}\n#mouseover,\n#post-preview,\n#qp .post,\n#xupdater,\n.reply.post {\n border-width: 1px;\n border-style: solid;\n border-color: " + theme["Reply Border"] + ";\n background: " + theme["Reply Background"] + ";\n}\n.thread > .replyContainer > .reply.post {\n border-width: " + (_conf['Post Spacing'] === "0" ? "1px 1px 0 1px" : '1px') + ";\n}\n.exblock.reply,\n.reply.post.highlight,\n.reply.post:target {\n background: " + theme["Highlighted Reply Background"] + ";\n border: 1px solid " + theme["Highlighted Reply Border"] + ";\n}\n#boardNavDesktop,\n.pagelist {\n background: " + theme["Navigation Background"] + ";\n border-style: solid;\n border-color: " + theme["Navigation Border"] + ";\n}\n.thread {\n background: " + theme["Thread Wrapper Background"] + ";\n border: 1px solid " + theme["Thread Wrapper Border"] + ";\n}\n#boardNavDesktopFoot,\n#mascotConf,\n#mascot_hide,\n#menu,\n#selectrice,\n#themeConf,\n#watcher,\n#watcher:hover,\n.submenu,\na[style=\"cursor: pointer; float: right;\"] ~ div[style^=\"width: 100%;\"] > table {\n background: " + theme["Dialog Background"] + ";\n border: 1px solid " + theme["Dialog Border"] + ";\n}\n.deleteform::before,\n.deleteform,\n#qr .warning {\n background: " + theme["Input Background"] + ";\n border-color: " + theme["Input Border"] + ";\n}\n.disabledwarning,\n.warning {\n color: " + theme["Warnings"] + ";\n}\n#navlinks a:first-of-type {\n border-bottom: 11px solid rgb(130,130,130);\n}\n#navlinks a:last-of-type {\n border-top: 11px solid rgb(130,130,130);\n}\n#imgControls .menu-button {\n border-color: rgb(130,130,130);\n color: rgb(130,130,130);\n}\n#charCount {\n color: " + (Style.lightTheme ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.7)") + ";\n}\n.postNum a {\n color: " + theme["Post Numbers"] + ";\n}\n.subject {\n color: " + theme["Subjects"] + " !important;\n}\n.dateTime,\n.post-ago {\n color: " + theme["Timestamps"] + " !important;\n}\n#fs_status a,\n#updater #count:not(.new)::after,\n#showQR,\n#updater,\n.abbr,\n.boxbar,\n.boxcontent,\n.deleteform::before,\n.pages strong,\n.pln,\n.reply,\n.reply.highlight,\n.summary,\nbody,\nbutton,\nspan[style=\"left: 5px; position: absolute;\"] a,\ninput,\ntextarea {\n color: " + theme["Text"] + ";\n}\n#exlinks-options-content > table,\n#appchanx-settings fieldset,\n#selectrice {\n border-bottom: 1px solid " + theme["Reply Border"] + ";\n box-shadow: inset " + theme["Shadow Color"] + " 0 0 5px;\n}\n.quote + .spoiler:hover,\n.quote {\n color: " + theme["Greentext"] + ";\n}\n.forwardlink {\n text-decoration: " + (_conf["Underline Links"] ? "underline" : "none") + ";\n border-bottom: 1px dashed " + theme["Backlinks"] + ";\n}\n.container::before {\n color: " + theme["Timestamps"] + ";\n}\n#menu,\n#post-preview,\n#qp .opContainer,\n#qp .replyContainer,\n.submenu {\n box-shadow: " + (_conf['Quote Shadows'] ? "5px 5px 5px " + theme['Shadow Color'] : "") + ";\n}\n.rice {\n background: " + theme["Checkbox Background"] + ";\n border: 1px solid " + theme["Checkbox Border"] + ";\n}\n.selectrice::before {\n border-left: 1px solid " + theme["Input Border"] + ";\n}\n.selectrice::after {\n border-top: .45em solid " + theme["Inputs"] + ";\n}\n#updater input,\n.bd {\n background: " + theme["Buttons Background"] + ";\n border: 1px solid " + theme["Buttons Border"] + ";\n}\n.pages a,\n#boardNavDesktop a {\n color: " + theme["Navigation Links"] + ";\n}\ninput[type=checkbox]:checked + .rice {\n position: relative;\n}\ninput[type=checkbox]:checked + .rice::after {\n content: \"\";\n display: block;\n width: 5px;\n height: 12px;\n border-radius: 1px;\n border: solid rgb(50, 50, 50);\n border-width: 0 3px 3px 0;\n " + agent + "transform: rotate(45deg);\n position: absolute;\n left: 2px;\n bottom: -1px;\n " + (!Style.lightTheme ? "filter: url(\"data:image/svg+xml,#filters\");" : "") + "\n}\n#addReply,\n#dump,\n.button,\n.entry,\n.replylink,\na {\n color: " + theme["Links"] + ";\n}\n.backlink {\n color: " + theme["Backlinks"] + ";\n}\n.qiQuote,\n.quotelink {\n color: " + theme["Quotelinks"] + ";\n}\n#addReply:hover,\n#dump:hover,\n.entry:hover,\n.sideArrows a:hover,\n.replylink:hover,\n.qiQuote:hover,\n.quotelink:hover,\na .name:hover,\na .postertrip:hover,\na:hover {\n color: " + theme["Hovered Links"] + ";\n}\n#boardNavDesktop a:hover,\n#boardTitle a:hover {\n color: " + theme["Hovered Navigation Links"] + ";\n}\n#boardTitle {\n color: " + theme["Board Title"] + ";\n}\n.name,\n.post-author {\n color: " + theme["Names"] + " !important;\n}\n.post-tripcode,\n.postertrip,\n.trip {\n color: " + theme["Tripcodes"] + " !important;\n}\na .postertrip,\na .name {\n color: " + theme["Emails"] + ";\n}\n.post.reply.qphl,\n.post.op.qphl {\n border-color: " + theme["Backlinked Reply Outline"] + ";\n background: " + theme["Highlighted Reply Background"] + ";\n}\n.inline .post {\n box-shadow: " + (_conf['Quote Shadows'] ? "5px 5px 5px " + theme['Shadow Color'] : "") + ";\n}\n.placeholder,\n#qr input::" + agent + "placeholder,\n#qr textarea::" + agent + "placeholder {\n color: " + (Style.lightTheme ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.2)") + " !important;\n}\n#qr input:" + agent + "placeholder,\n#qr textarea:" + agent + "placeholder,\n.placeholder {\n color: " + (Style.lightTheme ? "rgba(0,0,0,0.3)" : "rgba(255,255,255,0.2)") + " !important;\n}\n#appchanx-settings fieldset,\n.boxcontent dd,\n.selectrice ul {\n border-color: " + (Style.lightTheme ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)") + ";\n}\n#appchanx-settings li,\n#selectrice li:not(:first-of-type) {\n border-top: 1px solid " + (Style.lightTheme ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.025)") + ";\n}\n#navtopright .exlinksOptionsLink::after,\n#appchanOptions,\n.navLinks > a:first-of-type::after,\n#watcher::after,\n#globalMessage::after,\n#boardNavDesktopFoot::after,\na[style=\"cursor: pointer; float: right;\"]::after,\n#imgControls .expand-all-shortcut,\n#imgControls .contract-all-shortcut,\n#catalog::after,\n#fappeTyme {\n background-image: url('" + icons + "');\n" + (!Style.lightTheme ? "filter: url(\"data:image/svg+xml,#filters\");" : "") + "\n}\n" + theme["Custom CSS"]; + css += (Style.lightTheme ? ".prettyprint {\n background-color: #e7e7e7;\n border: 1px solid #dcdcdc;\n}\n.com {\n color: #dd0000;\n}\n.str,\n.atv {\n color: #7fa61b;\n}\n.pun {\n color: #61663a;\n}\n.tag {\n color: #117743;\n}\n.kwd {\n color: #5a6F9e;\n}\n.typ,\n.atn {\n color: #9474bd;\n}\n.lit {\n color: #368c72;\n}\n" : ".prettyprint {\n background-color: rgba(0,0,0,.1);\n border: 1px solid rgba(0,0,0,0.5);\n}\n.tag {\n color: #96562c;\n}\n.pun {\n color: #5b6f2a;\n}\n.com {\n color: #a34443;\n}\n.str,\n.atv {\n color: #8ba446;\n}\n.kwd {\n color: #987d3e;\n}\n.typ,\n.atn {\n color: #897399;\n}\n.lit {\n color: #558773;\n}\n"); + if (_conf["Alternate Post Colors"]) { + css += ".replyContainer:not(.hidden):nth-of-type(2n+1) .post {\n background-image: " + agent + "linear-gradient(" + (Style.lightTheme ? "rgba(0,0,0,0.05), rgba(0,0,0,0.05)" : "rgba(255,255,255,0.02), rgba(255,255,255,0.02)") + ");\n}\n"; + } + if (_conf["Color Reply Headings"]) { + css += ".postInfo {\n background: " + ((replyHeading = new Style.color(Style.colorToHex(theme["Reply Background"]))) ? "rgba(" + (replyHeading.shiftRGB(-12, false)) + ",0.8)" : "rgba(0,0,0,0.1)") + ";\n border-bottom: 1px solid " + theme["Reply Border"] + "\n}\n"; + } + if (_conf["Color File Info"]) { + css += ".file {\n background: " + ((fileHeading = new Style.color(Style.colorToHex(theme["Reply Background"]))) ? "rgba(" + (fileHeading.shiftRGB(-8, false)) + ",0.8)" : "rgba(0,0,0,0.1)") + ";\n border-bottom: 1px solid " + theme["Reply Border"] + "\n}\n"; + } + if (_conf["OP Background"]) { + css += ".op.post {\n background: " + theme["Reply Background"] + ";\n border: 1px solid " + theme["Reply Border"] + ";\n}\n.op.post:target\n.op.post.highlight {\n background: " + theme["Highlighted Reply Background"] + ";\n border: 1px solid " + theme["Highlighted Reply Border"] + ";\n}\n"; + } + if (_conf["4chan SS Sidebar"]) { + background = new Style.color(Style.colorToHex(theme["Reply Background"])); + css += "body::before {\n z-index: -1;\n background: none repeat scroll 0% 0% rgba(" + (background.shiftRGB(-18)) + ", 0.8);\n border-" + Style.sidebarLocation[1] + ": 2px solid " + backgroundC + ";\n box-shadow:\n " + (_conf["Sidebar Location"] === "right" ? "inset" : "") + " 1px 0 0 " + theme["Thread Wrapper Border"] + ",\n " + (_conf["Sidebar Location"] === "left" ? "inset" : "") + " -1px 0 0 " + theme["Thread Wrapper Border"] + ";\n}\n"; + } + css += { + text: "a.useremail[href*=\"sage\"]:last-of-type::" + _conf["Sage Highlight Position"] + ",\na.useremail[href*=\"Sage\"]:last-of-type::" + _conf["Sage Highlight Position"] + ",\na.useremail[href*=\"SAGE\"]:last-of-type::" + _conf["Sage Highlight Position"] + " {\n content: \" (sage) \";\n color: " + theme["Sage"] + ";\n}\n", + image: "a.useremail[href*=\"sage\"]:last-of-type::" + _conf["Sage Highlight Position"] + ",\na.useremail[href*=\"Sage\"]:last-of-type::" + _conf["Sage Highlight Position"] + ",\na.useremail[href*=\"SAGE\"]:last-of-type::" + _conf["Sage Highlight Position"] + " {\n content: url(\"data:image/png;base64,A4AAAAOCAMAAAAolt3jAAABa1BMVEUAAACqrKiCgYIAAAAAAAAAAACHmX5pgl5NUEx/hnx4hXRSUVMiIyKwrbFzn19SbkZ1d3OvtqtpaWhcX1ooMyRsd2aWkZddkEV8vWGcpZl+kHd7jHNdYFuRmI4bHRthaV5WhUFsfGZReUBFZjdJazpGVUBnamYfHB9TeUMzSSpHgS1cY1k1NDUyOC8yWiFywVBoh1lDSEAZHBpucW0ICQgUHhBjfFhCRUA+QTtEQUUBAQFyo1praWspKigWFRZHU0F6j3E9Oz5VWFN0j2hncWONk4sAAABASDxJWkJKTUgAAAAvNC0fJR0DAwMAAAA9QzoWGhQAAAA8YytvrFOJsnlqyT9oqExqtkdrsExpsUsqQx9rpVJDbzBBbi5utk9jiFRuk11iqUR64k5Wf0JIZTpadk5om1BkyjmF1GRNY0FheFdXpjVXhz86XSp2yFJwslR3w1NbxitbtDWW5nNnilhFXTtYqDRwp1dSijiJ7H99AAAAUnRSTlMAJTgNGQml71ypu3cPEN/RDh8HBbOwQN7wVg4CAQZ28vs9EDluXjo58Ge8xwMy0P3+rV8cT73sawEdTv63NAa3rQwo4cUdAl3hWQSWvS8qqYsjEDiCzAAAAIVJREFUeNpFx7GKAQAYAOD/A7GbZVAWZTBZFGQw6LyCF/MIkiTdcOmWSzYbJVE2u1KX0J1v+8QDv/EkyS0yXF/NgeEILiHfyc74mICTQltqYXBeAWU9HGxU09YqqEvAElGjyZYjPyLqitjzHSEiGkrsfMWr0VLe+oy/djGP//YwfbeP8bN3Or0bkqEVblAAAAAASUVORK5CYII=\");\n vertical-align: top;\n margin-" + (_conf["Sage Highlight Position"] === "before" ? "right" : "left") + ": " + (parseInt(_conf['Emoji Spacing'])) + "px;\n}\n", + none: "" + }[_conf["Sage Highlighting"]]; + if (_conf["Announcements"] === "slideout") { + css += "#globalMessage {\n background: " + theme["Dialog Background"] + ";\n border: 1px solid " + theme["Dialog Border"] + ";\n}\n"; + } + if (_conf["Post Form Decorations"]) { + return css += "#qr {\n border-color: " + theme["Buttons Border"] + ";\n background: " + backgroundC + ";\n box-shadow: " + (_conf['Quote Shadows'] ? "5px 5px 5px " + theme['Shadow Color'] : "") + ";\n}\n"; + } }, iconPositions: function() { var align, aligner, css, i, iconOffset, navlinks, notCatalog, notEither, position, _conf; @@ -4609,7 +4637,7 @@ input.className = "colorfield"; colorInput = $.el('input', { className: 'color', - value: "#" + (Style.colorToHex(input.value)) + value: "#" + (Style.colorToHex(input.value) || 'aaaaaa') }); JSColor.bind(colorInput); $.after(input, colorInput); @@ -4639,7 +4667,7 @@ return alert("Syntax error on " + this.name + "."); } if (this.className === "colorfield") { - this.nextSibling.value = "#" + (Style.colorToHex(this.value)); + this.nextSibling.value = "#" + (Style.colorToHex(this.value) || 'aaaaaa'); this.nextSibling.color.importColor(); } return editTheme[this.name] = this.value; @@ -10642,7 +10670,7 @@ } }, toggle: function() { - var el, embed, style, type, url; + var el, embed, items, style, type, url; embed = this.previousElementSibling; if (this.className.contains("embedded")) { @@ -10656,7 +10684,17 @@ this.textContent = '(embed)'; } else { el = (type = Linkify.types[this.getAttribute("data-service")]).el.call(this); - el.style.cssText = (style = type.style) ? style : "border: 0; width: " + ($.get('embedWidth', Config['embedWidth'])) + "px; height: " + ($.get('embedHeight', Config['embedHeight'])) + "px"; + if (style = type.style) { + el.style.cssText = style; + } else { + items = { + 'embedWidth': Config['embedWidth'], + 'embedHeight': Config['embedHeight'] + }; + $.get(items, function(items) { + return el.style.cssText = "border: 0; width: " + item[0] + "px; height: " + item[1] + "px"; + }); + } this.textContent = '(unembed)'; } $.replace(embed, el); diff --git a/css/themeoptions.css b/css/themeoptions.css new file mode 100644 index 000000000..7e0a0ec2d --- /dev/null +++ b/css/themeoptions.css @@ -0,0 +1,140 @@ + + css += (if Style.lightTheme then """ +.prettyprint { + background-color: #e7e7e7; + border: 1px solid #dcdcdc; +} +.com { + color: #dd0000; +} +.str, +.atv { + color: #7fa61b; +} +.pun { + color: #61663a; +} +.tag { + color: #117743; +} +.kwd { + color: #5a6F9e; +} +.typ, +.atn { + color: #9474bd; +} +.lit { + color: #368c72; +}\n +""" else """ +.prettyprint { + background-color: rgba(0,0,0,.1); + border: 1px solid rgba(0,0,0,0.5); +} +.tag { + color: #96562c; +} +.pun { + color: #5b6f2a; +} +.com { + color: #a34443; +} +.str, +.atv { + color: #8ba446; +} +.kwd { + color: #987d3e; +} +.typ, +.atn { + color: #897399; +} +.lit { + color: #558773; +}\n +""") + + if _conf["Alternate Post Colors"] + css += """ +.replyContainer:not(.hidden):nth-of-type(2n+1) .post { + background-image: #{agent}linear-gradient(#{if Style.lightTheme then "rgba(0,0,0,0.05), rgba(0,0,0,0.05)" else "rgba(255,255,255,0.02), rgba(255,255,255,0.02)"}); +}\n +""" + + if _conf["Color Reply Headings"] + css += """ +.postInfo { + background: #{if (replyHeading = new Style.color Style.colorToHex theme["Reply Background"]) then "rgba(" + (replyHeading.shiftRGB -12, false) + ",0.8)" else "rgba(0,0,0,0.1)"}; + border-bottom: 1px solid #{theme["Reply Border"]} +}\n""" + + if _conf["Color File Info"] + css += """ +.file { + background: #{if (fileHeading = new Style.color Style.colorToHex theme["Reply Background"]) then "rgba(" + (fileHeading.shiftRGB -8, false) + ",0.8)" else "rgba(0,0,0,0.1)"}; + border-bottom: 1px solid #{theme["Reply Border"]} +}\n +""" + if _conf["OP Background"] + css += """ +.op.post { + background: #{theme["Reply Background"]}; + border: 1px solid #{theme["Reply Border"]}; +} +.op.post:target +.op.post.highlight { + background: #{theme["Highlighted Reply Background"]}; + border: 1px solid #{theme["Highlighted Reply Border"]}; +}\n +""" + if _conf["4chan SS Sidebar"] + background = new Style.color Style.colorToHex theme["Reply Background"] + css += """ +body::before { + z-index: -1; + background: none repeat scroll 0% 0% rgba(#{background.shiftRGB -18}, 0.8); + border-#{Style.sidebarLocation[1]}: 2px solid #{backgroundC}; + box-shadow: + #{if _conf["Sidebar Location"] is "right" then "inset" else ""} 1px 0 0 #{theme["Thread Wrapper Border"]}, + #{if _conf["Sidebar Location"] is "left" then "inset" else ""} -1px 0 0 #{theme["Thread Wrapper Border"]}; +}\n +""" + + css += { + text: """ +a.useremail[href*="sage"]:last-of-type::#{_conf["Sage Highlight Position"]}, +a.useremail[href*="Sage"]:last-of-type::#{_conf["Sage Highlight Position"]}, +a.useremail[href*="SAGE"]:last-of-type::#{_conf["Sage Highlight Position"]} { + content: " (sage) "; + color: #{theme["Sage"]}; +}\n +""" + image: """ +a.useremail[href*="sage"]:last-of-type::#{_conf["Sage Highlight Position"]}, +a.useremail[href*="Sage"]:last-of-type::#{_conf["Sage Highlight Position"]}, +a.useremail[href*="SAGE"]:last-of-type::#{_conf["Sage Highlight Position"]} { + content: url("data:image/png;base64,A4AAAAOCAMAAAAolt3jAAABa1BMVEUAAACqrKiCgYIAAAAAAAAAAACHmX5pgl5NUEx/hnx4hXRSUVMiIyKwrbFzn19SbkZ1d3OvtqtpaWhcX1ooMyRsd2aWkZddkEV8vWGcpZl+kHd7jHNdYFuRmI4bHRthaV5WhUFsfGZReUBFZjdJazpGVUBnamYfHB9TeUMzSSpHgS1cY1k1NDUyOC8yWiFywVBoh1lDSEAZHBpucW0ICQgUHhBjfFhCRUA+QTtEQUUBAQFyo1praWspKigWFRZHU0F6j3E9Oz5VWFN0j2hncWONk4sAAABASDxJWkJKTUgAAAAvNC0fJR0DAwMAAAA9QzoWGhQAAAA8YytvrFOJsnlqyT9oqExqtkdrsExpsUsqQx9rpVJDbzBBbi5utk9jiFRuk11iqUR64k5Wf0JIZTpadk5om1BkyjmF1GRNY0FheFdXpjVXhz86XSp2yFJwslR3w1NbxitbtDWW5nNnilhFXTtYqDRwp1dSijiJ7H99AAAAUnRSTlMAJTgNGQml71ypu3cPEN/RDh8HBbOwQN7wVg4CAQZ28vs9EDluXjo58Ge8xwMy0P3+rV8cT73sawEdTv63NAa3rQwo4cUdAl3hWQSWvS8qqYsjEDiCzAAAAIVJREFUeNpFx7GKAQAYAOD/A7GbZVAWZTBZFGQw6LyCF/MIkiTdcOmWSzYbJVE2u1KX0J1v+8QDv/EkyS0yXF/NgeEILiHfyc74mICTQltqYXBeAWU9HGxU09YqqEvAElGjyZYjPyLqitjzHSEiGkrsfMWr0VLe+oy/djGP//YwfbeP8bN3Or0bkqEVblAAAAAASUVORK5CYII="); + vertical-align: top; + margin-#{if _conf["Sage Highlight Position"] is "before" then "right" else "left"}: #{parseInt _conf['Emoji Spacing']}px; +}\n +""" + none: "" + }[_conf["Sage Highlighting"]] + if _conf["Announcements"] is "slideout" + css += """ +#globalMessage { + background: #{theme["Dialog Background"]}; + border: 1px solid #{theme["Dialog Border"]}; +}\n +""" + if _conf["Post Form Decorations"] + css += """ +#qr { + border-color: #{theme["Buttons Border"]}; + background: #{backgroundC}; + box-shadow: #{if _conf['Quote Shadows'] then "5px 5px 5px #{theme['Shadow Color']}" else ""}; +}\n +""" \ No newline at end of file diff --git a/src/appchan.coffee b/src/appchan.coffee index 472ae20b5..3ffd16f5a 100644 --- a/src/appchan.coffee +++ b/src/appchan.coffee @@ -108,8 +108,8 @@ Style = #{bg.b} #{-fg.b} 0 0 #{fg.b} " - fgHex = Style.colorToHex text - bgHex = Style.colorToHex background + fgHex = Style.colorToHex(text) or 'ffffff' + bgHex = Style.colorToHex(background) or '000000' string = matrix { r: parseInt(fgHex.substr(0, 2), 16) / 255 g: parseInt(fgHex.substr(2, 2), 16) / 255 @@ -193,13 +193,15 @@ Style = _conf = Conf agent = Style.agent - bgColor = new Style.color Style.colorToHex backgroundC = theme["Background Color"] + bgColor = new Style.color(Style.colorToHex(backgroundC = theme["Background Color"]) or 'aaaaaa') Style.lightTheme = bgColor.isLight() icons = "data:image/png;base64,#{Icons[_conf["Icons"]]}" css = """<%= grunt.file.read('css/theme.css') %>""" + + <%= grunt.file.read('css/themeoptions.css') %> iconPositions: -> css = """<%= grunt.file.read('css/icons.base.css') %>""" @@ -1532,7 +1534,7 @@ ThemeTools = colorInput = $.el 'input', className: 'color' - value: "##{Style.colorToHex input.value}" + value: "##{Style.colorToHex(input.value) or 'aaaaaa'}" JSColor.bind colorInput @@ -1553,7 +1555,7 @@ ThemeTools = return alert "Syntax error on #{@name}." if @className == "colorfield" - @nextSibling.value = "##{Style.colorToHex @value}" + @nextSibling.value = "##{Style.colorToHex(@value) or 'aaaaaa'}" @nextSibling.color.importColor() editTheme[@name] = @value diff --git a/src/features.coffee b/src/features.coffee index 09b7ee00c..45dc1e79f 100644 --- a/src/features.coffee +++ b/src/features.coffee @@ -3931,10 +3931,14 @@ Linkify = el = (type = Linkify.types[@getAttribute("data-service")]).el.call @ # Set style values. - el.style.cssText = if style = type.style - style + if style = type.style + el.style.cssText = style else - "border: 0; width: #{$.get 'embedWidth', Config['embedWidth']}px; height: #{$.get 'embedHeight', Config['embedHeight']}px" + items = + 'embedWidth': Config['embedWidth'] + 'embedHeight': Config['embedHeight'] + $.get items, (items) -> + el.style.cssText = "border: 0; width: #{item[0]}px; height: #{item[1]}px" @textContent = '(unembed)'