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"] {
color-scheme: light dark;
color-scheme: dark;
--accent-color: #d12027;
--fg-color1: #ccc;
--fg-color2: #fff;
@ -17,13 +17,14 @@
--focus-color: #8007;
--tab-color1: #6668;
--tab-color2: #3348;
--form-check-color: var(--bg-color2);
--form-control-color: var(--accent-color);
--form-check-color: var(--accent-color);
--form-control-color: var(--form-color2);
--hilite-color: #f008;
}
@media (prefers-color-scheme: light) {
.__NoScript_Theme__ {
color-scheme: light;
--fg-color1: #555;
--fg-color2: #000;
--text-color: #333;

11
src/ui/common.css
View File

@ -68,7 +68,7 @@ input[type="checkbox"]:not(.https-only, .temp) {
transform: translateY(-0.075em);
display: grid;
place-content: center;
background-color: var(--form-check-color);
background-color: var(--form-color1);
}
input[type="checkbox"]:not(.https-only, .temp)::before {
@ -87,8 +87,7 @@ input[type="checkbox"]:not(.https-only, .temp):checked::before {
}
input[type="checkbox"]:not(.https-only, .temp):checked {
background-color: var(--form-control-color);
border-color: var(--form-control-color);
}
}
input[type="radio"]:not(.preset) {
-webkit-appearance: none;
@ -116,13 +115,17 @@ input[type="radio"]:not(.preset)::before {
border-radius: 50%;
transform: scale(0);
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;
}
input[type="radio"]:not(.preset):checked::before {
transform: scale(1);
}
input[type="radio"]:not(.preset):checked {
background-color: var(--form-control-color);
}
input:disabled, button:disabled, select:disabled {
filter: grayscale(100%);