Media player updates

Seek bar, volume bar, updated quota max
This commit is contained in:
2024-03-04 14:33:41 +01:00
parent ac8badc60e
commit 6f4da4046d
6 changed files with 171 additions and 2 deletions
+47
View File
@@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="21"
height="21"
fill="none"
version="1.1"
id="svg4"
sodipodi:docname="svg.svg"
inkscape:export-filename="seek.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs4" />
<sodipodi:namedview
id="namedview4"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="true"
inkscape:deskcolor="#d1d1d1"
showgrid="false" />
<path
d="M 0,0 V 1 H 20 V 20 H 0 v 1 H 21 V 0 Z"
style="fill:#000000;stroke-width:1.48889"
id="path10" />
<path
d="M 0,1 V 20 H 20 V 1 Z M 5,5 H 17 V 17 H 5 Z"
style="fill:#87888f;stroke-width:4.57988"
id="path11"
sodipodi:nodetypes="cccccccccc" />
<path
d="M 0,0 V 19 H 1 V 1 H 20 V 0 Z"
style="fill:#ffffff;stroke-width:1.3985"
id="path9"
sodipodi:nodetypes="ccccccc" />
<path
d="M 1,1 V 19 H 19 V 1 Z M 4,4 H 16 V 16 H 4 Z"
style="fill:#c0c7c8;stroke-width:1.49631"
id="path8"
sodipodi:nodetypes="cccccccccc" />
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

+63
View File
@@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="11"
height="21"
fill="none"
version="1.1"
id="svg4"
sodipodi:docname="svg.svg"
inkscape:export-filename="vol-select.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs4" />
<sodipodi:namedview
id="namedview4"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="true"
inkscape:deskcolor="#d1d1d1"
showgrid="false" />
<rect
style="fill:#000000;fill-opacity:1;stroke-width:1.07758"
id="rect7"
width="11"
height="21"
x="0"
y="0" />
<rect
style="fill:#87888f;fill-opacity:1;stroke-width:3.23846"
id="rect4"
width="10"
height="19"
x="0"
y="1" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke-width:0.962516"
id="rect6"
width="9"
height="19"
x="0"
y="0" />
<rect
style="fill:#c0c7c8;fill-opacity:1;stroke-width:0.997539"
id="rect5"
width="8"
height="18"
x="1"
y="1" />
<rect
style="fill:#ffffff;fill-opacity:1;stroke-width:1.24518"
id="rect8"
width="1.3213186"
height="1"
x="8.6786814"
y="0" />
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 393 B

+50 -1
View File
@@ -147,7 +147,11 @@ menu[role="tablist"] > li > a {
iframe {
opacity: 0;
position: fixed;
}
iframe.hide {
left: 100%;
}
/* Media player */
@@ -185,6 +189,32 @@ iframe {
height: 22px;
}
#seek::-moz-range-thumb {
background:transparent;
background-image: url(img/seek.svg);
width: 21px;
transform: none;
}
input[type="range"]#seek::-webkit-slider-thumb {
background:transparent;
background-image: url(img/seek.svg);
width: 21px;
transform: translateX(-5px) translateY(-4px);
}
input[type="range"]#seek::-webkit-slider-runnable-track{
height: 11px;
background: transparent;
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 #461c1c, -1px -1px 0 #333, -1px 1px black, 1px -1px #a460a4
}
#seek::-moz-range-track {
height: 11px;
background: transparent;
box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 #461c1c, -1px -1px 0 #333, -1px 1px black, 1px -1px #a460a4
}
#media-control {
display:flex;
}
@@ -250,6 +280,25 @@ iframe {
background-image:url(img/eject.svg);
}
#media-control #volume {
background-image:url(img/volume.png);
background-repeat:no-repeat;
padding-left: 24px;
background-position: 0 50%;
max-width: 120px;
}
#volume::-moz-range-thumb {
background: transparent;
background-image:url(img/vol-select.svg);
}
input[type="range"]#volume::-webkit-slider-thumb {
background: transparent;
-webkit-appearance: none;
background-image:url(img/vol-select.svg);
}
/* Clippy */
#clippy {
position: fixed;
@@ -390,7 +439,7 @@ iframe {
.progress-indicator {
height: 26px;
padding: 4px 3px;
width: 360px;
width: 340px;
}
.field-row.settings label {