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 logo + Privacy Redirect logo +

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; + } + }