678 lines
21 KiB
CSS
678 lines
21 KiB
CSS
/*//////////////////////////////////////////////////////////////////////////////////////*/
|
|
/* _ _ ____ _ _ ___ ____ */
|
|
/* |_/ |__| |\ | | \ | | This file belongs to Kando, the cross-platform */
|
|
/* | \_ | | | \| |__/ |__| pie menu. Read more on github.com/kando-menu/kando */
|
|
/* */
|
|
/*//////////////////////////////////////////////////////////////////////////////////////*/
|
|
|
|
|
|
/* SPDX-FileCopyrightText: Simon Schneegans <code@simonschneegans.de> */
|
|
/* SPDX-FileCopyrightText: 2025 Rena and LCG */
|
|
/* SPDX-License-Identifier: CC0-1.0 */
|
|
|
|
/* 🧭 Navigation Theme - Modern minimalist ring navigation theme */
|
|
/* 🔧 v6.4: Simplified sector effects, removed sector-glow, retained core visuals */
|
|
|
|
/* === 🌈 New: Dual Background Layer System === */
|
|
/* 🌟 Left half screen background layer */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 50%;
|
|
height: 100%;
|
|
background: var(--background-layer-left);
|
|
pointer-events: none;
|
|
z-index: -10;
|
|
}
|
|
|
|
/* 🌟 Right half screen background layer */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 50%;
|
|
width: 50%;
|
|
height: 100%;
|
|
background: var(--background-layer-right);
|
|
pointer-events: none;
|
|
z-index: -10;
|
|
}
|
|
|
|
/* === 🎨 Canvas Gradient Background === */
|
|
#kando-menu canvas {
|
|
background: linear-gradient(135deg,
|
|
#8B5CF6 0%, /* Blue-purple */
|
|
#A855F7 20%, /* Purple */
|
|
#EC4899 40%, /* Pink */
|
|
#F97316 60%, /* Orange */
|
|
#EAB308 80%, /* Yellow */
|
|
#F59E0B 100% /* Golden yellow */
|
|
) !important;
|
|
|
|
/* Disable all transition animations */
|
|
transition: none !important;
|
|
}
|
|
|
|
/* === 🎯 Menu Container Position Control: Disable Position Movement Animation === */
|
|
/* Solution: Disable unnecessary position movement animations when returning from submenu to parent */
|
|
#kando-menu {
|
|
/* 🚫 Disable menu container position movement animation, implementing "jump" instead of "move" */
|
|
transition: none !important;
|
|
}
|
|
|
|
/* 🔧 More precise control: disable main menu node position animations */
|
|
.menu-node.active {
|
|
/* 🚫 Disable menu node position movement animation */
|
|
transition: none !important;
|
|
}
|
|
|
|
/* 🔧 Globally disable menu node transform animations (except child icons) */
|
|
.menu-node:not(.child) {
|
|
/* 🚫 Disable transform animations for non-child icons */
|
|
transition: none !important;
|
|
}
|
|
|
|
/* === 🎨 Background Color Overlay === */
|
|
#kando-menu::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--canvas-bg);
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
|
|
/* Disable all transition animations */
|
|
transition: none !important;
|
|
}
|
|
|
|
/* === 📐 Core Layout Parameters === */
|
|
.menu-node {
|
|
--child-distance: 110px; /* Ring center radius - compact for tighter icon spacing */
|
|
--child-size: 60px; /* Icon container size */
|
|
--ring-inner-radius: 70px; /* Ring inner radius - continue shrinking for thick ring */
|
|
--ring-outer-radius: 150px; /* Ring outer radius */
|
|
--ring-width: 80px; /* Ring width - continue increasing for thick ring */
|
|
--menu-transition: transform 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
|
|
/* 🚫 Default disable menu node transform animations (child icons will be overridden separately) */
|
|
transition: none !important;
|
|
}
|
|
|
|
/* === 🎯 Submenu Icon Layout === */
|
|
.menu-node.child {
|
|
/* Ring position - ensure icons are on ring centerline */
|
|
transform: translate(
|
|
calc(var(--child-distance) * var(--dir-x)),
|
|
calc(var(--child-distance) * var(--dir-y))
|
|
) !important;
|
|
|
|
/* ✅ Maintain icon expand animation (override to ensure priority) - Natural sway: like falling leaves natural sway */
|
|
transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1.2) !important;
|
|
}
|
|
|
|
/* === 🎨 Icon Layer Styles === */
|
|
.menu-node .icon-layer {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
transition: var(--menu-transition);
|
|
background: transparent;
|
|
}
|
|
|
|
/* === 🕳️ Center Area - Complete Void === */
|
|
.menu-node.active > .icon-layer {
|
|
background: transparent;
|
|
width: 0;
|
|
height: 0;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
/* === ⭕ Submenu Icon Container === */
|
|
.menu-node.child > .icon-layer {
|
|
/* 🔧 Fix 1: Precise center alignment */
|
|
top: calc(-1 * var(--child-size) / 2);
|
|
left: calc(-1 * var(--child-size) / 2);
|
|
width: var(--child-size);
|
|
height: var(--child-size);
|
|
background: transparent;
|
|
position: relative;
|
|
z-index: 10;
|
|
|
|
/* 🎯 Ensure transform center point is at geometric center */
|
|
transform-origin: center center;
|
|
}
|
|
|
|
/* === 🎯 Sector Highlight Background - 🔧 Layered Solution === */
|
|
/* 🌌 Glow layer - below sector, responsible for sector-glow effect */
|
|
.menu-node.child.hovered::after {
|
|
content: '';
|
|
position: absolute;
|
|
|
|
/* Same position and size as sector */
|
|
top: calc(-1 * var(--ring-outer-radius) - var(--child-distance) * var(--dir-y));
|
|
left: calc(-1 * var(--ring-outer-radius) - var(--child-distance) * var(--dir-x));
|
|
width: calc(var(--ring-outer-radius) * 2);
|
|
height: calc(var(--ring-outer-radius) * 2);
|
|
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
|
|
/* 🌟 Glow layer has removed sector-glow effect */
|
|
/* Preserve basic structure for future expansion */
|
|
opacity: 0;
|
|
|
|
z-index: 4; /* Below sector */
|
|
pointer-events: none;
|
|
transform-origin: center;
|
|
transition: opacity 200ms ease-out;
|
|
|
|
/* Use same mask to cut into sector shape, but glow will overflow */
|
|
mask:
|
|
radial-gradient(circle at center, transparent calc(var(--ring-inner-radius) - 1px), black var(--ring-inner-radius)),
|
|
conic-gradient(from calc(var(--angle) - 22.5deg), black 0deg, black 45deg, transparent 45deg);
|
|
mask-composite: intersect;
|
|
-webkit-mask:
|
|
radial-gradient(circle at center, transparent calc(var(--ring-inner-radius) - 1px), black var(--ring-inner-radius)),
|
|
conic-gradient(from calc(var(--angle) - 22.5deg), black 0deg, black 45deg, transparent 45deg);
|
|
-webkit-mask-composite: source-in;
|
|
}
|
|
|
|
/* 🎯 Sector main body - responsible for precise sector shape and background color */
|
|
.menu-node.child.hovered::before {
|
|
content: '';
|
|
position: absolute;
|
|
|
|
/* 🔧 Key fix: correctly calculate sector position, ensure concentric with ring */
|
|
/* From each child position, offset back to menu center, then position sector */
|
|
top: calc(-1 * var(--ring-outer-radius) - var(--child-distance) * var(--dir-y));
|
|
left: calc(-1 * var(--ring-outer-radius) - var(--child-distance) * var(--dir-x));
|
|
|
|
width: calc(var(--ring-outer-radius) * 2);
|
|
height: calc(var(--ring-outer-radius) * 2);
|
|
|
|
/* 🌨️ Sector background and inner glow effect */
|
|
background: var(--sector-highlight);
|
|
|
|
/* 🌟 Only preserve inner glow, outer glow handled by ::after layer */
|
|
box-shadow:
|
|
/* Inner glow - using sector-inner-glow */
|
|
inset 0 0 15px var(--sector-inner-glow),
|
|
inset 0 0 30px var(--sector-inner-glow),
|
|
inset 0 0 45px var(--sector-inner-glow),
|
|
inset 0 0 60px var(--sector-inner-glow),
|
|
inset 0 0 75px var(--sector-inner-glow);
|
|
|
|
border-radius: 50%;
|
|
z-index: 5; /* 🔧 Restore normal level, sector-glow verified effective */
|
|
pointer-events: none;
|
|
|
|
/* Transform center point */
|
|
transform-origin: center;
|
|
|
|
/* Add animation transition - modified to 200ms sync */
|
|
transition: opacity 200ms ease-out;
|
|
|
|
/* Create sector: use mask to hollow inner circle and limit angle - ✅ Sector main body restore mask */
|
|
mask:
|
|
/* Outer circle - precisely match ring inner radius, no gap */
|
|
radial-gradient(circle at center, transparent calc(var(--ring-inner-radius) - 1px), black var(--ring-inner-radius)),
|
|
/* Sector angle limit - solid sector */
|
|
conic-gradient(from calc(var(--angle) - 22.5deg), black 0deg, black 45deg, transparent 45deg);
|
|
mask-composite: intersect;
|
|
-webkit-mask:
|
|
radial-gradient(circle at center, transparent calc(var(--ring-inner-radius) - 1px), black var(--ring-inner-radius)),
|
|
conic-gradient(from calc(var(--angle) - 22.5deg), black 0deg, black 45deg, transparent 45deg);
|
|
-webkit-mask-composite: source-in;
|
|
}
|
|
|
|
/* 🌟 Enhanced glow effect on hover - precise control version */
|
|
.menu-node.child.hovered:hover::before {
|
|
/* Enhanced glow on hover, expand inner glow range to middle position */
|
|
box-shadow:
|
|
/* Enhanced inner glow - sector-inner-glow, greatly expanded range */
|
|
inset 0 0 12px var(--sector-inner-glow),
|
|
inset 0 0 24px var(--sector-inner-glow),
|
|
inset 0 0 36px var(--sector-inner-glow),
|
|
inset 0 0 48px var(--sector-inner-glow),
|
|
inset 0 0 60px var(--sector-inner-glow),
|
|
inset 0 0 72px var(--sector-inner-glow),
|
|
inset 0 0 84px var(--sector-inner-glow);
|
|
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* 🚑 Fix: immediately hide sector highlight when not hovering */
|
|
.menu-node.child:not(.hovered)::before {
|
|
display: none !important;
|
|
}
|
|
|
|
/* === 🔵 Ring Background - 🌟 Add Multi-layer Glow Effects === */
|
|
.menu-node.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
|
|
/* 🔧 Fix 4: Ring position precisely centered */
|
|
top: calc(-1 * var(--ring-outer-radius));
|
|
left: calc(-1 * var(--ring-outer-radius));
|
|
width: calc(var(--ring-outer-radius) * 2);
|
|
height: calc(var(--ring-outer-radius) * 2);
|
|
|
|
border-radius: 50%;
|
|
background: var(--ring-color);
|
|
|
|
/* 🌟 Ring inner glow effect (only preserve inset) */
|
|
box-shadow:
|
|
/* Inner glow - soft glow along ring inner edge */
|
|
inset 0 0 8px var(--ring-glow-inner),
|
|
inset 0 0 16px var(--ring-glow-inner),
|
|
inset 0 0 24px var(--ring-glow-inner);
|
|
|
|
z-index: -2; /* Ensure ring body is below icons */
|
|
pointer-events: none;
|
|
|
|
/* ✅ Enable ring body ripple effect - expanding from center outward */
|
|
transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
|
|
animation: ring-ripple-expand 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
|
|
|
|
/* 🔧 Fix 5: Ensure transform center point is precisely centered */
|
|
transform-origin: 50% 50%;
|
|
|
|
/* Use mask to hollow inner circle creating ring */
|
|
mask: radial-gradient(circle at center, transparent var(--ring-inner-radius), black calc(var(--ring-inner-radius) + 1px));
|
|
-webkit-mask: radial-gradient(circle at center, transparent var(--ring-inner-radius), black calc(var(--ring-inner-radius) + 1px));
|
|
}
|
|
|
|
/* 🌟 Ring outer glow effect - separate element to avoid mask interference */
|
|
.menu-node.active::before {
|
|
content: '';
|
|
position: absolute;
|
|
|
|
/* Same position and size as ring */
|
|
top: calc(-1 * var(--ring-outer-radius));
|
|
left: calc(-1 * var(--ring-outer-radius));
|
|
width: calc(var(--ring-outer-radius) * 2);
|
|
height: calc(var(--ring-outer-radius) * 2);
|
|
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
|
|
/* 🌟 Main glow and outer diffuse glow - not affected by mask */
|
|
box-shadow:
|
|
/* Main glow - primary glow effect around ring */
|
|
0 0 6px var(--ring-glow),
|
|
0 0 12px var(--ring-glow),
|
|
0 0 18px var(--ring-glow),
|
|
0 0 24px var(--ring-glow),
|
|
|
|
/* Outer diffuse glow - greatly enhanced visibility */
|
|
0 0 40px var(--ring-glow-outer),
|
|
0 0 60px var(--ring-glow-outer),
|
|
0 0 80px var(--ring-glow-outer),
|
|
0 0 120px var(--ring-glow-outer);
|
|
|
|
z-index: -3; /* Below ring body */
|
|
pointer-events: none;
|
|
|
|
/* ✅ Ring outer glow ripple effect animation - synchronized expansion with ring body */
|
|
transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
|
opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
|
box-shadow 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
|
|
animation: ring-ripple-glow-expand 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
|
|
|
|
transform-origin: 50% 50%;
|
|
}
|
|
|
|
/* 🍳 Ring inner hole glow effect - new element */
|
|
.menu-node.active > .icon-layer::before {
|
|
content: '';
|
|
position: absolute;
|
|
|
|
/* Inner hole position and size */
|
|
top: calc(-1 * var(--ring-inner-radius));
|
|
left: calc(-1 * var(--ring-inner-radius));
|
|
width: calc(var(--ring-inner-radius) * 2);
|
|
height: calc(var(--ring-inner-radius) * 2);
|
|
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
|
|
/* 🌟 Ring inner hole multi-layer glow effect - converging toward center */
|
|
box-shadow:
|
|
/* Inner glow - main effect converging from edge to center */
|
|
inset 0 0 8px var(--ring-inner-hole-glow),
|
|
inset 0 0 16px var(--ring-inner-hole-glow),
|
|
inset 0 0 24px var(--ring-inner-hole-glow),
|
|
inset 0 0 32px var(--ring-inner-hole-glow),
|
|
|
|
/* Inner glow depth enhancement - enhance center convergence effect */
|
|
inset 0 0 40px var(--ring-inner-hole-glow-inner),
|
|
inset 0 0 50px var(--ring-inner-hole-glow-inner),
|
|
inset 0 0 60px var(--ring-inner-hole-glow-inner),
|
|
|
|
/* Slight outer boundary glow - only at edge position */
|
|
0 0 4px var(--ring-inner-hole-glow-outer),
|
|
0 0 8px var(--ring-inner-hole-glow-outer);
|
|
|
|
z-index: -1; /* Below center text, but above ring */
|
|
pointer-events: none;
|
|
|
|
/* ✅ Ring inner hole glow ripple effect animation - synchronized expansion with ring body */
|
|
transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
|
|
animation: ring-ripple-inner-glow 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
|
|
|
|
transform-origin: 50% 50%;
|
|
}
|
|
|
|
/* === 🎯 Add Parent Direction Indicator on Ring - 🔧 v3.3 Fixed Version: Strictly Limit Display Range === */
|
|
/* Only display parent direction indicator on non-root menu main containers, not on child icons */
|
|
/* 🔧 Key fix: use more precise selector to avoid display in submenus */
|
|
.menu-node.active:not(.level-0):not(.child) > .icon-layer::after {
|
|
content: '';
|
|
position: absolute;
|
|
|
|
/* 🔧 Simplified positioning logic, use fixed position */
|
|
top: calc(-1 * var(--child-distance) - 8px);
|
|
left: calc(-8px);
|
|
|
|
/* 📝 Simple arrow design: CSS-drawn arrow pointing to parent */
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 8px solid transparent;
|
|
border-right: 8px solid transparent;
|
|
border-bottom: 12px solid var(--parent-indicator-color);
|
|
|
|
/* Arrow glow effect */
|
|
filter: drop-shadow(0 0 4px var(--parent-indicator-glow))
|
|
drop-shadow(0 0 8px var(--parent-indicator-glow));
|
|
|
|
/* Animation effect */
|
|
transition: var(--menu-transition);
|
|
z-index: 25;
|
|
pointer-events: none;
|
|
|
|
/* 🔧 Ensure arrow transform center point is correct */
|
|
transform-origin: 8px calc(var(--child-distance) + 8px);
|
|
|
|
/* 🎯 Key: rotate arrow to point to parent direction */
|
|
transform: rotate(calc(var(--angle, 0deg) + 180deg));
|
|
}
|
|
|
|
/* Enhanced effect on hover */
|
|
.menu-node.active:not(.level-0):not(.child):hover > .icon-layer::after {
|
|
border-bottom-color: var(--parent-indicator-color);
|
|
filter: drop-shadow(0 0 6px var(--parent-indicator-glow))
|
|
drop-shadow(0 0 12px var(--parent-indicator-glow))
|
|
drop-shadow(0 0 18px var(--parent-indicator-glow));
|
|
transform: rotate(calc(var(--angle, 0deg) + 180deg)) scale(1.2);
|
|
}
|
|
|
|
/* === 🎨 Icon Styles === */
|
|
.menu-node .icon-container {
|
|
position: relative;
|
|
|
|
/* 🔧 Fix 6: Icon container precisely centered */
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--icon-color);
|
|
font-size: 32px;
|
|
opacity: 1;
|
|
transition: all 200ms ease-out;
|
|
z-index: 15;
|
|
|
|
/* 🌟 Icon basic glow effect */
|
|
filter:
|
|
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
|
|
drop-shadow(0 0 4px var(--icon-glow))
|
|
drop-shadow(0 0 8px var(--icon-glow))
|
|
drop-shadow(0 0 12px var(--icon-glow-outer));
|
|
|
|
/* 🎯 Ensure icon transform center point is at geometric center */
|
|
transform-origin: center center;
|
|
}
|
|
|
|
/* 🚑 Fix icon glow issue during expansion - prevent sector color during expansion, but preserve beautiful glow */
|
|
.menu-node.child .icon-container {
|
|
/* Default state: complete glow effect, but no sector color */
|
|
filter:
|
|
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
|
|
drop-shadow(0 0 4px var(--icon-glow))
|
|
drop-shadow(0 0 8px var(--icon-glow))
|
|
drop-shadow(0 0 12px var(--icon-glow-outer)) !important;
|
|
color: var(--icon-color) !important;
|
|
}
|
|
|
|
/* ✅ Final version Kando hover effect - using .hovered class */
|
|
.menu-node.child.hovered .icon-container {
|
|
transform: scale(1.2) !important;
|
|
color: var(--icon-hover-color) !important; /* ✅ Fully effective: using Kando native hover mechanism */
|
|
|
|
/* Enhanced glow effect on hover */
|
|
filter:
|
|
drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7))
|
|
drop-shadow(0 0 6px var(--icon-glow))
|
|
drop-shadow(0 0 12px var(--icon-glow))
|
|
drop-shadow(0 0 18px var(--icon-glow))
|
|
drop-shadow(0 0 24px var(--icon-glow-outer))
|
|
drop-shadow(0 0 32px var(--icon-glow-outer)) !important;
|
|
}
|
|
|
|
/* 🚑 Final protection strategy: only limit glow, don't interfere with color and transform */
|
|
.menu-node.child.hovered:not(:hover) .icon-container {
|
|
/* When Kando adds .hovered class but mouse is not truly hovering, only limit complex glow effects */
|
|
filter:
|
|
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
|
|
drop-shadow(0 0 4px var(--icon-glow))
|
|
drop-shadow(0 0 8px var(--icon-glow)) !important;
|
|
/* ✅ No longer force override color and transform, allow .hovered effect to work normally */
|
|
}
|
|
|
|
/* === 🔤 Center Text Minimal Configuration for Kando 2.0 === */
|
|
.center-text {
|
|
/* 🎯 Only essential visual properties - let Kando 2.0 handle all sizing and layout */
|
|
color: var(--text-color);
|
|
|
|
/* 🌟 Center text glow effect - preserved visual identity */
|
|
text-shadow:
|
|
0 1px 2px rgba(0, 0, 0, 0.5),
|
|
0 0 4px var(--text-glow),
|
|
0 0 8px var(--text-glow),
|
|
0 0 12px var(--text-glow),
|
|
0 0 16px var(--text-glow-outer),
|
|
0 0 24px var(--text-glow-outer);
|
|
|
|
/* 🎯 Keep z-index for layering */
|
|
z-index: 20;
|
|
}
|
|
|
|
/* === 🔗 Connector Control: Completely Hide Connectors === */
|
|
/* Default hide all connectors */
|
|
.connector {
|
|
opacity: 0 !important;
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide hovered item connectors */
|
|
.menu-node.child.hovered .connector {
|
|
opacity: 0 !important;
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hide connectors pointing to hovered icon direction (green) */
|
|
.menu-node.active:not(.child) .connector {
|
|
opacity: 0 !important;
|
|
display: none !important;
|
|
}
|
|
|
|
/* Also hide parent connectors */
|
|
.menu-node.parent .connector {
|
|
opacity: 0 !important;
|
|
display: none !important;
|
|
}
|
|
|
|
/* === 🎭 Hide Grandchild Menus === */
|
|
.menu-node.grandchild {
|
|
opacity: 0 !important;
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
/* === 🌿 Ring Natural Sway Animation Definitions === */
|
|
/* Ring body natural sway - synchronized with icons */
|
|
@keyframes ring-natural-sway {
|
|
0% {
|
|
transform: scale(0.85) rotate(-2deg);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: scale(1.02) rotate(1deg);
|
|
opacity: 0.7;
|
|
}
|
|
80% {
|
|
transform: scale(0.99) rotate(-0.5deg);
|
|
opacity: 0.9;
|
|
}
|
|
100% {
|
|
transform: scale(1) rotate(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* === 🌊 Ring Ripple Effect Animation Definitions === */
|
|
/* Ring body ripple expansion - like water ripples expanding from center outward */
|
|
@keyframes ring-ripple-expand {
|
|
0% {
|
|
transform: scale(0.5);
|
|
opacity: 0;
|
|
}
|
|
30% {
|
|
transform: scale(0.8);
|
|
opacity: 0.5;
|
|
}
|
|
60% {
|
|
transform: scale(1.03);
|
|
opacity: 0.8;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Ring outer glow synchronized animation */
|
|
@keyframes ring-outer-glow-sync {
|
|
0% {
|
|
transform: scale(0.9);
|
|
opacity: 0;
|
|
}
|
|
60% {
|
|
transform: scale(1.05);
|
|
opacity: 0.8;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Ring outer glow ripple expansion animation - synchronized expansion with main body */
|
|
@keyframes ring-ripple-glow-expand {
|
|
0% {
|
|
transform: scale(0.6);
|
|
opacity: 0;
|
|
box-shadow:
|
|
0 0 0px var(--ring-glow),
|
|
0 0 0px var(--ring-glow-outer);
|
|
}
|
|
25% {
|
|
transform: scale(0.85);
|
|
opacity: 0.3;
|
|
box-shadow:
|
|
0 0 4px var(--ring-glow),
|
|
0 0 8px var(--ring-glow),
|
|
0 0 16px var(--ring-glow-outer),
|
|
0 0 32px var(--ring-glow-outer);
|
|
}
|
|
50% {
|
|
transform: scale(1.02);
|
|
opacity: 0.6;
|
|
box-shadow:
|
|
0 0 8px var(--ring-glow),
|
|
0 0 16px var(--ring-glow),
|
|
0 0 24px var(--ring-glow),
|
|
0 0 40px var(--ring-glow-outer),
|
|
0 0 60px var(--ring-glow-outer),
|
|
0 0 80px var(--ring-glow-outer);
|
|
}
|
|
80% {
|
|
transform: scale(1.05);
|
|
opacity: 0.9;
|
|
box-shadow:
|
|
0 0 10px var(--ring-glow),
|
|
0 0 20px var(--ring-glow),
|
|
0 0 30px var(--ring-glow),
|
|
0 0 40px var(--ring-glow),
|
|
0 0 50px var(--ring-glow-outer),
|
|
0 0 70px var(--ring-glow-outer),
|
|
0 0 100px var(--ring-glow-outer),
|
|
0 0 140px var(--ring-glow-outer);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
box-shadow:
|
|
0 0 6px var(--ring-glow),
|
|
0 0 12px var(--ring-glow),
|
|
0 0 18px var(--ring-glow),
|
|
0 0 24px var(--ring-glow),
|
|
0 0 40px var(--ring-glow-outer),
|
|
0 0 60px var(--ring-glow-outer),
|
|
0 0 80px var(--ring-glow-outer),
|
|
0 0 120px var(--ring-glow-outer);
|
|
}
|
|
}
|
|
|
|
/* Ring inner hole glow ripple animation - converging from outside to inside */
|
|
@keyframes ring-ripple-inner-glow {
|
|
0% {
|
|
transform: scale(0.7);
|
|
opacity: 0;
|
|
}
|
|
40% {
|
|
transform: scale(0.92);
|
|
opacity: 0.4;
|
|
}
|
|
70% {
|
|
transform: scale(1.04);
|
|
opacity: 0.8;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Ring inner hole glow synchronized animation */
|
|
@keyframes ring-inner-hole-glow-sync {
|
|
0% {
|
|
transform: scale(0.88);
|
|
opacity: 0;
|
|
}
|
|
55% {
|
|
transform: scale(1.03);
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|