From 46af845baaa4740902a077aaf9d2469ab4664ad7 Mon Sep 17 00:00:00 2001 From: Zixaphir Date: Mon, 8 Apr 2013 15:01:11 -0700 Subject: [PATCH] Fix image expansion icon Make menu an icon too. --- appchan-x.user.js | 16 ++++++++-------- css/icons.base.css | 22 +++++++++++----------- css/icons.horz.css | 11 +++++++++-- css/icons.vert.css | 13 ++++++++++--- css/layout.css | 28 +++++++--------------------- css/theme.css | 12 ++++++++---- src/appchan.coffee | 2 ++ src/features.coffee | 4 ++-- 8 files changed, 57 insertions(+), 51 deletions(-) diff --git a/appchan-x.user.js b/appchan-x.user.js index 485b6304e..6463b274f 100644 --- a/appchan-x.user.js +++ b/appchan-x.user.js @@ -3478,7 +3478,7 @@ "under post form": " position: fixed; " + Style.sidebarLocation[0] + ": 2px; bottom: 140px; width: " + width + "px;", "at top": " margin: 12px 0;", "hide": " display: none;" - }[_conf["Board Title"]] + "\n}\n.boardTitle a {\n font-size: " + (parseInt(_conf["Font Size"], 10) + 10) + "px;\n}\n.boardSubtitle,\n.boardSubtitle a {\n font-size: " + (parseInt(_conf["Font Size"], 10) - 1) + "px;\n}\n/* Dialogs */\n.move {\n cursor: pointer;\n}\n#ihover {\n position: fixed;\n max-height: 97%;\n max-width: 75%;\n padding: 10px;\n z-index: 22;\n}\n#qp {\n position: fixed;\n z-index: 22;\n}\n#qp .postMessage::after {\n clear: both;\n display: block;\n content: \"\";\n}\n#qp .fullSize {\n max-height: 300px;\n max-width: 500px;\n}\n#menu {\n position: absolute;\n outline: none;\n z-index: 22;\n}\n/* Updater */\n#updater {\n position: fixed;\n z-index: 10;\n padding: 0 1px 1px;\n border: 1px solid transparent;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px;" : "") + "\n}\n#updater:not(:hover) > div:not(.move) {\n display: none;\n}\n#updater input {\n text-align: right;\n}\n#updater .rice {\n float: left;\n}\n#updater .field {\n width: 50px;\n}\n/* Stats */\n#stats {\n position: fixed;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px;" : "") + "\n}\n/* Image Expansion */\n#imgControls .rice {\n display: none;\n}\n#imgControls {\n width: 15px;\n overflow-x: hidden;\n overflow-y: visible;\n}\n#imgContainer {\n float: " + Style.sidebarLocation[0] + ";\n}\n#imgContainer,\n#imgControls:hover {\n width: 110px;\n}\n#imgControls label {\n float: " + Style.sidebarLocation[0] + ";\n}\n#imgControls .selectrice {\n float: " + Style.sidebarLocation[1] + ";\n width: 90px;\n}\n.fitwidth .fullSize {\n max-width: 100%;\n width: 100%;\n}\n\n" + (_conf['Images Overlap Post Form'] ? ".fullSize { position: relative; z-index: 22;}" : "") + "\n/* Prefetcher */\n#prefetch {\n z-index: 9;\n position: fixed;\n}\n/* Delete Buttons */\n" + (_conf['Hide Delete UI'] ? ".deleteform,.post .rice { display: none;}.postInfo { padding: 0 0 0 3px;}" : ".deleteform { position: fixed; z-index: 18; width: 0; bottom: 0; right: 0; border-width: 1px 0 0 1px; border-style: solid; font-size: 0; color: transparent;}.deleteform:hover { width: auto;}.deleteform::before { z-index: 18; border-width: 1px 0 0 1px; border-style: solid; content: 'X'; display: block; position: fixed; bottom: 0; right: 0; font-size: " + _conf['Font Size'] + "px; " + Style.sizing + ": border-box; height: 1.6em; width: 1.4em; text-align: center;}.deleteform:hover::before { display: none;}.deleteform input { margin: 0 1px 0 0;}") + "\n/* Slideout Navigation */\n#boardNavDesktopFoot {\n position: fixed;\n width: " + width + "px;\n " + Style.sidebarLocation[0] + ": 2px;\n text-align: center;\n font-size: 0;\n color: transparent;\n overflow: hidden;\n " + Style.sizing + ": border-box;\n}\n#boardNavDesktopFoot a,\n#boardNavDesktopFoot a::after,\n#boardNavDesktopFoot a::before {\n font-size: " + _conf['Font Size'] + "px;\n}\n#boardNavDesktopFoot:hover {\n overflow-y: auto;\n padding: 2px;\n}\n#boardNavDesktopFoot:not(:hover) {\n border-color: transparent;\n background-color: transparent;\n height: 0;\n overflow: hidden;\n padding: 0;\n border: 0 none;\n}\n" + { + }[_conf["Board Title"]] + "\n}\n.boardTitle a {\n font-size: " + (parseInt(_conf["Font Size"], 10) + 10) + "px;\n}\n.boardSubtitle,\n.boardSubtitle a {\n font-size: " + (parseInt(_conf["Font Size"], 10) - 1) + "px;\n}\n/* Dialogs */\n.move {\n cursor: pointer;\n}\n#ihover {\n position: fixed;\n max-height: 97%;\n max-width: 75%;\n padding: 10px;\n z-index: 22;\n}\n#qp {\n position: fixed;\n z-index: 22;\n}\n#qp .postMessage::after {\n clear: both;\n display: block;\n content: \"\";\n}\n#qp .fullSize {\n max-height: 300px;\n max-width: 500px;\n}\n#menu {\n position: absolute;\n outline: none;\n z-index: 22;\n}\n/* Updater */\n#updater {\n position: fixed;\n z-index: 10;\n padding: 0 1px 1px;\n border: 1px solid transparent;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px;" : "") + "\n}\n#updater:not(:hover) > div:not(.move) {\n display: none;\n}\n#updater input {\n text-align: right;\n}\n#updater .rice {\n float: left;\n}\n#updater .field {\n width: 50px;\n}\n/* Stats */\n#stats {\n position: fixed;\n " + (_conf["Rounded Edges"] ? "border-radius: 3px;" : "") + "\n}\n/* Image Expansion */\n#imgControls .menu-button {\n margin: 0;\n}\n#imgControls .dropmarker {\n margin: 1px;\n border-top-width: 13px;\n border-right-width: 7px;\n border-left-width: 7px;\n}\n.fitwidth .fullSize {\n max-width: 100%;\n width: 100%;\n}\n" + (_conf['Images Overlap Post Form'] ? ".fullSize { position: relative; z-index: 22;}" : "") + "\n/* Prefetcher */\n#prefetch {\n z-index: 9;\n position: fixed;\n}\n/* Delete Buttons */\n" + (_conf['Hide Delete UI'] ? ".deleteform,.post .rice { display: none;}.postInfo { padding: 0 0 0 3px;}" : ".deleteform { position: fixed; z-index: 18; width: 0; bottom: 0; right: 0; border-width: 1px 0 0 1px; border-style: solid; font-size: 0; color: transparent;}.deleteform:hover { width: auto;}.deleteform::before { z-index: 18; border-width: 1px 0 0 1px; border-style: solid; content: 'X'; display: block; position: fixed; bottom: 0; right: 0; font-size: " + _conf['Font Size'] + "px; " + Style.sizing + ": border-box; height: 1.6em; width: 1.4em; text-align: center;}.deleteform:hover::before { display: none;}.deleteform input { margin: 0 1px 0 0;}") + "\n/* Slideout Navigation */\n#boardNavDesktopFoot {\n position: fixed;\n width: " + width + "px;\n " + Style.sidebarLocation[0] + ": 2px;\n text-align: center;\n font-size: 0;\n color: transparent;\n overflow: hidden;\n " + Style.sizing + ": border-box;\n}\n#boardNavDesktopFoot a,\n#boardNavDesktopFoot a::after,\n#boardNavDesktopFoot a::before {\n font-size: " + _conf['Font Size'] + "px;\n}\n#boardNavDesktopFoot:hover {\n overflow-y: auto;\n padding: 2px;\n}\n#boardNavDesktopFoot:not(:hover) {\n border-color: transparent;\n background-color: transparent;\n height: 0;\n overflow: hidden;\n padding: 0;\n border: 0 none;\n}\n" + { compact: "#boardNavDesktopFoot { word-spacing: 1px;}", list: "#boardNavDesktopFoot a { display: block;}#boardNavDesktopFoot:hover { max-height: 400px;}#boardNavDesktopFoot a::after { content: ' - ' attr(title);}#boardNavDesktopFoot a[href*='//boards.4chan.org/']::after,#boardNavDesktopFoot a[href*='//rs.4chan.org/']::after { content: '/ - ' attr(title);}#boardNavDesktopFoot a[href*='//boards.4chan.org/']::before,#boardNavDesktopFoot a[href*='//rs.4chan.org/']::before { content: '/';}", hide: "#boardNavDesktopFoot { display: none;}" @@ -3501,12 +3501,12 @@ 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#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"]; + 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(130,130,130);\n}\n#navlinks a:last-of-type {\n border-top: 11px solid rgb(130,130,130);\n}\n#imgControls .dropmarker,\n#imgControls .dropmarker:hover {\n border-top-color: rgb(130,130,130);\n}\n#charCount {\n color: " + (Style.lightTheme ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.7)") + ";\n}\n.postNum a {\n color: " + theme["Post Numbers"] + ";\n}\n.subject {\n color: " + theme["Subjects"] + " !important;\n}\n.dateTime,\n.post-ago {\n color: " + theme["Timestamps"] + " !important;\n}\n#fs_status a,\n#updater #count:not(.new)::after,\n#showQR,\n#updater,\n.abbr,\n.boxbar,\n.boxcontent,\n.deleteform::before,\n.pages strong,\n.pln,\n.reply,\n.reply.highlight,\n.summary,\nbody,\nbutton,\nspan[style=\"left: 5px; position: absolute;\"] a,\ninput,\ntextarea {\n color: " + theme["Text"] + ";\n}\n#exlinks-options-content > table,\n#appchanx-settings 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 .expand-all-shortcut,\n#imgControls .contract-all-shortcut,\n#catalog::after,\n#fappeTyme {\n background-image: url('" + icons + "');\n" + (!Style.lightTheme ? "filter: url(\"data:image/svg+xml,#filters\");" : "") + "\n}\n" + theme["Custom CSS"]; }, iconPositions: function() { var align, aligner, css, i, iconOffset, navlinks, notCatalog, notEither, position, _conf; - css = "#navtopright .exlinksOptionsLink::after,\n#appchanOptions,\nbody > div.navLinks > a:first-of-type::after,\n" + (Conf['Slideout Watcher'] ? '#watcher::after,' : '') + "\n" + (Conf['Announcements'] === 'slideout' ? '#globalMessage::after,' : '') + "\n#boardNavDesktopFoot::after,\nbody > a[style=\"cursor: pointer; float: right;\"]::after,\n#imgControls label:first-of-type::after,\n#catalog::after,\n#fappeTyme {\n z-index: 18;\n position: fixed;\n display: block;\n width: 15px;\n height: 15px;\n content: \"\";\n overflow: hidden;\n opacity: " + (Conf['Invisible Icons'] ? 0 : 0.5) + ";\n}\n#navtopright .exlinksOptionsLink,\nbody > div.navLinks > a:first-of-type,\n" + (Conf['Slideout Watcher'] ? '#watcher,' : '') + "\n" + (Conf['Announcements'] === 'slideout' ? '#globalMessage,' : '') + "\n#boardNavDesktopFoot,\nbody > a[style=\"cursor: pointer; float: right;\"],\n#catalog {\n z-index: 16;\n}\n#navtopright .exlinksOptionsLink:hover,\nbody > div.navLinks > a:first-of-type:hover,\n" + (Conf['Slideout Watcher'] ? '#watcher:hover,' : '') + "\n" + (Conf['Announcements'] === 'slideout' ? '#globalMessage:hover,' : '') + "\n#boardNavDesktopFoot:hover,\nbody > a[style=\"cursor: pointer; float: right;\"]:hover,\n#catalog:hover {\n z-index: 17;\n}\n#imgControls {\n z-index: 19;\n}\n#imgControls {\n position: fixed;\n}\n#appchanOptions {\n visibility: visible;\n background-position: 0 0;\n}\nbody > div.navLinks > a:first-of-type::after {\n cursor: pointer;\n background-position: 0 -15px;\n}\n#watcher::after {\n background-position: 0 -30px;\n}\n#globalMessage::after {\n background-position: 0 -45px;\n}\n#boardNavDesktopFoot::after {\n background-position: 0 -60px;\n}\nbody > a[style=\"cursor: pointer; float: right;\"]::after {\n visibility: visible;\n cursor: pointer;\n background-position: 0 -75px;\n}\n#imgControls label:first-of-type::after {\n position: static;\n background-position: 0 -90px;\n}\n#navtopright .exlinksOptionsLink::after {\n background-position: 0 -105px;\n}\n#catalog::after {\n visibility: visible;\n background-position: 0 -120px;\n}\n#fappeTyme {\n background-position: 0 -135px;\n}\n#boardNavDesktopFoot:hover::after,\n#globalMessage:hover::after,\n#imgControls label:hover:first-of-type::after,\n#navlinks a:hover,\n#appchanOptions:hover,\n#navtopright .exlinksOptionsLink:hover::after,\n#qr #qrtab,\n#watcher:hover::after,\n.thumbnail#selected,\nbody > a[style=\"cursor: pointer; float: right;\"]:hover::after,\ndiv.navLinks > a:first-of-type:hover::after,\n#catalog:hover::after,\n#fappeTyme:hover {\n opacity: 1;\n}"; + css = "#navtopright .exlinksOptionsLink::after,\n#appchanOptions,\nbody > div.navLinks > a:first-of-type::after,\n" + (Conf['Slideout Watcher'] ? '#watcher::after,' : '') + "\n" + (Conf['Announcements'] === 'slideout' ? '#globalMessage::after,' : '') + "\n#boardNavDesktopFoot::after,\nbody > a[style=\"cursor: pointer; float: right;\"]::after,\n#imgControls .expand-all-shortcut,\n#imgControls .contract-all-shortcut,\n#imgControls .menu-button,\n#catalog::after,\n#fappeTyme {\n z-index: 18;\n position: fixed;\n display: block;\n width: 15px;\n height: 15px;\n content: \"\";\n opacity: " + (Conf['Invisible Icons'] ? 0 : 0.5) + ";\n}\n#navtopright .exlinksOptionsLink,\nbody > div.navLinks > a:first-of-type,\n" + (Conf['Slideout Watcher'] ? '#watcher,' : '') + "\n" + (Conf['Announcements'] === 'slideout' ? '#globalMessage,' : '') + "\n#boardNavDesktopFoot,\nbody > a[style=\"cursor: pointer; float: right;\"],\n#catalog {\n z-index: 16;\n}\n#navtopright .exlinksOptionsLink:hover,\nbody > div.navLinks > a:first-of-type:hover,\n" + (Conf['Slideout Watcher'] ? '#watcher:hover,' : '') + "\n" + (Conf['Announcements'] === 'slideout' ? '#globalMessage:hover,' : '') + "\n#boardNavDesktopFoot:hover,\nbody > a[style=\"cursor: pointer; float: right;\"]:hover,\n#imgControls .expand-all-shortcut,\n#imgControls .contract-all-shortcut,\n#imgControls .menu-button,\n#catalog:hover {\n z-index: 17;\n}\n#appchanOptions {\n visibility: visible;\n background-position: 0 0;\n}\nbody > div.navLinks > a:first-of-type::after {\n cursor: pointer;\n background-position: 0 -15px;\n}\n#watcher::after {\n background-position: 0 -30px;\n}\n#globalMessage::after {\n background-position: 0 -45px;\n}\n#boardNavDesktopFoot::after {\n background-position: 0 -60px;\n}\nbody > a[style=\"cursor: pointer; float: right;\"]::after {\n visibility: visible;\n cursor: pointer;\n background-position: 0 -75px;\n}\n#imgControls .expand-all-shortcut,\n#imgControls .contract-all-shortcut {\n background-position: 0 -90px;\n}\n#navtopright .exlinksOptionsLink::after {\n background-position: 0 -105px;\n}\n#catalog::after {\n visibility: visible;\n background-position: 0 -120px;\n}\n#fappeTyme {\n background-position: 0 -135px;\n}\n#boardNavDesktopFoot:hover::after,\n#globalMessage:hover::after,\n#imgControls .expand-all-shortcut:hover,\n#imgControls .contract-all-shortcut:hover,\n#imgControls .menu-button:hover,\n#navlinks a:hover,\n#appchanOptions:hover,\n#navtopright .exlinksOptionsLink:hover::after,\n#qr #qrtab,\n#watcher:hover::after,\n.thumbnail#selected,\nbody > a[style=\"cursor: pointer; float: right;\"]:hover::after,\ndiv.navLinks > a:first-of-type:hover::after,\n#catalog:hover::after,\n#fappeTyme:hover {\n opacity: 1;\n}"; i = 0; align = Style.sidebarLocation[0]; _conf = Conf; @@ -3523,19 +3523,19 @@ return position; }; if (_conf["Icon Orientation"] === "horizontal") { - position = aligner(2, [notCatalog, _conf['Slideout Navigation'] !== 'hide', _conf['Announcements'] === 'slideout' && $('#globalMessage', d.body), notCatalog && _conf['Slideout Watcher'] && _conf['Thread Watcher'], $('#navtopright .exlinksOptionsLink', d.body), notCatalog && $('body > a[style="cursor: pointer; float: right;"]', d.body), notEither && _conf['Image Expansion'], notEither, g.REPLY, notEither && _conf['Fappe Tyme'], navlinks = ((!g.REPLY && _conf['Index Navigation']) || (g.REPLY && _conf['Reply Navigation'])) && notCatalog, navlinks]); + position = aligner(2, [notCatalog, _conf['Slideout Navigation'] !== 'hide', _conf['Announcements'] === 'slideout' && $('#globalMessage', d.body), notCatalog && _conf['Slideout Watcher'] && _conf['Thread Watcher'], $('#navtopright .exlinksOptionsLink', d.body), notCatalog && $('body > a[style="cursor: pointer; float: right;"]', d.body), notEither && _conf['Image Expansion'], notEither && _conf['Image Expansion'], notEither, g.REPLY, notEither && _conf['Fappe Tyme'], navlinks = ((!g.REPLY && _conf['Index Navigation']) || (g.REPLY && _conf['Reply Navigation'])) && notCatalog, navlinks]); iconOffset = position[position.length - 1] - (_conf['4chan SS Navigation'] ? 0 : Style.sidebar + parseInt(_conf["Right Thread Padding"], 10)); if (iconOffset < 0) { iconOffset = 0; } - css += "/* 4chan X Options */\n#appchanOptions {\n " + align + ": " + position[i++] + "px;\n}\n/* Slideout Navigation */\n#boardNavDesktopFoot::after {\n " + align + ": " + position[i++] + "px;\n}\n/* Global Message */\n#globalMessage::after {\n " + align + ": " + position[i++] + "px;\n}\n/* Watcher */\n#watcher::after {\n " + align + ": " + position[i++] + "px;\n}\n/* ExLinks */\n#navtopright .exlinksOptionsLink::after {\n " + align + ": " + position[i++] + "px;\n}\n/* 4sight */\nbody > a[style=\"cursor: pointer; float: right;\"]::after {\n " + align + ": " + position[i++] + "px;\n}\n/* Expand Images */\n#imgControls {\n " + align + ": " + position[i++] + "px;\n}\n/* 4chan Catalog */\n#catalog::after {\n " + align + ": " + position[i++] + "px;\n}\n/* Back */\ndiv.navLinks > a:first-of-type::after {\n " + align + ": " + position[i++] + "px;\n}\n/* Fappe Tyme */\n#fappeTyme {\n " + align + ": " + position[i++] + "px;\n}\n/* Thread Navigation Links */\n#navlinks a {\n margin: 2px;\n top: 2px;\n}\n#navlinks a:last-of-type {\n " + align + ": " + position[i++] + "px;\n}\n#navlinks a:first-of-type {\n " + align + ": " + position[i++] + "px;\n}\n#prefetch {\n width: " + (248 + Style.sidebarOffset.W) + "px;\n " + align + ": 2px;\n top: 1.6em;\n text-align: " + Style.sidebarLocation[1] + ";\n}\n#boardNavDesktopFoot::after,\n#navtopright .exlinksOptionsLink::after,\n#appchanOptions,\n#watcher::after,\n#globalMessage::after,\n#imgControls,\n#fappeTyme,\ndiv.navLinks > a:first-of-type::after,\n#catalog::after,\nbody > a[style=\"cursor: pointer; float: right;\"]::after {\n top: 2px !important;\n}\n" + (_conf["Announcements"] === "slideout" ? "#globalMessage," : "") + "\n" + (_conf["Slideout Watcher"] ? "#watcher," : "") + "\n#boardNavDesktopFoot {\n top: 17px !important;\n}\n" + (_conf['Boards Navigation'] === 'top' || _conf['Boards Navigation'] === 'sticky top' ? '#boardNavDesktop' : _conf['Pagination'] === 'top' || _conf['Pagination'] === 'sticky top' ? '.pagelist' : void 0) + " {\n " + (_conf['4chan SS Navigation'] ? "padding-" + align + ": " + iconOffset + "px;" : "margin-" + align + ": " + iconOffset + "px;") + "\n}\n"; + css += "/* 4chan X Options */\n#appchanOptions {\n " + align + ": " + position[i++] + "px;\n}\n/* Slideout Navigation */\n#boardNavDesktopFoot::after {\n " + align + ": " + position[i++] + "px;\n}\n/* Global Message */\n#globalMessage::after {\n " + align + ": " + position[i++] + "px;\n}\n/* Watcher */\n#watcher::after {\n " + align + ": " + position[i++] + "px;\n}\n/* ExLinks */\n#navtopright .exlinksOptionsLink::after {\n " + align + ": " + position[i++] + "px;\n}\n/* 4sight */\nbody > a[style=\"cursor: pointer; float: right;\"]::after {\n " + align + ": " + position[i++] + "px;\n}\n/* Expand Images */\n#imgControls .expand-all-shortcut,\n#imgControls .contract-all-shortcut {\n " + align + ": " + position[i++] + "px;\n}\n/* Expand Images Menu */\n#imgControls .menu-button {\n " + align + ": " + position[i++] + "px;\n}\n/* 4chan Catalog */\n#catalog::after {\n " + align + ": " + position[i++] + "px;\n}\n/* Back */\ndiv.navLinks > a:first-of-type::after {\n " + align + ": " + position[i++] + "px;\n}\n/* Fappe Tyme */\n#fappeTyme {\n " + align + ": " + position[i++] + "px;\n}\n/* Thread Navigation Links */\n#navlinks a {\n margin: 2px;\n top: 2px;\n}\n#navlinks a:last-of-type {\n " + align + ": " + position[i++] + "px;\n}\n#navlinks a:first-of-type {\n " + align + ": " + position[i++] + "px;\n}\n#prefetch {\n width: " + (248 + Style.sidebarOffset.W) + "px;\n " + align + ": 2px;\n top: 1.6em;\n text-align: " + Style.sidebarLocation[1] + ";\n}\n#boardNavDesktopFoot::after,\n#navtopright .exlinksOptionsLink::after,\n#appchanOptions,\n#watcher::after,\n#globalMessage::after,\n#imgControls .expand-all-shortcut,\n#imgControls .contract-all-shortcut,\n#imgControls .menu-button,\n#fappeTyme,\ndiv.navLinks > a:first-of-type::after,\n#catalog::after,\nbody > a[style=\"cursor: pointer; float: right;\"]::after {\n top: 2px !important;\n}\n" + (_conf["Announcements"] === "slideout" ? "#globalMessage," : "") + "\n" + (_conf["Slideout Watcher"] ? "#watcher," : "") + "\n#boardNavDesktopFoot {\n top: 17px !important;\n}\n" + (_conf['Boards Navigation'] === 'top' || _conf['Boards Navigation'] === 'sticky top' ? '#boardNavDesktop' : _conf['Pagination'] === 'top' || _conf['Pagination'] === 'sticky top' ? '.pagelist' : void 0) + " {\n " + (_conf['4chan SS Navigation'] ? "padding-" + align + ": " + iconOffset + "px;" : "margin-" + align + ": " + iconOffset + "px;") + "\n}\n"; if (_conf["Updater Position"] !== 'moveable') { css += "/* Updater + Stats */\n#updater,\n#stats {\n " + align + ": 2px !important;\n " + Style.sidebarLocation[1] + ": auto !important;\n top: auto !important;\n bottom: auto !important;\n " + (_conf["Updater Position"] === 'top' ? "top: 1.6em !important" : "bottom: 0 !important") + ";\n}"; } } else { - position = aligner(2 + (_conf["4chan Banner"] === "at sidebar top" ? Style.logoOffset + 19 : 0), [notEither && _conf['Image Expansion'], notCatalog, _conf['Slideout Navigation'] !== 'hide', _conf['Announcements'] === 'slideout' && $('#globalMessage', d.body), notCatalog && _conf['Slideout Watcher'] && _conf['Thread Watcher'], notCatalog && $('body > a[style="cursor: pointer; float: right;"]', d.body), $('#navtopright .exlinksOptionsLink', d.body), notEither, g.REPLY, notEither && _conf['Fappe Tyme'], navlinks = ((!g.REPLY && _conf['Index Navigation']) || (g.REPLY && _conf['Reply Navigation'])) && notCatalog, navlinks]); + position = aligner(2 + (_conf["4chan Banner"] === "at sidebar top" ? Style.logoOffset + 19 : 0), [notEither && _conf['Image Expansion'], notEither && _conf['Image Expansion'], notCatalog, _conf['Slideout Navigation'] !== 'hide', _conf['Announcements'] === 'slideout' && $('#globalMessage', d.body), notCatalog && _conf['Slideout Watcher'] && _conf['Thread Watcher'], notCatalog && $('body > a[style="cursor: pointer; float: right;"]', d.body), $('#navtopright .exlinksOptionsLink', d.body), notEither, g.REPLY, notEither && _conf['Fappe Tyme'], navlinks = ((!g.REPLY && _conf['Index Navigation']) || (g.REPLY && _conf['Reply Navigation'])) && notCatalog, navlinks]); iconOffset = (g.REPLY && _conf['Prefetch'] ? 250 + Style.sidebarOffset.W : 20 + (g.REPLY && _conf['Updater Position'] === 'top' ? 100 : 0)) - (_conf['4chan SS Navigation'] ? 0 : Style.sidebar + parseInt(_conf[align.capitalize() + " Thread Padding"], 10)); - css += "/* Image Expansion */\n#imgControls {\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#prefetch {\n width: " + (248 + Style.sidebarOffset.W) + "px;\n " + align + ": 2px;\n top: 0;\n text-align: " + Style.sidebarLocation[1] + ";\n}\n#navlinks a,\n#navtopright .exlinksOptionsLink::after,\n#appchanOptions,\n#boardNavDesktopFoot::after,\n#globalMessage::after,\n#imgControls,\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" + (_conf['Boards Navigation'] === 'top' || _conf['Boards Navigation'] === 'sticky top' ? '#boardNavDesktop' : _conf['Pagination'] === 'top' || _conf['Pagination'] === 'sticky top' ? '.pagelist' : void 0) + " {\n " + (_conf['4chan SS Navigation'] ? "padding-" + align + ": " + iconOffset + "px;" : "margin-" + align + ": " + iconOffset + "px;") + "\n}"; + css += "/* Expand Images */\n#imgControls .expand-all-shortcut,\n#imgControls .contract-all-shortcut {\n top: " + position[i++] + "px;\n}\n/* Expand Images Menu */\n#imgControls .menu-button {\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#prefetch {\n width: " + (248 + Style.sidebarOffset.W) + "px;\n " + align + ": 2px;\n top: 0;\n text-align: " + Style.sidebarLocation[1] + ";\n}\n#navlinks a,\n#navtopright .exlinksOptionsLink::after,\n#appchanOptions,\n#boardNavDesktopFoot::after,\n#globalMessage::after,\n#imgControls .expand-all-shortcut,\n#imgControls .contract-all-shortcut,\n#imgControls .menu-button,\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" + (_conf['Boards Navigation'] === 'top' || _conf['Boards Navigation'] === 'sticky top' ? '#boardNavDesktop' : _conf['Pagination'] === 'top' || _conf['Pagination'] === 'sticky top' ? '.pagelist' : void 0) + " {\n " + (_conf['4chan SS Navigation'] ? "padding-" + align + ": " + iconOffset + "px;" : "margin-" + align + ": " + iconOffset + "px;") + "\n}"; if (_conf["Updater Position"] !== 'moveable') { css += "/* Updater + Stats */\n#updater,\n#stats {\n " + align + ": " + (_conf["Updater Position"] === "top" ? "24" : "2") + "px !important;\n " + Style.sidebarLocation[1] + ": auto !important;\n top: " + (_conf["Updater Position"] === "top" ? "-1px" : "auto") + " !important;\n bottom: " + (_conf["Updater Position"] === "bottom" ? "-2px" : "auto") + " !important;\n}"; } @@ -8696,7 +8696,7 @@ } wrapper = $.el('div', { id: 'imgControls', - innerHTML: "Expand All Images\n[]" + innerHTML: "\n" }); this.EAI = wrapper.firstElementChild; $.on(this.EAI, 'click', ImageExpand.cb.toggleAll); diff --git a/css/icons.base.css b/css/icons.base.css index 060a24d2f..5c408fb0d 100644 --- a/css/icons.base.css +++ b/css/icons.base.css @@ -6,7 +6,9 @@ body > div.navLinks > a:first-of-type::after, #{if Conf['Announcements'] is 'slideout' then '#globalMessage::after,' else ''} #boardNavDesktopFoot::after, body > a[style="cursor: pointer; float: right;"]::after, -#imgControls label:first-of-type::after, +#imgControls .expand-all-shortcut, +#imgControls .contract-all-shortcut, +#imgControls .menu-button, #catalog::after, #fappeTyme { z-index: 18; @@ -15,7 +17,6 @@ body > a[style="cursor: pointer; float: right;"]::after, width: 15px; height: 15px; content: ""; - overflow: hidden; opacity: #{if Conf['Invisible Icons'] then 0 else 0.5}; } #navtopright .exlinksOptionsLink, @@ -33,15 +34,12 @@ body > div.navLinks > a:first-of-type:hover, #{if Conf['Announcements'] is 'slideout' then '#globalMessage:hover,' else ''} #boardNavDesktopFoot:hover, body > a[style="cursor: pointer; float: right;"]:hover, +#imgControls .expand-all-shortcut, +#imgControls .contract-all-shortcut, +#imgControls .menu-button, #catalog:hover { z-index: 17; } -#imgControls { - z-index: 19; -} -#imgControls { - position: fixed; -} #appchanOptions { visibility: visible; background-position: 0 0; @@ -64,8 +62,8 @@ body > a[style="cursor: pointer; float: right;"]::after { cursor: pointer; background-position: 0 -75px; } -#imgControls label:first-of-type::after { - position: static; +#imgControls .expand-all-shortcut, +#imgControls .contract-all-shortcut { background-position: 0 -90px; } #navtopright .exlinksOptionsLink::after { @@ -80,7 +78,9 @@ body > a[style="cursor: pointer; float: right;"]::after { } #boardNavDesktopFoot:hover::after, #globalMessage:hover::after, -#imgControls label:hover:first-of-type::after, +#imgControls .expand-all-shortcut:hover, +#imgControls .contract-all-shortcut:hover, +#imgControls .menu-button:hover, #navlinks a:hover, #appchanOptions:hover, #navtopright .exlinksOptionsLink:hover::after, diff --git a/css/icons.horz.css b/css/icons.horz.css index f8b2d7614..2a7f2a86d 100644 --- a/css/icons.horz.css +++ b/css/icons.horz.css @@ -24,7 +24,12 @@ body > a[style="cursor: pointer; float: right;"]::after { #{align}: #{position[i++]}px; } /* Expand Images */ -#imgControls { +#imgControls .expand-all-shortcut, +#imgControls .contract-all-shortcut { + #{align}: #{position[i++]}px; +} +/* Expand Images Menu */ +#imgControls .menu-button { #{align}: #{position[i++]}px; } /* 4chan Catalog */ @@ -61,7 +66,9 @@ div.navLinks > a:first-of-type::after { #appchanOptions, #watcher::after, #globalMessage::after, -#imgControls, +#imgControls .expand-all-shortcut, +#imgControls .contract-all-shortcut, +#imgControls .menu-button, #fappeTyme, div.navLinks > a:first-of-type::after, #catalog::after, diff --git a/css/icons.vert.css b/css/icons.vert.css index f4d6c54b3..412078dc6 100644 --- a/css/icons.vert.css +++ b/css/icons.vert.css @@ -1,6 +1,11 @@ -/* Image Expansion */ -#imgControls { +/* Expand Images */ +#imgControls .expand-all-shortcut, +#imgControls .contract-all-shortcut { + top: #{position[i++]}px; +} +/* Expand Images Menu */ +#imgControls .menu-button { top: #{position[i++]}px; } /* 4chan X Options */ @@ -59,7 +64,9 @@ div.navLinks > a:first-of-type::after { #appchanOptions, #boardNavDesktopFoot::after, #globalMessage::after, -#imgControls, +#imgControls .expand-all-shortcut, +#imgControls .contract-all-shortcut, +#imgControls .menu-button, #fappeTyme, #{if _conf["Slideout Watcher"] then "#watcher::after," else ""} body > a[style="cursor: pointer; float: right;"]::after, diff --git a/css/layout.css b/css/layout.css index e583a8e6e..5b12e860a 100644 --- a/css/layout.css +++ b/css/layout.css @@ -440,33 +440,19 @@ else " #{if _conf["Rounded Edges"] then "border-radius: 3px;" else ""} } /* Image Expansion */ -#imgControls .rice { - display: none; +#imgControls .menu-button { + margin: 0; } -#imgControls { - width: 15px; - overflow-x: hidden; - overflow-y: visible; -} -#imgContainer { - float: #{Style.sidebarLocation[0]}; -} -#imgContainer, -#imgControls:hover { - width: 110px; -} -#imgControls label { - float: #{Style.sidebarLocation[0]}; -} -#imgControls .selectrice { - float: #{Style.sidebarLocation[1]}; - width: 90px; +#imgControls .dropmarker { + margin: 1px; + border-top-width: 13px; + border-right-width: 7px; + border-left-width: 7px; } .fitwidth .fullSize { max-width: 100%; width: 100%; } - #{if _conf['Images Overlap Post Form'] then " .fullSize { position: relative; diff --git a/css/theme.css b/css/theme.css index b44139328..e265fea57 100644 --- a/css/theme.css +++ b/css/theme.css @@ -207,10 +207,14 @@ a[style="cursor: pointer; float: right;"] ~ div[style^="width: 100%;"] > table { color: #{theme["Warnings"]}; } #navlinks a:first-of-type { - border-bottom: 11px solid rgb(#{if Style.lightTheme then "130,130,130" else "152,152,152"}); + border-bottom: 11px solid rgb(130,130,130); } #navlinks a:last-of-type { - border-top: 11px solid rgb(#{if Style.lightTheme then "130,130,130" else "152,152,152"}); + border-top: 11px solid rgb(130,130,130); +} +#imgControls .dropmarker, +#imgControls .dropmarker:hover { + border-top-color: rgb(130,130,130); } #charCount { color: #{(if Style.lightTheme then "rgba(0,0,0,0.7)" else "rgba(255,255,255,0.7)")}; @@ -226,7 +230,6 @@ a[style="cursor: pointer; float: right;"] ~ div[style^="width: 100%;"] > table { color: #{theme["Timestamps"]} !important; } #fs_status a, -#imgControls label::after, #updater #count:not(.new)::after, #showQR, #updater, @@ -381,7 +384,8 @@ a .name { #globalMessage::after, #boardNavDesktopFoot::after, a[style="cursor: pointer; float: right;"]::after, -#imgControls label:first-of-type::after, +#imgControls .expand-all-shortcut, +#imgControls .contract-all-shortcut, #catalog::after, #fappeTyme { background-image: url('#{icons}'); diff --git a/src/appchan.coffee b/src/appchan.coffee index ecc4b618f..c47c8f379 100644 --- a/src/appchan.coffee +++ b/src/appchan.coffee @@ -237,6 +237,7 @@ Style = $ '#navtopright .exlinksOptionsLink', d.body notCatalog and $ 'body > a[style="cursor: pointer; float: right;"]', d.body notEither and _conf['Image Expansion'] + notEither and _conf['Image Expansion'] notEither g.REPLY notEither and _conf['Fappe Tyme'] @@ -261,6 +262,7 @@ Style = position = aligner( 2 + (if _conf["4chan Banner"] is "at sidebar top" then (Style.logoOffset + 19) else 0) [ + notEither and _conf['Image Expansion'] notEither and _conf['Image Expansion'] notCatalog _conf['Slideout Navigation'] isnt 'hide' diff --git a/src/features.coffee b/src/features.coffee index 287710c09..b33359f17 100644 --- a/src/features.coffee +++ b/src/features.coffee @@ -3170,8 +3170,8 @@ ImageExpand = wrapper = $.el 'div', id: 'imgControls' innerHTML: """ - Expand All Images - [] + + """ @EAI = wrapper.firstElementChild $.on @EAI, 'click', ImageExpand.cb.toggleAll