0x2620/pandora
2
1
Fork 1
Code Issues 1.2k Pull requests Releases Wiki Activity

better mobile seek bar

Browse source
This commit is contained in:
j 2024-12-14 19:16:41 +00:00
commit 627a016515
2 changed files with 118 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

72
static/mobile/css/style.css
View file

@ -201,3 +201,75 @@ ol li {
width: 64px;
height: 64px;
}
.seekbar {
padding: 12px 22px;
position: relative;
width: 100%;
}
.fullscreen .seekbar {
padding: 28px 22px;
}
.seekbar-progress {
height: 10px;
border: solid 1px #B1B1B1;
}
.seekbar-progress [role="progressbar"] {
height: 100%;
position: relative;
background-color: #B1B1B180;
}
.seekbar-progress [role="progressbar"]:after {
content: " ";
display: block;
width: 14px;
height: 14px;
position: absolute;
top: -3px;
right: -7px;
border: 2px solid #B1B1B180;
background-color: #B1B1B180;
}
.seekbar input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 100%;
margin: 0;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: transparent;
outline: 0;
border: 0;
}
.seekbar input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
display: block;
width: 48px;
height: 48px;
background-color: transparent;
}
.seekbar input[type="range"]::-moz-range-thumb {
display: block;
width: 48px;
height: 48px;
background: transparent;
border: 0;
}
.seekbar input[type="range"]::-moz-range-track {
background: transparent;
border: 0;
}
.seekbar input[type="range"]::-moz-focus-outer {
border: 0;
}