small adjustments, many enhancements to rktplayer

gui/styles.css

@@ -6,7 +6,7 @@ body {
 }
 
 .pane {
-	height: calc(100vh - 40px - 2em - 10px);
+	height: calc(100vh - 2em - 20px);
 	width: calc(100% - 10px);
 	display: flex;
     flex-direction: column;
@@ -31,6 +31,7 @@ button {
 
 button:hover {
 	background: #909090;
+   transition: all 0.5s ease-in;
 }
 
 
@@ -69,7 +70,7 @@ input.h-slider {
 }
 
 .hpane {
-    height: 100%;
+    height: calc(100% - 40px - 2.5em);
     width: 100%;
     display: flex;
 }
@@ -99,12 +100,45 @@ input.h-slider {
     height: 100%;
 }
 
+.tabs {
+	width: 100%;
+	height: 1.5em;
+	border-bottom: 1px solid #505050;
+}
+
+.tabs span.tab {
+	width: 50px;
+	overflow: hide;
+	text-overflow: hide;
+	white-space: nowrap;
+	border: 1px solid #505050;
+	cursor: default;
+	padding-left: 5px;
+	padding-right: 5px;
+	border-bottom: none;
+}
+
+.tabs span.tab.current {
+	font-weight: bold;
+	color: #f3961e;
+}
+
+.tabs span.tab:hover {
+   background: #e0e0e0;
+   color: black;
+   transition: all 0.5s ease-in;
+}
+
 .content {
     width: 100%;
     height: 100%;
     overflow: hidden;
 }
 
+.music-playing .content {
+	height: calc(100% - 1.5em);
+}
+
 .scrolly {
     overflow-y: auto;
 }
@@ -127,6 +161,7 @@ table.music-library tr td {
 table.music-library tr td:hover {
    background: #e0e0e0;
    color: black;
+   transition: all 0.5s ease-in;
 }
 
 .popup-menu, .popup-submenu {
@@ -195,6 +230,7 @@ table.tracks tr, table.tracks td {
 table.tracks tr:hover {
    background: #e0e0e0;
    color: black;
+   transition: all 0.5s ease-in;
 }
 
 table.tracks tr:hover.current {
@@ -218,4 +254,18 @@ table.tracks tr.current {
 	justify-content: center;
 }
 
+div.status {
+	width: 100%;
+	height: 2em;
+	padding-top: 0.25em;
+	border-left: 1px solid #505050;
+}
+
+div.status span.info {
+	padding-left: 5px;
+	padding-right: 5px;
+	border-right: 1px solid #505050;
+	color: #d0d0d0;
+}
+