29 lines
2.3 KiB
CSS
29 lines
2.3 KiB
CSS
.monitoring-tabs { display: flex; border-bottom: 1px solid #dee2e6; }
|
|
.monitoring-tabs button { background: none; border: none; padding: 10px 15px; cursor: pointer; border-bottom: 3px solid transparent; font-size: 0.9rem; color: #495057; }
|
|
.monitoring-tabs button:hover { color: #0056b3; }
|
|
.monitoring-tabs button.active { border-bottom-color: #007bff; color: #007bff; font-weight: bold; }
|
|
.monitoring-content { padding: 15px; min-height: 400px; }
|
|
.overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; }
|
|
.chart-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 15px; }
|
|
.chart-title { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.problems-list { display: flex; flex-direction: column; gap: 10px; }
|
|
.problem-card { display: flex; align-items: center; padding: 10px; border-radius: 5px; border-left-width: 5px; border-left-style: solid; background-color: #f8f9fa; }
|
|
.problem-icon { font-size: 1.5rem; margin-right: 15px; width: 30px; text-align: center; }
|
|
.problem-details { flex-grow: 1; }
|
|
.problem-header { display: flex; justify-content: space-between; align-items: baseline; }
|
|
.problem-name { font-weight: 500; }
|
|
.problem-time { font-size: 0.8rem; color: #6c757d; }
|
|
.problem-opdata { font-size: 0.85rem; color: #495057; margin-top: 4px; }
|
|
.sev-info { border-left-color: #17a2b8; } .sev-info .problem-icon { color: #17a2b8; }
|
|
.sev-warning { border-left-color: #ffc107; } .sev-warning .problem-icon { color: #ffc107; }
|
|
.sev-average { border-left-color: #fd7e14; } .sev-average .problem-icon { color: #fd7e14; }
|
|
.sev-high { border-left-color: #dc3545; } .sev-high .problem-icon { color: #dc3545; }
|
|
.sev-disaster { border-left-color: #7B014C; } .sev-disaster .problem-icon { color: #7B014C; }
|
|
.overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
|
|
.problem-counts { display: flex; justify-content: space-around; text-align: center; padding: 1rem 0; }
|
|
.problem-counts .count { font-size: 1.5rem; font-weight: bold; display: block; }
|
|
.problem-counts .period { font-size: 0.8rem; color: #6c757d; }
|
|
.problems-list.resolved .problem-card { opacity: 0.8; }
|
|
.sev-resolved { border-left: 5px solid #28a745; }
|
|
.sev-resolved .problem-icon { color: #28a745; }
|
|
.c-pointer { cursor: pointer; } |