Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-11-05 18:32:30 +01:00
Code Issues Releases Wiki Activity

Minor fine tuning of some dashboard visuals

Browse Source 
More left to do as per reference documentation:
- https://protocol.mozilla.org/
- https://material.io/
This commit is contained in:
Raymond Hill 2020-04-20 09:45:18 -04:00
parent 7f999b759f
commit 8a6dc8ee88
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
6 changed files with 51 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/css/cloud-ui.css
View File

@ -66,7 +66,6 @@
border: 1px solid var(--bg-1-border);
bottom: 0;
display: none;
left: 0;
margin: 0.4em;
padding: 0.4em;
position: absolute;

10
src/css/common.css
View File

@ -24,10 +24,18 @@ body {
-moz-user-select: none;
-webkit-user-select: none;
}
a {
color: var(--link-ink);
}
code {
background-color: var(--bg-code);
padding: 0 0.25em;
}
hr {
border: 0;
border-top: 1px solid var(--hor-separator-color);
margin: 1em 0;
}
textarea {
font-size: 90%;
}
@ -95,7 +103,7 @@ input[type="checkbox"] {
-webkit-margin-end: 0.4em;
}
.ul {
margin: 0.5em 0;
margin: 1em 0;
}
.li {
align-items: center;

23
src/css/dashboard.css
View File

@ -29,9 +29,8 @@ html, body {
.tabButton {
border: 0;
border-bottom: 3px solid var(--bg-1);
color: var(--fg-dashboard-nav-off);
fill: var(--fg-dashboard-nav-off);
cursor: pointer;
color: var(--dashboard-tab-ink);
fill: var(--dashboard-tab-ink);
padding: 0.5em 1.4em 0.3em 1.4em;
text-decoration: none;
white-space: nowrap;
@ -40,9 +39,9 @@ html, body {
outline: 0;
}
.tabButton.selected {
border-bottom: 3px solid var(--fg-dashboard-nav-on);
color: var(--fg-dashboard-nav-on);
fill: var(--fg-dashboard-nav-on);
border-bottom: 3px solid var(--dashboard-tab-active-ink);
color: var(--dashboard-tab-active-ink);
fill: var(--dashboard-tab-active-ink);
}
iframe {
background-color: transparent;
@ -76,6 +75,18 @@ body:not(.canUpdateShortcuts) .tabButton[data-pane="shortcuts.html"] {
display: none;
}
/* hover-able devices */
:root.desktop .tabButton {
cursor: default;
}
:root.desktop .tabButton:not(.selected) {
cursor: pointer;
}
:root.desktop .tabButton:not(.selected):hover {
background-color: var(--dashboard-tab-surface-hover);
border-color: var(--dashboard-tab-surface-hover);
}
/* touch-screen devices */
:root.mobile #dashboard-nav {
flex-wrap: nowrap;

24
src/css/settings.css
View File

@ -1,33 +1,9 @@
hr {
border: 0;
border-top: 1px solid var(--hline-1);
margin: 1.5em 0;
}
.body {
margin-top: 1em;
}
.entries {
margin: 0.5em 0;
}
.section {
font-weight: bold;
margin-top: 0.75em;
}
.synopsis {
font-size: 90%;
}
.entry {
align-items: center;
display: flex;
margin: 0.5em 0;
}
.entry > * {
margin-inline-end: 0.5em;
-webkit-margin-end: 0.5em;
}
.entry > input[type="checkbox"] {
align-self: center;
}
[href="advanced-settings.html"] {
display: none;
}

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

@ -1,15 +1,24 @@
/*
Notes:
`--fg-...`: used for color of text or small icons
`--bg-...`: used to color large areas on which text will be rendered
References:
- https://protocol.mozilla.org/
- https://material.io/
*/
/* color names */
:root {
--blue-50: #0060df;
--ink-80: #20123a;
--ink-80-a4: #20123a0a;
--light-gray-30: #e0e0e6;
--violet-70: #592acb;
}
/* components */
:root {
--bg-0: #fff;
--fg-0: hsla(261, 53%, 15%, 1);
--fg-0: var(--ink-80);
--bg-1: hsla(240, 20%, 98%, 1);
--bg-1-border: hsla(240, 20%, 90%, 1);
@ -27,7 +36,9 @@
--fg-0-30: hsla(261, 53%, 15%, 0.3);
--fg-0-20: hsla(261, 53%, 15%, 0.2);
--hline-1: hsla(261, 53%, 15%, 0.2);
--link-ink: var(--violet-70);
--hor-separator-color: var(--light-gray-30);
--bg-button: hsla(0, 0%, 90%, 1);
--bg-button-hover: hsla(0, 0%, 83%, 1);
@ -39,8 +50,9 @@
--bg-transient-notice: hsla(60, 100%, 95%, 1);
--fg-dashboard-nav-off: var(--fg-0);
--fg-dashboard-nav-on: #592acb;
--dashboard-tab-ink: var(--ink-80);
--dashboard-tab-active-ink: var(--violet-70);
--dashboard-tab-surface-hover: var(--ink-80-a4);
--fg-icon-info-lvl-0-dimmed: #888;
--fg-icon-info-lvl-0: inherit;
@ -56,10 +68,10 @@
--large-icon-info-lvl-2: hsla(41, 100%, 47%, 1);
--bg-tooltip: hsla(60, 100%, 97%, 1);
--fg-tooltip: var(--fg-0);
--fg-tooltip: var(--ink-80);
/* popup panel */
--fg-popup-power: hsla(214, 100%, 44%, 1);
--fg-popup-power: var(--blue-50);
--fg-popup-power-hover: opacity(80%);
--bg-popup-cell-1: hsla(261, 0%, 93%, 1);
--bg-popup-cell-2: rgb(224, 224, 230);

5
src/settings.html
View File

@ -22,6 +22,7 @@
<div class="li"><label><input type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><span><span data-i18n="settingsCloudStorageEnabledPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><span><span data-i18n="settingsAdvancedUserPrompt"></span>&nbsp;<a class="fa-icon info" href="advanced-settings.html" data-i18n-title="settingsAdvancedUserSettings">cogs</a></span></label></div>
</div>
<hr>
<div class="section" data-i18n="3pGroupPrivacy"></div>
<div class="ul">
<div class="li"><label><input type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><span><span data-i18n="settingsPrefetchingDisabledPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#disable-pre-fetching" target="_blank">info-circle</a></span></label></div>
@ -29,6 +30,7 @@
<div class="li"><label><input type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><span><span data-i18n="settingsWebRTCIPAddressHiddenPrompt"></span>&nbsp;<a class="fa-icon info important" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="noCSPReports" data-setting-type="bool"><span><span data-i18n="settingsNoCSPReportsPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#block-csp-reports" target="_blank">info-circle</a></span></label></div>
</div>
<hr>
<div class="section" data-i18n="settingPerSiteSwitchGroup"></div>
<div class="ul">
<div class="li synopsis"><span><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">info-circle</a></span></div>
@ -37,9 +39,8 @@
<div class="li"><label><input type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><span><span data-i18n="settingsNoRemoteFontsPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">info-circle</a></span></label></div>
<div class="li"><label><input type="checkbox" data-setting-name="noScripting" data-setting-type="bool"><span><span data-i18n="settingsNoScriptingPrompt"></span>&nbsp;<a class="fa-icon info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-scripting" target="_blank">info-circle</a></span></label></div>
</div>
<hr>
<div id="localData" class="ul">
<hr>
<div id="storageUsed" class="li"></div>
<div style="margin: 1.5em 0">
<div class="li" id="settingsLastBackupPrompt" style="display:none;"></div>