feat: enhance feature, node, and stat cards with new gradient backgrounds, improved hover effects, and updated transitions for a more dynamic user experience
This commit is contained in:
@@ -640,13 +640,14 @@
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--color-bg-secondary);
|
||||
background: linear-gradient(145deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 100%);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-xl);
|
||||
transition: var(--transition-smooth);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.feature-card::before {
|
||||
@@ -655,46 +656,74 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
|
||||
transform: translateX(-100%);
|
||||
transition: var(--transition-smooth);
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, transparent 50%, rgba(139, 92, 246, 0.03) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.feature-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
background: linear-gradient(135deg, var(--color-primary), #8b5cf6, var(--color-info));
|
||||
border-radius: var(--radius-xl);
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: var(--shadow-2xl);
|
||||
border-color: var(--color-primary-light);
|
||||
background: var(--color-bg-base);
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(59, 130, 246, 0.15),
|
||||
0 8px 16px rgba(0, 0, 0, 0.08);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.feature-card:hover::before {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.feature-card:hover::after {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: var(--radius-md);
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
font-size: 1.75rem;
|
||||
position: relative;
|
||||
transition: var(--transition-smooth);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
background: linear-gradient(135deg, var(--color-bg-tertiary), var(--color-bg-secondary));
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1),
|
||||
0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.feature-card:hover .feature-icon {
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
transform: scale(1.15) rotate(-5deg);
|
||||
box-shadow:
|
||||
0 8px 24px rgba(59, 130, 246, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.feature-icon svg {
|
||||
transition: var(--transition-smooth);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.feature-card:hover .feature-icon svg {
|
||||
transform: scale(1.1);
|
||||
transform: scale(1.2);
|
||||
filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3));
|
||||
}
|
||||
|
||||
.feature-icon-primary { background: rgba(59, 130, 246, 0.1); color: var(--color-primary); }
|
||||
@@ -730,15 +759,48 @@
|
||||
}
|
||||
|
||||
.node-card {
|
||||
background: var(--color-bg-base);
|
||||
background: linear-gradient(180deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 100%);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-lg);
|
||||
transition: all 0.3s ease;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.node-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--color-success), #34d399, var(--color-info));
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.node-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.node-card:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-4px);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(16, 185, 129, 0.12),
|
||||
0 8px 16px rgba(0, 0, 0, 0.06);
|
||||
border-color: rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.node-card:hover::before {
|
||||
opacity: 1;
|
||||
background: linear-gradient(90deg, var(--color-success), var(--color-primary), #8b5cf6);
|
||||
}
|
||||
|
||||
.node-header {
|
||||
@@ -982,36 +1044,61 @@
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--color-bg-secondary);
|
||||
background: linear-gradient(135deg, var(--color-bg-base) 0%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 100%);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--spacing-xl) var(--spacing-lg);
|
||||
text-align: center;
|
||||
transition: var(--transition-smooth);
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
|
||||
transform: scale(0);
|
||||
transition: transform 0.6s ease;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.05) 50%, rgba(6, 182, 212, 0.03) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.stat-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
left: -100%;
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
background: conic-gradient(from 0deg, transparent 0deg, rgba(59, 130, 246, 0.1) 90deg, transparent 180deg);
|
||||
animation: stat-rotate 8s linear infinite;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes stat-rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.stat-card:hover::before {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.stat-card:hover::after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: var(--shadow-2xl);
|
||||
border-color: var(--color-primary-light);
|
||||
transform: translateY(-12px) scale(1.03);
|
||||
box-shadow:
|
||||
0 30px 60px rgba(59, 130, 246, 0.15),
|
||||
0 15px 30px rgba(0, 0, 0, 0.08);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.stat-icon-wrapper {
|
||||
|
||||
Reference in New Issue
Block a user