diff --git a/manifest.json b/manifest.json
index 4b3b14b..d0b7fe9 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
{
"name": "Privacy Redirect",
"description": "Redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.",
- "version": "1.1.27",
+ "version": "1.1.28",
"manifest_version": 2,
"background": {
"scripts": [
diff --git a/pages/popup/popup.html b/pages/popup/popup.html
index 1afd091..5db0302 100644
--- a/pages/popup/popup.html
+++ b/pages/popup/popup.html
@@ -11,7 +11,8 @@
-
+
+
Privacy
Redirect
Version:
diff --git a/pages/styles.css b/pages/styles.css
index 256128a..476a797 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -1,9 +1,10 @@
:root {
--text-main: #FFF;
--text-secondary: #000;
- --dark-grey: #3C4043;
- --darker-grey: #292A2D;
- --white: #FFF;
+ --dark: #3C4043;
+ --darker: #292A2D;
+ --light: #E3E7EA;
+ --lighter: #FFF;
--active: #FF5B56;
--space: 5px;
--danger: #f04141;
@@ -13,17 +14,18 @@
body {
color: var(--text-secondary);
margin: 0;
- background-color: var(--darker-grey);
width: 400px;
margin: auto;
min-height: 572px;
+ font-family: Sans-Serif;
+ background-color: var(--darker);
}
.popup {
width: 300px;
min-height: auto;
overflow: hidden;
- background-color: var(--dark-grey);
+ background-color: var(--dark);
}
input {
@@ -33,31 +35,40 @@ input {
}
header {
- background-color: var(--white);
+ background-color: var(--lighter);
color: var(--text-secondary);
display: flex;
padding: var(--space);
}
-header h1 {
- font-size: 2em;
-}
-
header .logo-container {
- margin: var(--space);
+ width: 100%;
+ margin: var(--space) 0 var(--space) 0;
+ display: flex;
+ align-items:center;
}
header .logo-container img {
- max-width: 100%;
+ height: 85px;
+ float: left;
+}
+
+header .logo-container h1 {
+ font-size: 25px;
+ float: left;
+ margin-left: 15px;
+ text-transform: uppercase;
+ font-weight: normal;
+}
+
+.privacy {
+ letter-spacing: 0.13em;
}
header small {
- display: block;
- font-size: .70em;
+ font-size: 8.5px;
font-weight: bold;
- margin: 1%;
- width: 100%;
- text-align: right;
+ float: right;
}
h1 {
@@ -146,7 +157,6 @@ input:checked+label:after {
.settings_block {
display: block;
padding: 10px 1em 1em 1em;
- border-bottom: var(--dark-grey) solid 1px;
}
.settings_block h1 {
@@ -179,7 +189,7 @@ input:checked+label:after {
.button:active {
background-color: var(--active);
- box-shadow: 0 5px var(--dark-grey);
+ box-shadow: 0 5px var(--dark);
transform: translateY(4px);
}
@@ -195,7 +205,7 @@ input:invalid {
.tab {
overflow: hidden;
- background-color: var(--darker-grey);
+ background-color: var(--darker);
}
.tab button {
@@ -209,7 +219,7 @@ input:invalid {
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
- border: solid 1px var(--dark-grey);
+ border: solid 1px var(--dark);
width: 33.333%;
font-size: 14px;
}
@@ -219,14 +229,14 @@ input:invalid {
}
.tab button.active {
- background-color: var(--dark-grey);
+ background-color: var(--dark);
}
.tabcontent {
padding-top: 10px;
display: none;
- border: solid 1px var(--dark-grey);
- background-color: var(--dark-grey);
+ border: solid 1px var(--dark);
+ background-color: var(--dark);
min-height: 510px;
}
@@ -259,7 +269,7 @@ ul {
}
li {
- border-bottom: solid 0.5px var(--darker-grey);
+ border-bottom: solid 0.5px var(--darker);
padding: 20px 0px 20px 20px;
}
@@ -275,15 +285,50 @@ li {
}
@media (prefers-color-scheme: dark) {
-body, body.popup, header, h1, input, a#more-options.button, div#general.tabcontent, div#advanced.tabcontent, select, div#whitelist.tabcontent, button#general-tab.tablinks.active, button#advanced-tab.tablinks.active, button#whitelist-tab.tablinks.active {
- background-color: #313131;
- color: #bfbfbf;
-}
+
+ body.popup, header, h1, input, select, div.tabcontent, button.tablinks.active {
+ background-color: var(--dark);
+ color: var(--text-main);
+ }
+
+ body {
+ background-color: var(--darker);
+ }
+
+ a.button {
+ color: var(--text-main);
+ }
+
+ ::placeholder {
+ color: var(--text-main);
+ opacity: 0.7;
+ }
+
}
@media (prefers-color-scheme: light) {
-body, body.popup, header, h1, input, a#more-options.button, div#general.tabcontent, div#advanced.tabcontent, select, div#whitelist.tabcontent, button#general-tab.tablinks.active, button#advanced-tab.tablinks.active, button#whitelist-tab.tablinks.active {
- background-color: #ffffff;
- color: #000000;
-}
+
+ body.popup, header, h1, input, select, div.tabcontent, button.tablinks.active {
+ background-color: var(--lighter);
+ color: var(--text-secondary);
+ }
+
+ body {
+ background-color: var(--light);
+ }
+
+ a.button {
+ color: var(--text-secondary);
+ }
+
+ button.tablinks {
+ background-color: var(--light);
+ color: var(--text-secondary);
+ }
+
+ ::placeholder {
+ color: var(--text-secondary);
+ opacity: 0.7;
+ }
+
}