From b89144086b1011427501a3e8d8f962f38782d0d4 Mon Sep 17 00:00:00 2001
From: Alexandre Trendel <trendel.alexandre@gmail.com>
Date: Thu, 4 Mar 2021 18:32:51 +0100
Subject: [PATCH] more song style tweaks

---
 src/app/components/playlist/song.css | 11 +++--
 src/app/components/playlist/song.ui  | 66 ++++++++++++++++------------
 2 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/src/app/components/playlist/song.css b/src/app/components/playlist/song.css
index f250093c..1c2254d6 100644
--- a/src/app/components/playlist/song.css
+++ b/src/app/components/playlist/song.css
@@ -1,21 +1,24 @@
 .song .song__index {
-  font-size: 11px;
+  font-size: 12px;
+  margin: 4px 12px;
+  padding: 0;
 }
 
 .song label.song__title {
   font-size: 16px;
 }
 
-.song--playing label.song__title {
+.song--playing label.song__title, .song--playing label.song__index {
   font-weight: bold;
+  color: @theme_selected_bg_color;
 }
 
-.song--playing label.song__title, .song--playing label.song__artist, .song--playing label.song__index {
+.song--playing label.song__artist {
   color: @theme_selected_bg_color;
 }
 
 .song label.song__artist {
-  font-size: 14px;
+  font-size: 12px;
 }
 
 .song label.song__duration {
diff --git a/src/app/components/playlist/song.ui b/src/app/components/playlist/song.ui
index e2525205..4d714a30 100644
--- a/src/app/components/playlist/song.ui
+++ b/src/app/components/playlist/song.ui
@@ -16,7 +16,6 @@
       <object class="GtkLabel" id="song_index">
         <property name="visible">True</property>
         <property name="can-focus">False</property>
-        <property name="margin-start">8</property>
         <property name="label" translatable="yes">1</property>
         <style>
           <class name="song__index"/>
@@ -29,16 +28,47 @@
       </packing>
     </child>
     <child>
-      <object class="GtkLabel" id="song_title">
+      <object class="GtkBox">
         <property name="visible">True</property>
         <property name="can-focus">False</property>
-        <property name="label" translatable="yes">Title</property>
-        <property name="ellipsize">middle</property>
-        <property name="max-width-chars">50</property>
-        <property name="xalign">0</property>
-        <style>
-          <class name="song__title"/>
-        </style>
+        <property name="orientation">vertical</property>
+        <property name="homogeneous">True</property>
+        <child>
+          <object class="GtkLabel" id="song_title">
+            <property name="visible">True</property>
+            <property name="can-focus">False</property>
+            <property name="label" translatable="yes">Title</property>
+            <property name="ellipsize">middle</property>
+            <property name="max-width-chars">50</property>
+            <property name="xalign">0</property>
+            <style>
+              <class name="song__title"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">0</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkLabel" id="song_artist">
+            <property name="visible">True</property>
+            <property name="can-focus">False</property>
+            <property name="label" translatable="yes">Artist</property>
+            <property name="ellipsize">middle</property>
+            <property name="max-width-chars">35</property>
+            <property name="xalign">0</property>
+            <style>
+              <class name="song__artist"/>
+            </style>
+          </object>
+          <packing>
+            <property name="expand">False</property>
+            <property name="fill">True</property>
+            <property name="position">1</property>
+          </packing>
+        </child>
       </object>
       <packing>
         <property name="expand">False</property>
@@ -71,24 +101,6 @@
         <property name="position">2</property>
       </packing>
     </child>
-    <child>
-      <object class="GtkLabel" id="song_artist">
-        <property name="visible">True</property>
-        <property name="can-focus">False</property>
-        <property name="label" translatable="yes">Artist</property>
-        <property name="ellipsize">middle</property>
-        <property name="max-width-chars">35</property>
-        <property name="xalign">0</property>
-        <style>
-          <class name="song__artist"/>
-        </style>
-      </object>
-      <packing>
-        <property name="expand">False</property>
-        <property name="fill">True</property>
-        <property name="position">3</property>
-      </packing>
-    </child>
     <child>
       <object class="GtkLabel" id="song_length">
         <property name="visible">True</property>