Add Mozilla VPN & Proxy permissions block to options.html

This commit is contained in:
Lesley Norton
2021-12-04 16:32:00 -06:00
parent 07d7b0cad4
commit 3c3b5ae705
4 changed files with 99 additions and 32 deletions
+48 -9
View File
@@ -1,6 +1,11 @@
body {
--grey10: #e7e7e7;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: #fff;
color: #202023;
color: rgb(74, 74, 79);
font-size: 13px;
overflow: hidden;
}
h3:first-of-type {
@@ -8,13 +13,13 @@ h3:first-of-type {
}
label {
font-weight: bold;
display: flex;
align-items: flex-start;
align-items: center;
font-size: 14px;
}
label > span {
padding-block-start: 3px;
padding-inline-end: 4px;
}
.settings-group {
@@ -26,10 +31,6 @@ form {
flex-direction: column;
}
p {
color: rgb(74, 74, 79);
}
.settings-group p {
margin-inline-start: 24px;
margin-block: 4px 8px;
@@ -37,6 +38,7 @@ p {
input[type="checkbox"] {
margin-inline: 0 8px;
margin-block: 1px auto;
inline-size: 16px;
block-size: 16px;
}
@@ -50,14 +52,51 @@ button {
flex-direction: row;
justify-content: space-between;
max-inline-size: 70%;
align-items: center;
}
.bold {
font-weight: 600;
}
.moz-vpn-proxy-permissions {
border-radius: 1rem;
padding-inline: 4rem;
padding-block: 2rem 1rem;
margin-block: 0 2rem;
border: 1px solid var(--grey10);
}
h3.moz-vpn-proxy-permissions-title {
margin-block: 0 1rem;
margin-inline: 0;
position: relative;
}
.moz-vpn-proxy-permissions-title.show-warning::before {
background-image: url("/img/warning.svg");
background-size: 24px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
inset-inline-start: -2.5rem;
content: "";
display: block;
block-size: 24px;
inline-size: 24px;
}
@media (prefers-color-scheme: dark) {
body {
background: #202023;
background: #23212a;
color: #fff;
}
.moz-vpn-proxy-permissions {
border-color: transparent;
background-color: rgba(255, 255, 255, 0.05);
}
p {
color: rgb(177, 177, 179);
}