mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2026-06-19 12:42:51 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

improve some accessibility of play bar

Browse source
This commit is contained in:
Til Schmitter 2026-04-16 14:34:57 +02:00
parent 8a7d504f9f
commit fe3a721d57
3 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
copyparty/web/browser.css
View file

@ -1423,6 +1423,7 @@ html.y #widget.open {
#pvolbg {
height: 100%;
padding: .3em;
cursor: pointer;
align-content: center;
align-items: center;
display: flex;
@ -3479,7 +3480,17 @@ html.d #treepar {
opacity: 1;
pointer-events: all;
}
/* makes touch more intuitive by hiding after timeout */
@media (hover: none) {
#pvolbg:hover #pvol {
animation: timeout_hide 5s forwards;
}
@keyframes timeout_hide {
0% {opacity: 1; display: block;}
90% {opacity: 1; display: block;}
100% {opacity: 0; display: none;}
}
}
}
@media (max-width: 32em) {
#u2conf {

6
copyparty/web/browser.js
View file

@ -871,9 +871,9 @@ ebi('widget').innerHTML = (
' <input type="range" min="0" max="1" step="0.001" value="0" id="sliderpos"></input>' +
' <span id="txtsongend"/>0:00</span>' +
' </div>' +
' <a class="tgl btn" id="cyclebtn_loopmode" tt="' + L.mt_loop + '$N' + L.mt_mloop + '">🔁</a>' +
' <a class="tgl btn" id="au_shuf" tt="' + L.mt_shuf + '">🔀</a>' +
' <div id="pvolbg">' + svg_vol + '<canvas id="pvol"></canvas></div>' +
' <a class="tgl btn" tabindex="0" id="cyclebtn_loopmode" tt="' + L.mt_loop + '$N' + L.mt_mloop + '">🔁</a>' +
' <a class="tgl btn" tabindex="0" id="au_shuf" tt="' + L.mt_shuf + '">🔀</a>' +
' <div id="pvolbg" tabindex="0">' + svg_vol + '<canvas id="pvol"></canvas></div>' +
' </div>' +
'</div>'+
'<div id="np_inf">' +

6
copyparty/web/ui.css
View file

@ -377,9 +377,9 @@ html.y #tth {
border-radius: .2em;
}
@keyframes outline_fadeOut {
0% {outline: var(--a) solid .1em;}
30% {outline: color-mix(var(--a) 75%, transparent 25%) solid .1em;}
100% {outline: transparent solid .1em;}
0% {outline: var(--a) solid .1em;}
30% {outline: color-mix(var(--a) 75%, transparent 25%) solid .1em;}
100% {outline: transparent solid .1em;}
}
html.y *:focus,
html.y *:focus+label,