diff --git a/LICENSE b/LICENSE index 0812888b6..1d460ed8f 100644 --- a/LICENSE +++ b/LICENSE @@ -1,5 +1,5 @@ /* -* appchan x - Version 2.1.3 - 2013-06-20 +* appchan x - Version 2.1.3 - 2013-06-21 * * Licensed under the MIT license. * https://github.com/zixaphir/appchan-x/blob/master/LICENSE diff --git a/builds/appchan-x.user.js b/builds/appchan-x.user.js index e6fb2e4bb..0851aa163 100644 --- a/builds/appchan-x.user.js +++ b/builds/appchan-x.user.js @@ -18,7 +18,7 @@ // ==/UserScript== /* -* appchan x - Version 2.1.3 - 2013-06-20 +* appchan x - Version 2.1.3 - 2013-06-21 * * Licensed under the MIT license. * https://github.com/zixaphir/appchan-x/blob/master/LICENSE @@ -11122,8 +11122,7 @@ val = evt.target.result; el.previousSibling.value = val; - editMascot.image = val; - return Style.addStyle(); + return editMascot.image = val; }; return reader.readAsDataURL(file); }, @@ -11185,7 +11184,6 @@ Conf['editMode'] = false; editMascot = {}; $.rm($.id('mascotConf')); - Style.addStyle(); return Settings.open("Mascots"); }, importMascot: function(evt) { @@ -11364,7 +11362,8 @@ $.asap((function() { return d.body; }), this.asapInit); - return $.ready(this.readyInit); + $.on(window, "resize", Style.padding); + return $.on(doc, '4chanXInitFinished', this.readyInit); }, asapInit: function() { var cat, hyphenated, name, setting, title, _ref; @@ -11427,23 +11426,15 @@ } }, readyInit: function() { - if (!$.id('navtopright')) { - return; - } - return setTimeout(function() { - var exLink; + var exLink; - Style.padding.nav = Header.bar; - Style.padding.pages = $(".pagelist", d.body); - Style.padding(); - $.on(window, "resize", Style.padding); - Style.iconPositions(); - if (exLink = $("#navtopright .exlinksOptionsLink", d.body)) { - return $.on(exLink, "click", function() { - return setTimeout(Rice.nodes, 100); - }); - } - }, 500); + Style.padding(); + Style.iconPositions(); + if (exLink = $("#navtopright .exlinksOptionsLink", d.body)) { + return $.on(exLink, "click", function() { + return setTimeout(Rice.nodes, 100); + }); + } }, setup: function() { var theme; @@ -11503,10 +11494,7 @@ delete Style.headCount; return delete Style.cleanup; }, - addStyle: function(theme) { - if (!theme) { - theme = Themes[Conf['theme']] || Themes['Yotsuba B']; - } + addStyle: function() { Style.dynamicCSS.textContent = Style.dynamic(); Style.iconPositions(); return Style.padding(); @@ -11618,9 +11606,11 @@ padding: function() { var css; - css = "body {\npadding-bottom: 1px;\n}\n.fourchan-ss-navigation.fixed.top:not(.autohide) body::before {\ntop: " + Style.padding.nav.offsetHeight + "px;\n}\n.fourchan-ss-navigation.fixed.bottom:not(.autohide) body::before {\nbottom: " + Style.padding.nav.offsetHeight + "px;\n}\n.fourchan-ss-navigation.top:not(.autohide) body {\npadding-top: " + (Style.padding.nav.offsetHeight + 1) + "px;\n}\n.fourchan-ss-navigation.bottom:not(.autohide) body {\npadding-bottom: " + (Style.padding.nav.offsetHeight + 1) + "px;\"\n}"; + Style.padding.nav = Header.bar; + Style.padding.pages = $('.pagelist', d.body); + css = "body {\npadding-bottom: 1px;\n}\n.fourchan-ss-navigation.fixed.top:not(.autohide) body::before {\ntop: " + Style.padding.nav.offsetHeight + "px;\n}\n.fourchan-ss-navigation.fixed.bottom:not(.autohide) body::before {\nbottom: " + Style.padding.nav.offsetHeight + "px;\n}\n.top:not(.autohide) body {\npadding-top: " + (Style.padding.nav.offsetHeight + 1) + "px;\n}\n.bottom:not(.autohide) body {\npadding-bottom: " + (Style.padding.nav.offsetHeight + 1) + "px;\"\n}"; if (Style.padding.pages) { - css += ".fourchan-ss-navigation.index.pagination-sticky-top body::before,\n.fourchan-ss-navigation.index.pagination-top body::before {\n top: " + Style.padding.pages.offsetHeight + "px;\n}\n.fourchan-ss-navigation.index.pagination-sticky-bottom body::before,\n.fourchan-ss-navigation.index.pagination-bottom body::before {\n bottom: " + Style.padding.pages.offsetHeight + "px;\n}\n.fourchan-ss-navigation.index.pagination-sticky-top body,\n.fourchan-ss-navigation.index.pagination-top body {\n padding-top: " + (Style.padding.pages.offsetHeight + 1) + "px;\n}\n.fourchan-ss-navigation.index.pagination-sticky-bottom body,\n.fourchan-ss-navigation.index.pagination-bottom body {\n padding-bottom: " + (Style.padding.pages.offsetHeight + 1) + "px;\n}"; + css += ".fourchan-ss-navigation.index.pagination-sticky-top body::before,\n.fourchan-ss-navigation.index.pagination-top body::before {\n top: " + Style.padding.pages.offsetHeight + "px;\n}\n.fourchan-ss-navigation.index.pagination-sticky-bottom body::before,\n.fourchan-ss-navigation.index.pagination-bottom body::before {\n bottom: " + Style.padding.pages.offsetHeight + "px;\n}\n.index.pagination-sticky-top body,\n.index.pagination-top body {\n padding-top: " + (Style.padding.pages.offsetHeight + 1) + "px;\n}\n.index.pagination-sticky-bottom body,\n.index.pagination-bottom body {\n padding-bottom: " + (Style.padding.pages.offsetHeight + 1) + "px;\n}"; } return Style.paddingSheet.textContent = css; }, @@ -11750,44 +11740,9 @@ JSColor.bind(colorInput); $.after(input, colorInput); } - $.on(input, 'blur', function() { - var depth, i, len, toggle1, toggle2; - - depth = 0; - toggle1 = false; - toggle2 = false; - len = this.value.length; - if (len < 1000) { - i = 0; - while (i < len) { - switch (this.value[i++]) { - case '(': - ++depth; - break; - case ')': - --depth; - break; - case '"': - toggle1 = !toggle1; - break; - case "'": - toggle2 = !toggle2; - } - } - } - if ((depth !== 0) || toggle1 || toggle2) { - return alert("Syntax error on " + this.name + "."); - } - if (this.className === "colorfield") { - this.nextSibling.value = "#" + (Style.colorToHex(this.value) || 'aaaaaa'); - this.nextSibling.color.importColor(); - } - editTheme[this.name] = this.value; - return Style.addStyle(editTheme); - }); + $.on(input, 'blur', ThemeTools.apply); $.add(themeContent, div); } - Style.addStyle(editTheme); if (!editTheme["Custom CSS"]) { editTheme["Custom CSS"] = ""; } @@ -11807,6 +11762,41 @@ $.add(d.body, ThemeTools.dialog); return Style.themeCSS.textContent = Style.theme(editTheme); }, + apply: function() { + var depth, i, len, toggle1, toggle2; + + depth = 0; + toggle1 = false; + toggle2 = false; + len = this.value.length; + if (len < 1000) { + i = 0; + while (i < len) { + switch (this.value[i++]) { + case '(': + ++depth; + break; + case ')': + --depth; + break; + case '"': + toggle1 = !toggle1; + break; + case "'": + toggle2 = !toggle2; + } + } + } + if ((depth !== 0) || toggle1 || toggle2) { + return alert("Syntax error on " + this.name + "."); + } + if (this.className === "colorfield") { + this.nextSibling.value = '#' + (Style.colorToHex(this.value) || 'aaaaaa'); + this.nextSibling.color.importColor(); + } + editTheme[this.name] = this.value; + return Style.themeCSS.textContent = Style.theme(editTheme); + }, uploadImage: function(evt, el) { var file, reader; @@ -11815,7 +11805,7 @@ reader.onload = function(evt) { var val; - val = 'url("' + evt.target.result + '")'; + val = "url(\"" + evt.target.result + "\")"; el.previousSibling.value = val; editTheme["Background Image"] = val; return Style.themeCSS.textContent = Style.theme(editTheme); @@ -11962,14 +11952,14 @@ userThemes = _arg.userThemes; userThemes[name] = Themes[name]; $.set('userThemes', userThemes); - $.set("theme", Conf['theme'] = name); + $.set('theme', Conf['theme'] = name); return alert("Theme \"" + name + "\" saved."); }); }, close: function() { Conf['editMode'] = false; + Style.themeCSS.textContent = Style.theme(Themes[Conf['theme']]); $.rm($.id('themeConf')); - Style.addStyle(); return Settings.open('Themes'); } }; diff --git a/builds/crx/script.js b/builds/crx/script.js index bd021fae5..ebf28d641 100644 --- a/builds/crx/script.js +++ b/builds/crx/script.js @@ -1,6 +1,6 @@ // Generated by CoffeeScript /* -* appchan x - Version 2.1.3 - 2013-06-20 +* appchan x - Version 2.1.3 - 2013-06-21 * * Licensed under the MIT license. * https://github.com/zixaphir/appchan-x/blob/master/LICENSE @@ -11110,8 +11110,7 @@ val = evt.target.result; el.previousSibling.value = val; - editMascot.image = val; - return Style.addStyle(); + return editMascot.image = val; }; return reader.readAsDataURL(file); }, @@ -11173,7 +11172,6 @@ Conf['editMode'] = false; editMascot = {}; $.rm($.id('mascotConf')); - Style.addStyle(); return Settings.open("Mascots"); }, importMascot: function(evt) { @@ -11352,7 +11350,8 @@ $.asap((function() { return d.body; }), this.asapInit); - return $.ready(this.readyInit); + $.on(window, "resize", Style.padding); + return $.on(doc, '4chanXInitFinished', this.readyInit); }, asapInit: function() { var cat, hyphenated, name, setting, title, _ref; @@ -11416,23 +11415,15 @@ } }, readyInit: function() { - if (!$.id('navtopright')) { - return; - } - return setTimeout(function() { - var exLink; + var exLink; - Style.padding.nav = Header.bar; - Style.padding.pages = $(".pagelist", d.body); - Style.padding(); - $.on(window, "resize", Style.padding); - Style.iconPositions(); - if (exLink = $("#navtopright .exlinksOptionsLink", d.body)) { - return $.on(exLink, "click", function() { - return setTimeout(Rice.nodes, 100); - }); - } - }, 500); + Style.padding(); + Style.iconPositions(); + if (exLink = $("#navtopright .exlinksOptionsLink", d.body)) { + return $.on(exLink, "click", function() { + return setTimeout(Rice.nodes, 100); + }); + } }, setup: function() { var theme; @@ -11492,10 +11483,7 @@ delete Style.headCount; return delete Style.cleanup; }, - addStyle: function(theme) { - if (!theme) { - theme = Themes[Conf['theme']] || Themes['Yotsuba B']; - } + addStyle: function() { Style.dynamicCSS.textContent = Style.dynamic(); Style.iconPositions(); return Style.padding(); @@ -11607,9 +11595,11 @@ padding: function() { var css; - css = "body {\npadding-bottom: 1px;\n}\n.fourchan-ss-navigation.fixed.top:not(.autohide) body::before {\ntop: " + Style.padding.nav.offsetHeight + "px;\n}\n.fourchan-ss-navigation.fixed.bottom:not(.autohide) body::before {\nbottom: " + Style.padding.nav.offsetHeight + "px;\n}\n.fourchan-ss-navigation.top:not(.autohide) body {\npadding-top: " + (Style.padding.nav.offsetHeight + 1) + "px;\n}\n.fourchan-ss-navigation.bottom:not(.autohide) body {\npadding-bottom: " + (Style.padding.nav.offsetHeight + 1) + "px;\"\n}"; + Style.padding.nav = Header.bar; + Style.padding.pages = $('.pagelist', d.body); + css = "body {\npadding-bottom: 1px;\n}\n.fourchan-ss-navigation.fixed.top:not(.autohide) body::before {\ntop: " + Style.padding.nav.offsetHeight + "px;\n}\n.fourchan-ss-navigation.fixed.bottom:not(.autohide) body::before {\nbottom: " + Style.padding.nav.offsetHeight + "px;\n}\n.top:not(.autohide) body {\npadding-top: " + (Style.padding.nav.offsetHeight + 1) + "px;\n}\n.bottom:not(.autohide) body {\npadding-bottom: " + (Style.padding.nav.offsetHeight + 1) + "px;\"\n}"; if (Style.padding.pages) { - css += ".fourchan-ss-navigation.index.pagination-sticky-top body::before,\n.fourchan-ss-navigation.index.pagination-top body::before {\n top: " + Style.padding.pages.offsetHeight + "px;\n}\n.fourchan-ss-navigation.index.pagination-sticky-bottom body::before,\n.fourchan-ss-navigation.index.pagination-bottom body::before {\n bottom: " + Style.padding.pages.offsetHeight + "px;\n}\n.fourchan-ss-navigation.index.pagination-sticky-top body,\n.fourchan-ss-navigation.index.pagination-top body {\n padding-top: " + (Style.padding.pages.offsetHeight + 1) + "px;\n}\n.fourchan-ss-navigation.index.pagination-sticky-bottom body,\n.fourchan-ss-navigation.index.pagination-bottom body {\n padding-bottom: " + (Style.padding.pages.offsetHeight + 1) + "px;\n}"; + css += ".fourchan-ss-navigation.index.pagination-sticky-top body::before,\n.fourchan-ss-navigation.index.pagination-top body::before {\n top: " + Style.padding.pages.offsetHeight + "px;\n}\n.fourchan-ss-navigation.index.pagination-sticky-bottom body::before,\n.fourchan-ss-navigation.index.pagination-bottom body::before {\n bottom: " + Style.padding.pages.offsetHeight + "px;\n}\n.index.pagination-sticky-top body,\n.index.pagination-top body {\n padding-top: " + (Style.padding.pages.offsetHeight + 1) + "px;\n}\n.index.pagination-sticky-bottom body,\n.index.pagination-bottom body {\n padding-bottom: " + (Style.padding.pages.offsetHeight + 1) + "px;\n}"; } return Style.paddingSheet.textContent = css; }, @@ -11739,44 +11729,9 @@ JSColor.bind(colorInput); $.after(input, colorInput); } - $.on(input, 'blur', function() { - var depth, i, len, toggle1, toggle2; - - depth = 0; - toggle1 = false; - toggle2 = false; - len = this.value.length; - if (len < 1000) { - i = 0; - while (i < len) { - switch (this.value[i++]) { - case '(': - ++depth; - break; - case ')': - --depth; - break; - case '"': - toggle1 = !toggle1; - break; - case "'": - toggle2 = !toggle2; - } - } - } - if ((depth !== 0) || toggle1 || toggle2) { - return alert("Syntax error on " + this.name + "."); - } - if (this.className === "colorfield") { - this.nextSibling.value = "#" + (Style.colorToHex(this.value) || 'aaaaaa'); - this.nextSibling.color.importColor(); - } - editTheme[this.name] = this.value; - return Style.addStyle(editTheme); - }); + $.on(input, 'blur', ThemeTools.apply); $.add(themeContent, div); } - Style.addStyle(editTheme); if (!editTheme["Custom CSS"]) { editTheme["Custom CSS"] = ""; } @@ -11796,6 +11751,41 @@ $.add(d.body, ThemeTools.dialog); return Style.themeCSS.textContent = Style.theme(editTheme); }, + apply: function() { + var depth, i, len, toggle1, toggle2; + + depth = 0; + toggle1 = false; + toggle2 = false; + len = this.value.length; + if (len < 1000) { + i = 0; + while (i < len) { + switch (this.value[i++]) { + case '(': + ++depth; + break; + case ')': + --depth; + break; + case '"': + toggle1 = !toggle1; + break; + case "'": + toggle2 = !toggle2; + } + } + } + if ((depth !== 0) || toggle1 || toggle2) { + return alert("Syntax error on " + this.name + "."); + } + if (this.className === "colorfield") { + this.nextSibling.value = '#' + (Style.colorToHex(this.value) || 'aaaaaa'); + this.nextSibling.color.importColor(); + } + editTheme[this.name] = this.value; + return Style.themeCSS.textContent = Style.theme(editTheme); + }, uploadImage: function(evt, el) { var file, reader; @@ -11804,7 +11794,7 @@ reader.onload = function(evt) { var val; - val = 'url("' + evt.target.result + '")'; + val = "url(\"" + evt.target.result + "\")"; el.previousSibling.value = val; editTheme["Background Image"] = val; return Style.themeCSS.textContent = Style.theme(editTheme); @@ -11951,14 +11941,14 @@ userThemes = _arg.userThemes; userThemes[name] = Themes[name]; $.set('userThemes', userThemes); - $.set("theme", Conf['theme'] = name); + $.set('theme', Conf['theme'] = name); return alert("Theme \"" + name + "\" saved."); }); }, close: function() { Conf['editMode'] = false; + Style.themeCSS.textContent = Style.theme(Themes[Conf['theme']]); $.rm($.id('themeConf')); - Style.addStyle(); return Settings.open('Themes'); } }; diff --git a/src/General/css/padding.nav.css b/src/General/css/padding.nav.css index f9c5ba21e..62a857371 100644 --- a/src/General/css/padding.nav.css +++ b/src/General/css/padding.nav.css @@ -7,9 +7,9 @@ body { .fourchan-ss-navigation.fixed.bottom:not(.autohide) body::before { bottom: #{Style.padding.nav.offsetHeight}px; } -.fourchan-ss-navigation.top:not(.autohide) body { +.top:not(.autohide) body { padding-top: #{Style.padding.nav.offsetHeight + 1}px; } -.fourchan-ss-navigation.bottom:not(.autohide) body { +.bottom:not(.autohide) body { padding-bottom: #{Style.padding.nav.offsetHeight + 1}px;" } \ No newline at end of file diff --git a/src/General/css/padding.pages.css b/src/General/css/padding.pages.css index 1b2159c51..c348b224b 100644 --- a/src/General/css/padding.pages.css +++ b/src/General/css/padding.pages.css @@ -6,11 +6,11 @@ .fourchan-ss-navigation.index.pagination-bottom body::before { bottom: #{Style.padding.pages.offsetHeight}px; } -.fourchan-ss-navigation.index.pagination-sticky-top body, -.fourchan-ss-navigation.index.pagination-top body { +.index.pagination-sticky-top body, +.index.pagination-top body { padding-top: #{Style.padding.pages.offsetHeight + 1}px; } -.fourchan-ss-navigation.index.pagination-sticky-bottom body, -.fourchan-ss-navigation.index.pagination-bottom body { +.index.pagination-sticky-bottom body, +.index.pagination-bottom body { padding-bottom: #{Style.padding.pages.offsetHeight + 1}px; } \ No newline at end of file diff --git a/src/General/css/style.css b/src/General/css/style.css deleted file mode 100644 index d6b579c60..000000000 --- a/src/General/css/style.css +++ /dev/null @@ -1,1050 +0,0 @@ -/* General */ -.dialog { - box-shadow: 0 1px 2px rgba(0, 0, 0, .15); - border: 1px solid; - display: block; - padding: 0; -} -.captcha-img, -.field { - background-color: #FFF; - border: 1px solid #CCC; - -moz-box-sizing: border-box; - box-sizing: border-box; - color: #333; - font: 13px sans-serif; - outline: none; - transition: color .25s, border-color .25s; - transition: color .25s, border-color .25s; -} -.field::-moz-placeholder, -.field:hover::-moz-placeholder { - color: #AAA !important; - font-size: 13px !important; - opacity: 1.0 !important; -} -.captch-img:hover, -.field:hover { - border-color: #999; -} -.field:hover, .field:focus { - color: #000; -} -.field[disabled] { - background-color: #F2F2F2; - color: #888; -} -.move { - cursor: move; - overflow: hidden; -} -label, .favicon { - cursor: pointer; -} -a[href="javascript:;"] { - text-decoration: none; -} -.warning { - color: red; -} -#boardNavDesktop { - display: none !important; -} -a { - outline: none !important; -} - -/* 4chan style fixes */ -.opContainer, .op { - display: block !important; - overflow: visible !important; -} -[hidden] { - display: none !important; -} - -/* fixed, z-index */ -#overlay, -#fourchanx-settings, -#qp, #ihover, -#navlinks, .fixed #header-bar, -:root.float #updater, -:root.float #thread-stats, -#qr { - position: fixed; -} -#fourchanx-settings { - z-index: 999; -} -#overlay { - z-index: 900; -} -#notifications { - z-index: 70; -} -#qp, #ihover { - z-index: 60; -} -#menu { - z-index: 50; -} -#navlinks, #updater, #thread-stats { - z-index: 40; -} -.fixed #header-bar.autohide { - z-index: 35; -} -#qr { - z-index: 30; -} -#watcher { - z-index: 8; -} -:root.fixed-watcher #watcher { - z-index: 20; -} -.fixed #header-bar { - z-index: 10; -} -/* Header */ -.fixed.top body { - padding-top: 2em; -} -.fixed.bottom body { - padding-bottom: 2em; -} -.fixed #header-bar { - right: 0; - left: 0; - padding: 3px 4px 4px; -} -.fixed.top #header-bar { - top: 0; -} -.fixed.bottom #header-bar { - bottom: 0; -} -#header-bar { - border-width: 0; - transition: all .1s .05s ease-in-out; -} -:root.centered-links #shortcuts { - width: 300px; - text-align: right; -} -:root.centered-links #header-bar { - text-align: center; -} -:root.centered-links #custom-board-list { - position: relative; - left: 150px; -} -.fixed.top #header-bar { - border-bottom-width: 1px; -} -.fixed.bottom #header-bar { - box-shadow: 0 -1px 2px rgba(0, 0, 0, .15); - border-top-width: 1px; -} -.fixed.bottom #header-bar .menu-button i { - border-top: none; - border-bottom: 6px solid; -} -#board-list { - text-align: center; -} -.fixed #header-bar.autohide:not(:hover) { - box-shadow: none; - transition: all .8s .6s cubic-bezier(.55, .055, .675, .19); -} -.fixed.top #header-bar.autohide:not(:hover) { - margin-bottom: -1em; - -webkit-transform: translateY(-100%); - transform: translateY(-100%); -} -.fixed.bottom #header-bar.autohide:not(:hover) { - -webkit-transform: translateY(100%); - transform: translateY(100%); -} -#scroll-marker { - left: 0; - right: 0; - height: 10px; - position: absolute; -} -#header-bar #scroll-marker { - display: none; -} -.fixed #header-bar #scroll-marker { - display: block; -} -.fixed.top #header-bar #scroll-marker { - top: 100%; -} -.fixed.bottom #header-bar #scroll-marker { - bottom: 100%; -} -#header-bar a:not(.entry):not(.close) { - text-decoration: none; - padding: 1px; -} -#header-bar input { - margin: 0; - vertical-align: bottom; -} -#shortcuts:empty { - display: none; -} -.brackets-wrap::before { - content: "\\00a0["; -} -.brackets-wrap::after { - content: "]\\00a0"; -} -.disabled, -.expand-all-shortcut { - opacity: .45; -} -#shortcuts { - float: right; -} -.shortcut { - margin-left: 3px; -} -#navbotright, -#navtopright { - display: none; -} -#toggleMsgBtn { - display: none !important; -} -.current { - font-weight: bold; -} -/* 4chan X link brackets */ -.fourchanx-link::after { - content: "]"; -} -.fourchanx-link::before { - content: "["; -} -/* Notifications */ -#notifications { - position: fixed; - top: 0; - height: 0; - text-align: center; - right: 0; - left: 0; - transition: all .8s .6s cubic-bezier(.55, .055, .675, .19); -} -.fixed.top #header-bar #notifications { - position: absolute; - top: 100%; -} -.notification { - color: #FFF; - font-weight: 700; - text-shadow: 0 1px 2px rgba(0, 0, 0, .5); - box-shadow: 0 1px 2px rgba(0, 0, 0, .15); - border-radius: 2px; - margin: 1px auto; - width: 500px; - max-width: 100%; - position: relative; - transition: all .25s ease-in-out; -} -.notification.error { - background-color: hsla(0, 100%, 38%, .9); -} -.notification.warning { - background-color: hsla(36, 100%, 38%, .9); -} -.notification.info { - background-color: hsla(200, 100%, 38%, .9); -} -.notification.success { - background-color: hsla(104, 100%, 38%, .9); -} -.notification a { - color: white; -} -.notification > .close { - padding: 6px; - top: 0; - right: 5px; - position: absolute; -} -.message { - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 6px 20px; - max-height: 200px; - width: 100%; - overflow: auto; -} - -/* Settings */ -:root.fourchan-x body { - -moz-box-sizing: border-box; - box-sizing: border-box; -} -#overlay { - background-color: rgba(0, 0, 0, .5); - top: 0; - left: 0; - height: 100%; - width: 100%; -} -#fourchanx-settings { - -moz-box-sizing: border-box; - box-sizing: border-box; - box-shadow: 0 0 15px rgba(0, 0, 0, .15); - height: 600px; - min-height: 0; - max-height: 100%; - width: 900px; - min-width: 0; - max-width: 100%; - margin: auto; - padding: 3px; - top: 50%; - left: 50%; - -moz-transform: translate(-50%, -50%); - -webkit-transform: translate(-50%, -50%); - -o-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} -#fourchanx-settings > nav { - padding: 2px 2px 0; - height: 15px; -} -#fourchanx-settings > nav a { - text-decoration: underline; -} -#fourchanx-settings > nav a.close { - text-decoration: none; - padding: 2px; -} -.section-container { - overflow: auto; - position: absolute; - top: 2.1em; - right: 5px; - bottom: 5px; - left: 5px; - padding-right: 5px; -} -.sections-list { - padding: 0 3px; - float: left; -} -.credits { - float: right; -} -.tab-selected { - font-weight: 700; -} -.section-sauce ul, -.section-advanced ul { - list-style: none; - margin: 0; -} -.section-sauce ul { - padding: 8px; -} -.section-advanced ul { - padding: 0px; -} -.section-sauce li, -.section-advanced li { - padding-left: 4px; -} -.section-main label { - text-decoration: underline; -} -.section-filter ul { - padding: 0; -} -.section-filter li { - margin: 10px 40px; -} -.section-filter textarea { - height: 500px; -} -.section-sauce textarea { - height: 350px; -} -.section-advanced .field[name="boardnav"] { - width: 100%; -} -.section-advanced textarea { - height: 150px; -} -.section-advanced .archive-cell { - min-width: 160px; - text-align: center; -} -.section-advanced #archive-board-select { - position: absolute; -} -.section-advanced .note { - font-size: 0.8em; - font-style: italic; - margin-left: 10px; -} -.section-advanced .note code { - font-style: normal; - font-size: 11px; -} -#fourchanx-settings fieldset { - border: 1px solid; - border-radius: 3px; -} -#fourchanx-settings legend { - font-weight: 700; -} -#fourchanx-settings textarea { - font-family: monospace; - min-width: 100%; - max-width: 100%; -} -#fourchanx-settings code { - color: #000; - background-color: #FFF; - padding: 0 2px; -} -.unscroll { - overflow: hidden; -} - -/* Announcement Hiding */ -:root.hide-announcement #globalMessage { - display: none; -} -a.hide-announcement { - float: left; -} - -/* Unread */ -#unread-line { - margin: 0; - border-color: rgb(255,0,0); -} - -/* Thread Updater */ -#updater { - background: none; - border: none; - box-shadow: none; -} -#updater > .move { - padding: 5px 3px 0px; - margin-bottom: -3px; -} -#updater > div:last-child { - text-align: center; -} -#updater input[type=number] { - width: 4em; -} -:root.float #updater { - padding: 0px 3px; -} -.new { - color: limegreen; -} -#update-status.new { - margin-right: 5px; -} -#update-timer { - cursor: pointer; -} - -/* Thread Watcher */ -#watcher { - position: absolute; -} -#watcher { - padding-bottom: 3px; - overflow: hidden; - white-space: nowrap; - min-width: 120px; - max-height: 92%; - overflow-y: auto; -} -:root.fixed-watcher #watcher { - position: fixed; -} -:root:not(.fixed-watcher) #watcher:not(:hover) { - max-height: 210px; - overflow-y: hidden; -} -#watcher > .move { - padding-top: 3px; -} -#watcher > div { - max-width: 250px; - overflow: hidden; - padding-left: 3px; - padding-right: 3px; - text-overflow: ellipsis; -} -#watcher a { - text-decoration: none; -} -#watcher .move>.close { - position: absolute; - right: 0px; - top: 0px; - padding: 0px 4px; -} -.watch-thread-link { - padding-top: 18px; - width: 18px; - height: 0px; - display: inline-block; - background-repeat: no-repeat; - opacity: 0.2; - position: relative; - top: 1px; -} -.watch-thread-link.watched { - opacity: 1; -} - -/* Thread Stats */ -#thread-stats { - background: none; - border: none; - box-shadow: none; -} -:root.float #post-count, :root.float #file-count { - pointer-events: none; -} -:root.float #thread-stats { - padding: 0px 3px; -} - -/* Quote */ -.deadlink { - text-decoration: none !important; -} -.backlink.deadlink:not(.forwardlink), .quotelink.deadlink:not(.forwardlink) { - text-decoration: underline !important; -} -.inlined { - opacity: .5; -} -#qp input, .forwarded { - display: none; -} -.quotelink.forwardlink, -.backlink.forwardlink { - text-decoration: none; - border-bottom: 1px dashed; -} -.filtered { - text-decoration: underline line-through; -} -:root.hide-backlinks .backlink.filtered { - display: none; -} -.inline { - border: 1px solid; - display: table; - margin: 2px 0; -} -.inline .post { - border: 0 !important; - background-color: transparent !important; - display: table !important; - margin: 0 !important; - padding: 1px 2px !important; -} -#qp > .opContainer::after { - content: ''; - clear: both; - display: table; -} -#qp .post { - border: none; - margin: 0; - padding: 2px 2px 5px; -} -#qp img { - max-height: 300px; - max-width: 500px; - max-height: 80vh; - max-width: 50vw; -} -.qphl { - outline: 2px solid rgba(216, 94, 49, .7); -} -:root.highlight-own .yourPost>.reply, -:root.highlight-you .quotesYou>.reply { - border-left: 2px solid rgba(221,0,0,.5); -} -/* Quote Threading */ -.threadContainer { - margin-left: 20px; - border-left: 1px solid rgba(128,128,128,.3); -} -.threadOP { - clear: both; -} - -/* File */ -.fileText:hover .fntrunc, -.fileText:not(:hover) .fnfull, -.expanded-image > .post > .file > .fileThumb > img[data-md5], -:not(.expanded-image) > .post > .file > .fileThumb > .full-image { - display: none; -} -.expanding { - opacity: .5; -} -:root.fit-height .full-image { - max-height: 100vh; -} -:root.fit-width .full-image { - max-width: 100%; -} -:root.gecko.fit-width .full-image, -:root.presto.fit-width .full-image { - width: 100%; -} -#ihover { - -moz-box-sizing: border-box; - box-sizing: border-box; - max-height: 100%; - max-width: 75%; - padding-bottom: 16px; -} -.fappeTyme .thread > .noFile, -.fappeTyme .threadContainer > .noFile { - display: none; -} - -/* Index/Reply Navigation */ -#navlinks { - font-size: 16px; - top: 25px; - right: 10px; -} - -/* Filter */ -.opContainer.filter-highlight { - box-shadow: inset 5px 0 rgba(255, 0, 0, .5); -} -.filter-highlight > .reply { - box-shadow: -5px 0 rgba(255, 0, 0, .5); -} - -/* Spoiler text */ -:root.reveal-spoilers s { - color: white !important; -} - -/* Thread & Reply Hiding */ -.hide-thread-button, -.hide-reply-button { - float: left; - margin-right: 2px; -} -.stub ~ * { - display: none !important; -} -.stub input { - display: inline-block; -} - -/* QR */ -:root.hide-original-post-form #postForm, -:root.hide-original-post-form .postingMode, -:root.hide-original-post-form #togglePostForm, -#qr.autohide:not(.has-focus):not(:hover) > form, -.postingMode ~ #qr select, -#file-n-submit:not(.has-file) #qr-filerm { - display: none; -} -#qr select, #dump-button, .remove, .captcha-img { - cursor: pointer; -} -#qr { - z-index: 20; - position: fixed; - padding: 1px; - border: 1px solid transparent; - min-width: 300px; - border-radius: 3px 3px 0 0; -} -#qrtab { - border-radius: 3px 3px 0 0; -} -#qrtab { - margin-bottom: 1px; -} -#qr .close { - float: right; - padding: 0 3px; -} -#qr .warning { - min-height: 1.6em; - vertical-align: middle; - padding: 0 1px; - border-width: 1px; - border-style: solid; -} -.qr-link-container { - text-align: center; -} -.persona { - width: 248px; - max-width: 100%; - min-width: 100%; -} -#dump-button { - width: 10%; - margin: 0; - margin-right: 4px; - font: 13px sans-serif; - padding: 1px 0px 2px; - opacity: 0.6; -} -.persona .field:not(#dump) { - width: 95px; - min-width: 33.3%; - max-width: 33.3%; -} -#qr textarea.field { - height: 14.8em; - min-height: 9em; -} -#qr.has-captcha textarea.field { - height: 9em; -} -input.field.tripped:not(:hover):not(:focus) { - color: transparent !important; text-shadow: none !important; -} -#qr textarea { - resize: both; -} -.captcha-img { - margin: 0px; - text-align: center; - background-image: #fff; - font-size: 0px; - min-height: 59px; - min-width: 302px; -} -.captcha-input { - width: 100%; - margin: 1px 0 0; -} -.captcha-input.error:focus { - border-color: rgb(255,0,0) !important; -} -.field { - -moz-box-sizing: border-box; - margin: 0px; - padding: 2px 4px 3px; -} -#qr textarea { - min-width: 100%; -} -#qr [type='submit'] { - width: 25%; - vertical-align: top; -} -:root.webkit #qr [type='submit'] { - height: 24px; -} -/* Fake File Input */ -#qr-filename, -.has-file #qr-no-file { - display: none; -} -#qr-no-file, -.has-file #qr-filename { - display: inline-block; - padding: 0px 4px; - margin-bottom: 2px; - overflow: hidden; - text-overflow: ellipsis; - max-width: 88%; -} -#qr-no-file { - color: #AAA; -} -#qr-filename-container { - -moz-box-sizing: border-box; - display: inline-block; - position: relative; - width: 100px; - min-width: 74.6%; - max-width: 74.6%; - margin-right: 0.4%; - margin-top: 1px; - overflow: hidden; - padding: 2px 1px 0; - height: 22px; -} -#qr-filename-container:hover { - cursor: text; -} -#qr-extras-container { - position: absolute; - right: 0px; -} -#qr-filerm { - margin-right: 2px; - z-index: 2; -} -#file-n-submit { - height: 23px; -} -#qr input[type=file] { - visibility: hidden; - position: absolute; -} -/* Thread Select / Spoiler Label */ -#qr select { - float: right; -} -#qr.has-spoiler .has-file #qr-spoiler-label { - width: 6.7%; - min-width: 6.7%; - max-width: 6.7%; - display: inline-block; - text-align: center; - vertical-align: top; -} -#qr.has-spoiler #file-n-submit:not(.has-file) #qr-spoiler-label { - display: none; -} -#qr.has-spoiler .has-file #qr-filename-container { - max-width: 67.9%; - min-width: 67.9%; -} -#qr-spoiler-label input { - position: relative; - top: 3px; -} -/* Dumping UI */ -.dump #dump-list-container { - display: block; -} -#dump-list-container { - display: none; - position: relative; - overflow-y: hidden; - margin-top: 1px; -} -#dump-list { - overflow-x: auto; - overflow-y: hidden; - white-space: nowrap; - width: 248px; - max-width: 100%; - min-width: 100%; -} -#dump-list:hover { - overflow-x: auto; -} -.qr-preview { - -moz-box-sizing: border-box; - counter-increment: thumbnails; - cursor: move; - display: inline-block; - height: 90px; - width: 90px; - padding: 2px; - opacity: .5; - overflow: hidden; - position: relative; - text-shadow: 0 1px 1px #000; - -moz-transition: opacity .25s ease-in-out; - vertical-align: top; - background-size: cover; -} -.qr-preview:hover, -.qr-preview:focus { - opacity: .9; -} -.qr-preview::before { - content: counter(thumbnails); - color: #fff; - position: absolute; - top: 3px; - right: 3px; - text-shadow: 0 0 3px #000, 0 0 8px #000; -} -.qr-preview#selected { - opacity: 1; -} -.qr-preview.drag { - box-shadow: 0 0 10px rgba(0,0,0,.5); -} -.qr-preview.over { - border-color: #fff; -} -.qr-preview > span { - color: #fff; -} -.remove { - background: none; - color: #e00; - font-weight: 700; - padding: 3px; -} -a:only-of-type > .remove { - display: none; -} -.remove:hover::after { - content: " Remove"; -} -.qr-preview > label { - background: rgba(0,0,0,.5); - color: #fff; - right: 0; bottom: 0; left: 0; - position: absolute; - text-align: center; -} -.qr-preview > label > input { - margin: 0; -} -#add-post { - cursor: pointer; - font-size: 2em; - position: absolute; - top: 50%; - right: 10px; - -moz-transform: translateY(-50%); -} -.textarea { - position: relative; -} -:root.webkit .textarea { - margin-bottom: -2px; -} -#char-count { - color: #000; - background: hsla(0, 0%, 100%, .5); - font-size: 8pt; - position: absolute; - bottom: 1px; - right: 1px; - pointer-events: none; -} - -/* Menu */ -.menu-button { - display: inline-block; - position: relative; - cursor: pointer; -} -.menu-button i { - border-top: 6px solid; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - display: inline-block; - margin: 2px; - vertical-align: middle; -} -#menu { - position: fixed; - outline: none; -} -.entry { - border-bottom: 1px solid rgba(0,0,0,.25); - cursor: pointer; - display: block; - outline: none; - padding: 3px 7px; - position: relative; - text-decoration: none; - white-space: nowrap; -} -.left>.entry.has-submenu { - padding-right: 17px !important; -} -.entry:last-child { - border-bottom: 0; -} -.has-submenu::after { - content: ""; - border-left: .5em solid; - border-top: .3em solid transparent; - border-bottom: .3em solid transparent; - display: inline-block; - margin: .3em; - position: absolute; - right: 3px; -} -.left .has-submenu::after { - border-left: 0; - border-right: .5em solid; -} -.submenu { - display: none; - position: absolute; - left: 100%; - top: -1px; -} -.focused .submenu { - display: block; -} -.imp-exp-result { - position: absolute; - text-align: center; - margin: auto; - right: 0px; - left: 0px; - width: 200px; -} -.export, .import { - cursor: pointer; - text-decoration: none !important; -} -/* Link Title Favicons */ -.linkify.YouTube { - background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/youtube.png", {encoding: "base64"}) %>') center left no-repeat!important; - padding-left: 18px; -} -.linkify.Vimeo { - background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/vimeo.png", {encoding: "base64"}) %>') center left no-repeat!important; - padding-left: 18px; -} -.linkify.SoundCloud { - background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/soundcloud.png", {encoding: "base64"}) %>') center left no-repeat!important; - padding-left: 18px; -} -.linkify.audio { - background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/audio.png", {encoding: "base64"}) %>') center left no-repeat!important; - padding-left: 18px; -} -.linkify.LiveLeak { - background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/liveleak.png", {encoding: "base64"}) %>') center left no-repeat!important; - padding-left: 18px; -} -.linkify.Vocaroo { - background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/vocaroo.png", {encoding: "base64"}) %>') center left no-repeat!important; - padding-left: 18px; -} -.linkify.pastebin { - background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/pastebin.png", {encoding: "base64"}) %>') center left no-repeat!important; - padding-left: 18px; -} -.linkify.gist { - background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/gist.png", {encoding: "base64"}) %>') center left no-repeat!important; - padding-left: 18px; -} -.linkify.image { - background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/image.png", {encoding: "base64"}) %>') center left no-repeat!important; - padding-left: 18px; -} -.linkify.InstallGentoo { - background: transparent url('data:image/png;base64,<%= grunt.file.read("src/General/img/links/installgentoo.png", {encoding: "base64"}) %>') center left no-repeat!important; - padding-left: 18px; -} diff --git a/src/General/lib/$.coffee b/src/General/lib/$.coffee index a09700461..b64dfab69 100644 --- a/src/General/lib/$.coffee +++ b/src/General/lib/$.coffee @@ -396,51 +396,6 @@ $.set = do -> $.extend items, key set() -<% } else if (type === 'userjs') { %> -do -> - # http://www.opera.com/docs/userjs/specs/#scriptstorage - # http://www.opera.com/docs/userjs/using/#securepages - # The scriptStorage object is available only during - # the main User JavaScript thread, being therefore - # accessible only in the main body of the user script. - # To access the storage object later, keep a reference - # to the object. - {scriptStorage} = opera - $.delete = (keys) -> - unless keys instanceof Array - keys = [keys] - for key in keys - key = g.NAMESPACE + key - localStorage.removeItem key - delete scriptStorage[key] - return - $.get = (key, val, cb) -> - if typeof cb is 'function' - items = $.item key, val - else - items = key - cb = val - $.queueTask -> - for key of items - if val = scriptStorage[g.NAMESPACE + key] - items[key] = JSON.parse val - cb items - $.set = do -> - set = (key, val) -> - key = g.NAMESPACE + key - val = JSON.stringify val - if key of $.syncing - # for `storage` events - localStorage.setItem key, val - scriptStorage[key] = val - (keys, val) -> - if typeof keys is 'string' - set keys, val - return - for key, val of keys - set key, val - return - return <% } else { %> # http://wiki.greasespot.net/Main_Page diff --git a/src/Quotelinks/QuotePreview.coffee b/src/Quotelinks/QuotePreview.coffee index 8301f623b..7615cf759 100644 --- a/src/Quotelinks/QuotePreview.coffee +++ b/src/Quotelinks/QuotePreview.coffee @@ -33,21 +33,6 @@ QuotePreview = cb: QuotePreview.mouseout asapTest: -> qp.firstElementChild - <% if (type === 'userjs') { %> - # XXX Opera workaround for "no mouseout fired" bug. - # Remove it once Opera uses Blink. - root = @ - workaround = (e) -> - if @ is root - e.stopPropagation() - return - $.event 'mouseout', null, root - $.off d, 'mousemove', workaround - $.off root, 'mousemove', workaround - $.on d, 'mousemove', workaround - $.on root, 'mousemove', workaround - <% } %> - return unless origin = g.posts["#{boardID}.#{postID}"] if Conf['Quote Highlighting'] diff --git a/src/Theming/Mascots.coffee b/src/Theming/Mascots.coffee index 31ebd21ce..a28b55c1a 100644 --- a/src/Theming/Mascots.coffee +++ b/src/Theming/Mascots.coffee @@ -238,7 +238,6 @@ MascotTools = el.previousSibling.value = val editMascot.image = val - Style.addStyle() reader.readAsDataURL file @@ -289,7 +288,6 @@ MascotTools = Conf['editMode'] = false editMascot = {} $.rm $.id 'mascotConf' - Style.addStyle() Settings.open "Mascots" importMascot: (evt) -> diff --git a/src/Theming/Style.coffee b/src/Theming/Style.coffee index 4716fb306..4e1e3d05d 100644 --- a/src/Theming/Style.coffee +++ b/src/Theming/Style.coffee @@ -2,14 +2,13 @@ Style = init: -> @setup() $.asap (-> d.body), @asapInit - $.ready @readyInit + $.on window, "resize", Style.padding + $.on doc, '4chanXInitFinished', @readyInit asapInit: -> <% if (type === 'crx') { %> $.addClass doc, 'webkit' $.addClass doc, 'blink' - <% } else if (type === 'userjs') { %> - $.addClass doc, 'presto' <% } else { %> $.addClass doc, 'gecko' <% } %> @@ -57,19 +56,11 @@ Style = $.add next, nextA readyInit: -> - return unless $.id 'navtopright' - - # Give ExLinks and 4sight a little time to append their dialog links - setTimeout -> - Style.padding.nav = Header.bar - Style.padding.pages = $(".pagelist", d.body) - Style.padding() - $.on window, "resize", Style.padding - Style.iconPositions() - if exLink = $ "#navtopright .exlinksOptionsLink", d.body - $.on exLink, "click", -> - setTimeout Rice.nodes, 100 - , 500 + Style.padding() + Style.iconPositions() + if exLink = $ "#navtopright .exlinksOptionsLink", d.body + $.on exLink, "click", -> + setTimeout Rice.nodes, 100 setup: -> theme = Themes[Conf['theme']] or Themes['Yotsuba B'] @@ -120,10 +111,7 @@ Style = delete Style.headCount delete Style.cleanup - addStyle: (theme) -> - unless theme - theme = Themes[Conf['theme']] or Themes['Yotsuba B'] - + addStyle: -> Style.dynamicCSS.textContent = Style.dynamic() Style.iconPositions() Style.padding() @@ -294,6 +282,8 @@ Style = Style.icons.textContent = css padding: -> + Style.padding.nav = Header.bar + Style.padding.pages = $ '.pagelist', d.body css = """<%= grunt.file.read('src/General/css/padding.nav.css') %>""" if Style.padding.pages diff --git a/src/Theming/Themes.coffee b/src/Theming/Themes.coffee index f579562d7..f7b67f34f 100644 --- a/src/Theming/Themes.coffee +++ b/src/Theming/Themes.coffee @@ -146,35 +146,10 @@ ThemeTools = $.after input, colorInput - $.on input, 'blur', -> - depth = 0 - toggle1 = false - toggle2 = false - len = @value.length - - if len < 1000 - i = 0 - while i < len - switch @value[i++] - when '(' then ++depth - when ')' then --depth - when '"' then toggle1 = !toggle1 - when "'" then toggle2 = !toggle2 - - if (depth isnt 0) or toggle1 or toggle2 - return alert "Syntax error on #{@name}." - - if @className is "colorfield" - @nextSibling.value = "##{Style.colorToHex(@value) or 'aaaaaa'}" - @nextSibling.color.importColor() - - editTheme[@name] = @value - Style.addStyle(editTheme) + $.on input, 'blur', ThemeTools.apply $.add themeContent, div - Style.addStyle(editTheme) - unless editTheme["Custom CSS"] editTheme["Custom CSS"] = "" @@ -196,12 +171,37 @@ ThemeTools = $.add d.body, ThemeTools.dialog Style.themeCSS.textContent = Style.theme editTheme + apply: -> + depth = 0 + toggle1 = false + toggle2 = false + len = @value.length + + if len < 1000 + i = 0 + while i < len + switch @value[i++] + when '(' then ++depth + when ')' then --depth + when '"' then toggle1 = !toggle1 + when "'" then toggle2 = !toggle2 + + if (depth isnt 0) or toggle1 or toggle2 + return alert "Syntax error on #{@name}." + + if @className is "colorfield" + @nextSibling.value = '#' + (Style.colorToHex(@value) or 'aaaaaa') + @nextSibling.color.importColor() + + editTheme[@name] = @value + Style.themeCSS.textContent = Style.theme editTheme + uploadImage: (evt, el) -> file = evt.target.files[0] reader = new FileReader() reader.onload = (evt) -> - val = 'url("' + evt.target.result + '")' + val = """url("#{evt.target.result}")""" el.previousSibling.value = val editTheme["Background Image"] = val @@ -336,16 +336,17 @@ ThemeTools = else return - Themes[name] = JSON.parse(JSON.stringify(theme)) + Themes[name] = JSON.parse JSON.stringify theme delete Themes[name]["Theme"] + $.get "userThemes", {}, ({userThemes}) -> userThemes[name] = Themes[name] $.set 'userThemes', userThemes - $.set "theme", Conf['theme'] = name - alert "Theme \"#{name}\" saved." + $.set 'theme', Conf['theme'] = name + alert """Theme "#{name}" saved.""" close: -> Conf['editMode'] = false + Style.themeCSS.textContent = Style.theme Themes[Conf['theme']] $.rm $.id 'themeConf' - Style.addStyle() Settings.open 'Themes' \ No newline at end of file