This commit is contained in:
Ondrej Zara 2019-03-26 17:07:52 +01:00
parent e5e90bf10a
commit a2b6c45125
6 changed files with 34 additions and 39 deletions

View file

@ -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;
}

View file

@ -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;

View file

@ -34,9 +34,6 @@
button {
flex-shrink: 0;
width: 32px;
height: 32px;
font-size: 32px;
}
}
}

View file

@ -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; }
}
}

View file

@ -1,14 +1,5 @@
#queue {
.component;
li {
display: flex;
flex-direction: row;
+ li {
border-top: 1px solid #888;
}
}
.current { font-weight: bold; }
}

View file

@ -15,12 +15,14 @@
<span class="artist-album"></span>
</div>
<span class="elapsed"></span>/<span class="duration"></span>
<button class="prev"></button>
<button class="play"></button>
<button class="pause"></button>
<button class="prev"></button>
<button class="next"></button>
<div class="misc">
<button class="repeat"></button>
<button class="random"></button>
</div>
</section>
</header>
<main>