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

35
app/css/player.less
View file

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