diff --git a/src/General/css/style.css b/src/General/css/style.css index adea27ca0..c07c15c9c 100755 --- a/src/General/css/style.css +++ b/src/General/css/style.css @@ -1247,30 +1247,23 @@ input[name="Default Volume"] { #qr.forced-anon input[data-name="sub"]:not(.force-show), #qr.reply-to-thread input[data-name="sub"]:not(.force-show), #qr.reply-to-thread select[name="filetag"], -body:not(.board_jp) #sjis-toggle, -#sjis-toggle > input { +body:not(.board_jp) #sjis-toggle { display: none; } #sjis-toggle { + -webkit-flex: 0 0 23px; + flex: 0 0 23px; -webkit-align-self: stretch; align-self: stretch; - width: 20px; border: 1px solid #BBB; - background-color: #DCDCDC; - color: #000; - display: -webkit-flex; - display: flex; - -webkit-align-items: center; - align-items: center; -} -#sjis-toggle::after { - content: "∀"; - margin: auto; -} -#qr:not(.sjis-preview) #sjis-toggle { + padding: 0; background: linear-gradient(to bottom, #F8F8F8, #DCDCDC) no-repeat; + color: #000; } -#sjis-toggle, #qr.sjis-preview textarea { +#qr.sjis-preview #sjis-toggle { + background: #DCDCDC; +} +#sjis-toggle, #qr.sjis-preview textarea.field { font-family: "IPAMonaPGothic","Mona","MS PGothic",monospace; font-size: 16px; line-height: 17px; diff --git a/src/General/css/tomorrow.css b/src/General/css/tomorrow.css index 1176798cc..3f1ca38b1 100755 --- a/src/General/css/tomorrow.css +++ b/src/General/css/tomorrow.css @@ -87,8 +87,7 @@ :root.tomorrow .qr-preview { background-color: rgba(255, 255, 255, .15); } -:root.tomorrow #qr .field, -:root.tomorrow #qr #sjis-toggle { +:root.tomorrow #qr .field { background-color: rgb(26, 27, 29); color: rgb(197,200,198); border-color: rgb(40, 41, 42); @@ -98,8 +97,20 @@ border-color: rgb(129, 162, 190) !important; background-color: rgb(30,32,36); } -:root.tomorrow #qr:not(.sjis-preview) #sjis-toggle { +:root.tomorrow #sjis-toggle { background: linear-gradient(to bottom, #2E3035, #222427) no-repeat; + color: rgb(197,200,198); + border-color: rgb(40, 41, 42); + outline: none; +} +:root.tomorrow #sjis-toggle::-moz-focus-inner { + border: none; +} +:root.tomorrow #sjis-toggle:focus { + border-color: rgb(129, 162, 190); +} +:root.tomorrow #qr.sjis-preview #sjis-toggle { + background: rgb(26, 27, 29); } :root.tomorrow #qr select, :root.tomorrow #file-n-submit > input { diff --git a/src/General/html/Features/QuickReply.html b/src/General/html/Features/QuickReply.html index 48d15ede4..161f40ae4 100755 --- a/src/General/html/Features/QuickReply.html +++ b/src/General/html/Features/QuickReply.html @@ -10,7 +10,7 @@
- + diff --git a/src/Posting/QR.coffee b/src/Posting/QR.coffee index 8766cc5c7..132797bce 100644 --- a/src/Posting/QR.coffee +++ b/src/Posting/QR.coffee @@ -184,6 +184,12 @@ QR = else QR.unhide() + toggleSJIS: (e) -> + e.preventDefault() + Conf['sjisPreview'] = !Conf['sjisPreview'] + $.set 'sjisPreview', Conf['sjisPreview'] + QR.nodes.el.classList.toggle 'sjis-preview', Conf['sjisPreview'] + setCustomCooldown: (enabled) -> Conf['customCooldownEnabled'] = enabled QR.cooldown.customCooldown = enabled @@ -445,7 +451,7 @@ QR = setNode 'dumpButton', '#dump-button' setNode 'pasteArea', '#paste-area' setNode 'urlButton', '#url-button' - setNode 'sjisToggle', '#sjis-toggle > input' + setNode 'sjisToggle', '#sjis-toggle' setNode 'name', '[data-name=name]' setNode 'email', '[data-name=email]' setNode 'sub', '[data-name=sub]' @@ -500,7 +506,6 @@ QR = nodes.spoiler.parentElement.hidden = true if g.BOARD.ID is 'jp' and Conf['sjisPreview'] - nodes.sjisToggle.checked = true $.addClass QR.nodes.el, 'sjis-preview' if parseInt(Conf['customCooldown'], 10) > 0 @@ -539,8 +544,7 @@ QR = $.on nodes.fileRM, 'click', -> QR.selected.rmFile() $.on nodes.spoiler, 'change', -> QR.selected.nodes.spoiler.click() $.on nodes.fileInput, 'change', QR.handleFiles - $.on nodes.sjisToggle, 'change', $.cb.checked - $.on nodes.sjisToggle, 'change', -> nodes.el.classList.toggle 'sjis-preview', @checked + $.on nodes.sjisToggle, 'click', QR.toggleSJIS $.on nodes.customCooldown, 'click', QR.toggleCustomCooldown window.addEventListener 'focus', QR.focus, true