Skip to content
This repository has been archived by the owner on Oct 2, 2023. It is now read-only.

Light theme #5

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Light theme #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6095084
Improve visibility for dark firefox themes
Boruch-Baum Oct 25, 2018
2ef3758
Add note of visibility improvement for icons
Boruch-Baum Oct 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,21 @@
website: https://github.com/Boruch-Baum/uBO-Scope

This is a fork of [Raymond Hill](https://github.com/gorhill/)'s
[uBO-Scope](https://github.com/gorhill/uBO-Scope), for the purpose of
improving its visibility for users who opt for a dark firefox theme, or
any theme for which the default font color is light. For this git
branch, *light-theme*, minor changes were made to a single file
[popup.css](./css/popup.css), which retains the original's preference
for a white background, while making the foreground colors friendly
for dark firefox themes. A second file,
[popup.css-dark-theme](./css/popup.css-dark-theme), applies a dark
theme to the add-on. In order to use the dark theme, just copy the
file over popup.css. A backup of the popup.css file has already been
created as [popup.css-light-theme](./css/popup.css-light-theme). On
the complementary git branch *dark-theme*, that step has already been taken.

Also, the visibility of the popup's two icons was improved.

## Preamble

The mindset of this project is as follow:
Expand All @@ -18,7 +36,7 @@ A network request to a remote server which has a different base domain name than

A 3rd-party exposure score is derived not only from the number of distinct third parties on a web page, but also from the ubiquitousness of each of these distinct third parties.

The ubiquitousness of a specific 3rd party is measured according to how frequently this 3rd party is used on web pages you visit. This means the ubiquitousness of a 3rd party will be representative of your browsing history and whether the 3rd party was blocked or not on the pages you visited.
The ubiquitousness of a specific 3rd party is measured according to how frequently this 3rd party is used on web pages you visit. This means the ubiquitousness of a 3rd party will be representative of your browsing history and whether the 3rd party was blocked or not on the pages you visited.

## Status

Expand Down
8 changes: 8 additions & 0 deletions css/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@ body {
.svgIcon {
display: inline-block;
padding: 0;
mix-blend-mode: exclusion;
}
svg {
height: 100%;
width: 100%;
}
#topPane {
background-color: white;
color: black;
left: 0;
position: fixed;
right: 0;
Expand Down Expand Up @@ -85,6 +87,7 @@ body.nodata .nodata {
}
#domain3rdDetails {
background-color: #f6f6ff;
color: black;
border: 1px solid #e5e5ff;
bottom: 2px;
display: flex;
Expand Down Expand Up @@ -117,6 +120,7 @@ body.nodata .nodata {
}
#domain3rdDetails #authority {
background-color: #e5e5ff;
color: black;
position: relative;
}
#domain3rdDetails #authority .details {
Expand Down Expand Up @@ -163,6 +167,7 @@ body.oneDay #domain3rdDetails .oneDay {
}
#heatmaps {
background-color: white;
color: black;
}
body.nodata #heatmaps {
display: none;
Expand Down Expand Up @@ -232,6 +237,7 @@ body.theoretical #heatmaps .heatmap.theoretical {
}
.hmcell[data-domain] {
background-color: #eee;
color: black;
}
.hmcell.blocked {
color: #777;
Expand All @@ -254,6 +260,7 @@ body.theoretical #heatmaps .heatmap.theoretical {
}
.hmcell[data-domain].blocked .hmcolor {
background-color: #eee;
color: black;
}
.hmlabel {
display: none;
Expand All @@ -266,6 +273,7 @@ body.theoretical #heatmaps .heatmap.theoretical {
}
#heatmaps.list .hmcell {
background-color: #f8f8f8;
color: black;
display: block;
height: 28px;
margin: 0;
Expand Down
301 changes: 301 additions & 0 deletions css/popup.css-dark-theme
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,301 @@
body {
box-sizing: content-box;
font-size: 14px;
margin: 0;
min-width: 289px;
overflow-x: hidden;
padding: 0 1px 1px 1px;
}
.svgIcon {
display: inline-block;
padding: 0;
mix-blend-mode: exclusion;
}
svg {
height: 100%;
width: 100%;
}
#topPane {
background-color: black;
color: white;
left: 0;
position: fixed;
right: 0;
z-index: 1024;
}
body.nodata #topPane {
display: none;
}
#domain1st {
border: 0;
margin: 0;
padding: 0.5rem;
text-align: center;
}
#domain1st > div:first-of-type {
font-size: 1.1rem;
padding: 0 0.5em;
white-space: nowrap;
}
#domain1st > div:last-of-type {
color: #888;
font-size: 0.8rem;
padding: 0 0.5em;
white-space: nowrap;
}
#scores {
border: 0;
margin: 0;
padding: 0 0 1rem 0;
text-align: center;
}
#scores .scores {
margin: 0;
overflow: hidden;
}
#scores .scores .score {
cursor: pointer;
display: inline-block;
line-height: 1;
margin: 0;
}
#scores .scores .score.actual {
color: #444;
font-size: 7rem;
}
#scores .scores .score.theoretical {
color: #ccc;
font-size: 1.6rem;
}
body.theoretical #scores .scores .score.actual {
color: #ddd;
}
body.theoretical #scores .scores .score.theoretical {
color: #222;
}
body .nodata {
color: #aaa;
display: none;
font-size: 2em;
line-height: 1.8;
padding: 1em;
text-align: center;
white-space: nowrap;
}
body.nodata .nodata {
display: block;
}
#domain3rdDetails {
background-color: #020202;
color: white;
border: 1px solid #aaaaaa;
bottom: 2px;
display: flex;
flex-direction: column;
justify-content: space-between;
left: 2px;
overflow: hidden;
padding: 0;
padding-bottom: 3px;
position: absolute;
right: 2px;
text-align: start;
top: 2px;
}
#domain3rdDetails.hide:not(.sticky) {
display: none;
}
#domain3rdDetails p {
margin: 0;
}
#domain3rdDetails ul {
margin: 0;
padding: 0 2em;
}
#domain3rdDetails > div {
padding: 0 3px;
}
#domain3rdDetails .important {
font-size: 110%;
}
#domain3rdDetails #authority {
background-color: #020202;
color: white;
position: relative;
}
#domain3rdDetails #authority .details {
color: #666;
font-size: 90%;
padding: 0.25rem;
}
#domain3rdDetails #authority .details.hide {
visibility: hidden;
}
#domain3rdDetails #authority .details .category:not(:empty):before {
content: '(';
}
#domain3rdDetails #authority .details .category:not(:empty):after {
content: ')';
}
#domain3rdDetails #authority .removeIcon {
cursor: pointer;
height: 12px;
position: absolute;
right: 3px;
top: 0;
width: 12px;
}
#domain3rdDetails #authority .removeIcon svg path {
stroke: black;
}
#domain3rdDetails:not(.sticky) #authority .removeIcon {
display: none;
}
#domain3rdDetails .aExposure,
#domain3rdDetails .tExposure,
#domain3rdDetails .since {
font-weight: bold;
}
#domain3rdDetails .oneDay {
display: none;
}
body.oneDay #domain3rdDetails .manyDays {
display: none;
}
body.oneDay #domain3rdDetails .oneDay {
display: inline;
}
#heatmaps {
background-color: black;
color: white;
}
body.nodata #heatmaps {
display: none;
}
#heatmaps .togglerBar {
display: flex;
flex-direction: row;
justify-content: space-between;
height: 15px;
}
#heatmaps .togglerBar .svgIcon {
cursor: pointer;
height: 100%;
width: 15px;
}
#heatmaps .togglerBar .svgIcon > svg path {
fill: #eee;
}
#heatmaps .togglerBar .svgIcon:hover > svg path {
fill: #aaa !important;
}
#heatmaps .togglerBar .togglerIcon > svg#th {
display: none;
}
#heatmaps.list .togglerBar .togglerIcon > svg#th-list {
display: none;
}
#heatmaps.list .togglerBar .togglerIcon > svg#th {
display: block;
}
#heatmaps.hideBlocked .togglerBar .filterIcon > svg path {
fill: #444;
}
#heatmaps .heatmap {
border: none;
}
body #heatmaps .heatmap.theoretical {
display: none;
}
body.theoretical #heatmaps .heatmap.actual {
display: none;
}
body.theoretical #heatmaps .heatmap.theoretical {
display: block;
}
.hmrow {
border: none;
box-sizing: border-box;
height: 28px;
margin-bottom: 1px;
position: relative;
white-space: nowrap;
}
.hmcell {
border: 0;
box-sizing: border-box;
color: black;
display: inline-block;
font-size: 95%;
height: 100%;
line-height: 28px;
margin: 0;
margin-right: 1px;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
.hmcell[data-domain] {
background-color: #eee;
color: white;
}
.hmcell.blocked {
color: #777;
}
#heatmaps.hideBlocked .hmcell.blocked {
display: none;
}
.hmrow .hmcell:last-of-type {
margin: 0;
}
.hmrow:last-of-type {
margin: 0;
}
.hmcolor {
border: 0;
box-sizing: border-box;
display: inline-block;
height: 100%;
width: 28px;
}
.hmcell[data-domain].blocked .hmcolor {
background-color: #eee;
color: white;
}
.hmlabel {
display: none;
margin: 0 0.25rem;
position: relative;
}
#heatmaps.list .hmrow {
height: auto;
margin: 0;
}
#heatmaps.list .hmcell {
background-color: #020202;
color: white;
display: block;
height: 28px;
margin: 0;
margin-top: 1px;
padding: 0;
text-align: right;
width: auto;
}
#heatmaps .hmcell:hover {
opacity: 0.8;
}
#heatmaps.list .hmcell:not([data-domain]) {
display: none;
}
#heatmaps.list .hmrow:first-of-type .hmcell:first-of-type {
margin: 0;
}
#heatmaps.list .hmcolor {
height: 28px;
left: 0;
position: absolute;
}
#heatmaps.list .hmlabel {
display: inline;
}
Loading