feature: drag support in sort panel.

This commit is contained in:
2024-05-13 16:46:55 +08:00
parent f676ec76db
commit a946012a33
14 changed files with 777 additions and 566 deletions

View File

@ -76,43 +76,47 @@
--icon-size: 16px;
>.ui-video-wrapper {
position: relative;
display: inline-block;
>.ui-video-content {
height: 100%;
>video {
width: 100%;
height: 100%;
}
>.ui-video-wrapper {
position: relative;
display: inline-block;
>.ui-video-waiting {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
display: flex;
justify-content: center;
align-items: center;
transition: opacity .2s;
>svg {
fill: #eee;
width: 30px;
height: 30px;
top: calc(50% - 15px);
left: calc(50% - 15px);
animation: spinner 1.2s infinite linear;
>video {
width: 100%;
height: 100%;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
>.ui-video-waiting {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
display: flex;
justify-content: center;
align-items: center;
transition: opacity .2s;
>svg {
fill: #eee;
width: 30px;
height: 30px;
top: calc(50% - 15px);
left: calc(50% - 15px);
animation: spinner 1.2s infinite linear;
}
100% {
transform: rotate(359deg);
@keyframes spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
}
}
@ -120,12 +124,13 @@
>.ui-video-control {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
height: 70px;
bottom: 0;
opacity: 0;
background: linear-gradient(transparent calc(100% - 100px), rgba(50, 50, 50, .7) calc(100% - 65px), #000);
background: linear-gradient(transparent, #000);
// calc(100% - 100px), rgba(50, 50, 50, .7) calc(100% - 65px)
transition: opacity .5s;
&:hover,