diff --git a/appchan-x.user.js b/appchan-x.user.js index ab87413bc..a29af41d7 100644 --- a/appchan-x.user.js +++ b/appchan-x.user.js @@ -3303,7 +3303,7 @@ Style.iconPositions(); if (exLink = $("#navtopright .exlinksOptionsLink", d.body)) { return $.on(exLink, "click", function() { - return setTimeout(Style.rice, 100); + return setTimeout(Rice.nodes, 100); }); } }), 500); @@ -3454,7 +3454,7 @@ hide: 2 }[_conf.Sidebar] || (252 + Style.sidebarOffset.W); Style.replyMargin = _conf["Post Spacing"]; - return css = "/* Cleanup */\n#absbot,\n#delPassword,\n#delform > hr:last-of-type,\n#navbotright,\n#postForm,\n#styleSwitcher,\n.boardBanner > div,\n.mobile,\n.postingMode,\n.riced,\n.sideArrows,\n.stylechanger,\nbody > br,\nbody > div[style^=\"text-align\"],\nbody > hr {\n display: none;\n}\n/* Empties */\n#qr .warning:empty,\n#threadselect:empty {\n display: none;\n}\n/* File Name Trunctuate */\n.fileText:hover .fntrunc,\n.fileText:not(:hover) .fnfull {\n display: none;\n}\n/* Unnecessary */\n#qp input,\n#qp .rice,\n.inline .rice {\n display: none !important;\n}\n/* Hidden Content */\n.forwarded,\n.hidden_thread ~ div,\n.hidden_thread ~ a,\n[hidden] {\n display: none !important;\n}\n/* Hidden UI */\n#catalog,\n#navlinks,\n#navtopright,\n.cataloglink,\n.navLinks,\na[style=\"cursor: pointer; float: right;\"] {\n position: fixed;\n top: 100%;\n left: 100%;\n}\n/* Hide last horizontal rule, keep clear functionality. */\n.board > hr:last-of-type {\n visibility: hidden;\n}\n/* Fappe Tyme */\n.fappeTyme .thread > .noFile {\n display: none;\n}\n/* Defaults */\na {\n text-decoration: " + (_conf["Underline Links"] ? "underline" : "none") + ";\n outline: none;\n}\nbody,\nhtml {\n min-height: 100%;\n " + Style.sizing + ": border-box;\n}\nbody {\n outline: none;\n font-size: " + (parseInt(_conf["Font Size"], 10)) + "px;\n font-family: " + _conf["Font"] + ";\n min-height: 100%;\n margin-top: 0;\n margin-bottom: 0;\n margin-" + Style.sidebarLocation[0] + ": " + (/^boards\.4chan\.org$/.test(location.hostname) ? Style.sidebar : '2') + "px;\n margin-" + Style.sidebarLocation[1] + ": 2px;\n padding: 0 " + (parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]) + "px 0 " + (parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"]) + "px;\n}\n" + (_conf["4chan SS Sidebar"] && /^boards\.4chan\.org$/.test(location.hostname) ? "body::before { content: ''; position: fixed; top: 0; bottom: 0; " + Style.sidebarLocation[0] + ": 0; width: " + (_conf["Sidebar"] === 'large' ? 305 : _conf['Sidebar'] === 'normal' ? 254 : _conf['Sidebar'] === 'minimal' ? 27 : 0) + "px; z-index: 1; " + Style.sizing + ": border-box; display: block;}body { padding-" + Style.sidebarLocation[0] + ": 2px;}" : "") + "\nbutton,\ninput,\ntextarea {\n font-size: " + (parseInt(_conf["Font Size"], 10)) + "px;\n font-family: " + _conf["Font"] + ";\n}\nhr {\n clear: both;\n border: 0;\n padding: 0;\n margin: 0 0 1px;\n " + (_conf['Hide Horizontal Rules'] ? 'visibility: hidden;' : '') + "\n}\n.center {\n text-align: center;\n}\n.disabled {\n opacity: 0.5;\n}\n/* Symbols */\n.dropmarker {\n vertical-align: middle;\n display: inline-block;\n margin: 2px 2px 3px;\n border-top: .5em solid;\n border-right: .3em solid transparent;\n border-left: .3em solid transparent;\n}\n/* Thread / Reply Nav */\n#navlinks a {\n position: fixed;\n z-index: 12;\n opacity: 0.5;\n display: inline-block;\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n margin: 1.5px;\n}\n/* Navigation */\n#boardNavDesktop {\n z-index: 6;\n border-width: 1px;\n" + { + return css = "/* Cleanup */\n#absbot,\n#delPassword,\n#delform > hr:last-of-type,\n#navbotright,\n#postForm,\n#styleSwitcher,\n.boardBanner > div,\n.mobile,\n.postingMode,\n.riced,\n.sideArrows,\n.stylechanger,\nbody > br,\nbody > div[style^=\"text-align\"],\nbody > hr {\n display: none;\n}\n/* Empties */\n#qr .warning:empty,\n#qr-thread-select:empty {\n display: none;\n}\n/* File Name Trunctuate */\n.fileText:hover .fntrunc,\n.fileText:not(:hover) .fnfull {\n display: none;\n}\n/* Unnecessary */\n#qp input,\n#qp .rice,\n.inline .rice {\n display: none !important;\n}\n/* Hidden Content */\n.forwarded,\n.hidden_thread ~ div,\n.hidden_thread ~ a,\n[hidden] {\n display: none !important;\n}\n/* Hidden UI */\n#catalog,\n#navlinks,\n#navtopright,\n.cataloglink,\n.navLinks,\na[style=\"cursor: pointer; float: right;\"] {\n position: fixed;\n top: 100%;\n left: 100%;\n}\n/* Hide last horizontal rule, keep clear functionality. */\n.board > hr:last-of-type {\n visibility: hidden;\n}\n/* Fappe Tyme */\n.fappeTyme .thread > .noFile {\n display: none;\n}\n/* Defaults */\na {\n text-decoration: " + (_conf["Underline Links"] ? "underline" : "none") + ";\n outline: none;\n}\nbody,\nhtml {\n min-height: 100%;\n " + Style.sizing + ": border-box;\n}\nbody {\n outline: none;\n font-size: " + (parseInt(_conf["Font Size"], 10)) + "px;\n font-family: " + _conf["Font"] + ";\n min-height: 100%;\n margin-top: 0;\n margin-bottom: 0;\n margin-" + Style.sidebarLocation[0] + ": " + (/^boards\.4chan\.org$/.test(location.hostname) ? Style.sidebar : '2') + "px;\n margin-" + Style.sidebarLocation[1] + ": 2px;\n padding: 0 " + (parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]) + "px 0 " + (parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"]) + "px;\n}\n" + (_conf["4chan SS Sidebar"] && /^boards\.4chan\.org$/.test(location.hostname) ? "body::before { content: ''; position: fixed; top: 0; bottom: 0; " + Style.sidebarLocation[0] + ": 0; width: " + (_conf["Sidebar"] === 'large' ? 305 : _conf['Sidebar'] === 'normal' ? 254 : _conf['Sidebar'] === 'minimal' ? 27 : 0) + "px; z-index: 1; " + Style.sizing + ": border-box; display: block;}body { padding-" + Style.sidebarLocation[0] + ": 2px;}" : "") + "\nbutton,\ninput,\ntextarea {\n font-size: " + (parseInt(_conf["Font Size"], 10)) + "px;\n font-family: " + _conf["Font"] + ";\n}\nhr {\n clear: both;\n border: 0;\n padding: 0;\n margin: 0 0 1px;\n " + (_conf['Hide Horizontal Rules'] ? 'visibility: hidden;' : '') + "\n}\n.center {\n text-align: center;\n}\n.disabled {\n opacity: 0.5;\n}\n/* Symbols */\n.dropmarker {\n vertical-align: middle;\n display: inline-block;\n margin: 2px 2px 3px;\n border-top: .5em solid;\n border-right: .3em solid transparent;\n border-left: .3em solid transparent;\n}\n/* Thread / Reply Nav */\n#navlinks a {\n position: fixed;\n z-index: 12;\n opacity: 0.5;\n display: inline-block;\n border-right: 6px solid transparent;\n border-left: 6px solid transparent;\n margin: 1.5px;\n}\n/* Navigation */\n#boardNavDesktop {\n z-index: 6;\n border-width: 1px;\n" + { "sticky top": " position: fixed; top: 0; border-top-width: 0; " + (_conf["Rounded Edges"] ? "border-radius: 0 0 3px 3px;" : ""), "sticky bottom": " position: fixed; bottom: 0; border-bottom-width: 0; " + (_conf["Rounded Edges"] ? "border-radius: 3px 3px 0 0;" : ""), "top": " position: absolute; top: 0; border-top-width: 0; " + (_conf["Rounded Edges"] ? "border-radius: 0 0 3px 3px;" : ""), @@ -3489,9 +3489,9 @@ }[_conf["Backlinks Position"]] + "\n/* Code */\n.prettyprint {\n " + Style.sizing + ": border-box;\n font-family: monospace;\n display: inline-block;\n margin-right: auto;\n white-space: pre-wrap;\n border-radius: 2px;\n overflow-x: auto;\n padding: 3px;\n max-width: 100%;\n}\n/* Menu */\n.entry {\n border-bottom: 1px solid rgba(0,0,0,.25);\n cursor: pointer;\n display: block;\n outline: none;\n padding: 3px 7px;\n position: relative;\n text-decoration: none;\n white-space: nowrap;\n}\n.entry:last-child {\n border-bottom: 0;\n}\n.has-submenu::after {\n content: \"\";\n border-" + position + ": .5em solid;\n border-top: .3em solid transparent;\n border-bottom: .3em solid transparent;\n display: inline-block;\n margin: .3em;\n position: absolute;\n right: 3px;\n}\n.submenu {\n display: none;\n position: absolute;\n " + position + ": 100%;\n top: -1px;\n}\n.focused .submenu {\n display: block;\n}\n/* Stubs */\n" + (_conf['Fit Width Replies'] ? ".stub { float: right; clear: both;}" : "") + "\n/* Emoji */\n" + (_conf["Emoji"] !== "disable" ? Emoji.css(_conf["Emoji Position"]) : "") + "\n/* Element Replacing */\n/* Checkboxes */\n.rice {\n cursor: pointer;\n width: 9px;\n height: 9px;\n margin: 2px 3px 3px;\n display: inline-block;\n vertical-align: bottom;\n " + (_conf["Rounded Edges"] ? "border-radius: 2px;" : "") + "\n " + (_conf["Circle Checkboxes"] ? "border-radius: 6px;" : "") + "\n}\ninput:checked + .rice {\n background-attachment: scroll;\n background-repeat: no-repeat;\n background-position: bottom right;\n}\n/* Selects */\n.selectrice {\n position: relative;\n cursor: default;\n overflow: hidden;\n text-align: left;\n}\n.selectrice::after {\n content: \"\";\n border-right: .25em solid transparent;\n border-left: .25em solid transparent;\n position: absolute;\n right: .4em;\n top: .5em;\n}\n.selectrice::before {\n content: \"\";\n height: 1.6em;\n position: absolute;\n right: 1.3em;\n top: 0;\n}\n/* Select Dropdown */\n.selectrice ul {\n padding: 0;\n position: fixed;\n max-height: 120px;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 32;\n}\n/* Post Form */\n#qr {\n z-index: 20;\n position: fixed;\n padding: 1px;\n border: 1px solid transparent;\n min-width: " + width + "px;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px 3px 0 0;" : "") + "\n}\n#qrtab {\n " + (_conf["Rounded Edges"] ? "border-radius: 3px 3px 0 0;" : "") + "\n}\n\n" + ({ "fixed": "#qr { top: auto !important; bottom: 1.7em !important; " + Style.sidebarLocation[0] + ": 0 !important; " + Style.sidebarLocation[1] + ": auto !important;}", "slideout": "#qr { top: auto !important; bottom: 1.7em !important; " + Style.sidebarLocation[0] + ": -" + (233 + Style.sidebarOffset.W) + "px !important; " + Style.sidebarLocation[1] + ": auto !important;}#qr:hover,#qr.focus,#qr.dump { " + agent + "transform: translate(" + (xOffset + (233 + Style.sidebarOffset.W)) + "px);}", - "tabbed slideout": "#qr { top: auto !important; bottom: 1.7em !important; " + Style.sidebarLocation[0] + ": -" + (252 + Style.sidebarOffset.W) + "px !important; " + Style.sidebarLocation[1] + ": auto !important;}#qr:hover,#qr.focus,#qr.dump { " + agent + "transform: translate(" + (xOffset + (252 + Style.sidebarOffset.W)) + "px);}#qr #qrtab { " + agent + "transform: rotate(" + (Style.sidebarLocation[0] === "left" ? "" : "-") + "90deg); " + agent + "transform-origin: bottom " + Style.sidebarLocation[0] + "; position: absolute; top: 0; " + Style.sidebarLocation[0] + ": 100%; width: 110px; text-align: center; border-width: 1px 1px 0 1px; cursor: default;}#qr:hover #qrtab,#qr.focus #qrtab,#qr.dump #qrtab { opacity: 0; " + Style.sidebarLocation[0] + ": " + (252 + Style.sidebarOffset.W) + "px;}#qrtab input,#qrtab .rice,#qrtab span { display: none;}", + "tabbed slideout": "#qr { top: auto !important; bottom: 1.7em !important; " + Style.sidebarLocation[0] + ": -" + (252 + Style.sidebarOffset.W) + "px !important; " + Style.sidebarLocation[1] + ": auto !important;}#qr:hover,#qr.focus,#qr.dump { " + agent + "transform: translate(" + (xOffset + (252 + Style.sidebarOffset.W)) + "px);}#qrtab { " + agent + "transform: rotate(" + (Style.sidebarLocation[0] === "left" ? "" : "-") + "90deg); " + agent + "transform-origin: bottom " + Style.sidebarLocation[0] + "; position: absolute; top: 0; " + Style.sidebarLocation[0] + ": 100%; width: 110px; text-align: center; border-width: 1px 1px 0 1px; cursor: default;}#qr:hover #qrtab,#qr.focus #qrtab,#qr.dump #qrtab { opacity: 0; " + Style.sidebarLocation[0] + ": " + (252 + Style.sidebarOffset.W) + "px;}#qrtab input,#qrtab .close,#qrtab .rice,#qrtab span { display: none;}", "transparent fade": "#qr { overflow: visible; top: auto !important; bottom: 1.7em !important; " + Style.sidebarLocation[0] + ": 2px !important; " + Style.sidebarLocation[1] + ": auto !important; opacity: 0.2; " + agent + "transition: opacity .3s ease-in-out 1s;}#qr:hover,#qr.focus,#qr.dump { opacity: 1; " + agent + "transition: opacity .3s linear;}" - }[_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.userInfo {\n width: 248px;\n max-width: 100%;\n min-width: 100%;\n}\n#dump {\n width: 10%;\n margin: 0;\n}\n\n" + (_conf['Compact Post Form Inputs'] ? ".userInfo 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;}" : ".userInfo input.field { width: 100%;}.userInfo 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#file {\n " + Style.sizing + ": border-box;\n display: inline-block;\n width: 100px;\n min-width: 74.6%;\n max-width: 74.6%;\n margin-right: 0.4%;\n overflow: hidden;\n}\n/* Thread Select / Spoiler Label */\n#threadselect {\n vertical-align: bottom;\n width: 49%;\n display: inline-block;\n}\n#spoilerLabel {\n vertical-align: bottom;\n width: 49%;\n display: inline-block;\n text-align: right;\n}\n#threadselect:empty + #spoilerLabel {\n display: inline-block;\n width: 100%;\n}\n/* Dumping UI */\n.dump #replies {\n display: block;\n}\n#replies {\n display: none;\n height: 90px;\n position: relative;\n}\n#replies > div {\n counter-reset: thumbnails;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n overflow: hidden;\n position: absolute;\n white-space: pre;\n}\n#replies > div:hover {\n overflow-x: auto;\n}\n.thumbnail {\n " + Style.sizing + ": border-box;\n cursor: move;\n border: 1px solid transparent;\n background: rgba(0,0,0,.2) 50% 20% cover;\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.thumbnail:hover,\n.thumbnail:focus {\n opacity: .9;\n}\n.thumbnail::before {\n counter-increment: thumbnails;\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.thumbnail#selected {\n opacity: 1;\n}\n.thumbnail.drag {\n box-shadow: 0 0 10px rgba(0,0,0,.5);\n}\n.thumbnail.over {\n border-color: #fff;\n}\n.thumbnail > 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.thumbnail > 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.thumbnail > label > input {\n margin: 0;\n}\n#addReply {\n cursor: pointer;\n font-size: 3.5em;\n line-height: 90px;\n margin: 0 0.5em;\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: absolute;\n padding: .3em;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px;" : "") + "\n}\n#appchanx-settings h3,\n.keybinds_tab,\n.mascots_tab,\n.main_tab,\n.style_tab {\n text-align: center;\n}\n.keybinds_tab table,\n.main_tab ul,\n.style_tab ul {\n text-align: left;\n}\n#appchanx-settings ul {\n padding: 0;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px;" : "") + "\n}\n#appchanx-settings .selectrice ul {\n border-radius: 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 label {\n cursor: pointer;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px 3px 0 0;" : "") + "\n}\n.sections-list label {\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.main_tab li,\n.style_tab li,\n.rice_tab li {\n overflow: visible;\n padding: 0 5px 0 7px;\n list-style-type: none;\n}\n#appchanx-settings tr:nth-of-type(2n+1),\n.main_tab li:nth-of-type(2n+1),\n.rice_tab li:nth-of-type(2n+1),\n.style_tab li:nth-of-type(2n+1),\n.keybinds_tab li: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.optionlabel {\n padding-left: 18px;\n}\n.rice + .optionlabel {\n padding-left: 0;\n}\n#appchanx-settings .style_tab ul,\n#appchanx-settings .main_tab ul {\n vertical-align: top;\n " + (_conf["Single Column Mode"] ? "margin: 0 auto 6px;" : "margin: 0 3px 6px;\n display: inline-block;") + "\n}\n.main_tab li,\n.styleoption {\n text-align: left;\n}\n.style_tab .suboptions ul {\n width: 370px;\n}\n.main_tab ul {\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.style_tab .suboptions {\n bottom: 0;\n}\n#appchanx-settingsContent textarea {\n font-family: monospace;\n min-height: 350px;\n resize: vertical;\n width: 100%;\n}\n/* Hover Functionality */\n#mouseover {\n z-index: 32;\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.theme_tab 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.theme_tab .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}"; + }[_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}\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: absolute;\n padding: .3em;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px;" : "") + "\n}\n#appchanx-settings h3,\n.keybinds_tab,\n.mascots_tab,\n.main_tab,\n.style_tab {\n text-align: center;\n}\n.keybinds_tab table,\n.main_tab ul,\n.style_tab ul {\n text-align: left;\n}\n#appchanx-settings ul {\n padding: 0;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px;" : "") + "\n}\n#appchanx-settings .selectrice ul {\n border-radius: 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 label {\n cursor: pointer;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px 3px 0 0;" : "") + "\n}\n.sections-list label {\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.main_tab li,\n.style_tab li,\n.rice_tab li {\n overflow: visible;\n padding: 0 5px 0 7px;\n list-style-type: none;\n}\n#appchanx-settings tr:nth-of-type(2n+1),\n.main_tab li:nth-of-type(2n+1),\n.rice_tab li:nth-of-type(2n+1),\n.style_tab li:nth-of-type(2n+1),\n.keybinds_tab li: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.optionlabel {\n padding-left: 18px;\n}\n.rice + .optionlabel {\n padding-left: 0;\n}\n#appchanx-settings .style_tab ul,\n#appchanx-settings .main_tab ul {\n vertical-align: top;\n " + (_conf["Single Column Mode"] ? "margin: 0 auto 6px;" : "margin: 0 3px 6px;\n display: inline-block;") + "\n}\n.main_tab li,\n.styleoption {\n text-align: left;\n}\n.style_tab .suboptions ul {\n width: 370px;\n}\n.main_tab ul {\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.style_tab .suboptions {\n bottom: 0;\n}\n#appchanx-settingsContent textarea {\n font-family: monospace;\n min-height: 350px;\n resize: vertical;\n width: 100%;\n}\n/* Hover Functionality */\n#mouseover {\n z-index: 32;\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.theme_tab 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.theme_tab .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; @@ -3501,7 +3501,7 @@ bgColor = new Style.color(Style.colorToHex(backgroundC = theme["Background Color"])); Style.lightTheme = bgColor.isLight(); icons = Icons.header.png + Icons.themes[_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}\n::" + agent + "selection {\n background: " + theme["Text"] + ";\n color: " + backgroundC + ";\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#appchanx-settingsContent,\n#exlinks-options-content,\n#mascotcontent,\n#themecontent {\n background: " + backgroundC + ";\n border: 1px solid " + theme["Reply Border"] + ";\n padding: 5px;\n}\n#selected_tab {\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#stats,\n#updater:not(:hover) .move {\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:hover,\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#file,\n#appchanx-settings input,\n.captchaimg,\n.dump #dump:not(:hover):not(:focus),\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#file:hover,\n#appchanx-settings .selectrice li:nth-of-type(2n+1):hover,\n.selectrice:hover,\n.selectrice li: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:focus,\n.selectrice li: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(" + (Style.lightTheme ? "130,130,130" : "152,152,152") + ");\n}\n#navlinks a:last-of-type {\n border-top: 11px solid rgb(" + (Style.lightTheme ? "130,130,130" : "152,152,152") + ");\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#imgControls label::after,\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 ul,\n.selectrice ul {\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 background: " + theme["Checkbox Checked Background"] + ";\n background-image: url(" + (Icons.header.png + (Style.lightTheme ? "AkAAAAJCAMAAADXT/YiAAAAWlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACLSV5RAAAAHXRSTlMAgVHwkF11LdsM9vm9n5x+ye0qMOfk/GzqSMC6EsZzJYoAAABBSURBVHheLcZHEoAwEMRArcHknNP8/5u4MLqo+SszcBMwFyt57cFXamjV0UtyDBotIIVFiiAJ33aijhOA67bnwwuZdAPNxckOUgAAAABJRU5ErkJggg==" : "AkAAAAJCAMAAADXT/YiAAAAWlBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9jZLFEAAAAHXRSTlMAgVHwkF11LdsM9vm9n5x+ye0qMOfk/GzqSMC6EsZzJYoAAABBSURBVHheLcZHEoAwEMRArcHknNP8/5u4MLqo+SszcBMwFyt57cFXamjV0UtyDBotIIVFiiAJ33aijhOA67bnwwuZdAPNxckOUgAAAABJRU5ErkJggg==")) + ");\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 ul,\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 label:first-of-type::after,\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"]; + 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}\n::" + agent + "selection {\n background: " + theme["Text"] + ";\n color: " + backgroundC + ";\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#appchanx-settingsContent,\n#exlinks-options-content,\n#mascotcontent,\n#themecontent {\n background: " + backgroundC + ";\n border: 1px solid " + theme["Reply Border"] + ";\n padding: 5px;\n}\n#selected_tab {\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#stats,\n#updater:not(:hover) .move {\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:hover,\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#appchanx-settings .selectrice li:nth-of-type(2n+1):hover,\n.selectrice:hover,\n.selectrice li: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:focus,\n.selectrice li: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(" + (Style.lightTheme ? "130,130,130" : "152,152,152") + ");\n}\n#navlinks a:last-of-type {\n border-top: 11px solid rgb(" + (Style.lightTheme ? "130,130,130" : "152,152,152") + ");\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#imgControls label::after,\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 ul,\n.selectrice ul {\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 background: " + theme["Checkbox Checked Background"] + ";\n background-image: url(" + (Icons.header.png + (Style.lightTheme ? "AkAAAAJCAMAAADXT/YiAAAAWlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACLSV5RAAAAHXRSTlMAgVHwkF11LdsM9vm9n5x+ye0qMOfk/GzqSMC6EsZzJYoAAABBSURBVHheLcZHEoAwEMRArcHknNP8/5u4MLqo+SszcBMwFyt57cFXamjV0UtyDBotIIVFiiAJ33aijhOA67bnwwuZdAPNxckOUgAAAABJRU5ErkJggg==" : "AkAAAAJCAMAAADXT/YiAAAAWlBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9jZLFEAAAAHXRSTlMAgVHwkF11LdsM9vm9n5x+ye0qMOfk/GzqSMC6EsZzJYoAAABBSURBVHheLcZHEoAwEMRArcHknNP8/5u4MLqo+SszcBMwFyt57cFXamjV0UtyDBotIIVFiiAJ33aijhOA67bnwwuZdAPNxckOUgAAAABJRU5ErkJggg==")) + ");\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 ul,\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 label:first-of-type::after,\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"]; }, iconPositions: function() { var align, aligner, css, i, iconOffset, navlinks, notCatalog, notEither, position, _conf; @@ -3798,6 +3798,7 @@ nodes: function(source) { var checkboxes, checkrice, input, selectrice, selects, _i, _j, _len, _len1; + source || (source = d.body); checkboxes = $$('[type=checkbox]:not(.riced)', source); checkrice = Rice.checkbox; for (_i = 0, _len = checkboxes.length; _i < _len; _i++) { @@ -5109,12 +5110,6 @@ $.get('previousversion', null, function(item) { var changelog, curr, el, prev, previous; - el = $.el('span'); - el.style.flex = 'test'; - if (el.style.flex === 'test') { - el.innerHTML = "Firefox is not correctly set up and some appchan x features will be displayed incorrectly.
\nFollow the instructions of the install guide to fix it."; - new Notification('warning', el, 30); - } if (previous = item['previousversion']) { if (previous === g.VERSION) { return; @@ -9768,6 +9763,7 @@ $.on(d, 'QRPostSuccessful', ThreadUpdater.cb.post); $.on(d, 'visibilitychange', ThreadUpdater.cb.visibility); ThreadUpdater.cb.online(); + Rice.nodes(ThreadUpdater.dialog); return $.add(d.body, ThreadUpdater.dialog); }, /* @@ -10996,7 +10992,7 @@ if (this !== QR.selected) { return; } - _ref = ['name', 'email', 'sub', 'com', 'fileButton', 'spoiler']; + _ref = ['name', 'email', 'sub', 'com', 'spoiler']; for (_i = 0, _len = _ref.length; _i < _len; _i++) { name = _ref[_i]; QR.nodes[name].disabled = lock; @@ -11413,14 +11409,15 @@ } }, dialog: function() { - var dialog, mimeTypes, name, node, nodes, thread, _i, _j, _len, _len1, _ref, _ref1; + var dialog, mimeTypes, name, nodes, thread, _i, _len, _ref; - dialog = UI.dialog('qr', 'top:0;right:0;', "
\n \n \n ×\n
\n
\n
\n \n \n \n \n
\n
\n \n \n
\n
\n
\n +\n
\n
\n \n \n \n No selected file\n \n \n ×\n \n
\n \n
\n".replace(/>\s+<')); + dialog = UI.dialog('qr', 'top:0;right:0;', "
\n Post Form\n \n ×\n
\n
\n
\n \n \n \n \n
\n
\n \n \n
\n
\n
\n +\n
\n
\n \n No selected file\n \n ×\n \n \n
\n \n
\n \n
\n \n
".replace(/>\s+<')); QR.nodes = nodes = { el: dialog, move: $('.move', dialog), autohide: $('#autohide', dialog), thread: $('select', dialog), + threadPar: $('#qr-thread-select', dialog), close: $('.close', dialog), form: $('form', dialog), dumpButton: $('#dump-button', dialog), @@ -11432,10 +11429,10 @@ addPost: $('#add-post', dialog), charCount: $('#char-count', dialog), fileSubmit: $('#file-n-submit', dialog), - fileButton: $('#qr-file-button', dialog), filename: $('#qr-filename', dialog), fileRM: $('#qr-filerm', dialog), spoiler: $('#qr-file-spoiler', dialog), + spoilerPar: $('#qr-spoiler-label', dialog), status: $('[type=submit]', dialog), fileInput: $('[type=file]', dialog) }; @@ -11458,7 +11455,7 @@ nodes.fileInput.accept = "text/*, " + mimeTypes; } QR.spoiler = !!$('input[name=spoiler]'); - nodes.spoiler.hidden = !QR.spoiler; + nodes.spoilerPar.hidden = !QR.spoiler; if (g.BOARD.ID === 'f') { nodes.flashTag = $.el('select', { name: 'filetag', @@ -11472,13 +11469,9 @@ textContent: "Thread No." + thread })); } - $.after(nodes.autohide, nodes.thread); + $.add(nodes.threadPar, nodes.thread); QR.resetThreadSelector(); - _ref = [nodes.fileButton, nodes.filename.parentNode]; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - node = _ref[_i]; - $.on(node, 'click', QR.openFileInput); - } + $.on(nodes.filename.parentNode, 'click', QR.openFileInput); $.on(nodes.autohide, 'change', QR.toggleHide); $.on(nodes.close, 'click', QR.close); $.on(nodes.dumpButton, 'click', function() { @@ -11488,7 +11481,8 @@ return new QR.post(true); }); $.on(nodes.form, 'submit', QR.submit); - $.on(nodes.fileRM, 'click', function() { + $.on(nodes.fileRM, 'click', function(e) { + e.stopPropagation(); return QR.selected.rmFile(); }); $.on(nodes.spoiler, 'change', function() { @@ -11496,9 +11490,9 @@ }); $.on(nodes.fileInput, 'change', QR.fileInput); new QR.post(true); - _ref1 = ['name', 'email', 'sub', 'com']; - for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) { - name = _ref1[_j]; + _ref = ['name', 'email', 'sub', 'com']; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + name = _ref[_i]; $.on(nodes[name], 'input', function() { return QR.selected.save(this); }); @@ -11506,6 +11500,7 @@ QR.status(); QR.cooldown.init(); QR.captcha.init(); + Rice.nodes(dialog); $.add(d.body, dialog); return $.event('QRDialogCreation', null, dialog); }, diff --git a/css/layout.css b/css/layout.css index 0dc6ab9dd..e583a8e6e 100644 --- a/css/layout.css +++ b/css/layout.css @@ -18,7 +18,7 @@ body > hr { } /* Empties */ #qr .warning:empty, -#threadselect:empty { +#qr-thread-select:empty { display: none; } /* File Name Trunctuate */ @@ -1015,7 +1015,7 @@ input:checked + .rice { #qr.dump { #{agent}transform: translate(#{xOffset + (252 + Style.sidebarOffset.W)}px); } -#qr #qrtab { +#qrtab { #{agent}transform: rotate(#{(if Style.sidebarLocation[0] is "left" then "" else "-")}90deg); #{agent}transform-origin: bottom #{Style.sidebarLocation[0]}; position: absolute; @@ -1033,6 +1033,7 @@ input:checked + .rice { #{Style.sidebarLocation[0]}: #{252 + Style.sidebarOffset.W}px; } #qrtab input, +#qrtab .close, #qrtab .rice, #qrtab span { display: none; @@ -1096,19 +1097,19 @@ if _conf['Post Form Style'] isnt 'float' and _conf["Post Form Slideout Transitio border-width: 1px; border-style: solid; } -.userInfo { +.persona { width: 248px; max-width: 100%; min-width: 100%; } -#dump { +#dump-button { width: 10%; margin: 0; } #{ if _conf['Compact Post Form Inputs'] then " -.userInfo input.field { +.persona input.field { width: 29.6%; margin: 0 0 0 0.4%; } @@ -1122,10 +1123,10 @@ if _conf['Compact Post Form Inputs'] then " " else " -.userInfo input.field { +.persona input.field { width: 100%; } -.userInfo input.field[name='name'] { +.persona input.field[name='name'] { width: 89.6%; margin: 0 0 0 0.4%; } @@ -1195,58 +1196,66 @@ input:not([type=radio]) { top: auto; } /* Fake File Input */ -#file { +#qr-filename, +.has-file #qr-no-file { + display: none; +} +#qr-no-file, +.has-file #qr-filename { + display: block; +} +#qr-filename-container { #{Style.sizing}: border-box; display: inline-block; + position: relative; width: 100px; min-width: 74.6%; max-width: 74.6%; margin-right: 0.4%; overflow: hidden; + padding: 2px 1px 0; +} +#qr-filerm { + position: absolute; + right: 3px; + top: 2px; } /* Thread Select / Spoiler Label */ -#threadselect { +#qr-thread-select { vertical-align: bottom; width: 49%; display: inline-block; } -#spoilerLabel { +#qr-spoiler-label { vertical-align: bottom; width: 49%; display: inline-block; text-align: right; } -#threadselect:empty + #spoilerLabel { - display: inline-block; - width: 100%; -} /* Dumping UI */ -.dump #replies { +.dump #dump-list-container { display: block; } -#replies { +#dump-list-container { display: none; - height: 90px; position: relative; + overflow-y: hidden; } -#replies > div { - counter-reset: thumbnails; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: hidden; - position: absolute; +#dump-list { + overflow-x: auto; + overflow-y: hidden; white-space: pre; + width: 248px; + max-width: 100%; + min-width: 100%; } -#replies > div:hover { +#dump-list:hover { overflow-x: auto; } -.thumbnail { +.qr-preview { #{Style.sizing}: border-box; + counter-increment: thumbnails; cursor: move; - border: 1px solid transparent; - background: rgba(0,0,0,.2) 50% 20% cover; display: inline-block; height: 90px; width: 90px; @@ -1258,12 +1267,11 @@ input:not([type=radio]) { #{agent}transition: opacity .25s ease-in-out; vertical-align: top; } -.thumbnail:hover, -.thumbnail:focus { +.qr-preview:hover, +.qr-preview:focus { opacity: .9; } -.thumbnail::before { - counter-increment: thumbnails; +.qr-preview::before { content: counter(thumbnails); color: #fff; position: absolute; @@ -1271,16 +1279,16 @@ input:not([type=radio]) { right: 3px; text-shadow: 0 0 3px #000, 0 0 8px #000; } -.thumbnail#selected { +.qr-preview#selected { opacity: 1; } -.thumbnail.drag { +.qr-preview.drag { box-shadow: 0 0 10px rgba(0,0,0,.5); } -.thumbnail.over { +.qr-preview.over { border-color: #fff; } -.thumbnail > span { +.qr-preview > span { color: #fff; } .remove { @@ -1295,21 +1303,23 @@ a:only-of-type > .remove { .remove:hover::after { content: " Remove"; } -.thumbnail > label { +.qr-preview > label { background: rgba(0,0,0,.5); color: #fff; right: 0; bottom: 0; left: 0; position: absolute; text-align: center; } -.thumbnail > label > input { +.qr-preview > label > input { margin: 0; } -#addReply { +#add-post { cursor: pointer; - font-size: 3.5em; - line-height: 90px; - margin: 0 0.5em; + font-size: 2em; + position: absolute; + top: 50%; + right: 10px; + #{agent}transform: translateY(-50%); } /* Ads */ .topad img, diff --git a/css/style.css b/css/style.css deleted file mode 100644 index f807975bc..000000000 --- a/css/style.css +++ /dev/null @@ -1,813 +0,0 @@ -/* General */ -.dialog { - box-shadow: 0 1px 2px rgba(0, 0, 0, .15); - border: 1px solid; - display: block; - padding: 0; -} -.field { - border: 1px solid #CCC; - -moz-box-sizing: border-box; - box-sizing: border-box; - color: #333; - font: 13px sans-serif; - margin: 0; - padding: 2px 4px 3px; - outline: none; - transition: color .25s, border-color .25s, -webkit-flex .25s; - transition: color .25s, border-color .25s, flex .25s; -} -.field::-moz-placeholder, -.field:hover::-moz-placeholder { - color: #AAA !important; -} -.field:hover { - border-color: #999; -} -.field:hover, .field:focus { - color: #000; -} -.field[disabled] { - background-color: #F2F2F2; - color: #888; -} -.move { - cursor: move; -} -label, .favicon { - cursor: pointer; -} -a[href="javascript:;"] { - text-decoration: none; -} -.warning { - color: red; -} - -/* 4chan style fixes */ -.opContainer, .op { - display: block !important; -} -.post { - overflow: visible !important; -} -[hidden] { - display: none !important; -} - -/* fixed, z-index */ -#overlay, -#qp, #ihover, -#updater, #thread-stats, -#navlinks, #header, -#qr { - position: fixed; -} -#overlay { - z-index: 999; -} -#notifications { - z-index: 70; -} -#qp, #ihover { - z-index: 60; -} -#menu { - z-index: 50; -} -#navlinks, #updater, #thread-stats { - z-index: 40; -} -#qr { - z-index: 30; -} -#watcher:hover { - z-index: 20; -} -#header { - z-index: 10; -} -#watcher { - z-index: 5; -} - -/* Header */ -.fourchan-x body { - -moz-box-sizing: border-box; - box-sizing: border-box; -} -#header { - top: 0; - right: 0; - left: 0; -} -#header-bar { - border-width: 0 0 1px; - display: -webkit-flex; - display: flex; - padding: 3px 4px 4px; - position: relative; - transition: all .1s .05s ease-in-out; -} -#board-list { - -webkit-flex: 1; - flex: 1; - text-align: center; -} -#header-bar.autohide:not(:hover) { - box-shadow: none; - margin-bottom: -1em; - -webkit-transform: translateY(-100%); - transform: translateY(-100%); - transition: all .8s .6s cubic-bezier(.55, .055, .675, .19); -} -#toggle-header-bar { - cursor: n-resize; - left: 0; - right: 0; - bottom: -8px; - height: 10px; - position: absolute; -} -#header-bar.autohide:not(:hover) #toggle-header-bar, #toggle-header-bar:hover { - bottom: -16px; - height: 18px; -} -#header-bar.autohide #toggle-header-bar { - cursor: s-resize; -} -#header-bar a:not(.entry) { - text-decoration: none; - padding: 1px; -} -#shortcuts:empty { - display: none; -} -.brackets-wrap::before { - content: "\\00a0["; -} -.brackets-wrap::after { - content: "]\\00a0"; -} -.disabled, -.expand-all-shortcut { - opacity: .45; -} - -/* Notifications */ -#notifications { - height: 0; - text-align: center; - position: fixed; - top: 0; - right: 0; - left: 0; -} -.notification { - color: #FFF; - font-weight: 700; - text-shadow: 0 1px 2px rgba(0, 0, 0, .5); - box-shadow: 0 1px 2px rgba(0, 0, 0, .15); - border-radius: 2px; - margin: 1px auto; - width: 500px; - max-width: 100%; - position: relative; - transition: all .25s ease-in-out; -} -.notification.error { - background-color: hsla(0, 100%, 38%, .9); -} -.notification.warning { - background-color: hsla(36, 100%, 38%, .9); -} -.notification.info { - background-color: hsla(200, 100%, 38%, .9); -} -.notification.success { - background-color: hsla(104, 100%, 38%, .9); -} -.notification a { - color: white; -} -.notification > .close { - padding: 6px; - top: 0; - right: 0; - position: absolute; -} -.message { - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 6px 20px; - max-height: 200px; - width: 100%; - overflow: auto; -} - -/* Settings */ -#overlay { - background-color: rgba(0, 0, 0, .5); - display: -webkit-flex; - display: flex; - -webkit-align-items: center; - align-items: center; - -webkit-justify-content: center; - justify-content: center; - position: fixed; - top: 0; - left: 0; - height: 100%; - width: 100%; -} -#fourchanx-settings { - -moz-box-sizing: border-box; - box-sizing: border-box; - box-shadow: 0 0 15px rgba(0, 0, 0, .15); - height: 600px; - min-height: 0; - max-height: 100%; - width: 900px; - min-width: 0; - max-width: 100%; - padding: 3px; - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; -} -#fourchanx-settings > nav { - display: -webkit-flex; - display: flex; - padding: 2px 2px 0; -} -#fourchanx-settings > nav a { - text-decoration: underline; -} -#fourchanx-settings > nav a.close { - text-decoration: none; - padding: 2px; -} -.sections-list { - -webkit-flex: 1; - flex: 1; -} -.tab-selected { - font-weight: 700; -} -.section-container { - -webkit-flex: 1; - flex: 1; - position: relative; -} -.section-container > section { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - overflow: auto; -} -.section-sauce ul, -.section-rice ul { - list-style: none; - margin: 0; - padding: 8px; -} -.section-sauce li, -.section-rice li { - padding-left: 4px; -} -.section-main label { - text-decoration: underline; -} -.section-filter ul { - padding: 0; -} -.section-filter li { - margin: 10px 40px; -} -.section-filter textarea { - height: 500px; -} -.section-sauce textarea { - height: 350px; -} -.section-rice .field[name="boardnav"] { - width: 100%; -} -.section-rice textarea { - height: 150px; -} -#fourchanx-settings fieldset { - border: 1px solid; - border-radius: 3px; -} -#fourchanx-settings legend { - font-weight: 700; -} -#fourchanx-settings textarea { - font-family: monospace; - min-width: 100%; - max-width: 100%; -} -#fourchanx-settings code { - color: #000; - background-color: #FFF; - padding: 0 2px; -} -.unscroll { - overflow: hidden; -} - -/* Unread */ -#unread-line { - margin: 0; -} - -/* Thread Updater */ -#updater:not(:hover) { - background: none; - border: none; - box-shadow: none; -} -#updater > .move { - padding: 0 3px; -} -#updater > div:last-child { - text-align: center; -} -#updater input[type=number] { - width: 4em; -} -#updater:not(:hover) > div:not(.move) { - display: none; -} -#updater input[type="button"] { - width: 100%; -} -.new { - color: limegreen; -} - -/* Thread Watcher */ -#watcher { - padding-bottom: 3px; - overflow: hidden; - white-space: nowrap; -} -#watcher:not(:hover) { - max-height: 220px; -} -#watcher > .move { - padding-top: 3px; -} -#watcher > div { - max-width: 200px; - overflow: hidden; - padding-left: 3px; - padding-right: 3px; - text-overflow: ellipsis; -} -#watcher a { - text-decoration: none; -} - -/* Thread Stats */ -#thread-stats { - background: none; - border: none; - box-shadow: none; -} - -/* Quote */ -.deadlink { - text-decoration: none !important; -} -.backlink.deadlink:not(.forwardlink), .quotelink.deadlink:not(.forwardlink) { - text-decoration: underline !important; -} -.inlined { - opacity: .5; -} -#qp input, .forwarded { - display: none; -} -.quotelink.forwardlink, -.backlink.forwardlink { - text-decoration: none; - border-bottom: 1px dashed; -} -.filtered { - text-decoration: underline line-through; -} -.inline { - border: 1px solid; - display: table; - margin: 2px 0; -} -.inline .post { - border: 0 !important; - background-color: transparent !important; - display: table !important; - margin: 0 !important; - padding: 1px 2px !important; -} -#qp > .opContainer::after { - content: ''; - clear: both; - display: table; -} -#qp .post { - border: none; - margin: 0; - padding: 2px 2px 5px; -} -#qp img { - max-height: 300px; - max-width: 500px; -} -.qphl > .post { - outline: 2px solid rgba(216, 94, 49, .7); -} - -/* File */ -.fileText:hover .fntrunc, -.fileText:not(:hover) .fnfull, -.expanded-image > .post > .file > .fileThumb > img[data-md5], -:not(.expanded-image) > .post > .file > .fileThumb > .full-image { - display: none; -} -.expanding { - opacity: .5; -} -.expanded-image { - clear: both; -} -.expanded-image > .op > .file::after { - content: ''; - clear: both; - display: table; -} -:root.fit-width .full-image { - max-width: 100%; -} -:root.gecko.fit-width .full-image, -:root.presto.fit-width .full-image { - width: 100%; -} -#ihover { - -moz-box-sizing: border-box; - box-sizing: border-box; - max-height: 100%; - max-width: 75%; - padding-bottom: 16px; -} - -/* Index/Reply Navigation */ -#navlinks { - font-size: 16px; - top: 25px; - right: 10px; -} - -/* Filter */ -.opContainer.filter-highlight { - box-shadow: inset 5px 0 rgba(255, 0, 0, .5); -} -.filter-highlight > .reply { - box-shadow: -5px 0 rgba(255, 0, 0, .5); -} - -/* Thread & Reply Hiding */ -.hide-thread-button, -.hide-reply-button { - float: left; - margin-right: 2px; -} -.stub ~ .sideArrows, -.stub ~ .hide-reply-button, -.stub ~ .post { - display: none !important; -} -.stub input { - display: inline-block; -} - -/* QR */ -:root.hide-original-post-form #postForm, -:root.hide-original-post-form .postingMode, -:root.hide-original-post-form #togglePostForm, -#qr.autohide:not(:hover) > form { - display: none; -} -#qr select, #dump-button, .remove, .captcha-img { - cursor: pointer; -} -#qr > div { - min-width: 300px; - display: -webkit-flex; - display: flex; - -webkit-align-items: center; - align-items: center; -} -#qr .move { - -webkit-align-self: stretch; - align-self: stretch; - -webkit-flex: 1; - flex: 1; -} -#qr select { - margin: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: none; - background: none; -} -.presto #qr select { - height: 1em; -} -#qr .close { - padding: 0 3px; -} -#qr > form { - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; -} -.persona { - display: -webkit-flex; - display: flex; -} -.persona .field { - -webkit-flex: 1; - flex: 1; -} -.persona .field:focus { - -webkit-flex: 3; - flex: 3; -} -#dump-button { - background: linear-gradient(#EEE, #CCC); - border: 1px solid #CCC; - margin: 0; - padding: 2px 4px 3px; - outline: none; - width: 30px; -} -#dump-button:hover, #dump-button:focus { - background: linear-gradient(#FFF, #DDD); -} -#dump-button:active, .dump #dump-button:not(:hover):not(:focus) { - background: linear-gradient(#CCC, #DDD); -} -.gecko #dump-button { - padding: 0; -} -#qr:not(.dump) #dump-list-container { - display: none; -} -#dump-list-container { - height: 100px; - position: relative; - -webkit-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; -} -#dump-list { - counter-reset: qrpreviews; - top: 0; right: 0; bottom: 0; left: 0; - overflow: hidden; - position: absolute; - white-space: nowrap; -} -#dump-list:hover { - bottom: -12px; - overflow-x: auto; - z-index: 1; -} -#dump-list::-webkit-scrollbar { - height: 12px; -} -#dump-list::-webkit-scrollbar-thumb { - border: 1px solid; -} -.qr-preview { - background-position: 50% 20%; - background-size: cover; - border: 1px solid #808080; - color: #FFF !important; - font-size: 12px; - -moz-box-sizing: border-box; - box-sizing: border-box; - cursor: move; - display: inline-block; - height: 92px; width: 92px; - margin: 4px; padding: 2px; - opacity: .6; - outline: none; - overflow: hidden; - position: relative; - text-shadow: 0 1px 1px #000; - transition: opacity .25s ease-in-out; - vertical-align: top; - white-space: pre; -} -.qr-preview:hover, .qr-preview:focus { - opacity: .9; - color: #FFF !important; -} -.qr-preview#selected { - opacity: 1; -} -.qr-preview::before { - counter-increment: qrpreviews; - content: counter(qrpreviews); - font-weight: 700; - text-shadow: 0 0 3px #000, 0 0 5px #000; - position: absolute; - top: 3px; right: 3px; -} -.qr-preview.drag { - border-color: red; - border-style: dashed; -} -.qr-preview.over { - border-color: #FFF; - border-style: dashed; -} -.remove { - color: #E00 !important; - font-weight: 700; - padding: 3px; -} -.remove:hover::after { - content: ' Remove'; -} -.qr-preview > label { - background: rgba(0, 0, 0, .5); - right: 0; bottom: 0; left: 0; - position: absolute; - text-align: center; -} -.qr-preview > label > input { - margin: 1px 0; - vertical-align: bottom; -} -#add-post { - display: inline-block; - font-size: 30px; - height: 30px; - width: 30px; - line-height: 1; - text-align: center; - position: absolute; - right: 0; bottom: 0; - z-index: 1; -} -#qr textarea { - min-height: 160px; - min-width: 100%; - display: block; -} -#qr.has-captcha textarea { - min-height: 120px; -} -.textarea { - position: relative; -} -#char-count { - color: #000; - background: hsla(0, 0%, 100%, .5); - font-size: 8pt; - position: absolute; - bottom: 1px; - right: 1px; - pointer-events: none; -} -#char-count.warning { - color: red; -} -.captcha-img { - background: #FFF; - outline: 1px solid #CCC; - outline-offset: -1px; -} -.captcha-img > img { - display: block; - height: 57px; - width: 300px; -} -#file-n-submit > input { - margin: 0; -} -#file-n-submit.has-file #qr-no-file { - visibility: hidden; -} -#file-n-submit:not(.has-file) #qr-filename, -#file-n-submit:not(.has-file) #qr-file-spoiler, -#file-n-submit:not(.has-file) #qr-filerm { - display: none; -} -#file-n-submit { - display: -webkit-flex; - display: flex; - -webkit-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - align-items: center; -} -#qr-no-file, #qr-filename-container { - -webkit-flex: 1; - flex: 1; -} -#qr-filename-container { - cursor: default; - position: relative; - margin-left: 2px; -} -#qr-filename { - position: absolute; - top: 0; right: 0; bottom: 0; left: 0; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} -#qr-filerm { - padding: 0 2px; -} -#file-n-submit > #qr-file-spoiler { - margin: 0 2px; -} -#file-n-submit input[type='submit'] { - min-width: 40px; - -webkit-order: 1; - order: 1; -} -#qr input[type='file'] { - position: absolute; - visibility: hidden; -} - -/* Menu */ -.menu-button { - display: inline-block; - position: relative; -} -.menu-button i { - border-top: 6px solid; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - display: inline-block; - margin: 2px; - vertical-align: middle; -} -#menu { - border-bottom: 0; - display: -webkit-flex; - display: flex; - margin: 2px 0; - -webkit-flex-direction: column; - flex-direction: column; - position: absolute; - outline: none; -} -.entry { - cursor: pointer; - outline: none; - padding: 3px 7px; - position: relative; - text-decoration: none; - white-space: nowrap; -} -.entry.has-submenu { - padding-right: 20px; -} -.has-submenu::after { - content: ''; - border-left: 6px solid; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - display: inline-block; - margin: 4px; - position: absolute; - right: 3px; -} -.has-submenu:not(.focused) > .submenu { - display: none; -} -.submenu { - border-bottom: 0; - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; - position: absolute; - margin: -1px 0; -} -.entry input { - margin: 0; -} diff --git a/css/theme.css b/css/theme.css index 2d72b8277..b44139328 100644 --- a/css/theme.css +++ b/css/theme.css @@ -119,10 +119,11 @@ span[style="left: 5px; position: absolute;"] a { border-color: #{theme["Buttons Border"]}; } #dump, -#file, +#qr-filename-container, #appchanx-settings input, .captchaimg, .dump #dump:not(:hover):not(:focus), +.qr-preview, .selectrice, button, input, @@ -132,7 +133,7 @@ textarea { color: #{theme["Inputs"]}; } #dump:hover, -#file:hover, +#qr-filename-container:hover, #appchanx-settings .selectrice li:nth-of-type(2n+1):hover, .selectrice:hover, .selectrice li:hover, diff --git a/src/appchan.coffee b/src/appchan.coffee index 0d62c2e3a..ecc4b618f 100644 --- a/src/appchan.coffee +++ b/src/appchan.coffee @@ -22,7 +22,7 @@ Style = Style.iconPositions() if exLink = $ "#navtopright .exlinksOptionsLink", d.body $.on exLink, "click", -> - setTimeout Style.rice, 100 + setTimeout Rice.nodes, 100 ), 500 @setup() @@ -569,6 +569,7 @@ Rice = delete Rice.ul nodes: (source) -> + source or= d.body checkboxes = $$('[type=checkbox]:not(.riced)', source) checkrice = Rice.checkbox for input in checkboxes diff --git a/src/features.coffee b/src/features.coffee index 937e1072b..819348f76 100644 --- a/src/features.coffee +++ b/src/features.coffee @@ -197,16 +197,6 @@ Settings = $.prepend $.id('navtopright'), [$.tn(' ['), link, $.tn('] ')] $.get 'previousversion', null, (item) -> - <% if (type === 'userscript') { %> - el = $.el 'span' - el.style.flex = 'test' - if el.style.flex is 'test' - el.innerHTML = """ - Firefox is not correctly set up and some <%= meta.name %> features will be displayed incorrectly.
- Follow the instructions of the install guide to fix it. - """ - new Notification 'warning', el, 30 - <% } %> if previous = item['previousversion'] return if previous is g.VERSION # Avoid conflicts between sync'd newer versions @@ -3959,6 +3949,7 @@ ThreadUpdater = $.on d, 'visibilitychange', ThreadUpdater.cb.visibility ThreadUpdater.cb.online() + Rice.nodes ThreadUpdater.dialog $.add d.body, ThreadUpdater.dialog ### diff --git a/src/qr.coffee b/src/qr.coffee index 6edd463d7..e843549a8 100644 --- a/src/qr.coffee +++ b/src/qr.coffee @@ -416,7 +416,7 @@ QR = lock: (lock=true) -> @isLocked = lock return unless @ is QR.selected - for name in ['name', 'email', 'sub', 'com', 'fileButton', 'spoiler'] + for name in ['name', 'email', 'sub', 'com', 'spoiler'] QR.nodes[name].disabled = lock @nodes.rm.style.visibility = QR.nodes.fileRM.style.visibility = if lock then 'hidden' else '' @@ -693,7 +693,7 @@ QR = dialog: -> dialog = UI.dialog 'qr', 'top:0;right:0;', """
- + Post Form ×
@@ -713,20 +713,23 @@ QR = +
- - - + No selected file + × - × - +
+
+ +
+ - """.replace />\s+<' # get rid of spaces between elements QR.nodes = nodes = @@ -734,6 +737,7 @@ QR = move: $ '.move', dialog autohide: $ '#autohide', dialog thread: $ 'select', dialog + threadPar: $ '#qr-thread-select', dialog close: $ '.close', dialog form: $ 'form', dialog dumpButton: $ '#dump-button', dialog @@ -745,10 +749,10 @@ QR = addPost: $ '#add-post', dialog charCount: $ '#char-count', dialog fileSubmit: $ '#file-n-submit', dialog - fileButton: $ '#qr-file-button', dialog filename: $ '#qr-filename', dialog fileRM: $ '#qr-filerm', dialog spoiler: $ '#qr-file-spoiler', dialog + spoilerPar: $ '#qr-spoiler-label', dialog status: $ '[type=submit]', dialog fileInput: $ '[type=file]', dialog @@ -770,7 +774,7 @@ QR = nodes.fileInput.accept = "text/*, #{mimeTypes}" if $.engine isnt 'presto' # Opera's accept attribute is fucked up QR.spoiler = !!$ 'input[name=spoiler]' - nodes.spoiler.hidden = !QR.spoiler + nodes.spoilerPar.hidden = !QR.spoiler if g.BOARD.ID is 'f' nodes.flashTag = $.el 'select', @@ -791,17 +795,19 @@ QR = $.add nodes.thread, $.el 'option', value: thread textContent: "Thread No.#{thread}" - $.after nodes.autohide, nodes.thread + $.add nodes.threadPar, nodes.thread QR.resetThreadSelector() - for node in [nodes.fileButton, nodes.filename.parentNode] - $.on node, 'click', QR.openFileInput + $.on nodes.filename.parentNode, 'click', QR.openFileInput + $.on nodes.autohide, 'change', QR.toggleHide $.on nodes.close, 'click', QR.close $.on nodes.dumpButton, 'click', -> nodes.el.classList.toggle 'dump' $.on nodes.addPost, 'click', -> new QR.post true $.on nodes.form, 'submit', QR.submit - $.on nodes.fileRM, 'click', -> QR.selected.rmFile() + $.on nodes.fileRM, 'click', (e) -> + e.stopPropagation() + QR.selected.rmFile() $.on nodes.spoiler, 'change', -> QR.selected.nodes.spoiler.click() $.on nodes.fileInput, 'change', QR.fileInput @@ -813,6 +819,9 @@ QR = QR.status() QR.cooldown.init() QR.captcha.init() + + Rice.nodes dialog + $.add d.body, dialog # Create a custom event when the QR dialog is first initialized.