Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-11-07 03:12:33 +01:00
Code Issues Releases Wiki Activity

More fine-tuning of default theme

Browse Source 
Bring default color theme more in line with previous
versions.

Additionally, use `button` tags for navigation bar tabs,
as per MDN guidelines:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#interactive_content
This commit is contained in:
Raymond Hill 2022-02-03 16:24:48 -05:00
parent 6152a1be51
commit 1e81e2f751
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
4 changed files with 47 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/common.css
View File

@ -45,7 +45,7 @@ body {
box-sizing: border-box;
color: var(--ink-1);
fill: var(--ink-1);
font-family: Inter, sans-serif;
font-family: var(--font-family);
font-size: var(--font-size);
line-height: 1.5;
margin: 0;

16
src/css/dashboard.css
View File

@ -21,18 +21,28 @@ html, body {
z-index: 10;
}
.tabButton {
background-color: transparent;
border: 0;
border-bottom: 3px solid transparent;
border-radius: 0;
color: var(--dashboard-tab-ink);
fill: var(--dashboard-tab-ink);
font-family: var(--font-family);
font-size: var(--font-size);
padding: 0.7em 1.4em calc(0.7em - 3px);
text-decoration: none;
user-select: none;
white-space: nowrap;
}
.tabButton:focus {
outline: 0;
}
/*
* TODO: support keyboard-driven navigation
*
.tabButton:not(:active):focus {
background-color: var(--dashboard-tab-focus-surface);
}
*/
.tabButton.selected {
background-color: var(--dashboard-tab-active-surface);
border-bottom: 3px solid var(--dashboard-tab-active-ink);
@ -91,8 +101,8 @@ body.noDashboard #dashboard-nav {
cursor: pointer;
}
:root.desktop .tabButton:not(.selected):hover {
background-color: var(--dashboard-tab-surface-hover);
border-bottom-color: var(--dashboard-tab-border-hover);
background-color: var(--dashboard-tab-hover-surface);
border-bottom-color: var(--dashboard-tab-hover-border);
}
/* touch-screen devices */

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

@ -122,11 +122,12 @@
}
/*
* Font size
* Font
*
* */
:root {
--font-size: 14px;
--font-family: Inter, sans-serif;
}
:root.mobile {
@ -139,18 +140,18 @@
* Tool: hsluv.org
*
* */
:root /* h268 */ {
--primary-5: 13 4 65; /* S:90 Luv:5 */
--primary-10: 22 9 92; /* S:90 Luv:10 */
--primary-20: 40 20 145; /* S:90 Luv:20 */
--primary-30: 59 32 202; /* S:90 Luv:30 */
--primary-40: 84 62 234; /* S:90 Luv:40 */
--primary-50: 112 98 240; /* S:90 Luv:50 */
--primary-60: 139 130 244; /* S:90 Luv:60 */
--primary-70: 168 162 247; /* S:90 Luv:70 */
--primary-80: 196 193 250; /* S:90 Luv:80 */
--primary-90: 225 224 252; /* S:90 Luv:90 */
--primary-95: 240 239 254; /* S:90 Luv:95 */
:root /* h255 */ {
--primary-5: 3 16 40; /* S:90 Luv:5 */
--primary-10: 5 27 59; /* S:90 Luv:10 */
--primary-20: 14 47 95; /* S:90 Luv:20 */
--primary-30: 24 69 134; /* S:90 Luv:30 */
--primary-40: 34 93 176; /* S:90 Luv:40 */
--primary-50: 45 117 219; /* S:90 Luv:50 */
--primary-60: 86 143 244; /* S:90 Luv:60 */
--primary-70: 137 170 247; /* S:90 Luv:70 */
--primary-80: 179 198 250; /* S:90 Luv:80 */
--primary-90: 218 226 252; /* S:90 Luv:90 */
--primary-95: 236 240 254; /* S:90 Luv:95 */
}
/*
@ -224,6 +225,9 @@
/* buttons */
--button-surface-rgb: var(--gray-80);
--dashboard-tab-active-ink-rgb: var(--primary-40);
--dashboard-tab-focus-surface-rgb: var(--primary-90);
/* popup panel */
--popup-cell-cname-ink: #0054d7; /* h260 S:100 Luv:40 */;
--popup-cell-label-mixed-surface: #c29100; /* TODO: fix */
@ -304,6 +308,9 @@
/* buttons */
--button-surface-rgb: var(--gray-30);
--dashboard-tab-active-ink-rgb: var(--primary-70);
--dashboard-tab-focus-surface-rgb: var(--primary-20);
/* popup panel */
--popup-cell-cname-ink: #93a6ff; /* h260 S:100 Luv:70 */;
--popup-cell-label-mixed-surface: hsla(45, 100%, 38%, 1); /* TODO: fix */
@ -386,10 +393,11 @@
--notice-surface-shadow: #000 0 2px 8px;
--dashboard-tab-ink: var(--ink-1);
--dashboard-tab-active-ink: var(--accent-surface-1);
--dashboard-tab-active-ink: rgb(var(--dashboard-tab-active-ink-rgb));
--dashboard-tab-active-surface: transparent;
--dashboard-tab-surface-hover: var(--surface-2);
--dashboard-tab-border-hover: var(--surface-3);
--dashboard-tab-focus-surface: rgb(var(--dashboard-tab-focus-surface-rgb));
--dashboard-tab-hover-surface: var(--surface-2);
--dashboard-tab-hover-border: var(--surface-3);
/* info levels: normal, fyi, warn, error -- we want same Luv */
--info0-ink-rgb: 119 119 119; /* h: 0 S: 0 Luv:60 */

18
src/dashboard.html
View File

@ -13,15 +13,15 @@
<body>
<div id="dashboard-nav">
<span class="logo"><img data-i18n-title="extName" src="img/ublock.svg"></span><!--
--><span class="tabButton" data-pane="settings.html" data-i18n="settingsPageName"></span><!--
--><span class="tabButton" data-pane="3p-filters.html" data-i18n="3pPageName"></span><!--
--><span class="tabButton" data-pane="1p-filters.html" data-i18n="1pPageName"></span><!--
--><span class="tabButton" data-pane="dyna-rules.html" data-i18n="rulesPageName"></span><!--
--><span class="tabButton" data-pane="whitelist.html" data-i18n="whitelistPageName"></span><!--
--><span class="tabButton" data-pane="shortcuts.html" data-i18n="shortcutsPageName"></span><!--
--><span class="tabButton" data-pane="support.html" data-i18n="supportPageName"></span><!--
--><span class="tabButton" data-pane="about.html" data-i18n="aboutPageName"></span><!--
--><span class="tabButton" data-pane="no-dashboard.html"></span>
--><button class="tabButton" type="button" data-pane="settings.html" data-i18n="settingsPageName" tabindex="0"></button><!--
--><button class="tabButton" type="button" data-pane="3p-filters.html" data-i18n="3pPageName" tabindex="0"></button><!--
--><button class="tabButton" type="button" data-pane="1p-filters.html" data-i18n="1pPageName" tabindex="0"></button><!--
--><button class="tabButton" type="button" data-pane="dyna-rules.html" data-i18n="rulesPageName" tabindex="0"></button><!--
--><button class="tabButton" type="button" data-pane="whitelist.html" data-i18n="whitelistPageName" tabindex="0"></button><!--
--><button class="tabButton" type="button" data-pane="shortcuts.html" data-i18n="shortcutsPageName" tabindex="0"></button><!--
--><button class="tabButton" type="button" data-pane="support.html" data-i18n="supportPageName" tabindex="0"></button><!--
--><button class="tabButton" type="button" data-pane="about.html" data-i18n="aboutPageName" tabindex="0"></button><!--
--><button class="tabButton" type="button" data-pane="no-dashboard.html"></button>
</div>
<section id="unsavedWarning" class="notice">
<div>