pub static AARROWDOWN_CSS: &str = r#"/* Letter "A" animation - targeting specific paths */
[data-name="AArrowDownAnimate"]:hover path[d="M3.5 13h6"],
[data-name="AArrowDownAnimate"]:hover path[d="m2 16 4.5-9 4.5 9"] {
animation: letterAnimate 0.3s ease-in-out;
}
/* Arrow animation - targeting specific paths with delay */
[data-name="AArrowDownAnimate"]:hover path[d="M18 7v9"],
[data-name="AArrowDownAnimate"]:hover path[d="m14 12 4 4 4-4"] {
animation: arrowAnimate 0.3s ease-in-out 0.2s both;
}
@keyframes letterAnimate {
0% { opacity: 0; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes arrowAnimate {
0% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 1; transform: translateY(0); }
}"#;
pub static AIRVENT_CSS: &str = r#"/* Air vent wind animation - first wind path (immediate) */
[data-name="AirVentAnimate"]:hover path[d="M18 17.5a2.5 2.5 0 1 1-4 2.03V12"] {
animation: windAnimate1 0.5s ease-in-out;
}
/* Air vent wind animation - second wind path (delayed) */
[data-name="AirVentAnimate"]:hover path[d="M6.6 15.572A2 2 0 1 0 10 17v-5"] {
animation: windAnimate2 0.5s ease-in-out 0.2s both;
}
@keyframes windAnimate1 {
0% { opacity: 0; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes windAnimate2 {
0% { opacity: 0; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}"#;
pub static ALARMCLOCK_CSS: &str = r#"/* Primary alarm clock elements - clock face circle, hands, and bottom legs */
[data-name="AlarmClockAnimate"]:hover circle[cx="12"],
[data-name="AlarmClockAnimate"]:hover path[d="M12 9v4l2 2"],
[data-name="AlarmClockAnimate"]:hover path[d="M6.38 18.7 4 21"],
[data-name="AlarmClockAnimate"]:hover path[d="M17.64 18.67 20 21"] {
animation: primaryAlarmShake 0.3s linear infinite;
}
/* Secondary alarm clock elements - top alarm bells with more intense movement */
[data-name="AlarmClockAnimate"]:hover path[d="M5 3 2 6"],
[data-name="AlarmClockAnimate"]:hover path[d="m22 6-3-3"] {
animation: secondaryAlarmShake 0.3s linear infinite;
}
@keyframes primaryAlarmShake {
0% { transform: translateX(-1px) translateY(-1.5px); }
16.67% { transform: translateX(1px) translateY(-1.5px); }
33.33% { transform: translateX(-1px) translateY(-1.5px); }
50% { transform: translateX(1px) translateY(-1.5px); }
66.67% { transform: translateX(-1px) translateY(-1.5px); }
83.33% { transform: translateX(0) translateY(-1.5px); }
100% { transform: translateX(-1px) translateY(-1.5px); }
}
@keyframes secondaryAlarmShake {
0% { transform: translateX(-2px) translateY(-2.5px); }
16.67% { transform: translateX(2px) translateY(-2.5px); }
33.33% { transform: translateX(-2px) translateY(-2.5px); }
50% { transform: translateX(2px) translateY(-2.5px); }
66.67% { transform: translateX(-2px) translateY(-2.5px); }
83.33% { transform: translateX(0) translateY(-2.5px); }
100% { transform: translateX(-2px) translateY(-2.5px); }
}"#;
pub static ALIGNCENTER_CSS: &str = r#"/* Align center animation - only the middle line wiggles to simulate alignment adjustment */
[data-name="AlignCenterAnimate"]:hover path[d="M17 12H7"] {
animation: alignCenterWiggle 1s linear;
}
@keyframes alignCenterWiggle {
0% { transform: translateX(0); }
20% { transform: translateX(3px); }
40% { transform: translateX(-3px); }
60% { transform: translateX(2px); }
80% { transform: translateX(-2px); }
100% { transform: translateX(0); }
}"#;
pub static ANGRY_CSS: &str = r#"[data-name="AngryAnimate"]:hover {
animation: wiggleZoom 0.8s ease-in-out forwards;
transform-origin: center;
}
@keyframes wiggleZoom {
0% { transform: scale(1) rotate(0deg); }
15% { transform: scale(1.1) rotate(-8deg); }
30% { transform: scale(1.1) rotate(8deg); }
45% { transform: scale(1.1) rotate(-6deg); }
60% { transform: scale(1.1) rotate(6deg); }
75% { transform: scale(1.1) rotate(-3deg); }
90% { transform: scale(1.1) rotate(3deg); }
100% { transform: scale(1.1) rotate(0deg); }
}"#;
pub static BLOCKS_CSS: &str = r#"/* Blocks Animation - Animated block moves diagonally up-left and down-right */
/* Initial state - smooth bounce back when not hovered */
[data-name="BlocksAnimate"] rect[x="14"][y="2"][width="8"][height="8"] {
animation: blockRevert 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* On hover - move to new position */
[data-name="BlocksAnimate"]:hover rect[x="14"][y="2"][width="8"][height="8"] {
animation: blockMove 0.3s ease-in-out forwards;
}
@keyframes blockMove {
0% {
transform: translateX(0) translateY(0);
}
100% {
transform: translateX(-4px) translateY(4px);
}
}
@keyframes blockRevert {
0% {
transform: translateX(-4px) translateY(4px);
}
100% {
transform: translateX(0) translateY(0);
}
}"#;
pub static CALENDARDAYS_CSS: &str = r#"/* Calendar Days Animation - Sequential opacity pulse for calendar day dots */
/* First row dots with staggered delays */
[data-name="CalendarDaysAnimate"]:hover path[d="M8 14h.01"] {
animation: dotPulse 0.4s ease-in-out 0s;
}
[data-name="CalendarDaysAnimate"]:hover path[d="M12 14h.01"] {
animation: dotPulse 0.4s ease-in-out 0.1s;
}
[data-name="CalendarDaysAnimate"]:hover path[d="M16 14h.01"] {
animation: dotPulse 0.4s ease-in-out 0.2s;
}
/* Second row dots with continued staggered delays */
[data-name="CalendarDaysAnimate"]:hover path[d="M8 18h.01"] {
animation: dotPulse 0.4s ease-in-out 0.3s;
}
[data-name="CalendarDaysAnimate"]:hover path[d="M12 18h.01"] {
animation: dotPulse 0.4s ease-in-out 0.4s;
}
[data-name="CalendarDaysAnimate"]:hover path[d="M16 18h.01"] {
animation: dotPulse 0.4s ease-in-out 0.5s;
}
@keyframes dotPulse {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}"#;
pub static COMPASS_CSS: &str = r#"/* Compass Animation - Needle Rotation Effect */
/* Base state with smooth transition for the compass needle */
[data-name="CompassAnimate"] path[d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"] {
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: center;
}
/* Hover state with 360 degree rotation for the compass needle */
[data-name="CompassAnimate"]:hover path[d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"] {
transform: rotate(360deg);
}"#;
pub static EXPAND_CSS: &str = r#"/* Expand icon - Corner arrows move outward on hover with spring-like transition */
/* Base state with spring-like transition for smooth reverse animation */
[data-name="ExpandAnimate"] path[d="m15 15 6 6"],
[data-name="ExpandAnimate"] path[d="M21 16v5h-5"] {
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-name="ExpandAnimate"] path[d="m15 9 6-6"],
[data-name="ExpandAnimate"] path[d="M21 8V3h-5"] {
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-name="ExpandAnimate"] path[d="M3 16v5h5"],
[data-name="ExpandAnimate"] path[d="m3 21 6-6"] {
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-name="ExpandAnimate"] path[d="M3 8V3h5"],
[data-name="ExpandAnimate"] path[d="M9 9 3 3"] {
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Hover states - each corner moves in its respective direction */
/* Bottom-right corner moves down and right */
[data-name="ExpandAnimate"]:hover path[d="m15 15 6 6"],
[data-name="ExpandAnimate"]:hover path[d="M21 16v5h-5"] {
transform: translate(2px, 2px);
}
/* Top-right corner moves up and right */
[data-name="ExpandAnimate"]:hover path[d="m15 9 6-6"],
[data-name="ExpandAnimate"]:hover path[d="M21 8V3h-5"] {
transform: translate(2px, -2px);
}
/* Bottom-left corner moves down and left */
[data-name="ExpandAnimate"]:hover path[d="M3 16v5h5"],
[data-name="ExpandAnimate"]:hover path[d="m3 21 6-6"] {
transform: translate(-2px, 2px);
}
/* Top-left corner moves up and left */
[data-name="ExpandAnimate"]:hover path[d="M3 8V3h5"],
[data-name="ExpandAnimate"]:hover path[d="M9 9 3 3"] {
transform: translate(-2px, -2px);
}"#;
pub static FRAME_CSS: &str = r#"/* Base state with transition for smooth animations */
[data-name="FrameAnimate"] line[y1="6"] {
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-name="FrameAnimate"] line[y1="18"] {
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-name="FrameAnimate"] line[x1="6"] {
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-name="FrameAnimate"] line[x1="18"] {
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Hover state transforms */
[data-name="FrameAnimate"]:hover line[y1="6"] {
transform: translateY(-4px);
}
[data-name="FrameAnimate"]:hover line[y1="18"] {
transform: translateY(4px);
}
[data-name="FrameAnimate"]:hover line[x1="6"] {
transform: translateX(-4px);
}
[data-name="FrameAnimate"]:hover line[x1="18"] {
transform: translateX(4px);
}"#;
pub static HEART_CSS: &str = r#"[data-name="HeartAnimate"]:hover {
animation: HeartAnimation 1.2s ease-in-out;
}
@keyframes HeartAnimation {
0% { transform: scale(1); }
14% { transform: scale(1.15); }
28% { transform: scale(1); }
42% { transform: scale(1.08); }
56% { transform: scale(1); }
100% { transform: scale(1); }
}"#;
pub static PANELLEFTOPEN_CSS: &str = r#"/* Panel Left Open Animation - Chevron slide animation */
[data-name="PanelLeftOpenAnimate"]:hover path[d="m14 9 3 3-3 3"] {
animation: chevronSlideRight 0.5s ease-in-out;
}
@keyframes chevronSlideRight {
0% { transform: translateX(0); }
40% { transform: translateX(1.5px); }
100% { transform: translateX(0); }
}"#;
pub static PLUS_CSS: &str = r#"[data-name="PlusAnimate"] {
transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[data-name="PlusAnimate"]:hover {
transform: rotate(180deg);
}"#;
pub static SEARCH_CSS: &str = r#"/* Base state with smooth transition for search movement */
[data-name="SearchAnimate"] {
transition: transform 1s cubic-bezier(0.68, -0.3, 0.32, 1.3);
transform-origin: center;
}
/* Hover state triggers search scanning animation */
[data-name="SearchAnimate"]:hover {
animation: searchScan 1s cubic-bezier(0.68, -0.3, 0.32, 1.3);
}
@keyframes searchScan {
0% { transform: translateX(0) translateY(0); }
25% { transform: translateX(0) translateY(-4px); }
50% { transform: translateX(-3px) translateY(0); }
100% { transform: translateX(0) translateY(0); }
}"#;
pub static SQUARECHEVRONRIGHT_CSS: &str = r#"/* Chevron bounce animation */
[data-name="SquareChevronRightAnimate"]:hover path[d="m10 8 4 4-4 4"] {
animation: chevronBounce 0.5s ease-in-out;
}
@keyframes chevronBounce {
0% { transform: translateX(0); }
40% { transform: translateX(2px); }
100% { transform: translateX(0); }
}"#;
pub static TORNADO_CSS: &str = r#"/* Tornado lines - sequential horizontal sway animation */
[data-name="TornadoAnimate"]:hover path[d="M21 4H3"] {
animation: tornadoSway1 0.6s ease-in-out 0.1s;
}
[data-name="TornadoAnimate"]:hover path[d="M18 8H6"] {
animation: tornadoSway2 0.6s ease-in-out 0.2s;
}
[data-name="TornadoAnimate"]:hover path[d="M19 12H9"] {
animation: tornadoSway3 0.6s ease-in-out 0.3s;
}
[data-name="TornadoAnimate"]:hover path[d="M16 16h-6"] {
animation: tornadoSway4 0.6s ease-in-out 0.4s;
}
[data-name="TornadoAnimate"]:hover path[d="M11 20H9"] {
animation: tornadoSway5 0.6s ease-in-out 0.5s;
}
@keyframes tornadoSway1 {
0% { transform: translateX(0); }
50% { transform: translateX(1px); }
100% { transform: translateX(0); }
}
@keyframes tornadoSway2 {
0% { transform: translateX(0); }
50% { transform: translateX(2px); }
100% { transform: translateX(0); }
}
@keyframes tornadoSway3 {
0% { transform: translateX(0); }
50% { transform: translateX(3px); }
100% { transform: translateX(0); }
}
@keyframes tornadoSway4 {
0% { transform: translateX(0); }
50% { transform: translateX(4px); }
100% { transform: translateX(0); }
}
@keyframes tornadoSway5 {
0% { transform: translateX(0); }
50% { transform: translateX(5px); }
100% { transform: translateX(0); }
}"#;
pub static WIND_CSS: &str = r#"/* Wind animation - path drawing with different delays */
/* Base state - all wind paths visible */
[data-name="WindAnimate"] path[d*="M12.8 19.6A2 2 0 1 0 14 16H2"],
[data-name="WindAnimate"] path[d*="M17.5 8a2.5 2.5 0 1 1 2 4H2"],
[data-name="WindAnimate"] path[d*="M9.8 4.4A2 2 0 1 1 11 8H2"] {
stroke-dasharray: 25;
stroke-dashoffset: 0;
opacity: 1;
}
/* Animation on hover - path drawing with staggered delays */
/* Path 2 (custom: 0) - no delay */
[data-name="WindAnimate"]:hover path[d*="M17.5 8a2.5 2.5 0 1 1 2 4H2"] {
animation: windPathDraw 0.5s ease-in-out both;
}
/* Path 1 (custom: 0.2) - 0.2s delay */
[data-name="WindAnimate"]:hover path[d*="M12.8 19.6A2 2 0 1 0 14 16H2"] {
animation: windPathDraw 0.5s ease-in-out 0.2s both;
}
/* Path 3 (custom: 0.4) - 0.4s delay */
[data-name="WindAnimate"]:hover path[d*="M9.8 4.4A2 2 0 1 1 11 8H2"] {
animation: windPathDraw 0.5s ease-in-out 0.4s both;
}
@keyframes windPathDraw {
0% {
opacity: 0;
stroke-dasharray: 25;
stroke-dashoffset: 25;
}
100% {
opacity: 1;
stroke-dasharray: 25;
stroke-dashoffset: 0;
}
}"#;