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 { html {
background-color: #fff; background-color: #fff;
} }
body { body {
box-sizing: border-box;
font-family: lato, sans-serif; font-family: lato, sans-serif;
line-height: 1.3; line-height: 1.3;
background-color: #333; background-color: #333;
@ -95,9 +101,16 @@ nav ul li.active {
#player:not([data-flags~=repeat]) .repeat { #player:not([data-flags~=repeat]) .repeat {
opacity: 0.5; opacity: 0.5;
} }
#player button { #player .icon {
width: 64px; width: 64px;
height: 64px; }
#player .misc {
display: flex;
flex-direction: column;
width: 48px;
}
#player .misc .icon {
width: 48px;
} }
.component { .component {
height: 100%; height: 100%;
@ -130,9 +143,6 @@ nav ul li.active {
} }
.component .grid button { .component .grid button {
flex-shrink: 0; flex-shrink: 0;
width: 32px;
height: 32px;
font-size: 32px;
} }
#queue { #queue {
height: 100%; height: 100%;
@ -165,16 +175,6 @@ nav ul li.active {
} }
#queue .grid button { #queue .grid button {
flex-shrink: 0; 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 { #queue .current {
font-weight: bold; font-weight: bold;
@ -210,9 +210,6 @@ nav ul li.active {
} }
#library .grid button { #library .grid button {
flex-shrink: 0; flex-shrink: 0;
width: 32px;
height: 32px;
font-size: 32px;
} }
#fs { #fs {
height: 100%; height: 100%;
@ -245,7 +242,4 @@ nav ul li.active {
} }
#fs .grid button { #fs .grid button {
flex-shrink: 0; flex-shrink: 0;
width: 32px;
height: 32px;
font-size: 32px;
} }

View file

@ -1,8 +1,11 @@
*, *::before, *::after { box-sizing: inherit; }
html { html {
background-color: #fff; background-color: #fff;
} }
body { body {
box-sizing: border-box;
font-family: lato, sans-serif; font-family: lato, sans-serif;
line-height: 1.3; line-height: 1.3;
background-color: #333; background-color: #333;

View file

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

View file

@ -9,8 +9,16 @@
&[data-state=play] .play { display: none; } &[data-state=play] .play { display: none; }
&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; } &:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
button { .icon {
width: 64px; 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 { #queue {
.component; .component;
li {
display: flex;
flex-direction: row;
+ li {
border-top: 1px solid #888;
}
}
.current { font-weight: bold; } .current { font-weight: bold; }
} }

View file

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