cyp/app/css/player.less

85 lines
1.1 KiB
Text
Raw Normal View History

2019-03-21 17:32:58 +08:00
#player {
2019-04-03 01:19:46 +08:00
.flex-row;
2019-04-12 19:34:28 +08:00
align-items: stretch;
2019-03-29 05:52:57 +08:00
&:not([data-state=play]) .pause { display: none; }
&[data-state=play] .play { display: none; }
&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }
2019-03-21 17:32:58 +08:00
2019-04-01 04:02:26 +08:00
.art {
2019-04-09 22:08:09 +08:00
@size: 96px;
height: @size;
img, .icon {
width: @size;
}
2019-04-01 04:02:26 +08:00
}
h2 {
font-size: 125%;
2019-04-10 20:37:02 +08:00
margin: 0;
2019-04-01 04:02:26 +08:00
}
2019-03-28 22:23:28 +08:00
.info {
flex-grow: 1;
2019-04-10 20:37:02 +08:00
2019-03-28 22:23:28 +08:00
overflow: hidden;
2019-04-10 20:37:02 +08:00
.flex-column;
2019-04-12 19:34:28 +08:00
justify-content: space-around;
2019-03-28 22:23:28 +08:00
}
2019-03-22 22:35:04 +08:00
2019-04-01 04:02:26 +08:00
.title, .subtitle { .long-line; }
2019-04-12 19:34:28 +08:00
[type=range] { margin: 0; }
2019-04-11 19:34:24 +08:00
.timeline {
.flex-row;
.duration, .elapsed {
flex-basis: 5ch;
2019-04-12 19:34:28 +08:00
text-align: center;
2019-04-11 19:34:24 +08:00
}
2019-04-12 19:34:28 +08:00
[type=range] {
2019-04-11 19:34:24 +08:00
flex-grow: 1;
}
2019-04-10 20:37:02 +08:00
}
2019-03-29 05:52:57 +08:00
.controls {
2019-04-11 19:34:24 +08:00
.flex-column;
2019-04-12 19:34:28 +08:00
justify-content: space-around;
2019-04-11 19:34:24 +08:00
.playback {
.flex-row;
justify-content: space-around;
.icon {
width: 32px;
}
.icon-play, .icon-pause {
width: 48px;
}
}
.volume {
.flex-row;
2019-04-12 19:34:28 +08:00
.mute {
2019-04-11 19:34:24 +08:00
margin-right: 4px;
}
2019-04-12 19:34:28 +08:00
[type=range] {
width: 132px;
2019-04-11 19:34:24 +08:00
}
2019-04-01 04:02:26 +08:00
}
2019-03-26 22:40:23 +08:00
}
2019-03-27 00:07:52 +08:00
.misc {
display: flex;
flex-direction: column;
2019-04-01 04:02:26 +08:00
align-self: stretch;
justify-content: space-around;
.icon { width: 32px; }
2019-03-27 00:07:52 +08:00
}
2019-04-09 22:08:09 +08:00
}