/* ============================================================================ TopTech MCP Relay — Admin-UI Ein Design-System mit hellem + dunklem Theme. Farb-Tokens in :root (Light), per @media (prefers-color-scheme) und [data-theme] umschaltbar. Der Umschalter in der Sidebar setzt data-theme auf (siehe App.razor). ========================================================================== */ :root { color-scheme: light; --bg: #eef2f7; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f5f9; --text: #0f172a; --muted: #64748b; --border: #e2e8f0; --accent: #0ea5e9; --accent-ink: #04283b; --accent-soft: #e0f2fe; --sidebar: #0f172a; --sidebar-2: #16233f; --sidebar-text: #cbd5e1; --sidebar-muted: #7c8db0; --ok-bg: #dcfce7; --ok-ink: #15803d; --warn-bg: #fef3c7; --warn-ink: #b45309; --bad-bg: #fee2e2; --bad-ink: #b91c1c; --info-bg: #e0f2fe; --info-ink: #0369a1; --neutral-bg: #eef2f7; --neutral-ink: #475569; --shadow: 0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.06); --radius: 12px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0b1220; --surface: #0f172a; --surface-2: #131f38; --surface-3: #16233f; --text: #e5eaf3; --muted: #93a4c0; --border: #24324d; --accent: #38bdf8; --accent-ink: #04283b; --accent-soft: #0c2c46; --sidebar: #060c1a; --sidebar-2: #12203c; --sidebar-text: #c3d0e6; --sidebar-muted: #6c7fa3; --ok-bg: #0f3222; --ok-ink: #86efac; --warn-bg: #3a2c0c; --warn-ink: #fcd34d; --bad-bg: #3f1d1d; --bad-ink: #fecaca; --info-bg: #0c2c46; --info-ink: #7dd3fc; --neutral-bg: #1c2942; --neutral-ink: #aab8d4; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.4); } } /* Expliziter Dark-Override (Umschalter gewinnt gegen System-Präferenz). */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0b1220; --surface: #0f172a; --surface-2: #131f38; --surface-3: #16233f; --text: #e5eaf3; --muted: #93a4c0; --border: #24324d; --accent: #38bdf8; --accent-ink: #04283b; --accent-soft: #0c2c46; --sidebar: #060c1a; --sidebar-2: #12203c; --sidebar-text: #c3d0e6; --sidebar-muted: #6c7fa3; --ok-bg: #0f3222; --ok-ink: #86efac; --warn-bg: #3a2c0c; --warn-ink: #fcd34d; --bad-bg: #3f1d1d; --bad-ink: #fecaca; --info-bg: #0c2c46; --info-ink: #7dd3fc; --neutral-bg: #1c2942; --neutral-ink: #aab8d4; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.4); } * { box-sizing: border-box; } html, body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } .page { display: flex; min-height: 100vh; } /* --- Sidebar --- */ .sidebar { width: 244px; background: var(--sidebar); color: var(--sidebar-text); display: flex; flex-direction: column; padding: 1.1rem 0 .5rem; position: sticky; top: 0; height: 100vh; } .brand { font-size: 1.15rem; font-weight: 700; color: #fff; padding: .4rem 1.35rem 1.35rem; letter-spacing: .01em; } .brand span { color: var(--accent); } .nav-item { display: flex; align-items: center; gap: .6rem; margin: .1rem .6rem; padding: .55rem .75rem; color: var(--sidebar-text); text-decoration: none; border-radius: 9px; font-size: .92rem; transition: background .12s, color .12s; } .nav-item:hover { background: var(--sidebar-2); color: #fff; } .nav-item.active { background: var(--accent); color: var(--accent-ink); font-weight: 600; } .nav-item .ico { width: 18px; text-align: center; opacity: .9; } .nav-item.nav-sub { margin-top: -.05rem; margin-left: 1.4rem; padding-top: .42rem; padding-bottom: .42rem; font-size: .86rem; opacity: .95; } .nav-item.nav-sub .ico { font-size: .82rem; } .sidebar-foot { margin-top: auto; padding: .9rem 1.35rem .4rem; font-size: .78rem; color: var(--sidebar-muted); } .sidebar-foot strong { color: var(--sidebar-text); } .sidebar-version { padding: .5rem 1.35rem; font-size: .68rem; color: var(--sidebar-muted); border-top: 1px solid rgba(255,255,255,.06); margin-top: .5rem; } .logout-btn { background: var(--sidebar-2); color: var(--sidebar-text); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: .38rem .75rem; font-size: .78rem; cursor: pointer; margin-top: .5rem; } .logout-btn:hover { background: #22304e; color: #fff; } .theme-toggle { display: flex; align-items: center; gap: .5rem; width: 100%; background: var(--sidebar-2); color: var(--sidebar-text); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: .45rem .7rem; font-size: .8rem; cursor: pointer; margin: .3rem 0; } .theme-toggle:hover { background: #22304e; color: #fff; } /* --- Content --- */ main { flex: 1; min-width: 0; } .content { padding: 2rem 2.5rem; } h1 { font-size: 1.55rem; margin: 0 0 .3rem; letter-spacing: -.01em; } h2 { font-size: 1.05rem; margin: 1.5rem 0 .8rem; } .hint { color: var(--muted); margin: .25rem 0 1.5rem; max-width: 70ch; line-height: 1.5; } /* --- Cards --- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.3rem; box-shadow: var(--shadow); } .card-num { font-size: 2rem; font-weight: 700; } .card-num.accent { color: var(--accent); } .card-label { color: var(--muted); font-size: .85rem; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.35rem; margin-bottom: 1.5rem; box-shadow: var(--shadow); } /* --- Forms --- */ .form-row { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; } .form-row label { display: flex; flex-direction: column; font-size: .82rem; color: var(--muted); gap: .3rem; } .form-row input, .form-row select { padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 8px; min-width: 220px; background: var(--surface); color: var(--text); } .form-row input:focus, .form-row select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .chk { flex-direction: row !important; align-items: center; gap: .4rem !important; color: var(--text) !important; } /* --- Buttons --- */ .btn { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: .55rem 1.1rem; font-weight: 600; cursor: pointer; transition: filter .12s; } .btn:hover { filter: brightness(1.06); } .btn:disabled { opacity: .55; cursor: default; filter: none; } .btn-sm { padding: .34rem .7rem; font-size: .8rem; } .btn-secondary { background: var(--surface-3); color: var(--text); border: 1px solid var(--border); } .btn-secondary:hover { filter: none; background: var(--surface-2); } .btn-danger { background: var(--bad-bg); color: var(--bad-ink); } .btn-link { background: none; border: 0; color: var(--accent); cursor: pointer; text-decoration: none; padding: .1rem .2rem; font-size: .85rem; } .btn-link:hover { text-decoration: underline; } .btn-link.danger { color: var(--bad-ink); } a.btn { display: inline-block; text-decoration: none; } /* --- Toolbar / Filter --- */ .toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; } .search { flex: 1; min-width: 220px; padding: .55rem .8rem .55rem 2.1rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat .7rem center; color: var(--text); } .search:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .filter-select { padding: .55rem .6rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-size: .88rem; } .filter-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .toolbar .count { color: var(--muted); font-size: .82rem; margin-left: auto; white-space: nowrap; } /* --- Grid / Tables --- */ .grid-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface); } .grid { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .grid.bare { border: 0; border-radius: 0; box-shadow: none; } .grid th, .grid td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--border); vertical-align: top; } .grid th { background: var(--surface-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); position: sticky; top: 0; } .grid tbody tr:nth-child(even) { background: var(--surface-2); } .grid tbody tr:hover { background: var(--accent-soft); } .grid tr:last-child td { border-bottom: 0; } .grid code { font-size: .8rem; color: var(--muted); } .grid select, .grid input { padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); } .muted { color: var(--muted); } .error { color: var(--bad-ink); background: var(--bad-bg); border-radius: 8px; padding: .6rem .8rem; margin: .75rem 0; } .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .4rem; } .dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); } .dot.off { background: #94a3b8; } /* --- Badges (Status-Chips) --- */ .badge { display: inline-block; background: var(--neutral-bg); color: var(--neutral-ink); border-radius: 999px; padding: .12rem .55rem; font-size: .72rem; font-weight: 600; margin-left: .1rem; } .badge.ok { background: var(--ok-bg); color: var(--ok-ink); } .badge.warn { background: var(--warn-bg); color: var(--warn-ink); } .badge.bad { background: var(--bad-bg); color: var(--bad-ink); } .badge.info { background: var(--info-bg); color: var(--info-ink); } /* --- Secret-Box --- */ .secret-box { margin-top: 1rem; background: var(--info-bg); border: 1px solid var(--accent); border-radius: 10px; padding: .9rem 1rem; color: var(--text); } .secret-label { font-size: .8rem; color: var(--info-ink); margin-bottom: .35rem; } .secret { font-size: 1rem; font-weight: 600; word-break: break-all; } .row-revoked { opacity: .5; } /* --- Live-Monitor: laufende Zeile hervorheben (gewinnt gegen Zebra/Hover) --- */ .live-table tbody tr.row-live, .live-table tbody tr.row-live:hover { background: var(--accent-soft) !important; box-shadow: inset 3px 0 0 var(--accent); } /* --- Actions in Tabellen --- */ .actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; } /* --- Usage / Bars --- */ .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .35rem .8rem; margin-top: .5rem; padding: .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); } .bars { display: flex; flex-direction: column; gap: .3rem; } .bar-row { display: flex; align-items: center; gap: .6rem; } .bar-label { width: 3.2rem; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; } .bar-track { flex: 1; height: 14px; background: var(--surface-3); border-radius: 7px; overflow: hidden; } .bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 7px; min-width: 2px; } .bar-val { width: 3rem; text-align: right; font-size: .8rem; font-variant-numeric: tabular-nums; } /* --- Modal (Bestätigungsdialog) --- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(2,6,23,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; } .modal { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; width: 440px; max-width: 100%; box-shadow: 0 30px 80px rgba(0,0,0,.5); } .modal h2 { margin-top: 0; } .modal .modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; } .modal input { width: 100%; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); margin-top: .5rem; }