| :root {
|
| --bg: #f8fbfd;
|
| --surface: #ffffff;
|
| --surface-soft: #f1f8fb;
|
| --surface-muted: #eef6f9;
|
| --line: #deedf3;
|
| --line-strong: #c8e5ef;
|
| --text: #3d4652;
|
| --muted: #7b8a97;
|
| --cyan: #57c8df;
|
| --cyan-deep: #46bfd8;
|
| --green: #69c36c;
|
| --yellow: #a8cf6d;
|
| --orange: #f0ae46;
|
| --red: #f06d6f;
|
| --shadow: 0 20px 42px rgba(109, 153, 177, 0.12);
|
| --font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
|
| --font-display: "Space Grotesk", "Noto Sans SC", sans-serif;
|
| }
|
|
|
| * {
|
| box-sizing: border-box;
|
| }
|
|
|
| html,
|
| body {
|
| min-height: 100%;
|
| }
|
|
|
| body {
|
| margin: 0;
|
| font-family: var(--font-sans);
|
| color: var(--text);
|
| background:
|
| radial-gradient(circle at top left, rgba(105, 195, 108, 0.08), transparent 22%),
|
| radial-gradient(circle at top right, rgba(87, 200, 223, 0.12), transparent 20%),
|
| linear-gradient(180deg, #fbfdfe 0%, #f6fbfd 100%);
|
| }
|
|
|
| .health-page-shell,
|
| .catalog-page-shell {
|
| width: min(1560px, calc(100vw - 56px));
|
| margin: 0 auto;
|
| padding: 26px 0 44px;
|
| }
|
|
|
| .health-topbar,
|
| .catalog-topbar,
|
| .health-summary-grid,
|
| .health-board-panel,
|
| .catalog-summary-grid,
|
| .catalog-filter-panel,
|
| .catalog-board-panel,
|
| .summary-card,
|
| .provider-card {
|
| background: var(--surface);
|
| border: 1px solid var(--line);
|
| box-shadow: var(--shadow);
|
| }
|
|
|
| .health-topbar,
|
| .catalog-topbar,
|
| .health-board-panel,
|
| .catalog-filter-panel,
|
| .catalog-board-panel {
|
| border-radius: 28px;
|
| }
|
|
|
| .health-topbar,
|
| .catalog-topbar {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: flex-start;
|
| gap: 20px;
|
| padding: 26px 30px;
|
| }
|
|
|
| .health-topbar h1,
|
| .catalog-topbar h1,
|
| .board-header-row h2,
|
| .health-row-copy h3,
|
| .provider-card h3 {
|
| font-family: var(--font-display);
|
| }
|
|
|
| .health-topbar h1,
|
| .catalog-topbar h1 {
|
| margin: 12px 0 10px;
|
| font-size: clamp(30px, 2.5vw, 44px);
|
| line-height: 1.1;
|
| }
|
|
|
| .health-topbar p,
|
| .catalog-topbar p,
|
| .panel-hint,
|
| .provider-card p,
|
| .summary-card p,
|
| .timeline-label,
|
| .board-meta-box span {
|
| color: var(--muted);
|
| }
|
|
|
| .topbar-actions {
|
| display: flex;
|
| gap: 14px;
|
| align-items: center;
|
| flex-wrap: wrap;
|
| }
|
|
|
| .mini-badge {
|
| display: inline-flex;
|
| align-items: center;
|
| padding: 8px 14px;
|
| border-radius: 999px;
|
| background: rgba(87, 200, 223, 0.12);
|
| color: var(--cyan-deep);
|
| border: 1px solid rgba(87, 200, 223, 0.26);
|
| font-size: 13px;
|
| font-weight: 700;
|
| letter-spacing: 0.05em;
|
| }
|
|
|
| .mini-badge.subtle {
|
| background: var(--surface-soft);
|
| color: var(--muted);
|
| border-color: var(--line);
|
| }
|
|
|
| .text-nav-link,
|
| .refresh-link,
|
| .provider-filter-btn {
|
| appearance: none;
|
| border: 1px solid var(--line-strong);
|
| background: var(--surface);
|
| color: var(--text);
|
| text-decoration: none;
|
| border-radius: 999px;
|
| padding: 11px 16px;
|
| font: inherit;
|
| cursor: pointer;
|
| }
|
|
|
| .text-nav-link:hover,
|
| .refresh-link:hover,
|
| .provider-filter-btn:hover {
|
| border-color: var(--cyan);
|
| color: var(--cyan-deep);
|
| }
|
|
|
| .health-summary-grid,
|
| .catalog-summary-grid {
|
| margin-top: 18px;
|
| display: grid;
|
| grid-template-columns: repeat(4, minmax(0, 1fr));
|
| gap: 16px;
|
| background: transparent;
|
| border: none;
|
| box-shadow: none;
|
| }
|
|
|
| .summary-card {
|
| border-radius: 22px;
|
| padding: 18px 20px;
|
| }
|
|
|
| .summary-card span {
|
| display: block;
|
| color: var(--muted);
|
| font-size: 13px;
|
| }
|
|
|
| .summary-card strong {
|
| display: block;
|
| margin: 10px 0 8px;
|
| font-family: var(--font-display);
|
| font-size: 28px;
|
| }
|
|
|
| .health-board-panel,
|
| .catalog-filter-panel,
|
| .catalog-board-panel {
|
| margin-top: 18px;
|
| padding: 26px 28px;
|
| }
|
|
|
| .board-header-row {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: flex-start;
|
| gap: 18px;
|
| flex-wrap: wrap;
|
| margin-bottom: 18px;
|
| }
|
|
|
| .board-header-row h2 {
|
| margin: 12px 0 0;
|
| font-size: clamp(24px, 2vw, 34px);
|
| }
|
|
|
| .board-meta-box {
|
| min-width: 200px;
|
| padding: 14px 16px;
|
| border-radius: 20px;
|
| background: var(--surface-soft);
|
| border: 1px solid var(--line);
|
| }
|
|
|
| .board-meta-box strong {
|
| display: block;
|
| margin-top: 8px;
|
| font-family: var(--font-display);
|
| font-size: 20px;
|
| }
|
|
|
| .timeline-header {
|
| display: grid;
|
| gap: 8px;
|
| align-items: center;
|
| margin: 8px 0 10px;
|
| min-width: max-content;
|
| }
|
|
|
| .timeline-label {
|
| text-align: center;
|
| font-size: 12px;
|
| width: 42px;
|
| }
|
|
|
| .timeline-left-placeholder {
|
| text-align: left;
|
| width: auto;
|
| }
|
|
|
| .health-list {
|
| display: flex;
|
| flex-direction: column;
|
| gap: 12px;
|
| min-width: max-content;
|
| }
|
|
|
| .health-row-card {
|
| display: grid;
|
| gap: 20px;
|
| align-items: center;
|
| padding: 16px 0;
|
| border-bottom: 1px solid var(--line);
|
| }
|
|
|
| .health-row-card:last-child {
|
| border-bottom: none;
|
| }
|
|
|
| .health-row-summary {
|
| display: flex;
|
| align-items: center;
|
| gap: 14px;
|
| min-width: 0;
|
| padding-right: 16px;
|
| }
|
|
|
| .health-row-accent {
|
| width: 18px;
|
| min-width: 18px;
|
| height: 84px;
|
| border-radius: 999px;
|
| background: var(--cyan);
|
| }
|
|
|
| .health-row-copy {
|
| min-width: 0;
|
| max-width: 100%;
|
| }
|
|
|
| .health-row-copy h3 {
|
| margin: 0;
|
| font-size: 22px;
|
| line-height: 1.3;
|
| white-space: normal;
|
| overflow: visible;
|
| text-overflow: clip;
|
| overflow-wrap: anywhere;
|
| word-break: break-word;
|
| }
|
|
|
| .health-rate-pill {
|
| display: inline-flex;
|
| align-items: center;
|
| padding: 8px 12px;
|
| border-radius: 14px;
|
| font-weight: 800;
|
| font-size: 14px;
|
| line-height: 1;
|
| background: var(--surface-soft);
|
| }
|
|
|
| .health-meta-inline {
|
| display: flex;
|
| align-items: center;
|
| gap: 8px;
|
| flex-wrap: wrap;
|
| margin-top: 10px;
|
| }
|
|
|
| .health-call-pill {
|
| color: var(--cyan-deep);
|
| background: rgba(87, 200, 223, 0.14);
|
| border: 1px solid rgba(87, 200, 223, 0.18);
|
| }
|
|
|
| .health-cells {
|
| display: grid;
|
| gap: 8px;
|
| align-items: center;
|
| justify-content: end;
|
| width: max-content;
|
| margin-left: auto;
|
| }
|
|
|
| .health-cell {
|
| width: 42px;
|
| height: 42px;
|
| border-radius: 12px;
|
| border: 3px solid transparent;
|
| background: var(--surface-muted);
|
| }
|
|
|
| .cell-cyan {
|
| border-color: var(--cyan);
|
| background: rgba(87, 200, 223, 0.12);
|
| }
|
|
|
| .cell-green {
|
| border-color: var(--green);
|
| background: rgba(105, 195, 108, 0.1);
|
| }
|
|
|
| .cell-orange {
|
| border-color: var(--orange);
|
| background: rgba(240, 174, 70, 0.1);
|
| }
|
|
|
| .cell-red {
|
| border-color: var(--red);
|
| background: rgba(240, 109, 111, 0.1);
|
| }
|
|
|
| .cell-empty {
|
| border-color: transparent;
|
| background: var(--surface-muted);
|
| }
|
|
|
| .status-cyan,
|
| .status-cyan.health-row-accent {
|
| color: var(--cyan-deep);
|
| background-color: var(--cyan);
|
| }
|
|
|
| .status-green,
|
| .status-green.health-row-accent {
|
| color: var(--green);
|
| background-color: var(--green);
|
| }
|
|
|
| .status-orange,
|
| .status-orange.health-row-accent {
|
| color: var(--orange);
|
| background-color: var(--orange);
|
| }
|
|
|
| .status-red,
|
| .status-red.health-row-accent {
|
| color: var(--red);
|
| background-color: var(--red);
|
| }
|
|
|
| .health-rate-pill.status-cyan { color: var(--cyan-deep); background: rgba(87, 200, 223, 0.14); }
|
| .health-rate-pill.status-green { color: var(--green); background: rgba(105, 195, 108, 0.14); }
|
| .health-rate-pill.status-orange { color: var(--orange); background: rgba(240, 174, 70, 0.14); }
|
| .health-rate-pill.status-red { color: var(--red); background: rgba(240, 109, 111, 0.14); }
|
|
|
| .provider-filter-panel {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| gap: 18px;
|
| flex-wrap: wrap;
|
| }
|
|
|
| .provider-filter-panel h2 {
|
| margin: 12px 0 0;
|
| font-family: var(--font-display);
|
| font-size: clamp(22px, 2vw, 30px);
|
| }
|
|
|
| .provider-filter-bar {
|
| display: flex;
|
| gap: 10px;
|
| flex-wrap: wrap;
|
| }
|
|
|
| .provider-filter-btn.active {
|
| background: rgba(87, 200, 223, 0.12);
|
| border-color: rgba(87, 200, 223, 0.3);
|
| color: var(--cyan-deep);
|
| font-weight: 700;
|
| }
|
|
|
| .provider-grid {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
| gap: 18px;
|
| }
|
|
|
| .provider-card {
|
| border-radius: 24px;
|
| padding: 20px;
|
| display: flex;
|
| flex-direction: column;
|
| align-self: stretch;
|
| min-height: 0;
|
| }
|
|
|
| .provider-card-fixed {
|
| height: 320px;
|
| min-height: 320px;
|
| max-height: 320px;
|
| overflow: hidden;
|
| }
|
|
|
| .provider-card-head {
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: flex-start;
|
| gap: 12px;
|
| flex: 0 0 auto;
|
| }
|
|
|
| .provider-card h3 {
|
| margin: 0;
|
| font-size: 24px;
|
| }
|
|
|
| .provider-card p {
|
| margin: 10px 0 0;
|
| }
|
|
|
| .provider-card-body {
|
| display: flex;
|
| flex: 1 1 auto;
|
| min-height: 0;
|
| flex-direction: column;
|
| }
|
|
|
| .provider-model-list {
|
| margin-top: 18px;
|
| display: flex;
|
| flex: 1 1 auto;
|
| flex-direction: column;
|
| align-items: stretch;
|
| gap: 10px;
|
| min-height: 0;
|
| overflow-y: auto;
|
| overflow-x: hidden;
|
| padding-right: 6px;
|
| scrollbar-gutter: stable;
|
| }
|
|
|
| .provider-model-chip {
|
| display: flex;
|
| align-items: center;
|
| min-height: 46px;
|
| height: 46px;
|
| padding: 0 14px;
|
| border-radius: 16px;
|
| background: var(--surface-soft);
|
| border: 1px solid var(--line);
|
| font-family: var(--font-display);
|
| font-size: 13px;
|
| line-height: 1;
|
| color: var(--text);
|
| white-space: nowrap;
|
| overflow: hidden;
|
| text-overflow: ellipsis;
|
| flex-shrink: 0;
|
| }
|
|
|
| .panel-hint { |
| margin-top: 16px; |
| } |
|
|
| .page-repo-footer { |
| width: min(1560px, calc(100vw - 56px)); |
| margin: 0 auto 28px; |
| padding: 0 4px; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| gap: 10px; |
| flex-wrap: wrap; |
| color: var(--muted); |
| font-size: 14px; |
| } |
|
|
| .page-repo-footer a { |
| color: var(--cyan-deep); |
| text-decoration: none; |
| word-break: break-all; |
| } |
|
|
| .page-repo-footer a:hover { |
| text-decoration: underline; |
| } |
|
|
| .page-repo-footer-admin { |
| position: relative; |
| z-index: 1; |
| margin-top: 22px; |
| } |
|
|
| @media (max-width: 1200px) { |
| .timeline-header, |
| .health-row-card, |
| .health-cells { |
| grid-template-columns: 260px repeat(12, minmax(26px, 1fr));
|
| }
|
| }
|
|
|
| @media (max-width: 980px) { |
| .health-page-shell, |
| .catalog-page-shell { |
| width: min(100vw - 24px, 1560px); |
| } |
|
|
| .page-repo-footer { |
| width: min(100vw - 24px, 1560px); |
| } |
|
|
| .health-summary-grid, |
| .catalog-summary-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .timeline-header {
|
| display: none;
|
| }
|
|
|
| .health-row-card {
|
| grid-template-columns: 1fr;
|
| gap: 14px;
|
| padding: 18px;
|
| border: 1px solid var(--line);
|
| border-radius: 24px;
|
| background: var(--surface);
|
| }
|
|
|
| }
|
|
|
| @media (max-width: 720px) { |
| .health-topbar, |
| .catalog-topbar, |
| .health-board-panel, |
| .catalog-filter-panel, |
| .catalog-board-panel {
|
| padding: 20px;
|
| }
|
|
|
| .health-summary-grid,
|
| .catalog-summary-grid,
|
| .provider-grid {
|
| grid-template-columns: 1fr;
|
| }
|
|
|
| .topbar-actions,
|
| .provider-filter-bar {
|
| width: 100%;
|
| }
|
|
|
| .text-nav-link,
|
| .refresh-link,
|
| .provider-filter-btn {
|
| width: 100%;
|
| text-align: center;
|
| }
|
|
|
| .health-row-summary {
|
| align-items: flex-start;
|
| }
|
|
|
| .health-row-accent {
|
| height: 72px;
|
| }
|
|
|
| .health-row-copy h3 { |
| font-size: 19px; |
| } |
|
|
| .health-cells { |
| gap: 6px; |
| }
|
|
|
| .health-cell, |
| .timeline-label { |
| width: 34px; |
| height: 34px; |
| } |
|
|
| .page-repo-footer { |
| margin-bottom: 22px; |
| font-size: 13px; |
| text-align: center; |
| } |
| } |
|
|
