Initial commit
This commit is contained in:
MDeeApp
804
web/dashboard.css
Normal file
804
web/dashboard.css
Normal file
@@ -0,0 +1,804 @@
|
||||
/* ==========================================
|
||||
DASHBOARD - UNIFIED DESIGN SYSTEM
|
||||
========================================== */
|
||||
|
||||
/* Color Palette */
|
||||
:root {
|
||||
--color-primary: #1877f2;
|
||||
--color-success: #42b983;
|
||||
--color-warning: #f39c12;
|
||||
--color-danger: #e74c3c;
|
||||
--color-info: #3498db;
|
||||
|
||||
--bg-card: #ffffff;
|
||||
--bg-section: #f8f9fa;
|
||||
--bg-hover: #f0f2f5;
|
||||
|
||||
--text-primary: #1c1e21;
|
||||
--text-secondary: #65676b;
|
||||
--text-muted: #8a8d91;
|
||||
|
||||
--border-light: #e4e6eb;
|
||||
--border-medium: #d1d5db;
|
||||
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 14px;
|
||||
|
||||
--spacing-xs: 8px;
|
||||
--spacing-sm: 12px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
--spacing-xl: 32px;
|
||||
}
|
||||
|
||||
/* Dashboard Container */
|
||||
.dashboard-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xl);
|
||||
padding: var(--spacing-lg) 0;
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
SECTIONS
|
||||
========================================== */
|
||||
|
||||
.dashboard-section {
|
||||
background: var(--bg-section);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 var(--spacing-lg) 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
OVERVIEW SECTION
|
||||
========================================== */
|
||||
|
||||
/* Stats Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
transition: all 0.2s ease;
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.stat-card--primary { border-left-color: var(--color-primary); }
|
||||
.stat-card--success { border-left-color: var(--color-success); }
|
||||
.stat-card--warning { border-left-color: var(--color-warning); }
|
||||
.stat-card--danger { border-left-color: var(--color-danger); }
|
||||
.stat-card--info { border-left-color: var(--color-info); }
|
||||
|
||||
.stat-card__icon {
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.stat-card__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-card__label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.stat-card__value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Metrics Grid */
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.metric-card__label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.metric-card__value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.metric-card__change {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
display: inline-block;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.metric-card__change--up {
|
||||
color: var(--color-success);
|
||||
background: rgba(66, 185, 131, 0.1);
|
||||
}
|
||||
|
||||
.metric-card__change--down {
|
||||
color: var(--color-danger);
|
||||
background: rgba(231, 76, 60, 0.1);
|
||||
}
|
||||
|
||||
.metric-card__change--neutral {
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.metric-card__subtext {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
ANALYTICS SECTION
|
||||
========================================== */
|
||||
|
||||
.charts-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.charts-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.chart-card--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.chart-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.chart-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.chart-card__title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chart-card__subtitle {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.chart-card__body {
|
||||
min-height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Bar Chart (for profile chart) */
|
||||
.bar-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.bar-chart-item {
|
||||
display: grid;
|
||||
grid-template-columns: 80px 1fr 60px;
|
||||
gap: var(--spacing-sm);
|
||||
align-items: center;
|
||||
padding: var(--spacing-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.bar-chart-item:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.bar-chart-item__label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.bar-chart-item__bar-container {
|
||||
background: var(--border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bar-chart-item__bar {
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, #4a9eff 100%);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: var(--spacing-xs);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: width 0.4s ease;
|
||||
min-width: 2px;
|
||||
}
|
||||
|
||||
.bar-chart-item__value {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
PERFORMANCE COMPARISONS SECTION
|
||||
========================================== */
|
||||
|
||||
.comparison-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.comparison-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.comparison-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.comparison-card__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
padding-bottom: var(--spacing-sm);
|
||||
border-bottom: 2px solid var(--border-light);
|
||||
}
|
||||
|
||||
.comparison-card__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.comparison-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.comparison-item__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comparison-item__label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.comparison-item__value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.comparison-item__bar {
|
||||
background: var(--border-light);
|
||||
border-radius: 100px;
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.comparison-item__bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 100px;
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
|
||||
.comparison-item__bar-fill--current {
|
||||
background: linear-gradient(90deg, var(--color-primary), #4a9eff);
|
||||
}
|
||||
|
||||
.comparison-item__bar-fill--success {
|
||||
background: linear-gradient(90deg, var(--color-success), #5dd39e);
|
||||
}
|
||||
|
||||
.comparison-item__subtext {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.comparison-item__change {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
padding: 3px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.comparison-item__change--up {
|
||||
color: var(--color-success);
|
||||
background: rgba(66, 185, 131, 0.12);
|
||||
}
|
||||
|
||||
.comparison-item__change--down {
|
||||
color: var(--color-danger);
|
||||
background: rgba(231, 76, 60, 0.12);
|
||||
}
|
||||
|
||||
.comparison-item__change--neutral {
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.comparison-divider {
|
||||
height: 1px;
|
||||
background: var(--border-light);
|
||||
margin: var(--spacing-xs) 0;
|
||||
}
|
||||
|
||||
/* Success Comparison Grid */
|
||||
.success-comparison-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.success-comparison-card {
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-light);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.success-comparison-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
|
||||
.success-comparison-card__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
padding-bottom: var(--spacing-sm);
|
||||
border-bottom: 2px solid var(--color-success);
|
||||
}
|
||||
|
||||
.success-comparison-card__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
DETAILS SECTION
|
||||
========================================== */
|
||||
|
||||
.details-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.detail-card--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.detail-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.detail-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
padding-bottom: var(--spacing-sm);
|
||||
border-bottom: 2px solid var(--border-light);
|
||||
}
|
||||
|
||||
.detail-card__title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-card__badge {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 4px 10px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.detail-card__body {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Performers List */
|
||||
.performers-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.performer-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-sm);
|
||||
background: var(--bg-hover);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.performer-item:hover {
|
||||
background: var(--border-light);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.performer-item--gold {
|
||||
background: linear-gradient(135deg, #ffd700 20%, #fff9e6 100%);
|
||||
border: 2px solid #ffd700;
|
||||
}
|
||||
|
||||
.performer-item--silver {
|
||||
background: linear-gradient(135deg, #c0c0c0 20%, #f5f5f5 100%);
|
||||
border: 2px solid #c0c0c0;
|
||||
}
|
||||
|
||||
.performer-item--bronze {
|
||||
background: linear-gradient(135deg, #cd7f32 20%, #fff5e6 100%);
|
||||
border: 2px solid #cd7f32;
|
||||
}
|
||||
|
||||
.performer-item__rank {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.performer-item__avatar {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.performer-item__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.performer-item__name {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.performer-item__stats {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.performer-item__badge {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 4px 12px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
/* Deadline List */
|
||||
.deadline-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.deadline-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm);
|
||||
background: var(--bg-hover);
|
||||
border-radius: var(--radius-sm);
|
||||
border-left: 4px solid var(--color-info);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.deadline-item:hover {
|
||||
background: var(--border-light);
|
||||
}
|
||||
|
||||
.deadline-item--warning {
|
||||
border-left-color: var(--color-warning);
|
||||
background: rgba(243, 156, 18, 0.05);
|
||||
}
|
||||
|
||||
.deadline-item--danger {
|
||||
border-left-color: var(--color-danger);
|
||||
background: rgba(231, 76, 60, 0.05);
|
||||
}
|
||||
|
||||
.deadline-item__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.deadline-item__title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.deadline-item__progress {
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.deadline-item__time {
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
padding: 4px 10px;
|
||||
background: white;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* Activity List */
|
||||
.activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm);
|
||||
background: var(--bg-hover);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.activity-item:hover {
|
||||
background: var(--border-light);
|
||||
}
|
||||
|
||||
.activity-item__icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-success);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.activity-item__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.activity-item__text {
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.activity-item__profile {
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.activity-item__time {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
EMPTY STATES
|
||||
========================================== */
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--spacing-xl);
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
RESPONSIVE DESIGN
|
||||
========================================== */
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.charts-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.chart-card--full {
|
||||
grid-column: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-section {
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.stats-grid,
|
||||
.metrics-grid,
|
||||
.comparison-grid,
|
||||
.success-comparison-grid,
|
||||
.details-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.detail-card--full {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.stat-card__value,
|
||||
.metric-card__value {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================
|
||||
ANIMATIONS
|
||||
========================================== */
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-section {
|
||||
animation: fadeInUp 0.4s ease forwards;
|
||||
}
|
||||
|
||||
.dashboard-section:nth-child(1) { animation-delay: 0s; }
|
||||
.dashboard-section:nth-child(2) { animation-delay: 0.1s; }
|
||||
.dashboard-section:nth-child(3) { animation-delay: 0.2s; }
|
||||
.dashboard-section:nth-child(4) { animation-delay: 0.3s; }
|
||||
Reference in New Issue
Block a user