Mirrors
/
uBlock
mirror of https://github.com/gorhill/uBlock.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

More fine tuning of user interface 

Noteworthy:
- Make new popup panel better resize in desktop
  environment
- Fix button visuals in "My rules" pane
- Keep "Update now" button visible until update
  is completed
- Renaming CSS variables for consistency
This commit is contained in:
Raymond Hill 2020-04-24 09:33:44 -04:00
parent 201308217f
commit d2897db2b6
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
7 changed files with 66 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/css/3p-filters.css
View File

@ -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%;
}

20
src/css/common.css
View File

@ -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 {

16
src/css/dyna-rules.css
View File

@ -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 {

7
src/css/fa-icons.css
View File

@ -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,

19
src/css/popup-fenix.css
View File

@ -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;

21
src/css/themes/default.css
View File

@ -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%);

18
src/js/3p-filters.js
View File

@ -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
);
};