180 lines
3.2 KiB
CSS
180 lines
3.2 KiB
CSS
@keyframes sixstep-ant-march {
|
|
to {
|
|
stroke-dashoffset: -24;
|
|
}
|
|
}
|
|
|
|
.sixstep-ant-line {
|
|
stroke-dasharray: 6 6;
|
|
animation: sixstep-ant-march 0.7s linear infinite;
|
|
}
|
|
|
|
@keyframes sixstep-pulse {
|
|
0%, 100% {
|
|
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.55);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 0 8px rgba(56, 189, 248, 0);
|
|
}
|
|
}
|
|
|
|
.sixstep-pulse {
|
|
animation: sixstep-pulse 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes sixstep-shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
.sixstep-shimmer-text {
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
rgba(148, 163, 184, 0.55) 0%,
|
|
rgba(248, 250, 252, 1) 45%,
|
|
rgba(148, 163, 184, 0.55) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
animation: sixstep-shimmer 2s linear infinite;
|
|
}
|
|
|
|
.sixstep-shimmer-text-light {
|
|
background-image: linear-gradient(
|
|
90deg,
|
|
rgba(220, 38, 38, 0.45) 0%,
|
|
rgba(190, 18, 60, 0.95) 45%,
|
|
rgba(220, 38, 38, 0.45) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
animation: sixstep-shimmer 2s linear infinite;
|
|
}
|
|
|
|
@keyframes sixstep-spin-soft {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.sixstep-spin-soft {
|
|
animation: sixstep-spin-soft 1.4s linear infinite;
|
|
}
|
|
|
|
@keyframes sixstep-fade-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(6px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.sixstep-fade-up {
|
|
animation: sixstep-fade-up 0.32s ease-out both;
|
|
}
|
|
|
|
.sixstep-resize-handle {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 6px;
|
|
cursor: col-resize;
|
|
user-select: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.sixstep-resize-handle::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 2px;
|
|
height: 36px;
|
|
border-radius: 999px;
|
|
background: rgba(148, 163, 184, 0.4);
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.sixstep-resize-handle:hover::after {
|
|
background: rgba(56, 189, 248, 0.8);
|
|
}
|
|
|
|
@keyframes sixstep-node-pop {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.4);
|
|
filter: drop-shadow(0 0 0 rgba(56, 189, 248, 0));
|
|
}
|
|
60% {
|
|
opacity: 1;
|
|
transform: scale(1.18);
|
|
filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.8));
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
filter: drop-shadow(0 0 0 rgba(56, 189, 248, 0));
|
|
}
|
|
}
|
|
|
|
.sixstep-node-pop {
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
animation: sixstep-node-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
|
}
|
|
|
|
@keyframes sixstep-ring-burst {
|
|
0% {
|
|
opacity: 0.85;
|
|
r: 0;
|
|
stroke-width: 4;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
r: 60;
|
|
stroke-width: 0.5;
|
|
}
|
|
}
|
|
|
|
.sixstep-ring-burst {
|
|
animation: sixstep-ring-burst 0.7s ease-out forwards;
|
|
fill: none;
|
|
}
|
|
|
|
.sixstep-canvas-grab {
|
|
cursor: grab;
|
|
}
|
|
|
|
.sixstep-canvas-grabbing {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.sixstep-toolbar-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 8px;
|
|
transition: background 0.2s, color 0.2s;
|
|
}
|
|
|
|
.sixstep-minimap-rect {
|
|
fill: rgba(56, 189, 248, 0.18);
|
|
stroke: rgba(56, 189, 248, 0.9);
|
|
stroke-width: 1;
|
|
}
|