Skip to content

Commit

Permalink
Sixth pass to re-design the dashboard
Browse files Browse the repository at this point in the history 
Related commits:
- 0662767
- 99b2a0a
- a8e3118
- 453f545
- a45a21f

This commit focuses on implementing the use of
CSS `var(...)` throughout so as to make it easy
to create themes -- a requirement for uBO to
support a dark theme.

There is still work to do regarding converting
uBO's CSS to completely support `var(...)` but
being able to start using theming will help
complete and fine tune CSS `var(...)` support.

Related issue:
- uBlockOrigin/uBlock-issues#401
  • Loading branch information
@gorhill
gorhill committed Apr 13, 2020
1 parent cb08c97 commit e917213
Show file tree
Hide file tree
Showing 21 changed files with 381 additions and 352 deletions.
2 changes: 1 addition & 1 deletion src/3p-filters.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@

<div id="templates" style="display: none;">
<div class="groupEntry">
<div class="geDetails"><span class="geName"></span> <span class="geCount dim"></span></div>
<div class="geDetails"><span class="geName"></span> <span class="geCount"></span></div>
<div class="listEntries"></div>
</div>
<div class="li listEntry">
Expand Down
7 changes: 2 additions & 5 deletions src/cloud-ui.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,10 @@
<span id="cloudInfo" data-i18n="cloudNoData"></span>
<button id="cloudPull" type="button" class="custom" data-i18n-title="cloudPull" disabled><span class="fa-icon">cloud-download</span></button>
<button id="cloudPullAndMerge" type="button" class="custom" data-i18n-title="cloudPullAndMerge" disabled><span class="fa-icon">cloud-download</span><span class="fa-icon">plus</span></button>
<p id="cloudError"></p>
<span id="cloudError"></span>
<span id="cloudCog" class="fa-icon">cog</span>
<div id="cloudOptions">
<div>
<p><label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value="">
<p><button id="cloudOptionsSubmit" type="button" data-i18n="genericSubmit"></button>
</div>
<label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value=""> <button id="cloudOptionsSubmit" class="custom vflex" type="button" data-i18n="genericSubmit"></button>
</div>
</body>
</html>
10 changes: 6 additions & 4 deletions src/css/3p-filters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
pointer-events: none;
}
.groupEntry .geCount {
color: var(--fg-0-60);
font-size: 90%;
pointer-events: none;
}
Expand Down Expand Up @@ -125,9 +126,6 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
.listEntry.checked .counts {
display: inline;
}
.dim {
color: #666;
}
.listEntry .status {
cursor: default;
display: none;
Expand Down Expand Up @@ -165,6 +163,9 @@ body.updating .listEntry.checked.obsolete .updating {
animation: spin 1s steps(8) infinite;
display: inline-flex;
}
.listEntry.toImport {
margin: 0.5em 0;
}
.listEntry.toImport textarea {
border: 1px solid #ccc;
box-sizing: border-box;
Expand All @@ -190,7 +191,8 @@ body.updating .listEntry.checked.obsolete .updating {
-webkit-margin-start: 0;
}
.li.listEntry {
background-color: var(--bg-dashboard-nav);
background-color: var(--bg-1);
overflow-x: auto;
}
.li.listEntry label > span {
flex-grow: 1;
Expand Down
65 changes: 28 additions & 37 deletions src/css/cloud-ui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
background: url("../img/cloud.png") hsl(216, 100%, 93%);
border-radius: 3px;
margin: 0.5em 0;
overflow: auto;
padding: 0.5em;
position: relative;
}
Expand All @@ -22,7 +23,7 @@
visibility: hidden;
}
#cloudWidget button.error {
color: red;
color: var(--fg-icon-info-lvl-4);
}
#cloudPullAndMerge {
margin-left: 0.25em;
Expand All @@ -34,61 +35,51 @@
top: 0;
}
#cloudInfo {
color: gray;
display: inline-block;
color: var(--fg-0-60);
flex-shrink: 0;
font-size: 90%;
margin: 0 1em;
overflow: hidden;
padding: 0;
white-space: pre;
white-space: pre-line;
}
#cloudError {
color: red;
color: var(--fg-icon-info-lvl-4);
flex-grow: 1;
flex-shrink: 2;
font-size: x-small;
margin: 0.5em 0 0 0;
}
#cloudError:empty {
display: none;
margin: 0 1em;
}
#cloudWidget > #cloudCog {
#cloudWidget #cloudCog {
color: var(--fg-0-50);
cursor: pointer;
display: inline-block;
fill: var(--fg-0-50);
font-size: 110%;
margin: 0;
opacity: 0.5;
padding: 4px;
position: absolute;
top: 0;
padding: 0.4em;
}
body[dir="ltr"] #cloudWidget > #cloudCog {
right: 0;
#cloudWidget #cloudCog:hover {
color: inherit;
fill: inherit;
}
body[dir="rtl"] #cloudWidget > #cloudCog {
left: 0;
}
#cloudWidget > #cloudCog:hover {
opacity: 1;
}
#cloudWidget > #cloudOptions {
align-items: center;
-webkit-align-items: center;
background-color: rgba(0, 0, 0, 0.75);
#cloudWidget #cloudOptions {
background-color: var(--bg-0);
border: 1px solid var(--bg-1-border);
bottom: 0;
display: none;
justify-content: center;
-webkit-justify-content: center;
left: 0;
position: fixed;
margin: 0.4em;
padding: 0.4em;
position: absolute;
right: 0;
text-align: center;
top: 0;
z-index: 2000;
z-index: 10;
}
#cloudWidget > #cloudOptions.show {
display: flex;
display: -webkit-flex;
#cloudWidget #cloudOptions.show {
display: block;
}
#cloudWidget > #cloudOptions > div {
background-color: white;
#cloudWidget #cloudOptions > div {
background-color: var(--bg-0);
border-radius: 3px;
padding: 1em;
text-align: center;
Expand Down
20 changes: 12 additions & 8 deletions src/css/common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ body {
padding: 0;
}
code {
background-color: #eee;
background-color: var(--bg-code);
padding: 0 0.25em;
}
textarea {
Expand All @@ -43,14 +43,19 @@ button.custom {
-moz-appearance: none;
-webkit-appearance: none;
}
button.custom.vflex {
height: 100%;
padding-bottom: 0;
padding-top: 0;
}
button.custom:hover {
background-color: #d4d4d4;
background-color: var(--bg-button-hover);
}
button.custom.important {
background-color: #ffddaa;
background-color: var(--bg-button-important);
}
button.custom.important:hover {
background-color: #ffcc80;
background-color: var(--bg-button-important-hover);
}
button.custom.disabled,
button.custom[disabled],
Expand Down Expand Up @@ -106,7 +111,7 @@ input[type="checkbox"] {
@media (max-width: 640px) {
button.custom.iconifiable > .fa,
button.custom.iconifiable > .fa-icon {
font-size: 120%;
font-size: 1.2rem;
padding: 0;
}
button.custom.iconifiable > [data-i18n] {
Expand All @@ -131,9 +136,8 @@ input[type="checkbox"] {
.disabled > .ubo-icon,
.ubo-icon[disabled],
[disabled] > .ubo-icon {
color: #000;
fill: #000;
opacity: 0.25;
color: var(--fg-button-disabled);
fill: var(--fg-button-disabled);
stroke: var(--fg-button-disabled);
pointer-events: none;
}
Expand Down
10 changes: 1 addition & 9 deletions src/css/dashboard-common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,7 @@ input[type="number"] {
width: 5em;
}
input[type="checkbox"][disabled] + * {
color: #888;
}
.para {
width: 40em;
}
.warn {
margin: 0;
padding: 5px;
background-color: #FEDAE0;
color: var(--fg-0-50);
}
@media (max-height: 640px), (max-height: 800px) and (max-width: 480px) {
.body > p,
Expand Down
8 changes: 4 additions & 4 deletions src/css/dashboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ html, body {
width: 100%;
}
#dashboard-nav {
background-color: var(--bg-dashboard-nav);
background-color: var(--bg-1);
border: 0;
border-bottom: 1px solid var(--dashboard-nav-border);
border-bottom: 1px solid var(--bg-1-border);
display: flex;
flex-wrap: wrap;
overflow-x: hidden;
Expand All @@ -32,7 +32,7 @@ html, body {
}
.tabButton {
border: 0;
border-bottom: 3px solid var(--bg-dashboard-nav);
border-bottom: 3px solid var(--bg-1);
color: var(--fg-dashboard-nav-off);
fill: var(--fg-dashboard-nav-off);
cursor: pointer;
Expand Down Expand Up @@ -67,7 +67,7 @@ iframe {
display: initial;
}
#unsavedWarning > div:first-of-type {
background-color: #ffffcc;
background-color: var(--bg-transient-notice);
padding: 0.5em;
}
#unsavedWarning > div:last-of-type {
Expand Down
23 changes: 9 additions & 14 deletions src/css/document-blocked.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,18 +52,17 @@ select {
padding: 2px;
}
.code {
background-color: rgba(0, 0, 0, 0.1);
background-color: var(--bg-code);
font-family: monospace;
line-height: 1;
padding: 4px;
word-break: break-all;
}
#warningSign {
opacity: 1;
width: 100%;
}
#warningSign > a {
fill: #f2a500;
fill: var(--large-icon-info-lvl-2);
font-size: 10em;
padding: 0;
}
Expand All @@ -81,8 +80,9 @@ select {
background-color: transparent;
top: 100%;
box-sizing: border-box;
color: var(--fg-0-60);
cursor: pointer;
opacity: 0.5;
fill: var(--fg-0-60);
padding: 0.2em;
position: absolute;
transform: translate(0, -50%);
Expand All @@ -94,7 +94,8 @@ body[dir="rtl"] #theURL > p > span {
left: 0;
}
#theURL > p:hover > span {
opacity: 1;
color: var(--fg-0);
fill: var(--fg-0);
}
#theURL > p > span:before {
content: '\f010';
Expand All @@ -103,10 +104,10 @@ body[dir="rtl"] #theURL > p > span {
content: '\f00e';
}
#parsed {
background-color: #f8f8f8;
border: 1px solid rgba(0, 0, 0, 0.1);
background-color: var(--bg-1);
border: 1px solid var(--bg-code);
border-top: none;
color: gray;
color: var(--fg-0-80);
font-size: small;
overflow-x: hidden;
padding: 4px;
Expand Down Expand Up @@ -135,12 +136,6 @@ body[dir="rtl"] #theURL > p > span {
text-align: left;
}

.filterList a {
opacity: 0.8;
}
.filterList a:hover {
opacity: 1;
}
.filterList:first-child .filterListSeparator {
display: none;
}
Expand Down
38 changes: 20 additions & 18 deletions src/css/dyna-rules.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,25 +37,27 @@ body {
text-align: center;
}
#ruleFilter .fa {
color: #888;
color: var(--fg-0-60);
}
#revertButton,
#commitButton,
#diff.editing #exportButton,
#diff.editing #importButton {
background-color: #eee;
color: #aaa;
body.editing #diff #exportButton,
body.editing #diff #importButton {
background-color: var(--bg-button-disabled);
color: var(--fg-button-disabled);
fill: var(--fg-button-disabled);
pointer-events: none;
}
#diff.dirty:not(.editing) #revertButton,
#diff.dirty:not(.editing) #commitButton {
background-color: #e6e6e6;
color: #20123a;
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);
pointer-events: auto;
}
#diff.dirty:not(.editing) #revertButton:hover,
#diff.dirty:not(.editing) #commitButton:hover {
background-color: #d4d4d4;
body:not(.editing) #diff.dirty #revertButton:hover,
body:not(.editing) #diff.dirty #commitButton:hover {
background-color: var(--bg-button-hover);
}

.codeMirrorContainer {
Expand All @@ -65,15 +67,15 @@ body {
box-sizing: border-box;
height: 100%;
}
#diff.editing .CodeMirror-merge-copy,
#diff.editing .CodeMirror-merge-copy-reverse {
body.editing .CodeMirror-merge-copy,
body.editing .CodeMirror-merge-copy-reverse {
display: none;
}
#diff.editing .CodeMirror-merge-left .CodeMirror {
color: #888;
body.editing .CodeMirror-merge-left .CodeMirror {
color: var(--fg-0-60);
}
#diff.editing .CodeMirror-merge-editor .CodeMirror {
background-color: #ffe;
body.editing .CodeMirror-merge-editor .CodeMirror {
background-color: var(--bg-transient-notice);
}
body[dir="rtl"] .CodeMirror-merge-pane-rightmost {
right: unset;
Expand Down
Loading

4 comments on commit e917213

@gwarser
Copy link
Contributor

@gwarser gwarser commented on e917213 Apr 16, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Popup scrolls horizontally:
Screenshot_20200416-024305

Link and search icon overlaps:
Screenshot_20200416-024517

I also think eye/i/clock/gears should be larger on mobile - not easy to touch right now. "Home" is removed?.

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Popup scrolls horizontally

What is the horizontal resolution of your display?

"Home" is removed?

This will be fixed in next release.

@gorhill
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the horizontal resolution of your display?

Never mind, I could reproduce when using "iPhone 4" in Chromium dev tool, the width of the display is 320px.

@jspenguin2017
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing semicolon: https://github.com/gorhill/uBlock/blob/master/src/css/popup.css#L201

Typo introduced here: e917213#diff-6c91f1abb140ed5f82548721a63c587dL203-R200

Please sign in to comment.