styling
This commit is contained in:
parent
e5e90bf10a
commit
a2b6c45125
6 changed files with 34 additions and 39 deletions
36
app/app.css
36
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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -34,9 +34,6 @@
|
|||
|
||||
button {
|
||||
flex-shrink: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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; }
|
||||
}
|
||||
|
||||
}
|
|
@ -1,14 +1,5 @@
|
|||
#queue {
|
||||
.component;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
+ li {
|
||||
border-top: 1px solid #888;
|
||||
}
|
||||
}
|
||||
|
||||
.current { font-weight: bold; }
|
||||
}
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue