From cc84fce75b3ffd4dec32c903dd6564837b111210 Mon Sep 17 00:00:00 2001 From: Dmitry Lyzo Date: Sun, 9 Feb 2020 01:45:46 +0300 Subject: [PATCH] Make slider in Edge same as in Chrome --- src/elements/emby-slider/emby-slider.css | 19 ++++++++++++------- src/elements/emby-slider/emby-slider.js | 3 +++ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css index 180d728a4..18c09f61b 100644 --- a/src/elements/emby-slider/emby-slider.css +++ b/src/elements/emby-slider/emby-slider.css @@ -72,6 +72,12 @@ display: none; } +.slider-browser-edge { + margin-left: -0.16em; + margin-right: -0.16em; + width: 150%; /* need to occupy space */ +} + .mdl-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 1.08em; @@ -114,22 +120,21 @@ .mdl-slider::-ms-thumb { -webkit-appearance: none; - width: 1.8em; - height: 1.8em; + width: 1.4em; + height: 1.4em; box-sizing: border-box; border-radius: 50%; background: #00a4dc; border: none; - transform: scale(0.9, 0.9); + transform: scale(0.771429); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1); } -.mdl-slider-hoverthumb::-ms-thumb { - margin-left: -0.4em; - transform: scale(0.5, 0.5); +.mdl-slider:hover::-ms-thumb { + transform: none; } -.mdl-slider:hover::-ms-thumb { +.mdl-slider.show-focus:focus::-ms-thumb { transform: none; } diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js index 00c35b4e2..f07e6433d 100644 --- a/src/elements/emby-slider/emby-slider.js +++ b/src/elements/emby-slider/emby-slider.js @@ -84,6 +84,9 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli if (browser.noFlex) { this.classList.add('slider-no-webkit-thumb'); } + if (browser.edge || browser.msie) { + this.classList.add('slider-browser-edge'); + } if (!layoutManager.mobile) { this.classList.add('mdl-slider-hoverthumb'); }