08f8150064
Extracts inline styles from Razor pages into modular CSS files Adds new CSS files for components and specific page styles Improves code organization and maintainability by separating styling concerns Updates layout to include new CSS files and optional style sections
135 lines
2.5 KiB
CSS
135 lines
2.5 KiB
CSS
/* Shared Components */
|
|
|
|
/* Dashboard Grid */
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.dashboard-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.dashboard-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Status Detail */
|
|
.status-detail {
|
|
font-size: 10px;
|
|
color: var(--muted-color);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* Pulse Animation */
|
|
.pulse {
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
.pulse.mini {
|
|
font-size: 8px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
|
|
/* Running Card */
|
|
.running-card {
|
|
border-color: var(--warning-color);
|
|
}
|
|
|
|
.running-card .card-header {
|
|
background: linear-gradient(90deg, rgba(240, 165, 0, 0.1), transparent);
|
|
}
|
|
|
|
/* Error Card */
|
|
.error-card {
|
|
border-color: var(--danger-color);
|
|
}
|
|
|
|
.error-card .card-header {
|
|
background: linear-gradient(90deg, rgba(220, 53, 69, 0.1), transparent);
|
|
}
|
|
|
|
/* Warning Card */
|
|
.warning-card {
|
|
border-color: var(--warning-color);
|
|
}
|
|
|
|
.warning-card .card-header {
|
|
background: linear-gradient(90deg, rgba(240, 165, 0, 0.1), transparent);
|
|
}
|
|
|
|
/* Rate Bar */
|
|
.rate-bar {
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 6px;
|
|
background: var(--border-color);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.rate-fill {
|
|
height: 100%;
|
|
transition: width 0.3s;
|
|
}
|
|
|
|
.rate-fill.good { background: var(--success-color); }
|
|
.rate-fill.warn { background: var(--warning-color); }
|
|
.rate-fill.bad { background: var(--danger-color); }
|
|
|
|
.rate-text {
|
|
font-size: 10px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
/* Compact List */
|
|
.compact-list {
|
|
padding: 8px 16px !important;
|
|
}
|
|
|
|
.list-item {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.list-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.item-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.item-meta {
|
|
font-size: 10px;
|
|
color: var(--muted-color);
|
|
margin-top: 4px;
|
|
padding-left: 40px;
|
|
}
|
|
|
|
/* Last Updated */
|
|
.last-updated {
|
|
text-align: center;
|
|
font-size: 10px;
|
|
color: var(--muted-color);
|
|
padding: 16px;
|
|
}
|
|
|
|
/* Color Utilities */
|
|
.success { color: var(--success-color); }
|
|
.warning { color: var(--warning-color); }
|
|
.danger { color: var(--danger-color); }
|