Tweak light & dark mode colours

author: SimonBrazell <simon@brazell.com.au> 2020-05-19 23:48:03 +1000
committer: SimonBrazell <simon@brazell.com.au> 2020-05-19 23:49:13 +1000
commit: 70e1d92933e4b7057e0a9b1cec0f9ed10dd4dda1 (patch)
tree: 48d674c19699e07a3339065d297ea96946b18e3d
parent: Merge pull request #46 from TotalCaesar659/dark-mode (diff)
download: libredirect-70e1d92933e4b7057e0a9b1cec0f9ed10dd4dda1.zip
3 files changed, 81 insertions, 35 deletions
diff --git a/manifest.json b/manifest.json
index 4b3b14bb..d0b7fe9e 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 1afd0913..5db0302a 100644
--- a/pages/popup/popup.html
+++ b/pages/popup/popup.html
@@ -11,7 +11,8 @@
 <body class="popup">
   <header>
     <div class="logo-container">
-      <img src="../../images/logo.png" alt="Privacy Redirect logo">
+      <img src="../../images/icon128.png" alt="Privacy Redirect logo">
+      <h1><span class="privacy">Privacy</span><br>Redirect</h1>
     </div>
     <small>
       <span>Version:&nbsp;<span id="version"></span></span>
diff --git a/pages/styles.css b/pages/styles.css
index 256128a4..476a7976 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;
+  }
+
 }
author	SimonBrazell <simon@brazell.com.au>	2020-05-19 23:48:03 +1000
committer	SimonBrazell <simon@brazell.com.au>	2020-05-19 23:49:13 +1000
commit	70e1d92933e4b7057e0a9b1cec0f9ed10dd4dda1 (patch)
tree	48d674c19699e07a3339065d297ea96946b18e3d
parent	Merge pull request #46 from TotalCaesar659/dark-mode (diff)
download	libredirect-70e1d92933e4b7057e0a9b1cec0f9ed10dd4dda1.zip