diff --git a/app/app.css b/app/app.css index 7f3b4d6..846ca44 100644 --- a/app/app.css +++ b/app/app.css @@ -159,17 +159,52 @@ nav ul li.active { overflow: hidden; text-overflow: ellipsis; } -#player progress { - width: 100%; -} -#player .controls { +#player .timeline { display: flex; flex-direction: row; align-items: center; } -#player .controls .icon { +#player .timeline .duration, +#player .timeline .elapsed { + flex-basis: 5ch; +} +#player .timeline .duration { + text-align: right; +} +#player .timeline progress { + flex-grow: 1; + height: 8px; +} +#player .controls { + display: flex; + flex-direction: column; + flex-basis: 160px; +} +#player .controls .playback { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; +} +#player .controls .playback .icon { width: 32px; - margin: 8px; +} +#player .controls .playback .icon-play, +#player .controls .playback .icon-pause { + width: 48px; +} +#player .controls .volume { + display: flex; + flex-direction: row; + align-items: center; +} +#player .controls .volume .icon { + margin-right: 4px; +} +#player .controls .volume meter { + flex-grow: 1; + vertical-align: top; + height: 8px; } #player .misc { display: flex; diff --git a/app/css/player.less b/app/css/player.less index f31a029..535a000 100644 --- a/app/css/player.less +++ b/app/css/player.less @@ -29,17 +29,53 @@ .title, .subtitle { .long-line; } + .timeline { + .flex-row; - progress { - width: 100%; + .duration, .elapsed { + flex-basis: 5ch; + } + + .duration { text-align: right; } + + progress { + flex-grow: 1; + height: 8px; + } } .controls { - .flex-row; - .icon { - width: 32px; - margin: 8px; + .flex-column; + flex-basis: 64px + 2*48px; + + .playback { + .flex-row; + justify-content: space-around; + + .icon { + width: 32px; + } + + .icon-play, .icon-pause { + width: 48px; + } } + + .volume { + .flex-row; + + .icon { + margin-right: 4px; + } + + meter { + flex-grow: 1; + vertical-align: top; + height: 8px; + } + } + + } .misc { diff --git a/app/icons/volume-high.svg b/app/icons/volume-high.svg new file mode 100644 index 0000000..a002372 --- /dev/null +++ b/app/icons/volume-high.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/index.html b/app/index.html index 0a43bfa..ed6a878 100644 --- a/app/index.html +++ b/app/index.html @@ -13,13 +13,22 @@

- +
+ + + +
- - - - +
+ + + + +
+
+ +
@@ -52,10 +61,6 @@
-
Volume
-
- -
Theme