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

Various user-driven visual tweaks.

This commit is contained in:
hackademix 2022-04-05 23:07:51 +02:00
parent e200994f31
commit 251b639593
4 changed files with 64 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/common/themes.css
View File

@ -35,9 +35,9 @@
--popup-size: 600px; --popup-size: 600px;
--bg-preset-color: var(--form-color2); --bg-preset-color: var(--form-color2);
--bg-focused-row: linear-gradient(to bottom, var(--form-color1) 0, var(--form-color2) 70%, var(--bg-color1) 100%) no-repeat;
--bg-odd-row: var(--bg-color2); --bg-odd-row: var(--bg-color2);
--bg-even-row: var(--tab-color1); --bg-even-row: var(--tab-color1);
--bg-focused-row: linear-gradient(to bottom, var(--focus-color) 0, transparent 20%, transparent 80%, var(--focus-color) 100%);
--border-row-sep: none; --border-row-sep: none;
} }
@ -73,7 +73,6 @@
--line-size: 1.5em; --line-size: 1.5em;
--popup-size: 600px; --popup-size: 600px;
--bg-focused-row: linear-gradient(to bottom, transparent 0, transparent 60%, var(--focus-color) 100%);
} }
.__NoScript_Theme__, .__NoScript_Theme__[data-theme="dark"] { .__NoScript_Theme__, .__NoScript_Theme__[data-theme="dark"] {
@ -89,9 +88,11 @@
--focus-color: var(--focus-color-dark); --focus-color: var(--focus-color-dark);
--tab-color1: #334; --tab-color1: #334;
--tab-color2: #3348; --tab-color2: #3348;
--form-check-color: var(--accent-color); --form-check-color: var(--form-color2);
--form-control-color: var(--form-color2); --form-check-bg-color: var(--accent-color);
--hilite-color: #f008; --form-radio-color: var(--accent-color);
--form-radio-bg-color: var(--form-color1);
--hilite-color: #8008;
--unsafe-color: var(--accent-color); --unsafe-color: var(--accent-color);
} }
@ -110,9 +111,12 @@
--bg-color2: #fff; --bg-color2: #fff;
--form-color1: #ccc; --form-color1: #ccc;
--form-color2: #eee; --form-color2: #eee;
--tab-color1: #ddd; --form-check-color: var(--bg-color2);
--tab-color2: #8888; --form-check-bg-color: var(--accent-color);
--tab-color1: #d0d8e0;
--tab-color2: #d0d8e088;
--focus-color: var(--focus-color-light); --focus-color: var(--focus-color-light);
--hilite-color: #f008;
--unsafe-color: #811; --unsafe-color: #811;
} }

7
src/ui/common.css
View File

@ -86,7 +86,8 @@ input[type="checkbox"]:not(.https-only, .temp):checked::before {
transform: scale(1); transform: scale(1);
} }
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-check-bg-color);
border-color: var(--form-check-bg-color);
} }
input[type="radio"]:not(.preset) { input[type="radio"]:not(.preset) {
@ -115,7 +116,7 @@ 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-check-color); box-shadow: inset 1em 1em var(--form-radio-color);
background-color: CanvasText; background-color: CanvasText;
} }
@ -123,7 +124,7 @@ input[type="radio"]:not(.preset):checked::before {
transform: scale(1); transform: scale(1);
} }
input[type="radio"]:not(.preset):checked { input[type="radio"]:not(.preset):checked {
background-color: var(--form-control-color); background-color: var(--form-radio-bg-color);
} }

4
src/ui/slider.css
View File

@ -57,13 +57,13 @@
} }
input:checked + .slider { input:checked + .slider {
background-color: var(--form-control-color); background-color: var(--form-radio-bg-color);
} }
input:checked + .slider:before { input:checked + .slider:before {
transform: translateX(1em); transform: translateX(1em);
background-color: var(--form-check-color); background-color: var(--form-radio-color);
} }
/* Rounded sliders */ /* Rounded sliders */

86
src/ui/ui.css
View File

@ -23,6 +23,11 @@
} }
@media (max-width: 550px) { @media (max-width: 550px) {
.sites td.url {
vertical-align: top;
}
#sites .presets { #sites .presets {
width: 0 !important; width: 0 !important;
padding: 0 !important; padding: 0 !important;
@ -42,6 +47,10 @@
font-weight: bold; font-weight: bold;
} }
#sites .presets input.preset:checked {
filter: drop-shadow(0 0 2px var(--fg-color1));
}
#sites .site:not(.customizing) .presets input.preset { #sites .site:not(.customizing) .presets input.preset {
background-color: transparent; background-color: transparent;
background-position: center; background-position: center;
@ -49,23 +58,17 @@
#sites .customizing input.preset:checked { #sites .customizing input.preset:checked {
margin-left: 0; margin-left: 0;
background-position: center;
width: 2.2em;
} }
#presets .presets input.preset + label { #presets .presets input.preset + label {
font-size: 60%; font-size: 80%;
--line-scaled: calc(var(--line-size) / 0.6); --line-scaled: calc(var(--line-size) / 0.8);
position: absolute !important; position: absolute !important;
text-align: left; text-align: left;
margin: 0px !important; margin: 0px !important;
display: block !important; display: block !important;
overflow: visible; overflow: visible;
z-index: 1000;
bottom: 0px; bottom: 0px;
line-height: var(--line-scaled);
left: var(--line-scaled);
text-shadow: 1px 1px var(--bg-color2), -1px -1px var(--bg-color2);
} }
#sites .presets input.preset:checked + label { #sites .presets input.preset:checked + label {
@ -80,18 +83,18 @@
display: block !important; display: block !important;
position: absolute; position: absolute;
overflow: visible !important; overflow: visible !important;
background-image: none !important; background: none !important;
} }
.presets input.preset:checked ~ input.temp { .presets input.preset:checked ~ input.temp {
left: 2em; left: var(--line-size);
right: auto;
pointer-events: none; pointer-events: none;
} }
.customizing input.preset:checked ~ input.temp { .customizing input.preset:checked ~ input.temp {
pointer-events: all !important; pointer-events: all !important;
z-index: 1000; z-index: 1000;
left: var(--line-size);
padding: calc(var(--line-size) / 2); padding: calc(var(--line-size) / 2);
} }
@ -193,7 +196,7 @@ input[type="checkbox"] {
vertical-align: middle; vertical-align: middle;
} }
html:not(.mobile) .sites > tr.site:not(.customizing):is(:focus-within, :hover) { html:not(.mobile) .sites > tr.site:not(.customizing):is(:focus-within) {
background-image: var(--bg-focused-row); background-image: var(--bg-focused-row);
border-color: transparent; border-color: transparent;
} }
@ -204,12 +207,10 @@ html:not(.mobile) .sites > tr.site:not(.customizing):is(:focus-within, :hover) {
.sites > tr.site:nth-of-type(even) { .sites > tr.site:nth-of-type(even) {
background-color: var(--bg-even-row); background-color: var(--bg-even-row);
--bg-preset-color: var(--bg-odd-row);
} }
.sites > tr.site:nth-of-type(odd) { .sites > tr.site:nth-of-type(odd) {
background-color: var(--bg-odd-row); background-color: var(--bg-odd-row);
--bg-preset-color: var(--bg-even-row);
} }
@ -296,7 +297,7 @@ span.preset {
display: inline-block; display: inline-block;
font-size: 1em; font-size: 1em;
height: var(--line-size); height: var(--line-size);
top: 2px; top: 0.2em;
} }
.preset label, .preset input, .preset button { .preset label, .preset input, .preset button {
@ -308,14 +309,16 @@ span.preset {
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
background: var(--img-ui-no) no-repeat center; background: transparent var(--img-ui-no) no-repeat center;
outline: 0; outline: 0;
opacity: .7; opacity: .7;
margin: 0 .5em; margin: 0 1em 0 0;
background-position: 0; background-position: 0;
background-size: var(--line-size); background-size: var(--line-size);
width: var(--line-size); width: var(--line-size);
height: var(--line-size); height: var(--line-size);
position: relative;
z-index: 1;
} }
#presets-sizer { #presets-sizer {
@ -338,10 +341,6 @@ span.preset {
min-width: calc(var(--preset-label-width) + var(--line-size) + var(--extra-preset-width)); min-width: calc(var(--preset-label-width) + var(--line-size) + var(--extra-preset-width));
} }
.site:not(.customizing) .presets input.preset:checked {
filter: drop-shadow(0 0 2px var(--fg-color1));
}
.presets input.preset:focus { .presets input.preset:focus {
transform: none; transform: none;
} }
@ -360,10 +359,10 @@ span.preset {
opacity: .8; opacity: .8;
position: absolute; position: absolute;
left: 0; left: 0;
top: -.1em; padding: .05em 0.4em .05em 0;
padding: .05em 0 .05em 0; --line-scaled: var(--line-size);
padding-left: calc(var(--line-size) * 1.5); line-height: var(--line-scaled);
line-height: var(--line-size); padding-left: calc(var(--line-scaled) * 1.5);
} }
.presets input.preset[value^="T"] + label { .presets input.preset[value^="T"] + label {
@ -374,14 +373,22 @@ span.preset {
opacity: 1; opacity: 1;
display: inline-flex; display: inline-flex;
width: 75%; width: 75%;
background-color: var(--form-color2);
border-radius: 1em 1em 0 0;
} }
:not(#presets) > .sites .site:not(.customizing) .presets input.preset:checked + label.preset {
background-image: linear-gradient(to right, transparent calc(var(--line-size) * 1.5), var(--bg-preset-color) 50%); @media (min-width: 550px) {
:not(#presets) > .sites .site:not(.customizing) .presets input.preset:checked + label.preset {
background-color: var(--bg-preset-color);
border-radius: calc(var(--line-size) / 2); border-radius: calc(var(--line-size) / 2);
filter: drop-shadow(0 0 2px var(--fg-color1));
}
} }
#presets :is(.presets input.preset + label, .customizer-controls) {
box-shadow: 0 0 .2em var(--fg-color1);
}
#presets-sizer .presets label { #presets-sizer .presets label {
position: static; position: static;
@ -423,6 +430,7 @@ input.temp {
top: 0; top: 0;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
z-index: 100;
} }
input.temp + label { input.temp + label {
@ -444,12 +452,7 @@ input.preset:checked ~ input.temp {
background-size: 100%; background-size: 100%;
} }
#presets input.preset:not(:checked) {
background-color: var(--tab-color1);
}
.customizing input.preset:checked, #presets input.preset:checked { .customizing input.preset:checked, #presets input.preset:checked {
background-color: var(--form-color2);
height: calc(var(--line-size) + 0.2em); height: calc(var(--line-size) + 0.2em);
filter: none; filter: none;
} }
@ -463,26 +466,27 @@ input.preset:checked ~ input.temp {
.customizing input.preset:checked { .customizing input.preset:checked {
margin: 0 0 -0.2em 0; margin: 0 0 -0.2em 0;
border-radius: 1em 1em 0 0; background-position: 0 0;
background-position: 0.5em 0;
--extra-preset-width: 1em; --extra-preset-width: 1em;
} }
#presets span.preset {
margin-right: .8em;
max-width: 28vw;
}
#presets :is(input.preset, input.preset:checked) { #presets :is(input.preset, input.preset:checked) {
margin: 0 .5em -0.2em 0;
border-radius: 1em 1em 0 0;
background-position: 0.5em 0;
--extra-preset-width: 0px;
filter: none; filter: none;
background-position: .2em 0;
} }
#presets .site.customizing { #presets .site.customizing {
background-color: transparent; background-color: transparent;
} }
#presets .customizing input.preset:not(:checked) { #presets .customizing input.preset:not(:checked) + label {
margin-bottom: 0; margin-bottom: 0;
box-shadow: 0 0 1px var(--form-color2); background-color: var(--form-color1);
} }
#presets legend select, #presets legend button { #presets legend select, #presets legend button {