diff --git a/src/common/themes.css b/src/common/themes.css index 9835e88..e16f198 100644 --- a/src/common/themes.css +++ b/src/common/themes.css @@ -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; } diff --git a/src/ui/common.css b/src/ui/common.css index 0d8cf34..970cbd5 100644 --- a/src/ui/common.css +++ b/src/ui/common.css @@ -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); } diff --git a/src/ui/slider.css b/src/ui/slider.css index b005354..ca51de9 100644 --- a/src/ui/slider.css +++ b/src/ui/slider.css @@ -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 */ diff --git a/src/ui/ui.css b/src/ui/ui.css index 78eee29..d21e7f5 100644 --- a/src/ui/ui.css +++ b/src/ui/ui.css @@ -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 {