diff --git a/app/app.css b/app/app.css index 1424fe8..9c80f2a 100644 --- a/app/app.css +++ b/app/app.css @@ -1,7 +1,13 @@ +*, +*::before, +*::after { + box-sizing: inherit; +} html { background-color: #fff; } body { + box-sizing: border-box; font-family: lato, sans-serif; line-height: 1.3; background-color: #333; @@ -95,9 +101,16 @@ nav ul li.active { #player:not([data-flags~=repeat]) .repeat { opacity: 0.5; } -#player button { +#player .icon { width: 64px; - height: 64px; +} +#player .misc { + display: flex; + flex-direction: column; + width: 48px; +} +#player .misc .icon { + width: 48px; } .component { height: 100%; @@ -130,9 +143,6 @@ nav ul li.active { } .component .grid button { flex-shrink: 0; - width: 32px; - height: 32px; - font-size: 32px; } #queue { height: 100%; @@ -165,16 +175,6 @@ nav ul li.active { } #queue .grid button { flex-shrink: 0; - width: 32px; - height: 32px; - font-size: 32px; -} -#queue li { - display: flex; - flex-direction: row; -} -#queue li + li { - border-top: 1px solid #888; } #queue .current { font-weight: bold; @@ -210,9 +210,6 @@ nav ul li.active { } #library .grid button { flex-shrink: 0; - width: 32px; - height: 32px; - font-size: 32px; } #fs { height: 100%; @@ -245,7 +242,4 @@ nav ul li.active { } #fs .grid button { flex-shrink: 0; - width: 32px; - height: 32px; - font-size: 32px; } diff --git a/app/css/app.less b/app/css/app.less index a1ffb8d..aa265e3 100644 --- a/app/css/app.less +++ b/app/css/app.less @@ -1,8 +1,11 @@ +*, *::before, *::after { box-sizing: inherit; } + html { background-color: #fff; } body { + box-sizing: border-box; font-family: lato, sans-serif; line-height: 1.3; background-color: #333; diff --git a/app/css/component.less b/app/css/component.less index dce52f9..a6f8dfd 100644 --- a/app/css/component.less +++ b/app/css/component.less @@ -34,9 +34,6 @@ button { flex-shrink: 0; - width: 32px; - height: 32px; - font-size: 32px; } } } diff --git a/app/css/player.less b/app/css/player.less index 285183d..43d8659 100644 --- a/app/css/player.less +++ b/app/css/player.less @@ -9,8 +9,16 @@ &[data-state=play] .play { display: none; } &:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; } - button { + .icon { width: 64px; - height: 64px; } + + .misc { + display: flex; + flex-direction: column; + @size: 96px / 2; + width: @size; + .icon { width: @size; } + } + } \ No newline at end of file diff --git a/app/css/queue.less b/app/css/queue.less index 1f7ebc8..ed581a4 100644 --- a/app/css/queue.less +++ b/app/css/queue.less @@ -1,14 +1,5 @@ #queue { .component; - li { - display: flex; - flex-direction: row; - - + li { - border-top: 1px solid #888; - } - } - .current { font-weight: bold; } -} \ No newline at end of file +} diff --git a/app/index.html b/app/index.html index a22234e..532d60b 100644 --- a/app/index.html +++ b/app/index.html @@ -15,12 +15,14 @@ / + - - - +