player: improve volume slider, fix native player button

1 files changed, 29 insertions, 0 deletions

diff --git a/web/style/js-player.css b/web/style/js-player.css
index 1d205a8..e2c5c10 100644
--- a/web/style/js-player.css
+++ b/web/style/js-player.css
@@ -207,3 +207,32 @@ ul.jsp-track-list {
 ul.jsp-track-list li.active {
     background-color: #047a0073;
 }
+
+.jsp-volumecontrol input {
+    appearance: none;
+    width: 100%;
+    height: 24px;
+    background-color: black;
+    opacity: 0.5;
+    outline: none;
+}
+.jsp-volumecontrol input:hover {
+    opacity: 1;
+}
+.jsp-volumecontrol input::-webkit-slider-thumb,
+.jsp-volumecontrol input::-moz-range-thumb {
+    width: 24px;
+    height: 24px;
+    border-radius: 0px;
+    background-color: #06ad00;
+    cursor: ew-resize;
+    border: 0px solid transparent;
+}
+
+.jsp-volume {
+    display: inline-block;
+    margin-left: 2em;
+    font-family: monospace;
+    font-size: large;
+    width: 20em;
+}