item structure

app/css/elements/menu.less

@@ -13,6 +13,8 @@ cyp-menu, cyp-commands {
 			flex-direction: row;
 			span:not([id]) { display: none; }
 		}
+
+		.icon + * { margin-top: 2px; }
 	}
 }
 
@@ -28,7 +30,7 @@ cyp-menu button {
 	&.active {
 		border-top-color: var(--primary);
 		color: var(--primary);
-		background-color: rgb(var(--primary-raw), 0.1);
+		background-color: var(--primary-tint);
 	}
 }
 

app/css/elements/song.less

@@ -1,21 +1,20 @@
 cyp-song {
 	.item;
 
-	.info { // FIXME zrevidovat
+	.info {
 		flex-grow: 1;
 		min-width: 0; // bez tohoto se odmita zmensit
+		.flex-column;
 
+		/* FIXME toto je relikt z .component
 		.icon {
 			color: var(--primary);
 			margin-right: var(--icon-spacing);
 			filter: drop-shadow(var(--text-shadow));
 		}
+		*/
 
-		h2 {
-			font-size: var(--font-size-large);
-			margin: 0;
+		.subtitle { .ellipsis; }
+	}
 }
 
-		h2, div { .ellipsis; } // FIXME vyresit zalamovani/vypustku
-	}
-}

app/css/mixins.less

@@ -28,6 +28,7 @@
 
 	&.selected {
 		border-left-color: var(--primary);
+		background-color: var(--primary-tint);
 	}
 }
 
@@ -42,7 +43,10 @@
 		background-color: var(--bg-alt);
 	}
 
-	> .icon { margin-right: var(--icon-spacing); }
+	> .icon {
+		margin-right: var(--icon-spacing);
+		filter: drop-shadow(var(--text-shadow));
+	}
 
 	.title {
 		font-size: var(--font-size-large);

app/css/variables.less

@@ -4,6 +4,7 @@ cyp-app {
 	--font-size-large: 112.5%;
 	--icon-spacing: 4px;
 	--primary: rgb(var(--primary-raw));
+	--primary-tint: rgba(var(--primary-raw), 0.1);
 	--box-shadow: 0 0 3px #000;
 	--border-width: 4px;
 }

app/js/elements/song.js

@@ -13,8 +13,9 @@ export default class Song extends Item {
 		let info = html.node("div", {className:"info"}, "", this);
 
 		let lines = formatSongInfo(this.data);
-		html.node("h2", {}, lines.shift(), info);
-		lines.length && html.node("div", {}, lines.shift(), info);
+		info.appendChild(this._buildTitle(lines.shift()));
+
+		lines.length && html.node("span", {className:"subtitle"}, lines.shift(), info);
 	}
 }
 
@@ -24,11 +25,9 @@ customElements.define("cyp-song", Song);
 // FIXME vyfaktorovat nekam do haje
 function formatSongInfo(data) {
 	let lines = [];
-	let tokens = [];
 
 	if (data["Title"]) {
-		tokens.push(data["Title"]);
-		lines.push(tokens.join(" "));
+		lines.push(data["Title"]);
 		lines.push(format.subtitle(data));
 	} else {
 		lines.push(fileName(data));