From f1b0a8f3e2bbb6d3c48928cb54997ffca434e6df Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Mon, 7 Dec 2020 12:42:35 +0000 Subject: [PATCH] Theme range input & use transforms --- .../Range/custom-els/RangeInput/index.ts | 8 ++--- .../Range/custom-els/RangeInput/style.css | 31 ++++++++++++------- .../lazy-app/Compress/Options/style.css | 2 +- src/client/lazy-app/Compress/style.css | 4 +-- src/shared/prerendered-app/colors.css | 1 + 5 files changed, 27 insertions(+), 19 deletions(-) diff --git a/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/index.ts b/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/index.ts index 49b8c58b..c8c49be2 100644 --- a/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/index.ts +++ b/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/index.ts @@ -28,7 +28,7 @@ function getPrescision(value: string): number { class RangeInputElement extends HTMLElement { private _input: HTMLInputElement; - private _valueDisplay?: HTMLDivElement; + private _valueDisplay?: HTMLSpanElement; private _ignoreChange = false; static get observedAttributes() { @@ -66,13 +66,13 @@ class RangeInputElement extends HTMLElement { this.innerHTML = `
` + `
` + - `
` + + `
` + '
'; this.insertBefore(this._input, this.firstChild); this._valueDisplay = this.querySelector( - '.' + style.valueDisplay, - ) as HTMLDivElement; + '.' + style.valueDisplay + ' > span', + ) as HTMLSpanElement; // Set inline styles (this is useful when used with frameworks which might clear inline styles) this._update(); } diff --git a/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/style.css b/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/style.css index 0b18ea33..c65acb8a 100644 --- a/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/style.css +++ b/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/style.css @@ -23,10 +23,8 @@ range-input::before { width: 100%; height: 2px; border-radius: 1px; - box-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.3), - inset 0 0.5px 0 rgba(255, 255, 255, 0.2), 0 0.5px 0 rgba(255, 255, 255, 0.3); - background: linear-gradient(#34b9eb, #218ab1) 0 / var(--value-percent, 0%) - 100% no-repeat #eee; + background: linear-gradient(var(--main-theme-color), var(--main-theme-color)) + 0 / var(--value-percent, 0%) 100% no-repeat var(--medium-light-gray); } .input { @@ -41,14 +39,12 @@ range-input::before { pointer-events: none; position: absolute; bottom: 3px; - left: var(--value-percent, 0%); + left: 0; margin-left: -6px; - background: url('data:image/svg+xml,') - center no-repeat #34b9eb; + background: var(--main-theme-color); border-radius: 50%; width: 12px; height: 12px; - box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.3); } .thumb-wrapper { @@ -58,21 +54,19 @@ range-input::before { bottom: 0; height: 0; overflow: visible; + transform: translate(var(--value-percent, 0%), 0); } .value-display { - background: url('data:image/svg+xml,') - top center no-repeat; position: absolute; box-sizing: border-box; - left: var(--value-percent, 0%); + left: 0; bottom: 3px; width: 32px; height: 62px; text-align: center; padding: 8px 3px 0; margin: 0 0 0 -16px; - filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3)); transform-origin: 50% 90%; opacity: 0.0001; transform: scale(0.2); @@ -86,6 +80,19 @@ range-input::before { will-change: transform; pointer-events: none; overflow: hidden; + + > svg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + fill: var(--main-theme-color); + } + + > span { + position: relative; + } } .touch-active + .thumb-wrapper .value-display { diff --git a/src/client/lazy-app/Compress/Options/style.css b/src/client/lazy-app/Compress/Options/style.css index 92dd818b..3719a345 100644 --- a/src/client/lazy-app/Compress/Options/style.css +++ b/src/client/lazy-app/Compress/Options/style.css @@ -7,7 +7,7 @@ } .options-title { - background-color: var(--header-color); + background-color: var(--main-theme-color); color: var(--header-text-color); margin: 0; padding: 10px var(--horizontal-padding); diff --git a/src/client/lazy-app/Compress/style.css b/src/client/lazy-app/Compress/style.css index 2bba19a2..7968ff46 100644 --- a/src/client/lazy-app/Compress/style.css +++ b/src/client/lazy-app/Compress/style.css @@ -40,7 +40,7 @@ } .options-1-theme { - --header-color: var(--pink); + --main-theme-color: var(--pink); --header-text-color: var(--white); --scroller-radius: var(--options-radius) var(--options-radius) 0 0; @@ -50,7 +50,7 @@ } .options-2-theme { - --header-color: var(--blue); + --main-theme-color: var(--blue); --header-text-color: var(--dark-text); --scroller-radius: var(--options-radius) var(--options-radius) 0 0; diff --git a/src/shared/prerendered-app/colors.css b/src/shared/prerendered-app/colors.css index faeeb408..ff181fda 100644 --- a/src/shared/prerendered-app/colors.css +++ b/src/shared/prerendered-app/colors.css @@ -9,6 +9,7 @@ html { --deep-blue: #09f; --light-blue: #76c8ff; --light-gray: #eaeaea; + --medium-light-gray: #d1d1d1; --dark-gray: #333; --dim-text: #343a3e; --dark-text: #142630;