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

Improved light/dark schemes support.

This commit is contained in:
hackademix 2022-03-14 21:25:44 +01:00
parent 6a6b1e25a7
commit 5aeb7f3c75
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/common/themes.css
View File

@ -5,7 +5,7 @@
*/ */
.__NoScript_Theme__, .__NoScript_Theme__[data-theme="dark"] { .__NoScript_Theme__, .__NoScript_Theme__[data-theme="dark"] {
color-scheme: light dark; color-scheme: dark;
--accent-color: #d12027; --accent-color: #d12027;
--fg-color1: #ccc; --fg-color1: #ccc;
--fg-color2: #fff; --fg-color2: #fff;
@ -17,13 +17,14 @@
--focus-color: #8007; --focus-color: #8007;
--tab-color1: #6668; --tab-color1: #6668;
--tab-color2: #3348; --tab-color2: #3348;
--form-check-color: var(--bg-color2); --form-check-color: var(--accent-color);
--form-control-color: var(--accent-color); --form-control-color: var(--form-color2);
--hilite-color: #f008; --hilite-color: #f008;
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
.__NoScript_Theme__ { .__NoScript_Theme__ {
color-scheme: light;
--fg-color1: #555; --fg-color1: #555;
--fg-color2: #000; --fg-color2: #000;
--text-color: #333; --text-color: #333;

9
src/ui/common.css
View File

@ -68,7 +68,7 @@ input[type="checkbox"]:not(.https-only, .temp) {
transform: translateY(-0.075em); transform: translateY(-0.075em);
display: grid; display: grid;
place-content: center; place-content: center;
background-color: var(--form-check-color); background-color: var(--form-color1);
} }
input[type="checkbox"]:not(.https-only, .temp)::before { input[type="checkbox"]:not(.https-only, .temp)::before {
@ -87,7 +87,6 @@ input[type="checkbox"]:not(.https-only, .temp):checked::before {
} }
input[type="checkbox"]:not(.https-only, .temp):checked { input[type="checkbox"]:not(.https-only, .temp):checked {
background-color: var(--form-control-color); background-color: var(--form-control-color);
border-color: var(--form-control-color);
} }
input[type="radio"]:not(.preset) { input[type="radio"]:not(.preset) {
@ -116,13 +115,17 @@ input[type="radio"]:not(.preset)::before {
border-radius: 50%; border-radius: 50%;
transform: scale(0); transform: scale(0);
transition: 120ms transform ease-in-out; transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em var(--form-control-color); box-shadow: inset 1em 1em var(--form-check-color);
background-color: CanvasText; background-color: CanvasText;
} }
input[type="radio"]:not(.preset):checked::before { input[type="radio"]:not(.preset):checked::before {
transform: scale(1); transform: scale(1);
} }
input[type="radio"]:not(.preset):checked {
background-color: var(--form-control-color);
}
input:disabled, button:disabled, select:disabled { input:disabled, button:disabled, select:disabled {
filter: grayscale(100%); filter: grayscale(100%);