More changes

build/assets/main.css

@@ -1,10 +1,17 @@
 :root {
-	--vii: #000;
-	--vi: #444;
+	/* --iiv: #000;
+	--iv: #444;
 	--v: #0bb;
 	--iv: #aaa;
 	--iiv: #fff;
-	--a: #f33;
+	--a: #f33; */
+
+	--iiv: #ddd;
+	--iv: #aaa;
+	--v: #375;
+	--vi: #555;
+	--vii: #222;
+	--a: #f40;
 
 	--chevron-right: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v2h2V5H8zm4 4V7h-2v2h2zm2 2V9h-2v2h2zm0 2h2v-2h-2v2zm-2 2v-2h2v2h-2zm0 0h-2v2h2v-2zm-4 4v-2h2v2H8z' fill='currentColor'/%3E%3C/svg%3E")
 }
@@ -27,11 +34,10 @@ button:active, a:active {
 	color: var(--v)
 }
 
-
 body {
 	margin: 0;
-	background: var(--vii);
-	color: var(--iiv);
+	background: var(--iiv);
+	color: var(--vii);
 
 	font-family: sans-serif;
 	font-size: 16px;
@@ -41,27 +47,46 @@ body {
 
 	height: 100vh;
 	max-height: 100vh;
-	padding-top: 5px;
 	box-sizing: border-box;
 }
 
 main {
 	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
 	overflow: hidden;
 }
-main > * {
-	height: 100%;
+section > header {
+	height: 30px;
+	padding: 0 5px 3px 5px;
+
+	font-weight: bold;
+
+	display: flex;
+	flex-direction: row;
 }
+section > header h4 {
+	display: block;
+	/* color:  var(--v); */
+	margin: 0;
+}
+/* section > header {
+	position: sticky;
+	top: 0;
+	height: 30px;
+	line-height: 26px;
+	background: linear-gradient(180deg, var(--iiv), 80% transparent);
+} */
 
 menu li:first-child {
 	margin-top: 0;
 }
 
 menu {
-	overflow-y: scroll;
-	overflow-x: hidden;
 	margin: 0;
 	padding: 0 5px;
+	overflow-y: scroll;
+	overflow-x: hidden;
 	line-height: 1.4;
 }
 
@@ -80,6 +105,8 @@ menu a::after {
 	mask: var(--chevron-right);
 	mask-mode: alpha;
 	margin-left: auto;
+	position: sticky;
+	right: 0;
 }
 
 menu header {
@@ -140,7 +167,7 @@ menu:empty::after {
 }
 
 menu:empty::after, #loading {
-	color: var(--iv);
+	color: var(--vi);
 	font-style: italic;
 	text-align: center;
 }
@@ -152,19 +179,13 @@ menu:empty::after, #loading {
 	align-items: center;
 }
 
-
-aside {
+nav {
 	height: 30px;
-	max-height: 30px;
 	width: 100%;
-	max-width: 100%;
-
 	flex-shrink: 0;
-}
 
-aside footer {
-	background: var(--vii);
-	color: var(--iiv);
+	background: var(--iiv);
+	color: var(--vii);
 
 	display: flex;
 	padding: 0 5px;
@@ -206,29 +227,6 @@ aside footer {
 .right {
 	text-align: right;
 	padding-left: 5px;
-}  
-
-
-.content {
-	flex-grow: 1;
-	overflow-y: auto;
-}
-
-
-
-.controls {
-	position: relative;
-}
-.controls header, .controls nav {
-	margin: 10px 0;
-}
-
-.controls header {
-	text-align: center;
-}
-.controls header h3, .controls header p {
-	margin-block: 0;
-	line-height: 1.3;
 }
 
 /* nav button {
@@ -250,16 +248,18 @@ nav svg {
 	height: 22px;
 } */
 
-section.player {
+section {
 	position: relative;
 	height: 100%;
 
 	display: flex;
 	flex-direction: column;
+}
+
+section.player {
 	padding: 0 5px;
 
 	text-align: center;
-
 }
 
 section.player img {
@@ -267,24 +267,26 @@ section.player img {
 	height: 230px;
 }
 
-section.player header {
+#track-title {
 	font-size: 20px;
-	margin-top: 5px;
+	margin-top: 2px;
+	font-style: normal;
 }
 
-section.player cite {
+#track-artist {
 	font-size: 14px;
-	margin: 2px 50px 5px 50px;
+	margin: 0 50px 5px 50px;
+	font-style: italic;
 }
 
-section.player cite, section.player header {
+#track-title, #track-artist {
 	text-wrap: nowrap;
+	text-overflow: clip;
 }
 
 .marquee {
 	overflow: hidden;
 	text-overflow: clip;
-	position: relative;
 }
 
 .marquee span {
@@ -293,17 +295,6 @@ section.player cite, section.player header {
 	padding-right: 4ch;
 }
 
-.marquee:after {
-	content: " ";
-
-	position: absolute;
-	height: 100%;
-	width: 15px;
-	background: linear-gradient(90deg, #0000, 10px var(--vii), var(--vii));
-
-	right: -5px;
-}
-
 @keyframes marquee {
 	0% { transform: translate(0, 0) }
 	25% { transform: translate(-100%, 0) }
@@ -321,18 +312,18 @@ section.player cite, section.player header {
 	bottom: 0;
 }
 #timestamp {
-	color: var(--iiv);
+	color: var(--a);
 	left: 0;
 }
 #track-length {
-	color: var(--iv);
+	color: var(--vi);
 	right: 0;
 }
 
 .progress {
 	width: 100%;
 	height: 3px;
-	color: var(--iiv)
+	color: var(--vii)
 }
 
 .progress path {
@@ -347,10 +338,10 @@ progress {
 	appearance: none;
 }
 progress::-webkit-progress-bar {
-	background-color: var(--vi);
+	background-color: var(--iv);
 }
 progress::-webkit-progress-value {
-	background-color: var(--iiv);
+	background-color: var(--vii);
 }
 
 ::-webkit-scrollbar {
@@ -359,5 +350,54 @@ progress::-webkit-progress-value {
 }
 
 ::-webkit-scrollbar-thumb {
-	background-color: var(--iv);
+	background-color: var(--vi);
 }
+
+body > svg {
+	flex-shrink: 0;
+}
+
+#tab-indicator {
+	display: block;
+	width: 100%;
+	padding: 0 5px 3px 5px;
+	box-sizing: border-box;
+}
+
+#tab-indicator line {
+	stroke: var(--v);
+	transition: stroke-dasharray 0.1s ease-in;
+}
+
+/* body > header {
+	height: 24px;
+	flex-shrink: 0;
+}
+
+#tabs {
+	margin: 0 5px;
+	scrollbar-width: none;
+
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	gap: 25px;
+	overflow-x: scroll;
+
+	color: var(--vi);
+
+	text-align: center;
+}
+
+#tabs .selected {
+	color: var(--vii);
+	min-width: 60%;
+} */
+
+.progress {
+	background: var(--iv);
+}
+
+#playback-progress {
+	transition: stroke-dasharray 0.1s;
+}