okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rectangular view for music video

Browse source
This commit is contained in:
vapormusic 2021-12-10 11:07:31 +07:00
parent 8e2f61ca76
commit 59850b1006
6 changed files with 182 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

93
resources/cider-ui-tests/style.less
View file

@ -679,17 +679,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
font-weight: 600;
text-align: center;
font-size: 13px;
height: 1em;
line-height: 1em;
height: 1.3em;
line-height: 1.3em;
overflow: hidden;
}
.app-chrome .app-chrome-item>.app-playback-controls .song-artist {
font-weight: 400;
font-size: 13px;
font-size: 12px;
text-align: center;
height: 1em;
line-height: 1em;
height: 1.2em;
line-height: 1.2em;
overflow: hidden;
/* animation: marquee 10s linear infinite; */
}
@ -2076,6 +2076,89 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
font-size: 12px;
}
/* mediaitem-mvview */
.cd-mediaitem-mvview {
width: 300px;
height: 250px;
display: inline-flex;
flex: 0 0 auto;
flex-direction: column;
font-size: 14px;
justify-content: flex-start;
align-items: center;
border-radius: 6px;
margin-left: 10px;
cursor: pointer;
>* {
z-index: inherit;
}
}
.cd-mediaitem-mvview .artwork {
height: 190px;
width: 300px;
background: blue;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background: var(--artwork);
background-size: cover;
flex: 0 0 auto;
margin: 6px;
margin-top: 0px;
}
.cd-mediaitem-mvview-overlay {
position: absolute;
width: 300px;
float: right;
height: 250px;
top: 0px;
margin: 10px;
margin-top: 0px;
opacity: 0;
}
.cd-mediaitem-mvview-overlay>* {
pointer-events: auto;
}
.cd-mediaitem-mvview>.cd-mediaitem-mvview-overlay {
z-index: 3;
}
.cd-mediaitem-mvview>.cd-mediaitem-mvview-overlay:hover {
opacity: 1;
}
.cd-mediaitem-mvview+.cd-mediaitem-mvview-overlay {
pointer-events: none;
}
.cd-mediaitem-mvview:hover+.cd-mediaitem-mvview-overlay {
opacity: 1;
}
.cd-mediaitem-mvview .artwork.round {
border-radius: var(--mediaItemRadiusRound);
}
.cd-mediaitem-mvview .title {
width: 90%;
text-align: center;
}
.cd-mediaitem-mvview .subtitle {
width: 100%;
text-align: center;
font-size: 12px;
}
/* mediaitem-square */
.cd-mediaitem-square {
width: 200px;