Mirrors
/
noscript
mirror of https://github.com/hackademix/noscript.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Dark theme support.

This commit is contained in:
hackademix 2022-03-11 11:29:18 +01:00
parent d4f623a0e2
commit 0f5baa97f9
6 changed files with 175 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/img/ui-https64.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
src/img/ui-reload64.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 14 KiB

129
src/ui/common.css Normal file
View File

@ -0,0 +1,129 @@
/*
* Copyright (C) 2005-2022 Giorgio Maone <https://maone.net>
*
* SPDX-License-Identifier: GPL-3.0-or-later
*/
:root, :root[data-theme="dark"] {
--accent-color: #d12027;
--fg-color1: #ccc;
--fg-color2: #fff;
--text-color: #ddd;
--bg-color1: #000;
--bg-color2: #212026;
--form-color1: #333;
--form-color2: #111;
--focus-color: #4007;
--tab-color1: #6668;
--tab-color2: #3348;
--form-check-color: var(--bg-color2);
--form-control-color: var(--accent-color);
--hilite-color: #8008;
}
@media (prefers-color-scheme: light) {
:root {
--fg-color1: #555;
--fg-color2: #000;
--text-color: #333;
--bg-color1: #ddd;
--bg-color2: #fff;
--form-color1: #ccc;
--form-color2: #eee;
--tab-color1: #ddda;
--tab-color2: #8888;
--focus-color: #faa7;
}
}
body {
background-color: var(--bg-color2);
color: var(--text-color);
font-size: 12px;
font-family: sistem-ui, sans-serif;
font: use-system-font;
image-rendering: -webkit-optimize-contrast;
}
html.mobile > body {
font-family: Inter, sans-serif;
font-size: 4mm;
}
html.mobile .desktop {
display: none !important;
}
html:not(.tor) .tor, html.tor .not-tor {
display: none;
}
html.tor .tor, html:not(.tor) .not-tor {
display: initial;
}
a, a:visited {
color: var(--accent-color);
}
button {
appearance: none;
background: var(--form-color1);
border: 1px solid var(--fg-color1);
border-radius: .5em;
color: var(--text-color);
font-weight: bold;
padding: .6em;
cursor: pointer;
}
input[type="text"], textarea {
color: var(--text-color);
background-color: var(--bg-color2);
border: 1px solid var(--fg-color1);
padding: 0.5em;
margin: 0.5em;
}
input[type="checkbox"]:not(.https-only, .temp) {
-webkit-appearance: none;
appearance: none;
margin: .4em;
font: inherit;
color: currentColor;
width: 1.2em;
height: 1.2em;
border: 0.15em solid currentColor;
border-radius: 0.2em;
transform: translateY(-0.075em);
display: grid;
place-content: center;
background-color: var(--form-check-color);
}
input[type="checkbox"]:not(.https-only, .temp)::before {
content: "";
width: 0.65em;
height: 0.65em;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
transform: scale(0);
transform-origin: bottom left;
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em var(--form-check-color);
}
input[type="checkbox"]:not(.https-only, .temp):checked::before {
transform: scale(1);
}
input[type="checkbox"]:not(.https-only, .temp):checked {
background-color: var(--form-control-color);
border-color: var(--form-control-color);
}
input:disabled, button:disabled, select:disabled {
filter: grayscale(100%);
opacity: .7;
}
:disabled {
cursor: not-allowed !important;
}

18
src/ui/options.css
View File

@ -6,7 +6,7 @@
/* @import url("chrome://browser/content/extension.css"); */ /* @import url("chrome://browser/content/extension.css"); */
body { body {
background: #eee url("/img/noscript-options.png") no-repeat fixed top right; background: url("/img/noscript-options.png") no-repeat fixed top right;
background-size: 8em; background-size: 8em;
padding: 0 2em 0 0; padding: 0 2em 0 0;
margin: 0.5em 0.5em 0.5em 0.5em; margin: 0.5em 0.5em 0.5em 0.5em;
@ -25,15 +25,15 @@ body {
text-align: right; text-align: right;
} }
#header h1 { #header h1 {
color: #d12027; color: var(--accent-color);
text-shadow: 0.06em 0.06em 0.06em rgba(0,0,0,.5); text-shadow: 0.06em 0.06em 0.06em #0008;
font-size: 2em; font-size: 2em;
padding: 0; padding: 0;
margin: 0; margin: 0;
text-align: right; text-align: right;
} }
#version { #version {
color: #444; color: var(--text-color);
font-size: 0.75em; font-size: 0.75em;
padding: 0; padding: 0;
margin: 0 0 0.5em; margin: 0 0 0.5em;
@ -163,15 +163,15 @@ button.add {
} }
.flextabs__content, .flextabs__toggle[aria-expanded="true"] { .flextabs__content, .flextabs__toggle[aria-expanded="true"] {
background-color: rgba(200, 200, 200, .5) !important; background-color: var(--tab-color2) !important;
border: 0 solid #888; border: 0 solid var(--fg--color1);
} }
.flextabs__toggle { .flextabs__toggle {
-moz-appearance: none; -moz-appearance: none;
border-width: 0 !important; border-width: 0 !important;
margin: 0 4px 0 0; margin: 0 4px 0 0;
background: #ccc; background-color: var(--tab-color1);
outline-width: 0 !important; outline-width: 0 !important;
border-radius: 1em 1em 0 0; border-radius: 1em 1em 0 0;
padding: .4em .8em; padding: .4em .8em;
@ -199,3 +199,7 @@ button.add {
.mozwebext #xss-options { .mozwebext #xss-options {
display: block; display: block;
} }
#presets .sites > .site.customizing {
background: transparent !important;
}

15
src/ui/prompt.css
View File

@ -4,17 +4,20 @@
* SPDX-License-Identifier: GPL-3.0-or-later * SPDX-License-Identifier: GPL-3.0-or-later
*/ */
@import url("./common.css");
html { html {
background: linear-gradient(to bottom, #f7f7f7 0%,#ccc 41%,#aaa 90%,#a88 100%) no-repeat; background: linear-gradient(to bottom, var(--form-color1) 0, var(--bg-color2) 41%, var(--bg-color1) 90%, var(--focus-color) 100%) no-repeat;
background-color: var(--bg-color1);
} }
body { body {
bottom: .8em; bottom: .8em;
font-family: sans-serif;
font-size: 12px;
color: #222;
margin: 0px; margin: 0px;
padding: .8em; padding: .8em;
background-color: transparent;
} }
html.mobile > body { html.mobile > body {
@ -29,7 +32,7 @@ html.mobile > body {
text-align: left; text-align: left;
margin: 0; margin: 0;
line-height: 2em; line-height: 2em;
color: #d12027; color: var(--accent-color);
z-index: 500; z-index: 500;
padding: .8em .8em 0 .8em; padding: .8em .8em 0 .8em;
display: block; display: block;
@ -69,7 +72,7 @@ html.mobile > body {
font-size: 1em; font-size: 1em;
text-align: justify; text-align: justify;
margin-bottom: 1.2em; margin-bottom: 1.2em;
background: rgba(255,255,255,.5); background: var(--focus-color);
} }
#message.multiline p { #message.multiline p {
margin: .1em; margin: .1em;

130
src/ui/ui.css
View File

@ -4,43 +4,16 @@
* SPDX-License-Identifier: GPL-3.0-or-later * SPDX-License-Identifier: GPL-3.0-or-later
*/ */
@import url("./common.css");
:root {
--accent-color: #d00a25;
--form-check-color: white;
--form-control-color: var(--accent-color);
--form-control-disabled: #959495;
}
body { body {
font-family: sistem-ui, sans-serif; min-width: 700px;
font: -moz-use-system-font;
font-size: 12px;
min-width: 600px;
image-rendering: -webkit-optimize-contrast;
}
a, a:visited {
color: var(--accent-color);
} }
html.mobile > body { html.mobile > body {
font-family: Inter, sans-serif;
font-size: 4mm;
min-width: auto; min-width: auto;
} }
html.mobile .desktop {
display: none !important;
}
html:not(.tor) .tor, html.tor .not-tor {
display: none;
}
html.tor .tor, html:not(.tor) .not-tor {
display: initial;
}
.opt-group { .opt-group {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -103,7 +76,7 @@ html.tor .tor, html:not(.tor) .not-tor {
z-index: 1000; z-index: 1000;
top: 1em; top: 1em;
left: 4em !important; left: 4em !important;
text-shadow: 1px 1px white, -1px -1px white; text-shadow: 1px 1px var(--bg-color2), -1px -1px var(--bg-color2);
} }
#sites .presets input.preset:checked + label { #sites .presets input.preset:checked + label {
@ -144,7 +117,7 @@ html.tor .tor, html:not(.tor) .not-tor {
td.presets { td.presets {
white-space: nowrap !important; white-space: nowrap !important;
vertical-align: bottom; vertical-align: bottom;
border: 1px solid black; border: 1px solid var(--fg-color2);
} }
.url > span > span { .url > span > span {
white-space: wrap; white-space: wrap;
@ -170,6 +143,7 @@ html.tor .tor, html:not(.tor) .not-tor {
.capsContext select { .capsContext select {
display: none; display: none;
margin: 0 1em;
} }
.contextual .capsContext select { .contextual .capsContext select {
@ -180,7 +154,7 @@ html.tor .tor, html:not(.tor) .not-tor {
position: absolute; position: absolute;
outline: 3px solid #888; outline: 3px solid #888;
z-index: 1000; z-index: 1000;
background-color: white; background-color: var(--bg-color2);
transform-origin: bottom center; transform-origin: bottom center;
transition: transform .5s; transition: transform .5s;
} }
@ -203,7 +177,6 @@ input[type="checkbox"] {
} }
.sites { .sites {
border: 0; border: 0;
background: white;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
width: 100%; width: 100%;
@ -218,14 +191,14 @@ input[type="checkbox"] {
} }
html:not(.mobile) .sites > tr.site:focus-within { html:not(.mobile) .sites > tr.site:focus-within {
background: #ccc; box-shadow: 0 0 2px 2px var(--focus-color);
} }
.sites > tr:nth-child(even) {background: #fff} .sites > tr:nth-child(even) { background: var(--form-color1) }
.sites > tr:nth-child(odd) {background: #eee} .sites > tr:nth-child(odd) { background: var(--bg-color2) }
.site .url { .site .url {
padding: 0 0 0 0.5em; padding: 0 0 0 0.5em;
color: #000; color: var(--fg-color2);
vertical-align: top; vertical-align: top;
width: 80%; width: 80%;
} }
@ -244,13 +217,13 @@ html:not(.mobile) .sites > tr.site:focus-within {
.site .url[data-key="host"] .domain, .site .url[data-key="host"] .domain,
.site .url[data-key="host"] .sub, .site .url[data-key="host"] .sub,
.site .url[data-key="unsafe"] span { .site .url[data-key="unsafe"] span {
color: #a00; color: var(--accent-color);
} }
.site .url[data-key="secure"] .domain, .site .url[data-key="secure"] .domain,
.site .url[data-key="secure"] .sub, .site .url[data-key="secure"] .sub,
.site .url[data-key="full"] span { .site .url[data-key="full"] span {
color: black; color: var(--fg-color2)
} }
.site .url[data-key="full"] span, .site .url[data-key="full"] span,
@ -284,7 +257,7 @@ label.https-only {
} }
.preset label.preset.override { .preset label.preset.override {
color: #555; color: var(--text-color);
} }
[data-preset="UNTRUSTED"] .https-only, [data-preset="DEFAULT"] .https-only { [data-preset="UNTRUSTED"] .https-only, [data-preset="DEFAULT"] .https-only {
@ -313,7 +286,7 @@ span.preset {
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
background: url(/img/ui-no64.png) no-repeat center left; background: url(/img/ui-no64.png) no-repeat center;
background-size: 1.8em; background-size: 1.8em;
width: 2em; width: 2em;
height: 2em; height: 2em;
@ -340,8 +313,9 @@ span.preset {
opacity: 1; opacity: 1;
transform: none; transform: none;
min-width: 9.38em; min-width: 9.38em;
background-color: #ddd; background-color: var(--bg-color1);
border-radius: 1em; background-position-x: .1em;
border-radius: .5em;
} }
.presets input.preset:focus { .presets input.preset:focus {
@ -359,7 +333,7 @@ span.preset {
overflow: hidden; overflow: hidden;
display: none; display: none;
text-transform: uppercase; text-transform: uppercase;
color: #000; color: var(--fg-color2);
opacity: .6; opacity: .6;
position: absolute; position: absolute;
left: 0em; left: 0em;
@ -385,7 +359,6 @@ span.preset {
} }
:focus-visible, .cap:focus-within { :focus-visible, .cap:focus-within {
--focus-color: #faa7;
outline: 0; outline: 0;
filter: filter:
drop-shadow(2px 2px 2px var(--focus-color)) drop-shadow(2px 2px 2px var(--focus-color))
@ -394,14 +367,6 @@ span.preset {
drop-shadow(-2px -2px 2px var(--focus-color)); drop-shadow(-2px -2px 2px var(--focus-color));
} }
:disabled {
cursor: not-allowed !important;
}
input.preset:disabled {
filter: grayscale(100%);
}
input.preset[value="T_TRUSTED"] { input.preset[value="T_TRUSTED"] {
background-image: url(/img/ui-temp64.png); background-image: url(/img/ui-temp64.png);
} }
@ -457,17 +422,17 @@ input.preset:checked ~ input.temp {
} }
#presets input.preset:not(:checked) { #presets input.preset:not(:checked) {
background-color: #ccc; background-color: var(--form-color1);
} }
.customizing input.preset:checked, #presets input.preset:checked { .customizing input.preset:checked, #presets input.preset:checked {
background-color: #eee; background-color: var(--form-color2);
} }
.customizer fieldset { .customizer fieldset {
background-color: #eee; background-color: var(--form-color2);
margin: 0 0.06em 0.06em 0.06em; margin: 0 0.06em 0.06em 0.06em;
box-shadow: #ccc 0 2px 2px; box-shadow: var(--form-color1) 0 2px 2px;
position: relative; position: relative;
} }
@ -481,11 +446,7 @@ input.preset:checked ~ input.temp {
} }
.customizing, .customizer { .customizing, .customizer {
background-color: #ccc !important; background-color: var(--form-color1) !important;
}
#presets .customizing, #presets .customizer {
background-color: #ddd !important;
} }
#presets legend select, #presets legend button { #presets legend select, #presets legend button {
@ -518,7 +479,7 @@ span.cap {
span.cap.needed { span.cap.needed {
font-weight: bold; font-weight: bold;
background-color: #c88; background-color: var(--hilite-color);
} }
fieldset { fieldset {
@ -571,7 +532,7 @@ legend {
} }
#xssChoices option { #xssChoices option {
background: white; background: var(--bg-color2);
} }
#xssChoices option.block { #xssChoices option.block {
@ -579,44 +540,5 @@ legend {
} }
#xssChoices option.allow { #xssChoices option.allow {
color: #222; color: var(--text-color);
}
input[type="checkbox"]:not(.https-only, .temp) {
-webkit-appearance: none;
appearance: none;
margin: .4em;
font: inherit;
color: currentColor;
width: 1.2em;
height: 1.2em;
border: 0.15em solid currentColor;
border-radius: 0.2em;
transform: translateY(-0.075em);
display: grid;
place-content: center;
background-color: var(--form-check-color);
}
input[type="checkbox"]:not(.https-only, .temp)::before {
content: "";
width: 0.65em;
height: 0.65em;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
transform: scale(0);
transform-origin: bottom left;
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em var(--form-check-color);
}
input[type="checkbox"]:not(.https-only, .temp):checked::before {
transform: scale(1);
}
input[type="checkbox"]:not(.https-only, .temp):checked {
background-color: var(--form-control-color);
border-color: var(--form-control-color);
}
input[type="checkbox"]:disabled {
--form-control-color: var(--form-control-disabled);
color: var(--form-control-disabled);
} }