-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdraggable-elements.css
More file actions
118 lines (106 loc) · 5.36 KB
/
draggable-elements.css
File metadata and controls
118 lines (106 loc) · 5.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/* no longer needed .is-dragging::before, */ *[data-draggable=true] > .ktwp-de-effectsDiv::before {
z-index:999999;
opacity: 0;
transition: opacity .1s ease-in;
transition-delay: 0s;
content: '';
position: absolute;
top: -40%;
left: -40%;
right: -40%;
bottom: -40%;
/* background-color: rgba(255, 255, 255, 0.1); */
background-repeat: no-repeat;
background-position: center center;
background-size: clamp(60px,50%,160px); /* was "contain", but wanted it not to overwhelm big panels */
pointer-events: none;
overflow: visible;
background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path stroke=\"rgba(190,190,190,1)\" stroke-width=\".7\" fill=\"rgba(0,0,0,0.3)\" d=\"M8.326 5.327 12.03 1l3.705 4.327h-1.853v4.349h-3.705V5.326zM15.736 18.734 12.03 23.06l-3.706-4.327h1.853v-4.348h3.705v4.348zM18.734 8.325l4.327 3.706-4.327 3.705v-1.853h-4.348v-3.705h4.348zM5.327 15.736 1 12.03l4.327-3.706v1.853h4.349v3.705H5.326z\"/></svg>');
}
.ktwp-de-effectsDiv {
position:absolute !important;
left:0 !important;
top:0 !important;
bottom:0 !important;
right:0 !important;
background:transparent !important;
filter:none !important;
backdropFilter:none !important;
border-radius:inherit;}
.is-dragging > .ktwp-de-effectsDiv::before {
opacity: .5;
/* transition-delay: 0s; */
/* transition-duration: 0s; */
}
*[data-draggable="true"]:hover:not(.is-dragging):not(.ktwp-de-disablehover) > .ktwp-de-effectsDiv::before { /* not(.ktwp-de-disablehover) so don't flash the arrows while dragging */
animation: animateArrows 2s linear;
animation-delay:1.5s;
}
/* taking advantage of inheritance rules here */
*[data-draggable=true].ktwp-de-cdrag > .ktwp-de-effectsDiv::before {background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><g fill=\"rgba(0,0,0,0.3)\" stroke=\"rgba(190,190,190,1)\" stroke-width=\".7\" ><path d=\"m5.56 15.5-2.74 3.201-2.74-3.2h1.37v-3.217h2.74V15.5zM18.5 8.828l2.741-3.2 2.74 3.2h-1.37v3.216h-2.74V8.828zM.08 9.056l2.74-3.201 2.74 3.2H4.19v3.217H1.45V9.056zM23.981 15.273l-2.74 3.201-2.74-3.2h1.37v-3.217h2.74v3.216z\"/><circle cx=\"2.77\" cy=\"3.163\" r=\"1.993\"/><circle cx=\"2.77\" cy=\"21.389\" r=\"1.993\"/><circle cx=\"21.189\" cy=\"3.163\" r=\"1.993\"/><circle cx=\"21.189\" cy=\"21.389\" r=\"1.993\"/><circle cx=\"50.136\" cy=\"20.534\" r=\"0\"/><path d=\"m8.688 5.694-3.2-2.74 3.2-2.74v1.37h3.216v2.74H8.688zM15.133.214l3.2 2.74-3.2 2.74v-1.37h-3.216v-2.74h3.216zM15.133 18.634l3.2 2.74-3.2 2.741v-1.37h-3.216v-2.74h3.216zM8.688 24.115l-3.2-2.74 3.2-2.74v1.37h3.216v2.74H8.688z\"/></g></svg>');}
*[data-draggable=true].ktwp-de-hdrag > .ktwp-de-effectsDiv::before {background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path stroke=\"rgba(190,190,190,1)\" stroke-width=\".7\" fill=\"rgba(0,0,0,0.3)\" d=\"m18.734 8.325 4.327 3.706-4.327 3.705v-1.853h-4.348v-3.705h4.348zM5.327 15.736 1 12.03l4.327-3.706v1.853h4.349v3.705H5.326z\"/></svg>');}
*[data-draggable=true].ktwp-de-vdrag > .ktwp-de-effectsDiv::before {background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path stroke=\"rgba(190,190,190,1)\" stroke-width=\".7\" fill=\"rgba(0,0,0,0.3)\" d=\"M8.326 5.327 12.03 1l3.705 4.327h-1.853v4.349h-3.705V5.326zM15.736 18.734 12.03 23.06l-3.706-4.327h1.853v-4.348h3.705v4.348z\"/></svg>');}
/* DON'T NEED ANYMORE .is-dragging::after, */ *[data-draggable=true]:not(.ktwp-de-noGlow) > .ktwp-de-effectsDiv::after {
opacity: 0;
transition: opacity .1s ease-in;
transition-delay: 0s;
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
/* border: 2px dashed red; */
border-radius: inherit;
position: absolute;
/* transform: scale(0.9) translateZ(0); */
filter: blur(5px);
/*was 20, with opacity .75 */
background: linear-gradient(
to left,
red,
orange,
yellow,
green,
blue,
#8800FF,
#FF0088
);
animation-delay: 3s;
background-size: 200% 200%;
animation: animateGlow 1.25s linear infinite;
clip-path: polygon(-100% -100%, -100% 200%, -1% 200%, -1% -1%, 101% -1%, 101% 101%, -1% 101%, -1% 200%, 200% 200%, 200% -100%) ;
/* mask-image: radial-gradient(transparent 15% , #0009 100%); */ /*alternative effect */
}
*[data-draggable="true"]:not(.is-dragging):not(.ktwp-de-disablehover):hover > .ktwp-de-effectsDiv::after {
opacity: .8;
transition-delay: 2.5s;
transition-duration: 0.5s;
}
.is-dragging > .ktwp-de-effectsDiv::after {
opacity: .8;
transition-delay: 0s;
transition-duration: 0s;
}
@keyframes animateGlow {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
@keyframes animateArrows {
0%,25%,50%,75%,100% {
opacity: 0;
}
12%,37%,62%, 83% {
opacity: .98;
}
}
.is-dragging > .ktwp-de-effectsDiv {
cursor: grabbing !important;
border-width:2px; /*nah, causes content shifts on things without borders. We'll only do this if things already have a border. . */
border:inherit dashed #777 !important;
border-color:rgba(0,0,0,0) !important;/* hide borders, ::after element will draw them. this way drawing a border won't move the contents, whether or not there's already a border */
}