More fine tuning of UI

This commit is contained in:
Raymond Hill 2020-04-22 09:56:37 -04:00
parent 6bcc371d05
commit 4eef5432a9
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
6 changed files with 51 additions and 17 deletions

View File

@ -54,8 +54,8 @@
--><span class="fa-icon status obsolete" data-i18n-title="3pExternalListObsolete">exclamation-triangle</span><!--
--><span class="fa-icon status cache">clock-o</span><!--
--><span class="fa-icon status updating" data-i18n-title="3pUpdating">spinner</span><!--
--><span class="fa-icon status failed" data-i18n-title="3pNetworkError">unlink</span></span><!--
--><span class="counts"></span></span></label>
--><span class="fa-icon status failed" data-i18n-title="3pNetworkError">unlink</span><!--
--><span class="counts"></span></span></span></label>
</div>
<div class="listEntry toImport"><label><input type="checkbox" id="importLists"><span><span class="forinput" data-i18n="3pImport"></span> <a class="fa-icon info towiki" href="https://github.com/gorhill/uBlock/wiki/Filter-lists-from-around-the-web" target="_blank">info-circle</a></span></label><!--
--><!--

View File

@ -124,7 +124,7 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
font-size: smaller;
}
.listEntry.checked .counts {
display: inline;
display: inline-block;
}
.listEntry .status {
cursor: default;
@ -200,7 +200,11 @@ body.updating .listEntry.checked.obsolete .updating {
padding-inline-start: 0.3em;
}
:root.mobile .li.listEntry .listname,
:root.mobile .li.listEntry .iconbar,
:root.mobile .li.listEntry.checked .counts {
display: block;
:root.mobile .li.listEntry .iconbar {
align-items: flex-start;
display: flex;
white-space: nowrap;
}
:root.mobile .li.listEntry .iconbar {
margin-top: 0.2em;
}

View File

@ -13,6 +13,12 @@
font-weight: 600;
src: url('fonts/Inter/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: Metropolis;
font-style: normal;
font-weight: normal;
src: url('fonts/Metropolis/Metropolis-Regular.woff2') format('woff2');
}
@font-face {
font-family: Metropolis;
font-style: normal;
@ -33,8 +39,8 @@ body {
background-color: var(--default-surface);
border: 0;
box-sizing: border-box;
color: var(--fg-0);
fill: var(--fg-0);
color: var(--default-ink);
fill: var(--default-ink);
font-family: Inter, sans-serif;
font-size: 14px;
line-height: 1.5;

View File

@ -467,8 +467,8 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
:root.desktop body {
overflow: auto;
}
:root.desktop body.loading * {
visibility: hidden !important;
:root.desktop body.loading {
opacity: 0;
}
:root.desktop #panes {
flex-direction: row-reverse;
@ -495,6 +495,5 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
background-color: var(--bg-button);
}
:root.desktop .tool [data-i18n] {
/* display: none; */
width: min-content;
}

View File

@ -6,24 +6,34 @@
*/
/* color names */
/**
Color names from:
https://protocol.mozilla.org/fundamentals/color.html
*/
:root {
--blue-50: #0060df;
--ink-20: #312a64;
--ink-50: #291d4f;
--ink-80: #20123a;
--ink-80-a4: #20123a0a;
--ink-90: #1d1133;
--light-gray-10: #f9f9fb;
--light-gray-30: #e0e0e6;
--light-gray-40: #cfcfd8;
--violet-70: #592acb;
--violet-80: #45278d;
--black: #000;
--white: #fff;
}
/* components */
/**
Components
*/
:root {
--bg-0: var(--white);
--fg-0: var(--ink-80);
--default-ink: var(--ink-80);
--default-ink-a4: var(--ink-80-a4);
--default-surface: var(--light-gray-10);
--bg-1: hsla(240, 20%, 98%, 1);
@ -68,7 +78,7 @@
0px 1px 6px 0px rgba(14, 13, 26, 0.12);
--dashboard-tab-ink: var(--ink-80);
--dashboard-tab-active-ink: var(--violet-70);
--dashboard-tab-surface-hover: var(--ink-80-a4);
--dashboard-tab-surface-hover: var(--default-ink-a4);
--fg-icon-info-lvl-0-dimmed: #888;
--fg-icon-info-lvl-0: inherit;
@ -103,6 +113,19 @@
--fg-popup-icon-x: hsla(0, 100%, 50%, 1);
}
/**
Use slightly darker inks on lower pixel-density devices to improve
contrast.
*/
@media (max-resolution: 150dpi) {
:root {
--default-ink: var(--ink-90);
--button-ink: var(--ink-50);
--fieldset-header-ink: var(--ink-50);
--link-ink: var(--violet-80);
}
}
/**
Source for color-blind color scheme from https://github.com/WyohKnott:
https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219

View File

@ -1073,7 +1073,7 @@ const getPopupData = async function(tabId) {
let tabId = null;
// Extract the tab id of the page this popup is for
const matches = window.location.search.match(/[\?&]tabId=([^&]+)/);
const matches = self.location.search.match(/[\?&]tabId=([^&]+)/);
if ( matches && matches.length === 2 ) {
tabId = parseInt(matches[1], 10) || 0;
}
@ -1096,12 +1096,14 @@ const getPopupData = async function(tabId) {
}
}
}
document.body.classList.remove('loading');
self.requestAnimationFrame(( ) => {
document.body.classList.remove('loading');
});
};
getPopupData(tabId).then(( ) => {
if ( document.readyState !== 'complete' ) {
window.addEventListener('load', checkViewport, { once: true });
self.addEventListener('load', checkViewport, { once: true });
} else {
checkViewport();
}