Tweak light & dark mode colours
This commit is contained in:
SimonBrazell
parent
348faf91bf
commit
70e1d92933
|
|
@ -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": [
|
||||
|
|
|
|||
|
|
@ -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: <span id="version"></span></span>
|
||||
|
|
|
|||
111
pages/styles.css
111
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue