css

app/css/cyp.less

@@ -39,13 +39,16 @@ button {
 
 	.flex-row;
 	display: inline-flex;
-	white-space: nowrap;
 
 	background-color: transparent;
 	padding: 0;
 	border: none;
 	line-height: 1;
 	cursor: pointer;
+
+	@media (hover: hover) {
+		&:not(:disabled):not(:hover):not(.-thumb) { opacity: 0.9; }
+	}
 }
 
 select {

app/cyp.css

@@ -41,7 +41,6 @@ button {
   flex-direction: row;
   align-items: center;
   display: inline-flex;
-  white-space: nowrap;
   background-color: transparent;
   padding: 0;
   border: none;
@@ -51,6 +50,11 @@ button {
 button:not([hidden]) {
   display: flex;
 }
+@media (hover: hover) {
+  button:not(:disabled):not(:hover):not(.-thumb) {
+    opacity: 0.9;
+  }
+}
 select {
   background-color: transparent;
   border: 1px solid var(--fg);
@@ -756,9 +760,9 @@ cyp-yt.pending header {
 }
 x-range {
   --thumb-size: 8px;
-  --thumb-color: #fff;
+  --thumb-color: #ddd;
   --thumb-shadow: #000;
-  --thumb-hover-color: #ddd;
+  --thumb-hover-color: #fff;
   --track-size: 4px;
   --track-color: #888;
   --track-shadow: #000;

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "dependencies": {
-    "custom-range": "^1.0.2",
+    "custom-range": "^1.0.3",
     "node-static": "^0.7.11",
     "ws2mpd": "^2.0.0"
   },