cyp/app/css/elements/player.less

97 lines
1.4 KiB
Text
Raw Normal View History

2020-03-09 05:11:46 +08:00
cyp-player {
2019-04-15 15:48:27 +08:00
@art-size: 96px;
2020-03-15 05:11:14 +08:00
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-26 19:48:23 +08:00
x-range {
2020-03-15 05:11:14 +08:00
flex: auto;
2019-04-26 19:48:23 +08:00
--elapsed-color: var(--primary);
2019-04-15 15:48:27 +08:00
}
2019-04-01 04:02:26 +08:00
.art {
2020-03-17 18:02:38 +08:00
flex: none;
2020-03-15 05:45:07 +08:00
width: @art-size;
2019-04-15 15:48:27 +08:00
height: @art-size;
2019-04-01 04:02:26 +08:00
}
2019-04-15 22:00:59 +08:00
.info {
2020-03-15 05:11:14 +08:00
flex: auto;
min-width: 0;
2019-04-15 22:00:59 +08:00
2019-04-10 20:37:02 +08:00
.flex-column;
2020-03-15 05:11:14 +08:00
justify-content: space-between;
2019-03-22 22:35:04 +08:00
2020-03-15 05:11:14 +08:00
padding: 0 var(--icon-spacing);
2019-04-01 04:02:26 +08:00
2020-03-15 05:11:14 +08:00
.title {
margin-top: 8px;
.font-large;
font-weight: bold;
}
2020-03-10 22:25:43 +08:00
.title, .subtitle { .ellipsis; }
2019-04-15 15:13:39 +08:00
}
2020-03-09 05:11:46 +08:00
2019-04-11 19:34:24 +08:00
.timeline {
2020-03-15 05:11:14 +08:00
flex: none;
2020-03-17 05:57:13 +08:00
height: var(--icon-size);
2020-03-15 05:11:14 +08:00
margin-bottom: 4px;
2019-04-11 19:34:24 +08:00
.flex-row;
.duration, .elapsed {
2020-03-15 05:11:14 +08:00
flex: none;
width: 5ch;
2019-04-12 19:34:28 +08:00
text-align: center;
2019-04-11 19:34:24 +08:00
}
2019-04-10 20:37:02 +08:00
}
2019-03-29 05:52:57 +08:00
.controls {
2020-03-15 05:11:14 +08:00
width: 220px;
min-width: 0;
2019-04-15 22:00:59 +08:00
2019-04-11 19:34:24 +08:00
.flex-column;
.playback {
2020-03-15 05:11:14 +08:00
flex: auto;
2019-04-11 19:34:24 +08:00
.flex-row;
justify-content: space-around;
2019-04-15 22:00:59 +08:00
.icon { width: 40px; }
.icon-play, .icon-pause { width: 64px; }
2019-04-11 19:34:24 +08:00
}
.volume {
2020-03-15 05:11:14 +08:00
flex: none;
margin-bottom: 4px;
2019-04-11 19:34:24 +08:00
2020-03-15 05:11:14 +08:00
.flex-row;
.mute { margin-right: var(--icon-spacing); }
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 {
2020-03-15 05:11:14 +08:00
flex: none;
.flex-column;
2019-04-01 04:02:26 +08:00
justify-content: space-around;
2020-03-15 05:11:14 +08:00
2019-04-01 04:02:26 +08:00
.icon { width: 32px; }
2019-03-27 00:07:52 +08:00
}
2019-04-15 15:13:39 +08:00
@media (max-width: 519px) {
flex-wrap: wrap;
justify-content: space-between;
.info {
order: 1;
2019-04-15 22:00:59 +08:00
flex-basis: 100%;
2019-04-15 15:48:27 +08:00
height: @art-size;
2019-04-15 15:13:39 +08:00
}
}
2019-04-09 22:08:09 +08:00
}