Jerry/cyp
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

respo styling

Browse source
This commit is contained in:
Ondrej Zara 2019-04-15 16:00:59 +02:00
parent a6da50e9c9
commit d2c157bb8f
2 changed files with 22 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/app.css
View file

@ -150,7 +150,8 @@ nav ul li.active {
}
#player [type=range] {
margin: 0;
min-width: 0;
width: 0;
flex-grow: 1;
}
#player .art {
margin-right: 0;
@ -161,7 +162,8 @@ nav ul li.active {
width: 96px;
}
#player .info {
flex-grow: 1;
flex-grow: 2;
flex-basis: 0;
padding-left: var(--icon-spacing);
overflow: hidden;
display: flex;
@ -188,10 +190,10 @@ nav ul li.active {
flex-basis: 5ch;
text-align: center;
}
#player .timeline [type=range] {
flex-grow: 1;
}
#player .controls {
flex-grow: 1;
flex-basis: 0;
max-width: 220px;
display: flex;
flex-direction: column;
justify-content: space-around;
@ -217,9 +219,6 @@ nav ul li.active {
#player .controls .volume .mute {
margin-right: 4px;
}
#player .controls .volume [type=range] {
width: 132px;
}
#player .misc {
display: flex;
flex-direction: column;
@ -236,6 +235,7 @@ nav ul li.active {
}
#player .info {
order: 1;
flex-basis: 100%;
height: 96px;
}
}

33
app/css/player.less
View file

@ -9,7 +9,8 @@
[type=range] {
margin: 0;
min-width: 0; // fails to shrink otherwise
width: 0; // fails to shrink otherwise
flex-grow: 1;
}
.art {
@ -21,10 +22,11 @@
}
.info {
flex-grow: 1;
flex-grow: 2;
flex-basis: 0;
padding-left: var(--icon-spacing);
overflow: hidden;
.flex-column;
justify-content: space-around;
@ -43,13 +45,13 @@
flex-basis: 5ch;
text-align: center;
}
[type=range] {
flex-grow: 1;
}
}
.controls {
flex-grow: 1;
flex-basis: 0;
max-width: 220px;
.flex-column;
justify-content: space-around;
@ -57,25 +59,15 @@
.flex-row;
justify-content: space-around;
.icon {
width: 40px;
}
.icon { width: 40px; }
.icon-play, .icon-pause {
width: 64px;
}
.icon-play, .icon-pause { width: 64px; }
}
.volume {
.flex-row;
.mute {
margin-right: 4px;
}
[type=range] {
width: 132px;
}
.mute { margin-right: 4px; }
}
}
@ -93,6 +85,7 @@
.info {
order: 1;
flex-basis: 100%;
height: @art-size;
}
}