Update dashboard CSS to use new color scheme matching visual identity, replacing CSS variables with specific color values. Improved button hover state with background transition instead of opacity. Expanded layout.js with additional application sections including dashboard, editor, player, and settings to support new navigation structure.
73 lines
1.2 KiB
CSS
73 lines
1.2 KiB
CSS
/* Dashboard styles - updated to match visual identity */
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.cards-grid {
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
}
|
|
|
|
.card {
|
|
padding: 1.5rem;
|
|
background: #1e293b;
|
|
border: 1px solid #334155;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.card h3 {
|
|
font-size: 0.875rem;
|
|
color: #94a3b8;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.card .value {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.card .subtext {
|
|
font-size: 0.75rem;
|
|
color: #94a3b8;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.dashboard-grid {
|
|
display: grid;
|
|
gap: 1rem;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
}
|
|
|
|
.overview-container,
|
|
.recent-sales-container {
|
|
padding: 1.5rem;
|
|
background: #1e293b;
|
|
border: 1px solid #334155;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.overview-container h3,
|
|
.recent-sales-container h3 {
|
|
font-size: 1.125rem;
|
|
font-weight: 500;
|
|
color: #e2e8f0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.download-btn {
|
|
padding: 0.5rem 1rem;
|
|
background: #3b82f6;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.download-btn:hover {
|
|
background: #2563eb;
|
|
}
|