117 lines
1.9 KiB
CSS
117 lines
1.9 KiB
CSS
.dashboard-shell {
|
|
width: min(1440px, 100%);
|
|
min-height: 100vh;
|
|
margin: 0 auto;
|
|
padding: 26px 24px 36px;
|
|
}
|
|
|
|
.dashboard-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.dashboard-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dashboard-search {
|
|
width: min(360px, 100%);
|
|
}
|
|
|
|
.dashboard-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 22px;
|
|
}
|
|
|
|
.dashboard-stat {
|
|
min-height: 112px;
|
|
padding: 16px;
|
|
border: 1px solid rgba(148, 163, 184, 0.16);
|
|
border-radius: var(--radius);
|
|
background:
|
|
linear-gradient(145deg, rgba(17, 24, 39, 0.78), rgba(2, 6, 23, 0.62)),
|
|
rgba(2, 6, 23, 0.38);
|
|
}
|
|
|
|
.dashboard-stat span {
|
|
display: block;
|
|
min-height: 34px;
|
|
color: var(--muted);
|
|
font-size: 0.78rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.dashboard-stat strong {
|
|
display: block;
|
|
margin-top: 12px;
|
|
font-size: 2rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.dashboard-stat--success {
|
|
border-color: rgba(34, 197, 94, 0.28);
|
|
}
|
|
|
|
.dashboard-stat--success strong {
|
|
color: #86efac;
|
|
}
|
|
|
|
.dashboard-stat--danger {
|
|
border-color: rgba(239, 68, 68, 0.28);
|
|
}
|
|
|
|
.dashboard-stat--danger strong {
|
|
color: #fca5a5;
|
|
}
|
|
|
|
.dashboard-stat--warning {
|
|
border-color: rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
.dashboard-stat--warning strong {
|
|
color: #facc15;
|
|
}
|
|
|
|
.dashboard-stat--accent {
|
|
border-color: rgba(212, 165, 116, 0.32);
|
|
}
|
|
|
|
.dashboard-stat--accent strong {
|
|
color: var(--accent-soft);
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.dashboard-stats {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 680px) {
|
|
.dashboard-shell {
|
|
padding: 16px;
|
|
}
|
|
|
|
.dashboard-header {
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dashboard-actions,
|
|
.dashboard-search {
|
|
width: 100%;
|
|
}
|
|
|
|
.dashboard-stats {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|