Apply glass morphism and Bento grid to admin and board dashboards
Build And Push Image / docker (push) Failing after 1m1s
Details
Build And Push Image / docker (push) Failing after 1m1s
Details
- Implemented enhanced glass morphism effects with 30px blur - Added Bento grid layout system (12-column grid) - Created gradient text effects for dashboard titles - Added animated entrance effects for all cards - Implemented stat cards with gradient values - Added responsive breakpoints for mobile/tablet - Unified button styles with hover animations - Removed basic elevation cards in favor of glass cards
This commit is contained in:
parent
7685cd130f
commit
ae18ce1786
|
|
@ -1,20 +1,20 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="mb-6">
|
||||
<h1 class="text-h4 font-weight-bold mb-2">System Administration</h1>
|
||||
<p class="text-body-1 text-medium-emphasis">Complete platform control and management</p>
|
||||
<div class="admin-dashboard">
|
||||
<!-- Enhanced Header with Glass Effect -->
|
||||
<div class="dashboard-header glass-header mb-6">
|
||||
<h1 class="dashboard-title text-gradient">System Administration</h1>
|
||||
<p class="dashboard-subtitle">Complete platform control and management</p>
|
||||
</div>
|
||||
|
||||
<!-- System Overview Cards -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card elevation="2">
|
||||
<!-- Bento Grid Layout with Glass Cards -->
|
||||
<div class="bento-grid mb-6">
|
||||
<div class="bento-item bento-item--small">
|
||||
<v-card class="glass-card stat-card animated-entrance">
|
||||
<v-card-text>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<div>
|
||||
<div class="text-caption text-medium-emphasis">Total Members</div>
|
||||
<div class="text-h5 font-weight-bold">1,247</div>
|
||||
<div class="stat-value">1,247</div>
|
||||
<div class="text-caption">
|
||||
<v-icon size="x-small" color="success">mdi-trending-up</v-icon>
|
||||
<span class="text-success">+12%</span> this month
|
||||
|
|
@ -26,14 +26,14 @@
|
|||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card elevation="2">
|
||||
</div>
|
||||
<div class="bento-item bento-item--small">
|
||||
<v-card class="glass-card stat-card animated-entrance" style="animation-delay: 0.1s;">
|
||||
<v-card-text>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<div>
|
||||
<div class="text-caption text-medium-emphasis">Active Sessions</div>
|
||||
<div class="text-h5 font-weight-bold">342</div>
|
||||
<div class="stat-value">342</div>
|
||||
<div class="text-caption">
|
||||
<v-icon size="x-small">mdi-circle</v-icon>
|
||||
<span>Live now</span>
|
||||
|
|
@ -45,14 +45,14 @@
|
|||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card elevation="2">
|
||||
</div>
|
||||
<div class="bento-item bento-item--small">
|
||||
<v-card class="glass-card stat-card animated-entrance" style="animation-delay: 0.2s;">
|
||||
<v-card-text>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<div>
|
||||
<div class="text-caption text-medium-emphasis">Revenue MTD</div>
|
||||
<div class="text-h5 font-weight-bold">$48,392</div>
|
||||
<div class="stat-value">$48,392</div>
|
||||
<div class="text-caption">
|
||||
<v-icon size="x-small" color="success">mdi-trending-up</v-icon>
|
||||
<span class="text-success">+8%</span> vs last month
|
||||
|
|
@ -64,14 +64,14 @@
|
|||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" md="3">
|
||||
<v-card elevation="2">
|
||||
</div>
|
||||
<div class="bento-item bento-item--small">
|
||||
<v-card class="glass-card stat-card animated-entrance" style="animation-delay: 0.3s;">
|
||||
<v-card-text>
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<div>
|
||||
<div class="text-caption text-medium-emphasis">System Health</div>
|
||||
<div class="text-h5 font-weight-bold">98.5%</div>
|
||||
<div class="stat-value">98.5%</div>
|
||||
<div class="text-caption">
|
||||
<v-icon size="x-small" color="success">mdi-check-circle</v-icon>
|
||||
<span class="text-success">All systems operational</span>
|
||||
|
|
@ -83,13 +83,13 @@
|
|||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Management -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-card elevation="2">
|
||||
<!-- User Management Section -->
|
||||
<div class="bento-grid mb-6">
|
||||
<div class="bento-item bento-item--full">
|
||||
<v-card class="glass-card animated-entrance" style="animation-delay: 0.4s;">
|
||||
<v-card-title>
|
||||
<v-icon left>mdi-account-group</v-icon>
|
||||
User Management
|
||||
|
|
@ -151,26 +151,28 @@
|
|||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Dues Management -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12">
|
||||
<div class="bento-grid mb-6">
|
||||
<div class="bento-item bento-item--full">
|
||||
<BoardDuesManagement
|
||||
:refresh-trigger="duesRefreshTrigger"
|
||||
@view-member="handleViewMember"
|
||||
@view-all-members="navigateToMembers"
|
||||
@member-updated="handleMemberUpdated"
|
||||
class="animated-entrance"
|
||||
style="animation-delay: 0.5s;"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Portal Configuration -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-card elevation="2">
|
||||
<div class="bento-grid mb-6">
|
||||
<div class="bento-item bento-item--full">
|
||||
<v-card class="glass-card animated-entrance" style="animation-delay: 0.6s;">
|
||||
<v-card-title>
|
||||
<v-icon left>mdi-cog</v-icon>
|
||||
Portal Configuration
|
||||
|
|
@ -222,13 +224,13 @@
|
|||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Data Management -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12">
|
||||
<v-card elevation="2">
|
||||
<div class="bento-grid mb-6">
|
||||
<div class="bento-item bento-item--full">
|
||||
<v-card class="glass-card animated-entrance" style="animation-delay: 0.7s;">
|
||||
<v-card-title>
|
||||
<v-icon left>mdi-database-cog</v-icon>
|
||||
Data Management
|
||||
|
|
@ -273,8 +275,8 @@
|
|||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- NocoDB Settings Dialog -->
|
||||
<NocoDBSettingsDialog
|
||||
|
|
@ -903,27 +905,155 @@ onMounted(async () => {
|
|||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-card {
|
||||
border-radius: 12px !important;
|
||||
<style scoped lang="scss">
|
||||
.admin-dashboard {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.v-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
|
||||
transition: all 0.3s ease;
|
||||
/* Enhanced Header */
|
||||
.dashboard-header {
|
||||
margin-bottom: 2rem;
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
@include enhanced-glass(0.95, 30px);
|
||||
animation: slide-up 0.6s ease-out;
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 0.5rem;
|
||||
animation: fade-in 0.8s ease-out;
|
||||
}
|
||||
|
||||
.dashboard-subtitle {
|
||||
color: #71717a;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Bento Grid Layout */
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 1.5rem;
|
||||
|
||||
.bento-item {
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&--small { grid-column: span 3; }
|
||||
&--medium { grid-column: span 4; }
|
||||
&--large { grid-column: span 6; }
|
||||
&--xlarge { grid-column: span 8; }
|
||||
&--full { grid-column: span 12; }
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Glass Card Effects */
|
||||
.glass-card {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.95),
|
||||
rgba(255, 255, 255, 0.85),
|
||||
rgba(255, 255, 255, 0.75)
|
||||
) !important;
|
||||
backdrop-filter: blur(30px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow:
|
||||
0 8px 32px 0 rgba(31, 38, 135, 0.15),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.6),
|
||||
inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
|
||||
border-radius: 20px !important;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow:
|
||||
0 12px 40px 0 rgba(31, 38, 135, 0.25),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.8),
|
||||
inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Statistics Cards */
|
||||
.stat-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: #10b981 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animated Entrance */
|
||||
.animated-entrance {
|
||||
animation: slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Enhancements */
|
||||
.v-btn {
|
||||
text-transform: none !important;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-item {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1280px) {
|
||||
.bento-grid {
|
||||
.bento-item--small {
|
||||
grid-column: span 6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-item:last-child {
|
||||
border-bottom: none;
|
||||
@media (max-width: 960px) {
|
||||
.bento-grid {
|
||||
.bento-item--small {
|
||||
grid-column: span 12;
|
||||
}
|
||||
.bento-item--medium {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,30 +1,28 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<div class="board-dashboard">
|
||||
<!-- Dues Payment Banner -->
|
||||
<DuesPaymentBanner />
|
||||
|
||||
<!-- Welcome Header -->
|
||||
<v-row class="mb-6">
|
||||
<v-col>
|
||||
<h1 class="text-h3 font-weight-bold" style="color: #a31515;">
|
||||
Welcome Back, {{ firstName }}!
|
||||
</h1>
|
||||
<p class="text-h6 text-medium-emphasis">
|
||||
MonacoUSA Board Portal
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<v-chip color="primary" variant="elevated" class="mt-2">
|
||||
<v-icon start>mdi-shield-account</v-icon>
|
||||
Board Member
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- Enhanced Welcome Header -->
|
||||
<div class="dashboard-header glass-header mb-6">
|
||||
<h1 class="dashboard-title text-gradient">
|
||||
Welcome Back, {{ firstName }}!
|
||||
</h1>
|
||||
<p class="dashboard-subtitle">
|
||||
MonacoUSA Board Portal
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<v-chip class="glass-badge mt-2">
|
||||
<v-icon start>mdi-shield-account</v-icon>
|
||||
Board Member
|
||||
</v-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Board Tools -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12" md="6">
|
||||
<v-card class="pa-4 text-center" elevation="2" hover>
|
||||
<!-- Board Tools with Bento Grid -->
|
||||
<div class="bento-grid mb-6">
|
||||
<div class="bento-item bento-item--large">
|
||||
<v-card class="glass-card pa-4 text-center animated-entrance">
|
||||
<v-icon size="48" color="primary" class="mb-2">mdi-calendar</v-icon>
|
||||
<h3 class="mb-2">Events</h3>
|
||||
<p class="text-body-2 mb-4">View and manage association events</p>
|
||||
|
|
@ -37,10 +35,10 @@
|
|||
View Events
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</div>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-card class="pa-4 text-center" elevation="2" hover>
|
||||
<div class="bento-item bento-item--large">
|
||||
<v-card class="glass-card pa-4 text-center animated-entrance">
|
||||
<v-icon size="48" color="primary" class="mb-2">mdi-account-group</v-icon>
|
||||
<h3 class="mb-2">Members</h3>
|
||||
<p class="text-body-2 mb-4">View and manage association members</p>
|
||||
|
|
@ -53,13 +51,13 @@
|
|||
View Members
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Board Statistics -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12" md="8">
|
||||
<v-card elevation="2">
|
||||
<!-- Board Statistics with Bento Grid -->
|
||||
<div class="bento-grid mb-6">
|
||||
<div class="bento-item bento-item--xlarge">
|
||||
<v-card class="glass-card stat-card animated-entrance" style="animation-delay: 0.2s;">
|
||||
<v-card-title class="pa-4" style="background-color: #f5f5f5;">
|
||||
<v-icon class="mr-2" color="primary">mdi-chart-box-outline</v-icon>
|
||||
Board Overview
|
||||
|
|
@ -67,24 +65,24 @@
|
|||
<v-card-text class="pa-4">
|
||||
<v-row>
|
||||
<v-col cols="6" md="3" class="text-center">
|
||||
<div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.totalMembers }}</div>
|
||||
<div class="stat-value">{{ stats.totalMembers }}</div>
|
||||
<div class="text-body-2">Total Members</div>
|
||||
</v-col>
|
||||
</div>
|
||||
<v-col cols="6" md="3" class="text-center">
|
||||
<div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.activeMembers }}</div>
|
||||
<div class="stat-value">{{ stats.activeMembers }}</div>
|
||||
<div class="text-body-2">Active Members</div>
|
||||
</v-col>
|
||||
</div>
|
||||
<v-col cols="6" md="6" class="text-center">
|
||||
<div class="text-h4 font-weight-bold" style="color: #a31515;">{{ stats.upcomingEvents }}</div>
|
||||
<div class="stat-value">{{ stats.upcomingEvents }}</div>
|
||||
<div class="text-body-2">Upcoming Events</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</div>
|
||||
|
||||
<v-col cols="12" md="4">
|
||||
<v-card elevation="2">
|
||||
<div class="bento-item bento-item--medium">
|
||||
<v-card class="glass-card animated-entrance" style="animation-delay: 0.3s;">
|
||||
<v-card-title class="pa-4" style="background-color: #f5f5f5;">
|
||||
<v-icon class="mr-2" color="primary">mdi-calendar-today</v-icon>
|
||||
Next Event
|
||||
|
|
@ -110,8 +108,8 @@
|
|||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dues Management Section -->
|
||||
<v-row class="mb-6">
|
||||
|
|
@ -122,8 +120,8 @@
|
|||
@view-all-members="navigateToMembers"
|
||||
@member-updated="handleMemberUpdated"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- View Member Dialog -->
|
||||
|
|
@ -139,7 +137,7 @@
|
|||
:member="selectedMember"
|
||||
@member-updated="handleMemberUpdated"
|
||||
/>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -317,22 +315,146 @@ const generateReport = () => {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.v-card {
|
||||
border-radius: 12px !important;
|
||||
<style scoped lang="scss">
|
||||
.board-dashboard {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.v-card:hover {
|
||||
transform: translateY(-2px);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
/* Enhanced Header */
|
||||
.dashboard-header {
|
||||
margin-bottom: 2rem;
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.95),
|
||||
rgba(255, 255, 255, 0.85)
|
||||
);
|
||||
backdrop-filter: blur(30px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow:
|
||||
0 8px 32px 0 rgba(31, 38, 135, 0.15),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.6);
|
||||
animation: slide-up 0.6s ease-out;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-bottom: 0.5rem;
|
||||
animation: fade-in 0.8s ease-out;
|
||||
}
|
||||
|
||||
.dashboard-subtitle {
|
||||
color: #71717a;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.glass-badge {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
|
||||
color: white !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Bento Grid Layout */
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 1.5rem;
|
||||
|
||||
.bento-item {
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&--small { grid-column: span 3; }
|
||||
&--medium { grid-column: span 4; }
|
||||
&--large { grid-column: span 6; }
|
||||
&--xlarge { grid-column: span 8; }
|
||||
&--full { grid-column: span 12; }
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Glass Card Effects */
|
||||
.glass-card {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.95),
|
||||
rgba(255, 255, 255, 0.85),
|
||||
rgba(255, 255, 255, 0.75)
|
||||
) !important;
|
||||
backdrop-filter: blur(30px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
box-shadow:
|
||||
0 8px 32px 0 rgba(31, 38, 135, 0.15),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.6),
|
||||
inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
|
||||
border-radius: 20px !important;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow:
|
||||
0 12px 40px 0 rgba(31, 38, 135, 0.25),
|
||||
inset 0 1px 2px rgba(255, 255, 255, 0.8),
|
||||
inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Statistics Cards */
|
||||
.stat-card {
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animated Entrance */
|
||||
.animated-entrance {
|
||||
animation: slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Enhancements */
|
||||
.v-btn {
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.v-icon {
|
||||
color: #a31515 !important;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -347,4 +469,30 @@ h3 {
|
|||
.v-chip {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1280px) {
|
||||
.bento-grid {
|
||||
.bento-item--xlarge {
|
||||
grid-column: span 12;
|
||||
}
|
||||
.bento-item--large {
|
||||
grid-column: span 6;
|
||||
}
|
||||
.bento-item--medium {
|
||||
grid-column: span 6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.bento-grid {
|
||||
.bento-item--large {
|
||||
grid-column: span 12;
|
||||
}
|
||||
.bento-item--medium {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue