diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 1661336a..e302037b 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -336,7 +336,11 @@ }, "disableAllStyles": { "message": "Turn all styles off", - "description": "Label for the checkbox that turns all enabled styles off." + "description": "Label for the checkbox that turns all styles off." + }, + "disableAllStylesOff": { + "message": "Styles are turned off", + "description": "Label for the checkbox that turns all styles off when it's checked." }, "disableStyleLabel": { "message": "Disable", diff --git a/edit.html b/edit.html index 09870371..c4812fdb 100644 --- a/edit.html +++ b/edit.html @@ -271,6 +271,10 @@ + diff --git a/edit/edit.css b/edit/edit.css index fc66d802..61cb136e 100644 --- a/edit/edit.css +++ b/edit/edit.css @@ -148,6 +148,7 @@ label { margin-top: 2px; display: flex; align-items: center; + flex-wrap: wrap; line-height: 16px; } diff --git a/global-dark.css b/global-dark.css index e9c7a036..7c7f6a84 100644 --- a/global-dark.css +++ b/global-dark.css @@ -23,6 +23,7 @@ --accent-1: hsl(180, 100%, 95%); --accent-3: hsl(180, 30%, 18%); --input-bg: var(--c95); + --red1: hsl(0, 85%, 55%); } textarea, input[type=url], diff --git a/global.css b/global.css index 6f782515..6dec45fe 100644 --- a/global.css +++ b/global.css @@ -33,6 +33,7 @@ --accent-1: hsl(180, 100%, 15%); --accent-2: hsl(180, 50%, 40%); --accent-3: hsl(180, 40%, 69%); + --red1: hsl(0, 70%, 45%); } body { font: normal 12px var(--family); @@ -307,6 +308,26 @@ summary { position: absolute; } +html:not(.all-disabled) body:not(#stylus-popup) #disableAll-label:not([data-persist]) { + display: none; +} +html:not(.all-disabled) #disableAll-label::before { + content: attr(data-on); +} +.all-disabled #disableAll-label::before { + content: attr(data-off); +} +.all-disabled #disableAll-label { + font-weight: bold; + color: var(--red1); +} +.all-disabled #disableAll-label .svg-icon { + fill: var(--red1); +} +.all-disabled #disableAll { + border-color: var(--red1); +} + :focus, .CodeMirror-focused, /* Allowing click outline on text/search inputs and textareas */ diff --git a/js/dom-on-load.js b/js/dom-on-load.js index 8358ca38..912befda 100644 --- a/js/dom-on-load.js +++ b/js/dom-on-load.js @@ -1,6 +1,7 @@ /* global $$ $ $create focusAccessibility getEventKeyName moveFocus */// dom.js /* global CHROME clamp debounce */// toolbox.js /* global msg */ +/* global prefs */ /* global t */// localization.js 'use strict'; @@ -33,6 +34,9 @@ } } } + prefs.subscribe('disableAll', () => { + $('#disableAll-label').dataset.persist = ''; // avoids hiding if already shown + }); function changeFocusedInputOnWheel(event) { const el = document.activeElement; diff --git a/js/dom.js b/js/dom.js index f7788698..308d847b 100644 --- a/js/dom.js +++ b/js/dom.js @@ -355,6 +355,7 @@ async function showSpinner(parent) { } function toggleDataset(el, prop, state) { + if (!el) return; const wasEnabled = el.dataset[prop] != null; // avoids mutating DOM unnecessarily if (state) { if (!wasEnabled) el.dataset[prop] = ''; @@ -412,6 +413,10 @@ function waitForSelector(selector, {recur, stopOnDomReady = true} = {}) { const dom = {}; +prefs.subscribe('disableAll', (_, val) => { + $.rootCL.toggle('all-disabled', val); +}, {runNow: true}); + prefs.ready.then(() => { waitForSelector('details[data-pref]', { recur(elems) { diff --git a/manage.html b/manage.html index d1ccede7..0d2ae318 100644 --- a/manage.html +++ b/manage.html @@ -154,6 +154,11 @@