diff --git a/app/app.css b/app/app.css index 4584bea..d1a655b 100644 --- a/app/app.css +++ b/app/app.css @@ -135,7 +135,11 @@ nav ul li.active { opacity: 0.5; } #player .art { - margin-right: var(--icon-spacing); + height: 96px; +} +#player .art img, +#player .art .icon { + width: 96px; } #player h2 { font-size: 125%; @@ -159,6 +163,10 @@ nav ul li.active { width: 32px; margin: 8px; } +#player .controls [type=range] { + width: 144px; + margin: 0; +} #player .misc { display: flex; flex-direction: column; @@ -617,6 +625,9 @@ nav ul li.active { transform: rotate(360deg); } } +#settings { + font-size: var(--font-size-large); +} #settings dl { margin: 8px; display: grid; diff --git a/app/css/art.less b/app/css/art.less index 5a005ae..375e2b1 100644 --- a/app/css/art.less +++ b/app/css/art.less @@ -3,5 +3,4 @@ .icon, img { vertical-align: top; } - -} \ No newline at end of file +} diff --git a/app/css/player.less b/app/css/player.less index 3260e95..1cc833b 100644 --- a/app/css/player.less +++ b/app/css/player.less @@ -6,7 +6,11 @@ &:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; } .art { - margin-right: var(--icon-spacing); + @size: 96px; + height: @size; + img, .icon { + width: @size; + } } h2 { @@ -22,11 +26,18 @@ .title, .subtitle { .long-line; } .controls { + @icon-margin: 8px; + @icon-size: 32px; white-space: nowrap; text-align: center; .icon { - width: 32px; - margin: 8px; + width: @icon-size; + margin: @icon-margin; + } + + [type=range] { + width: 3 * (@icon-size + 2*@icon-margin); + margin: 0; } } @@ -37,5 +48,4 @@ justify-content: space-around; .icon { width: 32px; } } - -} \ No newline at end of file +} diff --git a/app/css/settings.less b/app/css/settings.less index 5ae0468..a1bb86c 100644 --- a/app/css/settings.less +++ b/app/css/settings.less @@ -1,4 +1,6 @@ #settings { + font-size: var(--font-size-large); + dl { margin: 8px; display: grid; diff --git a/app/index.html b/app/index.html index 54b57da..4f58fd1 100644 --- a/app/index.html +++ b/app/index.html @@ -20,7 +20,7 @@
- / +
@@ -54,6 +54,10 @@
+
Volume
+
+ +
Theme