xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #513 from vector-im/SimonBrandner/fix/slider

Browse source
This commit is contained in:
Šimon Brandner 2022-08-12 20:50:29 +02:00 committed by GitHub
commit 05466fbd7f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 44 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
src/video-grid/VideoTileSettingsModal.module.css
View file

@ -23,6 +23,14 @@
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
background-color: transparent;
--slider-color: var(--quinary-content);
--slider-height: 4px;
--thumb-color: var(--accent);
--thumb-radius: 100%;
--thumb-size: 16px;
--thumb-margin-top: -6px;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
} }
@ -31,51 +39,66 @@
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
height: 4px; background-color: var(--slider-color);
height: var(--slider-height);
} }
.localVolumeSlider[type="range"]::-ms-track { .localVolumeSlider[type="range"]::-ms-track {
-ms-appearance: none; -ms-appearance: none;
appearance: none; appearance: none;
height: 4px; background-color: var(--slider-color);
height: var(--slider-height);
} }
.localVolumeSlider[type="range"]::-webkit-slider-runnable-track { .localVolumeSlider[type="range"]::-webkit-slider-runnable-track {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
height: 4px; background-color: var(--slider-color);
height: var(--slider-height);
} }
.localVolumeSlider[type="range"]::-moz-range-thumb { .localVolumeSlider[type="range"]::-moz-range-thumb {
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
height: 16px; height: var(--thumb-size);
width: 16px; width: var(--thumb-size);
margin-top: -6px; margin-top: var(--thumb-margin-top);
border-radius: var(--thumb-radius);
border-radius: 100%; background: var(--thumb-color);
background: var(--accent);
} }
.localVolumeSlider[type="range"]::-ms-thumb { .localVolumeSlider[type="range"]::-ms-thumb {
-ms-appearance: none; -ms-appearance: none;
appearance: none; appearance: none;
height: 16px; height: var(--thumb-size);
width: 16px; width: var(--thumb-size);
margin-top: -6px; margin-top: var(--thumb-margin-top);
border-radius: var(--thumb-radius);
border-radius: 100%; background: var(--thumb-color);
background: var(--accent);
} }
.localVolumeSlider[type="range"]::-webkit-slider-thumb { .localVolumeSlider[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
height: 16px; height: var(--thumb-size);
width: 16px; width: var(--thumb-size);
margin-top: -6px; margin-top: var(--thumb-margin-top);
border-radius: var(--thumb-radius);
border-radius: 100%; background: var(--thumb-color);
background: var(--accent); }
.localVolumeSlider[type="range"]::-moz-range-progress {
-moz-appearance: none;
appearance: none;
height: var(--slider-height);
background: var(--thumb-color);
}
.localVolumeSlider[type="range"]::-ms-fill-lower {
-moz-appearance: none;
appearance: none;
height: var(--slider-height);
background: var(--thumb-color);
} }