95 lines
2.3 KiB
CSS
95 lines
2.3 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
--cc-bg: #0f1420;
|
|
--cc-panel: #172338;
|
|
--cc-panel-2: #0c111c;
|
|
--cc-border: #2c3c58;
|
|
--cc-text: #eef3fb;
|
|
--cc-muted: #9fb0cb;
|
|
--cc-accent: #2498eb;
|
|
--cc-accent-strong: #1769aa;
|
|
--cc-good: #4fd47f;
|
|
--cc-warn: #f2c14e;
|
|
--cc-danger: #ff7777;
|
|
--cc-radius: 12px;
|
|
--cc-radius-sm: 8px;
|
|
--cc-font: 16px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
.cc-dot {
|
|
display: inline-block;
|
|
flex: 0 0 auto;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
background: #6f7d92;
|
|
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
|
|
vertical-align: -3px;
|
|
}
|
|
|
|
.cc-dot[data-state="good"] {
|
|
background: var(--cc-good);
|
|
box-shadow: 0 0 0 2px rgba(79, 212, 127, 0.18);
|
|
}
|
|
|
|
.cc-dot[data-state="warn"] {
|
|
background: var(--cc-warn);
|
|
box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.18);
|
|
}
|
|
|
|
.cc-dot[data-state="danger"] {
|
|
background: var(--cc-danger);
|
|
box-shadow: 0 0 0 2px rgba(255, 119, 119, 0.18);
|
|
}
|
|
|
|
.cc-status-row {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 28px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
.cc-room-menu { width: min(820px, calc(100% - 32px)); margin: 24px auto 18px; }
|
|
.cc-room-menu[hidden] { display: none; }
|
|
.cc-room-menu-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
margin: 0;
|
|
padding: 10px;
|
|
list-style: none;
|
|
background: var(--cc-panel);
|
|
border: 1px solid var(--cc-border);
|
|
border-radius: var(--cc-radius);
|
|
}
|
|
.cc-room-menu-list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
|
|
.cc-room-menu-list li + li::before { content: "→"; color: var(--cc-muted); }
|
|
.cc-room-menu-item {
|
|
display: inline-block;
|
|
padding: 7px 10px;
|
|
border: 1px solid transparent;
|
|
border-radius: 7px;
|
|
color: var(--cc-text);
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
.cc-room-menu-item:hover { border-color: var(--cc-accent); }
|
|
.cc-room-menu-item.is-current {
|
|
border-color: var(--cc-accent);
|
|
background: var(--cc-panel-2);
|
|
font-weight: 650;
|
|
}
|
|
.cc-room-menu-item.is-disabled { color: var(--cc-muted); opacity: 0.65; cursor: not-allowed; }
|
|
|
|
@media (max-width: 600px) {
|
|
.cc-room-menu-list li + li::before { display: none; }
|
|
}
|