Spaces:
Sleeping
Sleeping
| :root { | |
| --bg: #0b1020; | |
| --panel: rgba(255, 255, 255, 0.06); | |
| --panel2: rgba(255, 255, 255, 0.08); | |
| --border: rgba(255, 255, 255, 0.12); | |
| --text: rgba(255, 255, 255, 0.92); | |
| --muted: rgba(255, 255, 255, 0.65); | |
| --accent: #7c6cff; | |
| --accent2: #2dd4bf; | |
| --danger: #ff4d4f; | |
| --ok: #22c55e; | |
| --shadow: 0 20px 50px rgba(0, 0, 0, 0.35); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "PingFang SC", | |
| "Hiragino Sans GB", "Microsoft YaHei", sans-serif; | |
| background: radial-gradient(1200px 800px at 18% 12%, #1a1f3a 0%, var(--bg) 55%) fixed; | |
| color: var(--text); | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| .app { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| min-height: 100vh; | |
| } | |
| .side { | |
| padding: 18px 14px; | |
| border-right: 1px solid var(--border); | |
| background: rgba(0, 0, 0, 0.12); | |
| } | |
| .brand { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| padding: 10px 10px 14px; | |
| } | |
| .brand h1 { | |
| font-size: 18px; | |
| margin: 0; | |
| letter-spacing: 0.2px; | |
| } | |
| .brand p { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 12.5px; | |
| line-height: 1.55; | |
| } | |
| .nav { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| margin-top: 6px; | |
| } | |
| .nav a { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| padding: 10px 10px; | |
| border-radius: 12px; | |
| border: 1px solid transparent; | |
| color: var(--muted); | |
| } | |
| .nav a.active { | |
| color: var(--text); | |
| background: var(--panel); | |
| border-color: var(--border); | |
| box-shadow: var(--shadow); | |
| } | |
| .dot { | |
| width: 9px; | |
| height: 9px; | |
| border-radius: 999px; | |
| background: rgba(255, 255, 255, 0.25); | |
| } | |
| .nav a.active .dot { | |
| background: linear-gradient(135deg, var(--accent), var(--accent2)); | |
| } | |
| .main { | |
| padding: 22px 18px 60px; | |
| } | |
| .topbar { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 12px; | |
| align-items: center; | |
| margin-bottom: 16px; | |
| } | |
| .topbar .title { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .topbar h2 { | |
| margin: 0; | |
| font-size: 18px; | |
| } | |
| .topbar .hint { | |
| color: var(--muted); | |
| font-size: 12.5px; | |
| } | |
| .pill { | |
| font-size: 12px; | |
| padding: 6px 10px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border); | |
| background: rgba(0, 0, 0, 0.18); | |
| color: var(--muted); | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 14px; | |
| } | |
| @media (min-width: 1040px) { | |
| .grid { | |
| grid-template-columns: 1fr 1.2fr; | |
| } | |
| } | |
| .card { | |
| background: var(--panel); | |
| border: 1px solid var(--border); | |
| border-radius: 14px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| } | |
| .card .hd { | |
| padding: 12px 14px; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| } | |
| .card .bd { | |
| padding: 12px 14px; | |
| } | |
| .form { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 10px; | |
| } | |
| .row2 { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 10px; | |
| } | |
| @media (min-width: 760px) { | |
| .row2 { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| label { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| input, | |
| select, | |
| textarea { | |
| width: 100%; | |
| padding: 10px 12px; | |
| border-radius: 12px; | |
| border: 1px solid var(--border); | |
| background: rgba(0, 0, 0, 0.18); | |
| color: var(--text); | |
| outline: none; | |
| line-height: 1.5; | |
| font-size: 13.5px; | |
| } | |
| textarea { | |
| min-height: 110px; | |
| resize: vertical; | |
| } | |
| input:focus, | |
| select:focus, | |
| textarea:focus { | |
| border-color: rgba(124, 108, 255, 0.7); | |
| box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.15); | |
| } | |
| .actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| button { | |
| appearance: none; | |
| border: 0; | |
| border-radius: 12px; | |
| padding: 10px 14px; | |
| background: var(--accent); | |
| color: white; | |
| cursor: pointer; | |
| font-weight: 700; | |
| font-size: 13px; | |
| } | |
| button.secondary { | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| button.ghost { | |
| background: transparent; | |
| color: var(--muted); | |
| font-weight: 600; | |
| border: 1px dashed rgba(255, 255, 255, 0.18); | |
| } | |
| button[disabled] { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| .status { | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .status b.ok { | |
| color: var(--ok); | |
| } | |
| .status b.bad { | |
| color: var(--danger); | |
| } | |
| .kvs { | |
| display: grid; | |
| grid-template-columns: 120px 1fr; | |
| gap: 8px 12px; | |
| align-items: start; | |
| font-size: 13px; | |
| } | |
| .kvs div:nth-child(odd) { | |
| color: var(--muted); | |
| } | |
| pre { | |
| margin: 0; | |
| padding: 12px; | |
| border-radius: 12px; | |
| border: 1px solid var(--border); | |
| background: rgba(0, 0, 0, 0.18); | |
| color: rgba(255, 255, 255, 0.9); | |
| overflow: auto; | |
| max-height: 640px; | |
| line-height: 1.45; | |
| font-size: 12.5px; | |
| } | |
| .section h3 { | |
| margin: 0 0 8px; | |
| font-size: 14px; | |
| } | |
| .list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .item { | |
| padding: 10px 12px; | |
| border-radius: 12px; | |
| border: 1px solid var(--border); | |
| background: rgba(0, 0, 0, 0.12); | |
| } | |
| .item .meta { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 12px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| margin-bottom: 6px; | |
| } | |
| .empty { | |
| color: var(--muted); | |
| font-size: 13px; | |
| padding: 12px; | |
| border: 1px dashed rgba(255, 255, 255, 0.16); | |
| border-radius: 12px; | |
| } | |
| .mono { | |
| font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; | |
| font-size: 12px; | |
| } | |
| @media (max-width: 860px) { | |
| .app { | |
| grid-template-columns: 1fr; | |
| } | |
| .side { | |
| border-right: 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .nav { | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| } | |
| } | |