diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css index 9ed894422..eade48aba 100644 --- a/src/css/3p-filters.css +++ b/src/css/3p-filters.css @@ -12,7 +12,10 @@ top: 0; z-index: 10; } -body.updating #buttonUpdate .fa-icon svg { +#buttonUpdate.active { + pointer-events: none; + } +#buttonUpdate.active .fa-icon svg { animation: spin 1s linear infinite; transform-origin: 50%; } diff --git a/src/css/common.css b/src/css/common.css index 7f563609d..c02dac671 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -98,18 +98,23 @@ button.vflex { button:hover { background-color: var(--button-surface-hover); } +button.active { + background-color: var(--button-active-surface); + } button.important { - background-color: var(--bg-button-important); + background-color: var(--button-important-surface); } button.important:hover { - background-color: var(--bg-button-important-hover); + background-color: var(--button-important-surface-hover); } button.disabled, button[disabled], button.important.disabled, button.important[disabled] { - background-color: var(--bg-button-disabled); - color: var(--fg-button-disabled); + background-color: var(--button-disabled-surface); + color: var(--button-disabled-ink); + fill: var(--button-disabled-ink); + filter: var(--button-disabled-filter); pointer-events: none; } button.iconifiable > .fa, @@ -191,9 +196,10 @@ input[type="checkbox"] { .disabled > .ubo-icon, .ubo-icon[disabled], [disabled] > .ubo-icon { - color: var(--fg-button-disabled); - fill: var(--fg-button-disabled); - stroke: var(--fg-button-disabled); + color: var(--button-disabled-ink); + fill: var(--button-disabled-ink); + filter: var(--button-disabled-filter); + stroke: var(--button-disabled-ink); pointer-events: none; } .ubo-icon > svg { diff --git a/src/css/dyna-rules.css b/src/css/dyna-rules.css index 9d832149a..d67cb0597 100644 --- a/src/css/dyna-rules.css +++ b/src/css/dyna-rules.css @@ -43,21 +43,23 @@ body { #commitButton, body.editing #diff #exportButton, body.editing #diff #importButton { - background-color: var(--bg-button-disabled); - color: var(--fg-button-disabled); - fill: var(--fg-button-disabled); + background-color: var(--button-disabled-surface); + color: var(--button-disabled-ink); + fill: var(--button-disabled-ink); + filter: var(--button-disabled-filter); pointer-events: none; } body:not(.editing) #diff.dirty #revertButton, body:not(.editing) #diff.dirty #commitButton { - background-color: var(--bg-button); - color: var(--fg-button); - fill: var(--fg-button); + background-color: var(--button-surface); + color: var(--button-ink); + fill: var(--button-ink); + filter: none; pointer-events: auto; } body:not(.editing) #diff.dirty #revertButton:hover, body:not(.editing) #diff.dirty #commitButton:hover { - background-color: var(--bg-button-hover); + background-color: var(--button-surface-hover); } .codeMirrorContainer { diff --git a/src/css/fa-icons.css b/src/css/fa-icons.css index 8e90dfadc..a410bcafd 100644 --- a/src/css/fa-icons.css +++ b/src/css/fa-icons.css @@ -18,9 +18,10 @@ .disabled > .fa-icon, .fa-icon[disabled], [disabled] > .fa-icon { - color: var(--fg-button-disabled); - fill: var(--fg-button-disabled); - stroke: var(--fg-button-disabled); + color: var(--button-disabled-ink); + fill: var(--button-disabled-ink); + filter: var(--button-disabled-filter); + stroke: var(--button-disabled-ink); pointer-events: none; } .fa-icon > .fa-icon-badge, diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css index 4bb4dbe05..ef0fcb8d1 100644 --- a/src/css/popup-fenix.css +++ b/src/css/popup-fenix.css @@ -63,15 +63,16 @@ hr { margin: 0.5em 0; } #switch .fa-icon { - color: var(--fg-popup-power); - fill: var(--fg-popup-power); + color: var(--popup-power-ink); + fill: var(--popup-power-ink); cursor: pointer; font-size: 700%; margin: 0; padding: 0; } #switch .fa-icon:hover { - filter: var(--fg-popup-power-hover); + color: var(--popup-power-ink-hover); + fill: var(--popup-power-ink-hover); } body.off #switch .fa-icon { color: var(--fg-0-20); @@ -221,6 +222,7 @@ body[dir="rtl"] #tooltip { padding: 0; overflow: hidden; text-align: right; + --rule-cell-width: 5em; } body:not(.dfEnabled) #firewall { display: none; @@ -264,7 +266,7 @@ body:not(.dfEnabled) #firewall { justify-content: flex-end; padding-right: 2px; white-space: normal; - width: calc(100% - 5em); + width: calc(100% - var(--rule-cell-width)); word-break: break-word; } #firewall > div.isCname > span:first-of-type { @@ -282,7 +284,7 @@ body:not(.dfEnabled) #firewall { #firewall > div > span:first-of-type ~ span { flex-shrink: 0; margin-left: 1px; - width: 5em; + width: var(--rule-cell-width); } #firewall > div > span:nth-of-type(2) { display: none; @@ -355,7 +357,7 @@ body:not(.dfEnabled) #firewall { } body.advancedUser #firewall > div > span:first-of-type { - width: calc(100% - 10em); + width: calc(100% - 2 * var(--rule-cell-width)); } body.advancedUser #firewall > div > span:nth-of-type(2) { display: inline-flex; @@ -470,6 +472,7 @@ body.advancedUser #firewall > div > span.noopRule.ownRule, /* mouse-driven devices */ :root.desktop body { + max-width: max(100vw, 800px); overflow: auto; } :root.desktop #panes { @@ -485,7 +488,7 @@ body.advancedUser #firewall > div > span.noopRule.ownRule, flex-grow: 1; line-height: 1.4; max-height: 540px; - min-height: 100vh; + max-height: max(100vh, 600px); min-width: 360px; overflow-y: auto; width: max-content; @@ -494,7 +497,7 @@ body.advancedUser #firewall > div > span.noopRule.ownRule, padding: 0.5em; } :root.desktop .tool:hover { - background-color: var(--bg-button); + background-color: var(--button-surface); } :root.desktop .tool [data-i18n] { width: min-content; diff --git a/src/css/themes/default.css b/src/css/themes/default.css index b0f632c1d..b58982dfe 100644 --- a/src/css/themes/default.css +++ b/src/css/themes/default.css @@ -11,7 +11,9 @@ https://protocol.mozilla.org/fundamentals/color.html */ :root { + --blue-10: #80ebff; --blue-50: #0060df; + --blue-60: #0250bb; --ink-20: #312a64; --ink-50: #291d4f; --ink-80: #20123a; @@ -22,6 +24,8 @@ --light-gray-40: #cfcfd8; --violet-70: #592acb; --violet-80: #45278d; + --yellow-30: #ffd567; + --yellow-40: #ffbd4f; --yellow-50: #ffa436; --yellow-60: #e27f2e; --black: #000; @@ -64,12 +68,13 @@ --button-surface: var(--light-gray-30); --button-ink: var(--ink-20); --button-surface-hover: var(--light-gray-40); - --bg-button: hsla(0, 0%, 90%, 1); - --bg-button-important: hsla(36, 100%, 85%, 1); - --bg-button-important-hover: hsla(36, 100%, 77%, 1); - --fg-button: var(--fg-0); - --bg-button-disabled: hsla(0, 0%, 93%, 1); - --fg-button-disabled: hsla(0, 0%, 60%, 1); + --button-active-surface: var(--blue-10); + --button-important-surface: var(--yellow-30); + --button-important-surface-hover: var(--yellow-40); + /* https://material.io/design/interaction/states.html#disabled */ + --button-disabled-filter: opacity(38%); + --button-disabled-surface: var(--light-gray-30); + --button-disabled-ink: var(--ink-20); --bg-transient-notice: hsla(60, 100%, 95%, 1); @@ -99,8 +104,8 @@ --fg-tooltip: var(--ink-80); /* popup panel */ - --fg-popup-power: var(--blue-50); - --fg-popup-power-hover: opacity(80%); + --popup-power-ink: var(--blue-50); + --popup-power-ink-hover: var(--blue-60); --bg-popup-cell-1: hsla(261, 0%, 93%, 1); --bg-popup-cell-2: rgb(224, 224, 230); --bg-popup-cell-label-filter: opacity(40%); diff --git a/src/js/3p-filters.js b/src/js/3p-filters.js index ad9fa9fee..a4437d5be 100644 --- a/src/js/3p-filters.js +++ b/src/js/3p-filters.js @@ -313,17 +313,23 @@ const renderFilterLists = function(soft) { /******************************************************************************/ const renderWidgets = function() { - uDom('#buttonApply').toggleClass( + let cl = uDom.nodeFromId('buttonApply').classList; + cl.toggle( 'disabled', filteringSettingsHash === hashFromCurrentFromSettings() ); - uDom('#buttonPurgeAll').toggleClass( + const updating = document.body.classList.contains('updating'); + cl = uDom.nodeFromId('buttonUpdate').classList; + cl.toggle('active', updating); + cl.toggle( 'disabled', - document.querySelector('#lists .listEntry.cached:not(.obsolete)') === null - ); - uDom('#buttonUpdate').toggleClass( + updating === false && + document.querySelector('#lists .listEntry.obsolete:not(.toRemove) input[type="checkbox"]:checked') === null + ); + cl = uDom.nodeFromId('buttonPurgeAll').classList; + cl.toggle( 'disabled', - document.querySelector('body:not(.updating) #lists .listEntry.obsolete:not(.toRemove) input[type="checkbox"]:checked') === null + updating || document.querySelector('#lists .listEntry.cached:not(.obsolete)') === null ); };