From 9bd241552e5b46589faa6d2c3f1cb066b7a65f84 Mon Sep 17 00:00:00 2001 From: Zixaphir Date: Mon, 27 May 2013 17:29:32 -0700 Subject: [PATCH] Cut down on math --- builds/appchan-x.js | 36 ++++++++--------------- builds/appchan-x.user.js | 36 ++++++++--------------- builds/crx/script.js | 36 ++++++++--------------- src/General/css/icons.vert.css | 3 +- src/General/css/layout.css | 9 +++--- src/Theming/Style.coffee | 52 ++++++++++------------------------ 6 files changed, 57 insertions(+), 115 deletions(-) diff --git a/builds/appchan-x.js b/builds/appchan-x.js index 0dd289b19..1d00dc0c4 100644 --- a/builds/appchan-x.js +++ b/builds/appchan-x.js @@ -11482,28 +11482,20 @@ return "filter: url(\"data:image/svg+xml,#filters\");"; }, layout: function() { - var agent, css, editSpace, position, width, xOffset, _conf; + var agent, css, editSpace, width, xOffset, _conf; _conf = Conf; agent = Style.agent; xOffset = _conf["Sidebar Location"] === "left" ? '-' : ''; Style.pfOffset = _conf['4chan SS Navigation'] && ((_conf['Bottom Header'] && _conf['Fixed Header']) || (g.VIEW === 'index' && _conf['Pagination'] === 'sticky bottom')) ? 1.5 : 0; - position = { - right: { - hide: parseInt(_conf['Right Thread Padding'], 10) < 100 ? "right" : "left", - minimal: "right" - }[_conf["Sidebar"]] || "left", - left: parseInt(_conf['Right Thread Padding'], 10) < 100 ? "right" : "left" - }[_conf["Sidebar Location"]]; - Style['sidebarOffset'] = _conf['Sidebar'] === "large" ? { - W: 51, - H: 17 - } : { - W: 0, - H: 0 - }; - Style.logoOffset = _conf["4chan Banner"] === "at sidebar top" ? 83 + Style.sidebarOffset.H : 0; - width = 248 + Style.sidebarOffset.W; + Style.sidebar = { + minimal: 20, + hide: 2, + normal: 252, + large: 303 + }[_conf['Sidebar']]; + Style.logoOffset = _conf["4chan Banner"] === "at sidebar top" ? _conf["Sidebar"] === "large" ? 100 : 83 : 0; + width = _conf["Sidebar"] === "large" ? 299 : 248; Style.sidebarLocation = _conf["Sidebar Location"] === "left" ? ["left", "right"] : ["right", "left"]; if (_conf['editMode'] === "theme") { editSpace = {}; @@ -11515,10 +11507,6 @@ right: 0 }; } - Style.sidebar = { - minimal: 20, - hide: 2 - }[_conf['Sidebar']] || (252 + Style.sidebarOffset.W); Style.replyMargin = _conf["Post Spacing"]; return css = "/* Cleanup */\n#absbot,\n#boardNavDesktop,\n#delPassword,\n#delform > hr:last-of-type,\n#navbotright,\n#postForm,\n#search-label,\n#search-label-bottom,\n#styleSwitcher,\n#togglePostForm,\n.boardBanner > div,\n.mobile,\n.next form,\n.next span,\n.postingMode,\n.prev form,\n.prev span,\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,\n.hidden_thread ~ div,\n.hidden_thread ~ a,\n.replyContainer .stub ~ div,\n.replyContainer .stub ~ a,\n.stub + div,\n.thread > .stub:first-child ~ .postContainer,\n.thread > .stub:first-child ~ .summary,\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 z-index: 7;\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.fappeTyme .threadContainer > .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}\nbody.unscroll {\n overflow: hidden;\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}\nth {\n text-align: left;\n}\n.center {\n text-align: center;\n}\n.disabled {\n opacity: 0.5;\n}\n.pointer {\n cursor: pointer;\n}\n/* Symbols */\n.drop-marker {\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.brackets-wrap::before {\n content: \" [\";\n}\n.brackets-wrap::after {\n content: \"] \";\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/* Header */\n#header-bar {\n z-index: 6;\n border-width: 1px;\n" + (_conf['4chan SS Navigation'] ? " left: 0; right: 0; border-left: 0; border-right: 0; border-radius: 0 !important;" : " " + Style.sidebarLocation[0] + ": " + (Style.sidebar + parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]) + "px; " + Style.sidebarLocation[1] + ": " + (parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"] + 2) + "px;") + "\n" + (_conf["Hide Navigation Decorations"] ? " font-size: 0; color: transparent; word-spacing: 2px;" : "") + "\n text-align: " + _conf["Navigation Alignment"] + ";\n}\n#shortcuts {\n float: right;\n}\n.fixed #header-bar.autohide {\n z-index: 24;\n}\n.fixed #header-bar {\n position: fixed;\n}\n.top #header-bar {\n top: 0;\n border-top-width: 0;\n " + (_conf["Rounded Edges"] ? "border-radius: 0 0 3px 3px;" : "") + "\"\n}\n.fixed.bottom #header-bar {\n bottom: 0;\n border-bottom-width: 0;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px 3px 0 0;" : "") + "\"\n}\n.hide #header-bar {\n position: fixed;\n top: 110%;\n bottom: auto;\n}\n/* Header Autohide */\n.fixed #header-bar.autohide:not(:hover) {\n box-shadow: none;\n transition: all .8s .6s cubic-bezier(.55, .055, .675, .19);\n}\n.fixed.top #header-bar.autohide:not(:hover) {\n margin-bottom: -1em;\n " + agent + "transform: translateY(-100%);\n}\n.fixed.bottom #header-bar.autohide:not(:hover) {\n " + agent + "transform: translateY(100%);\n}\n#scroll-marker {\n left: 0;\n right: 0;\n height: 10px;\n position: absolute;\n}\n#header-bar #scroll-marker {\n display: none;\n}\n.fixed #header-bar #scroll-marker {\n display: block;\n}\n.fixed.top header-bar #scroll-marker {\n top: 100%;\n}\n.fixed.bottom #header-bar #scroll-marker {\n bottom: 100%;\n}\n/* Notifications */\n#notifications {\n position: fixed;\n top: 0;\n text-align: center;\n right: 0;\n left: 0;\n transition: all .8s .6s cubic-bezier(.55, .055, .675, .19);\n}\n.fixed.top #header-bar #notifications {\n position: absolute;\n top: 100%;\n}\n.notification {\n font-family: " + _conf["Font"] + ";\n font-size: " + (parseInt(_conf["Font Size"], 10)) + ";\n color: #fff;\n font-weight: 700;\n text-shadow: 0 1px 2px rgba(0, 0, 0, .5);\n box-shadow: 0 1px 2px rgba(0, 0, 0, .15);\n border-radius: 2px;\n margin: 1px auto;\n width: 500px;\n max-width: 100%;\n position: relative;\n transition: all .25s ease-in-out;\n}\n.notification.error {\n background-color: hsla(0, 100%, 38%, .9);\n}\n.notification.warning {\n background-color: hsla(36, 100%, 38%, .9);\n}\n.notification.info {\n background-color: hsla(200, 100%, 38%, .9);\n}\n.notification.success {\n background-color: hsla(104, 100%, 38%, .9);\n}\n.notification a {\n color: #fff;\n}\n.notification > .close {\n padding: 6px;\n top: 0;\n right: 5px;\n position: absolute;\n color: #fff;\n}\n.message {\n " + Style.sizing + ": border-box;\n padding: 6px 20px;\n max-height: 200px;\n width: 100%;\n overflow: auto;\n}\n/* Main Menu */\n#main-menu {\n margin: 0;\n border: 2px solid;\n border-radius: 10px;\n height: 14px;\n width: 14px;\n " + Style.sizing + ": border-box;\n border-color: rgb(130,130,130);\n color: rgb(130,130,130);\n}\n#main-menu::after {\n content: '';\n font-size: 10px;\n position: absolute;\n top: 50%;\n left: 50%;\n " + agent + "transform: translate(-60%, -50%);\n display: block;\n border-top: 5px solid rgb(130, 130, 130);\n border-left: 3px solid transparent;\n border-right: 3px solid transparent;\n width: 7px;\n " + Style.sizing + ": border-box;\n}\n/* Updater / Thread Stats */\n.float #thread-stats,\n.float #updater {\n position: fixed;\n}\n#update-status.new::after {\n content: ', ';\n}\n/* Pagination */\n.pagelist {\n border-width: 1px;\n text-align: " + _conf["Pagination Alignment"] + ";\n" + (_conf['4chan SS Navigation'] ? " left: 0; right: 0; border-left: 0; border-right: 0; border-radius: 0 !important;" : " " + Style.sidebarLocation[0] + ": " + (Style.sidebar + parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]) + "px; " + Style.sidebarLocation[1] + ": " + (parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"] + 2) + "px;") + "\n" + { "sticky top": " position: fixed; top: 0; border-top-width: 0; " + (_conf["Rounded Edges"] ? "border-radius: 0 0 3px 3px;" : ""), @@ -11526,7 +11514,7 @@ "top": " position: static; border-top-width: 0; " + (_conf["Rounded Edges"] ? "border-radius: 0 0 3px 3px;" : ""), "bottom": " position: static; " + (_conf["Rounded Edges"] ? "border-radius: 3px 3px 0 0;" : ""), "hide": " display: none;", - "on side": " position: fixed; padding: 0; top: auto; bottom: " + (['fixed', 'transparent fade'].contains(_conf['Post Form Style']) ? 21.6 + (Conf['Show Post Form Header'] ? 1.5 : 0) + (Conf['Post Form Decorations'] ? 0.2 : 0) : .5) + "em; " + Style.sidebarLocation[1] + ": auto; " + Style.sidebarLocation[0] + ": " + (250 + Style.sidebarOffset.W) + "px position: fixed;" + (Style.sidebarLocation[0] === 'right' ? " " + agent + "transform: rotate(90deg); " + agent + "transform-origin: bottom right;" : " " + agent + "transform: rotate(-90deg); " + agent + "transform-origin: bottom left;") + " z-index: 6; margin: 0; background: none transparent !important; border: 0 none !important; text-align: right;" + "on side": " position: fixed; padding: 0; top: auto; bottom: " + (['fixed', 'transparent fade'].contains(_conf['Post Form Style']) ? 21.6 + (Conf['Show Post Form Header'] ? 1.5 : 0) + (Conf['Post Form Decorations'] ? 0.2 : 0) : .5) + "em; " + Style.sidebarLocation[1] + ": auto; " + Style.sidebarLocation[0] + ": " + (Style.sidebar - 2) + "px position: fixed;" + (Style.sidebarLocation[0] === 'right' ? " " + agent + "transform: rotate(90deg); " + agent + "transform-origin: bottom right;" : " " + agent + "transform: rotate(-90deg); " + agent + "transform-origin: bottom left;") + " z-index: 6; margin: 0; background: none transparent !important; border: 0 none !important; text-align: right;" }[_conf['Pagination']] + "\n" + (_conf["Hide Navigation Decorations"] ? " font-size: 0; color: transparent; word-spacing: 0;" : "") + "\n z-index: 6;\n}\n.pagelist input,\n.pagelist div {\n vertical-align: middle;\n}\n#header-bar a {\n font-size: " + (parseInt(_conf["Font Size"], 10)) + "px;\n}\n" + (_conf["Hide Navigation Decorations"] ? ".pages a { margin: 0 1px; font-size: " + (parseInt(_conf["Font Size"], 10)) + "px;}" : "") + "\n.next,\n.pages,\n.prev {\n display: inline-block;\n margin: 0 3px;\n}\n/* Banner */\n.boardBanner {\n line-height: 0;\n}\n" + (_conf["Faded 4chan Banner"] ? ".boardBanner { opacity: 0.5; " + agent + "transition: opacity 0.3s ease-in-out .5s;}.boardBanner:hover { opacity: 1; " + agent + "transition: opacity 0.3s ease-in;}" : "") + "\n" + (_conf["4chan Banner Reflection"] ? "/* From 4chan SS / OneeChan */.gecko .boardBanner::after { background-image: -moz-element(#Banner); bottom: -100%; content: ''; left: 0; mask: url(\"data:image/svg+xml, #mask\"); opacity: 0.3; position: absolute; right: 0; top: 100%; -moz-transform: scaleY(-1); z-index: -1;}.webkit #Banner { -webkit-box-reflect: below 0 -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0) 10%, rgba(255,255,255,.5));}" : "") + "\n" + { "at sidebar top": ".boardBanner { position: fixed; top: 16px; " + Style.sidebarLocation[0] + ": 2px;}.boardBanner img { width: " + width + "px;}", "at sidebar bottom": ".boardBanner { position: fixed; bottom: 270px; " + Style.sidebarLocation[0] + ": 2px;}.boardBanner img { width: " + width + "px;}", @@ -11550,7 +11538,7 @@ "lower left": ".container { padding: 0 5px; max-width: 100%;}.reply.quoted { position: relative; padding-bottom: 1.7em;}.reply .container { position: absolute; left: 0; bottom: 0; padding: 0 5px;}.reply .container::before { content: 'REPLIES: ';}#qp .container { position: static; max-width: 100%;}#qp .container::before { content: '';}.inline .container { position: static; max-width: 100%;}.inline .container::before { content: '';}", 'lower right': ".reply.quoted { position: relative; padding-bottom: 1.7em;}.reply .container { position: absolute; right: 0; bottom: 0;}.container::before { content: 'REPLIES: ';}.container { max-width: 100%; padding: 0 5px;}#qp .container { position: static; max-width: 100%;}#qp .container::before { content: '';}.inline .container { position: static; float: none;}.inline .container::before { content: '';}", 'default': "" - }[_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 { display: block; text-align: right;}" : "") + "\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#settings .selectrice {\n display: inline-block;\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 {\n padding: 0;\n margin: 0;\n position: fixed;\n max-height: 120px;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 32;\n}\n#selectrice:empty {\n display: none;\n}\n/* Post Form Shortcut */\n.qr-shortcut.on-page {\n font-size: 250%;\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" + ({ + }[_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 1em 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-left: .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: 0;\n}\n.submenu {\n display: none;\n position: absolute;\n top: -1px;\n}\n.focused .submenu {\n display: block;\n}\n/* Stubs */\n" + (_conf['Fit Width Replies'] ? ".stub { display: block; text-align: right;}" : "") + "\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#settings .selectrice {\n display: inline-block;\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 {\n padding: 0;\n margin: 0;\n position: fixed;\n max-height: 120px;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 32;\n}\n#selectrice:empty {\n display: none;\n}\n/* Post Form Shortcut */\n.qr-shortcut.on-page {\n font-size: 250%;\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: " + Style.pfOffset + "em !important; " + Style.sidebarLocation[0] + ": 0 !important; " + Style.sidebarLocation[1] + ": auto !important;}", "slideout": "#qrtab input,#qrtab .rice { display: none;}#qr { top: auto !important; bottom: " + Style.pfOffset + "em !important; " + Style.sidebarLocation[0] + ": 0 !important; " + Style.sidebarLocation[1] + ": auto !important; " + agent + "transform: translateX(" + xOffset + "93%);}#qr:hover,#qr.has-focus,#qr.dump { " + agent + "transform: translate(0);}", "tabbed slideout": "#qr { top: auto !important; bottom: " + Style.pfOffset + "em !important; " + Style.sidebarLocation[0] + ": 0 !important; " + Style.sidebarLocation[1] + ": auto !important; " + agent + "transform: translateX(" + xOffset + "100%);}#qr:hover,#qr.has-focus,#qr.dump { " + agent + "transform: translateX(0);}#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.has-focus #qrtab,#qr.dump #qrtab { opacity: 0;}#qrtab input,#qrtab .close,#qrtab .rice,#qrtab .selectrice,#qrtab span { display: none;}", @@ -11625,7 +11613,7 @@ } else { position = aligner(2 + (_conf["4chan Banner"] === "at sidebar top" ? Style.logoOffset + 19 : 0), [notEither && _conf['Image Expansion'], true, true, _conf['Slideout Navigation'] !== 'hide', _conf['Announcements'] === 'slideout' && (psa = $('#globalMessage', d.body)) && !psa.hidden, _conf['Thread Watcher'] && _conf['Slideout Watcher'], notCatalog && $('body > a[style="cursor: pointer; float: right;"]', d.body), $('#navtopright .exlinksOptionsLink', d.body), notEither, g.VIEW === 'thread', notEither && _conf['Fappe Tyme'], navlinks = ((g.VIEW !== 'thread' && _conf['Index Navigation']) || (g.VIEW === 'thread' && _conf['Reply Navigation'])) && notCatalog, navlinks]); iconOffset = (20 + (g.VIEW === 'thread' && _conf['Updater Position'] === 'top' ? 100 : 0)) - (_conf['4chan SS Navigation'] ? 0 : Style.sidebar + parseInt(_conf[align.capitalize() + " Thread Padding"], 10)); - css += "/* Expand Images */\n#img-controls {\n top: " + position[i++] + "px;\n}\n/* Main Menu */\n#main-menu {\n top: " + position[i++] + "px;\n}\n/* 4chan X Options */\n#appchanOptions {\n top: " + position[i++] + "px;\n}\n/* Slideout Navigation */\n#boardNavDesktopFoot,\n#boardNavDesktopFoot::after {\n top: " + position[i++] + "px;\n}\n/* Global Message */\n#globalMessage,\n#globalMessage::after {\n top: " + position[i++] + "px;\n}\n/* Watcher */\n" + (_conf["Slideout Watcher"] ? "#watcher, #watcher::after" : "") + " {\n top: " + position[i++] + "px !important;\n}\n/* 4sight */\nbody > a[style=\"cursor: pointer; float: right;\"]::after {\n top: " + position[i++] + "px;\n}\n/* ExLinks */\n#navtopright .exlinksOptionsLink::after {\n top: " + position[i++] + "px;\n}\n/* 4chan Catalog */\n#catalog::after {\n top: " + position[i++] + "px;\n}\n/* Back */\ndiv.navLinks > a:first-of-type::after {\n top: " + position[i++] + "px;\n}\n/* Fappe Tyme */\n#fappeTyme {\n top: " + position[i++] + "px;\n}\n/* Thread Navigation Links */\n#navlinks a:first-of-type {\n top: " + position[i++] + "px !important;\n}\n#navlinks a:last-of-type {\n top: " + position[i++] + "px !important;\n}\n#navlinks a,\n#navtopright .exlinksOptionsLink::after,\n#appchanOptions,\n#boardNavDesktopFoot::after,\n#globalMessage::after,\n#img-controls,\n#main-menu,\n#fappeTyme,\n" + (_conf["Slideout Watcher"] ? "#watcher::after," : "") + "\nbody > a[style=\"cursor: pointer; float: right;\"]::after,\n#catalog::after,\ndiv.navLinks > a:first-of-type::after {\n " + align + ": 3px !important;\n}\n#boardNavDesktopFoot,\n#globalMessage,\n#watcher {\n width: " + (233 + Style.sidebarOffset.W) + "px !important;\n " + align + ": 18px !important;\n}\n.fixed.top #header-bar" + (_conf['Pagination'] === 'top' || _conf['Pagination'] === 'sticky top' ? ',\n.pagelist' : '') + " {\n " + (_conf['4chan SS Navigation'] ? "padding-" + align + ": " + iconOffset + "px;" : "margin-" + align + ": " + iconOffset + "px;") + "\n}"; + css += "/* Expand Images */\n#img-controls {\n top: " + position[i++] + "px;\n}\n/* Main Menu */\n#main-menu {\n top: " + position[i++] + "px;\n}\n/* 4chan X Options */\n#appchanOptions {\n top: " + position[i++] + "px;\n}\n/* Slideout Navigation */\n#boardNavDesktopFoot,\n#boardNavDesktopFoot::after {\n top: " + position[i++] + "px;\n}\n/* Global Message */\n#globalMessage,\n#globalMessage::after {\n top: " + position[i++] + "px;\n}\n/* Watcher */\n" + (_conf["Slideout Watcher"] ? "#watcher, #watcher::after" : "") + " {\n top: " + position[i++] + "px !important;\n}\n/* 4sight */\nbody > a[style=\"cursor: pointer; float: right;\"]::after {\n top: " + position[i++] + "px;\n}\n/* ExLinks */\n#navtopright .exlinksOptionsLink::after {\n top: " + position[i++] + "px;\n}\n/* 4chan Catalog */\n#catalog::after {\n top: " + position[i++] + "px;\n}\n/* Back */\ndiv.navLinks > a:first-of-type::after {\n top: " + position[i++] + "px;\n}\n/* Fappe Tyme */\n#fappeTyme {\n top: " + position[i++] + "px;\n}\n/* Thread Navigation Links */\n#navlinks a:first-of-type {\n top: " + position[i++] + "px !important;\n}\n#navlinks a:last-of-type {\n top: " + position[i++] + "px !important;\n}\n#navlinks a,\n#navtopright .exlinksOptionsLink::after,\n#appchanOptions,\n#boardNavDesktopFoot::after,\n#globalMessage::after,\n#img-controls,\n#main-menu,\n#fappeTyme,\n" + (_conf["Slideout Watcher"] ? "#watcher::after," : "") + "\nbody > a[style=\"cursor: pointer; float: right;\"]::after,\n#catalog::after,\ndiv.navLinks > a:first-of-type::after {\n " + align + ": 3px !important;\n}\n#boardNavDesktopFoot,\n#globalMessage,\n#watcher {\n " + Style.sizing + ": border-box;\n width: " + Style.sidebar + "px !important;\n " + align + ": 18px !important;\n}\n.fixed.top #header-bar" + (_conf['Pagination'] === 'top' || _conf['Pagination'] === 'sticky top' ? ',\n.pagelist' : '') + " {\n " + (_conf['4chan SS Navigation'] ? "padding-" + align + ": " + iconOffset + "px;" : "margin-" + align + ": " + iconOffset + "px;") + "\n}"; } return Style.icons.textContent = css; }, diff --git a/builds/appchan-x.user.js b/builds/appchan-x.user.js index 5a057a49f..4d2b4feea 100644 --- a/builds/appchan-x.user.js +++ b/builds/appchan-x.user.js @@ -11476,28 +11476,20 @@ return "filter: url(\"data:image/svg+xml,#filters\");"; }, layout: function() { - var agent, css, editSpace, position, width, xOffset, _conf; + var agent, css, editSpace, width, xOffset, _conf; _conf = Conf; agent = Style.agent; xOffset = _conf["Sidebar Location"] === "left" ? '-' : ''; Style.pfOffset = _conf['4chan SS Navigation'] && ((_conf['Bottom Header'] && _conf['Fixed Header']) || (g.VIEW === 'index' && _conf['Pagination'] === 'sticky bottom')) ? 1.5 : 0; - position = { - right: { - hide: parseInt(_conf['Right Thread Padding'], 10) < 100 ? "right" : "left", - minimal: "right" - }[_conf["Sidebar"]] || "left", - left: parseInt(_conf['Right Thread Padding'], 10) < 100 ? "right" : "left" - }[_conf["Sidebar Location"]]; - Style['sidebarOffset'] = _conf['Sidebar'] === "large" ? { - W: 51, - H: 17 - } : { - W: 0, - H: 0 - }; - Style.logoOffset = _conf["4chan Banner"] === "at sidebar top" ? 83 + Style.sidebarOffset.H : 0; - width = 248 + Style.sidebarOffset.W; + Style.sidebar = { + minimal: 20, + hide: 2, + normal: 252, + large: 303 + }[_conf['Sidebar']]; + Style.logoOffset = _conf["4chan Banner"] === "at sidebar top" ? _conf["Sidebar"] === "large" ? 100 : 83 : 0; + width = _conf["Sidebar"] === "large" ? 299 : 248; Style.sidebarLocation = _conf["Sidebar Location"] === "left" ? ["left", "right"] : ["right", "left"]; if (_conf['editMode'] === "theme") { editSpace = {}; @@ -11509,10 +11501,6 @@ right: 0 }; } - Style.sidebar = { - minimal: 20, - hide: 2 - }[_conf['Sidebar']] || (252 + Style.sidebarOffset.W); Style.replyMargin = _conf["Post Spacing"]; return css = "/* Cleanup */\n#absbot,\n#boardNavDesktop,\n#delPassword,\n#delform > hr:last-of-type,\n#navbotright,\n#postForm,\n#search-label,\n#search-label-bottom,\n#styleSwitcher,\n#togglePostForm,\n.boardBanner > div,\n.mobile,\n.next form,\n.next span,\n.postingMode,\n.prev form,\n.prev span,\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,\n.hidden_thread ~ div,\n.hidden_thread ~ a,\n.replyContainer .stub ~ div,\n.replyContainer .stub ~ a,\n.stub + div,\n.thread > .stub:first-child ~ .postContainer,\n.thread > .stub:first-child ~ .summary,\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 z-index: 7;\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.fappeTyme .threadContainer > .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}\nbody.unscroll {\n overflow: hidden;\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}\nth {\n text-align: left;\n}\n.center {\n text-align: center;\n}\n.disabled {\n opacity: 0.5;\n}\n.pointer {\n cursor: pointer;\n}\n/* Symbols */\n.drop-marker {\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.brackets-wrap::before {\n content: \" [\";\n}\n.brackets-wrap::after {\n content: \"] \";\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/* Header */\n#header-bar {\n z-index: 6;\n border-width: 1px;\n" + (_conf['4chan SS Navigation'] ? " left: 0; right: 0; border-left: 0; border-right: 0; border-radius: 0 !important;" : " " + Style.sidebarLocation[0] + ": " + (Style.sidebar + parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]) + "px; " + Style.sidebarLocation[1] + ": " + (parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"] + 2) + "px;") + "\n" + (_conf["Hide Navigation Decorations"] ? " font-size: 0; color: transparent; word-spacing: 2px;" : "") + "\n text-align: " + _conf["Navigation Alignment"] + ";\n}\n#shortcuts {\n float: right;\n}\n.fixed #header-bar.autohide {\n z-index: 24;\n}\n.fixed #header-bar {\n position: fixed;\n}\n.top #header-bar {\n top: 0;\n border-top-width: 0;\n " + (_conf["Rounded Edges"] ? "border-radius: 0 0 3px 3px;" : "") + "\"\n}\n.fixed.bottom #header-bar {\n bottom: 0;\n border-bottom-width: 0;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px 3px 0 0;" : "") + "\"\n}\n.hide #header-bar {\n position: fixed;\n top: 110%;\n bottom: auto;\n}\n/* Header Autohide */\n.fixed #header-bar.autohide:not(:hover) {\n box-shadow: none;\n transition: all .8s .6s cubic-bezier(.55, .055, .675, .19);\n}\n.fixed.top #header-bar.autohide:not(:hover) {\n margin-bottom: -1em;\n " + agent + "transform: translateY(-100%);\n}\n.fixed.bottom #header-bar.autohide:not(:hover) {\n " + agent + "transform: translateY(100%);\n}\n#scroll-marker {\n left: 0;\n right: 0;\n height: 10px;\n position: absolute;\n}\n#header-bar #scroll-marker {\n display: none;\n}\n.fixed #header-bar #scroll-marker {\n display: block;\n}\n.fixed.top header-bar #scroll-marker {\n top: 100%;\n}\n.fixed.bottom #header-bar #scroll-marker {\n bottom: 100%;\n}\n/* Notifications */\n#notifications {\n position: fixed;\n top: 0;\n text-align: center;\n right: 0;\n left: 0;\n transition: all .8s .6s cubic-bezier(.55, .055, .675, .19);\n}\n.fixed.top #header-bar #notifications {\n position: absolute;\n top: 100%;\n}\n.notification {\n font-family: " + _conf["Font"] + ";\n font-size: " + (parseInt(_conf["Font Size"], 10)) + ";\n color: #fff;\n font-weight: 700;\n text-shadow: 0 1px 2px rgba(0, 0, 0, .5);\n box-shadow: 0 1px 2px rgba(0, 0, 0, .15);\n border-radius: 2px;\n margin: 1px auto;\n width: 500px;\n max-width: 100%;\n position: relative;\n transition: all .25s ease-in-out;\n}\n.notification.error {\n background-color: hsla(0, 100%, 38%, .9);\n}\n.notification.warning {\n background-color: hsla(36, 100%, 38%, .9);\n}\n.notification.info {\n background-color: hsla(200, 100%, 38%, .9);\n}\n.notification.success {\n background-color: hsla(104, 100%, 38%, .9);\n}\n.notification a {\n color: #fff;\n}\n.notification > .close {\n padding: 6px;\n top: 0;\n right: 5px;\n position: absolute;\n color: #fff;\n}\n.message {\n " + Style.sizing + ": border-box;\n padding: 6px 20px;\n max-height: 200px;\n width: 100%;\n overflow: auto;\n}\n/* Main Menu */\n#main-menu {\n margin: 0;\n border: 2px solid;\n border-radius: 10px;\n height: 14px;\n width: 14px;\n " + Style.sizing + ": border-box;\n border-color: rgb(130,130,130);\n color: rgb(130,130,130);\n}\n#main-menu::after {\n content: '';\n font-size: 10px;\n position: absolute;\n top: 50%;\n left: 50%;\n " + agent + "transform: translate(-60%, -50%);\n display: block;\n border-top: 5px solid rgb(130, 130, 130);\n border-left: 3px solid transparent;\n border-right: 3px solid transparent;\n width: 7px;\n " + Style.sizing + ": border-box;\n}\n/* Updater / Thread Stats */\n.float #thread-stats,\n.float #updater {\n position: fixed;\n}\n#update-status.new::after {\n content: ', ';\n}\n/* Pagination */\n.pagelist {\n border-width: 1px;\n text-align: " + _conf["Pagination Alignment"] + ";\n" + (_conf['4chan SS Navigation'] ? " left: 0; right: 0; border-left: 0; border-right: 0; border-radius: 0 !important;" : " " + Style.sidebarLocation[0] + ": " + (Style.sidebar + parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]) + "px; " + Style.sidebarLocation[1] + ": " + (parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"] + 2) + "px;") + "\n" + { "sticky top": " position: fixed; top: 0; border-top-width: 0; " + (_conf["Rounded Edges"] ? "border-radius: 0 0 3px 3px;" : ""), @@ -11520,7 +11508,7 @@ "top": " position: static; border-top-width: 0; " + (_conf["Rounded Edges"] ? "border-radius: 0 0 3px 3px;" : ""), "bottom": " position: static; " + (_conf["Rounded Edges"] ? "border-radius: 3px 3px 0 0;" : ""), "hide": " display: none;", - "on side": " position: fixed; padding: 0; top: auto; bottom: " + (['fixed', 'transparent fade'].contains(_conf['Post Form Style']) ? 21.6 + (Conf['Show Post Form Header'] ? 1.5 : 0) + (Conf['Post Form Decorations'] ? 0.2 : 0) : .5) + "em; " + Style.sidebarLocation[1] + ": auto; " + Style.sidebarLocation[0] + ": " + (250 + Style.sidebarOffset.W) + "px position: fixed;" + (Style.sidebarLocation[0] === 'right' ? " " + agent + "transform: rotate(90deg); " + agent + "transform-origin: bottom right;" : " " + agent + "transform: rotate(-90deg); " + agent + "transform-origin: bottom left;") + " z-index: 6; margin: 0; background: none transparent !important; border: 0 none !important; text-align: right;" + "on side": " position: fixed; padding: 0; top: auto; bottom: " + (['fixed', 'transparent fade'].contains(_conf['Post Form Style']) ? 21.6 + (Conf['Show Post Form Header'] ? 1.5 : 0) + (Conf['Post Form Decorations'] ? 0.2 : 0) : .5) + "em; " + Style.sidebarLocation[1] + ": auto; " + Style.sidebarLocation[0] + ": " + (Style.sidebar - 2) + "px position: fixed;" + (Style.sidebarLocation[0] === 'right' ? " " + agent + "transform: rotate(90deg); " + agent + "transform-origin: bottom right;" : " " + agent + "transform: rotate(-90deg); " + agent + "transform-origin: bottom left;") + " z-index: 6; margin: 0; background: none transparent !important; border: 0 none !important; text-align: right;" }[_conf['Pagination']] + "\n" + (_conf["Hide Navigation Decorations"] ? " font-size: 0; color: transparent; word-spacing: 0;" : "") + "\n z-index: 6;\n}\n.pagelist input,\n.pagelist div {\n vertical-align: middle;\n}\n#header-bar a {\n font-size: " + (parseInt(_conf["Font Size"], 10)) + "px;\n}\n" + (_conf["Hide Navigation Decorations"] ? ".pages a { margin: 0 1px; font-size: " + (parseInt(_conf["Font Size"], 10)) + "px;}" : "") + "\n.next,\n.pages,\n.prev {\n display: inline-block;\n margin: 0 3px;\n}\n/* Banner */\n.boardBanner {\n line-height: 0;\n}\n" + (_conf["Faded 4chan Banner"] ? ".boardBanner { opacity: 0.5; " + agent + "transition: opacity 0.3s ease-in-out .5s;}.boardBanner:hover { opacity: 1; " + agent + "transition: opacity 0.3s ease-in;}" : "") + "\n" + (_conf["4chan Banner Reflection"] ? "/* From 4chan SS / OneeChan */.gecko .boardBanner::after { background-image: -moz-element(#Banner); bottom: -100%; content: ''; left: 0; mask: url(\"data:image/svg+xml, #mask\"); opacity: 0.3; position: absolute; right: 0; top: 100%; -moz-transform: scaleY(-1); z-index: -1;}.webkit #Banner { -webkit-box-reflect: below 0 -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0) 10%, rgba(255,255,255,.5));}" : "") + "\n" + { "at sidebar top": ".boardBanner { position: fixed; top: 16px; " + Style.sidebarLocation[0] + ": 2px;}.boardBanner img { width: " + width + "px;}", "at sidebar bottom": ".boardBanner { position: fixed; bottom: 270px; " + Style.sidebarLocation[0] + ": 2px;}.boardBanner img { width: " + width + "px;}", @@ -11544,7 +11532,7 @@ "lower left": ".container { padding: 0 5px; max-width: 100%;}.reply.quoted { position: relative; padding-bottom: 1.7em;}.reply .container { position: absolute; left: 0; bottom: 0; padding: 0 5px;}.reply .container::before { content: 'REPLIES: ';}#qp .container { position: static; max-width: 100%;}#qp .container::before { content: '';}.inline .container { position: static; max-width: 100%;}.inline .container::before { content: '';}", 'lower right': ".reply.quoted { position: relative; padding-bottom: 1.7em;}.reply .container { position: absolute; right: 0; bottom: 0;}.container::before { content: 'REPLIES: ';}.container { max-width: 100%; padding: 0 5px;}#qp .container { position: static; max-width: 100%;}#qp .container::before { content: '';}.inline .container { position: static; float: none;}.inline .container::before { content: '';}", 'default': "" - }[_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 { display: block; text-align: right;}" : "") + "\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#settings .selectrice {\n display: inline-block;\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 {\n padding: 0;\n margin: 0;\n position: fixed;\n max-height: 120px;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 32;\n}\n#selectrice:empty {\n display: none;\n}\n/* Post Form Shortcut */\n.qr-shortcut.on-page {\n font-size: 250%;\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" + ({ + }[_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 1em 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-left: .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: 0;\n}\n.submenu {\n display: none;\n position: absolute;\n top: -1px;\n}\n.focused .submenu {\n display: block;\n}\n/* Stubs */\n" + (_conf['Fit Width Replies'] ? ".stub { display: block; text-align: right;}" : "") + "\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#settings .selectrice {\n display: inline-block;\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 {\n padding: 0;\n margin: 0;\n position: fixed;\n max-height: 120px;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 32;\n}\n#selectrice:empty {\n display: none;\n}\n/* Post Form Shortcut */\n.qr-shortcut.on-page {\n font-size: 250%;\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: " + Style.pfOffset + "em !important; " + Style.sidebarLocation[0] + ": 0 !important; " + Style.sidebarLocation[1] + ": auto !important;}", "slideout": "#qrtab input,#qrtab .rice { display: none;}#qr { top: auto !important; bottom: " + Style.pfOffset + "em !important; " + Style.sidebarLocation[0] + ": 0 !important; " + Style.sidebarLocation[1] + ": auto !important; " + agent + "transform: translateX(" + xOffset + "93%);}#qr:hover,#qr.has-focus,#qr.dump { " + agent + "transform: translate(0);}", "tabbed slideout": "#qr { top: auto !important; bottom: " + Style.pfOffset + "em !important; " + Style.sidebarLocation[0] + ": 0 !important; " + Style.sidebarLocation[1] + ": auto !important; " + agent + "transform: translateX(" + xOffset + "100%);}#qr:hover,#qr.has-focus,#qr.dump { " + agent + "transform: translateX(0);}#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.has-focus #qrtab,#qr.dump #qrtab { opacity: 0;}#qrtab input,#qrtab .close,#qrtab .rice,#qrtab .selectrice,#qrtab span { display: none;}", @@ -11619,7 +11607,7 @@ } else { position = aligner(2 + (_conf["4chan Banner"] === "at sidebar top" ? Style.logoOffset + 19 : 0), [notEither && _conf['Image Expansion'], true, true, _conf['Slideout Navigation'] !== 'hide', _conf['Announcements'] === 'slideout' && (psa = $('#globalMessage', d.body)) && !psa.hidden, _conf['Thread Watcher'] && _conf['Slideout Watcher'], notCatalog && $('body > a[style="cursor: pointer; float: right;"]', d.body), $('#navtopright .exlinksOptionsLink', d.body), notEither, g.VIEW === 'thread', notEither && _conf['Fappe Tyme'], navlinks = ((g.VIEW !== 'thread' && _conf['Index Navigation']) || (g.VIEW === 'thread' && _conf['Reply Navigation'])) && notCatalog, navlinks]); iconOffset = (20 + (g.VIEW === 'thread' && _conf['Updater Position'] === 'top' ? 100 : 0)) - (_conf['4chan SS Navigation'] ? 0 : Style.sidebar + parseInt(_conf[align.capitalize() + " Thread Padding"], 10)); - css += "/* Expand Images */\n#img-controls {\n top: " + position[i++] + "px;\n}\n/* Main Menu */\n#main-menu {\n top: " + position[i++] + "px;\n}\n/* 4chan X Options */\n#appchanOptions {\n top: " + position[i++] + "px;\n}\n/* Slideout Navigation */\n#boardNavDesktopFoot,\n#boardNavDesktopFoot::after {\n top: " + position[i++] + "px;\n}\n/* Global Message */\n#globalMessage,\n#globalMessage::after {\n top: " + position[i++] + "px;\n}\n/* Watcher */\n" + (_conf["Slideout Watcher"] ? "#watcher, #watcher::after" : "") + " {\n top: " + position[i++] + "px !important;\n}\n/* 4sight */\nbody > a[style=\"cursor: pointer; float: right;\"]::after {\n top: " + position[i++] + "px;\n}\n/* ExLinks */\n#navtopright .exlinksOptionsLink::after {\n top: " + position[i++] + "px;\n}\n/* 4chan Catalog */\n#catalog::after {\n top: " + position[i++] + "px;\n}\n/* Back */\ndiv.navLinks > a:first-of-type::after {\n top: " + position[i++] + "px;\n}\n/* Fappe Tyme */\n#fappeTyme {\n top: " + position[i++] + "px;\n}\n/* Thread Navigation Links */\n#navlinks a:first-of-type {\n top: " + position[i++] + "px !important;\n}\n#navlinks a:last-of-type {\n top: " + position[i++] + "px !important;\n}\n#navlinks a,\n#navtopright .exlinksOptionsLink::after,\n#appchanOptions,\n#boardNavDesktopFoot::after,\n#globalMessage::after,\n#img-controls,\n#main-menu,\n#fappeTyme,\n" + (_conf["Slideout Watcher"] ? "#watcher::after," : "") + "\nbody > a[style=\"cursor: pointer; float: right;\"]::after,\n#catalog::after,\ndiv.navLinks > a:first-of-type::after {\n " + align + ": 3px !important;\n}\n#boardNavDesktopFoot,\n#globalMessage,\n#watcher {\n width: " + (233 + Style.sidebarOffset.W) + "px !important;\n " + align + ": 18px !important;\n}\n.fixed.top #header-bar" + (_conf['Pagination'] === 'top' || _conf['Pagination'] === 'sticky top' ? ',\n.pagelist' : '') + " {\n " + (_conf['4chan SS Navigation'] ? "padding-" + align + ": " + iconOffset + "px;" : "margin-" + align + ": " + iconOffset + "px;") + "\n}"; + css += "/* Expand Images */\n#img-controls {\n top: " + position[i++] + "px;\n}\n/* Main Menu */\n#main-menu {\n top: " + position[i++] + "px;\n}\n/* 4chan X Options */\n#appchanOptions {\n top: " + position[i++] + "px;\n}\n/* Slideout Navigation */\n#boardNavDesktopFoot,\n#boardNavDesktopFoot::after {\n top: " + position[i++] + "px;\n}\n/* Global Message */\n#globalMessage,\n#globalMessage::after {\n top: " + position[i++] + "px;\n}\n/* Watcher */\n" + (_conf["Slideout Watcher"] ? "#watcher, #watcher::after" : "") + " {\n top: " + position[i++] + "px !important;\n}\n/* 4sight */\nbody > a[style=\"cursor: pointer; float: right;\"]::after {\n top: " + position[i++] + "px;\n}\n/* ExLinks */\n#navtopright .exlinksOptionsLink::after {\n top: " + position[i++] + "px;\n}\n/* 4chan Catalog */\n#catalog::after {\n top: " + position[i++] + "px;\n}\n/* Back */\ndiv.navLinks > a:first-of-type::after {\n top: " + position[i++] + "px;\n}\n/* Fappe Tyme */\n#fappeTyme {\n top: " + position[i++] + "px;\n}\n/* Thread Navigation Links */\n#navlinks a:first-of-type {\n top: " + position[i++] + "px !important;\n}\n#navlinks a:last-of-type {\n top: " + position[i++] + "px !important;\n}\n#navlinks a,\n#navtopright .exlinksOptionsLink::after,\n#appchanOptions,\n#boardNavDesktopFoot::after,\n#globalMessage::after,\n#img-controls,\n#main-menu,\n#fappeTyme,\n" + (_conf["Slideout Watcher"] ? "#watcher::after," : "") + "\nbody > a[style=\"cursor: pointer; float: right;\"]::after,\n#catalog::after,\ndiv.navLinks > a:first-of-type::after {\n " + align + ": 3px !important;\n}\n#boardNavDesktopFoot,\n#globalMessage,\n#watcher {\n " + Style.sizing + ": border-box;\n width: " + Style.sidebar + "px !important;\n " + align + ": 18px !important;\n}\n.fixed.top #header-bar" + (_conf['Pagination'] === 'top' || _conf['Pagination'] === 'sticky top' ? ',\n.pagelist' : '') + " {\n " + (_conf['4chan SS Navigation'] ? "padding-" + align + ": " + iconOffset + "px;" : "margin-" + align + ": " + iconOffset + "px;") + "\n}"; } return Style.icons.textContent = css; }, diff --git a/builds/crx/script.js b/builds/crx/script.js index 9ce05ed97..51ceaddc1 100644 --- a/builds/crx/script.js +++ b/builds/crx/script.js @@ -11458,28 +11458,20 @@ return "filter: url(\"data:image/svg+xml,#filters\");"; }, layout: function() { - var agent, css, editSpace, position, width, xOffset, _conf; + var agent, css, editSpace, width, xOffset, _conf; _conf = Conf; agent = Style.agent; xOffset = _conf["Sidebar Location"] === "left" ? '-' : ''; Style.pfOffset = _conf['4chan SS Navigation'] && ((_conf['Bottom Header'] && _conf['Fixed Header']) || (g.VIEW === 'index' && _conf['Pagination'] === 'sticky bottom')) ? 1.5 : 0; - position = { - right: { - hide: parseInt(_conf['Right Thread Padding'], 10) < 100 ? "right" : "left", - minimal: "right" - }[_conf["Sidebar"]] || "left", - left: parseInt(_conf['Right Thread Padding'], 10) < 100 ? "right" : "left" - }[_conf["Sidebar Location"]]; - Style['sidebarOffset'] = _conf['Sidebar'] === "large" ? { - W: 51, - H: 17 - } : { - W: 0, - H: 0 - }; - Style.logoOffset = _conf["4chan Banner"] === "at sidebar top" ? 83 + Style.sidebarOffset.H : 0; - width = 248 + Style.sidebarOffset.W; + Style.sidebar = { + minimal: 20, + hide: 2, + normal: 252, + large: 303 + }[_conf['Sidebar']]; + Style.logoOffset = _conf["4chan Banner"] === "at sidebar top" ? _conf["Sidebar"] === "large" ? 100 : 83 : 0; + width = _conf["Sidebar"] === "large" ? 299 : 248; Style.sidebarLocation = _conf["Sidebar Location"] === "left" ? ["left", "right"] : ["right", "left"]; if (_conf['editMode'] === "theme") { editSpace = {}; @@ -11491,10 +11483,6 @@ right: 0 }; } - Style.sidebar = { - minimal: 20, - hide: 2 - }[_conf['Sidebar']] || (252 + Style.sidebarOffset.W); Style.replyMargin = _conf["Post Spacing"]; return css = "/* Cleanup */\n#absbot,\n#boardNavDesktop,\n#delPassword,\n#delform > hr:last-of-type,\n#navbotright,\n#postForm,\n#search-label,\n#search-label-bottom,\n#styleSwitcher,\n#togglePostForm,\n.boardBanner > div,\n.mobile,\n.next form,\n.next span,\n.postingMode,\n.prev form,\n.prev span,\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,\n.hidden_thread ~ div,\n.hidden_thread ~ a,\n.replyContainer .stub ~ div,\n.replyContainer .stub ~ a,\n.stub + div,\n.thread > .stub:first-child ~ .postContainer,\n.thread > .stub:first-child ~ .summary,\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 z-index: 7;\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.fappeTyme .threadContainer > .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}\nbody.unscroll {\n overflow: hidden;\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}\nth {\n text-align: left;\n}\n.center {\n text-align: center;\n}\n.disabled {\n opacity: 0.5;\n}\n.pointer {\n cursor: pointer;\n}\n/* Symbols */\n.drop-marker {\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.brackets-wrap::before {\n content: \" [\";\n}\n.brackets-wrap::after {\n content: \"] \";\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/* Header */\n#header-bar {\n z-index: 6;\n border-width: 1px;\n" + (_conf['4chan SS Navigation'] ? " left: 0; right: 0; border-left: 0; border-right: 0; border-radius: 0 !important;" : " " + Style.sidebarLocation[0] + ": " + (Style.sidebar + parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]) + "px; " + Style.sidebarLocation[1] + ": " + (parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"] + 2) + "px;") + "\n" + (_conf["Hide Navigation Decorations"] ? " font-size: 0; color: transparent; word-spacing: 2px;" : "") + "\n text-align: " + _conf["Navigation Alignment"] + ";\n}\n#shortcuts {\n float: right;\n}\n.fixed #header-bar.autohide {\n z-index: 24;\n}\n.fixed #header-bar {\n position: fixed;\n}\n.top #header-bar {\n top: 0;\n border-top-width: 0;\n " + (_conf["Rounded Edges"] ? "border-radius: 0 0 3px 3px;" : "") + "\"\n}\n.fixed.bottom #header-bar {\n bottom: 0;\n border-bottom-width: 0;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px 3px 0 0;" : "") + "\"\n}\n.hide #header-bar {\n position: fixed;\n top: 110%;\n bottom: auto;\n}\n/* Header Autohide */\n.fixed #header-bar.autohide:not(:hover) {\n box-shadow: none;\n transition: all .8s .6s cubic-bezier(.55, .055, .675, .19);\n}\n.fixed.top #header-bar.autohide:not(:hover) {\n margin-bottom: -1em;\n " + agent + "transform: translateY(-100%);\n}\n.fixed.bottom #header-bar.autohide:not(:hover) {\n " + agent + "transform: translateY(100%);\n}\n#scroll-marker {\n left: 0;\n right: 0;\n height: 10px;\n position: absolute;\n}\n#header-bar #scroll-marker {\n display: none;\n}\n.fixed #header-bar #scroll-marker {\n display: block;\n}\n.fixed.top header-bar #scroll-marker {\n top: 100%;\n}\n.fixed.bottom #header-bar #scroll-marker {\n bottom: 100%;\n}\n/* Notifications */\n#notifications {\n position: fixed;\n top: 0;\n text-align: center;\n right: 0;\n left: 0;\n transition: all .8s .6s cubic-bezier(.55, .055, .675, .19);\n}\n.fixed.top #header-bar #notifications {\n position: absolute;\n top: 100%;\n}\n.notification {\n font-family: " + _conf["Font"] + ";\n font-size: " + (parseInt(_conf["Font Size"], 10)) + ";\n color: #fff;\n font-weight: 700;\n text-shadow: 0 1px 2px rgba(0, 0, 0, .5);\n box-shadow: 0 1px 2px rgba(0, 0, 0, .15);\n border-radius: 2px;\n margin: 1px auto;\n width: 500px;\n max-width: 100%;\n position: relative;\n transition: all .25s ease-in-out;\n}\n.notification.error {\n background-color: hsla(0, 100%, 38%, .9);\n}\n.notification.warning {\n background-color: hsla(36, 100%, 38%, .9);\n}\n.notification.info {\n background-color: hsla(200, 100%, 38%, .9);\n}\n.notification.success {\n background-color: hsla(104, 100%, 38%, .9);\n}\n.notification a {\n color: #fff;\n}\n.notification > .close {\n padding: 6px;\n top: 0;\n right: 5px;\n position: absolute;\n color: #fff;\n}\n.message {\n " + Style.sizing + ": border-box;\n padding: 6px 20px;\n max-height: 200px;\n width: 100%;\n overflow: auto;\n}\n/* Main Menu */\n#main-menu {\n margin: 0;\n border: 2px solid;\n border-radius: 10px;\n height: 14px;\n width: 14px;\n " + Style.sizing + ": border-box;\n border-color: rgb(130,130,130);\n color: rgb(130,130,130);\n}\n#main-menu::after {\n content: '';\n font-size: 10px;\n position: absolute;\n top: 50%;\n left: 50%;\n " + agent + "transform: translate(-60%, -50%);\n display: block;\n border-top: 5px solid rgb(130, 130, 130);\n border-left: 3px solid transparent;\n border-right: 3px solid transparent;\n width: 7px;\n " + Style.sizing + ": border-box;\n}\n/* Updater / Thread Stats */\n.float #thread-stats,\n.float #updater {\n position: fixed;\n}\n#update-status.new::after {\n content: ', ';\n}\n/* Pagination */\n.pagelist {\n border-width: 1px;\n text-align: " + _conf["Pagination Alignment"] + ";\n" + (_conf['4chan SS Navigation'] ? " left: 0; right: 0; border-left: 0; border-right: 0; border-radius: 0 !important;" : " " + Style.sidebarLocation[0] + ": " + (Style.sidebar + parseInt(_conf["Right Thread Padding"], 10) + editSpace["right"]) + "px; " + Style.sidebarLocation[1] + ": " + (parseInt(_conf["Left Thread Padding"], 10) + editSpace["left"] + 2) + "px;") + "\n" + { "sticky top": " position: fixed; top: 0; border-top-width: 0; " + (_conf["Rounded Edges"] ? "border-radius: 0 0 3px 3px;" : ""), @@ -11502,7 +11490,7 @@ "top": " position: static; border-top-width: 0; " + (_conf["Rounded Edges"] ? "border-radius: 0 0 3px 3px;" : ""), "bottom": " position: static; " + (_conf["Rounded Edges"] ? "border-radius: 3px 3px 0 0;" : ""), "hide": " display: none;", - "on side": " position: fixed; padding: 0; top: auto; bottom: " + (['fixed', 'transparent fade'].contains(_conf['Post Form Style']) ? 21.6 + (Conf['Show Post Form Header'] ? 1.5 : 0) + (Conf['Post Form Decorations'] ? 0.2 : 0) : .5) + "em; " + Style.sidebarLocation[1] + ": auto; " + Style.sidebarLocation[0] + ": " + (250 + Style.sidebarOffset.W) + "px position: fixed;" + (Style.sidebarLocation[0] === 'right' ? " " + agent + "transform: rotate(90deg); " + agent + "transform-origin: bottom right;" : " " + agent + "transform: rotate(-90deg); " + agent + "transform-origin: bottom left;") + " z-index: 6; margin: 0; background: none transparent !important; border: 0 none !important; text-align: right;" + "on side": " position: fixed; padding: 0; top: auto; bottom: " + (['fixed', 'transparent fade'].contains(_conf['Post Form Style']) ? 21.6 + (Conf['Show Post Form Header'] ? 1.5 : 0) + (Conf['Post Form Decorations'] ? 0.2 : 0) : .5) + "em; " + Style.sidebarLocation[1] + ": auto; " + Style.sidebarLocation[0] + ": " + (Style.sidebar - 2) + "px position: fixed;" + (Style.sidebarLocation[0] === 'right' ? " " + agent + "transform: rotate(90deg); " + agent + "transform-origin: bottom right;" : " " + agent + "transform: rotate(-90deg); " + agent + "transform-origin: bottom left;") + " z-index: 6; margin: 0; background: none transparent !important; border: 0 none !important; text-align: right;" }[_conf['Pagination']] + "\n" + (_conf["Hide Navigation Decorations"] ? " font-size: 0; color: transparent; word-spacing: 0;" : "") + "\n z-index: 6;\n}\n.pagelist input,\n.pagelist div {\n vertical-align: middle;\n}\n#header-bar a {\n font-size: " + (parseInt(_conf["Font Size"], 10)) + "px;\n}\n" + (_conf["Hide Navigation Decorations"] ? ".pages a { margin: 0 1px; font-size: " + (parseInt(_conf["Font Size"], 10)) + "px;}" : "") + "\n.next,\n.pages,\n.prev {\n display: inline-block;\n margin: 0 3px;\n}\n/* Banner */\n.boardBanner {\n line-height: 0;\n}\n" + (_conf["Faded 4chan Banner"] ? ".boardBanner { opacity: 0.5; " + agent + "transition: opacity 0.3s ease-in-out .5s;}.boardBanner:hover { opacity: 1; " + agent + "transition: opacity 0.3s ease-in;}" : "") + "\n" + (_conf["4chan Banner Reflection"] ? "/* From 4chan SS / OneeChan */.gecko .boardBanner::after { background-image: -moz-element(#Banner); bottom: -100%; content: ''; left: 0; mask: url(\"data:image/svg+xml, #mask\"); opacity: 0.3; position: absolute; right: 0; top: 100%; -moz-transform: scaleY(-1); z-index: -1;}.webkit #Banner { -webkit-box-reflect: below 0 -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0) 10%, rgba(255,255,255,.5));}" : "") + "\n" + { "at sidebar top": ".boardBanner { position: fixed; top: 16px; " + Style.sidebarLocation[0] + ": 2px;}.boardBanner img { width: " + width + "px;}", "at sidebar bottom": ".boardBanner { position: fixed; bottom: 270px; " + Style.sidebarLocation[0] + ": 2px;}.boardBanner img { width: " + width + "px;}", @@ -11526,7 +11514,7 @@ "lower left": ".container { padding: 0 5px; max-width: 100%;}.reply.quoted { position: relative; padding-bottom: 1.7em;}.reply .container { position: absolute; left: 0; bottom: 0; padding: 0 5px;}.reply .container::before { content: 'REPLIES: ';}#qp .container { position: static; max-width: 100%;}#qp .container::before { content: '';}.inline .container { position: static; max-width: 100%;}.inline .container::before { content: '';}", 'lower right': ".reply.quoted { position: relative; padding-bottom: 1.7em;}.reply .container { position: absolute; right: 0; bottom: 0;}.container::before { content: 'REPLIES: ';}.container { max-width: 100%; padding: 0 5px;}#qp .container { position: static; max-width: 100%;}#qp .container::before { content: '';}.inline .container { position: static; float: none;}.inline .container::before { content: '';}", 'default': "" - }[_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 { display: block; text-align: right;}" : "") + "\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#settings .selectrice {\n display: inline-block;\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 {\n padding: 0;\n margin: 0;\n position: fixed;\n max-height: 120px;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 32;\n}\n#selectrice:empty {\n display: none;\n}\n/* Post Form Shortcut */\n.qr-shortcut.on-page {\n font-size: 250%;\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" + ({ + }[_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 1em 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-left: .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: 0;\n}\n.submenu {\n display: none;\n position: absolute;\n top: -1px;\n}\n.focused .submenu {\n display: block;\n}\n/* Stubs */\n" + (_conf['Fit Width Replies'] ? ".stub { display: block; text-align: right;}" : "") + "\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#settings .selectrice {\n display: inline-block;\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 {\n padding: 0;\n margin: 0;\n position: fixed;\n max-height: 120px;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 32;\n}\n#selectrice:empty {\n display: none;\n}\n/* Post Form Shortcut */\n.qr-shortcut.on-page {\n font-size: 250%;\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: " + Style.pfOffset + "em !important; " + Style.sidebarLocation[0] + ": 0 !important; " + Style.sidebarLocation[1] + ": auto !important;}", "slideout": "#qrtab input,#qrtab .rice { display: none;}#qr { top: auto !important; bottom: " + Style.pfOffset + "em !important; " + Style.sidebarLocation[0] + ": 0 !important; " + Style.sidebarLocation[1] + ": auto !important; " + agent + "transform: translateX(" + xOffset + "93%);}#qr:hover,#qr.has-focus,#qr.dump { " + agent + "transform: translate(0);}", "tabbed slideout": "#qr { top: auto !important; bottom: " + Style.pfOffset + "em !important; " + Style.sidebarLocation[0] + ": 0 !important; " + Style.sidebarLocation[1] + ": auto !important; " + agent + "transform: translateX(" + xOffset + "100%);}#qr:hover,#qr.has-focus,#qr.dump { " + agent + "transform: translateX(0);}#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.has-focus #qrtab,#qr.dump #qrtab { opacity: 0;}#qrtab input,#qrtab .close,#qrtab .rice,#qrtab .selectrice,#qrtab span { display: none;}", @@ -11601,7 +11589,7 @@ } else { position = aligner(2 + (_conf["4chan Banner"] === "at sidebar top" ? Style.logoOffset + 19 : 0), [notEither && _conf['Image Expansion'], true, true, _conf['Slideout Navigation'] !== 'hide', _conf['Announcements'] === 'slideout' && (psa = $('#globalMessage', d.body)) && !psa.hidden, _conf['Thread Watcher'] && _conf['Slideout Watcher'], notCatalog && $('body > a[style="cursor: pointer; float: right;"]', d.body), $('#navtopright .exlinksOptionsLink', d.body), notEither, g.VIEW === 'thread', notEither && _conf['Fappe Tyme'], navlinks = ((g.VIEW !== 'thread' && _conf['Index Navigation']) || (g.VIEW === 'thread' && _conf['Reply Navigation'])) && notCatalog, navlinks]); iconOffset = (20 + (g.VIEW === 'thread' && _conf['Updater Position'] === 'top' ? 100 : 0)) - (_conf['4chan SS Navigation'] ? 0 : Style.sidebar + parseInt(_conf[align.capitalize() + " Thread Padding"], 10)); - css += "/* Expand Images */\n#img-controls {\n top: " + position[i++] + "px;\n}\n/* Main Menu */\n#main-menu {\n top: " + position[i++] + "px;\n}\n/* 4chan X Options */\n#appchanOptions {\n top: " + position[i++] + "px;\n}\n/* Slideout Navigation */\n#boardNavDesktopFoot,\n#boardNavDesktopFoot::after {\n top: " + position[i++] + "px;\n}\n/* Global Message */\n#globalMessage,\n#globalMessage::after {\n top: " + position[i++] + "px;\n}\n/* Watcher */\n" + (_conf["Slideout Watcher"] ? "#watcher, #watcher::after" : "") + " {\n top: " + position[i++] + "px !important;\n}\n/* 4sight */\nbody > a[style=\"cursor: pointer; float: right;\"]::after {\n top: " + position[i++] + "px;\n}\n/* ExLinks */\n#navtopright .exlinksOptionsLink::after {\n top: " + position[i++] + "px;\n}\n/* 4chan Catalog */\n#catalog::after {\n top: " + position[i++] + "px;\n}\n/* Back */\ndiv.navLinks > a:first-of-type::after {\n top: " + position[i++] + "px;\n}\n/* Fappe Tyme */\n#fappeTyme {\n top: " + position[i++] + "px;\n}\n/* Thread Navigation Links */\n#navlinks a:first-of-type {\n top: " + position[i++] + "px !important;\n}\n#navlinks a:last-of-type {\n top: " + position[i++] + "px !important;\n}\n#navlinks a,\n#navtopright .exlinksOptionsLink::after,\n#appchanOptions,\n#boardNavDesktopFoot::after,\n#globalMessage::after,\n#img-controls,\n#main-menu,\n#fappeTyme,\n" + (_conf["Slideout Watcher"] ? "#watcher::after," : "") + "\nbody > a[style=\"cursor: pointer; float: right;\"]::after,\n#catalog::after,\ndiv.navLinks > a:first-of-type::after {\n " + align + ": 3px !important;\n}\n#boardNavDesktopFoot,\n#globalMessage,\n#watcher {\n width: " + (233 + Style.sidebarOffset.W) + "px !important;\n " + align + ": 18px !important;\n}\n.fixed.top #header-bar" + (_conf['Pagination'] === 'top' || _conf['Pagination'] === 'sticky top' ? ',\n.pagelist' : '') + " {\n " + (_conf['4chan SS Navigation'] ? "padding-" + align + ": " + iconOffset + "px;" : "margin-" + align + ": " + iconOffset + "px;") + "\n}"; + css += "/* Expand Images */\n#img-controls {\n top: " + position[i++] + "px;\n}\n/* Main Menu */\n#main-menu {\n top: " + position[i++] + "px;\n}\n/* 4chan X Options */\n#appchanOptions {\n top: " + position[i++] + "px;\n}\n/* Slideout Navigation */\n#boardNavDesktopFoot,\n#boardNavDesktopFoot::after {\n top: " + position[i++] + "px;\n}\n/* Global Message */\n#globalMessage,\n#globalMessage::after {\n top: " + position[i++] + "px;\n}\n/* Watcher */\n" + (_conf["Slideout Watcher"] ? "#watcher, #watcher::after" : "") + " {\n top: " + position[i++] + "px !important;\n}\n/* 4sight */\nbody > a[style=\"cursor: pointer; float: right;\"]::after {\n top: " + position[i++] + "px;\n}\n/* ExLinks */\n#navtopright .exlinksOptionsLink::after {\n top: " + position[i++] + "px;\n}\n/* 4chan Catalog */\n#catalog::after {\n top: " + position[i++] + "px;\n}\n/* Back */\ndiv.navLinks > a:first-of-type::after {\n top: " + position[i++] + "px;\n}\n/* Fappe Tyme */\n#fappeTyme {\n top: " + position[i++] + "px;\n}\n/* Thread Navigation Links */\n#navlinks a:first-of-type {\n top: " + position[i++] + "px !important;\n}\n#navlinks a:last-of-type {\n top: " + position[i++] + "px !important;\n}\n#navlinks a,\n#navtopright .exlinksOptionsLink::after,\n#appchanOptions,\n#boardNavDesktopFoot::after,\n#globalMessage::after,\n#img-controls,\n#main-menu,\n#fappeTyme,\n" + (_conf["Slideout Watcher"] ? "#watcher::after," : "") + "\nbody > a[style=\"cursor: pointer; float: right;\"]::after,\n#catalog::after,\ndiv.navLinks > a:first-of-type::after {\n " + align + ": 3px !important;\n}\n#boardNavDesktopFoot,\n#globalMessage,\n#watcher {\n " + Style.sizing + ": border-box;\n width: " + Style.sidebar + "px !important;\n " + align + ": 18px !important;\n}\n.fixed.top #header-bar" + (_conf['Pagination'] === 'top' || _conf['Pagination'] === 'sticky top' ? ',\n.pagelist' : '') + " {\n " + (_conf['4chan SS Navigation'] ? "padding-" + align + ": " + iconOffset + "px;" : "margin-" + align + ": " + iconOffset + "px;") + "\n}"; } return Style.icons.textContent = css; }, diff --git a/src/General/css/icons.vert.css b/src/General/css/icons.vert.css index 09ac11719..c1049aa63 100644 --- a/src/General/css/icons.vert.css +++ b/src/General/css/icons.vert.css @@ -69,7 +69,8 @@ div.navLinks > a:first-of-type::after { #boardNavDesktopFoot, #globalMessage, #watcher { - width: #{233 + Style.sidebarOffset.W}px !important; + #{Style.sizing}: border-box; + width: #{Style.sidebar}px !important; #{align}: 18px !important; } .fixed.top #header-bar#{if _conf['Pagination'] is 'top' or _conf['Pagination'] is 'sticky top' then ',\n.pagelist' else ''} { diff --git a/src/General/css/layout.css b/src/General/css/layout.css index 905e0c526..7b274ed7e 100644 --- a/src/General/css/layout.css +++ b/src/General/css/layout.css @@ -375,7 +375,7 @@ else " top: auto; bottom: #{if ['fixed', 'transparent fade'].contains(_conf['Post Form Style']) then (21.6 + (if Conf['Show Post Form Header'] then 1.5 else 0) + (if Conf['Post Form Decorations'] then 0.2 else 0)) else .5}em; #{Style.sidebarLocation[1]}: auto; - #{Style.sidebarLocation[0]}: #{250 + Style.sidebarOffset.W}px + #{Style.sidebarLocation[0]}: #{Style.sidebar - 2}px position: fixed; #{if Style.sidebarLocation[0] is 'right' then " #{agent}transform: rotate(90deg); @@ -1054,7 +1054,7 @@ if _conf["Filtered Backlinks"] then " cursor: pointer; display: block; outline: none; - padding: 3px 7px; + padding: 3px 1em 3px 7px; position: relative; text-decoration: none; white-space: nowrap; @@ -1064,18 +1064,17 @@ if _conf["Filtered Backlinks"] then " } .has-submenu::after { content: ""; - border-#{position}: .5em solid; + border-left: .5em solid; border-top: .3em solid transparent; border-bottom: .3em solid transparent; display: inline-block; margin: .3em; position: absolute; - right: 3px; + right: 0; } .submenu { display: none; position: absolute; - #{position}: 100%; top: -1px; } .focused .submenu { diff --git a/src/Theming/Style.coffee b/src/Theming/Style.coffee index d9001ce3f..00e5eb12d 100644 --- a/src/Theming/Style.coffee +++ b/src/Theming/Style.coffee @@ -157,44 +157,27 @@ Style = else 0 - # Position of submenus in relation to the post menu. - position = { - right: - { - hide: - if parseInt(_conf['Right Thread Padding'], 10) < 100 - "right" - else - "left" - minimal: "right" - }[_conf["Sidebar"]] or "left" - left: - if parseInt(_conf['Right Thread Padding'], 10) < 100 - "right" - else - "left" - }[_conf["Sidebar Location"]] - - # Offsets various UI of the sidebar depending on the sidebar's width. - # Only really used for the board banner or right sidebar. - Style['sidebarOffset'] = if _conf['Sidebar'] is "large" - { - W: 51 - H: 17 - } - else - { - W: 0 - H: 0 - } + Style.sidebar = { + minimal: 20 + hide: 2 + normal: 252 + large: 303 + }[_conf['Sidebar']] Style.logoOffset = if _conf["4chan Banner"] is "at sidebar top" - 83 + Style.sidebarOffset.H + if _conf["Sidebar"] is "large" + 100 + else + 83 else 0 - width = 248 + Style.sidebarOffset.W + width = + if _conf["Sidebar"] is "large" + 299 + else + 248 Style.sidebarLocation = if _conf["Sidebar Location"] is "left" ["left", "right"] @@ -210,11 +193,6 @@ Style = left: 0 right: 0 - Style.sidebar = { - minimal: 20 - hide: 2 - }[_conf['Sidebar']] or (252 + Style.sidebarOffset.W) - Style.replyMargin = _conf["Post Spacing"] css = """<%= grunt.file.read('src/General/css/layout.css') %>"""