Convert from CSS to SCSS. Make a multitude of refinements to styling along the way.

Remove unused glade UI file. Added CSS classes to various components. Fix some alignment issues. Renamed our albums_strip to favorites_list.

Implement recursive file parsing in KotoIndexedAlbum with the intent of using it for "discs" / CD, useful for albums like Foo Fighters: In Your Honor that have 2 or more CDs. Still need to work on refining this further.

Add stub function in our album view for a planned separation of the track listing so we can do it based on discs and other depth-of-3 sub-folders.

theme/_button.scss

@@ -0,0 +1,5 @@
+.koto-button {
+	& > image {
+		margin-right: 10px;
+	}
+}

theme/_expander.scss

@@ -0,0 +1,17 @@
+@import 'vars';
+
+.expander {
+	& > .expander-header {
+		& > label {
+			font-size: large;
+		}
+	}
+
+	& > revealer > box {
+		& > .koto-button {
+			&, & > box {
+				min-height: 40px;
+			}
+		}
+	}
+}

theme/_player-bar.scss

@@ -0,0 +1,17 @@
+@import 'vars';
+
+.player-bar {
+	background-color: $midnight;
+	background-image: none;
+	padding: $halvedpadding;
+
+	.koto-button {
+		&:not(.toggled) {
+			color: $darkgrey;
+		}
+
+		&.toggled {
+			color: white;
+		}
+	}
+}

theme/_primary-nav.scss

@@ -0,0 +1,21 @@
+.primary-nav {
+	padding: 10px;
+
+	& > viewport > box {
+		& > .koto-botton {
+			& > box {
+				padding: 10px 0;
+
+				& > label {
+					font-size: large;
+				}
+			}
+		}
+
+		& > .expander {
+			& > .expander-header {
+				margin-bottom: 10px;
+			}
+		}
+	}
+}

theme/_track-item.scss

@@ -0,0 +1,3 @@
+.track-item {
+	padding: 10px;
+}

theme/_vars.scss

@@ -0,0 +1,6 @@
+$grey: #2e2e2e;
+$midnight: #1d1d1d;
+$darkgrey: #666666;
+
+$itempadding: 40px;
+$halvedpadding: $itempadding / 2;

theme/main.scss

@@ -0,0 +1,17 @@
+@import 'pages/music-local.scss';
+
+@import 'button';
+@import 'vars';
+@import 'expander';
+@import 'player-bar';
+@import 'primary-nav';
+@import 'track-item';
+
+window {
+	background-color: $grey;
+
+	& > headerbar, & > headerbar:active {
+		background-color: $midnight;
+		background-image: none;
+	}
+}

theme/meson.build

@@ -0,0 +1,21 @@
+sassc = find_program('sassc', required: true)
+
+theme = custom_target('Theme generation',
+	input: 'main.scss',
+	output: 'style.css',
+	command: [
+		sassc,
+		[ '-a', '-M', '-t', 'compact' ],
+		'@INPUT@', '@OUTPUT@',
+	],
+	depend_files: files([
+		'pages/_music-local.scss',
+		'_button.scss',
+		'_vars.scss',
+		'_expander.scss',
+		'_player-bar.scss',
+		'_primary-nav.scss',
+		'_track-item.scss',
+	]),
+	build_by_default: true,
+)

theme/pages/_music-local.scss

@@ -0,0 +1,58 @@
+@import '../vars';
+
+.page-music-local {
+	& > .artist-list {
+		&, & > viewport, & > viewport > list {
+			background-color: $midnight;
+		}
+
+		& > viewport > list {
+			& > row {
+				padding: $halvedpadding;
+			}
+		}
+	}
+
+	& > stack {
+		& > .artist-view {
+			& > viewport > .artist-view-content {
+				padding: $itempadding;
+
+				& > .album-strip {
+					margin-bottom: $itempadding;
+					& > flowboxchild {
+						margin-right: $itempadding;
+					}
+				}
+
+				& > .album-list {
+					& > flowboxchild > .album-view {
+						& > image {
+							margin-right: $itempadding;
+						}
+
+						& > box {
+							& > label {
+								font-size: xx-large;
+								font-weight: 900;
+								padding: $halvedpadding 0;
+							}
+
+							& > .track-list {
+								& > row {
+									&:nth-child(odd):not(:hover) {
+										background-color: $midnight;
+									}
+
+									&:nth-child(even), &:hover {
+										background-color: $grey;
+									}
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}