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;
--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-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;
}
@ -73,7 +73,6 @@
--line-size: 1.5em;
--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"] {
@ -89,9 +88,11 @@
--focus-color: var(--focus-color-dark);
--tab-color1: #334;
--tab-color2: #3348;
--form-check-color: var(--accent-color);
--form-control-color: var(--form-color2);
--hilite-color: #f008;
--form-check-color: var(--form-color2);
--form-check-bg-color: var(--accent-color);
--form-radio-color: var(--accent-color);
--form-radio-bg-color: var(--form-color1);
--hilite-color: #8008;
--unsafe-color: var(--accent-color);
}
@ -110,9 +111,12 @@
--bg-color2: #fff;
--form-color1: #ccc;
--form-color2: #eee;
--tab-color1: #ddd;
--tab-color2: #8888;
--form-check-color: var(--bg-color2);
--form-check-bg-color: var(--accent-color);
--tab-color1: #d0d8e0;
--tab-color2: #d0d8e088;
--focus-color: var(--focus-color-light);
--hilite-color: #f008;
--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);
}
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) {
@ -115,7 +116,7 @@ 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-check-color);
box-shadow: inset 1em 1em var(--form-radio-color);
background-color: CanvasText;
}
@ -123,7 +124,7 @@ input[type="radio"]:not(.preset):checked::before {
transform: scale(1);
}
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 {
background-color: var(--form-control-color);
background-color: var(--form-radio-bg-color);
}
input:checked + .slider:before {
transform: translateX(1em);
background-color: var(--form-check-color);
background-color: var(--form-radio-color);
}
/* Rounded sliders */

90
src/ui/ui.css
View File

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