tint

app/app.css

@@ -121,6 +121,7 @@ nav ul li .icon {
 nav ul li.active {
   border-top-color: var(--primary);
   color: var(--primary);
+  background-color: rgb(var(--primary-raw), 0.1);
 }
 @media (max-width: 480px) {
   nav ul li {
@@ -147,6 +148,10 @@ nav ul li.active {
 #player:not([data-flags~=repeat]) .repeat {
   opacity: 0.5;
 }
+#player [type=range] {
+  margin: 0;
+  min-width: 0;
+}
 #player .art {
   margin-right: 0;
   height: 96px;
@@ -155,10 +160,6 @@ nav ul li.active {
 #player .art .icon {
   width: 96px;
 }
-#player h2 {
-  font-size: 125%;
-  margin: 0;
-}
 #player .info {
   flex-grow: 1;
   padding-left: var(--icon-spacing);
@@ -167,16 +168,16 @@ nav ul li.active {
   flex-direction: column;
   justify-content: space-around;
 }
-#player .title,
+#player .info h2 {
-#player .subtitle {
+  font-size: 125%;
+  margin: 0;
+}
+#player .info .title,
+#player .info .subtitle {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-#player [type=range] {
-  margin: 0;
-  min-width: 0;
-}
 #player .timeline {
   display: flex;
   flex-direction: row;
@@ -202,11 +203,11 @@ nav ul li.active {
   justify-content: space-around;
 }
 #player .controls .playback .icon {
-  width: 32px;
+  width: 40px;
 }
 #player .controls .playback .icon-play,
 #player .controls .playback .icon-pause {
-  width: 48px;
+  width: 64px;
 }
 #player .controls .volume {
   display: flex;
@@ -746,6 +747,7 @@ nav ul li.active {
 :root {
   --font-size-large: 112.5%;
   --icon-spacing: 4px;
+  --primary: rgb(var(--primary-raw));
 }
 :root[data-theme=light] {
   --fg: #333;
@@ -760,11 +762,11 @@ nav ul li.active {
   --shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
 }
 :root[data-color=dodgerblue] {
-  --primary: dodgerblue;
+  --primary-raw: 30, 144, 255;
 }
 :root[data-color=darkorange] {
-  --primary: darkorange;
+  --primary-raw: 255, 140, 0;
 }
 :root[data-color=limegreen] {
-  --primary: limegreen;
+  --primary-raw: 50, 205, 50;
 }

app/css/nav.less

@@ -22,6 +22,7 @@ nav ul {
 		&.active {
 			border-top-color: var(--primary);
 			color: var(--primary);
+			background-color: rgb(var(--primary-raw), 0.1);
 		}
 
 		@media (max-width: 480px) {

app/css/player.less

@@ -1,4 +1,5 @@
 #player {
+	@art-size: 96px;
 	.flex-row;
 	align-items: stretch;
 
@@ -6,18 +7,17 @@
 	&[data-state=play] .play { display: none; }
 	&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
 
-	.art {
+	[type=range] {
-		margin-right: 0;
+		margin: 0;
-		@size: 96px;
+		min-width: 0; // fails to shrink otherwise
-		height: @size;
-		img, .icon {
-			width: @size;
-		}
 	}
 
-	h2 {
+	.art {
-		font-size: 125%;
+		margin-right: 0;
-		margin: 0;
+		height: @art-size;
+		img, .icon {
+			width: @art-size;
+		}
 	}
 
 	.info { 
@@ -27,15 +27,15 @@
 		overflow: hidden;
 		.flex-column;
 		justify-content: space-around;
+
+		h2 {
+			font-size: 125%;
+			margin: 0;
+		}
+
+		.title, .subtitle { .long-line; }
 	}
-
+	
-	.title, .subtitle { .long-line; }
-
-	[type=range] {
-		margin: 0;
-		min-width: 0; // fails to shrink otherwise
-	}
-
 	.timeline {
 		.flex-row;
 
@@ -58,11 +58,11 @@
 			justify-content: space-around;
 
 			.icon { 
-				width: 32px;
+				width: 40px;
 			}
 
 			.icon-play, .icon-pause {
-				width: 48px;
+				width: 64px;
 			}
 		}
 
@@ -93,7 +93,7 @@
 
 		.info {
 			order: 1;
-			height: 96px;
+			height: @art-size;
 		}
 	}
 }

app/css/variables.less

@@ -1,6 +1,7 @@
 :root {
 	--font-size-large: 112.5%;
 	--icon-spacing: 4px;
+	--primary: rgb(var(--primary-raw));
 }
 
 :root[data-theme=light] {
@@ -18,13 +19,13 @@
 }
 
 :root[data-color=dodgerblue] {
-	--primary: dodgerblue;
+	--primary-raw: 30, 144, 255;
 }
 
 :root[data-color=darkorange] {
-	--primary: darkorange;
+	--primary-raw: 255, 140, 0;
 }
 
 :root[data-color=limegreen] {
-	--primary: limegreen;
+	--primary-raw: 50, 205, 50;
 }