diff --git a/4chan-X.user.js b/4chan-X.user.js index ae015f1d2..21f9ed6b1 100644 --- a/4chan-X.user.js +++ b/4chan-X.user.js @@ -223,7 +223,7 @@ var Menu, dialog, drag, dragend, dragstart, hover, hoverend, hoverstart, touchend, touchmove; dialog = function(id, position, html) { - var el, move; + var child, el, move, _i, _len, _ref; el = $.el('div', { className: 'dialog', @@ -233,6 +233,16 @@ el.style.cssText = localStorage.getItem("" + g.NAMESPACE + id + ".position") || position; move = $('.move', el); $.on(move, 'touchstart mousedown', dragstart); + _ref = move.children; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + child = _ref[_i]; + if (!child.tagName) { + continue; + } + $.on(child, 'touchstart mousedown', function(e) { + return e.stopPropagation(); + }); + } return el; }; Menu = (function() { @@ -1377,12 +1387,6 @@ $.get('previousversion', null, function(item) { var changelog, curr, el, prev, previous; - el = $.el('span'); - el.style.flex = 'test'; - if (el.style.flex === 'test') { - el.innerHTML = "Firefox is not correctly set up and some 4chan X features will be displayed incorrectly.
\nFollow the instructions of the install guide to fix it."; - new Notification('warning', el, 30); - } if (previous = item['previousversion']) { if (previous === g.VERSION) { return; @@ -1425,15 +1429,19 @@ return localStorage.setItem('4chan-settings', JSON.stringify(settings)); }, open: function(openSection) { - var html, link, links, overlay, section, sectionToOpen, _i, _len, _ref; + var dialog, html, link, links, overlay, section, sectionToOpen, _i, _len, _ref; if (Settings.dialog) { return; } $.event('CloseMenu'); - html = "
\n \n
\n
\n
"; - Settings.dialog = overlay = $.el('div', { - id: 'overlay', + html = "\n
\n
"; + Settings.overlay = overlay = $.el('div', { + id: 'overlay' + }); + Settings.dialog = dialog = $.el('div', { + id: 'fourchanx-settings', + className: 'dialog', innerHTML: html }); links = []; @@ -1452,16 +1460,13 @@ } } links.pop(); - $.add($('.sections-list', overlay), links); + $.add($('.sections-list', dialog), links); (sectionToOpen ? sectionToOpen : links[0]).click(); - $.on($('.close', overlay), 'click', Settings.close); + $.on($('.close', dialog), 'click', Settings.close); $.on(overlay, 'click', Settings.close); - $.on(overlay.firstElementChild, 'click', function(e) { - return e.stopPropagation(); - }); d.body.style.width = "" + d.body.clientWidth + "px"; $.addClass(d.body, 'unscroll'); - return $.add(d.body, overlay); + return $.add(d.body, [overlay, dialog]); }, close: function() { if (!Settings.dialog) { @@ -1469,7 +1474,9 @@ } d.body.style.removeProperty('width'); $.rmClass(d.body, 'unscroll'); + $.rm(Settings.overlay); $.rm(Settings.dialog); + delete Settings.overlay; return delete Settings.dialog; }, sections: [], @@ -3458,7 +3465,7 @@ if (Conf['Bottom header']) { topMargin = 0; } else { - headRect = Header.toggle.getBoundingClientRect(); + headRect = Header.bar.getBoundingClientRect(); topMargin = headRect.top + headRect.height; } if (postEl = $('.reply.highlight', thread)) { @@ -3549,7 +3556,7 @@ if (Conf['Bottom header']) { topMargin = 0; } else { - headRect = Header.toggle.getBoundingClientRect(); + headRect = Header.bar.getBoundingClientRect(); topMargin = headRect.top + headRect.height; } threads = $$('.thread:not([hidden])'); @@ -7143,7 +7150,10 @@ QR.open(); return QR.fileInput(files); }, - openFileInput: function() { + openFileInput: function(e) { + if (e.keyCode && e.keyCode !== 32) { + return; + } return QR.nodes.fileInput.click(); }, fileInput: function(files) { @@ -7288,7 +7298,7 @@ if (this !== QR.selected) { return; } - _ref = ['name', 'email', 'sub', 'com', 'fileButton', 'spoiler']; + _ref = ['name', 'email', 'sub', 'com', 'spoiler']; for (_i = 0, _len = _ref.length; _i < _len; _i++) { name = _ref[_i]; QR.nodes[name].disabled = lock; @@ -7571,7 +7581,8 @@ className: 'captcha-input field', title: 'Verification', autocomplete: 'off', - spellcheck: false + spellcheck: false, + tabIndex: 55 }); this.nodes = { challenge: $.id('recaptcha_challenge_field_holder'), @@ -7588,6 +7599,12 @@ } $.on(imgContainer, 'click', this.reload.bind(this)); $.on(input, 'keydown', this.keydown.bind(this)); + $.on(input, 'focus', function() { + return $.addClass(QR.nodes.el, 'focus'); + }); + $.on(input, 'blur', function() { + return $.rmClass(QR.nodes.el, 'focus'); + }); $.get('captchas', [], function(item) { return _this.sync(item['captchas']); }); @@ -7705,9 +7722,9 @@ } }, dialog: function() { - var dialog, mimeTypes, name, node, nodes, thread, _i, _j, _len, _len1, _ref, _ref1; + var dialog, mimeTypes, name, nodes, thread, _i, _len, _ref; - dialog = UI.dialog('qr', 'top:0;right:0;', "
\n \n \n \n ×\n
\n
\n
\n \n \n \n \n
\n
\n
\n +\n
\n
\n \n \n
\n
\n \n \n \n No selected file\n \n \n ×\n \n
\n \n
".replace(/>\s+<')); + dialog = UI.dialog('qr', 'top:0;right:0;', "
\n \n ×\n \n
\n
\n
\n \n \n \n \n
\n
\n \n \n
\n
\n
\n +\n
\n
\n \n No selected file\n \n ×\n \n \n
\n \n \n
".replace(/>\s+<')); QR.nodes = nodes = { el: dialog, move: $('.move', dialog), @@ -7724,7 +7741,6 @@ addPost: $('#add-post', dialog), charCount: $('#char-count', dialog), fileSubmit: $('#file-n-submit', dialog), - fileButton: $('#qr-file-button', dialog), filename: $('#qr-filename', dialog), fileRM: $('#qr-filerm', dialog), spoiler: $('#qr-file-spoiler', dialog), @@ -7764,13 +7780,8 @@ textContent: "Thread No." + thread })); } - $.after(nodes.autohide, nodes.thread); QR.resetThreadSelector(); - _ref = [nodes.fileButton, nodes.filename.parentNode]; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - node = _ref[_i]; - $.on(node, 'click', QR.openFileInput); - } + $.on(nodes.filename.parentNode, 'click keyup', QR.openFileInput); $.on(nodes.autohide, 'change', QR.toggleHide); $.on(nodes.close, 'click', QR.close); $.on(nodes.dumpButton, 'click', function() { @@ -7788,12 +7799,18 @@ }); $.on(nodes.fileInput, 'change', QR.fileInput); new QR.post(true); - _ref1 = ['name', 'email', 'sub', 'com']; - for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) { - name = _ref1[_j]; + _ref = ['name', 'email', 'sub', 'com']; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + name = _ref[_i]; $.on(nodes[name], 'input', function() { return QR.selected.save(this); }); + $.on(nodes[name], 'focus', function() { + return $.addClass(nodes.el, 'focus'); + }); + $.on(nodes[name], 'blur', function() { + return $.rmClass(nodes.el, 'focus'); + }); } QR.status(); QR.cooldown.init(); @@ -8807,12 +8824,6 @@ Main.callbackNodes(Thread, threads); Main.callbackNodes(Post, posts); } - if ($.hasClass(d.body, 'fourchan_x')) { - alert('4chan X v2 detected: Disable it or v3 will break.'); - } - if (/Firefox\/1/.test(navigator.userAgent)) { - alert('Your version of Firefox is incompatible with 4chan X v3. Firefox 20+ is required.'); - } $.event('4chanXInitFinished'); return Main.checkUpdate(); }, @@ -8977,7 +8988,7 @@ } return Main.thisPageIsLegit; }, - css: "/* General */\n.dialog {\nbox-shadow: 0 1px 2px rgba(0, 0, 0, .15);\nborder: 1px solid;\ndisplay: block;\npadding: 0;\n}\n.field {\nbackground-color: #FFF;\nborder: 1px solid #CCC;\n-moz-box-sizing: border-box;\nbox-sizing: border-box;\ncolor: #333;\nfont: 13px sans-serif;\nmargin: 0;\npadding: 2px 4px 3px;\noutline: none;\ntransition: color .25s, border-color .25s, -webkit-flex .25s;\ntransition: color .25s, border-color .25s, flex .25s;\n}\n.field::-moz-placeholder,\n.field:hover::-moz-placeholder {\ncolor: #AAA !important;\n}\n.field:hover {\nborder-color: #999;\n}\n.field:hover, .field:focus {\ncolor: #000;\n}\n.field[disabled] {\nbackground-color: #F2F2F2;\ncolor: #888;\n}\n.move {\ncursor: move;\n}\nlabel, .favicon {\ncursor: pointer;\n}\na[href=\"javascript:;\"] {\ntext-decoration: none;\n}\n.warning {\ncolor: red;\n}\n\n/* 4chan style fixes */\n.opContainer, .op {\ndisplay: block !important;\n}\n.post {\noverflow: visible !important;\n}\n[hidden] {\ndisplay: none !important;\n}\n\n/* fixed, z-index */\n#overlay,\n#qp, #ihover,\n#updater, #thread-stats,\n#navlinks, #header,\n#qr {\nposition: fixed;\n}\n#overlay {\nz-index: 999;\n}\n#notifications {\nz-index: 70;\n}\n#qp, #ihover {\nz-index: 60;\n}\n#menu {\nz-index: 50;\n}\n#navlinks, #updater, #thread-stats {\nz-index: 40;\n}\n#qr {\nz-index: 30;\n}\n#watcher:hover {\nz-index: 20;\n}\n#header {\nz-index: 10;\n}\n#watcher {\nz-index: 5;\n}\n\n/* Header */\n.fourchan-x body {\n-moz-box-sizing: border-box;\nbox-sizing: border-box;\n}\n#header {\nright: 0;\nleft: 0;\n}\n#header.top {\ntop: 0;\n}\n#header.bottom {\nbottom: 0;\n}\n#header-bar {\nborder-width: 0;\ndisplay: -webkit-flex;\ndisplay: flex;\npadding: 3px 4px 4px;\nposition: relative;\ntransition: all .1s .05s ease-in-out;\n}\n#header.top #header-bar {\nborder-bottom-width: 1px;\n}\n#header.bottom #header-bar {\nbox-shadow: 0 -1px 2px rgba(0, 0, 0, .15);\nborder-top-width: 1px;\n}\n#header.bottom .menu-button i {\nborder-top: none;\nborder-bottom: 6px solid;\n}\n#board-list {\n-webkit-flex: 1;\nflex: 1;\ntext-align: center;\n}\n#header-bar.autohide:not(:hover) {\nbox-shadow: none;\ntransition: all .8s .6s cubic-bezier(.55, .055, .675, .19);\n}\n#header.top #header-bar.autohide:not(:hover) {\nmargin-bottom: -1em;\n-webkit-transform: translateY(-100%);\ntransform: translateY(-100%);\n}\n#header.bottom #header-bar.autohide:not(:hover) {\n-webkit-transform: translateY(100%);\ntransform: translateY(100%);\n}\n#toggle-header-bar {\nleft: 0;\nright: 0;\nheight: 10px;\nposition: absolute;\n}\n#header.top #toggle-header-bar {\ncursor: n-resize;\nbottom: -8px;\n}\n#header.bottom #toggle-header-bar {\ncursor: s-resize;\ntop: -8px;\n}\n#header-bar.autohide:not(:hover) #toggle-header-bar,\n#toggle-header-bar:hover {\nheight: 18px;\n}\n#header.top #header-bar.autohide:not(:hover) #toggle-header-bar,\n#header.top #toggle-header-bar:hover {\nbottom: -16px;\n}\n#header.bottom #header-bar.autohide:not(:hover) #toggle-header-bar,\n#header.bottom #toggle-header-bar:hover {\ntop: -16px;\n}\n#header.top #header-bar.autohide #toggle-header-bar {\ncursor: s-resize;\n}\n#header.bottom #header-bar.autohide #toggle-header-bar {\ncursor: n-resize;\n}\n#header-bar a:not(.entry) {\ntext-decoration: none;\npadding: 1px;\n}\n#shortcuts:empty {\ndisplay: none;\n}\n.brackets-wrap::before {\ncontent: \"\\00a0[\";\n}\n.brackets-wrap::after {\ncontent: \"]\\00a0\";\n}\n.disabled,\n.expand-all-shortcut {\nopacity: .45;\n}\n\n/* Notifications */\n#notifications {\nheight: 0;\ntext-align: center;\nposition: fixed;\ntop: 0;\nright: 0;\nleft: 0;\n}\n#header.bottom #notifications {\nposition: fixed;\ntop: 0;\nleft: 0;\nwidth: 100%;\n}\n.notification {\ncolor: #FFF;\nfont-weight: 700;\ntext-shadow: 0 1px 2px rgba(0, 0, 0, .5);\nbox-shadow: 0 1px 2px rgba(0, 0, 0, .15);\nborder-radius: 2px;\nmargin: 1px auto;\nwidth: 500px;\nmax-width: 100%;\nposition: relative;\ntransition: all .25s ease-in-out;\n}\n.notification.error {\nbackground-color: hsla(0, 100%, 38%, .9);\n}\n.notification.warning {\nbackground-color: hsla(36, 100%, 38%, .9);\n}\n.notification.info {\nbackground-color: hsla(200, 100%, 38%, .9);\n}\n.notification.success {\nbackground-color: hsla(104, 100%, 38%, .9);\n}\n.notification a {\ncolor: white;\n}\n.notification > .close {\npadding: 6px;\ntop: 0;\nright: 0;\nposition: absolute;\n}\n.message {\n-moz-box-sizing: border-box;\nbox-sizing: border-box;\npadding: 6px 20px;\nmax-height: 200px;\nwidth: 100%;\noverflow: auto;\n}\n\n/* Settings */\n#overlay {\nbackground-color: rgba(0, 0, 0, .5);\ndisplay: -webkit-flex;\ndisplay: flex;\n-webkit-align-items: center;\nalign-items: center;\n-webkit-justify-content: center;\njustify-content: center;\nposition: fixed;\ntop: 0;\nleft: 0;\nheight: 100%;\nwidth: 100%;\n}\n#fourchanx-settings {\n-moz-box-sizing: border-box;\nbox-sizing: border-box;\nbox-shadow: 0 0 15px rgba(0, 0, 0, .15);\nheight: 600px;\nmin-height: 0;\nmax-height: 100%;\nwidth: 900px;\nmin-width: 0;\nmax-width: 100%;\npadding: 3px;\ndisplay: -webkit-flex;\ndisplay: flex;\n-webkit-flex-direction: column;\nflex-direction: column;\n}\n#fourchanx-settings > nav {\ndisplay: -webkit-flex;\ndisplay: flex;\npadding: 2px 2px 0;\n}\n#fourchanx-settings > nav a {\ntext-decoration: underline;\n}\n#fourchanx-settings > nav a.close {\ntext-decoration: none;\npadding: 2px;\n}\n.sections-list {\n-webkit-flex: 1;\nflex: 1;\n}\n.tab-selected {\nfont-weight: 700;\n}\n.section-container {\n-webkit-flex: 1;\nflex: 1;\nposition: relative;\n}\n.section-container > section {\nposition: absolute;\ntop: 0;\nright: 0;\nbottom: 0;\nleft: 0;\noverflow: auto;\n}\n.section-sauce ul,\n.section-rice ul {\nlist-style: none;\nmargin: 0;\npadding: 8px;\n}\n.section-sauce li,\n.section-rice li {\npadding-left: 4px;\n}\n.section-main label {\ntext-decoration: underline;\n}\n.section-filter ul {\npadding: 0;\n}\n.section-filter li {\nmargin: 10px 40px;\n}\n.section-filter textarea {\nheight: 500px;\n}\n.section-sauce textarea {\nheight: 350px;\n}\n.section-rice .field[name=\"boardnav\"] {\nwidth: 100%;\n}\n.section-rice textarea {\nheight: 150px;\n}\n#fourchanx-settings fieldset {\nborder: 1px solid;\nborder-radius: 3px;\n}\n#fourchanx-settings legend {\nfont-weight: 700;\n}\n#fourchanx-settings textarea {\nfont-family: monospace;\nmin-width: 100%;\nmax-width: 100%;\n}\n#fourchanx-settings code {\ncolor: #000;\nbackground-color: #FFF;\npadding: 0 2px;\n}\n.unscroll {\noverflow: hidden;\n}\n\n/* Unread */\n#unread-line {\nmargin: 0;\n}\n\n/* Thread Updater */\n#updater:not(:hover) {\nbackground: none;\nborder: none;\nbox-shadow: none;\n}\n#updater > .move {\npadding: 0 3px;\n}\n#updater > div:last-child {\ntext-align: center;\n}\n#updater input[type=number] {\nwidth: 4em;\n}\n#updater:not(:hover) > div:not(.move) {\ndisplay: none;\n}\n#updater input[type=\"button\"] {\nwidth: 100%;\n}\n.new {\ncolor: limegreen;\n}\n\n/* Thread Watcher */\n#watcher {\npadding-bottom: 3px;\noverflow: hidden;\nwhite-space: nowrap;\n}\n#watcher:not(:hover) {\nmax-height: 220px;\n}\n#watcher > .move {\npadding-top: 3px;\n}\n#watcher > div {\nmax-width: 200px;\noverflow: hidden;\npadding-left: 3px;\npadding-right: 3px;\ntext-overflow: ellipsis;\n}\n#watcher a {\ntext-decoration: none;\n}\n\n/* Thread Stats */\n#thread-stats {\nbackground: none;\nborder: none;\nbox-shadow: none;\n}\n\n/* Quote */\n.deadlink {\ntext-decoration: none !important;\n}\n.backlink.deadlink:not(.forwardlink), .quotelink.deadlink:not(.forwardlink) {\ntext-decoration: underline !important;\n}\n.inlined {\nopacity: .5;\n}\n#qp input, .forwarded {\ndisplay: none;\n}\n.quotelink.forwardlink,\n.backlink.forwardlink {\ntext-decoration: none;\nborder-bottom: 1px dashed;\n}\n.filtered {\ntext-decoration: underline line-through;\n}\n.inline {\nborder: 1px solid;\ndisplay: table;\nmargin: 2px 0;\n}\n.inline .post {\nborder: 0 !important;\nbackground-color: transparent !important;\ndisplay: table !important;\nmargin: 0 !important;\npadding: 1px 2px !important;\n}\n#qp > .opContainer::after {\ncontent: '';\nclear: both;\ndisplay: table;\n}\n#qp .post {\nborder: none;\nmargin: 0;\npadding: 2px 2px 5px;\n}\n#qp img {\nmax-height: 300px;\nmax-width: 500px;\n}\n.qphl {\noutline: 2px solid rgba(216, 94, 49, .7);\n}\n\n/* File */\n.fileText:hover .fntrunc,\n.fileText:not(:hover) .fnfull,\n.expanded-image > .post > .file > .fileThumb > img[data-md5],\n:not(.expanded-image) > .post > .file > .fileThumb > .full-image {\ndisplay: none;\n}\n.expanding {\nopacity: .5;\n}\n.expanded-image {\nclear: both;\n}\n.expanded-image > .op > .file::after {\ncontent: '';\nclear: both;\ndisplay: table;\n}\n:root.fit-width .full-image {\nmax-width: 100%;\n}\n:root.gecko.fit-width .full-image,\n:root.presto.fit-width .full-image {\nwidth: 100%;\n}\n#ihover {\n-moz-box-sizing: border-box;\nbox-sizing: border-box;\nmax-height: 100%;\nmax-width: 75%;\npadding-bottom: 16px;\n}\n\n/* Index/Reply Navigation */\n#navlinks {\nfont-size: 16px;\ntop: 25px;\nright: 10px;\n}\n\n/* Filter */\n.opContainer.filter-highlight {\nbox-shadow: inset 5px 0 rgba(255, 0, 0, .5);\n}\n.filter-highlight > .reply {\nbox-shadow: -5px 0 rgba(255, 0, 0, .5);\n}\n\n/* Thread & Reply Hiding */\n.hide-thread-button,\n.hide-reply-button {\nfloat: left;\nmargin-right: 2px;\n}\n.stub ~ .sideArrows,\n.stub ~ .hide-reply-button,\n.stub ~ .post {\ndisplay: none !important;\n}\n.stub input {\ndisplay: inline-block;\n}\n\n/* QR */\n:root.hide-original-post-form #postForm,\n:root.hide-original-post-form .postingMode,\n:root.hide-original-post-form #togglePostForm,\n#qr.autohide:not(:hover) > form {\ndisplay: none;\n}\n#qr select, #dump-button, .remove, .captcha-img {\ncursor: pointer;\n}\n#qr > div {\nmin-width: 300px;\ndisplay: -webkit-flex;\ndisplay: flex;\n-webkit-align-items: center;\nalign-items: center;\n}\n#qr .move {\n-webkit-align-self: stretch;\nalign-self: stretch;\n-webkit-flex: 1;\nflex: 1;\n}\n#qr select {\nmargin: 0;\n-webkit-appearance: none;\n-moz-appearance: none;\nappearance: none;\nborder: none;\nbackground: none;\n}\n.presto #qr select {\nheight: 1em;\n}\n#qr .close {\npadding: 0 3px;\n}\n#qr > form {\ndisplay: -webkit-flex;\ndisplay: flex;\n-webkit-flex-direction: column;\nflex-direction: column;\n}\n.persona {\ndisplay: -webkit-flex;\ndisplay: flex;\n}\n.persona .field {\n-webkit-flex: 1;\nflex: 1;\n}\n.persona .field:focus {\n-webkit-flex: 3;\nflex: 3;\n}\n#dump-button {\nbackground: linear-gradient(#EEE, #CCC);\nborder: 1px solid #CCC;\nmargin: 0;\npadding: 2px 4px 3px;\noutline: none;\nwidth: 30px;\n}\n#dump-button:hover, #dump-button:focus {\nbackground: linear-gradient(#FFF, #DDD);\n}\n#dump-button:active, .dump #dump-button:not(:hover):not(:focus) {\nbackground: linear-gradient(#CCC, #DDD);\n}\n.gecko #dump-button {\npadding: 0;\n}\n#qr:not(.dump) #dump-list-container {\ndisplay: none;\n}\n#dump-list-container {\nheight: 100px;\nposition: relative;\n-webkit-user-select: none;\n-moz-user-select: none;\n-o-user-select: none;\nuser-select: none;\n}\n#dump-list {\ncounter-reset: qrpreviews;\ntop: 0; right: 0; bottom: 0; left: 0;\noverflow: hidden;\nposition: absolute;\nwhite-space: nowrap;\n}\n#dump-list:hover {\nbottom: -12px;\noverflow-x: auto;\nz-index: 1;\n}\n#dump-list::-webkit-scrollbar {\nheight: 12px;\n}\n#dump-list::-webkit-scrollbar-thumb {\nborder: 1px solid;\n}\n.qr-preview {\nbackground-position: 50% 20%;\nbackground-size: cover;\nborder: 1px solid #808080;\ncolor: #FFF !important;\nfont-size: 12px;\n-moz-box-sizing: border-box;\nbox-sizing: border-box;\ncursor: move;\ndisplay: inline-block;\nheight: 92px; width: 92px;\nmargin: 4px; padding: 2px;\nopacity: .6;\noutline: none;\noverflow: hidden;\nposition: relative;\ntext-shadow: 0 1px 1px #000;\ntransition: opacity .25s ease-in-out;\nvertical-align: top;\nwhite-space: pre;\n}\n.qr-preview:hover, .qr-preview:focus {\nopacity: .9;\ncolor: #FFF !important;\n}\n.qr-preview#selected {\nopacity: 1;\n}\n.qr-preview::before {\ncounter-increment: qrpreviews;\ncontent: counter(qrpreviews);\nfont-weight: 700;\ntext-shadow: 0 0 3px #000, 0 0 5px #000;\nposition: absolute;\ntop: 3px; right: 3px;\n}\n.qr-preview.drag {\nborder-color: red;\nborder-style: dashed;\n}\n.qr-preview.over {\nborder-color: #FFF;\nborder-style: dashed;\n}\n.remove {\ncolor: #E00 !important;\nfont-weight: 700;\npadding: 3px;\n}\n.remove:hover::after {\ncontent: ' Remove';\n}\n.qr-preview > label {\nbackground: rgba(0, 0, 0, .5);\nright: 0; bottom: 0; left: 0;\nposition: absolute;\ntext-align: center;\n}\n.qr-preview > label > input {\nmargin: 1px 0;\nvertical-align: bottom;\n}\n#add-post {\ndisplay: inline-block;\nfont-size: 30px;\nheight: 30px;\nwidth: 30px;\nline-height: 1;\ntext-align: center;\nposition: absolute;\nright: 0; bottom: 0;\nz-index: 1;\n}\n#qr textarea {\nmin-height: 160px;\nmin-width: 100%;\ndisplay: block;\n}\n#qr.has-captcha textarea {\nmin-height: 120px;\n}\n.textarea {\nposition: relative;\n}\n#char-count {\ncolor: #000;\nbackground: hsla(0, 0%, 100%, .5);\nfont-size: 8pt;\nposition: absolute;\nbottom: 1px;\nright: 1px;\npointer-events: none;\n}\n#char-count.warning {\ncolor: red;\n}\n.captcha-img {\nbackground: #FFF;\noutline: 1px solid #CCC;\noutline-offset: -1px;\n}\n.captcha-img > img {\ndisplay: block;\nheight: 57px;\nwidth: 300px;\n}\n#file-n-submit > input {\nmargin: 0;\n}\n#file-n-submit.has-file #qr-no-file {\nvisibility: hidden;\n}\n#file-n-submit:not(.has-file) #qr-filename,\n#file-n-submit:not(.has-file) #qr-file-spoiler,\n#file-n-submit:not(.has-file) #qr-filerm {\ndisplay: none;\n}\n#file-n-submit {\ndisplay: -webkit-flex;\ndisplay: flex;\n-webkit-flex-direction: row;\nflex-direction: row;\n-webkit-align-items: center;\nalign-items: center;\n}\n#qr-no-file, #qr-filename-container {\n-webkit-flex: 1;\nflex: 1;\n}\n#qr-filename-container {\ncursor: default;\nposition: relative;\nmargin-left: 2px;\n}\n#qr-filename {\nposition: absolute;\ntop: 0; right: 0; bottom: 0; left: 0;\ntext-overflow: ellipsis;\noverflow: hidden;\nwhite-space: nowrap;\n}\n#qr-filerm {\npadding: 0 2px;\n}\n#file-n-submit > #qr-file-spoiler {\nmargin: 0 2px;\n}\n#file-n-submit input[type='submit'] {\nmin-width: 40px;\n-webkit-order: 1;\norder: 1;\n}\n#qr input[type='file'] {\nposition: absolute;\nvisibility: hidden;\n}\n\n/* Menu */\n.menu-button {\ndisplay: inline-block;\nposition: relative;\n}\n.menu-button i {\nborder-top: 6px solid;\nborder-right: 4px solid transparent;\nborder-left: 4px solid transparent;\ndisplay: inline-block;\nmargin: 2px;\nvertical-align: middle;\n}\n#menu {\nborder-bottom: 0;\ndisplay: -webkit-flex;\ndisplay: flex;\nmargin: 2px 0;\n-webkit-flex-direction: column;\nflex-direction: column;\nposition: absolute;\noutline: none;\n}\n.entry {\ncursor: pointer;\noutline: none;\npadding: 3px 7px;\nposition: relative;\ntext-decoration: none;\nwhite-space: nowrap;\n}\n.entry.has-submenu {\npadding-right: 20px;\n}\n.has-submenu::after {\ncontent: '';\nborder-left: 6px solid;\nborder-top: 4px solid transparent;\nborder-bottom: 4px solid transparent;\ndisplay: inline-block;\nmargin: 4px;\nposition: absolute;\nright: 3px;\n}\n.has-submenu:not(.focused) > .submenu {\ndisplay: none;\n}\n.submenu {\nborder-bottom: 0;\ndisplay: -webkit-flex;\ndisplay: flex;\n-webkit-flex-direction: column;\nflex-direction: column;\nposition: absolute;\nmargin: -1px 0;\n}\n.entry input {\nmargin: 0;\n}\n\n/* General */\n:root.yotsuba .dialog {\nbackground-color: #F0E0D6;\nborder-color: #D9BFB7;\n}\n:root.yotsuba .field:focus {\nborder-color: #EA8;\n}\n\n/* Header */\n:root.yotsuba #header-bar {\nfont-size: 9pt;\ncolor: #B86;\n}\n:root.yotsuba #header-bar a {\ncolor: #800000;\n}\n\n/* Settings */\n:root.yotsuba #fourchanx-settings fieldset {\nborder-color: #D9BFB7;\n}\n\n/* Quote */\n:root.yotsuba .backlink.deadlink {\ncolor: #00E !important;\n}\n:root.yotsuba .inline {\nborder-color: #D9BFB7;\nbackground-color: rgba(255, 255, 255, .14);\n}\n\n/* QR */\n.yotsuba #dump-list::-webkit-scrollbar-thumb {\nbackground-color: #F0E0D6;\nborder-color: #D9BFB7;\n}\n:root.yotsuba .qr-preview {\nbackground-color: rgba(0, 0, 0, .15);\n}\n\n/* Menu */\n:root.yotsuba #menu {\ncolor: #800000;\n}\n:root.yotsuba .entry {\nborder-bottom: 1px solid #D9BFB7;\nfont-size: 10pt;\n}\n:root.yotsuba .focused.entry {\nbackground: rgba(255, 255, 255, .33);\n}\n\n/* General */\n:root.yotsuba-b .dialog {\nbackground-color: #D6DAF0;\nborder-color: #B7C5D9;\n}\n:root.yotsuba-b .field:focus {\nborder-color: #98E;\n}\n\n/* Header */\n:root.yotsuba-b #header-bar {\nfont-size: 9pt;\ncolor: #89A;\n}\n:root.yotsuba-b #header-bar a {\ncolor: #34345C;\n}\n\n/* Settings */\n:root.yotsuba-b #fourchanx-settings fieldset {\nborder-color: #B7C5D9;\n}\n\n/* Quote */\n:root.yotsuba-b .backlink.deadlink {\ncolor: #34345C !important;\n}\n:root.yotsuba-b .inline {\nborder-color: #B7C5D9;\nbackground-color: rgba(255, 255, 255, .14);\n}\n\n/* QR */\n.yotsuba-b #dump-list::-webkit-scrollbar-thumb {\nbackground-color: #D6DAF0;\nborder-color: #B7C5D9;\n}\n:root.yotsuba-b .qr-preview {\nbackground-color: rgba(0, 0, 0, .15);\n}\n\n/* Menu */\n:root.yotsuba-b #menu {\ncolor: #000;\n}\n:root.yotsuba-b .entry {\nborder-bottom: 1px solid #B7C5D9;\nfont-size: 10pt;\n}\n:root.yotsuba-b .focused.entry {\nbackground: rgba(255, 255, 255, .33);\n}\n\n/* General */\n:root.futaba .dialog {\nbackground-color: #F0E0D6;\nborder-color: #D9BFB7;\n}\n:root.futaba .field:focus {\nborder-color: #EA8;\n}\n\n/* Header */\n:root.futaba #header-bar {\nfont-size: 11pt;\ncolor: #B86;\n}\n:root.futaba #header-bar a {\ncolor: #800000;\n}\n\n/* Settings */\n:root.futaba #fourchanx-settings fieldset {\nborder-color: #D9BFB7;\n}\n\n/* Quote */\n:root.futaba .backlink.deadlink {\ncolor: #00E !important;\n}\n:root.futaba .inline {\nborder-color: #D9BFB7;\nbackground-color: rgba(255, 255, 255, .14);\n}\n\n/* QR */\n.futaba #dump-list::-webkit-scrollbar-thumb {\nbackground-color: #F0E0D6;\nborder-color: #D9BFB7;\n}\n:root.futaba .qr-preview {\nbackground-color: rgba(0, 0, 0, .15);\n}\n\n/* Menu */\n:root.futaba #menu {\ncolor: #800000;\n}\n:root.futaba .entry {\nborder-bottom: 1px solid #D9BFB7;\nfont-size: 12pt;\n}\n:root.futaba .focused.entry {\nbackground: rgba(255, 255, 255, .33);\n}\n\n/* General */\n:root.burichan .dialog {\nbackground-color: #D6DAF0;\nborder-color: #B7C5D9;\n}\n:root.burichan .field:focus {\nborder-color: #98E;\n}\n\n/* Header */\n:root.burichan #header-bar {\nfont-size: 11pt;\ncolor: #89A;\n}\n:root.burichan #header-bar a {\ncolor: #34345C;\n}\n\n/* Settings */\n:root.burichan #fourchanx-settings fieldset {\nborder-color: #B7C5D9;\n}\n\n/* Quote */\n:root.burichan .backlink.deadlink {\ncolor: #34345C !important;\n}\n:root.burichan .inline {\nborder-color: #B7C5D9;\nbackground-color: rgba(255, 255, 255, .14);\n}\n\n/* QR */\n.burichan #dump-list::-webkit-scrollbar-thumb {\nbackground-color: #D6DAF0;\nborder-color: #B7C5D9;\n}\n:root.burichan .qr-preview {\nbackground-color: rgba(0, 0, 0, .15);\n}\n\n/* Menu */\n:root.burichan #menu {\ncolor: #000000;\n}\n:root.burichan .entry {\nborder-bottom: 1px solid #B7C5D9;\nfont-size: 12pt;\n}\n:root.burichan .focused.entry {\nbackground: rgba(255, 255, 255, .33);\n}\n\n/* General */\n:root.tomorrow .dialog {\nbackground-color: #282A2E;\nborder-color: #111;\n}\n:root.tomorrow .field:focus {\nborder-color: #000;\n}\n\n/* Header */\n:root.tomorrow #header-bar {\nfont-size: 9pt;\ncolor: #C5C8C6;\n}\n:root.tomorrow #header-bar a {\ncolor: #81A2BE;\n}\n\n/* Settings */\n:root.tomorrow #fourchanx-settings fieldset {\nborder-color: #111;\n}\n\n/* Quote */\n:root.tomorrow .backlink.deadlink {\ncolor: #81A2BE !important;\n}\n:root.tomorrow .inline {\nborder-color: #111;\nbackground-color: rgba(0, 0, 0, .14);\n}\n\n/* QR */\n.tomorrow #dump-list::-webkit-scrollbar-thumb {\nbackground-color: #282A2E;\nborder-color: #111;\n}\n:root.tomorrow #qr select {\ncolor: #C5C8C6;\n}\n:root.tomorrow #qr option {\ncolor: #000;\n}\n:root.tomorrow .qr-preview {\nbackground-color: rgba(255, 255, 255, .15);\n}\n\n/* Menu */\n:root.tomorrow #menu {\ncolor: #C5C8C6;\n}\n:root.tomorrow .entry {\nborder-bottom: 1px solid #111;\nfont-size: 10pt;\n}\n:root.tomorrow .focused.entry {\nbackground: rgba(0, 0, 0, .33);\n}\n\n/* General */\n:root.photon .dialog {\nbackground-color: #DDD;\nborder-color: #CCC;\n}\n:root.photon .field:focus {\nborder-color: #EA8;\n}\n\n/* Header */\n:root.photon #header-bar {\nfont-size: 9pt;\ncolor: #333;\n}\n:root.photon #header-bar a {\ncolor: #FF6600;\n}\n\n/* Settings */\n:root.photon #fourchanx-settings fieldset {\nborder-color: #CCC;\n}\n\n/* Quote */\n:root.photon .backlink.deadlink {\ncolor: #F60 !important;\n}\n:root.photon .inline {\nborder-color: #CCC;\nbackground-color: rgba(255, 255, 255, .14);\n}\n\n/* QR */\n.photon #dump-list::-webkit-scrollbar-thumb {\nbackground-color: #DDD;\nborder-color: #CCC;\n}\n:root.photon .qr-preview {\nbackground-color: rgba(0, 0, 0, .15);\n}\n\n/* Menu */\n:root.photon #menu {\ncolor: #333;\n}\n:root.photon .entry {\nborder-bottom: 1px solid #CCC;\nfont-size: 10pt;\n}\n:root.photon .focused.entry {\nbackground: rgba(255, 255, 255, .33);\n}\n" + css: "/* General */\n.dialog {\nbox-shadow: 0 1px 2px rgba(0, 0, 0, .15);\nborder: 1px solid;\ndisplay: block;\npadding: 0;\n}\n.captcha-img,\n.field {\nbackground-color: #FFF;\nborder: 1px solid #CCC;\n-moz-box-sizing: border-box;\nbox-sizing: border-box;\ncolor: #333;\nfont: 13px sans-serif;\noutline: none;\ntransition: color .25s, border-color .25s;\ntransition: color .25s, border-color .25s;\n}\n.field::-moz-placeholder,\n.field:hover::-moz-placeholder {\ncolor: #AAA !important;\n}\n.captch-img:hover,\n.field:hover {\nborder-color: #999;\n}\n.field:hover, .field:focus {\ncolor: #000;\n}\n.field[disabled] {\nbackground-color: #F2F2F2;\ncolor: #888;\n}\n.move {\ncursor: move;\noverflow: hidden;\n}\nlabel, .favicon {\ncursor: pointer;\n}\na[href=\"javascript:;\"] {\ntext-decoration: none;\n}\n.warning {\ncolor: red;\n}\n\n/* 4chan style fixes */\n.opContainer, .op {\ndisplay: block !important;\n}\n.post {\noverflow: visible !important;\n}\n[hidden] {\ndisplay: none !important;\n}\n\n/* fixed, z-index */\n#overlay,\n#fourchanx-settings,\n#qp, #ihover,\n#updater, #thread-stats,\n#navlinks, #header,\n#watcher,\n#qr {\nposition: fixed;\n}\n#fourchanx-settings {\nz-index: 999;\n}\n#overlay {\nz-index: 900;\n}\n#notifications {\nz-index: 70;\n}\n#qp, #ihover {\nz-index: 60;\n}\n#menu {\nz-index: 50;\n}\n#navlinks, #updater, #thread-stats {\nz-index: 40;\n}\n#qr {\nz-index: 30;\n}\n#watcher:hover {\nz-index: 20;\n}\n#header {\nz-index: 10;\n}\n#watcher {\nz-index: 5;\n}\n\n/* Header */\n.fourchan-x body {\n-moz-box-sizing: border-box;\nbox-sizing: border-box;\n}\n#header {\nright: 0;\nleft: 0;\n}\n#header.top {\ntop: 0;\n}\n#header.bottom {\nbottom: 0;\n}\n#header-bar {\nborder-width: 0;\npadding: 3px 4px 4px;\nposition: relative;\ntransition: all .1s .05s ease-in-out;\n}\n#header.top #header-bar {\nborder-bottom-width: 1px;\n}\n#header.bottom #header-bar {\nbox-shadow: 0 -1px 2px rgba(0, 0, 0, .15);\nborder-top-width: 1px;\n}\n#header.bottom .menu-button i {\nborder-top: none;\nborder-bottom: 6px solid;\n}\n#board-list {\ntext-align: center;\n}\n#header-bar.autohide:not(:hover) {\nbox-shadow: none;\ntransition: all .8s .6s cubic-bezier(.55, .055, .675, .19);\n}\n#header.top #header-bar.autohide:not(:hover) {\nmargin-bottom: -1em;\n-webkit-transform: translateY(-100%);\ntransform: translateY(-100%);\n}\n#header.bottom #header-bar.autohide:not(:hover) {\n-webkit-transform: translateY(100%);\ntransform: translateY(100%);\n}\n#toggle-header-bar {\nleft: 0;\nright: 0;\nheight: 10px;\nposition: absolute;\n}\n#header.top #toggle-header-bar {\ncursor: n-resize;\nbottom: -8px;\n}\n#header.bottom #toggle-header-bar {\ncursor: s-resize;\ntop: -8px;\n}\n#header-bar.autohide:not(:hover) #toggle-header-bar,\n#toggle-header-bar:hover {\nheight: 18px;\n}\n#header.top #header-bar.autohide:not(:hover) #toggle-header-bar,\n#header.top #toggle-header-bar:hover {\nbottom: -16px;\n}\n#header.bottom #header-bar.autohide:not(:hover) #toggle-header-bar,\n#header.bottom #toggle-header-bar:hover {\ntop: -16px;\n}\n#header.top #header-bar.autohide #toggle-header-bar {\ncursor: s-resize;\n}\n#header.bottom #header-bar.autohide #toggle-header-bar {\ncursor: n-resize;\n}\n#header-bar a:not(.entry) {\ntext-decoration: none;\npadding: 1px;\n}\n#shortcuts:empty {\ndisplay: none;\n}\n.brackets-wrap::before {\ncontent: \"\\00a0[\";\n}\n.brackets-wrap::after {\ncontent: \"]\\00a0\";\n}\n.disabled,\n.expand-all-shortcut {\nopacity: .45;\n}\n\n/* Notifications */\n#notifications {\nheight: 0;\ntext-align: center;\nposition: fixed;\ntop: 0;\nright: 0;\nleft: 0;\n}\n#header.bottom #notifications {\nposition: fixed;\ntop: 0;\nleft: 0;\nwidth: 100%;\n}\n.notification {\ncolor: #FFF;\nfont-weight: 700;\ntext-shadow: 0 1px 2px rgba(0, 0, 0, .5);\nbox-shadow: 0 1px 2px rgba(0, 0, 0, .15);\nborder-radius: 2px;\nmargin: 1px auto;\nwidth: 500px;\nmax-width: 100%;\nposition: relative;\ntransition: all .25s ease-in-out;\n}\n.notification.error {\nbackground-color: hsla(0, 100%, 38%, .9);\n}\n.notification.warning {\nbackground-color: hsla(36, 100%, 38%, .9);\n}\n.notification.info {\nbackground-color: hsla(200, 100%, 38%, .9);\n}\n.notification.success {\nbackground-color: hsla(104, 100%, 38%, .9);\n}\n.notification a {\ncolor: white;\n}\n.notification > .close {\npadding: 6px;\ntop: 0;\nright: 0;\nposition: absolute;\n}\n.message {\n-moz-box-sizing: border-box;\nbox-sizing: border-box;\npadding: 6px 20px;\nmax-height: 200px;\nwidth: 100%;\noverflow: auto;\n}\n\n/* Settings */\n#overlay {\nbackground-color: rgba(0, 0, 0, .5);\ntop: 0;\nleft: 0;\nheight: 100%;\nwidth: 100%;\n}\n#fourchanx-settings {\n-moz-box-sizing: border-box;\nbox-sizing: border-box;\nbox-shadow: 0 0 15px rgba(0, 0, 0, .15);\nheight: 600px;\nmin-height: 0;\nmax-height: 100%;\nwidth: 900px;\nmin-width: 0;\nmax-width: 100%;\npadding: 3px;\ntop: 50%;\nleft: 50%;\n-moz-transform: translate(-50%, -50%);\n-webkit-transform: translate(-50%, -50%);\n-o-transform: translate(-50%, -50%);\ntransform: translate(-50%, -50%);\n}\n#fourchanx-settings > nav {\npadding: 2px 2px 0;\n}\n#fourchanx-settings > nav a {\ntext-decoration: underline;\n}\n#fourchanx-settings > nav a.close {\ntext-decoration: none;\npadding: 2px;\n}\n.section-container {\noverflow: auto;\nposition: absolute;\ntop: 1.7em;\nright: 5px;\nbottom: 5px;\nleft: 5px;\n}\n.sections-list {\npadding: 0 3px;\nfloat: left;\n}\n.credits {\nfloat: right;\n}\n.tab-selected {\nfont-weight: 700;\n}\n.section-container {\noverflow: auto;\nposition: absolute;\ntop: 1.7em;\nright: 5px;\nbottom: 5px;\nleft: 5px;\n}\n.section-sauce ul,\n.section-rice ul {\nlist-style: none;\nmargin: 0;\npadding: 8px;\n}\n.section-sauce li,\n.section-rice li {\npadding-left: 4px;\n}\n.section-main label {\ntext-decoration: underline;\n}\n.section-filter ul {\npadding: 0;\n}\n.section-filter li {\nmargin: 10px 40px;\n}\n.section-filter textarea {\nheight: 500px;\n}\n.section-sauce textarea {\nheight: 350px;\n}\n.section-rice .field[name=\"boardnav\"] {\nwidth: 100%;\n}\n.section-rice textarea {\nheight: 150px;\n}\n#fourchanx-settings fieldset {\nborder: 1px solid;\nborder-radius: 3px;\n}\n#fourchanx-settings legend {\nfont-weight: 700;\n}\n#fourchanx-settings textarea {\nfont-family: monospace;\nmin-width: 100%;\nmax-width: 100%;\n}\n#fourchanx-settings code {\ncolor: #000;\nbackground-color: #FFF;\npadding: 0 2px;\n}\n.unscroll {\noverflow: hidden;\n}\n\n/* Unread */\n#unread-line {\nmargin: 0;\n}\n\n/* Thread Updater */\n#updater:not(:hover) {\nbackground: none;\nborder: none;\nbox-shadow: none;\n}\n#updater > .move {\npadding: 0 3px;\n}\n#updater > div:last-child {\ntext-align: center;\n}\n#updater input[type=number] {\nwidth: 4em;\n}\n#updater:not(:hover) > div:not(.move) {\ndisplay: none;\n}\n#updater input[type=\"button\"] {\nwidth: 100%;\n}\n.new {\ncolor: limegreen;\n}\n\n/* Thread Watcher */\n#watcher {\npadding-bottom: 3px;\noverflow: hidden;\nwhite-space: nowrap;\n}\n#watcher:not(:hover) {\nmax-height: 220px;\n}\n#watcher > .move {\npadding-top: 3px;\n}\n#watcher > div {\nmax-width: 200px;\noverflow: hidden;\npadding-left: 3px;\npadding-right: 3px;\ntext-overflow: ellipsis;\n}\n#watcher a {\ntext-decoration: none;\n}\n\n/* Thread Stats */\n#thread-stats {\nbackground: none;\nborder: none;\nbox-shadow: none;\n}\n\n/* Quote */\n.deadlink {\ntext-decoration: none !important;\n}\n.backlink.deadlink:not(.forwardlink), .quotelink.deadlink:not(.forwardlink) {\ntext-decoration: underline !important;\n}\n.inlined {\nopacity: .5;\n}\n#qp input, .forwarded {\ndisplay: none;\n}\n.quotelink.forwardlink,\n.backlink.forwardlink {\ntext-decoration: none;\nborder-bottom: 1px dashed;\n}\n.filtered {\ntext-decoration: underline line-through;\n}\n.inline {\nborder: 1px solid;\ndisplay: table;\nmargin: 2px 0;\n}\n.inline .post {\nborder: 0 !important;\nbackground-color: transparent !important;\ndisplay: table !important;\nmargin: 0 !important;\npadding: 1px 2px !important;\n}\n#qp > .opContainer::after {\ncontent: '';\nclear: both;\ndisplay: table;\n}\n#qp .post {\nborder: none;\nmargin: 0;\npadding: 2px 2px 5px;\n}\n#qp img {\nmax-height: 300px;\nmax-width: 500px;\n}\n.qphl {\noutline: 2px solid rgba(216, 94, 49, .7);\n}\n\n/* File */\n.fileText:hover .fntrunc,\n.fileText:not(:hover) .fnfull,\n.expanded-image > .post > .file > .fileThumb > img[data-md5],\n:not(.expanded-image) > .post > .file > .fileThumb > .full-image {\ndisplay: none;\n}\n.expanding {\nopacity: .5;\n}\n.expanded-image {\nclear: both;\n}\n.expanded-image > .op > .file::after {\ncontent: '';\nclear: both;\ndisplay: table;\n}\n:root.fit-width .full-image {\nmax-width: 100%;\n}\n:root.gecko.fit-width .full-image,\n:root.presto.fit-width .full-image {\nwidth: 100%;\n}\n#ihover {\n-moz-box-sizing: border-box;\nbox-sizing: border-box;\nmax-height: 100%;\nmax-width: 75%;\npadding-bottom: 16px;\n}\n\n/* Index/Reply Navigation */\n#navlinks {\nfont-size: 16px;\ntop: 25px;\nright: 10px;\n}\n\n/* Filter */\n.opContainer.filter-highlight {\nbox-shadow: inset 5px 0 rgba(255, 0, 0, .5);\n}\n.filter-highlight > .reply {\nbox-shadow: -5px 0 rgba(255, 0, 0, .5);\n}\n\n/* Thread & Reply Hiding */\n.hide-thread-button,\n.hide-reply-button {\nfloat: left;\nmargin-right: 2px;\n}\n.stub ~ .sideArrows,\n.stub ~ .hide-reply-button,\n.stub ~ .post {\ndisplay: none !important;\n}\n.stub input {\ndisplay: inline-block;\n}\n\n/* QR */\n#qr {\nz-index: 20;\nposition: fixed;\npadding: 1px;\nborder: 1px solid transparent;\nmin-width: 248px;\nborder-radius: 3px 3px 0 0;\n}\n#qrtab {\nborder-radius: 3px 3px 0 0;\n}\n.autohide:not(:hover):not(.focus) > form {\ndisplay: none !important;\n}\n#qrtab {\nmargin-bottom: 1px;\n}\n#qr .close {\nfloat: right;\npadding: 0 3px;\n}\n#qr .warning {\nmin-height: 1.6em;\nvertical-align: middle;\npadding: 0 1px;\nborder-width: 1px;\nborder-style: solid;\n}\n.persona {\nwidth: 248px;\nmax-width: 100%;\nmin-width: 100%;\n}\n#dump-button {\nwidth: 10%;\nmargin: 0;\n}\n.persona input.field {\nwidth: 29.6%;\nmargin: 0 0 0 0.4%;\n}\n#qr textarea.field {\nheight: 14.8em;\nmin-height: 9em;\n}\n#qr.has-captcha textarea.field {\nheight: 9em;\n}\ninput.field.tripped:not(:hover):not(:focus) {\ncolor: transparent !important; text-shadow: none !important;\n}\n#qr textarea {\nresize: both;\n}\n.captcha-img {\nmargin: 1px 0 0;\ntext-align: center;\nbackground-image: #fff;\n}\n.captcha-input {\nwidth: 100%;\nmargin: 1px 0 0;\n}\n.field,\n.selectrice,\nbutton,\ninput:not([type=radio]) {\n-moz-box-sizing: border-box;\nfont-size: 12px;\nheight: 1.6em;\nmargin: 1px 0 0;\nvertical-align: bottom;\npadding: 0 1px;\n}\n#qr textarea {\nmin-width: 100%;\n}\n#qr [type='submit'] {\nwidth: 25%;\n}\n/* Fake File Input */\n#qr-filename,\n.has-file #qr-no-file {\ndisplay: none;\n}\n#qr-no-file,\n.has-file #qr-filename {\ndisplay: block;\n}\n#qr-filename-container {\n-moz-box-sizing: border-box;\ndisplay: inline-block;\nposition: relative;\nwidth: 100px;\nmin-width: 74.6%;\nmax-width: 74.6%;\nmargin-right: 0.4%;\noverflow: hidden;\npadding: 2px 1px 0;\n}\n#qr-filerm {\nposition: absolute;\nright: 3px;\ntop: 2px;\nz-index: 2;\n}\n#qr input[type=file] {\ndisplay: none;\n}\n/* Thread Select / Spoiler Label */\n#qr select {\nfloat: right;\n}\n/* Dumping UI */\n.dump #dump-list-container {\ndisplay: block;\n}\n#dump-list-container {\ndisplay: none;\nposition: relative;\noverflow-y: hidden;\nmargin-top: 1px;\n}\n#dump-list {\noverflow-x: auto;\noverflow-y: hidden;\nwhite-space: pre;\nwidth: 248px;\nmax-width: 100%;\nmin-width: 100%;\n}\n#dump-list:hover {\noverflow-x: auto;\n}\n.qr-preview {\n-moz-box-sizing: border-box;\ncounter-increment: thumbnails;\ncursor: move;\ndisplay: inline-block;\nheight: 90px;\nwidth: 90px;\npadding: 2px;\nopacity: .5;\noverflow: hidden;\nposition: relative;\ntext-shadow: 0 1px 1px #000;\n-moz-transition: opacity .25s ease-in-out;\nvertical-align: top;\n}\n.qr-preview:hover,\n.qr-preview:focus {\nopacity: .9;\n}\n.qr-preview::before {\ncontent: counter(thumbnails);\ncolor: #fff;\nposition: absolute;\ntop: 3px;\nright: 3px;\ntext-shadow: 0 0 3px #000, 0 0 8px #000;\n}\n.qr-preview#selected {\nopacity: 1;\n}\n.qr-preview.drag {\nbox-shadow: 0 0 10px rgba(0,0,0,.5);\n}\n.qr-preview.over {\nborder-color: #fff;\n}\n.qr-preview > span {\ncolor: #fff;\n}\n.remove {\nbackground: none;\ncolor: #e00;\nfont-weight: 700;\npadding: 3px;\n}\na:only-of-type > .remove {\ndisplay: none;\n}\n.remove:hover::after {\ncontent: \" Remove\";\n}\n.qr-preview > label {\nbackground: rgba(0,0,0,.5);\ncolor: #fff;\nright: 0; bottom: 0; left: 0;\nposition: absolute;\ntext-align: center;\n}\n.qr-preview > label > input {\nmargin: 0;\n}\n#add-post {\ncursor: pointer;\nfont-size: 2em;\nposition: absolute;\ntop: 50%;\nright: 10px;\n-moz-transform: translateY(-50%);\n}\n.textarea {\nposition: relative;\n}\n#char-count {\ncolor: #000;\nbackground: hsla(0, 0%, 100%, .5);\nfont-size: 8pt;\nposition: absolute;\nbottom: 1px;\nright: 1px;\npointer-events: none;\n}\n\n/* Menu */\n.menu-button {\ndisplay: inline-block;\nposition: relative;\n}\n.menu-button i {\nborder-top: 6px solid;\nborder-right: 4px solid transparent;\nborder-left: 4px solid transparent;\ndisplay: inline-block;\nmargin: 2px;\nvertical-align: middle;\n}\n#menu {\nposition: fixed;\noutline: none;\nz-index: 22;\n}\n.entry {\nborder-bottom: 1px solid rgba(0,0,0,.25);\ncursor: pointer;\ndisplay: block;\noutline: none;\npadding: 3px 7px;\nposition: relative;\ntext-decoration: none;\nwhite-space: nowrap;\n}\n.entry:last-child {\nborder-bottom: 0;\n}\n.has-submenu::after {\ncontent: \"\";\nborder-left: .5em solid;\nborder-top: .3em solid transparent;\nborder-bottom: .3em solid transparent;\ndisplay: inline-block;\nmargin: .3em;\nposition: absolute;\nright: 3px;\n}\n.submenu {\ndisplay: none;\nposition: absolute;\nleft: 100%;\ntop: -1px;\n}\n.focused .submenu {\ndisplay: block;\n}\n\n/* General */\n:root.yotsuba .dialog {\nbackground-color: #F0E0D6;\nborder-color: #D9BFB7;\n}\n:root.yotsuba .field:focus {\nborder-color: #EA8;\n}\n\n/* Header */\n:root.yotsuba #header-bar {\nfont-size: 9pt;\ncolor: #B86;\n}\n:root.yotsuba #header-bar a {\ncolor: #800000;\n}\n\n/* Settings */\n:root.yotsuba #fourchanx-settings fieldset {\nborder-color: #D9BFB7;\n}\n\n/* Quote */\n:root.yotsuba .backlink.deadlink {\ncolor: #00E !important;\n}\n:root.yotsuba .inline {\nborder-color: #D9BFB7;\nbackground-color: rgba(255, 255, 255, .14);\n}\n\n/* QR */\n.yotsuba #dump-list::-webkit-scrollbar-thumb {\nbackground-color: #F0E0D6;\nborder-color: #D9BFB7;\n}\n:root.yotsuba .qr-preview {\nbackground-color: rgba(0, 0, 0, .15);\n}\n\n/* Menu */\n:root.yotsuba #menu {\ncolor: #800000;\n}\n:root.yotsuba .entry {\nborder-bottom: 1px solid #D9BFB7;\nfont-size: 10pt;\n}\n:root.yotsuba .focused.entry {\nbackground: rgba(255, 255, 255, .33);\n}\n\n/* General */\n:root.yotsuba-b .dialog {\nbackground-color: #D6DAF0;\nborder-color: #B7C5D9;\n}\n:root.yotsuba-b .field:focus {\nborder-color: #98E;\n}\n\n/* Header */\n:root.yotsuba-b #header-bar {\nfont-size: 9pt;\ncolor: #89A;\n}\n:root.yotsuba-b #header-bar a {\ncolor: #34345C;\n}\n\n/* Settings */\n:root.yotsuba-b #fourchanx-settings fieldset {\nborder-color: #B7C5D9;\n}\n\n/* Quote */\n:root.yotsuba-b .backlink.deadlink {\ncolor: #34345C !important;\n}\n:root.yotsuba-b .inline {\nborder-color: #B7C5D9;\nbackground-color: rgba(255, 255, 255, .14);\n}\n\n/* QR */\n.yotsuba-b #dump-list::-webkit-scrollbar-thumb {\nbackground-color: #D6DAF0;\nborder-color: #B7C5D9;\n}\n:root.yotsuba-b .qr-preview {\nbackground-color: rgba(0, 0, 0, .15);\n}\n\n/* Menu */\n:root.yotsuba-b #menu {\ncolor: #000;\n}\n:root.yotsuba-b .entry {\nborder-bottom: 1px solid #B7C5D9;\nfont-size: 10pt;\n}\n:root.yotsuba-b .focused.entry {\nbackground: rgba(255, 255, 255, .33);\n}\n\n/* General */\n:root.futaba .dialog {\nbackground-color: #F0E0D6;\nborder-color: #D9BFB7;\n}\n:root.futaba .field:focus {\nborder-color: #EA8;\n}\n\n/* Header */\n:root.futaba #header-bar {\nfont-size: 11pt;\ncolor: #B86;\n}\n:root.futaba #header-bar a {\ncolor: #800000;\n}\n\n/* Settings */\n:root.futaba #fourchanx-settings fieldset {\nborder-color: #D9BFB7;\n}\n\n/* Quote */\n:root.futaba .backlink.deadlink {\ncolor: #00E !important;\n}\n:root.futaba .inline {\nborder-color: #D9BFB7;\nbackground-color: rgba(255, 255, 255, .14);\n}\n\n/* QR */\n.futaba #dump-list::-webkit-scrollbar-thumb {\nbackground-color: #F0E0D6;\nborder-color: #D9BFB7;\n}\n:root.futaba .qr-preview {\nbackground-color: rgba(0, 0, 0, .15);\n}\n\n/* Menu */\n:root.futaba #menu {\ncolor: #800000;\n}\n:root.futaba .entry {\nborder-bottom: 1px solid #D9BFB7;\nfont-size: 12pt;\n}\n:root.futaba .focused.entry {\nbackground: rgba(255, 255, 255, .33);\n}\n\n/* General */\n:root.burichan .dialog {\nbackground-color: #D6DAF0;\nborder-color: #B7C5D9;\n}\n:root.burichan .field:focus {\nborder-color: #98E;\n}\n\n/* Header */\n:root.burichan #header-bar {\nfont-size: 11pt;\ncolor: #89A;\n}\n:root.burichan #header-bar a {\ncolor: #34345C;\n}\n\n/* Settings */\n:root.burichan #fourchanx-settings fieldset {\nborder-color: #B7C5D9;\n}\n\n/* Quote */\n:root.burichan .backlink.deadlink {\ncolor: #34345C !important;\n}\n:root.burichan .inline {\nborder-color: #B7C5D9;\nbackground-color: rgba(255, 255, 255, .14);\n}\n\n/* QR */\n.burichan #dump-list::-webkit-scrollbar-thumb {\nbackground-color: #D6DAF0;\nborder-color: #B7C5D9;\n}\n:root.burichan .qr-preview {\nbackground-color: rgba(0, 0, 0, .15);\n}\n\n/* Menu */\n:root.burichan #menu {\ncolor: #000000;\n}\n:root.burichan .entry {\nborder-bottom: 1px solid #B7C5D9;\nfont-size: 12pt;\n}\n:root.burichan .focused.entry {\nbackground: rgba(255, 255, 255, .33);\n}\n\n/* General */\n:root.tomorrow .dialog {\nbackground-color: #282A2E;\nborder-color: #111;\n}\n:root.tomorrow .field:focus {\nborder-color: #000;\n}\n\n/* Header */\n:root.tomorrow #header-bar {\nfont-size: 9pt;\ncolor: #C5C8C6;\n}\n:root.tomorrow #header-bar a {\ncolor: #81A2BE;\n}\n\n/* Settings */\n:root.tomorrow #fourchanx-settings fieldset {\nborder-color: #111;\n}\n\n/* Quote */\n:root.tomorrow .backlink.deadlink {\ncolor: #81A2BE !important;\n}\n:root.tomorrow .inline {\nborder-color: #111;\nbackground-color: rgba(0, 0, 0, .14);\n}\n\n/* QR */\n.tomorrow #dump-list::-webkit-scrollbar-thumb {\nbackground-color: #282A2E;\nborder-color: #111;\n}\n:root.tomorrow #qr select {\ncolor: #C5C8C6;\n}\n:root.tomorrow #qr option {\ncolor: #000;\n}\n:root.tomorrow .qr-preview {\nbackground-color: rgba(255, 255, 255, .15);\n}\n\n/* Menu */\n:root.tomorrow #menu {\ncolor: #C5C8C6;\n}\n:root.tomorrow .entry {\nborder-bottom: 1px solid #111;\nfont-size: 10pt;\n}\n:root.tomorrow .focused.entry {\nbackground: rgba(0, 0, 0, .33);\n}\n\n/* General */\n:root.photon .dialog {\nbackground-color: #DDD;\nborder-color: #CCC;\n}\n:root.photon .field:focus {\nborder-color: #EA8;\n}\n\n/* Header */\n:root.photon #header-bar {\nfont-size: 9pt;\ncolor: #333;\n}\n:root.photon #header-bar a {\ncolor: #FF6600;\n}\n\n/* Settings */\n:root.photon #fourchanx-settings fieldset {\nborder-color: #CCC;\n}\n\n/* Quote */\n:root.photon .backlink.deadlink {\ncolor: #F60 !important;\n}\n:root.photon .inline {\nborder-color: #CCC;\nbackground-color: rgba(255, 255, 255, .14);\n}\n\n/* QR */\n.photon #dump-list::-webkit-scrollbar-thumb {\nbackground-color: #DDD;\nborder-color: #CCC;\n}\n:root.photon .qr-preview {\nbackground-color: rgba(0, 0, 0, .15);\n}\n\n/* Menu */\n:root.photon #menu {\ncolor: #333;\n}\n:root.photon .entry {\nborder-bottom: 1px solid #CCC;\nfont-size: 10pt;\n}\n:root.photon .focused.entry {\nbackground: rgba(255, 255, 255, .33);\n}\n" }; Main.init(); diff --git a/css/style.css b/css/style.css index fa3749eae..2e1d8d3bb 100644 --- a/css/style.css +++ b/css/style.css @@ -5,6 +5,7 @@ display: block; padding: 0; } +.captcha-img, .field { background-color: #FFF; border: 1px solid #CCC; @@ -12,16 +13,15 @@ box-sizing: border-box; color: #333; font: 13px sans-serif; - margin: 0; - padding: 2px 4px 3px; outline: none; - transition: color .25s, border-color .25s, -webkit-flex .25s; - transition: color .25s, border-color .25s, flex .25s; + transition: color .25s, border-color .25s; + transition: color .25s, border-color .25s; } .field::-moz-placeholder, .field:hover::-moz-placeholder { color: #AAA !important; } +.captch-img:hover, .field:hover { border-color: #999; } @@ -34,6 +34,7 @@ } .move { cursor: move; + overflow: hidden; } label, .favicon { cursor: pointer; @@ -58,15 +59,20 @@ a[href="javascript:;"] { /* fixed, z-index */ #overlay, +#fourchanx-settings, #qp, #ihover, #updater, #thread-stats, #navlinks, #header, +#watcher, #qr { position: fixed; } -#overlay { +#fourchanx-settings { z-index: 999; } +#overlay { + z-index: 900; +} #notifications { z-index: 70; } @@ -109,8 +115,6 @@ a[href="javascript:;"] { } #header-bar { border-width: 0; - display: -webkit-flex; - display: flex; padding: 3px 4px 4px; position: relative; transition: all .1s .05s ease-in-out; @@ -127,8 +131,6 @@ a[href="javascript:;"] { border-bottom: 6px solid; } #board-list { - -webkit-flex: 1; - flex: 1; text-align: center; } #header-bar.autohide:not(:hover) { @@ -254,13 +256,6 @@ a[href="javascript:;"] { /* Settings */ #overlay { background-color: rgba(0, 0, 0, .5); - display: -webkit-flex; - display: flex; - -webkit-align-items: center; - align-items: center; - -webkit-justify-content: center; - justify-content: center; - position: fixed; top: 0; left: 0; height: 100%; @@ -277,14 +272,14 @@ a[href="javascript:;"] { min-width: 0; max-width: 100%; padding: 3px; - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; + 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 { - display: -webkit-flex; - display: flex; padding: 2px 2px 0; } #fourchanx-settings > nav a { @@ -294,25 +289,31 @@ a[href="javascript:;"] { text-decoration: none; padding: 2px; } +.section-container { + overflow: auto; + position: absolute; + top: 1.7em; + right: 5px; + bottom: 5px; + left: 5px; +} .sections-list { - -webkit-flex: 1; - flex: 1; + padding: 0 3px; + float: left; +} +.credits { + float: right; } .tab-selected { font-weight: 700; } .section-container { - -webkit-flex: 1; - flex: 1; - position: relative; -} -.section-container > section { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; overflow: auto; + position: absolute; + top: 1.7em; + right: 5px; + bottom: 5px; + left: 5px; } .section-sauce ul, .section-rice ul { @@ -541,186 +542,208 @@ a[href="javascript:;"] { } /* QR */ -:root.hide-original-post-form #postForm, -:root.hide-original-post-form .postingMode, -:root.hide-original-post-form #togglePostForm, -#qr.autohide:not(:hover) > form { - display: none; +#qr { + z-index: 20; + position: fixed; + padding: 1px; + border: 1px solid transparent; + min-width: 248px; + border-radius: 3px 3px 0 0; } -#qr select, #dump-button, .remove, .captcha-img { - cursor: pointer; +#qrtab { + border-radius: 3px 3px 0 0; } -#qr > div { - min-width: 300px; - display: -webkit-flex; - display: flex; - -webkit-align-items: center; - align-items: center; +.autohide:not(:hover):not(.focus) > form { + display: none !important; } -#qr .move { - -webkit-align-self: stretch; - align-self: stretch; - -webkit-flex: 1; - flex: 1; -} -#qr select { - margin: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: none; - background: none; -} -.presto #qr select { - height: 1em; +#qrtab { + margin-bottom: 1px; } #qr .close { + float: right; padding: 0 3px; } -#qr > form { - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; +#qr .warning { + min-height: 1.6em; + vertical-align: middle; + padding: 0 1px; + border-width: 1px; + border-style: solid; } .persona { - display: -webkit-flex; - display: flex; -} -.persona .field { - -webkit-flex: 1; - flex: 1; -} -.persona .field:focus { - -webkit-flex: 3; - flex: 3; + width: 248px; + max-width: 100%; + min-width: 100%; } #dump-button { - background: linear-gradient(#EEE, #CCC); - border: 1px solid #CCC; + width: 10%; margin: 0; - padding: 2px 4px 3px; - outline: none; - width: 30px; } -#dump-button:hover, #dump-button:focus { - background: linear-gradient(#FFF, #DDD); +.persona input.field { + width: 29.6%; + margin: 0 0 0 0.4%; } -#dump-button:active, .dump #dump-button:not(:hover):not(:focus) { - background: linear-gradient(#CCC, #DDD); +#qr textarea.field { + height: 14.8em; + min-height: 9em; } -.gecko #dump-button { - padding: 0; +#qr.has-captcha textarea.field { + height: 9em; } -#qr:not(.dump) #dump-list-container { +input.field.tripped:not(:hover):not(:focus) { + color: transparent !important; text-shadow: none !important; +} +#qr textarea { + resize: both; +} +.captcha-img { + margin: 1px 0 0; + text-align: center; + background-image: #fff; +} +.captcha-input { + width: 100%; + margin: 1px 0 0; +} +.field, +.selectrice, +button, +input:not([type=radio]) { + -moz-box-sizing: border-box; + font-size: 12px; + height: 1.6em; + margin: 1px 0 0; + vertical-align: bottom; + padding: 0 1px; +} +#qr textarea { + min-width: 100%; +} +#qr [type='submit'] { + width: 25%; +} +/* Fake File Input */ +#qr-filename, +.has-file #qr-no-file { display: none; } -#dump-list-container { - height: 100px; +#qr-no-file, +.has-file #qr-filename { + display: block; +} +#qr-filename-container { + -moz-box-sizing: border-box; + display: inline-block; position: relative; - -webkit-user-select: none; - -moz-user-select: none; - -o-user-select: none; - user-select: none; + width: 100px; + min-width: 74.6%; + max-width: 74.6%; + margin-right: 0.4%; + overflow: hidden; + padding: 2px 1px 0; +} +#qr-filerm { + position: absolute; + right: 3px; + top: 2px; + z-index: 2; +} +#qr input[type=file] { + display: none; +} +/* Thread Select / Spoiler Label */ +#qr select { + float: right; +} +/* Dumping UI */ +.dump #dump-list-container { + display: block; +} +#dump-list-container { + display: none; + position: relative; + overflow-y: hidden; + margin-top: 1px; } #dump-list { - counter-reset: qrpreviews; - top: 0; right: 0; bottom: 0; left: 0; - overflow: hidden; - position: absolute; - white-space: nowrap; + overflow-x: auto; + overflow-y: hidden; + white-space: pre; + width: 248px; + max-width: 100%; + min-width: 100%; } #dump-list:hover { - bottom: -12px; overflow-x: auto; - z-index: 1; -} -#dump-list::-webkit-scrollbar { - height: 12px; -} -#dump-list::-webkit-scrollbar-thumb { - border: 1px solid; } .qr-preview { - background-position: 50% 20%; - background-size: cover; - border: 1px solid #808080; - color: #FFF !important; - font-size: 12px; -moz-box-sizing: border-box; - box-sizing: border-box; + counter-increment: thumbnails; cursor: move; display: inline-block; - height: 92px; width: 92px; - margin: 4px; padding: 2px; - opacity: .6; - outline: none; + height: 90px; + width: 90px; + padding: 2px; + opacity: .5; overflow: hidden; position: relative; text-shadow: 0 1px 1px #000; - transition: opacity .25s ease-in-out; + -moz-transition: opacity .25s ease-in-out; vertical-align: top; - white-space: pre; } -.qr-preview:hover, .qr-preview:focus { +.qr-preview:hover, +.qr-preview:focus { opacity: .9; - color: #FFF !important; +} +.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::before { - counter-increment: qrpreviews; - content: counter(qrpreviews); - font-weight: 700; - text-shadow: 0 0 3px #000, 0 0 5px #000; - position: absolute; - top: 3px; right: 3px; -} .qr-preview.drag { - border-color: red; - border-style: dashed; + box-shadow: 0 0 10px rgba(0,0,0,.5); } .qr-preview.over { - border-color: #FFF; - border-style: dashed; + border-color: #fff; +} +.qr-preview > span { + color: #fff; } .remove { - color: #E00 !important; + background: none; + color: #e00; font-weight: 700; padding: 3px; } +a:only-of-type > .remove { + display: none; +} .remove:hover::after { - content: ' Remove'; + content: " Remove"; } .qr-preview > label { - background: rgba(0, 0, 0, .5); + background: rgba(0,0,0,.5); + color: #fff; right: 0; bottom: 0; left: 0; position: absolute; text-align: center; } .qr-preview > label > input { - margin: 1px 0; - vertical-align: bottom; + margin: 0; } #add-post { - display: inline-block; - font-size: 30px; - height: 30px; - width: 30px; - line-height: 1; - text-align: center; + cursor: pointer; + font-size: 2em; position: absolute; - right: 0; bottom: 0; - z-index: 1; -} -#qr textarea { - min-height: 160px; - min-width: 100%; - display: block; -} -#qr.has-captcha textarea { - min-height: 120px; + top: 50%; + right: 10px; + -moz-transform: translateY(-50%); } .textarea { position: relative; @@ -734,69 +757,6 @@ a[href="javascript:;"] { right: 1px; pointer-events: none; } -#char-count.warning { - color: red; -} -.captcha-img { - background: #FFF; - outline: 1px solid #CCC; - outline-offset: -1px; -} -.captcha-img > img { - display: block; - height: 57px; - width: 300px; -} -#file-n-submit > input { - margin: 0; -} -#file-n-submit.has-file #qr-no-file { - visibility: hidden; -} -#file-n-submit:not(.has-file) #qr-filename, -#file-n-submit:not(.has-file) #qr-file-spoiler, -#file-n-submit:not(.has-file) #qr-filerm { - display: none; -} -#file-n-submit { - display: -webkit-flex; - display: flex; - -webkit-flex-direction: row; - flex-direction: row; - -webkit-align-items: center; - align-items: center; -} -#qr-no-file, #qr-filename-container { - -webkit-flex: 1; - flex: 1; -} -#qr-filename-container { - cursor: default; - position: relative; - margin-left: 2px; -} -#qr-filename { - position: absolute; - top: 0; right: 0; bottom: 0; left: 0; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} -#qr-filerm { - padding: 0 2px; -} -#file-n-submit > #qr-file-spoiler { - margin: 0 2px; -} -#file-n-submit input[type='submit'] { - min-width: 40px; - -webkit-order: 1; - order: 1; -} -#qr input[type='file'] { - position: absolute; - visibility: hidden; -} /* Menu */ .menu-button { @@ -812,48 +772,39 @@ a[href="javascript:;"] { vertical-align: middle; } #menu { - border-bottom: 0; - display: -webkit-flex; - display: flex; - margin: 2px 0; - -webkit-flex-direction: column; - flex-direction: column; - position: absolute; + position: fixed; outline: none; + z-index: 22; } .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; } -.entry.has-submenu { - padding-right: 20px; +.entry:last-child { + border-bottom: 0; } .has-submenu::after { - content: ''; - border-left: 6px solid; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; + content: ""; + border-left: .5em solid; + border-top: .3em solid transparent; + border-bottom: .3em solid transparent; display: inline-block; - margin: 4px; + margin: .3em; position: absolute; right: 3px; } -.has-submenu:not(.focused) > .submenu { - display: none; -} .submenu { - border-bottom: 0; - display: -webkit-flex; - display: flex; - -webkit-flex-direction: column; - flex-direction: column; + display: none; position: absolute; - margin: -1px 0; + left: 100%; + top: -1px; } -.entry input { - margin: 0; +.focused .submenu { + display: block; } diff --git a/lib/ui.coffee b/lib/ui.coffee index d8638f613..328466e0c 100644 --- a/lib/ui.coffee +++ b/lib/ui.coffee @@ -7,6 +7,10 @@ UI = do -> el.style.cssText = localStorage.getItem("#{g.NAMESPACE}#{id}.position") or position move = $ '.move', el $.on move, 'touchstart mousedown', dragstart + for child in move.children + continue unless child.tagName + $.on child, 'touchstart mousedown', (e) -> + e.stopPropagation() el class Menu diff --git a/src/features.coffee b/src/features.coffee index 75ed5f20c..0e2e706c2 100644 --- a/src/features.coffee +++ b/src/features.coffee @@ -211,16 +211,6 @@ Settings = $.prepend $.id('navtopright'), [$.tn(' ['), link, $.tn('] ')] $.get 'previousversion', null, (item) -> - <% if (type === 'userscript') { %> - el = $.el 'span' - el.style.flex = 'test' - if el.style.flex is 'test' - el.innerHTML = """ - Firefox is not correctly set up and some <%= meta.name %> features will be displayed incorrectly.
- Follow the instructions of the install guide to fix it. - """ - new Notification 'warning', el, 30 - <% } %> if previous = item['previousversion'] return if previous is g.VERSION # Avoid conflicts between sync'd newer versions @@ -258,7 +248,6 @@ Settings = $.event 'CloseMenu' html = """ -
-
""" - Settings.dialog = overlay = $.el 'div', + Settings.overlay = overlay = $.el 'div', id: 'overlay' + + Settings.dialog = dialog = $.el 'div', + id: 'fourchanx-settings' + className: 'dialog' innerHTML: html links = [] @@ -287,21 +279,23 @@ Settings = links.push link, $.tn ' | ' sectionToOpen = link if section.title is openSection links.pop() - $.add $('.sections-list', overlay), links + $.add $('.sections-list', dialog), links (if sectionToOpen then sectionToOpen else links[0]).click() - $.on $('.close', overlay), 'click', Settings.close - $.on overlay, 'click', Settings.close - $.on overlay.firstElementChild, 'click', (e) -> e.stopPropagation() + $.on $('.close', dialog), 'click', Settings.close + $.on overlay, 'click', Settings.close d.body.style.width = "#{d.body.clientWidth}px" $.addClass d.body, 'unscroll' - $.add d.body, overlay + $.add d.body, [overlay, dialog] + close: -> return unless Settings.dialog d.body.style.removeProperty 'width' $.rmClass d.body, 'unscroll' + $.rm Settings.overlay $.rm Settings.dialog + delete Settings.overlay delete Settings.dialog sections: [] @@ -1895,7 +1889,7 @@ Keybinds = if Conf['Bottom header'] topMargin = 0 else - headRect = Header.toggle.getBoundingClientRect() + headRect = Header.bar.getBoundingClientRect() topMargin = headRect.top + headRect.height if postEl = $ '.reply.highlight', thread $.rmClass postEl, 'highlight' @@ -1963,7 +1957,7 @@ Nav = if Conf['Bottom header'] topMargin = 0 else - headRect = Header.toggle.getBoundingClientRect() + headRect = Header.bar.getBoundingClientRect() topMargin = headRect.top + headRect.height threads = $$ '.thread:not([hidden])' for thread, i in threads diff --git a/src/main.coffee b/src/main.coffee index 6b7ecc9a4..a83ecb98f 100644 --- a/src/main.coffee +++ b/src/main.coffee @@ -477,11 +477,6 @@ Main = Main.callbackNodes Thread, threads Main.callbackNodes Post, posts - if $.hasClass d.body, 'fourchan_x' - alert '4chan X v2 detected: Disable it or v3 will break.' - if /Firefox\/1/.test navigator.userAgent - alert 'Your version of Firefox is incompatible with 4chan X v3. Firefox 20+ is required.' - $.event '4chanXInitFinished' Main.checkUpdate() diff --git a/src/qr.coffee b/src/qr.coffee index b9e35cc11..98ba53b86 100644 --- a/src/qr.coffee +++ b/src/qr.coffee @@ -313,7 +313,8 @@ QR = return unless files.length QR.open() QR.fileInput files - openFileInput: -> + openFileInput: (e) -> + return if e.keyCode and e.keyCode isnt 32 QR.nodes.fileInput.click() fileInput: (files) -> if @ instanceof Element #or files instanceof Event # file input @@ -419,7 +420,7 @@ QR = lock: (lock=true) -> @isLocked = lock return unless @ is QR.selected - for name in ['name', 'email', 'sub', 'com', 'fileButton', 'spoiler'] + for name in ['name', 'email', 'sub', 'com', 'spoiler'] QR.nodes[name].disabled = lock @nodes.rm.style.visibility = QR.nodes.fileRM.style.visibility = if lock then 'hidden' else '' @@ -604,6 +605,7 @@ QR = title: 'Verification' autocomplete: 'off' spellcheck: false + tabIndex: 55 @nodes = challenge: $.id 'recaptcha_challenge_field_holder' img: imgContainer.firstChild @@ -618,6 +620,8 @@ QR = $.on imgContainer, 'click', @reload.bind @ $.on input, 'keydown', @keydown.bind @ + $.on input, 'focus', -> $.addClass QR.nodes.el, 'focus' + $.on input, 'blur', -> $.rmClass QR.nodes.el, 'focus' $.get 'captchas', [], (item) => @sync item['captchas'] $.sync 'captchas', @sync @@ -695,40 +699,40 @@ QR = dialog: -> dialog = UI.dialog 'qr', 'top:0;right:0;', """ -
+
+ × - - ×
- - - - + + + + +
+
+ +
- + -
-
- - + +
- - - + No selected file + × - × - +
+
""".replace />\s+<' # get rid of spaces between elements @@ -748,7 +752,6 @@ QR = addPost: $ '#add-post', dialog charCount: $ '#char-count', dialog fileSubmit: $ '#file-n-submit', dialog - fileButton: $ '#qr-file-button', dialog filename: $ '#qr-filename', dialog fileRM: $ '#qr-filerm', dialog spoiler: $ '#qr-file-spoiler', dialog @@ -794,11 +797,10 @@ QR = $.add nodes.thread, $.el 'option', value: thread textContent: "Thread No.#{thread}" - $.after nodes.autohide, nodes.thread QR.resetThreadSelector() - for node in [nodes.fileButton, nodes.filename.parentNode] - $.on node, 'click', QR.openFileInput + $.on nodes.filename.parentNode, 'click keyup', QR.openFileInput + $.on nodes.autohide, 'change', QR.toggleHide $.on nodes.close, 'click', QR.close $.on nodes.dumpButton, 'click', -> nodes.el.classList.toggle 'dump' @@ -812,6 +814,8 @@ QR = # save selected post's data for name in ['name', 'email', 'sub', 'com'] $.on nodes[name], 'input', -> QR.selected.save @ + $.on nodes[name], 'focus', -> $.addClass nodes.el, 'focus' + $.on nodes[name], 'blur', -> $.rmClass nodes.el, 'focus' QR.status() QR.cooldown.init()