milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Make slider in Edge same as in Chrome

Browse source
This commit is contained in:
Dmitry Lyzo 2020-02-09 01:45:46 +03:00
parent 40c7dad241
commit cc84fce75b
2 changed files with 15 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/elements/emby-slider/emby-slider.css
View file

@ -72,6 +72,12 @@
display: none; display: none;
} }
.slider-browser-edge {
margin-left: -0.16em;
margin-right: -0.16em;
width: 150%; /* need to occupy space */
}
.mdl-slider::-webkit-slider-thumb { .mdl-slider::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.08em; width: 1.08em;
@ -114,22 +120,21 @@
.mdl-slider::-ms-thumb { .mdl-slider::-ms-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width: 1.8em; width: 1.4em;
height: 1.8em; height: 1.4em;
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
background: #00a4dc; background: #00a4dc;
border: none; 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); 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 { .mdl-slider:hover::-ms-thumb {
margin-left: -0.4em; transform: none;
transform: scale(0.5, 0.5);
} }
.mdl-slider:hover::-ms-thumb { .mdl-slider.show-focus:focus::-ms-thumb {
transform: none; transform: none;
} }

3
src/elements/emby-slider/emby-slider.js
View file

@ -84,6 +84,9 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
if (browser.noFlex) { if (browser.noFlex) {
this.classList.add('slider-no-webkit-thumb'); this.classList.add('slider-no-webkit-thumb');
} }
if (browser.edge || browser.msie) {
this.classList.add('slider-browser-edge');
}
if (!layoutManager.mobile) { if (!layoutManager.mobile) {
this.classList.add('mdl-slider-hoverthumb'); this.classList.add('mdl-slider-hoverthumb');
} }