/* ===================== NodePanel v2 — from scratch ===================== Neues Layout: Top-Navigation + Bento. Aurora-Identitaet (Logo bleibt). */ :root{ --bg:#070a16; --bg2:#0c1126; --surface:#121937; --elevated:#1b2348; --border:rgba(126,150,255,.14); --border2:rgba(126,150,255,.30); --primary:#7c5cf0; --grad:linear-gradient(120deg,#4d9fff 0%,#6f86ff 45%,#a06bff 100%); --grad-soft:linear-gradient(135deg,rgba(77,159,255,.16),rgba(160,107,255,.16)); --ok:#34e29b; --warn:#ffb443; --danger:#ff5a72; --text:#eef1ff; --muted:#9aa3c8; --r:18px; --r-sm:12px; --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif; --mono:"SF Mono","JetBrains Mono",ui-monospace,monospace; /* polish-p4 — Design-System-Fundament: semantische Aliase + Skalen. Single source of truth; bestehende --ok/--danger/--primary bleiben als Wert-Quelle. */ --success:var(--ok); /* kanonisches Gruen (Status/Badges) */ --accent:var(--primary); /* kanonischer Akzent/Primary */ /* Radien-Skala */ --r-lg:24px; /* grosse Karten: Login-Card / Console */ /* Spacing-Skala (4/8/12/16/24) */ --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-24:24px; } *{margin:0;padding:0;box-sizing:border-box} html,body,#app{height:100%} body{ font-family:var(--font);color:var(--text);font-size:14px;line-height:1.5;letter-spacing:-.01em; -webkit-font-smoothing:antialiased; background: radial-gradient(1200px 600px at 100% -10%,rgba(160,107,255,.12),transparent 60%), radial-gradient(1000px 520px at -10% 8%,rgba(77,159,255,.12),transparent 55%), var(--bg); background-attachment:fixed; } a{color:var(--primary);text-decoration:none} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:rgba(126,150,255,.3);border-radius:10px;border:2px solid transparent;background-clip:padding-box} /* ---------- Top Navigation ---------- */ .topbar{ position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:22px; padding:14px 26px;margin:14px 18px;border:1px solid var(--border);border-radius:20px; background:rgba(18,25,55,.72);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%); box-shadow:0 18px 50px -30px rgba(2,5,20,.9); } .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px} .brand .logo{width:30px;height:30px;border-radius:9px;flex-shrink:0} .brand .name{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .nav{display:flex;gap:4px;flex:1;flex-wrap:wrap} .nav a{ display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:12px;color:var(--muted); font-weight:600;font-size:13.5px;transition:.18s; } .nav a:hover{color:var(--text);background:rgba(255,255,255,.04)} .nav a.active{color:#fff;background:var(--grad-soft);box-shadow:inset 0 0 0 1px var(--border2),0 8px 20px -10px rgba(90,110,255,.5)} .nav a .ic{font-size:16px;opacity:.9} .topbar .spacer{flex:0} .user-chip{display:flex;align-items:center;gap:9px;padding:6px 12px 6px 7px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.03);cursor:pointer} .avatar{width:30px;height:30px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;box-shadow:0 4px 14px -4px rgba(90,110,255,.7)} .icon-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;font-size:17px;transition:.18s} .icon-btn:hover{color:var(--text);background:var(--grad-soft)} /* ---------- Content ---------- */ .content{padding:24px 28px 46px} /* ===== ControlHQ Sidebar-Shell ===== */ /* polish-p4: redundante .shell-Grunddefinition entfernt — vollstaendig ueberschrieben durch .shell @ "Viewport"-Block (height:100vh;overflow:hidden) + v5.10-APP-CHROME .shell. Das alte min-height:100vh stand im Konflikt zum spaeteren height+overflow:hidden. */ .gside{display:flex;flex-direction:column;padding:18px 14px;border-right:1px solid var(--border); background:rgba(12,17,38,.66);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%); position:sticky;top:0;height:100vh;overflow-y:auto} .gbrand{display:flex;align-items:center;gap:12px;padding:6px 8px 16px;border-bottom:1px solid var(--border);margin-bottom:10px} .glogo{width:42px;height:42px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;background:var(--grad);box-shadow:0 8px 20px -6px rgba(90,110,255,.6);color:#fff} .glogo svg{width:24px;height:24px} .gbtxt b{display:block;font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1.08} .gbtxt b span{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .gbtxt small{font-size:10.5px;color:var(--muted);letter-spacing:.2px} .gnav{display:flex;flex-direction:column;gap:2px} .navlabel{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#5a6796;padding:13px 11px 5px;font-weight:700} .gnav-i{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;color:var(--muted);font-weight:600;font-size:13.5px;transition:.16s;cursor:pointer} .gnav-i:hover{color:var(--text);background:rgba(255,255,255,.04)} .gnav-i.on{color:#fff;background:var(--grad-soft);box-shadow:inset 0 0 0 1px var(--border2),0 8px 20px -12px rgba(90,110,255,.6)} .gnav-i .gi{font-size:16px;width:20px;text-align:center;flex:0 0 auto} .gnav-i .gt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gnav-i .gext{font-size:11px;opacity:.5} .gfoot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 4px;border-top:1px solid var(--border)} .gfoot .gava{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:700;color:#fff;flex:0 0 auto} .gfoot .gfmeta{display:flex;flex-direction:column;min-width:0} .gfoot .gfmeta small{font-size:10.5px;color:var(--muted)} .gfoot .gfmeta b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gmain{display:flex;flex-direction:column;min-width:0} .gtop{display:flex;align-items:center;gap:14px;justify-content:flex-end;padding:12px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40; background:rgba(12,17,38,.62);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)} .gtop-l{flex:1;min-width:0} .gtop-r{display:flex;align-items:center;gap:var(--space-12)} @media(max-width:880px){.shell{display:block}.gside{position:static;height:auto;flex-direction:column;border-right:none;border-bottom:1px solid var(--border)}.content{padding:18px 16px 40px}} .page-head{display:flex;align-items:flex-end;justify-content:space-between;margin:14px 4px 18px} .page-head h1{font-size:26px;font-weight:800;letter-spacing:-.03em} .page-head p{color:var(--muted);font-size:13.5px;margin-top:2px} /* bento grid */ .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-16)} .card{ background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--surface); border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:0 2px 10px rgba(2,5,20,.5); } .card:hover{border-color:var(--border2)} .col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-6{grid-column:span 6}.col-8{grid-column:span 8}.col-12{grid-column:span 12} @media(max-width:1100px){.col-3{grid-column:span 6}.col-4{grid-column:span 6}.col-8,.col-6{grid-column:span 12}} @media(max-width:680px){.bento>*{grid-column:span 12!important}.topbar{flex-wrap:wrap}} .stat .label{color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em} .stat .big{font-size:34px;font-weight:800;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:6px 0 2px} .stat .sub{color:var(--muted);font-size:12.5px} .bar{height:8px;border-radius:6px;background:var(--elevated);overflow:hidden;margin-top:12px} .bar > i{display:block;height:100%;border-radius:6px;background:var(--grad)} .ring{display:flex;align-items:center;justify-content:center} .card h3{font-size:15px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px} .chart-wrap{position:relative;height:240px} .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:12px;font-family:var(--font);font-weight:600;font-size:13.5px;cursor:pointer;transition:.15s;color:#fff;background:var(--grad);box-shadow:0 8px 22px -10px rgba(90,110,255,.6)} .btn:hover{filter:brightness(1.08)} .btn.ghost{background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--border2)} .btn:active{transform:translateY(1px)} /* polish-p4: real .btn.sm — Markup nutzt "btn ghost sm"/"btn sm" ohne bisherige CSS-Regel */ .btn.sm{padding:var(--space-8) var(--space-12);font-size:12.5px;gap:var(--space-4);border-radius:var(--r-sm)} /* PAKET6: globale Fokus- (Tastatur/A11y) + Disabled- + Busy-Zustaende fuer alle .btn */ .btn:focus-visible{outline:2px solid var(--primary, #6a7bff);outline-offset:2px} .btn:disabled,.btn[disabled],.btn.is-busy{opacity:.6;cursor:not-allowed;filter:none;pointer-events:none} .btn:disabled:hover,.btn[disabled]:hover,.btn.is-busy:hover{filter:none} /* Label-Upload-Button (kein echtes :disabled) im Busy-Zustand sperren */ label.btn.is-busy{opacity:.6;cursor:progress;pointer-events:none} /* Spinner im Button (PAKET6 Busy-State der Aktionsbuttons) */ .btn-spin{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:gsv-btnspin .7s linear infinite;vertical-align:middle} @keyframes gsv-btnspin{to{transform:rotate(360deg)}} /* Mod-Update-Button: Text immer voll sichtbar, Spinner als getrenntes Element (kein .btn-spin auf dem Text-Span) */ .tm-btn-update{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} .tm-spin{display:inline-block;width:13px;height:13px;flex:none;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;animation:gsv-btnspin .7s linear infinite} /* Changelog-Aufklapp pro Update-Zeile */ .tm-cl-toggle{appearance:none;background:none;border:none;padding:2px 0;margin:0;font:inherit;font-size:11px;color:var(--primary);cursor:pointer;display:inline-flex;align-items:center;gap:4px} .tm-cl-toggle:hover{text-decoration:underline} .tm-cl-body{margin-top:6px;max-height:240px;overflow:auto;font-size:12px;line-height:1.5;color:var(--text);background:rgba(0,0,0,.18);border:1px solid var(--border);border-radius:8px;padding:8px 11px} .tm-cl-body :is(h1,h2,h3){font-size:13px;margin:8px 0 4px} .tm-cl-body ul,.tm-cl-body ol{margin:4px 0 4px 18px;padding:0} .tm-cl-body li{margin:2px 0} .tm-cl-body a{color:var(--primary)} .tm-cl-body code{font-family:var(--mono);background:rgba(255,255,255,.08);padding:1px 4px;border-radius:4px;font-size:11px} .tm-cl-body pre{background:rgba(0,0,0,.3);padding:8px;border-radius:6px;overflow:auto} .tm-cl-empty{font-size:11.5px;color:var(--muted);margin-top:6px} .tm-upd-icon{width:30px;height:30px;border-radius:7px;flex:none;object-fit:cover;background:var(--bg2)} .tm-upd-icon-ph{width:30px;height:30px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--bg2);font-size:15px} input,select,textarea{width:100%;font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:12px 14px;outline:none;transition:.15s} input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--grad-soft)} select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px} select option{background:var(--surface);color:var(--text)} input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary)} /* containers list */ .clist{display:flex;flex-direction:column;gap:10px} .crow{display:flex;align-items:center;gap:14px;padding:13px 16px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02);transition:.15s} .crow:hover{border-color:var(--border2);background:var(--grad-soft)} .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} .dot.run{background:var(--ok);box-shadow:0 0 12px var(--ok)} .dot.stop{background:var(--muted)} .crow .cname{font-weight:600} .crow .cmeta{color:var(--muted);font-size:12.5px} .pill{margin-left:auto;font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--grad-soft);color:var(--primary)} /* login */ .login-wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px} .login-card{width:100%;max-width:400px;border:1px solid var(--border);border-radius:var(--r-lg);padding:34px 30px;background:rgba(18,25,55,.6);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 40px 90px -40px rgba(2,5,20,.9)} .login-card .brand{justify-content:center;font-size:24px;margin-bottom:6px} .login-card .brand .logo{width:40px;height:40px} .login-sub{text-align:center;color:var(--muted);margin-bottom:22px;font-size:13.5px} .field{margin-bottom:14px} .field label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px} .err{color:var(--danger);font-size:13px;text-align:center;margin-bottom:10px;min-height:18px} .muted{color:var(--muted)} .spin{width:34px;height:34px;border:3px solid var(--border2);border-top-color:var(--primary);border-radius:50%;animation:sp 1s linear infinite;margin:30px auto} @keyframes sp{to{transform:rotate(360deg)}} .center{display:flex;align-items:center;justify-content:center;min-height:60vh} /* toast */ .toastbox{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:10050;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border2);border-left:3px solid var(--primary);border-radius:12px;padding:12px 20px;font-weight:600;font-size:14px;box-shadow:0 18px 40px -18px rgba(2,5,20,.9);animation:toastIn .25s ease;max-width:92vw} .toastbox.ok{border-left-color:var(--ok)} .toastbox.err{border-left-color:var(--danger)} .toastbox .ti{font-size:15px} .toastbox.ok .ti{color:var(--ok)} .toastbox.err .ti{color:var(--danger)} @keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}} /* Produkt-Karten (End-User-Dashboard) */ .prodgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin-top:8px} .prodcard{border:1px solid var(--border);border-radius:14px;padding:15px 16px;background:rgba(8,11,24,.4);cursor:pointer;transition:.16s} .prodcard:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 18px 40px -28px rgba(2,5,20,.9)} .prodhead{display:flex;align-items:center;gap:9px} .prodhead .cname{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .prodsub{color:var(--muted);font-size:12.5px;margin:2px 0 12px 17px} .prodmetrics{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .pm{display:flex;align-items:center;justify-content:space-between;font-size:12.5px} .pm .pml{color:var(--muted)} .pm b{font-family:var(--mono,ui-monospace,monospace);font-weight:700} .prodactions{display:flex;align-items:center;gap:7px;margin-top:13px} .badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px} .badge.run{background:rgba(52,226,155,.14);color:var(--success)} .badge.stop{background:rgba(154,163,200,.16);color:var(--muted)} /* Modal (Ersatz für natives confirm/prompt) */ .gmodal-ov{position:fixed;inset:0;background:rgba(3,5,14,.68);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;animation:gmf .12s ease} @keyframes gmf{from{opacity:0}to{opacity:1}} .gmodal{width:min(460px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--surface);border:1px solid var(--border2);border-radius:18px;box-shadow:0 28px 80px rgba(0,0,0,.6);padding:22px 22px 18px;animation:gms .16s cubic-bezier(.2,.8,.2,1)} @keyframes gms{from{transform:translateY(10px) scale(.97);opacity:0}to{transform:none;opacity:1}} .gmodal-h{font-size:16.5px;font-weight:700;margin-bottom:10px;color:#fff} .gmodal-b{font-size:13.5px;line-height:1.55;color:var(--muted);white-space:pre-wrap;margin-bottom:15px} .gmodal-in{margin-bottom:16px} .gmodal-f{display:flex;justify-content:flex-end;gap:10px} .gmodal-f .btn{min-width:100px;justify-content:center} .btn.gm-danger{background:linear-gradient(135deg,var(--danger),#ff3d5e);color:#fff;border:none} /* 📊 STATS-CHIP-BUTTON (Chip-Leiste, Game-Server) — oeffnet das Verlauf-Overlay. */ .detail-c.aggr-detail .aggr-chip.aggr-chip-stats{ cursor:pointer;color:inherit;font:inherit;align-items:center;gap:7px; border-color:rgba(127,168,255,.34); background:linear-gradient(135deg,rgba(127,168,255,.14),rgba(127,168,255,.05)); } .detail-c.aggr-detail .aggr-chip.aggr-chip-stats:hover{ border-color:rgba(127,168,255,.6);transform:translateY(-1px); background:linear-gradient(135deg,rgba(127,168,255,.22),rgba(127,168,255,.08)); } .detail-c.aggr-detail .aggr-chip.aggr-chip-stats .aggr-chip-stats-label{ font-size:12.5px;font-weight:700;color:#cfe0ff;letter-spacing:.2px; } /* 📊 STATS-OVERLAY (Modal) — zentriert mit Backdrop, ersetzt den Performance-Tab. */ .stats-ov-backdrop{position:fixed;inset:0;background:rgba(3,5,14,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9998;padding:20px;animation:gmf .12s ease} .stats-ov-modal{width:min(720px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border2);border-radius:18px;box-shadow:0 28px 80px rgba(0,0,0,.6);animation:gms .16s cubic-bezier(.2,.8,.2,1)} .stats-ov-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 20px 12px;border-bottom:1px solid var(--border)} .stats-ov-title{margin:0;font-size:17px;font-weight:700;color:#fff} .stats-ov-sub{font-size:11.5px;flex:1;min-width:120px} .stats-ov-refresh{padding:4px 10px;font-size:11.5px} .stats-ov-x{margin-left:auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:15px;cursor:pointer;transition:all .14s ease} .stats-ov-x:hover{background:rgba(255,90,90,.12);border-color:var(--danger);color:#fff} .stats-ov-body{padding:18px 20px 20px;overflow:auto} @media (max-width:560px){.stats-ov-head{padding:14px 14px 10px}.stats-ov-body{padding:14px}.stats-ov-modal{border-radius:14px}} /* GodLike-Style Server-Detail: Umschalter + linke Sub-Navigation */ .srv-switch{appearance:none;-webkit-appearance:none;background:var(--surface);border:1px solid var(--border2);color:#fff;font-size:19px;font-weight:800;padding:5px 36px 5px 13px;border-radius:12px;cursor:pointer;font-family:inherit;max-width:min(420px,72vw);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 53%,calc(100% - 12px) 53%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;transition:.15s} .srv-switch:hover{border-color:var(--primary)} .srv-switch:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--grad-soft)} .srv-switch option{background:var(--surface);color:var(--text);font-size:14px} .srv-dot{width:10px;height:10px;border-radius:50%;flex:none} .srv-dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(52,226,155,.18)} .srv-dot.off{background:var(--muted);box-shadow:0 0 0 3px rgba(154,163,200,.14)} .srv-shell{display:grid;grid-template-columns:214px 1fr;gap:18px;align-items:start;padding:18px} .srv-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:14px} .srv-nav .btn{width:100%;justify-content:flex-start;padding:10px 14px;border:1px solid transparent;background:transparent;color:var(--muted);font-weight:600;font-size:13.5px} .srv-nav .btn:hover{background:rgba(255,255,255,.05);color:var(--text);border-color:var(--border)} .srv-nav .btn[style*="primary"]{background:var(--grad-soft);color:#fff;border-color:var(--border2)!important} .srv-nav .btn[style*="danger"]{background:rgba(255,90,114,.10);border-color:var(--danger)!important} .srv-main{min-width:0} @media(max-width:860px){.srv-shell{grid-template-columns:1fr;padding:14px}.srv-nav{flex-direction:row;flex-wrap:wrap;position:static}.srv-nav .btn{width:auto}} /* Admin-Dashboard: Server-(Node-)Übersicht */ .nodecard{padding:0;overflow:hidden} .nodehead{display:flex;align-items:center;gap:14px;padding:15px 18px;background:var(--grad-soft);border-bottom:1px solid var(--border);flex-wrap:wrap} .nodename{font-size:16px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .nodepill{background:rgba(124,139,255,.16);color:var(--primary);font-size:11px} .nodestats{display:flex;gap:18px} .nodestats .ns{display:flex;flex-direction:column;align-items:flex-end;min-width:46px} .nodestats .ns span{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600} .nodestats .ns b{font-size:16px} .nodegroup{padding:12px 18px 2px} .nodegrouplabel{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em} .nodeos{display:flex;gap:10px} .nodeos button{flex:1;padding:12px;border:1px solid var(--border2);border-radius:12px;background:rgba(255,255,255,.03);color:var(--text);cursor:pointer;font-size:13.5px;font-family:inherit;transition:.15s} .nodeos button:hover{border-color:var(--primary)} .nodeos button.on{background:var(--grad-soft);border-color:var(--primary);color:#fff} .codebox{font-family:var(--mono);font-size:12.5px;background:#05070f;border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:#9fe7c4;word-break:break-all;line-height:1.5} .col-chev{display:inline-block;width:15px;font-size:11px;color:var(--muted);text-align:center} /* DB-Konsole Ergebnis-Tabelle */ .sqltbl{border-collapse:collapse;width:100%;font-size:12.5px} .sqltbl th{position:sticky;top:0;background:var(--surface);text-align:left;padding:8px 10px;border-bottom:1px solid var(--border2);font-family:var(--mono);color:var(--primary);white-space:nowrap;z-index:1} .sqltbl td{padding:7px 10px;border-bottom:1px solid var(--border);font-family:var(--mono);white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis} .sqltbl tr:hover td{background:rgba(255,255,255,.03)} /* One-Click Game-Picker */ .catchip{padding:7px 14px;border-radius:999px;border:1px solid var(--border2);background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;font-size:13px;white-space:nowrap;font-family:inherit;transition:.15s} .catchip:hover{color:var(--text);border-color:var(--primary)} .catchip.on{background:var(--grad-soft);color:#fff;border-color:var(--primary)} .gamegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px} .gamecard{cursor:pointer;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:var(--bg2);transition:.16s} .gamecard:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:0 12px 30px -12px rgba(90,110,255,.55)} .gamecover{position:relative;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:var(--grad)} .gamecover.game{background:linear-gradient(135deg,#4d9fff,#a06bff)} .gamecover.web{background:linear-gradient(135deg,#34e29b,#1f9d6b)} .gamecover.database{background:linear-gradient(135deg,#ffb443,#ff7a3d)} .gamecover.vps{background:linear-gradient(135deg,#7c8bff,#5a6a9e)} .gameicon{font-size:42px;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))} .gamever{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .gamename{padding:10px 12px 2px;font-weight:700;font-size:13.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gamecat{padding:0 12px 11px;font-size:11px;color:var(--muted)} /* Mod/Plugin-Browser Karten */ .modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;max-height:440px;overflow:auto;padding:2px} .modcard{cursor:pointer;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--bg2);display:flex;flex-direction:column;transition:.15s} .modcard:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 10px 26px -14px rgba(90,110,255,.5)} .modbanner{height:82px;display:flex;align-items:center;justify-content:center;background:var(--grad-soft);overflow:hidden} .modbanner img{width:100%;height:100%;object-fit:cover} .modbanner .modicon{font-size:34px} .modbody{padding:10px 12px;display:flex;flex-direction:column;gap:4px;flex:1} .modname{font-weight:700;font-size:13.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .moddesc{font-size:11.5px;color:var(--muted);line-height:1.4;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .modmeta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;margin-top:4px} h3:hover>.col-chev,.nodegrouplabel:hover>.col-chev{color:var(--primary)} /* (entfernt) .btn-spin::after + @keyframes btnSpin — kollidierte mit .btn-spin (Z.134): doppelter Spinner und auf Text-Spans Text auf 13px-Kreis abgeschnitten. .btn-spin (gsv-btnspin) bleibt einzige Spinner-Quelle (leeres Span). */ /* ===== APP-LAYOUT (single source of truth — alle alten Layout-Edits ersetzt) ===== */ /* Viewport: ganze App auf 100vh, kein Page-Scroll */ html,body{height:100vh;overflow:hidden;margin:0} .shell{display:grid;grid-template-columns:252px 1fr;height:100vh;overflow:hidden;position:relative} .shell.gside-collapsed{grid-template-columns:64px 1fr} /* Sidebar: 100vh, eigener Scroll wenn Nav-Liste lang, KEINE sichtbare Scrollbar */ .gside{height:100vh;overflow-y:auto;overflow-x:visible; transition:width .22s ease,padding .22s ease; scrollbar-width:none;-ms-overflow-style:none} .gside::-webkit-scrollbar{display:none;width:0} /* Toggle-Button: absolut zur .shell (außerhalb .gside damit kein Clipping) */ .gside-toggle{position:absolute;left:240px;top:18px;width:26px;height:26px;border-radius:50%; border:1px solid var(--border2);background:var(--surface);color:var(--muted);cursor:pointer; font-size:14px;line-height:1;display:grid;place-items:center;z-index:60; box-shadow:0 4px 10px -4px rgba(2,5,20,.7);transition:.18s;padding:0} .gside-toggle:hover{color:var(--text);border-color:var(--primary);transform:scale(1.08)} .shell.gside-collapsed .gside-toggle{left:52px;transform:rotate(180deg)} .shell.gside-collapsed .gside-toggle:hover{transform:rotate(180deg) scale(1.08)} /* Main-Bereich rechts: 100vh, top-bar fix, content scrollt wenn nötig */ .gmain{height:100vh;overflow:hidden;display:flex;flex-direction:column;min-width:0} .gmain > .gtop{flex-shrink:0} .gmain > .content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:24px 28px 28px} /* Container-Detail: spezielles No-Scroll-Layout — nur .srv-main scrollt */ .gmain > .content:has(> .detail-c){overflow:hidden;padding:0 28px} /* === DEPRECATED-by-v5.10-APP-BASE === legacy HTN-LAYOUT .detail-c; ersetzt durch v5.10-APP-BASE block weiter unten .detail-c{display:flex !important;flex-direction:column;height:100%;overflow:hidden} */ .detail-sticky-top{flex-shrink:0;padding:14px 0 10px;display:flex;flex-direction:column;gap:10px;background:var(--bg);z-index:5} .detail-sticky-top > .page-head{margin:0 4px 4px} .detail-sticky-top > .card{margin:0} .detail-c > .bento{display:flex;flex-direction:column;flex:1;min-height:0;gap:0;overflow:hidden;margin:0} /* srv-shell: items füllen Zelle vertikal (kein align-items:start hier) */ .detail-c > .bento > .srv-shell{flex:1 1 auto;min-height:0;overflow:hidden;padding:14px;align-items:stretch !important;height:100%} /* srv-nav: scrollt selbst, full-height der Grid-Cell */ .detail-c .srv-nav{position:static !important;align-self:stretch !important;height:100%;max-height:100%;overflow-y:auto;scrollbar-width:thin} .detail-c .srv-nav::-webkit-scrollbar{width:6px} .detail-c .srv-nav::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px} /* srv-main: das einzige Scroll-Element, füllt Cell vertikal komplett */ .detail-c .srv-main{align-self:stretch !important;height:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;min-height:0;padding-right:6px;scrollbar-width:thin} .detail-c .srv-main::-webkit-scrollbar{width:8px} .detail-c .srv-main::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px} /* Log-Viewer: KEIN flex:1 mehr (würde mit srv-main:overflow:auto kollidieren). Feste min-height, Konsole hat ihren eigenen internen Scroll. Wenn Viewport schmal, scrollt srv-main. */ .detail-c #gamelogbox,.detail-c #logbox{height:55vh !important;min-height:280px;max-height:60vh} /* DUPLIKAT-RULES gelöscht (alte .gside-toggle{right:-12px} hat den Fix oben überschrieben) */ .gside-hamburger{display:none;width:38px;height:38px;border:1px solid var(--border);border-radius:11px;background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;font-size:18px;align-items:center;justify-content:center} .gside-hamburger:hover{color:var(--text);background:var(--grad-soft)} /* Collapsed state — applied on .shell, cascades into .gside */ /* === DEPRECATED-by-v5.10-APP-BASE === identische Regel bereits weiter oben (line ~253) deklariert .shell.gside-collapsed{grid-template-columns:64px 1fr} */ .shell.gside-collapsed .gside{padding:18px 8px} .shell.gside-collapsed .gside-toggle{transform:rotate(180deg)} .shell.gside-collapsed .gbrand{justify-content:center;gap:0;padding:6px 0 16px} .shell.gside-collapsed .gbtxt{display:none} .shell.gside-collapsed .navlabel{display:none} .shell.gside-collapsed .gnav-i{justify-content:center;padding:10px 6px;position:relative} .shell.gside-collapsed .gnav-i .gt, .shell.gside-collapsed .gnav-i .gext{display:none} .shell.gside-collapsed .gfoot{justify-content:center;padding:12px 0 4px} .shell.gside-collapsed .gfoot .gfmeta{display:none} /* data-label CSS-tooltip for collapsed nav (and any element with data-label) */ .shell.gside-collapsed .gnav-i[data-label]:hover::after{ content:attr(data-label);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%); background:var(--surface);color:var(--text);border:1px solid var(--border2);border-radius:8px; padding:6px 10px;font-size:12px;font-weight:600;white-space:nowrap;z-index:60; box-shadow:0 8px 22px -10px rgba(2,5,20,.9);pointer-events:none} /* Mobile drawer */ @media(max-width:880px){ .gside-hamburger{display:inline-flex} .shell{grid-template-columns:1fr} .gside{position:fixed;top:0;left:0;height:100vh;width:260px;transform:translateX(-100%);transition:transform .22s ease;z-index:80;border-right:1px solid var(--border)} .shell.gside-mobile-open .gside{transform:translateX(0)} .shell.gside-mobile-open::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:70} .gside-toggle{display:none} /* on mobile, collapsed-state desktop styles should not apply */ .shell.gside-collapsed{grid-template-columns:1fr} .shell.gside-collapsed .gside{padding:18px 14px;width:260px} .shell.gside-collapsed .gbtxt, .shell.gside-collapsed .navlabel, .shell.gside-collapsed .gnav-i .gt, .shell.gside-collapsed .gnav-i .gext, .shell.gside-collapsed .gfoot .gfmeta{display:initial} .shell.gside-collapsed .gnav-i{justify-content:flex-start;padding:9px 11px} .shell.gside-collapsed .gbrand{justify-content:flex-start;gap:12px;padding:6px 8px 16px} .shell.gside-collapsed .gfoot{justify-content:flex-start;padding:12px 8px 4px} } /* v5.10 HTN-LAYOUT */ .dash-grid { display:grid; grid-template-columns: 3fr 2fr; gap:14px; height:100%; align-items:stretch } /* v5.10 HTN-LAYOUT */ .dash-stats-col { display:flex; flex-direction:column; gap:12px; overflow:auto; min-height:0 } /* v5.10 HTN-LAYOUT */ .dash-stat-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px } /* v5.10 HTN-LAYOUT */ .dash-stat-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:6px } /* v5.10 HTN-LAYOUT */ .dash-stat-card:hover { border-color:var(--border2) } /* v5.10 HTN-LAYOUT */ .dash-stat-card .ico { font-size:12px; font-weight:600; opacity:0.75; text-transform:uppercase; letter-spacing:.05em; color:var(--muted) } /* v5.10 HTN-LAYOUT */ .dash-stat-card .val { font-size:22px; font-weight:700; letter-spacing:-.01em } /* v5.10 HTN-LAYOUT */ .dash-stat-card .bar { height:6px; background:rgba(255,255,255,0.06); border-radius:3px; overflow:hidden; margin-top:auto } /* v5.10 HTN-LAYOUT */ .dash-stat-card .bar > i { display:block; height:100%; background:var(--primary); transition:width 0.3s; border-radius:3px } /* v5.10 HTN-LAYOUT */ .dash-server-info { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:6px } /* v5.10 HTN-LAYOUT */ .dash-info-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; padding:4px 0; border-bottom:1px solid var(--border) } /* v5.10 HTN-LAYOUT */ .dash-info-row:last-child { border-bottom:0 } /* v5.10 HTN-LAYOUT */ .dash-info-row b { font-weight:600 } /* v5.10 HTN-LAYOUT */ .dash-console-col { display:flex; flex-direction:column; min-height:0 } /* v5.10 HTN-LAYOUT */ .dash-console-col > .card { display:flex; flex-direction:column; flex:1; min-height:0; margin:0 } /* v5.10 HTN-LAYOUT */ .dash-console-col #gamelogbox { flex:1; min-height:0; height:auto !important; max-height:none !important } /* v5.10 HTN-LAYOUT — Server-Card (HTN-Look) für Produkt-Grid */ .prodcard { border-radius:14px; transition:.16s; position:relative } /* v5.10 HTN-LAYOUT */ .prodcard .prodhead .badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px } /* v5.10 HTN-LAYOUT */ .prodcard .prodhead .badge.run::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); display:inline-block } /* v5.10 HTN-LAYOUT */ .prodcard .prodhead .badge.stop::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--danger); display:inline-block } /* v5.10 HTN-LAYOUT — Detail-Konsole im Grid darf keine feste vh-Höhe haben */ .detail-c .dash-console-col #gamelogbox { height:100% !important; min-height:0 !important; max-height:none !important } /* v5.10 HOTFIX-DUP-STATS — sticky-top CPU/RAM/Disk/Net row hidden on Dashboard tab; ensure dash-grid + console get usable viewport-anchored height */ .detail-c .dash-grid { min-height: calc(70vh - 160px) } /* v5.10 HOTFIX-DUP-STATS */ .detail-c .dash-console-col { min-height: calc(60vh - 160px) } /* v5.10 HOTFIX-DUP-STATS */ .detail-c .dash-console-col #gamelogbox { min-height: calc(60vh - 200px) !important } /* ================ v5.10-APP-BASE ================ */ /* Operator-Console Design System — scoped to .detail-c. Provides design tokens, chrome layout, page-head pill, sidebar nav. All new tokens are scoped under .detail-c so they don't leak globally. */ /* === DEPRECATED-by-v5.10-APP-BASE === dead token clone removed in polish-p4 (was consolidated into APP-BASE canvas block below; canonical --app-* live on :root,.shell @ APP-CHROME). */ /* v5.10-APP-BASE — single source of truth: design tokens + outer canvas merged */ .detail-c{ --app-bg-0:#060810; --app-bg-1:#0a0d18; --app-surface-0:rgba(15,20,35,0.5); --app-surface-1:rgba(20,26,42,0.7); --app-border-0:rgba(255,255,255,0.07); --app-border-1:rgba(255,255,255,0.10); --app-accent:#7c5cf0; --app-accent-soft:rgba(124,92,240,0.12); --app-accent-glow:rgba(124,92,240,0.28); --app-success:var(--success); /* polish-p4: single-source -> --success(#34e29b) */ --app-warn:#ffb84d; --app-danger:#ff5c7c; --app-text:#e8ecf5; --app-text-muted:#9aa3c8; --app-r-sm:8px; --app-r-md:12px; --app-r-lg:16px; --app-shadow-card:0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6); --app-blur:blur(14px) saturate(140%); --gtop-h:60px; height:calc(100vh - var(--gtop-h, 60px)) !important; max-height:calc(100vh - var(--gtop-h, 60px)); overflow:hidden !important; padding:12px 16px !important; color:var(--app-text); background: radial-gradient(900px 480px at 100% -8%, rgba(77,159,255,0.07), transparent 60%), radial-gradient(720px 420px at -8% 0%, rgba(160,107,255,0.06), transparent 55%), linear-gradient(180deg, var(--app-bg-1) 0%, var(--app-bg-0) 100%); display:flex !important; flex-direction:column; gap:10px; } /* v5.10-APP-BASE — sticky top region (page-head + optional info bars) */ .detail-c .detail-sticky-top{ flex:0 0 auto !important; padding:0 !important; display:flex; flex-direction:column; gap:10px; background:transparent !important; } /* v5.10-APP-BASE — page-head as floating glass card with pill area */ .detail-c .detail-sticky-top > .page-head{ margin:0 !important; padding:12px 16px !important; border:1px solid var(--app-border-1); border-radius:var(--app-r-lg); background:linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%), var(--app-surface-1); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); display:flex !important; align-items:center !important; gap:14px; position:relative; overflow:visible; } /* v5.10-APP-BASE — page-head h1 cleanup */ .detail-c .detail-sticky-top > .page-head h1{ font-size:18px !important; font-weight:700 !important; letter-spacing:-.01em; color:var(--app-text); } .detail-c .detail-sticky-top > .page-head h1 a{ color:var(--app-text-muted); font-size:18px; padding:2px 8px; border-radius:var(--app-r-sm); transition:.16s; } .detail-c .detail-sticky-top > .page-head h1 a:hover{ color:var(--app-accent); background:var(--app-accent-soft); } .detail-c .detail-sticky-top > .page-head p{ font-size:11.5px !important; color:var(--app-text-muted) !important; margin:2px 0 0 !important; } /* v5.10-APP-BASE — server switch dropdown polish */ .detail-c .srv-switch{ font-size:15px !important; font-weight:700 !important; background:var(--app-surface-0) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-md) !important; padding:5px 30px 5px 11px !important; color:var(--app-text) !important; transition:.16s; } .detail-c .srv-switch:hover{ border-color:var(--app-accent) !important; } .detail-c .srv-switch:focus{ border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; } /* v5.10-APP-BASE — head-center pill stack */ .detail-c .head-center{ flex:1 1 auto; display:flex; justify-content:center; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; } /* v5.10-APP-BASE — head-pill: glass capsule with bottom progress bar slot */ .detail-c .head-pill{ position:relative; display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; border:1px solid var(--app-border-1); background:var(--app-surface-0); font-size:12.5px; line-height:1.1; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:.16s; overflow:hidden; } .detail-c .head-pill:hover{ border-color:var(--app-accent); box-shadow:0 0 0 3px var(--app-accent-soft); } .detail-c .head-pill .muted{ color:var(--app-text-muted); } .detail-c .head-pill-bar{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,0.04); overflow:hidden; } .detail-c .head-pill-bar > i{ display:block; height:100%; background:var(--app-accent); transition:width .3s ease; } .detail-c .head-pill-btn{ padding:1px 6px !important; font-size:10.5px !important; border-radius:var(--app-r-sm) !important; background:rgba(255,255,255,0.05) !important; border:1px solid var(--app-border-1) !important; line-height:1.2 !important; } .detail-c .head-pill-btn:hover{ background:var(--app-accent-soft) !important; border-color:var(--app-accent) !important; } /* v5.10-APP-BASE — server status dot with pulse animation */ .detail-c .srv-dot{ width:10px; height:10px; border-radius:50%; flex:none; position:relative; } .detail-c .srv-dot.on{ background:var(--app-success); box-shadow:0 0 0 3px rgba(52,226,155,0.18), 0 0 12px var(--app-success); animation:appDotPulse 2.2s ease-in-out infinite; } .detail-c .srv-dot.off{ background:var(--app-danger); box-shadow:0 0 0 3px rgba(255,92,124,0.16); } @keyframes appDotPulse{ 0%, 100% { box-shadow:0 0 0 3px rgba(52,226,155,0.18), 0 0 12px var(--app-success); } 50% { box-shadow:0 0 0 5px rgba(52,226,155,0.10), 0 0 18px var(--app-success); } } /* v5.10-APP-BASE — pill (status pill) in page-head reskinned */ .detail-c .detail-sticky-top > .page-head .pill{ background:var(--app-accent-soft) !important; color:var(--app-accent) !important; border:1px solid var(--app-border-1); font-weight:700; font-size:10.5px; padding:3px 9px; } /* v5.10-APP-BASE — primary action buttons in page-head */ .detail-c .detail-sticky-top > .page-head .btn{ padding:8px 14px; font-size:12.5px; border-radius:var(--app-r-md); background:linear-gradient(135deg, var(--app-accent), #9579ff); box-shadow:0 6px 18px -8px var(--app-accent-glow); } .detail-c .detail-sticky-top > .page-head .btn.ghost{ background:var(--app-surface-0); color:var(--app-text); border:1px solid var(--app-border-1); box-shadow:none; } .detail-c .detail-sticky-top > .page-head .btn.ghost:hover{ border-color:var(--app-accent); background:var(--app-accent-soft); } /* v5.10-APP-BASE — bento container as flex column owning remaining space */ .detail-c > .bento{ display:flex !important; flex-direction:column; flex:1 1 auto !important; min-height:0; overflow:hidden !important; margin:0 !important; gap:0; } /* v5.10-APP-BASE — secondary stats strip (when shown on non-dashboard tabs) */ .detail-c > .bento > .card[style*="padding:10px 14px"]{ background:var(--app-surface-0) !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-md) !important; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); margin-bottom:8px !important; box-shadow:none !important; } /* v5.10-APP-BASE — srv-shell layout: sidebar + main */ .detail-c .srv-shell{ display:grid !important; grid-template-columns:200px 1fr !important; gap:12px !important; flex:1 1 auto !important; min-height:0; height:100% !important; overflow:hidden !important; padding:12px !important; background:var(--app-surface-0); border:1px solid var(--app-border-0); border-radius:var(--app-r-lg); box-shadow:var(--app-shadow-card); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); align-items:stretch !important; } /* v5.10-APP-BASE — sidebar nav capsule */ .detail-c .srv-nav{ display:flex !important; flex-direction:column; gap:4px; position:static !important; align-self:stretch !important; height:100% !important; max-height:100%; overflow-y:auto; padding:8px 6px; background:var(--app-bg-1); border:1px solid var(--app-border-0); border-radius:var(--app-r-md); scrollbar-width:thin; } .detail-c .srv-nav::-webkit-scrollbar{ width:5px; } .detail-c .srv-nav::-webkit-scrollbar-thumb{ background:var(--app-border-1); border-radius:3px; } /* v5.10-APP-BASE — sidebar nav buttons (.btn.ghost overrides) */ .detail-c .srv-nav .btn{ width:100% !important; justify-content:flex-start !important; gap:9px; padding:9px 11px !important; font-size:12.5px !important; font-weight:600 !important; border:1px solid transparent !important; background:transparent !important; color:var(--app-text-muted) !important; border-radius:var(--app-r-sm) !important; box-shadow:none !important; text-align:left; transition:.14s; position:relative; } .detail-c .srv-nav .btn:hover{ background:rgba(255,255,255,0.04) !important; color:var(--app-text) !important; border-color:var(--app-border-1) !important; } /* v5.10-APP-BASE — active tab uses accent border + soft fill */ .detail-c .srv-nav .btn[style*="primary"]{ background:var(--app-accent-soft) !important; color:var(--app-text) !important; border-color:var(--app-accent) !important; box-shadow:inset 0 0 0 1px var(--app-accent-soft), 0 4px 14px -8px var(--app-accent-glow) !important; } .detail-c .srv-nav .btn[style*="danger"]{ background:rgba(255,92,124,0.10) !important; color:var(--app-danger) !important; border-color:var(--app-danger) !important; } /* v5.10-APP-BASE — srv-main: only inner scroll, fills cell */ .detail-c .srv-main{ align-self:stretch !important; height:100% !important; max-height:100%; overflow-y:auto !important; overflow-x:hidden; min-height:0; padding:0 6px 0 2px; scrollbar-width:thin; } .detail-c .srv-main::-webkit-scrollbar{ width:7px; } .detail-c .srv-main::-webkit-scrollbar-thumb{ background:var(--app-border-1); border-radius:4px; } .detail-c .srv-main::-webkit-scrollbar-thumb:hover{ background:var(--app-accent-soft); } /* v5.10-APP-BASE — generic card polish inside srv-main (subtle, doesn't conflict) */ .detail-c .srv-main > div > .card, .detail-c .srv-main .card{ background:var(--app-surface-0); border:1px solid var(--app-border-0); border-radius:var(--app-r-md); box-shadow:none; } .detail-c .srv-main .card:hover{ border-color:var(--app-border-1); } /* v5.10-APP-BASE — empty state / placeholder polish */ .detail-c .srv-main .muted{ color:var(--app-text-muted); } /* v5.10-APP-BASE — log boxes keep their own scroll inside srv-main */ .detail-c #gamelogbox, .detail-c #logbox{ background:#05070f !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-md) !important; font-family:var(--mono); } /* v5.10-APP-BASE — no-scroll invariant for known interior containers */ .detail-c .dash-grid{ overflow:hidden !important; } /* v5.10-APP-BASE — responsive collapse: sidebar becomes top strip below 980px */ @media(max-width:980px){ .detail-c .srv-shell{ grid-template-columns:1fr !important; grid-template-rows:auto 1fr; } .detail-c .srv-nav{ flex-direction:row !important; flex-wrap:wrap; height:auto !important; max-height:none; overflow-x:auto; overflow-y:hidden; } .detail-c .srv-nav .btn{ width:auto !important; } } /* ================ v5.10-APP-TAB-MODS ================ */ /* Mods/Plugins tab — search/filter toolbar, mod-grid cards, installed list, modpacks. All rules scoped under .detail-c .tab-mods so they cannot leak. */ /* v5.10-APP-TAB-MODS — tab root: scrollable area below the page-head */ .detail-c .tab-mods{ display:flex; flex-direction:column; gap:0; padding:2px 2px 8px; } /* v5.10-APP-TAB-MODS — compatibility hint bar (loader + MC version pills) */ .detail-c .tab-mods .tm-compat-bar{ padding:8px 12px !important; background:var(--app-surface-0); border:1px solid var(--app-border-0); border-radius:var(--app-r-md); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); margin-bottom:12px !important; } .detail-c .tab-mods .tm-compat-bar .pill{ background:var(--app-accent-soft) !important; color:var(--app-accent) !important; border:1px solid rgba(124,92,240,0.22) !important; border-radius:999px !important; font-weight:600 !important; letter-spacing:.02em; } /* v5.10-APP-TAB-MODS — search/filter toolbar as a sticky-feeling card */ .detail-c .tab-mods .tm-toolbar{ padding:10px 12px !important; background:var(--app-surface-0); border:1px solid var(--app-border-0); border-radius:var(--app-r-md); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); margin-bottom:10px !important; align-items:center; } .detail-c .tab-mods .tm-search{ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-sm) !important; color:var(--app-text) !important; padding:8px 12px !important; font-size:13px !important; transition:border-color .16s, box-shadow .16s; } .detail-c .tab-mods .tm-search::placeholder{ color:var(--app-text-muted); } .detail-c .tab-mods .tm-search:focus{ outline:none !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; } .detail-c .tab-mods .tm-btn-primary{ background:linear-gradient(135deg, var(--app-accent), #9579ff) !important; border:0 !important; color:#04121e !important; font-weight:700 !important; border-radius:var(--app-r-sm) !important; padding:8px 16px !important; box-shadow:0 6px 18px -8px var(--app-accent-glow); transition:transform .15s ease, box-shadow .15s ease; } .detail-c .tab-mods .tm-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -10px var(--app-accent-glow); } .detail-c .tab-mods .tm-btn-scan{ background:rgba(255,255,255,0.04) !important; border:1px solid var(--app-border-1) !important; color:var(--app-text) !important; border-radius:var(--app-r-sm) !important; padding:8px 14px !important; transition:background .15s ease, border-color .15s ease, transform .15s ease; } .detail-c .tab-mods .tm-btn-scan:hover{ background:var(--app-accent-soft) !important; border-color:var(--app-accent) !important; transform:translateY(-1px); } /* v5.10-APP-TAB-MODS — sources row (provider chips) */ .detail-c .tab-mods .tm-sources{ padding:6px 4px !important; margin-bottom:14px !important; } .detail-c .tab-mods .tm-sources-label{ font-size:11px !important; text-transform:uppercase; letter-spacing:.08em; color:var(--app-text-muted) !important; font-weight:600; } .detail-c .tab-mods .catchip{ background:var(--app-surface-0) !important; border:1px solid var(--app-border-1) !important; color:var(--app-text-muted) !important; border-radius:999px !important; padding:6px 14px !important; font-size:12.5px !important; font-weight:600; transition:.16s; } .detail-c .tab-mods .catchip:hover{ color:var(--app-text) !important; border-color:var(--app-accent) !important; background:var(--app-accent-soft) !important; } .detail-c .tab-mods .catchip.on{ color:#04121e !important; background:var(--app-accent) !important; border-color:var(--app-accent) !important; box-shadow:0 4px 12px -4px var(--app-accent-glow); } /* v5.10-APP-TAB-MODS — section titles */ .detail-c .tab-mods .tm-sec-title{ font-size:14px !important; font-weight:700 !important; letter-spacing:-.005em; color:var(--app-text); margin:4px 2px 10px !important; } .detail-c .tab-mods .tm-installed-title{ margin-top:22px !important; padding-top:14px; border-top:1px dashed rgba(255,255,255,0.06); } /* v5.10-APP-TAB-MODS — mod search results grid */ .detail-c .tab-mods .modgrid{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important; gap:12px !important; max-height:52vh !important; overflow-y:auto !important; padding:2px 6px 2px 2px !important; } .detail-c .tab-mods .modgrid::-webkit-scrollbar{ width:8px } .detail-c .tab-mods .modgrid::-webkit-scrollbar-thumb{ background:var(--app-border-1,#2a3350); border-radius:4px } /* v5.10-APP-TAB-MODS — mod cards (search results) */ .detail-c .tab-mods .modcard{ background:var(--app-surface-0) !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-md) !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); overflow:hidden; display:flex; flex-direction:column; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .detail-c .tab-mods .modcard:hover{ border-color:var(--app-accent) !important; transform:translateY(-2px); box-shadow:0 18px 36px -18px rgba(0,0,0,0.7), 0 0 0 1px var(--app-accent-soft); } .detail-c .tab-mods .modcard .modbanner{ height:88px; background:linear-gradient(135deg, var(--app-accent-soft), rgba(160,107,255,0.10)) !important; border-bottom:1px solid var(--app-border-0); display:flex; align-items:center; justify-content:center; } .detail-c .tab-mods .modcard .modbanner .modicon{ font-size:36px; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.25)); } .detail-c .tab-mods .modcard .modbody{ padding:12px 13px !important; gap:5px !important; } .detail-c .tab-mods .modcard .modname{ color:var(--app-text) !important; font-size:13.5px !important; font-weight:700 !important; } .detail-c .tab-mods .modcard .moddesc{ color:var(--app-text-muted) !important; font-size:11.5px !important; line-height:1.45 !important; } .detail-c .tab-mods .modcard .modmeta{ margin-top:6px !important; padding-top:6px; border-top:1px solid rgba(255,255,255,0.04); } .detail-c .tab-mods .modcard .modmeta .btn{ background:var(--app-accent-soft) !important; border:1px solid rgba(124,92,240,0.22) !important; color:var(--app-accent) !important; font-weight:700 !important; border-radius:var(--app-r-sm) !important; transition:.15s; } .detail-c .tab-mods .modcard .modmeta .btn:hover{ background:var(--app-accent) !important; color:#04121e !important; } /* v5.10-APP-TAB-MODS — version-picker modal card */ .detail-c .tab-mods .tm-modal-card{ background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%), var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-lg) !important; box-shadow:var(--app-shadow-card), 0 24px 60px -20px rgba(0,0,0,0.8); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); padding:18px !important; } /* v5.10-APP-TAB-MODS — installed mods list as compact list */ .detail-c .tab-mods .tm-installed{ background:var(--app-surface-0); border:1px solid var(--app-border-0); border-radius:var(--app-r-md); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); padding:6px; overflow:hidden; } .detail-c .tab-mods .tm-installed .tm-installed-row{ padding:8px 10px !important; border-bottom:1px dashed rgba(255,255,255,0.06) !important; transition:background .14s ease; border-radius:var(--app-r-sm); } .detail-c .tab-mods .tm-installed .tm-installed-row:last-of-type{ border-bottom:0 !important; } .detail-c .tab-mods .tm-installed .tm-installed-row:hover{ background:rgba(124,92,240,0.04); } .detail-c .tab-mods .tm-installed .tm-installed-row .cname{ color:var(--app-text) !important; font-size:13px !important; font-weight:600; } .detail-c .tab-mods .tm-installed .tm-installed-row .cmeta{ color:var(--app-text-muted) !important; font-size:11px !important; } .detail-c .tab-mods .tm-installed .tm-installed-row .pill{ background:var(--app-accent-soft) !important; color:var(--app-accent) !important; border:1px solid rgba(124,92,240,0.22) !important; border-radius:999px !important; font-size:10.5px !important; letter-spacing:.04em; padding:2px 9px !important; text-transform:uppercase; font-weight:700; } /* v5.10-APP-TAB-MODS — empty state card */ .detail-c .tab-mods .tm-empty{ background:var(--app-surface-0); border:1px dashed var(--app-border-1); border-radius:var(--app-r-md); margin:4px 0; padding:34px 16px !important; } /* v5.10-APP-TAB-MODS — modpacks section panel */ .detail-c .tab-mods .tm-modpacks{ margin-top:22px !important; padding:16px !important; border-top:0 !important; background:var(--app-surface-0); border:1px solid var(--app-border-0); border-radius:var(--app-r-md); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); } .detail-c .tab-mods .tm-modpacks h3{ font-size:14px !important; font-weight:700 !important; color:var(--app-text); margin-bottom:6px !important; } .detail-c .tab-mods .tm-modpacks input{ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-sm) !important; color:var(--app-text) !important; padding:8px 12px !important; font-size:13px !important; } .detail-c .tab-mods .tm-modpacks input:focus{ outline:none !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; } .detail-c .tab-mods .tm-modpacks .clist .crow{ border-bottom:1px dashed rgba(255,255,255,0.06); padding:8px 10px; transition:background .14s ease; } .detail-c .tab-mods .tm-modpacks .clist .crow:hover{ background:rgba(124,92,240,0.04); } .detail-c .tab-mods .tm-modpacks .clist .crow:last-child{ border-bottom:0; } /* ================ v5.10-APP-TAB-DASH ================ */ /* Game Dashboard tab — stat cards, server-info table, console hero, log toolbar. Scoped to .detail-c .tab-dash. All rules use --app-* tokens from v5.10-APP-BASE. */ /* v5.10-APP-TAB-DASH — outer container layout */ .detail-c .tab-dash{ display:flex; flex-direction:column; gap:12px; height:100%; min-height:0; } /* v5.10-APP-TAB-DASH — dash-grid spacing inside polished tab */ .detail-c .tab-dash .dash-grid{ gap:14px; } /* v5.10-APP-TAB-DASH — stats column rhythm */ .detail-c .tab-dash .dash-stats-col{ gap:14px; } /* v5.10-APP-TAB-DASH — stat-cards grid */ .detail-c .tab-dash .dash-stat-cards{ gap:12px; } /* v5.10-APP-TAB-DASH — beautiful stat card base */ .detail-c .tab-dash .dash-stat-card{ position:relative; background:linear-gradient(180deg, rgba(255,255,255,0.025), transparent 70%), var(--app-surface-0); border:1px solid var(--app-border-0); border-radius:var(--app-r-lg); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); padding:14px 16px; display:flex; flex-direction:column; gap:8px; overflow:hidden; transition:.18s ease; } /* v5.10-APP-TAB-DASH — stat card hover lift */ .detail-c .tab-dash .dash-stat-card:hover{ border-color:var(--app-border-1); transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 18px 38px -18px rgba(0,0,0,0.7); } /* v5.10-APP-TAB-DASH — accent glow accent bar at top of stat card */ .detail-c .tab-dash .dash-stat-card::before{ content:""; position:absolute; top:0; left:14px; right:14px; height:2px; background:linear-gradient(90deg, transparent, var(--app-accent-glow), transparent); opacity:.55; pointer-events:none; } /* v5.10-APP-TAB-DASH — stat card label/icon line */ .detail-c .tab-dash .dash-stat-card .ico{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--app-text-muted); opacity:.9; display:flex; align-items:center; gap:6px; line-height:1; margin-bottom:2px; } /* v5.10-APP-TAB-DASH — big stat value */ .detail-c .tab-dash .dash-stat-card .val{ font-size:22px; font-weight:700; letter-spacing:-.015em; color:var(--app-text); line-height:1.1; font-variant-numeric:tabular-nums; } /* v5.10-APP-TAB-DASH — xl value for headline metric */ .detail-c .tab-dash .dash-stat-card .val-xl{ font-size:28px; font-weight:800; letter-spacing:-.02em; } /* v5.10-APP-TAB-DASH — sub-line below value (e.g. used/total bytes) */ .detail-c .tab-dash .dash-stat-card .disk-sub{ font-size:11.5px; color:var(--app-text-muted); letter-spacing:.01em; font-variant-numeric:tabular-nums; } /* v5.10-APP-TAB-DASH — progress bar polish */ .detail-c .tab-dash .dash-stat-card .bar{ height:6px; background:rgba(255,255,255,0.05); border-radius:999px; overflow:hidden; margin-top:auto; position:relative; } /* v5.10-APP-TAB-DASH — progress bar — larger variant */ .detail-c .tab-dash .dash-stat-card .bar.bar-lg{ height:8px; } /* v5.10-APP-TAB-DASH — progress bar fill polish */ .detail-c .tab-dash .dash-stat-card .bar > i{ display:block; height:100%; border-radius:999px; background:var(--app-accent); box-shadow:0 0 12px var(--app-accent-glow); transition:width .4s cubic-bezier(.4,0,.2,1); } /* v5.10-APP-TAB-DASH — Network card: rows of dir + value */ .detail-c .tab-dash .dash-stat-card.stat-net .net-rows{ display:flex; flex-direction:column; gap:6px; margin-top:4px; } /* v5.10-APP-TAB-DASH — single network row */ .detail-c .tab-dash .dash-stat-card.stat-net .net-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed rgba(255,255,255,0.06); } /* v5.10-APP-TAB-DASH — last row drops separator */ .detail-c .tab-dash .dash-stat-card.stat-net .net-row:last-child{ border-bottom:0; } /* v5.10-APP-TAB-DASH — direction label (↓ Download / ↑ Upload) */ .detail-c .tab-dash .dash-stat-card.stat-net .net-row .dir{ font-size:12px; font-weight:500; color:var(--app-text-muted); letter-spacing:.01em; } /* v5.10-APP-TAB-DASH — value in network row */ .detail-c .tab-dash .dash-stat-card.stat-net .net-row b{ font-size:15px; font-weight:700; color:var(--app-text); font-variant-numeric:tabular-nums; letter-spacing:-.01em; } /* v5.10-APP-TAB-DASH — disk card visual trend marker (decorative micro spark) */ .detail-c .tab-dash .dash-stat-card.stat-disk::after{ content:""; position:absolute; right:14px; top:14px; width:42px; height:18px; background: linear-gradient(180deg, transparent 55%, var(--app-accent-soft) 55%, var(--app-accent-soft) 70%, transparent 70%) 0 0/8px 100% repeat-x; opacity:.35; pointer-events:none; border-radius:2px; mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); } /* v5.10-APP-TAB-DASH — Server-Info card as tidy key-value table */ .detail-c .tab-dash .dash-server-info{ background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent 60%), var(--app-surface-0); border:1px solid var(--app-border-0); border-radius:var(--app-r-lg); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); padding:6px 16px 8px; display:flex; flex-direction:column; gap:0; transition:.18s ease; } /* v5.10-APP-TAB-DASH — server-info hover */ .detail-c .tab-dash .dash-server-info:hover{ border-color:var(--app-border-1); } /* v5.10-APP-TAB-DASH — info row layout */ .detail-c .tab-dash .dash-server-info .dash-info-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; font-size:13px; border-bottom:1px dashed rgba(255,255,255,0.06); min-height:32px; } /* v5.10-APP-TAB-DASH — last info row has no border */ .detail-c .tab-dash .dash-server-info .dash-info-row:last-child{ border-bottom:0; } /* v5.10-APP-TAB-DASH — left label (the muted span) */ .detail-c .tab-dash .dash-server-info .dash-info-row > .muted{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--app-text-muted); flex:0 0 auto; } /* v5.10-APP-TAB-DASH — right value */ .detail-c .tab-dash .dash-server-info .dash-info-row > b{ font-size:13px; font-weight:600; color:var(--app-text); text-align:right; letter-spacing:-.005em; font-variant-numeric:tabular-nums; flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* v5.10-APP-TAB-DASH — Console column: card becomes hero with proper structure */ .detail-c .tab-dash .dash-console-col > .card{ background:linear-gradient(180deg, rgba(255,255,255,0.025), transparent 50%), var(--app-surface-0); border:1px solid var(--app-border-0); border-radius:var(--app-r-lg); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); padding:14px 16px; transition:.18s ease; } /* v5.10-APP-TAB-DASH — console card hover */ .detail-c .tab-dash .dash-console-col > .card:hover{ border-color:var(--app-border-1); } /* v5.10-APP-TAB-DASH — console card header (h3 + buttons row) */ .detail-c .tab-dash .dash-console-col > .card > div:first-child{ border-bottom:1px solid var(--app-border-0); padding-bottom:10px; margin-bottom:12px !important; gap:8px !important; } /* v5.10-APP-TAB-DASH — console h3 */ .detail-c .tab-dash .dash-console-col > .card > div:first-child > h3{ font-size:14px; font-weight:700; letter-spacing:-.005em; color:var(--app-text); display:flex; align-items:center; gap:8px; } /* v5.10-APP-TAB-DASH — console header hint */ .detail-c .tab-dash .dash-console-col > .card > div:first-child > span.muted{ font-size:11px !important; color:var(--app-text-muted) !important; letter-spacing:.01em; } /* v5.10-APP-TAB-DASH — toolbar ghost buttons */ .detail-c .tab-dash .dash-console-col > .card > div:first-child > button.btn.ghost{ background:rgba(255,255,255,0.03); border:1px solid var(--app-border-0); border-radius:var(--app-r-sm); color:var(--app-text-muted); padding:5px 11px !important; font-size:11px !important; font-weight:600; letter-spacing:.01em; transition:.14s ease; cursor:pointer; } /* v5.10-APP-TAB-DASH — toolbar button hover */ .detail-c .tab-dash .dash-console-col > .card > div:first-child > button.btn.ghost:hover{ background:rgba(255,255,255,0.06); border-color:var(--app-border-1); color:var(--app-text); transform:translateY(-1px); } /* v5.10-APP-TAB-DASH — toolbar accent (active) state */ .detail-c .tab-dash .dash-console-col > .card > div:first-child > button.btn.ghost.accent{ background:var(--app-accent-soft); border-color:var(--app-accent); color:var(--app-accent); box-shadow:0 0 0 1px var(--app-accent-soft); } /* v5.10-APP-TAB-DASH — toolbar button active press */ .detail-c .tab-dash .dash-console-col > .card > div:first-child > button.btn.ghost:active{ transform:translateY(0); } /* v5.10-APP-TAB-DASH — gamelogbox typography polish (inside dash) */ .detail-c .tab-dash #gamelogbox{ background:#04060d !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-md) !important; font-family:var(--mono) !important; font-size:12.5px !important; line-height:1.55 !important; letter-spacing:.005em; color:#d4d8e6; padding:14px 16px !important; box-shadow:inset 0 1px 0 rgba(0,0,0,0.3), inset 0 0 60px rgba(124,92,240,0.018); scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.08) transparent; transition:border-color .18s ease, box-shadow .18s ease; } /* v5.10-APP-TAB-DASH — webkit scrollbar for gamelogbox */ .detail-c .tab-dash #gamelogbox::-webkit-scrollbar{ width:10px; } .detail-c .tab-dash #gamelogbox::-webkit-scrollbar-track{ background:transparent; } .detail-c .tab-dash #gamelogbox::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.08); border-radius:6px; border:2px solid transparent; background-clip:padding-box; } .detail-c .tab-dash #gamelogbox::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.14); background-clip:padding-box; } /* v5.10-APP-TAB-DASH — gamelogbox focus ring */ .detail-c .tab-dash #gamelogbox[data-focused="true"]{ border-color:var(--app-accent) !important; box-shadow:inset 0 1px 0 rgba(0,0,0,0.3), 0 0 0 3px var(--app-accent-soft); } /* v5.10-APP-TAB-DASH — footer hint paragraph */ .detail-c .tab-dash > p.muted{ color:var(--app-text-muted) !important; opacity:.75; font-size:11.5px !important; letter-spacing:.01em; padding:6px 0 2px; } /* v5.10-APP-TAB-DASH — responsive: stack columns on narrow viewports */ @media(max-width:1080px){ .detail-c .tab-dash .dash-grid{ grid-template-columns:1fr !important; } } /* v5.10-APP-TAB-DASH — responsive: stat cards single column on very narrow */ @media(max-width:560px){ .detail-c .tab-dash .dash-stat-cards{ grid-template-columns:1fr !important; } } /* ================ v5.10-APP-TAB-DANGER ================ */ /* Destructive actions tab — reinstall + delete + type-swap. Big visual warning, then three clearly separated action rows. All hover/active styles use --app-* tokens. Scoped to .detail-c .tab-danger. */ /* v5.10-APP-TAB-DANGER — outer wrapper: vertical stack with breathing room */ .detail-c .tab-danger{ display:flex; flex-direction:column; gap:18px; max-width:880px; margin:0 auto; padding:4px 0 12px; } /* v5.10-APP-TAB-DANGER — intro banner: prominent warning header */ .detail-c .tab-danger__intro{ display:flex; align-items:center; gap:16px; padding:16px 20px; background:linear-gradient(135deg, rgba(255,92,124,0.10), rgba(255,184,77,0.06)); border:1px solid rgba(255,92,124,0.32); border-left:4px solid var(--app-danger); border-radius:var(--app-r-lg); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card), 0 0 0 1px rgba(255,92,124,0.06) inset; transition:transform .25s ease, box-shadow .25s ease; } .detail-c .tab-danger__intro:hover{ transform:translateY(-1px); box-shadow:var(--app-shadow-card), 0 0 24px -8px rgba(255,92,124,0.32); } /* v5.10-APP-TAB-DANGER — intro icon: pulsing warning glyph */ .detail-c .tab-danger__intro-icon{ flex-shrink:0; width:46px; height:46px; display:flex; align-items:center; justify-content:center; font-size:24px; border-radius:50%; background:rgba(255,92,124,0.14); color:var(--app-danger); border:1px solid rgba(255,92,124,0.30); box-shadow:0 0 0 4px rgba(255,92,124,0.06); animation:tab-danger-pulse 2.2s ease-in-out infinite; } @keyframes tab-danger-pulse{ 0%, 100%{ box-shadow:0 0 0 4px rgba(255,92,124,0.06); } 50%{ box-shadow:0 0 0 7px rgba(255,92,124,0.02), 0 0 18px rgba(255,92,124,0.22); } } /* v5.10-APP-TAB-DANGER — intro text block */ .detail-c .tab-danger__intro-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; } .detail-c .tab-danger__intro-title{ font-size:17px; font-weight:700; letter-spacing:0.2px; color:var(--app-danger); } .detail-c .tab-danger__intro-sub{ font-size:12.5px; color:var(--app-muted, rgba(220,225,240,0.62)); line-height:1.45; } /* v5.10-APP-TAB-DANGER — main card overrides: stronger glass treatment */ .detail-c .tab-danger__card.tab-danger__card--warn{ background:rgba(255,92,124,0.045) !important; border:1px solid rgba(255,92,124,0.24) !important; border-radius:var(--app-r-lg); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); padding:18px 18px 14px; display:flex; flex-direction:column; gap:4px; } /* v5.10-APP-TAB-DANGER — legend heading kept but visually de-duplicated */ .detail-c .tab-danger__legend{ margin:0 0 12px; font-size:11px; text-transform:uppercase; letter-spacing:1.4px; font-weight:700; opacity:0.78; } /* v5.10-APP-TAB-DANGER — action row: card-within-card pattern */ .detail-c .tab-danger__row{ position:relative; padding:14px 16px !important; background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.06); border-radius:var(--app-r-md, 12px); margin-bottom:10px !important; transition:background .18s ease, border-color .18s ease, transform .18s ease; } .detail-c .tab-danger__row:hover{ background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.10); transform:translateY(-1px); } .detail-c .tab-danger__row:last-child{ margin-bottom:0 !important; } /* v5.10-APP-TAB-DANGER — accent stripe on left side per action type */ .detail-c .tab-danger__row::before{ content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:2px; transition:opacity .18s ease; opacity:0.55; } .detail-c .tab-danger__row:hover::before{ opacity:1; } .detail-c .tab-danger__row--recreate::before{ background:linear-gradient(180deg,#ffb443,#ff7e3b); } .detail-c .tab-danger__row--reinstall::before{ background:var(--app-warn); } .detail-c .tab-danger__row--delete::before{ background:var(--app-danger); } /* v5.10-APP-TAB-DANGER — row description text refinement */ .detail-c .tab-danger__row b{ display:block; font-size:14px; font-weight:600; margin-bottom:4px; letter-spacing:0.1px; } .detail-c .tab-danger__row .cmeta{ font-size:12.5px; line-height:1.5; opacity:0.72; } /* v5.10-APP-TAB-DANGER — action buttons: rounded pill, lift on hover */ .detail-c .tab-danger__btn{ border-radius:var(--app-r-md, 12px) !important; font-weight:600; padding:9px 16px; letter-spacing:0.2px; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; } .detail-c .tab-danger__btn:hover{ transform:translateY(-1px); filter:brightness(1.08); } .detail-c .tab-danger__btn:active{ transform:translateY(0); filter:brightness(0.96); } /* v5.10-APP-TAB-DANGER — recreate (orange gradient) glow on hover */ .detail-c .tab-danger__btn--recreate:hover{ box-shadow:0 6px 18px -6px rgba(255,126,59,0.55); } /* v5.10-APP-TAB-DANGER — reinstall (warn ghost) tint background on hover */ .detail-c .tab-danger__btn--reinstall:hover{ background:rgba(255,184,77,0.10) !important; box-shadow:0 4px 14px -6px rgba(255,184,77,0.40); } /* v5.10-APP-TAB-DANGER — delete (danger ghost) tint background on hover */ .detail-c .tab-danger__btn--delete:hover{ background:rgba(255,92,124,0.10) !important; box-shadow:0 4px 14px -6px rgba(255,92,124,0.45); } /* v5.10-APP-TAB-DANGER — responsive: stack action rows on narrow screens */ @media(max-width:620px){ .detail-c .tab-danger__row{ flex-direction:column !important; align-items:stretch !important; } .detail-c .tab-danger__row .tab-danger__btn, .detail-c .tab-danger__row > button{ width:100%; justify-content:center; } .detail-c .tab-danger__intro{ padding:14px 16px; } .detail-c .tab-danger__intro-title{ font-size:15px; } } /* ================ v5.10-APP-TAB-ENV ================ */ /* Variablen tab — Version-Switch, Server-Einstellungen, Admin Raw-Editor. Scoped under .detail-c .tab-env. Uses BASE design tokens only. */ /* v5.10-APP-TAB-ENV — tab root container */ .detail-c .tab-env{ display:flex; flex-direction:column; gap:0; padding:2px 2px 8px; } /* v5.10-APP-TAB-ENV — every card-section gets the glass treatment */ .detail-c .tab-env .tab-env-section{ background:var(--app-surface-0) !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-lg) !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card) !important; padding:16px !important; transition:border-color .18s ease, transform .18s ease; } .detail-c .tab-env .tab-env-section:hover{ border-color:var(--app-border-1) !important; } /* v5.10-APP-TAB-ENV — subheading head with subtle separator */ .detail-c .tab-env .tab-env-head{ padding-bottom:10px; border-bottom:1px dashed rgba(255,255,255,0.06); margin-bottom:14px !important; } .detail-c .tab-env .tab-env-head h3{ font-size:14px !important; font-weight:700 !important; letter-spacing:-0.01em; color:var(--app-text) !important; margin:0 !important; } .detail-c .tab-env .tab-env-head .muted{ font-size:11px !important; color:var(--app-text-muted) !important; letter-spacing:0.04em; text-transform:uppercase; } /* v5.10-APP-TAB-ENV — version section: subtle accent left rail */ .detail-c .tab-env .tab-env-version{ position:relative; overflow:hidden; } .detail-c .tab-env .tab-env-version::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--app-accent), transparent); opacity:0.55; pointer-events:none; } .detail-c .tab-env .tab-env-version-row select{ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; color:var(--app-text) !important; border-radius:var(--app-r-sm) !important; padding:8px 12px !important; font-size:13px !important; transition:border-color .16s, box-shadow .16s; } .detail-c .tab-env .tab-env-version-row select:focus{ outline:none !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; } /* v5.10-APP-TAB-ENV — informational hint paragraphs */ .detail-c .tab-env .tab-env-hint{ color:var(--app-text-muted) !important; font-size:12px !important; line-height:1.5; margin:10px 0 0 !important; } /* v5.10-APP-TAB-ENV — curated form grid */ .detail-c .tab-env .tab-env-grid{ gap:14px !important; } .detail-c .tab-env .tab-env-field label{ font-size:11px !important; color:var(--app-text-muted) !important; letter-spacing:0.04em; text-transform:uppercase; font-weight:600 !important; margin-bottom:6px !important; display:block; } .detail-c .tab-env .tab-env-field input, .detail-c .tab-env .tab-env-field select{ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; color:var(--app-text) !important; border-radius:var(--app-r-sm) !important; padding:8px 11px !important; font-size:13px !important; width:100% !important; transition:border-color .15s, box-shadow .15s, background .15s; } .detail-c .tab-env .tab-env-field input:hover, .detail-c .tab-env .tab-env-field select:hover{ border-color:rgba(124,92,240,0.30) !important; } .detail-c .tab-env .tab-env-field input:focus, .detail-c .tab-env .tab-env-field select:focus{ outline:none !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; } .detail-c .tab-env .tab-env-empty{ color:var(--app-text-muted) !important; font-size:12.5px !important; padding:10px 0; text-align:center; } /* v5.10-APP-TAB-ENV — admin raw editor list (KEY=VALUE rows, mono) */ .detail-c .tab-env .tab-env-raw{ border-color:rgba(255,184,77,0.18) !important; } .detail-c .tab-env .tab-env-raw .pill{ background:rgba(255,184,77,0.14) !important; color:var(--app-warn) !important; border:1px solid rgba(255,184,77,0.30) !important; border-radius:999px !important; font-size:10.5px !important; font-weight:700 !important; letter-spacing:0.05em; text-transform:uppercase; padding:3px 9px !important; } .detail-c .tab-env .tab-env-rawlist{ max-height:420px; overflow-y:auto; padding-right:4px; scrollbar-width:thin; } .detail-c .tab-env .tab-env-rawlist::-webkit-scrollbar{ width:6px; } .detail-c .tab-env .tab-env-rawlist::-webkit-scrollbar-thumb{ background:var(--app-border-1); border-radius:4px; } .detail-c .tab-env .tab-env-rawrow{ padding:6px 8px; border-radius:var(--app-r-sm); border:1px dashed transparent; transition:background .12s, border-color .12s; } .detail-c .tab-env .tab-env-rawrow:hover{ background:rgba(255,255,255,0.025); border-color:rgba(255,255,255,0.06); } .detail-c .tab-env .tab-env-rawkey, .detail-c .tab-env .tab-env-rawval{ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; color:var(--app-text) !important; border-radius:var(--app-r-sm) !important; padding:7px 10px !important; font-size:12.5px !important; transition:border-color .15s, box-shadow .15s; } .detail-c .tab-env .tab-env-rawkey{ font-family:var(--mono) !important; color:var(--app-accent) !important; background:rgba(124,92,240,0.06) !important; border-color:rgba(124,92,240,0.16) !important; } .detail-c .tab-env .tab-env-rawkey[disabled]{ opacity:0.85; cursor:default; } .detail-c .tab-env .tab-env-rawval:focus, .detail-c .tab-env .tab-env-rawval:hover{ border-color:var(--app-accent) !important; } .detail-c .tab-env .tab-env-rawval:focus{ outline:none !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; } .detail-c .tab-env .tab-env-rawadd{ margin-top:14px !important; padding-top:12px; border-top:1px dashed rgba(255,255,255,0.06); } .detail-c .tab-env .tab-env-rawadd input{ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; color:var(--app-text) !important; border-radius:var(--app-r-sm) !important; padding:7px 10px !important; font-size:12.5px !important; } .detail-c .tab-env .tab-env-rawadd input:focus{ outline:none !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; } .detail-c .tab-env .tab-env-rawfoot{ margin-top:16px !important; } /* v5.10-APP-TAB-ENV — section spacing collapse on narrow widths */ @media(max-width:680px){ .detail-c .tab-env .tab-env-section{ padding:14px !important; } .detail-c .tab-env .tab-env-rawrow{ flex-wrap:wrap; } .detail-c .tab-env .tab-env-rawkey, .detail-c .tab-env .tab-env-rawval{ width:100% !important; } } /* ================ v5.10-APP-TAB-LIMITS ================ */ /* Limits tab — CPU/RAM/Disk resource form, glass card with numeric fields. Scoped under .detail-c .tab-limits. Uses BASE design tokens only. */ /* v5.10-APP-TAB-LIMITS — tab root + intro paragraph */ .detail-c .tab-limits{ display:flex; flex-direction:column; gap:0; padding:2px 2px 8px; } .detail-c .tab-limits > .muted{ color:var(--app-text-muted) !important; font-size:12.5px !important; line-height:1.5; margin:0 0 14px !important; padding:10px 14px; background:rgba(255,184,77,0.06); border:1px solid rgba(255,184,77,0.16); border-radius:var(--app-r-md); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); } /* v5.10-APP-TAB-LIMITS — form grid wrapped in a glass card */ .detail-c .tab-limits > div:nth-of-type(1){ background:var(--app-surface-0); border:1px solid var(--app-border-0); border-radius:var(--app-r-lg); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); padding:18px !important; max-width:none !important; gap:16px !important; transition:border-color .18s ease; } .detail-c .tab-limits > div:nth-of-type(1):hover{ border-color:var(--app-border-1); } /* v5.10-APP-TAB-LIMITS — fields */ .detail-c .tab-limits .field{ margin-bottom:0 !important; display:flex; flex-direction:column; } .detail-c .tab-limits .field label{ font-size:11px !important; color:var(--app-text-muted) !important; letter-spacing:0.05em; text-transform:uppercase; font-weight:600 !important; margin-bottom:8px !important; display:block; } .detail-c .tab-limits .field input{ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; color:var(--app-text) !important; border-radius:var(--app-r-sm) !important; padding:10px 12px !important; font-size:16px !important; font-weight:600; font-variant-numeric:tabular-nums; width:100%; transition:border-color .15s, box-shadow .15s, background .15s; } .detail-c .tab-limits .field input:hover{ border-color:rgba(124,92,240,0.30) !important; background:rgba(255,255,255,0.02) !important; } .detail-c .tab-limits .field input:focus{ outline:none !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; } /* v5.10-APP-TAB-LIMITS — save-button row */ .detail-c .tab-limits > div:last-child{ margin-top:16px !important; display:flex; justify-content:flex-end; } .detail-c .tab-limits > div:last-child .btn{ background:linear-gradient(135deg, var(--app-accent), #9579ff) !important; border:0 !important; color:#04121e !important; font-weight:700 !important; border-radius:var(--app-r-sm) !important; padding:9px 18px !important; box-shadow:0 6px 18px -8px var(--app-accent-glow); transition:transform .15s ease, box-shadow .15s ease; } .detail-c .tab-limits > div:last-child .btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 10px 22px -10px var(--app-accent-glow); } .detail-c .tab-limits > div:last-child .btn:disabled{ opacity:0.55; cursor:not-allowed; } /* v5.10-APP-TAB-LIMITS — responsive collapse */ @media(max-width:680px){ .detail-c .tab-limits > div:nth-of-type(1){ grid-template-columns:1fr !important; padding:14px !important; } .detail-c .tab-limits > div:last-child{ justify-content:stretch; } .detail-c .tab-limits > div:last-child .btn{ width:100%; justify-content:center; } } /* v5.10-APP-TAB-ENV — structural fallbacks (targeting existing .card markup) */ .detail-c .tab-env > template + *, .detail-c .tab-env > .card{ /* no-op anchor to keep specificity context */ } .detail-c .tab-env .card{ background:var(--app-surface-0) !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-lg) !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card) !important; padding:16px !important; transition:border-color .18s ease; } .detail-c .tab-env .card:hover{ border-color:var(--app-border-1) !important; } /* v5.10-APP-TAB-ENV — headings inside cards */ .detail-c .tab-env .card h3{ font-size:14px !important; font-weight:700 !important; letter-spacing:-0.01em; color:var(--app-text) !important; margin:0 !important; } /* v5.10-APP-TAB-ENV — soft separator under the heading row */ .detail-c .tab-env .card > div:first-child{ padding-bottom:10px; border-bottom:1px dashed rgba(255,255,255,0.06); margin-bottom:12px !important; } /* v5.10-APP-TAB-ENV — version card accent rail (first card in tab-env, if version pill is present) */ .detail-c .tab-env > template ~ .card:first-of-type, .detail-c .tab-env .card:first-of-type{ position:relative; overflow:hidden; } /* v5.10-APP-TAB-ENV — inputs/selects styling fallback */ .detail-c .tab-env .card select, .detail-c .tab-env .card input[type="text"], .detail-c .tab-env .card input[type="number"], .detail-c .tab-env .card input:not([type]){ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; color:var(--app-text) !important; border-radius:var(--app-r-sm) !important; padding:8px 11px !important; font-size:13px !important; transition:border-color .15s, box-shadow .15s; } .detail-c .tab-env .card select:hover, .detail-c .tab-env .card input:hover:not([disabled]){ border-color:rgba(124,92,240,0.30) !important; } .detail-c .tab-env .card select:focus, .detail-c .tab-env .card input:focus{ outline:none !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; } /* v5.10-APP-TAB-ENV — disabled key input in raw editor gets mono treatment */ .detail-c .tab-env .card input[disabled]{ font-family:var(--mono) !important; color:var(--app-accent) !important; background:rgba(124,92,240,0.06) !important; border-color:rgba(124,92,240,0.16) !important; opacity:0.9 !important; } /* v5.10-APP-TAB-ENV — labels */ .detail-c .tab-env .card label{ font-size:11px !important; color:var(--app-text-muted) !important; letter-spacing:0.04em; text-transform:uppercase; font-weight:600 !important; margin-bottom:6px !important; } /* v5.10-APP-TAB-ENV — muted text & hints */ .detail-c .tab-env .card .muted, .detail-c .tab-env .card > p.muted{ color:var(--app-text-muted) !important; font-size:12px !important; line-height:1.5; } /* v5.10-APP-TAB-ENV — admin/raw editor pill */ .detail-c .tab-env .card .pill{ background:rgba(255,184,77,0.14) !important; color:var(--app-warn) !important; border:1px solid rgba(255,184,77,0.30) !important; border-radius:999px !important; font-size:10.5px !important; font-weight:700 !important; letter-spacing:0.05em; text-transform:uppercase; padding:3px 9px !important; } /* v5.10-APP-TAB-ENV — primary "Save & Restart" buttons */ .detail-c .tab-env .card .btn:not(.ghost){ background:linear-gradient(135deg, var(--app-accent), #9579ff) !important; border:0 !important; color:#04121e !important; font-weight:700 !important; border-radius:var(--app-r-sm) !important; padding:8px 14px !important; box-shadow:0 6px 18px -8px var(--app-accent-glow); transition:transform .15s ease, box-shadow .15s ease; } .detail-c .tab-env .card .btn:not(.ghost):hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 10px 22px -10px var(--app-accent-glow); } .detail-c .tab-env .card .btn:not(.ghost):disabled{ opacity:0.55; cursor:not-allowed; background:rgba(255,255,255,0.04) !important; color:var(--app-text-muted) !important; box-shadow:none; } /* v5.10-APP-TAB-ENV — ghost buttons (delete row, add) get soft hover */ .detail-c .tab-env .card .btn.ghost{ background:rgba(255,255,255,0.03) !important; border:1px solid var(--app-border-1) !important; color:var(--app-text) !important; border-radius:var(--app-r-sm) !important; transition:background .15s, border-color .15s; } .detail-c .tab-env .card .btn.ghost:hover:not(:disabled){ background:var(--app-accent-soft) !important; border-color:var(--app-accent) !important; } /* v5.10-APP-TAB-ENV — admin raw editor row tint on hover */ .detail-c .tab-env .card > div[style*="display:flex"][style*="gap:8px"]{ padding:5px 6px; border-radius:var(--app-r-sm); transition:background .12s; } .detail-c .tab-env .card > div[style*="display:flex"][style*="gap:8px"]:hover{ background:rgba(255,255,255,0.025); } /* ================ v5.10-APP-TAB-LOGS ================ */ /* Logs tab — glassy file picker, chip-style filter bar, search input, and a hero log console with subtle scrollbar. All rules scoped under .detail-c .tab-logs so they cannot leak. */ /* v5.10-APP-TAB-LOGS — tab root: flex column owning available height */ .detail-c .tab-logs{ display:flex; flex-direction:column; min-height:0; height:100%; gap:14px; } /* v5.10-APP-TAB-LOGS — outer card becomes flex container with internal scroll */ .detail-c .tab-logs .tab-logs-files{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; background:var(--app-surface-0) !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-lg) !important; box-shadow:var(--app-shadow-card) !important; padding:16px !important; } /* v5.10-APP-TAB-LOGS — Log-Dateien head row polish */ .detail-c .tab-logs .tab-logs-files-head{ padding-bottom:10px; border-bottom:1px dashed rgba(255,255,255,0.06); margin-bottom:12px !important; } .detail-c .tab-logs .tab-logs-files-head h3{ font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--app-text); } .detail-c .tab-logs .tab-logs-files-head code{ font-family:var(--mono); font-size:10.5px; padding:2px 7px; border-radius:6px; background:rgba(255,255,255,0.04); border:1px solid var(--app-border-0); color:var(--app-text-muted); } .detail-c .tab-logs .tab-logs-files-head .pill{ background:var(--app-accent-soft) !important; color:var(--app-accent) !important; border:1px solid rgba(124,92,240,0.22); border-radius:999px; padding:3px 10px; font-weight:600; font-size:11px !important; letter-spacing:.01em; } .detail-c .tab-logs .tab-logs-files-head .btn{ border-radius:var(--app-r-sm) !important; transition:.16s; } .detail-c .tab-logs .tab-logs-files-head .btn.ghost{ background:rgba(255,255,255,0.04) !important; border:1px solid var(--app-border-0) !important; color:var(--app-text-muted) !important; } .detail-c .tab-logs .tab-logs-files-head .btn.ghost:hover{ color:var(--app-text) !important; background:rgba(255,255,255,0.07) !important; border-color:var(--app-border-1) !important; transform:translateY(-1px); } /* v5.10-APP-TAB-LOGS — loading / empty states */ .detail-c .tab-logs .tab-logs-loading, .detail-c .tab-logs .tab-logs-empty{ color:var(--app-text-muted) !important; font-size:12.5px; text-align:center; padding:18px 0 !important; background:rgba(255,255,255,0.02); border:1px dashed rgba(255,255,255,0.06); border-radius:var(--app-r-md); } /* v5.10-APP-TAB-LOGS — file tile grid */ .detail-c .tab-logs .tab-logs-files-grid{ gap:10px !important; } .detail-c .tab-logs .tab-logs-file-tile{ background:rgba(255,255,255,0.03) !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-md) !important; color:var(--app-text) !important; padding:10px 12px !important; transition:.18s; } .detail-c .tab-logs .tab-logs-file-tile:hover{ background:rgba(255,255,255,0.06) !important; border-color:var(--app-border-1) !important; transform:translateY(-1px); box-shadow:0 8px 22px -16px rgba(0,0,0,0.5); } .detail-c .tab-logs .tab-logs-file-tile.accent{ border-color:var(--app-accent) !important; background:var(--app-accent-soft) !important; box-shadow:0 0 0 1px var(--app-accent-glow) inset; } .detail-c .tab-logs .tab-logs-file-tile .tab-logs-file-name{ color:var(--app-text); font-size:12.5px; } .detail-c .tab-logs .tab-logs-file-tile .tab-logs-file-sub{ color:var(--app-text-muted) !important; font-size:10.5px !important; letter-spacing:.02em; } .detail-c .tab-logs .tab-logs-file-tile input[type="checkbox"]{ accent-color:var(--app-accent); } /* v5.10-APP-TAB-LOGS — opened log viewer wrapper */ .detail-c .tab-logs .tab-logs-viewer{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; margin-top:14px !important; padding-top:14px; border-top:1px dashed rgba(255,255,255,0.06); } /* v5.10-APP-TAB-LOGS — viewer head: file name + stats + close */ .detail-c .tab-logs .tab-logs-viewer-head{ padding:0 2px 4px; } .detail-c .tab-logs .tab-logs-viewer-name{ color:var(--app-text) !important; font-size:13px !important; font-weight:700 !important; letter-spacing:-.005em; } .detail-c .tab-logs .tab-logs-viewer-stats{ color:var(--app-text-muted) !important; font-size:10.5px !important; letter-spacing:.04em; text-transform:uppercase; } .detail-c .tab-logs .tab-logs-close{ background:rgba(255,255,255,0.04) !important; border:1px solid var(--app-border-0) !important; color:var(--app-text-muted) !important; border-radius:var(--app-r-sm) !important; transition:.16s; } .detail-c .tab-logs .tab-logs-close:hover{ background:rgba(255,92,124,0.10) !important; border-color:rgba(255,92,124,0.32) !important; color:var(--app-danger) !important; } /* v5.10-APP-TAB-LOGS — filter bar as glass row */ .detail-c .tab-logs .tab-logs-filterbar{ background:rgba(255,255,255,0.025); border:1px solid var(--app-border-0); border-radius:var(--app-r-md); padding:8px 10px !important; margin-bottom:10px !important; gap:6px !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); } .detail-c .tab-logs .tab-logs-filterbar-label{ color:var(--app-text-muted) !important; font-size:10.5px !important; text-transform:uppercase; letter-spacing:.08em; font-weight:600; } /* v5.10-APP-TAB-LOGS — chip-style filter buttons */ .detail-c .tab-logs .tab-logs-chip{ background:rgba(255,255,255,0.03) !important; border:1px solid var(--app-border-0) !important; border-radius:999px !important; color:var(--app-text-muted) !important; font-size:11px !important; font-weight:600; padding:4px 11px !important; letter-spacing:.01em; transition:.15s ease; } .detail-c .tab-logs .tab-logs-chip:hover{ background:rgba(255,255,255,0.07) !important; color:var(--app-text) !important; border-color:var(--app-border-1) !important; transform:translateY(-1px); } .detail-c .tab-logs .tab-logs-chip.accent{ background:var(--app-accent-soft) !important; color:var(--app-accent) !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 1px var(--app-accent-glow); } /* v5.10-APP-TAB-LOGS — glass search input */ .detail-c .tab-logs .tab-logs-search{ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; border-radius:999px !important; color:var(--app-text) !important; padding:5px 12px !important; font-size:11.5px !important; transition:.18s; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); } .detail-c .tab-logs .tab-logs-search::placeholder{ color:var(--app-text-muted); } .detail-c .tab-logs .tab-logs-search:focus{ outline:none; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-glow); background:var(--app-surface-1) !important; } /* v5.10-APP-TAB-LOGS — hero log console box */ .detail-c .tab-logs .tab-logs-hero{ flex:1 1 auto; min-height:240px !important; height:auto !important; background:var(--app-bg-0) !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-md) !important; font-family:var(--mono) !important; font-size:12px !important; line-height:1.55 !important; color:#cdd6f0; padding:14px 16px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,0.03), inset 0 0 30px -12px rgba(0,0,0,0.4); scrollbar-width:thin; scrollbar-color:rgba(124,92,240,0.25) transparent; } .detail-c .tab-logs .tab-logs-hero::-webkit-scrollbar{ width:9px; height:9px; } .detail-c .tab-logs .tab-logs-hero::-webkit-scrollbar-track{ background:transparent; } .detail-c .tab-logs .tab-logs-hero::-webkit-scrollbar-thumb{ background:rgba(124,92,240,0.18); border-radius:6px; border:2px solid transparent; background-clip:padding-box; transition:background .2s; } .detail-c .tab-logs .tab-logs-hero::-webkit-scrollbar-thumb:hover{ background:rgba(124,92,240,0.34); background-clip:padding-box; } /* v5.10-APP-TAB-LOGS — responsive: filterbar wrap on narrow */ @media(max-width:680px){ .detail-c .tab-logs .tab-logs-filterbar{ padding:6px 8px !important; } .detail-c .tab-logs .tab-logs-chip{ padding:3px 9px !important; font-size:10.5px !important; } .detail-c .tab-logs .tab-logs-hero{ font-size:11px !important; padding:10px 12px !important; } } /* ================ v5.10-APP-TAB-BACKUPS ================ */ /* Backups tab: header action area, schedule card, backup list rows. Scoped to .detail-c .tab-backups. */ /* v5.10-APP-TAB-BACKUPS — tab root: vertical flow with breathing space */ .detail-c .tab-backups{ display:flex !important; flex-direction:column; gap:14px; padding:4px 2px 24px; } /* v5.10-APP-TAB-BACKUPS — header row: title + create button as floating action bar */ .detail-c .tab-backups .bk-header{ display:flex !important; align-items:center !important; gap:12px !important; margin:0 0 4px !important; padding:14px 16px !important; background:var(--app-surface-0) !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-lg) !important; box-shadow:var(--app-shadow-card) !important; transition:border-color .2s, transform .2s; } .detail-c .tab-backups .bk-header:hover{ border-color:var(--app-border-1) !important; } /* v5.10-APP-TAB-BACKUPS — title h3 styling */ .detail-c .tab-backups .bk-title{ display:flex; align-items:center; gap:10px; font-size:16px !important; font-weight:700 !important; letter-spacing:-.01em; color:var(--app-text) !important; margin:0 !important; } .detail-c .tab-backups .bk-title-ic{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; font-size:18px; border-radius:var(--app-r-sm); background:var(--app-accent-soft); box-shadow:inset 0 0 0 1px var(--app-border-0); } .detail-c .tab-backups .bk-title-tx{ font-size:16px; font-weight:700; } /* v5.10-APP-TAB-BACKUPS — create button (primary action) */ .detail-c .tab-backups .bk-create-btn{ padding:8px 16px !important; font-size:12.5px !important; font-weight:600 !important; border-radius:var(--app-r-md) !important; background:var(--app-accent-soft) !important; color:var(--app-text) !important; border:1px solid var(--app-accent) !important; box-shadow:0 4px 14px -8px var(--app-accent-glow) !important; transition:transform .15s, box-shadow .2s, background .2s !important; } .detail-c .tab-backups .bk-create-btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 8px 22px -10px var(--app-accent-glow) !important; background:rgba(124,92,240,0.20) !important; } .detail-c .tab-backups .bk-create-btn:disabled{ opacity:.55; cursor:not-allowed; } /* v5.10-APP-TAB-BACKUPS — schedule card: top action card with subtle accent */ .detail-c .tab-backups .bk-schedule-card{ background:var(--app-surface-0) !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-lg) !important; padding:16px !important; margin:0 0 4px !important; box-shadow:var(--app-shadow-card) !important; transition:border-color .2s; } .detail-c .tab-backups .bk-schedule-card:hover{ border-color:var(--app-border-1) !important; } /* v5.10-APP-TAB-BACKUPS — schedule row layout */ .detail-c .tab-backups .bk-schedule-row{ align-items:center; gap:16px !important; } /* v5.10-APP-TAB-BACKUPS — toggle label */ .detail-c .tab-backups .bk-sched-toggle{ font-size:13px; font-weight:600; color:var(--app-text); padding:4px 0; } .detail-c .tab-backups .bk-sched-toggle input[type=checkbox]{ accent-color:var(--app-accent); width:16px !important; height:16px; cursor:pointer; } /* v5.10-APP-TAB-BACKUPS — schedule field group */ .detail-c .tab-backups .bk-sched-field{ background:var(--app-surface-1); border:1px solid var(--app-border-0); border-radius:var(--app-r-sm); padding:5px 9px; transition:border-color .15s, box-shadow .15s; } .detail-c .tab-backups .bk-sched-field:focus-within{ border-color:var(--app-accent); box-shadow:0 0 0 3px var(--app-accent-soft); } /* v5.10-APP-TAB-BACKUPS — small field label */ .detail-c .tab-backups .bk-sched-lbl{ font-size:11px !important; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--app-text-muted) !important; } /* v5.10-APP-TAB-BACKUPS — schedule inputs/selects */ .detail-c .tab-backups .bk-sched-field input, .detail-c .tab-backups .bk-sched-field select{ background:transparent !important; border:none !important; color:var(--app-text) !important; font-size:13px !important; padding:2px 4px !important; outline:none; } /* v5.10-APP-TAB-BACKUPS — save schedule button (ghost-style) */ .detail-c .tab-backups .bk-save-sched-btn{ padding:7px 14px !important; font-size:12px !important; font-weight:600 !important; border-radius:var(--app-r-md) !important; background:rgba(255,255,255,0.04) !important; color:var(--app-text) !important; border:1px solid var(--app-border-1) !important; margin-left:auto; transition:transform .15s, background .15s, border-color .15s !important; } .detail-c .tab-backups .bk-save-sched-btn:hover{ transform:translateY(-1px); background:var(--app-accent-soft) !important; border-color:var(--app-accent) !important; } /* v5.10-APP-TAB-BACKUPS — schedule hint text */ .detail-c .tab-backups .bk-sched-hint{ color:var(--app-text-muted) !important; font-size:11.5px !important; line-height:1.55 !important; margin:12px 0 0 !important; padding-top:12px; border-top:1px dashed rgba(255,255,255,0.06); } .detail-c .tab-backups .bk-sched-hint b{ color:var(--app-text); font-weight:600; } /* v5.10-APP-TAB-BACKUPS — locked variant card for non-admin users */ .detail-c .tab-backups .bk-locked-card{ background:var(--app-surface-0) !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-lg) !important; padding:14px 16px !important; color:var(--app-text-muted) !important; font-size:12.5px !important; line-height:1.55; box-shadow:var(--app-shadow-card) !important; } .detail-c .tab-backups .bk-locked-card b{ color:var(--app-text); } /* v5.10-APP-TAB-BACKUPS — loading state */ .detail-c .tab-backups .bk-loading{ background:var(--app-surface-0); border:1px solid var(--app-border-0); border-radius:var(--app-r-lg); padding:24px; } /* v5.10-APP-TAB-BACKUPS — backup list container */ .detail-c .tab-backups .bk-list{ display:flex !important; flex-direction:column; gap:10px; } /* v5.10-APP-TAB-BACKUPS — backup row card (one row = one backup) */ .detail-c .tab-backups .bk-row{ display:flex !important; align-items:center !important; gap:14px !important; padding:13px 16px !important; background:var(--app-surface-0) !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-lg) !important; box-shadow:var(--app-shadow-card) !important; transition:transform .15s, border-color .2s, background .2s !important; } .detail-c .tab-backups .bk-row:hover{ transform:translateY(-1px); border-color:var(--app-accent) !important; background:rgba(124,92,240,0.04) !important; } /* v5.10-APP-TAB-BACKUPS — backup icon bubble */ .detail-c .tab-backups .bk-row-ic{ display:inline-flex !important; align-items:center; justify-content:center; width:34px !important; height:34px; font-size:18px; flex:none; border-radius:var(--app-r-sm); background:var(--app-accent-soft); box-shadow:inset 0 0 0 1px var(--app-border-0); } /* v5.10-APP-TAB-BACKUPS — row body */ .detail-c .tab-backups .bk-row-body{ display:flex; flex-direction:column; gap:3px; min-width:0; } /* v5.10-APP-TAB-BACKUPS — row name (filename / id) */ .detail-c .tab-backups .bk-row-name{ font-size:13.5px !important; font-weight:600 !important; color:var(--app-text) !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--mono); } /* v5.10-APP-TAB-BACKUPS — row meta (date + size) */ .detail-c .tab-backups .bk-row-meta{ font-size:11.5px !important; color:var(--app-text-muted) !important; letter-spacing:.02em; } /* v5.10-APP-TAB-BACKUPS — action buttons row */ .detail-c .tab-backups .bk-act{ padding:6px 11px !important; font-size:12px !important; font-weight:600 !important; border-radius:var(--app-r-sm) !important; background:rgba(255,255,255,0.04) !important; color:var(--app-text) !important; border:1px solid var(--app-border-1) !important; transition:transform .12s, background .15s, border-color .15s, color .15s !important; flex:none; } .detail-c .tab-backups .bk-act:hover{ transform:translateY(-1px); background:rgba(255,255,255,0.07) !important; border-color:var(--app-border-1) !important; } /* v5.10-APP-TAB-BACKUPS — download action accent on hover */ .detail-c .tab-backups .bk-act-dl:hover{ background:var(--app-accent-soft) !important; border-color:var(--app-accent) !important; color:var(--app-accent) !important; } /* v5.10-APP-TAB-BACKUPS — restore action (success accent on hover) */ .detail-c .tab-backups .bk-act-restore{ background:rgba(52,226,155,0.08) !important; border-color:rgba(52,226,155,0.30) !important; color:var(--app-success) !important; } .detail-c .tab-backups .bk-act-restore:hover{ background:rgba(52,226,155,0.15) !important; border-color:var(--app-success) !important; } /* v5.10-APP-TAB-BACKUPS — delete action (danger accent on hover) */ .detail-c .tab-backups .bk-act-del{ color:var(--app-danger) !important; } .detail-c .tab-backups .bk-act-del:hover{ background:rgba(255,92,124,0.12) !important; border-color:var(--app-danger) !important; color:var(--app-danger) !important; } /* v5.10-APP-TAB-BACKUPS — empty state card */ .detail-c .tab-backups .bk-empty{ text-align:center !important; padding:36px 18px !important; background:var(--app-surface-0) !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); border:1px dashed var(--app-border-1) !important; border-radius:var(--app-r-lg) !important; color:var(--app-text-muted) !important; } .detail-c .tab-backups .bk-empty-ic{ font-size:42px !important; opacity:.45 !important; margin-bottom:10px !important; filter:grayscale(.2); } .detail-c .tab-backups .bk-empty-title{ font-size:14.5px !important; font-weight:700 !important; color:var(--app-text) !important; margin-bottom:5px !important; letter-spacing:-.01em; } .detail-c .tab-backups .bk-empty-sub{ font-size:12px !important; color:var(--app-text-muted) !important; margin-bottom:16px !important; line-height:1.5; } .detail-c .tab-backups .bk-empty-btn{ padding:9px 18px !important; font-size:12.5px !important; font-weight:600 !important; border-radius:var(--app-r-md) !important; background:var(--app-accent-soft) !important; color:var(--app-text) !important; border:1px solid var(--app-accent) !important; box-shadow:0 4px 14px -8px var(--app-accent-glow) !important; transition:transform .15s, box-shadow .2s, background .2s !important; } .detail-c .tab-backups .bk-empty-btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 8px 22px -10px var(--app-accent-glow) !important; background:rgba(124,92,240,0.20) !important; } /* v5.10-APP-TAB-BACKUPS — responsive collapse on narrow viewports */ @media(max-width:680px){ .detail-c .tab-backups .bk-row{ flex-wrap:wrap; gap:10px !important; } .detail-c .tab-backups .bk-row-body{ flex:1 1 100% !important; min-width:0; } .detail-c .tab-backups .bk-act{ flex:1 1 auto; } .detail-c .tab-backups .bk-schedule-row{ flex-direction:column; align-items:stretch !important; } .detail-c .tab-backups .bk-save-sched-btn{ margin-left:0; } } /* ================ v5.10-APP-TAB-ACCESS ================ */ /* ACCESS tab — share-by-code action card, owner card, user-list cards. All rules scoped under .detail-c .tab-access so they cannot leak. Existing classes preserved: .card, .btn, .btn.ghost, .muted, .avatar, .spin, .center. */ /* v5.10-APP-TAB-ACCESS — tab root: fills scrollable area below the page-head */ .detail-c .tab-access{ display:flex; flex-direction:column; min-height:0; height:100%; overflow:hidden; } /* v5.10-APP-TAB-ACCESS — loading state */ .detail-c .tab-access .tab-access__loading{ flex:1; display:flex; align-items:center; justify-content:center; background:var(--app-surface-0); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); border:1px solid var(--app-border-0); border-radius:var(--app-r-lg); box-shadow:var(--app-shadow-card); } /* v5.10-APP-TAB-ACCESS — body: stacked sections, inner scroll */ .detail-c .tab-access .tab-access__body{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding:2px 4px 12px 2px; scrollbar-width:thin; } .detail-c .tab-access .tab-access__body::-webkit-scrollbar{ width:8px; } .detail-c .tab-access .tab-access__body::-webkit-scrollbar-thumb{ background:var(--app-border-1); border-radius:8px; } /* v5.10-APP-TAB-ACCESS — section card: floating glass panel matching design system */ .detail-c .tab-access .tab-access__sec{ background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent 60%), var(--app-surface-0); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); border:1px solid var(--app-border-0); border-radius:var(--app-r-lg); box-shadow:var(--app-shadow-card); padding:14px 16px; transition:border-color .2s, transform .2s; } .detail-c .tab-access .tab-access__sec:hover{ border-color:var(--app-border-1); } /* v5.10-APP-TAB-ACCESS — section title (replaces raw h3) */ .detail-c .tab-access .tab-access__sec-title{ margin:0 0 4px 0; font-size:13px; font-weight:700; letter-spacing:-.01em; color:var(--app-text); display:flex; align-items:center; gap:8px; } /* v5.10-APP-TAB-ACCESS — section subtitle/hint */ .detail-c .tab-access .tab-access__sec-sub{ margin:0 0 10px 0 !important; font-size:11.5px !important; color:var(--app-text-muted) !important; letter-spacing:.2px; } /* v5.10-APP-TAB-ACCESS — owner card: subtle accent edge */ .detail-c .tab-access .tab-access__sec-owner{ border-color:var(--app-border-1); background:linear-gradient(180deg, var(--app-accent-soft), transparent 80%), var(--app-surface-0); } /* v5.10-APP-TAB-ACCESS — share card row spacing */ .detail-c .tab-access .tab-access__sec-share .tab-access__share-row{ margin-top:6px; } .detail-c .tab-access .tab-access__sec-share .tab-access__share-row select, .detail-c .tab-access .tab-access__sec-share .tab-access__share-row input{ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-md) !important; color:var(--app-text) !important; padding:8px 12px !important; font-size:13px !important; transition:border-color .15s, box-shadow .15s; } .detail-c .tab-access .tab-access__sec-share .tab-access__share-row select:focus, .detail-c .tab-access .tab-access__sec-share .tab-access__share-row input:focus{ outline:none !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; } /* v5.10-APP-TAB-ACCESS — owner row select polish */ .detail-c .tab-access .tab-access__owner-row select{ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-md) !important; color:var(--app-text) !important; padding:8px 12px !important; font-size:13px !important; transition:border-color .15s, box-shadow .15s; } .detail-c .tab-access .tab-access__owner-row select:focus{ outline:none !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; } /* v5.10-APP-TAB-ACCESS — users list container */ .detail-c .tab-access .tab-access__users{ display:flex; flex-direction:column; gap:8px; margin-bottom:0 !important; } /* v5.10-APP-TAB-ACCESS — user card row (preserves existing .card.tab-access__user) */ .detail-c .tab-access .tab-access__user{ background:linear-gradient(180deg, rgba(255,255,255,0.018), transparent 70%), var(--app-surface-1) !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-md) !important; padding:12px 14px !important; box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 4px 14px -10px rgba(0,0,0,0.5); transition:border-color .18s, transform .18s, box-shadow .18s; margin-bottom:0 !important; } .detail-c .tab-access .tab-access__user:hover{ border-color:var(--app-border-1) !important; transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 8px 22px -12px rgba(0,0,0,0.55); } /* v5.10-APP-TAB-ACCESS — user head row */ .detail-c .tab-access .tab-access__user-head{ border-bottom:1px dashed rgba(255,255,255,0.06); padding-bottom:8px; } /* v5.10-APP-TAB-ACCESS — avatar variant: bigger, glow */ .detail-c .tab-access .tab-access__avatar{ width:34px !important; height:34px !important; font-size:14px !important; border-radius:50%; box-shadow:0 4px 14px -4px var(--app-accent-glow), 0 0 0 1px var(--app-border-1) inset; letter-spacing:0; } /* v5.10-APP-TAB-ACCESS — user name layout (preserves inline color/font-weight) */ .detail-c .tab-access .tab-access__user-name{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--app-text); } /* v5.10-APP-TAB-ACCESS — role pill next to name */ .detail-c .tab-access .tab-access__role-pill{ display:inline-flex; align-items:center; height:18px; padding:0 8px; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--app-accent); background:var(--app-accent-soft); border:1px solid var(--app-accent-soft); border-radius:999px; } /* v5.10-APP-TAB-ACCESS — remove button polish (preserves color/padding from inline) */ .detail-c .tab-access .tab-access__remove{ background:rgba(255,92,124,0.06) !important; border:1px solid rgba(255,92,124,0.18) !important; border-radius:var(--app-r-sm) !important; font-size:12px !important; transition:.15s; } .detail-c .tab-access .tab-access__remove:hover{ background:rgba(255,92,124,0.14) !important; border-color:rgba(255,92,124,0.32) !important; transform:translateY(-1px); } /* v5.10-APP-TAB-ACCESS — feat-label (per-user permission heading) */ .detail-c .tab-access .tab-access__feat-label{ font-size:10.5px !important; letter-spacing:.6px; text-transform:uppercase; color:var(--app-text-muted) !important; margin-bottom:6px !important; } /* v5.10-APP-TAB-ACCESS — feats grid */ .detail-c .tab-access .tab-access__feats{ gap:6px !important; } /* v5.10-APP-TAB-ACCESS — single feature chip (preserves inline color/border for active state) */ .detail-c .tab-access .tab-access__feat{ background:rgba(255,255,255,0.025); border-color:var(--app-border-0) !important; border-radius:999px !important; padding:4px 10px !important; font-size:11.5px !important; letter-spacing:.1px; transition:.15s; user-select:none; } .detail-c .tab-access .tab-access__feat:hover{ background:rgba(255,255,255,0.05); border-color:var(--app-border-1) !important; } .detail-c .tab-access .tab-access__feat input[type="checkbox"]{ accent-color:var(--app-accent); cursor:pointer; } /* v5.10-APP-TAB-ACCESS — empty state */ .detail-c .tab-access .tab-access__empty{ display:flex; align-items:center; gap:10px; padding:18px 14px; border:1px dashed var(--app-border-1); border-radius:var(--app-r-md); background:rgba(255,255,255,0.015); font-size:12.5px !important; color:var(--app-text-muted) !important; letter-spacing:.2px; margin:0; } /* v5.10-APP-TAB-ACCESS — primary button polish inside this tab */ .detail-c .tab-access .tab-access__owner-row .btn:not(.ghost), .detail-c .tab-access .tab-access__share-row .btn:not(.ghost){ background:linear-gradient(180deg, var(--app-accent), #4ba8ee) !important; border:1px solid var(--app-accent) !important; border-radius:var(--app-r-md) !important; color:#04111d !important; font-weight:700 !important; padding:8px 14px !important; transition:.15s; } .detail-c .tab-access .tab-access__owner-row .btn:not(.ghost):hover, .detail-c .tab-access .tab-access__share-row .btn:not(.ghost):hover{ transform:translateY(-1px); box-shadow:0 8px 22px -10px var(--app-accent-glow); } /* v5.10-APP-TAB-ACCESS — ghost button polish inside this tab */ .detail-c .tab-access .tab-access__share-row .btn.ghost{ background:rgba(255,255,255,0.04) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-md) !important; color:var(--app-text) !important; padding:8px 14px !important; transition:.15s; } .detail-c .tab-access .tab-access__share-row .btn.ghost:hover{ background:var(--app-accent-soft) !important; border-color:var(--app-accent) !important; color:var(--app-accent) !important; } /* v5.10-APP-TAB-ACCESS — responsive: stack rows on narrow widths */ @media(max-width:760px){ .detail-c .tab-access .tab-access__owner-row, .detail-c .tab-access .tab-access__share-row{ flex-wrap:wrap; } .detail-c .tab-access .tab-access__owner-row select, .detail-c .tab-access .tab-access__share-row select, .detail-c .tab-access .tab-access__share-row input{ min-width:0; width:100%; flex:1 1 100%; } .detail-c .tab-access .tab-access__feats{ gap:5px !important; } .detail-c .tab-access .tab-access__sec{ padding:12px 14px; } } /* ================ v5.10-APP-TAB-DB / FTP / CONN / DOMAINS — unified credentials-card pattern ================ */ /* Shared "operator-console credentials card" look for the 4 connection-info tabs. */ /* v5.10-APP-TAB-DB */ /* v5.10-APP-TAB-FTP */ /* v5.10-APP-TAB-CONN */ /* v5.10-APP-TAB-DOMAINS */ .detail-c .cred-tab{ padding:4px 2px; color:var(--app-text); } /* v5.10-APP-TAB-DB cred-shell */ .detail-c .cred-tab > .cred-shell, .detail-c .cred-tab .card.cred-shell{ background:linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%), var(--app-surface-0) !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-lg) !important; box-shadow:var(--app-shadow-card) !important; padding:16px !important; } /* v5.10-APP-TAB-DB cred-head */ .detail-c .cred-tab .cred-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; padding-bottom:10px; border-bottom:1px dashed rgba(255,255,255,0.06); } .detail-c .cred-tab .cred-head h3{ font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--app-text); } .detail-c .cred-tab .cred-head .muted{ color:var(--app-text-muted) !important; font-size:11.5px !important; } /* v5.10-APP-TAB-DB intro */ .detail-c .cred-tab .cred-intro, .detail-c .cred-tab .cred-hint{ color:var(--app-text-muted) !important; font-size:12px; line-height:1.55; } /* v5.10-APP-TAB-DB info banner */ .detail-c .cred-tab .cred-info-banner{ background:linear-gradient(180deg, rgba(52,226,155,0.10), rgba(52,226,155,0.04)) !important; border:1px solid rgba(52,226,155,0.28) !important; border-radius:var(--app-r-md) !important; padding:12px 14px !important; font-size:12.5px; line-height:1.5; margin-bottom:14px !important; color:var(--app-text); } .detail-c .cred-tab .cred-info-banner code{ background:rgba(255,255,255,0.06); padding:1px 6px; border-radius:var(--app-r-sm); font-family:var(--mono); font-size:11.5px; color:var(--app-accent); } /* v5.10-APP-TAB-DOMAINS locked-banner variant */ .detail-c .cred-tab .cred-info-locked{ background:linear-gradient(180deg, rgba(255,184,77,0.08), rgba(255,184,77,0.02)) !important; border:1px solid rgba(255,184,77,0.28) !important; color:var(--app-text) !important; } /* v5.10-APP-TAB-DB cred-card (per-DB block) */ .detail-c .cred-tab .cred-card{ background:linear-gradient(180deg, rgba(124,92,240,0.04), transparent 50%), var(--app-surface-1) !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-md) !important; padding:14px !important; margin-bottom:12px !important; box-shadow:none !important; transition:border-color .18s ease, transform .18s ease; } .detail-c .cred-tab .cred-card:hover{ border-color:var(--app-border-1) !important; transform:translateY(-1px); } /* v5.10-APP-TAB-DB rows-grid */ .detail-c .cred-tab .cred-rows{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; font-size:13px; } .detail-c .cred-tab .cred-rows .cred-row{ display:flex; flex-direction:column; gap:4px; min-width:0; padding:8px 10px; border-radius:var(--app-r-sm); background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); transition:background .15s ease; } .detail-c .cred-tab .cred-rows .cred-row:hover{ background:rgba(255,255,255,0.035); } /* v5.10-APP-TAB-DB cred-label */ /* v5.10-APP-TAB-FTP cred-label */ /* v5.10-APP-TAB-CONN cred-label */ /* v5.10-APP-TAB-DOMAINS cred-label */ .detail-c .cred-tab .cred-label{ color:var(--app-text-muted) !important; font-size:10.5px !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px !important; } /* v5.10-APP-TAB-DB cred-val */ /* v5.10-APP-TAB-FTP cred-val */ /* v5.10-APP-TAB-CONN cred-val */ /* v5.10-APP-TAB-DOMAINS cred-val */ .detail-c .cred-tab .cred-val{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--app-text); word-break:break-all; min-width:0; } .detail-c .cred-tab .cred-val-wrap{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; } /* v5.10-APP-TAB-DB password masked */ .detail-c .cred-tab .cred-val-pw{ letter-spacing:.18em; } /* v5.10-APP-TAB-DB secret-row tint */ .detail-c .cred-tab .cred-row-secret{ background:linear-gradient(180deg, rgba(255,184,77,0.05), transparent 70%); border-color:rgba(255,184,77,0.14) !important; } /* v5.10-APP-TAB-DB cred-btn (ghost copy/show-hide icon button) */ /* v5.10-APP-TAB-FTP cred-btn */ /* v5.10-APP-TAB-CONN cred-btn */ /* v5.10-APP-TAB-DOMAINS cred-btn */ .detail-c .cred-tab .cred-btn{ background:rgba(255,255,255,0.04) !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-sm) !important; color:var(--app-text-muted) !important; transition:.15s ease; flex:none; } .detail-c .cred-tab .cred-btn:hover{ background:var(--app-accent-soft) !important; border-color:var(--app-accent) !important; color:var(--app-text) !important; transform:translateY(-1px); } /* v5.10-APP-TAB-DOMAINS danger button */ .detail-c .cred-tab .cred-danger{ color:var(--app-danger) !important; } .detail-c .cred-tab .cred-danger:hover{ background:rgba(255,92,124,0.10) !important; border-color:var(--app-danger) !important; color:var(--app-danger) !important; } /* v5.10-APP-TAB-DB actions row */ .detail-c .cred-tab .cred-actions{ margin-top:12px; padding-top:10px; border-top:1px dashed rgba(255,255,255,0.06); display:flex; gap:8px; flex-wrap:wrap; } .detail-c .cred-tab .cred-action-btn{ border-radius:var(--app-r-sm) !important; font-weight:600; transition:.18s ease; } .detail-c .cred-tab .cred-action-btn:hover{ transform:translateY(-1px); } /* v5.10-APP-TAB-DB new-form */ /* v5.10-APP-TAB-DOMAINS inline form */ .detail-c .cred-tab .cred-newform{ margin-top:14px; padding:12px 14px; border:1px solid var(--app-border-0); border-radius:var(--app-r-md); background:linear-gradient(180deg, rgba(124,92,240,0.04), transparent 60%); display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; } .detail-c .cred-tab .cred-newform .cred-newform-field{ flex:1; min-width:200px; } .detail-c .cred-tab .cred-newform .label{ color:var(--app-text-muted); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; } .detail-c .cred-tab .cred-newform input{ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-sm) !important; color:var(--app-text) !important; padding:8px 12px; font-size:13px; width:100%; transition:border-color .15s ease, box-shadow .15s ease; } .detail-c .cred-tab .cred-newform input:focus{ outline:none; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft); } .detail-c .cred-tab .cred-newform-inline input{ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-sm) !important; color:var(--app-text) !important; padding:8px 12px; } /* v5.10-APP-TAB-FTP keyval list rows */ /* v5.10-APP-TAB-CONN keyval list rows */ /* v5.10-APP-TAB-DOMAINS list rows */ .detail-c .cred-tab .cred-list{ display:flex; flex-direction:column; gap:6px; } .detail-c .cred-tab .cred-list-row{ display:flex; align-items:center; gap:10px; padding:10px 12px !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-sm) !important; background:rgba(255,255,255,0.02) !important; transition:.15s ease; } .detail-c .cred-tab .cred-list-row:hover{ border-color:var(--app-border-1) !important; background:rgba(255,255,255,0.035) !important; } .detail-c .cred-tab .cred-list-keyval .cred-list-row .cred-label{ font-weight:700; font-size:11px !important; flex:0 0 auto; min-width:90px; } /* v5.10-APP-TAB-DOMAINS list icon */ .detail-c .cred-tab .cred-list-ico{ font-size:14px; opacity:.85; } /* v5.10-APP-TAB-DOMAINS SSL pill */ .detail-c .cred-tab .cred-ssl-pill{ background:rgba(52,226,155,0.14) !important; color:var(--app-success) !important; border-radius:999px; padding:3px 9px; font-size:11px; font-weight:700; } /* v5.10-APP-TAB-CONN primary-address hero card */ .detail-c .cred-tab .cred-primary-card{ background:linear-gradient(135deg, rgba(124,92,240,0.16), rgba(160,107,255,0.10)) !important; border:1px solid var(--app-accent) !important; border-radius:var(--app-r-lg) !important; padding:16px 18px !important; margin-bottom:16px !important; box-shadow:0 8px 28px -18px var(--app-accent-glow) !important; } .detail-c .cred-tab .cred-primary-label{ color:var(--app-text-muted) !important; font-size:10.5px !important; font-weight:700; text-transform:uppercase; letter-spacing:.08em; } .detail-c .cred-tab .cred-primary-val{ font-family:var(--mono); font-size:20px; font-weight:700; letter-spacing:-.01em; color:#fff; word-break:break-all; } /* v5.10-APP-TAB-CONN section title */ .detail-c .cred-tab .cred-section{ margin-top:14px; } .detail-c .cred-tab .cred-section-title{ font-size:13px !important; font-weight:700; margin:0 0 8px 0 !important; color:var(--app-text); text-transform:uppercase; letter-spacing:.06em; } /* v5.10-APP-TAB-CONN link */ .detail-c .cred-tab .cred-link{ color:var(--app-accent) !important; text-decoration:none; font-weight:600; font-size:12.5px; } .detail-c .cred-tab .cred-link:hover{ text-decoration:underline; } /* v5.10-APP-TAB-DB empty */ /* v5.10-APP-TAB-FTP empty */ /* v5.10-APP-TAB-CONN empty */ /* v5.10-APP-TAB-DOMAINS empty */ .detail-c .cred-tab .cred-empty, .detail-c .cred-tab .cred-empty-wrap{ color:var(--app-text-muted) !important; font-size:12.5px; } .detail-c .cred-tab .cred-empty{ padding:12px 0; } /* v5.10-APP-TAB-FTP status banners */ .detail-c .cred-tab .cred-status{ border-radius:var(--app-r-md) !important; padding:12px 14px !important; font-size:12.5px; line-height:1.5; margin-top:8px; } .detail-c .cred-tab .cred-status-pending{ background:linear-gradient(180deg, rgba(255,184,77,0.08), rgba(255,184,77,0.02)) !important; border:1px solid rgba(255,184,77,0.28) !important; color:var(--app-text) !important; } .detail-c .cred-tab .cred-status-approved{ background:linear-gradient(180deg, rgba(52,226,155,0.08), rgba(52,226,155,0.02)) !important; border:1px solid rgba(52,226,155,0.28) !important; color:var(--app-text) !important; } /* v5.10-APP-TAB-DB / FTP / CONN / DOMAINS — responsive */ @media(max-width:780px){ .detail-c .cred-tab .cred-rows{ grid-template-columns:1fr !important; } .detail-c .cred-tab .cred-primary-val{ font-size:16px !important; } .detail-c .cred-tab .cred-newform{ flex-direction:column; align-items:stretch; } } /* ================ v5.10-APP-TAB-FILES ================ */ /* Files tab — 2-column file-manager layout (glass tree + glass preview/editor). All rules scoped under .detail-c .tab-files. */ /* v5.10-APP-TAB-FILES — tab root: flex 2-column owning available height */ .detail-c .tab-files{ display:flex !important; flex-direction:row; gap:14px; flex:1 1 auto; min-height:0; height:100%; overflow:hidden; } /* v5.10-APP-TAB-FILES — left column: tree browser glass card (P5: breiter, Toolbar passt sauber rein) */ .detail-c .tab-files .tab-files-tree{ flex:1 1 auto; min-width:320px; max-width:none; display:flex; flex-direction:column; min-height:0; background:var(--app-surface-0); border:1px solid var(--app-border-0); border-radius:var(--app-r-lg); box-shadow:var(--app-shadow-card); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); padding:14px; overflow:hidden; } /* v5.10-APP-TAB-FILES — right column: preview/editor glass card (P5: schmaler, fixe Breite) */ .detail-c .tab-files .tab-files-view{ flex:0 0 340px; width:340px; max-width:34%; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--app-surface-0); border:1px solid var(--app-border-0); border-radius:var(--app-r-lg); box-shadow:var(--app-shadow-card); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); overflow:hidden; } /* v5.10-APP-TAB-FILES — tree head: breadcrumbs + actions (P5: kein Overlap, Pfad truncatet, Buttons feste Breite) */ .detail-c .tab-files .tab-files-tree-head{ flex:0 0 auto; padding-bottom:10px; border-bottom:1px solid var(--app-border-0); margin-bottom:10px !important; flex-wrap:nowrap !important; } .detail-c .tab-files .tab-files-crumbs{ color:var(--app-text-muted); min-width:0; overflow:hidden; } .detail-c .tab-files .tab-files-tree-head > .btn, .detail-c .tab-files .tab-files-tree-head > label.btn{ flex:0 0 auto; white-space:nowrap; } .detail-c .tab-files .tab-files-crumbs a{ color:var(--app-text-muted); text-decoration:none; padding:2px 6px; border-radius:var(--app-r-sm); transition:background .15s ease, color .15s ease; } .detail-c .tab-files .tab-files-crumbs a:hover{ background:var(--app-accent-soft); color:var(--app-accent); } .detail-c .tab-files .tab-files-upload{ flex:0 0 auto; } /* v5.10-APP-TAB-FILES — file list: independent scroll, fills column */ .detail-c .tab-files .tab-files-list{ flex:1 1 auto; min-height:0; max-height:none !important; overflow:auto !important; display:flex; flex-direction:column; gap:3px; padding-right:4px; } .detail-c .tab-files .tab-files-list::-webkit-scrollbar{ width:8px; } .detail-c .tab-files .tab-files-list::-webkit-scrollbar-thumb{ background:var(--app-border-1); border-radius:4px; } .detail-c .tab-files .tab-files-list::-webkit-scrollbar-thumb:hover{ background:var(--app-accent-soft); } /* v5.10-APP-TAB-FILES — rows: subtle glass row + hover highlight */ .detail-c .tab-files .tab-files-row{ background:transparent !important; border:1px solid transparent !important; border-radius:var(--app-r-md) !important; padding:7px 9px !important; transition:background .15s ease, border-color .15s ease, transform .15s ease; display:flex; align-items:center; gap:8px; } .detail-c .tab-files .tab-files-row:hover{ background:rgba(255,255,255,0.035) !important; border-color:var(--app-border-0) !important; } .detail-c .tab-files .tab-files-row.is-dir:hover{ background:var(--app-accent-soft) !important; border-color:var(--app-accent) !important; } /* v5.10-APP-TAB-FILES — current selection */ .detail-c .tab-files .tab-files-row.is-current{ background:var(--app-accent-soft) !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 1px var(--app-accent-glow); } .detail-c .tab-files .tab-files-row.is-current .cname{ color:var(--app-accent); font-weight:600; } /* v5.10-APP-TAB-FILES — up-row */ .detail-c .tab-files .tab-files-up{ opacity:.85; } .detail-c .tab-files .tab-files-up:hover{ opacity:1; } /* v5.10-APP-TAB-FILES — row name + size */ .detail-c .tab-files .tab-files-row .cname{ color:var(--app-text); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .detail-c .tab-files .tab-files-size{ color:var(--app-text-muted) !important; font-variant-numeric:tabular-nums; white-space:nowrap; } /* v5.10-APP-TAB-FILES — row action buttons (icon-only, reveal on hover) */ .detail-c .tab-files .tab-files-act{ border-radius:var(--app-r-sm) !important; background:transparent !important; border:1px solid transparent !important; opacity:0; transition:opacity .15s ease, background .15s ease, border-color .15s ease; } .detail-c .tab-files .tab-files-row:hover .tab-files-act, .detail-c .tab-files .tab-files-row.is-current .tab-files-act{ opacity:1; } .detail-c .tab-files .tab-files-act:hover{ background:var(--app-surface-1) !important; border-color:var(--app-border-1) !important; } .detail-c .tab-files .tab-files-act-edit:hover{ border-color:var(--app-accent) !important; color:var(--app-accent) !important; } .detail-c .tab-files .tab-files-act-del:hover{ border-color:var(--app-danger) !important; } /* v5.10-APP-TAB-FILES — empty / loading */ .detail-c .tab-files .tab-files-empty{ text-align:center; padding:30px 12px; color:var(--app-text-muted); font-size:13px; } .detail-c .tab-files .tab-files-loading{ flex:1 1 auto; } /* v5.10-APP-TAB-FILES — view head: filename/path + meta + actions */ .detail-c .tab-files .tab-files-view-head{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--app-border-0); background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); } .detail-c .tab-files .tab-files-view-ic{ font-size:22px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--app-r-md); background:var(--app-accent-soft); border:1px solid var(--app-border-0); flex:0 0 auto; } .detail-c .tab-files .tab-files-view-meta{ flex:1 1 auto; min-width:0; } .detail-c .tab-files .tab-files-view-name{ font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--app-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .detail-c .tab-files .tab-files-view-sub{ font-size:11.5px; color:var(--app-text-muted) !important; margin-top:2px; } .detail-c .tab-files .tab-files-view-act{ flex:0 0 auto; } /* v5.10-APP-TAB-FILES — view body: independent scroll, fills card */ .detail-c .tab-files .tab-files-view-body{ flex:1 1 auto; min-height:0; overflow:auto; padding:18px; display:flex; align-items:center; justify-content:center; } .detail-c .tab-files .tab-files-view-body::-webkit-scrollbar{ width:8px; } .detail-c .tab-files .tab-files-view-body::-webkit-scrollbar-thumb{ background:var(--app-border-1); border-radius:4px; } /* v5.10-APP-TAB-FILES — empty preview state */ .detail-c .tab-files .tab-files-view-empty{ text-align:center; max-width:360px; padding:32px 16px; border:1px dashed var(--app-border-1); border-radius:var(--app-r-lg); background:rgba(255,255,255,0.015); } .detail-c .tab-files .tab-files-view-empty-ic{ font-size:42px; opacity:.55; margin-bottom:10px; line-height:1; } .detail-c .tab-files .tab-files-view-empty-title{ font-size:14px; font-weight:600; color:var(--app-text); margin-bottom:6px; } .detail-c .tab-files .tab-files-view-empty-sub{ font-size:12.5px; color:var(--app-text-muted) !important; line-height:1.5; } /* v5.10-APP-TAB-FILES — responsive: stack at narrow widths */ @media(max-width:900px){ .detail-c .tab-files{ flex-direction:column; } .detail-c .tab-files .tab-files-tree{ flex:0 0 auto; min-width:0; max-width:none; width:100%; max-height:50%; } .detail-c .tab-files .tab-files-view{ flex:1 1 auto; width:100%; max-width:none; min-height:240px; } } /* ================ v5.10-APP-CHROME ================ */ /* Global App-Shell Redesign — die Chrome (.shell + .gtop + .gside + .gmain) + alle Pages. Tokens werden hier auf :root + .shell dupliziert, damit sie ueberall verfuegbar sind (nicht nur unter .detail-c). Alle Selectoren in diesem Block tragen den Marker v5.10-APP-CHROME. */ /* v5.10-APP-CHROME — Tokens GLOBAL verfuegbar (Duplikat von v5.10-APP-BASE) */ :root, .shell{ --app-bg-0:#060810; --app-bg-1:#0a0d18; --app-surface-0:rgba(15,20,35,0.5); --app-surface-1:rgba(20,26,42,0.7); --app-border-0:rgba(255,255,255,0.07); --app-border-1:rgba(255,255,255,0.10); --app-accent:#7c5cf0; --app-accent-soft:rgba(124,92,240,0.12); --app-accent-glow:rgba(124,92,240,0.28); --app-success:var(--success); /* polish-p4: single-source -> --success(#34e29b) */ --app-warn:#ffb84d; --app-danger:#ff5c7c; --app-text:#e8ecf5; --app-text-muted:#9aa3c8; --app-r-sm:8px; --app-r-md:12px; --app-r-lg:16px; --app-shadow-card:0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6); --app-blur:blur(14px) saturate(140%); --app-blur-strong:blur(22px) saturate(160%); --gtop-h:60px; --gside-w:232px; /* MAINREDESIGN 2026-07-04: Command-Deck-Rail-Kanon (232px) statt 252px */ --gside-collapsed-w:64px; } /* v5.10-APP-CHROME — no-scroll invariant + dark aurora canvas */ html, body{ height:100vh; overflow:hidden; background: radial-gradient(1100px 600px at 100% -8%, rgba(77,159,255,0.08), transparent 60%), radial-gradient(900px 520px at -8% 0%, rgba(160,107,255,0.07), transparent 55%), radial-gradient(700px 700px at 50% 110%, rgba(52,226,155,0.04), transparent 60%), linear-gradient(180deg, var(--app-bg-1) 0%, var(--app-bg-0) 100%); background-attachment:fixed; color:var(--app-text); } /* v5.10-APP-CHROME — shell layout */ .shell{ height:100vh; max-height:100vh; overflow:hidden; background:transparent; padding:10px; gap:10px; display:grid; grid-template-columns:var(--gside-w) 1fr; align-items:stretch; position:relative; isolation:isolate; } .shell.gside-collapsed{ grid-template-columns:var(--gside-collapsed-w) 1fr; } /* v5.10-APP-CHROME — Sidebar als floating glass-kapsel */ .shell .gside.gside-glass{ position:relative; height:calc(100vh - 20px); overflow:hidden; border:1px solid var(--app-border-1); border-radius:var(--app-r-lg); background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 35%), var(--app-surface-1); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); padding:14px 10px 12px; display:flex; flex-direction:column; transition:padding .22s ease, width .22s ease; } .shell .gside.gside-glass::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, var(--app-accent-soft), transparent 30%); opacity:.7; pointer-events:none; z-index:0; } .shell .gside.gside-glass > *{position:relative;z-index:1} /* v5.10-APP-CHROME — glow decoration in sidebar */ .shell .gside.gside-glass .gside-glow{ position:absolute; inset:auto -40px -30px -40px; height:140px; background:radial-gradient(60% 100% at 50% 100%, var(--app-accent-glow), transparent 70%); filter:blur(28px); pointer-events:none; opacity:.55; z-index:0; } /* v5.10-APP-CHROME — sidebar inner scroll (nav area only) */ .shell .gside.gside-glass .gnav{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:var(--app-accent-soft) transparent; padding-right:2px; margin-right:-2px; } .shell .gside.gside-glass .gnav::-webkit-scrollbar{width:6px} .shell .gside.gside-glass .gnav::-webkit-scrollbar-track{background:transparent} .shell .gside.gside-glass .gnav::-webkit-scrollbar-thumb{ background:var(--app-accent-soft); border-radius:6px; } .shell .gside.gside-glass .gnav::-webkit-scrollbar-thumb:hover{ background:var(--app-accent-glow); } /* v5.10-APP-CHROME — brand block polish */ .shell .gside.gside-glass .gbrand{ padding:4px 8px 14px; border-bottom:1px solid var(--app-border-0); margin-bottom:10px; } .shell .gside.gside-glass .gbrand .glogo{ background:linear-gradient(135deg, var(--app-accent), #a06bff); box-shadow:0 8px 22px -6px var(--app-accent-glow); border-radius:12px; } .shell .gside.gside-glass .gbrand .gbtxt b{ color:var(--app-text); letter-spacing:-.3px; } .shell .gside.gside-glass .gbrand .gbtxt b span{ background:linear-gradient(135deg, var(--app-accent), #a06bff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .shell .gside.gside-glass .gbrand .gbtxt small{ color:var(--app-text-muted); } /* v5.10-APP-CHROME — nav labels + nav items */ .shell .gside.gside-glass .navlabel{ font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--app-text-muted); opacity:.7; padding:14px 10px 6px; font-weight:700; } .shell .gside.gside-glass .gnav-i{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--app-r-md); color:var(--app-text-muted); font-weight:600; font-size:13px; border:1px solid transparent; transition:background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease; position:relative; } .shell .gside.gside-glass .gnav-i:hover{ color:var(--app-text); background:var(--app-surface-0); border-color:var(--app-border-0); } .shell .gside.gside-glass .gnav-i.on{ color:var(--app-text); background:linear-gradient(135deg, var(--app-accent-soft), transparent 70%), var(--app-surface-0); border-color:var(--app-accent); box-shadow:0 0 0 3px rgba(124,92,240,0.08), 0 8px 22px -12px var(--app-accent-glow); } .shell .gside.gside-glass .gnav-i.on::before{ content:""; position:absolute; left:-1px; top:6px; bottom:6px; width:3px; border-radius:3px; background:var(--app-accent); box-shadow:0 0 12px var(--app-accent-glow); } .shell .gside.gside-glass .gnav-i .gi{ font-size:15px; width:20px; text-align:center; flex:0 0 auto; } .shell .gside.gside-glass .gnav-i .gext{ font-size:10.5px; opacity:.5; } /* v5.10-APP-CHROME — gmain area as transparent-over-canvas */ .shell .gmain{ height:calc(100vh - 20px); max-height:calc(100vh - 20px); overflow:hidden; display:flex; flex-direction:column; min-width:0; border-radius:var(--app-r-lg); background:transparent; } /* v5.10-APP-CHROME — Topbar als floating glass pill */ .shell .gmain > .gtop.gtop-glass{ flex:0 0 auto; height:var(--gtop-h); margin:0 0 10px 0; padding:10px 16px; border:1px solid var(--app-border-1); border-radius:var(--app-r-lg); background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 35%), var(--app-surface-1); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); display:flex; align-items:center; gap:12px; position:relative; z-index:35; overflow:visible; } .shell .gmain > .gtop.gtop-glass::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, transparent 0%, var(--app-accent-soft) 50%, transparent 100%); opacity:.18; pointer-events:none; mix-blend-mode:screen; } .shell .gmain > .gtop.gtop-glass > *{position:relative;z-index:1} /* v5.10-APP-CHROME — gtop-r as pill cluster */ .shell .gmain > .gtop.gtop-glass .gtop-r.gtop-r-pill{ display:flex; align-items:center; gap:10px; padding:4px; border-radius:999px; background:var(--app-surface-0); border:1px solid var(--app-border-0); } /* v5.10-APP-CHROME — gtop user-chip override */ .shell .gmain > .gtop.gtop-glass .user-chip{ display:flex; align-items:center; gap:9px; padding:5px 12px 5px 5px; border:1px solid var(--app-border-0); border-radius:999px; background:var(--app-surface-1); cursor:pointer; transition:.16s; } .shell .gmain > .gtop.gtop-glass .user-chip:hover{ border-color:var(--app-accent); box-shadow:0 0 0 3px var(--app-accent-soft); } .shell .gmain > .gtop.gtop-glass .user-chip .avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg, var(--app-accent), #a06bff); box-shadow:0 4px 14px -4px var(--app-accent-glow); } /* v5.10-APP-CHROME — hamburger button polish */ .shell .gmain > .gtop.gtop-glass .gside-hamburger{ width:36px; height:36px; border:1px solid var(--app-border-0); border-radius:var(--app-r-md); background:var(--app-surface-0); color:var(--app-text-muted); transition:.16s; } .shell .gmain > .gtop.gtop-glass .gside-hamburger:hover{ color:var(--app-text); background:var(--app-accent-soft); border-color:var(--app-accent); } /* v5.10-APP-CHROME — content area = einziger scroll-container */ .shell .gmain > .content{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:0; background:transparent; scrollbar-width:thin; scrollbar-color:var(--app-accent-soft) transparent; } .shell .gmain > .content::-webkit-scrollbar{width:8px;height:8px} .shell .gmain > .content::-webkit-scrollbar-track{background:transparent} .shell .gmain > .content::-webkit-scrollbar-thumb{ background:var(--app-accent-soft); border-radius:8px; border:2px solid transparent; background-clip:padding-box; } .shell .gmain > .content::-webkit-scrollbar-thumb:hover{ background:var(--app-accent-glow); background-clip:padding-box; } /* v5.10-APP-CHROME — content padding when NOT detail-c */ .shell .gmain > .content:not(:has(> .detail-c)){ padding:14px 18px 18px; } /* v5.10-APP-CHROME — toggle button repositioned for new shell padding */ .shell .gside-toggle{ position:absolute; left:calc(var(--gside-w) - 2px); top:24px; width:26px; height:26px; border-radius:50%; border:1px solid var(--app-border-1); background:var(--app-surface-1); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--app-text-muted); z-index:60; box-shadow:0 6px 14px -4px rgba(0,0,0,.6); transition:.18s; } .shell .gside-toggle:hover{ color:var(--app-text); border-color:var(--app-accent); box-shadow:0 0 0 3px var(--app-accent-soft), 0 6px 14px -4px rgba(0,0,0,.6); transform:scale(1.08); } .shell.gside-collapsed .gside-toggle{ left:calc(var(--gside-collapsed-w) - 2px); transform:rotate(180deg); } .shell.gside-collapsed .gside-toggle:hover{ transform:rotate(180deg) scale(1.08); } /* v5.10-APP-CHROME — collapsed sidebar polish */ .shell.gside-collapsed .gside.gside-glass{ padding:14px 6px 12px; } /* v5.10-APP-CHROME — GLOBAL card glass */ .shell .gmain .card{ background: linear-gradient(180deg, rgba(255,255,255,0.035), transparent 50%), var(--app-surface-1); border:1px solid var(--app-border-1); border-radius:var(--app-r-lg); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .shell .gmain .card:hover{ border-color:var(--app-border-1); } /* v5.10-APP-CHROME — GLOBAL button variants */ .shell .gmain .btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid transparent; border-radius:var(--app-r-md); font-weight:600; font-size:13px; cursor:pointer; transition:transform .12s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease, color .14s ease, filter .14s ease; color:#0a1224; background:linear-gradient(135deg, var(--app-accent), #9579ff); box-shadow:0 8px 22px -10px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.18) inset; letter-spacing:.01em; } .shell .gmain .btn:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 12px 28px -10px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.25) inset; } .shell .gmain .btn:active{transform:translateY(0)} .shell .gmain .btn.ghost{ background:var(--app-surface-0); color:var(--app-text); border:1px solid var(--app-border-1); box-shadow:none; } .shell .gmain .btn.ghost:hover{ background:var(--app-surface-1); border-color:var(--app-accent); color:var(--app-text); filter:none; box-shadow:0 0 0 3px var(--app-accent-soft); } .shell .gmain .btn.gm-danger{ background:linear-gradient(135deg, var(--app-danger), #ff3d5e); color:#fff; box-shadow:0 8px 22px -10px rgba(255,92,124,0.55); } /* v5.10-APP-CHROME — GLOBAL inputs/selects/textareas */ .shell .gmain input, .shell .gmain select, .shell .gmain textarea{ background:var(--app-surface-1); border:1px solid var(--app-border-1); border-radius:var(--app-r-md); color:var(--app-text); padding:10px 12px; font-size:13.5px; outline:none; transition:.14s; } .shell .gmain input::placeholder, .shell .gmain textarea::placeholder{ color:var(--app-text-muted); opacity:.7; } .shell .gmain input:focus, .shell .gmain select:focus, .shell .gmain textarea:focus{ border-color:var(--app-accent); box-shadow:0 0 0 3px var(--app-accent-soft); background:var(--app-surface-1); } .shell .gmain input[type=checkbox]{ width:18px; height:18px; accent-color:var(--app-accent); } /* v5.10-APP-CHROME — pill variants */ .shell .gmain .pill{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px; background:var(--app-accent-soft); color:var(--app-accent); border:1px solid transparent; letter-spacing:.02em; } .shell .gmain .pill.pill-success, .shell .gmain .pill.run, .shell .gmain .badge.run{ background:rgba(52,226,155,0.14); color:var(--app-success); } .shell .gmain .pill.pill-warn{ background:rgba(255,184,77,0.14); color:var(--app-warn); } .shell .gmain .pill.pill-danger{ background:rgba(255,92,124,0.14); color:var(--app-danger); } /* v5.10-APP-CHROME — modal overlays (existing inline-styled ones + .modal-overlay class) */ .shell ~ .modal-overlay, .shell .modal-overlay, .modal-overlay{ background:rgba(4,6,16,0.62) !important; -webkit-backdrop-filter:var(--app-blur-strong) !important; backdrop-filter:var(--app-blur-strong) !important; animation:appChromeModalFade .18s ease; } @keyframes appChromeModalFade{ from{opacity:0} to{opacity:1} } @keyframes appChromeModalScale{ from{opacity:0;transform:translateY(8px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} } /* v5.10-APP-CHROME — gmodal (custom confirm/prompt) glass refresh */ .gmodal-ov{ background:rgba(4,6,16,0.62) !important; -webkit-backdrop-filter:var(--app-blur-strong) !important; backdrop-filter:var(--app-blur-strong) !important; } .gmodal{ background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 35%), var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-lg) !important; -webkit-backdrop-filter:var(--app-blur) !important; backdrop-filter:var(--app-blur) !important; box-shadow:0 28px 80px rgba(0,0,0,.6), var(--app-shadow-card) !important; animation:appChromeModalScale .2s cubic-bezier(.2,.8,.2,1); } .gmodal-h{color:var(--app-text) !important} .gmodal-b{color:var(--app-text-muted) !important} /* v5.10-APP-CHROME — user dropdown (.udrop) glass refresh */ .shell .gmain .udrop{ background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 50%), var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-md) !important; -webkit-backdrop-filter:var(--app-blur) !important; backdrop-filter:var(--app-blur) !important; box-shadow:0 18px 44px -18px rgba(0,0,0,.85), var(--app-shadow-card) !important; animation:appChromeModalScale .16s cubic-bezier(.2,.8,.2,1); } .shell .gmain .udrop .ud-item{ color:var(--app-text) !important; transition:background .14s ease, color .14s ease; } .shell .gmain .udrop .ud-item:hover{ background:var(--app-accent-soft) !important; color:var(--app-accent) !important; } /* v5.10-APP-CHROME — login page on aurora canvas */ /* PAKET7: doppelte .login-wrap-Regel entfernt — Layout/min-height/Hintergrund kommen bereits aus .login-wrap (oben, /* login */) + .app-login-page (unten, !important). Auf allen Login/Lock/Setup-Screens traegt das Element beide Klassen, daher war dieser Block (min-height:100vh; background:transparent) vollstaendig redundant. */ .login-card{ background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 40%), var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-lg) !important; -webkit-backdrop-filter:var(--app-blur-strong) !important; backdrop-filter:var(--app-blur-strong) !important; box-shadow:0 40px 90px -40px rgba(0,0,0,0.9), 0 0 0 1px var(--app-border-0) inset !important; } .login-card .brand .name{ background:linear-gradient(135deg, var(--app-accent), #a06bff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .login-card .field label{color:var(--app-text-muted)} .login-card input{ background:var(--app-surface-0) !important; border:1px solid var(--app-border-1) !important; color:var(--app-text) !important; border-radius:var(--app-r-md) !important; } .login-card input:focus{ border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; } .login-card .btn{ background:linear-gradient(135deg, var(--app-accent), #9579ff) !important; color:#0a1224 !important; border-radius:var(--app-r-md) !important; box-shadow:0 10px 26px -10px var(--app-accent-glow) !important; } /* v5.10-APP-CHROME — toastbox glass */ .toastbox{ background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 50%), var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; border-left:3px solid var(--app-accent) !important; border-radius:var(--app-r-md) !important; -webkit-backdrop-filter:var(--app-blur) !important; backdrop-filter:var(--app-blur) !important; box-shadow:0 18px 40px -18px rgba(0,0,0,0.9), var(--app-shadow-card) !important; color:var(--app-text) !important; } .toastbox.ok{border-left-color:var(--app-success) !important} .toastbox.err{border-left-color:var(--app-danger) !important} /* v5.10-APP-CHROME — responsive: shell collapses to single column below 960px (P3-polish: aligned 880->960 to match off-canvas sidebar breakpoint, fixes 881-960px hamburger gap) */ @media(max-width:960px){ .shell{ grid-template-columns:1fr; padding:8px; gap:8px; } .shell .gside.gside-glass{ position:fixed; left:8px; top:8px; bottom:8px; width:min(280px, calc(100vw - 16px)); z-index:200; transform:translateX(calc(-100% - 16px)); transition:transform .22s ease; } .shell.gside-mobile-open .gside.gside-glass{ transform:translateX(0); } .shell .gside-toggle{display:none} .shell .gmain > .gtop.gtop-glass .gside-hamburger{display:inline-flex !important} } @media(min-width:961px){ .shell .gmain > .gtop.gtop-glass .gside-hamburger{display:none} } /* v5.10-APP-CHROME — re-assert detail-c sizing under new shell padding */ .shell .gmain > .content > .detail-c{ height:calc(100vh - var(--gtop-h, 60px) - 30px) !important; max-height:calc(100vh - var(--gtop-h, 60px) - 30px) !important; } /* v5.10-APP-CHROME — globalize design tokens so out-of-shell pages (login) can use them */ :root, .shell, .app-login-page{ --app-bg-0:#060810; --app-bg-1:#0a0d18; --app-surface-0:rgba(15,20,35,0.5); --app-surface-1:rgba(20,26,42,0.7); --app-border-0:rgba(255,255,255,0.07); --app-border-1:rgba(255,255,255,0.10); --app-accent:#7c5cf0; --app-accent-soft:rgba(124,92,240,0.12); --app-accent-glow:rgba(124,92,240,0.28); --app-success:var(--success); /* polish-p4: single-source -> --success(#34e29b) */ --app-warn:#ffb84d; --app-danger:#ff5c7c; --app-text:#e8ecf5; --app-text-muted:#9aa3c8; --app-r-sm:8px; --app-r-md:12px; --app-r-lg:16px; --app-shadow-card:0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6); --app-blur:blur(14px) saturate(140%); } /* ================ v5.10-APP-PAGE-LOGIN ================ */ /* Login canvas: centered glass card on aurora background with subtle entrance, prominent brand logo and pill-style error messaging. Scoped to .app-login-page. */ /* v5.10-APP-PAGE-LOGIN — outer canvas takes full viewport with layered aurora */ .app-login-page{ position:relative; min-height:100vh; width:100%; display:flex; align-items:center; justify-content:center; padding:32px 20px; background: radial-gradient(900px 520px at 18% 12%, rgba(77,159,255,0.11), transparent 60%), radial-gradient(820px 480px at 86% 88%, rgba(160,107,255,0.11), transparent 58%), linear-gradient(180deg, var(--app-bg-1) 0%, var(--app-bg-0) 100%) !important; overflow:hidden; isolation:isolate; } /* v5.10-APP-PAGE-LOGIN — animated aurora orbs + faint grid behind the card */ .app-login-page .app-login-aura{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .app-login-page .app-login-orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; will-change:transform; } .app-login-page .app-login-orb--a{ width:420px; height:420px; left:-90px; top:-110px; background:radial-gradient(circle at 30% 30%, var(--app-accent), transparent 70%); animation:appLoginOrbA 18s ease-in-out infinite alternate; } .app-login-page .app-login-orb--b{ width:500px; height:500px; right:-140px; bottom:-160px; background:radial-gradient(circle at 50% 50%, rgba(160,107,255,.65), transparent 70%); animation:appLoginOrbB 22s ease-in-out infinite alternate; } .app-login-page .app-login-grid{ position:absolute; inset:-1px; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size:42px 42px; mask-image:radial-gradient(closest-side at 50% 50%, #000 35%, transparent 78%); -webkit-mask-image:radial-gradient(closest-side at 50% 50%, #000 35%, transparent 78%); opacity:.45; } @keyframes appLoginOrbA{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(40px,30px,0) scale(1.08)} } @keyframes appLoginOrbB{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(-50px,-30px,0) scale(1.1)} } /* v5.10-APP-PAGE-LOGIN — stage centers the card and hosts entrance animation */ .app-login-page .app-login-stage{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:100%; max-width:440px; animation:appLoginIn .55s cubic-bezier(.22,.94,.36,1) both; } @keyframes appLoginIn{ 0%{opacity:0;transform:translateY(14px) scale(.985)} 100%{opacity:1;transform:translateY(0) scale(1)} } /* v5.10-APP-PAGE-LOGIN — card chrome, building on existing .login-card */ .app-login-page .login-card.app-login-card{ position:relative; width:100%; max-width:420px; padding:38px 32px 30px !important; border:1px solid var(--app-border-1) !important; border-radius:20px !important; background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 45%), var(--app-surface-1) !important; -webkit-backdrop-filter:blur(20px) saturate(150%) !important; backdrop-filter:blur(20px) saturate(150%) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 40px 90px -40px rgba(0,0,0,0.95), 0 0 0 1px var(--app-border-0) inset !important; overflow:hidden; } /* v5.10-APP-PAGE-LOGIN — accent rim glow at the top of the card */ .app-login-page .app-login-card-glow{ position:absolute; top:-1px; left:14%; right:14%; height:2px; background:linear-gradient(90deg, transparent, var(--app-accent-glow), transparent); border-radius:2px; pointer-events:none; filter:blur(.4px); } /* v5.10-APP-PAGE-LOGIN — header block: brand + sub */ .app-login-page .app-login-head{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:22px; } .app-login-page .app-login-brand{ justify-content:center; gap:12px; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--app-text); } .app-login-page .app-login-brand .name{ background:linear-gradient(135deg, var(--app-accent), #a06bff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .app-login-page .app-login-brand .app-login-logo{ width:54px; height:54px; border-radius:14px; background:var(--app-surface-0); border:1px solid var(--app-border-1); padding:6px; box-shadow: 0 0 0 1px var(--app-accent-soft), 0 10px 30px -10px var(--app-accent-glow); animation:appLoginLogoFloat 6s ease-in-out infinite alternate; } @keyframes appLoginLogoFloat{ 0%{transform:translateY(0)} 100%{transform:translateY(-3px)} } .app-login-page .app-login-sub{ text-align:center; color:var(--app-text-muted); font-size:13px; margin:0; } /* v5.10-APP-PAGE-LOGIN — form layout */ .app-login-page .app-login-form{ display:flex; flex-direction:column; gap:12px; } /* v5.10-APP-PAGE-LOGIN — error as a soft red pill, shows only when populated */ .app-login-page .app-login-err{ display:flex; align-items:center; justify-content:center; min-height:0; max-height:0; margin:0; padding:0 14px; border-radius:999px; background:rgba(255,92,124,0.10); border:1px solid rgba(255,92,124,0.32); color:var(--app-danger); font-size:12.5px; font-weight:600; letter-spacing:.01em; text-align:center; overflow:hidden; opacity:0; transition:max-height .2s ease, padding .2s ease, opacity .2s ease, margin .2s ease; } .app-login-page .app-login-err.app-login-err--show{ max-height:38px; min-height:30px; padding:7px 14px; margin:0 0 4px; opacity:1; } /* v5.10-APP-PAGE-LOGIN — fields */ .app-login-page .app-login-field{ margin:0; } .app-login-page .app-login-field label{ display:block; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--app-text-muted); font-weight:700; margin-bottom:6px; } .app-login-page .app-login-field input{ width:100%; padding:11px 14px !important; font-size:14px !important; color:var(--app-text) !important; background:var(--app-surface-0) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-md) !important; transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; outline:none; } .app-login-page .app-login-field input:hover{ border-color:rgba(255,255,255,0.18) !important; } .app-login-page .app-login-field input:focus{ border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; background:rgba(15,20,35,0.65) !important; } /* v5.10-APP-PAGE-LOGIN — submit */ .app-login-page .app-login-submit{ margin-top:8px !important; padding:12px 16px !important; font-size:14px !important; font-weight:700 !important; letter-spacing:.01em; border-radius:var(--app-r-md) !important; background:linear-gradient(135deg, var(--app-accent), #9579ff) !important; color:#0a1224 !important; border:1px solid rgba(124,92,240,0.55) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 12px 30px -10px var(--app-accent-glow) !important; transition:transform .14s ease, box-shadow .18s ease, filter .14s ease; } .app-login-page .app-login-submit:hover:not(:disabled){ transform:translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 16px 36px -10px var(--app-accent-glow) !important; filter:brightness(1.04); } .app-login-page .app-login-submit:active:not(:disabled){ transform:translateY(0); } .app-login-page .app-login-submit:disabled{ opacity:.65; cursor:not-allowed; } /* PAKET7 — sekundaere Login-Links (Passwort vergessen / Registrieren) + Connect-Code-Hinweis */ .app-login-page .app-login-links{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:14px; } .app-login-page .app-login-link{ background:none; border:none; padding:2px 2px; font:inherit; font-size:12.5px; color:var(--app-text-muted); cursor:pointer; text-decoration:none; border-radius:6px; transition:color .15s; } .app-login-page .app-login-link:hover{ color:var(--app-accent); text-decoration:underline; } .app-login-page .app-login-link:focus-visible{ outline:2px solid var(--app-accent-soft); outline-offset:2px; } .app-login-page .app-login-notice{ margin:0 0 14px; padding:10px 12px; font-size:12.5px; line-height:1.5; color:var(--app-text); background:var(--app-accent-soft); border:1px solid var(--app-accent); border-radius:var(--app-r-md); } /* v5.10-APP-PAGE-LOGIN — responsive: tighten the card on small screens */ @media(max-width:480px){ .app-login-page{padding:18px 14px} .app-login-page .login-card.app-login-card{ padding:30px 22px 24px !important; border-radius:18px !important; } .app-login-page .app-login-brand{font-size:20px} .app-login-page .app-login-brand .app-login-logo{width:48px;height:48px} } /* v5.10-APP-PAGE-LOGIN — reduced motion: drop float/orb animations */ @media (prefers-reduced-motion: reduce){ .app-login-page .app-login-orb, .app-login-page .app-login-brand .app-login-logo, .app-login-page .app-login-stage{ animation:none !important; } } /* ================ v5.10-APP-PAGE-STACKS ================ */ /* Stacks page — card-list mit subtle dividers, Glass-Cards mit App-Tokens. Alle Selectoren in diesem Block tragen den Marker v5.10-APP-PAGE-STACKS. Scoped unter .app-page-stacks; nutzt nur --app-* Tokens (global via v5.10-APP-CHROME duplicate auf :root). */ /* v5.10-APP-PAGE-STACKS — page wrapper als flex column */ .app-page-stacks{ display:flex; flex-direction:column; gap:0; min-height:0; } /* v5.10-APP-PAGE-STACKS — page-head Action-Button accent treatment */ .app-page-stacks > .page-head .btn{ background:linear-gradient(180deg, var(--app-accent-soft), transparent) !important; border:1px solid var(--app-border-1) !important; color:var(--app-text) !important; box-shadow:0 0 0 1px var(--app-accent-soft) inset, 0 8px 20px -12px var(--app-accent-glow) !important; border-radius:var(--app-r-md) !important; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .app-page-stacks > .page-head .btn:hover{ border-color:var(--app-accent) !important; box-shadow:0 0 0 1px var(--app-accent) inset, 0 12px 28px -10px var(--app-accent-glow) !important; transform:translateY(-1px); } /* v5.10-APP-PAGE-STACKS — card-list container */ .app-page-stacks .aps-list{ display:flex; flex-direction:column; gap:14px; min-height:0; } /* v5.10-APP-PAGE-STACKS — stack card: glass surface */ .app-page-stacks .aps-card{ background:linear-gradient(180deg, var(--app-surface-1), var(--app-surface-0)) !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-lg) !important; padding:18px 18px 14px !important; box-shadow:var(--app-shadow-card) !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; position:relative; overflow:hidden; } .app-page-stacks .aps-card::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(135deg, var(--app-accent-soft) 0%, transparent 35%); opacity:0; transition:opacity .2s ease; } .app-page-stacks .aps-card:hover{ border-color:var(--app-border-1) !important; box-shadow:var(--app-shadow-card), 0 0 0 1px var(--app-accent-soft) !important; } .app-page-stacks .aps-card:hover::before{ opacity:.6; } /* v5.10-APP-PAGE-STACKS — head row */ .app-page-stacks .aps-card .aps-head{ position:relative; z-index:1; padding-bottom:12px !important; margin-bottom:12px !important; border-bottom:1px solid var(--app-border-0); } /* v5.10-APP-PAGE-STACKS — icon tile */ .app-page-stacks .aps-card .aps-icon{ background:var(--app-surface-0); border:1px solid var(--app-border-0); border-radius:var(--app-r-sm); width:36px !important; height:36px !important; font-size:20px !important; flex:0 0 36px; } .app-page-stacks .aps-card .aps-icon img{ width:24px !important; height:24px !important; border-radius:6px !important; } /* v5.10-APP-PAGE-STACKS — title block */ .app-page-stacks .aps-card .aps-title h3{ color:var(--app-text); font-size:15.5px; font-weight:700; letter-spacing:-.01em; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .app-page-stacks .aps-card .aps-title .aps-count{ color:var(--app-text-muted) !important; font-family:var(--mono); font-size:11.5px !important; font-weight:500; padding:2px 8px; border-radius:999px; background:var(--app-surface-0); border:1px solid var(--app-border-0); letter-spacing:.02em; } /* v5.10-APP-PAGE-STACKS — head action buttons */ .app-page-stacks .aps-card .aps-head .btn.ghost{ background:var(--app-surface-0) !important; border:1px solid var(--app-border-0) !important; color:var(--app-text-muted) !important; border-radius:var(--app-r-sm) !important; font-weight:600; transition:color .15s ease, border-color .15s ease, background .15s ease; } .app-page-stacks .aps-card .aps-head .btn.ghost:hover{ color:var(--app-text) !important; border-color:var(--app-border-1) !important; background:var(--app-surface-1) !important; } .app-page-stacks .aps-card .aps-head .btn.ghost[style*="color:var(--danger)"]{ color:var(--app-danger) !important; } .app-page-stacks .aps-card .aps-head .btn.ghost[style*="color:var(--danger)"]:hover{ border-color:var(--app-danger) !important; background:rgba(255,92,124,.08) !important; } /* v5.10-APP-PAGE-STACKS — container list mit subtle dividers */ .app-page-stacks .aps-card .clist{ position:relative; z-index:1; display:flex !important; flex-direction:column; gap:0 !important; border-radius:var(--app-r-md); overflow:hidden; background:transparent; } /* v5.10-APP-PAGE-STACKS — container rows with subtle dividers between */ .app-page-stacks .aps-card .clist > .crow{ background:transparent !important; border:0 !important; border-bottom:1px solid var(--app-border-0) !important; border-radius:0 !important; padding:11px 10px !important; gap:12px !important; transition:background .14s ease, padding-left .14s ease; } .app-page-stacks .aps-card .clist > .crow:last-child{ border-bottom:0 !important; } .app-page-stacks .aps-card .clist > .crow:hover{ background:var(--app-surface-0) !important; padding-left:14px !important; } /* v5.10-APP-PAGE-STACKS — status dot */ .app-page-stacks .aps-card .clist > .crow .dot{ width:9px; height:9px; box-shadow:none; } .app-page-stacks .aps-card .clist > .crow .dot.run{ background:var(--app-success); box-shadow:0 0 10px var(--app-success), 0 0 0 3px rgba(52,226,155,.12); } .app-page-stacks .aps-card .clist > .crow .dot.stop{ background:var(--app-text-muted); opacity:.5; } /* v5.10-APP-PAGE-STACKS — container row text */ .app-page-stacks .aps-card .clist > .crow .cname{ color:var(--app-text) !important; font-weight:600; font-size:13.5px; letter-spacing:-.005em; } .app-page-stacks .aps-card .clist > .crow .cmeta{ color:var(--app-text-muted) !important; font-family:var(--mono); font-size:11.5px !important; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* v5.10-APP-PAGE-STACKS — "Keine Container." note */ .app-page-stacks .aps-card .clist > .muted{ color:var(--app-text-muted) !important; padding:14px 10px !important; text-align:center; font-size:12.5px !important; font-style:italic; } /* v5.10-APP-PAGE-STACKS — global empty state (no stacks at all) */ .app-page-stacks .aps-empty{ background:linear-gradient(180deg, var(--app-surface-1), var(--app-surface-0)) !important; border:1px dashed var(--app-border-1) !important; border-radius:var(--app-r-lg) !important; color:var(--app-text-muted) !important; padding:38px 24px !important; text-align:center; font-size:13.5px; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); } /* v5.10-APP-PAGE-STACKS — spinner area uses app tokens */ .app-page-stacks > .center{ padding:48px 0; } /* v5.10-APP-PAGE-STACKS — responsive: tighten padding on small screens */ @media(max-width:680px){ .app-page-stacks .aps-card{ padding:14px !important; } .app-page-stacks .aps-card .aps-head{ flex-wrap:wrap !important; } .app-page-stacks .aps-card .aps-head .btn.ghost{ padding:5px 9px !important; font-size:12px !important; } } /* ================ v5.10-APP-PAGE-DASHBOARD ================ */ /* Dashboard / Landing — "Visitenkarte" Hero + Stat-Cards-Glow. Scoped unter .dash-page; nutzt nur --app-* Tokens (global via v5.10-APP-CHROME duplicate auf :root). Alle Selectoren tragen den Marker v5.10-APP-PAGE-DASHBOARD. */ /* v5.10-APP-PAGE-DASHBOARD — page wrapper, flex column, owns remaining space */ .dash-page{ display:flex !important; flex-direction:column; gap:14px; min-height:0; animation:dashFadeIn .42s ease-out both; } /* opacity-only: kein transform -> .dash-page erzeugt KEINEN containing-block, sonst kleben position:fixed Modals (CPU/RAM/Disk-Verlauf) am dash-page statt am Viewport */ @keyframes dashFadeIn{ from{opacity:0} to{opacity:1} } /* v5.10-APP-PAGE-DASHBOARD — Hero-Wrap als gross-pad container mit Aurora */ .dash-page .dash-hero-wrap{ position:relative; border-radius:var(--app-r-lg); overflow:hidden; isolation:isolate; background: linear-gradient(135deg, rgba(124,92,240,0.10) 0%, rgba(160,107,255,0.06) 45%, transparent 75%), linear-gradient(180deg, var(--app-surface-1), var(--app-surface-0)); border:1px solid var(--app-border-1); box-shadow:var(--app-shadow-card); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); padding:0; } /* v5.10-APP-PAGE-DASHBOARD — Aurora-Orbs hinter dem Hero */ .dash-page .dash-hero-wrap .dash-aurora{ position:absolute; pointer-events:none; z-index:0; width:420px; height:420px; border-radius:50%; filter:blur(80px); opacity:.55; background:radial-gradient(circle, var(--app-accent) 0%, transparent 60%); top:-180px; right:-120px; animation:dashOrbA 14s ease-in-out infinite alternate; } .dash-page .dash-hero-wrap .dash-aurora.dash-aurora-b{ width:340px; height:340px; top:auto; right:auto; bottom:-160px; left:-100px; background:radial-gradient(circle, rgba(160,107,255,0.55) 0%, transparent 60%); opacity:.45; animation:dashOrbB 16s ease-in-out infinite alternate; } @keyframes dashOrbA{ from{transform:translate(0,0) scale(1)} to{transform:translate(-30px,20px) scale(1.05)} } @keyframes dashOrbB{ from{transform:translate(0,0) scale(1)} to{transform:translate(28px,-22px) scale(1.08)} } /* v5.10-APP-PAGE-DASHBOARD — page-head innerhalb Hero-Wrap entglasen */ .dash-page .dash-hero-wrap > .page-head.dash-hero-head{ position:relative; z-index:1; margin:0 !important; padding:26px 28px !important; background:transparent !important; border:none !important; border-radius:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; display:flex !important; align-items:center !important; gap:18px; } .dash-page .dash-hero-wrap > .page-head.dash-hero-head .dash-hero-text{ flex:1; min-width:0; } .dash-page .dash-hero-wrap > .page-head.dash-hero-head h1{ font-size:28px !important; font-weight:800 !important; letter-spacing:-.025em !important; color:var(--app-text) !important; margin:0 !important; background:linear-gradient(180deg, #ffffff 0%, var(--app-text) 70%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .dash-page .dash-hero-wrap > .page-head.dash-hero-head p{ font-size:13.5px !important; color:var(--app-text-muted) !important; margin:6px 0 0 !important; display:inline-flex; align-items:center; gap:8px; } .dash-page .dash-hero-wrap > .page-head.dash-hero-head p::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--app-success); box-shadow:0 0 10px var(--app-success); flex:0 0 7px; animation:dashPulse 2.2s ease-in-out infinite; } @keyframes dashPulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(.85)} } /* v5.10-APP-PAGE-DASHBOARD — Hero-CTA */ .dash-page .dash-hero-wrap > .page-head.dash-hero-head .dash-hero-cta{ background:linear-gradient(180deg, var(--app-accent), #8a6bf0) !important; border:1px solid var(--app-accent) !important; color:#06121e !important; font-weight:700 !important; border-radius:var(--app-r-md) !important; padding:10px 18px !important; box-shadow:0 8px 24px -8px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.2) inset !important; transition:transform .15s ease, box-shadow .15s ease; } .dash-page .dash-hero-wrap > .page-head.dash-hero-head .dash-hero-cta:hover{ transform:translateY(-1px); box-shadow:0 12px 32px -10px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.25) inset !important; } /* v5.10-APP-PAGE-DASHBOARD — Bento Grid mit App-Tokens */ .dash-page .bento.dash-bento{ gap:14px !important; } /* v5.10-APP-PAGE-DASHBOARD — Stat-Hero-Cards Glow + glyph */ .dash-page .bento.dash-bento .card.stat.dash-stat{ position:relative; overflow:hidden; background:linear-gradient(180deg, var(--app-surface-1), var(--app-surface-0)) !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-lg) !important; padding:18px !important; box-shadow:var(--app-shadow-card) !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .dash-page .bento.dash-bento .card.stat.dash-stat::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(135deg, var(--dash-stat-accent, var(--app-accent-soft)) 0%, transparent 55%); opacity:.5; transition:opacity .2s ease; } .dash-page .bento.dash-bento .card.stat.dash-stat::after{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--dash-stat-rim, var(--app-accent)), transparent); opacity:.6; } .dash-page .bento.dash-bento .card.stat.dash-stat:hover{ border-color:var(--app-border-1) !important; transform:translateY(-2px); box-shadow:var(--app-shadow-card), 0 14px 36px -16px var(--dash-stat-rim, var(--app-accent-glow)) !important; } .dash-page .bento.dash-bento .card.stat.dash-stat:hover::before{ opacity:.85; } /* v5.10-APP-PAGE-DASHBOARD — Glyph oben rechts */ .dash-page .bento.dash-bento .card.stat.dash-stat .dash-stat-glyph{ position:absolute; top:14px; right:14px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:17px; border-radius:10px; background:var(--app-surface-0); border:1px solid var(--app-border-0); color:var(--dash-stat-rim, var(--app-accent)); z-index:1; box-shadow:0 0 0 1px var(--dash-stat-accent, var(--app-accent-soft)) inset; } /* v5.10-APP-PAGE-DASHBOARD — Per-Stat Accent-Tokens */ .dash-page .bento.dash-bento .card.stat.dash-stat-cpu{ --dash-stat-accent:rgba(124,92,240,0.16); --dash-stat-rim:#7c5cf0; } .dash-page .bento.dash-bento .card.stat.dash-stat-ram{ --dash-stat-accent:rgba(52,226,155,0.14); --dash-stat-rim:#34e29b; } .dash-page .bento.dash-bento .card.stat.dash-stat-disk{ --dash-stat-accent:rgba(255,184,77,0.14); --dash-stat-rim:#ffb84d; } .dash-page .bento.dash-bento .card.stat.dash-stat-up{ --dash-stat-accent:rgba(160,107,255,0.16); --dash-stat-rim:#a06bff; } /* v5.10-APP-PAGE-DASHBOARD — Innenstruktur der Stat-Cards */ .dash-page .bento.dash-bento .card.stat.dash-stat > *{ position:relative; z-index:1; } .dash-page .bento.dash-bento .card.stat.dash-stat .label{ font-size:11px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase; color:var(--app-text-muted) !important; margin:0 0 8px !important; } .dash-page .bento.dash-bento .card.stat.dash-stat .big{ font-size:38px !important; font-weight:800 !important; letter-spacing:-.03em !important; line-height:1.05 !important; margin:0 !important; } .dash-page .bento.dash-bento .card.stat.dash-stat .sub{ font-size:12px !important; color:var(--app-text-muted) !important; margin:6px 0 0 !important; } .dash-page .bento.dash-bento .card.stat.dash-stat .bar{ margin-top:14px !important; height:6px !important; background:var(--app-surface-0) !important; border:1px solid var(--app-border-0) !important; border-radius:999px !important; overflow:hidden; position:relative; } .dash-page .bento.dash-bento .card.stat.dash-stat .bar i{ display:block; height:100%; border-radius:999px; transition:width .6s cubic-bezier(.22,1,.36,1); box-shadow:0 0 12px var(--dash-stat-rim, var(--app-accent-glow)); } /* v5.10-APP-PAGE-DASHBOARD — Section-Heading "Server" mit gradient bar */ .dash-page .bento.dash-bento > .col-12 > h2{ font-size:18px !important; font-weight:700 !important; letter-spacing:-.015em !important; color:var(--app-text) !important; display:inline-flex; align-items:center; gap:10px; padding-left:14px; position:relative; } .dash-page .bento.dash-bento > .col-12 > h2::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:18px; border-radius:2px; background:linear-gradient(180deg, var(--app-accent), #8a6bf0); box-shadow:0 0 10px var(--app-accent-glow); } /* v5.10-APP-PAGE-DASHBOARD — Section-Action Button (Server hinzufuegen) polish */ .dash-page .bento.dash-bento > .col-12 > .btn.ghost{ background:var(--app-surface-0) !important; border:1px solid var(--app-border-0) !important; color:var(--app-text-muted) !important; border-radius:var(--app-r-md) !important; font-weight:600 !important; transition:.16s; } .dash-page .bento.dash-bento > .col-12 > .btn.ghost:hover{ color:var(--app-text) !important; border-color:var(--app-accent) !important; background:var(--app-accent-soft) !important; } /* v5.10-APP-PAGE-DASHBOARD — Nodecard glass treatment */ .dash-page .bento.dash-bento .card.nodecard{ background:linear-gradient(180deg, var(--app-surface-1), var(--app-surface-0)) !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-lg) !important; box-shadow:var(--app-shadow-card) !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); transition:border-color .18s ease, box-shadow .18s ease; } .dash-page .bento.dash-bento .card.nodecard:hover{ border-color:var(--app-border-1) !important; box-shadow:var(--app-shadow-card), 0 0 0 1px var(--app-accent-soft) !important; } /* v5.10-APP-PAGE-DASHBOARD — End-User-Produktgruppen Header polish */ .dash-page .bento.dash-bento .card.col-12 > h3{ font-size:15.5px !important; font-weight:700 !important; letter-spacing:-.01em !important; color:var(--app-text) !important; padding-left:14px; position:relative; } .dash-page .bento.dash-bento .card.col-12 > h3::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:16px; border-radius:2px; background:linear-gradient(180deg, var(--app-accent), #8a6bf0); box-shadow:0 0 8px var(--app-accent-glow); } /* v5.10-APP-PAGE-DASHBOARD — End-User Produkt-Card polish */ .dash-page .bento.dash-bento .prodcard{ background:linear-gradient(180deg, var(--app-surface-1), var(--app-surface-0)) !important; border:1px solid var(--app-border-0) !important; border-radius:var(--app-r-md) !important; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .dash-page .bento.dash-bento .prodcard:hover{ border-color:var(--app-accent) !important; transform:translateY(-2px); box-shadow:var(--app-shadow-card), 0 14px 32px -16px var(--app-accent-glow) !important; } /* v5.10-APP-PAGE-DASHBOARD — responsive: small screens drop hero padding */ @media(max-width:680px){ .dash-page .dash-hero-wrap > .page-head.dash-hero-head{ padding:20px 18px !important; flex-direction:column; align-items:flex-start !important; } .dash-page .dash-hero-wrap > .page-head.dash-hero-head h1{ font-size:22px !important; } .dash-page .bento.dash-bento .card.stat.dash-stat .big{ font-size:30px !important; } .dash-page .bento.dash-bento .card.stat.dash-stat .dash-stat-glyph{ width:28px; height:28px; font-size:14px; } } /* v5.10-APP-PAGE-DASHBOARD — reduced motion: drop hero animations */ @media (prefers-reduced-motion: reduce){ .dash-page, .dash-page .dash-hero-wrap .dash-aurora, .dash-page .dash-hero-wrap > .page-head.dash-hero-head p::before{ animation:none !important; } .dash-page .bento.dash-bento .card.stat.dash-stat:hover{ transform:none !important; } .dash-page .bento.dash-bento .prodcard:hover{ transform:none !important; } } /* ================ v5.10-APP-PAGE-USERS ================ */ /* User-Management — userprofile-card-list mit Role-Pills, Avatar-Glow, Hover-Lift und Chevron-Reveal. Scoped unter .app-page-users. Nutzt nur --app-* Tokens (global via v5.10-APP-CHROME duplicate auf :root). Alle Selectoren in diesem Block tragen den Marker v5.10-APP-PAGE-USERS. */ /* v5.10-APP-PAGE-USERS — page root: vertical stack mit breathing space */ .app-page-users.up-mgmt{ display:flex; flex-direction:column; gap:14px; padding:4px 2px 24px; color:var(--app-text); } /* v5.10-APP-PAGE-USERS — head row aligns title + create button */ .app-page-users .page-head.up-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:6px 2px 4px; } .app-page-users .page-head.up-head h1{ font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--app-text); background:linear-gradient(135deg, var(--app-text), var(--app-text-muted)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .app-page-users .page-head.up-head p{ color:var(--app-text-muted); font-size:13px; margin-top:3px; letter-spacing:.01em; } /* v5.10-APP-PAGE-USERS — create button: prominent accent CTA */ .app-page-users .page-head.up-head .btn.up-create{ padding:10px 18px; border-radius:999px; font-weight:700; font-size:13.5px; letter-spacing:.01em; background:linear-gradient(135deg, var(--app-accent), #9579ff); color:#0a1224; border:1px solid transparent; box-shadow: 0 12px 28px -12px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.25) inset; } .app-page-users .page-head.up-head .btn.up-create:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow: 0 16px 34px -12px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.3) inset; } /* v5.10-APP-PAGE-USERS — outer glass card */ .app-page-users .card.up-card{ background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%), var(--app-surface-1); border:1px solid var(--app-border-1); border-radius:var(--app-r-lg); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); padding:14px; position:relative; overflow:hidden; } .app-page-users .card.up-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg, transparent, var(--app-border-1), transparent); pointer-events:none; } /* v5.10-APP-PAGE-USERS — list container: card list rhythm */ .app-page-users .clist.up-list{ display:flex; flex-direction:column; gap:10px; } /* v5.10-APP-PAGE-USERS — user row: glass profile card */ .app-page-users .crow.up-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--app-border-0); border-radius:var(--app-r-md); background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%), var(--app-surface-0); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); position:relative; transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; overflow:hidden; } .app-page-users .crow.up-row::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:transparent; transition:background .18s ease, box-shadow .18s ease; } .app-page-users .crow.up-row:hover{ border-color:var(--app-border-1); background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 60%), var(--app-surface-1); transform:translateY(-1px); box-shadow: 0 14px 32px -18px rgba(0,0,0,0.7), 0 0 0 1px var(--app-border-0); } /* v5.10-APP-PAGE-USERS — admin row accent rail */ .app-page-users .crow.up-row.up-row--admin::before{ background:var(--app-accent); box-shadow:0 0 12px var(--app-accent-glow); } .app-page-users .crow.up-row.up-row--admin:hover{ border-color:var(--app-accent); box-shadow: 0 14px 32px -18px rgba(0,0,0,0.7), 0 0 0 1px var(--app-accent-soft); } /* v5.10-APP-PAGE-USERS — user row subtle accent on hover */ .app-page-users .crow.up-row.up-row--user:hover::before{ background:var(--app-text-muted); opacity:.4; } /* v5.10-APP-PAGE-USERS — avatar bubble: bigger, glow, gradient */ .app-page-users .avatar.up-avatar{ width:38px !important; height:38px !important; font-size:15px !important; border-radius:50%; background:linear-gradient(135deg, var(--app-accent), #a06bff); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow: 0 6px 16px -6px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.2) inset; border:1px solid var(--app-border-1); transition:transform .18s ease, box-shadow .18s ease; } .app-page-users .crow.up-row:hover .avatar.up-avatar{ transform:scale(1.04); box-shadow: 0 8px 20px -6px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.3) inset; } .app-page-users .crow.up-row.up-row--admin .avatar.up-avatar{ background:linear-gradient(135deg, var(--app-accent), #4d9fff); box-shadow: 0 6px 18px -6px var(--app-accent-glow), 0 0 0 2px var(--app-accent-soft), 0 1px 0 rgba(255,255,255,0.25) inset; } /* v5.10-APP-PAGE-USERS — body block with name + meta */ .app-page-users .up-body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; } .app-page-users .up-body .cname.up-name{ font-weight:700; font-size:14.5px; color:var(--app-text); letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .app-page-users .up-body .cmeta.up-meta{ color:var(--app-text-muted); font-size:12.5px; letter-spacing:.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* v5.10-APP-PAGE-USERS — role pill: capsule with token-driven color */ .app-page-users .pill.up-pill{ margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:5px 12px; border-radius:999px; border:1px solid var(--app-border-1); background:var(--app-surface-1); color:var(--app-text-muted); transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; display:inline-flex; align-items:center; gap:6px; flex-shrink:0; } .app-page-users .pill.up-pill.up-pill--admin{ background:var(--app-accent-soft) !important; color:var(--app-accent) !important; border-color:var(--app-accent) !important; box-shadow: 0 0 0 3px rgba(124,92,240,0.06), 0 4px 14px -6px var(--app-accent-glow); } .app-page-users .pill.up-pill.up-pill--admin::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--app-accent); box-shadow:0 0 8px var(--app-accent-glow); flex-shrink:0; } .app-page-users .pill.up-pill.up-pill--user{ background:var(--app-surface-1) !important; color:var(--app-text-muted) !important; border-color:var(--app-border-1) !important; } .app-page-users .pill.up-pill.up-pill--user::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--app-text-muted); opacity:.6; flex-shrink:0; } /* v5.10-APP-PAGE-USERS — chevron indicator on the right */ .app-page-users .up-chev{ color:var(--app-text-muted); opacity:.5; font-size:20px; margin-left:6px; transition:transform .18s ease, opacity .18s ease, color .18s ease; flex-shrink:0; font-weight:300; line-height:1; } .app-page-users .crow.up-row:hover .up-chev{ opacity:1; color:var(--app-accent); transform:translateX(3px); } /* v5.10-APP-PAGE-USERS — empty state */ .app-page-users .up-empty{ text-align:center; padding:38px 24px; color:var(--app-text-muted); font-size:13.5px; background:var(--app-surface-0); border:1px dashed var(--app-border-1); border-radius:var(--app-r-md); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); } /* v5.10-APP-PAGE-USERS — spinner area uses app tokens */ .app-page-users > .center{ padding:48px 0; display:flex; align-items:center; justify-content:center; } /* v5.10-APP-PAGE-USERS — responsive: tighten on narrow viewports */ @media(max-width:680px){ .app-page-users .card.up-card{ padding:10px; } .app-page-users .crow.up-row{ padding:12px 12px; gap:11px; } .app-page-users .avatar.up-avatar{ width:34px !important; height:34px !important; font-size:13.5px !important; } .app-page-users .pill.up-pill{ padding:4px 9px; font-size:10px; letter-spacing:.1em; } .app-page-users .up-chev{ display:none; } .app-page-users .page-head.up-head{ flex-direction:column; align-items:stretch; } .app-page-users .page-head.up-head .btn.up-create{ width:100%; justify-content:center; } } /* ================ v5.10-APP-PAGE-MCPERMS ================ Bridge-Rechte page polish — scoped to .mcperms-page wrapper only. Layout, spacing, glass surfaces — keine JS / v-* / ID-Aenderungen. */ /* v5.10-APP-PAGE-MCPERMS — page root: comfy column spacing */ .mcperms-page{ display:flex; flex-direction:column; gap:14px; padding:2px; } /* v5.10-APP-PAGE-MCPERMS — header reskinned as glass capsule */ .mcperms-page > .page-head.mcperms-head{ margin:6px 4px 4px !important; padding:14px 18px !important; border:1px solid var(--app-border-1); border-radius:var(--app-r-lg); background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%), var(--app-surface-1); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); display:flex !important; align-items:center !important; gap:14px; } .mcperms-page > .page-head.mcperms-head h1{ font-size:20px !important; font-weight:700 !important; letter-spacing:-.01em; color:var(--app-text); } .mcperms-page > .page-head.mcperms-head p{ font-size:12.5px !important; color:var(--app-text-muted) !important; margin-top:3px !important; } .mcperms-page > .page-head.mcperms-head .btn.ghost{ background:var(--app-surface-0) !important; color:var(--app-text) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-md) !important; padding:8px 14px !important; font-size:12.5px !important; transition:.16s; } .mcperms-page > .page-head.mcperms-head .btn.ghost:hover{ border-color:var(--app-accent) !important; background:var(--app-accent-soft) !important; } /* v5.10-APP-PAGE-MCPERMS — HOME grid: 3 hero tiles */ .mcperms-page .mcperms-home-grid{ padding:0 4px; } .mcperms-page .mcperms-home-grid .card.mcperms-tile{ background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 50%), var(--app-surface-1); border:1px solid var(--app-border-1); border-radius:var(--app-r-lg); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; position:relative; overflow:hidden; } .mcperms-page .mcperms-home-grid .card.mcperms-tile::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(420px 220px at 50% -20%, var(--app-accent-soft), transparent 60%); opacity:0; transition:opacity .22s ease; } .mcperms-page .mcperms-home-grid .card.mcperms-tile:hover{ transform:translateY(-3px); border-color:var(--app-accent); box-shadow:0 18px 40px -22px var(--app-accent-glow), var(--app-shadow-card); } .mcperms-page .mcperms-home-grid .card.mcperms-tile:hover::before{ opacity:1; } .mcperms-page .mcperms-home-grid .card.mcperms-tile .mcperms-tile-ico{ filter:drop-shadow(0 4px 12px rgba(0,0,0,0.45)); } .mcperms-page .mcperms-home-grid .card.mcperms-tile h3{ color:var(--app-text); font-weight:700; letter-spacing:-.005em; } .mcperms-page .mcperms-home-grid .card.mcperms-tile .muted{ color:var(--app-text-muted) !important; } .mcperms-page .mcperms-home-grid .card.mcperms-tile .pill.mcperms-tile-count{ background:var(--app-accent-soft) !important; color:var(--app-accent) !important; border:1px solid rgba(124,92,240,0.22); border-radius:999px !important; font-weight:700; padding:4px 11px; letter-spacing:.02em; } /* v5.10-APP-PAGE-MCPERMS — split layout: list pane (left) + detail pane (right) */ .mcperms-page .mcperms-split{ padding:0 2px; } .mcperms-page .mcperms-split .card.mcperms-list-pane, .mcperms-page .mcperms-split .card.mcperms-detail-pane{ background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 55%), var(--app-surface-0); border:1px solid var(--app-border-1); border-radius:var(--app-r-lg); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); transition:border-color .16s ease; } /* v5.10-APP-PAGE-MCPERMS — list pane: scoped scrollbar + search input polish */ .mcperms-page .mcperms-split .card.mcperms-list-pane{ scrollbar-width:thin; } .mcperms-page .mcperms-split .card.mcperms-list-pane > div{ scrollbar-width:thin; } .mcperms-page .mcperms-split .card.mcperms-list-pane > div::-webkit-scrollbar{ width:6px; } .mcperms-page .mcperms-split .card.mcperms-list-pane > div::-webkit-scrollbar-thumb{ background:var(--app-border-1); border-radius:3px; } .mcperms-page .mcperms-split .card.mcperms-list-pane > div::-webkit-scrollbar-thumb:hover{ background:var(--app-accent-soft); } .mcperms-page .mcperms-split .card.mcperms-list-pane > input{ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-md) !important; color:var(--app-text) !important; padding:9px 13px !important; font-size:13px !important; transition:border-color .16s, box-shadow .16s; } .mcperms-page .mcperms-split .card.mcperms-list-pane > input::placeholder{ color:var(--app-text-muted); } .mcperms-page .mcperms-split .card.mcperms-list-pane > input:focus{ outline:none !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; } /* v5.10-APP-PAGE-MCPERMS — list rows: soft hover, accent-tinted borders */ .mcperms-page .mcperms-split .card.mcperms-list-pane > div > div{ border-radius:var(--app-r-md) !important; transition:background .14s ease, border-color .14s ease; } .mcperms-page .mcperms-split .card.mcperms-list-pane > div > div[style*="border:1px solid var(--border)"]{ border-color:var(--app-border-0) !important; } .mcperms-page .mcperms-split .card.mcperms-list-pane > div > div:hover{ border-color:var(--app-border-1) !important; } /* v5.10-APP-PAGE-MCPERMS — list pane "Neuer Rang" primary button */ .mcperms-page .mcperms-split-ranks .card.mcperms-list-pane > button.btn{ background:linear-gradient(135deg, var(--app-accent), #9579ff) !important; color:#04121e !important; border:0 !important; border-radius:var(--app-r-md) !important; padding:9px 14px !important; font-size:12.5px !important; font-weight:700 !important; box-shadow:0 8px 20px -10px var(--app-accent-glow); transition:transform .14s ease, box-shadow .14s ease; } .mcperms-page .mcperms-split-ranks .card.mcperms-list-pane > button.btn:hover{ transform:translateY(-1px); box-shadow:0 12px 24px -10px var(--app-accent-glow); } /* v5.10-APP-PAGE-MCPERMS — detail pane: scoped scrollbar */ .mcperms-page .mcperms-split .card.mcperms-detail-pane{ scrollbar-width:thin; } .mcperms-page .mcperms-split .card.mcperms-detail-pane::-webkit-scrollbar{ width:7px; } .mcperms-page .mcperms-split .card.mcperms-detail-pane::-webkit-scrollbar-thumb{ background:var(--app-border-1); border-radius:4px; } .mcperms-page .mcperms-split .card.mcperms-detail-pane::-webkit-scrollbar-thumb:hover{ background:var(--app-accent-soft); } /* v5.10-APP-PAGE-MCPERMS — detail pane typography polish */ .mcperms-page .mcperms-split .card.mcperms-detail-pane h2{ color:var(--app-text); letter-spacing:-.01em; } .mcperms-page .mcperms-split .card.mcperms-detail-pane h3{ color:var(--app-text); font-size:13.5px; font-weight:700; letter-spacing:.01em; display:flex; align-items:center; gap:8px; } .mcperms-page .mcperms-split .card.mcperms-detail-pane code{ background:var(--app-bg-1); border:1px solid var(--app-border-0); border-radius:var(--app-r-sm); padding:1px 6px; font-size:11.5px; color:var(--app-accent); } /* v5.10-APP-PAGE-MCPERMS — empty-state placeholder */ .mcperms-page .mcperms-split .card.mcperms-detail-pane .mcperms-empty{ color:var(--app-text-muted) !important; font-size:14px; letter-spacing:.02em; opacity:.85; } /* v5.10-APP-PAGE-MCPERMS — inputs inside detail pane */ .mcperms-page .mcperms-split .card.mcperms-detail-pane input, .mcperms-page .mcperms-split .card.mcperms-detail-pane select{ background:var(--app-surface-1) !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-md) !important; color:var(--app-text) !important; padding:9px 12px !important; font-size:13px !important; transition:border-color .16s, box-shadow .16s; } .mcperms-page .mcperms-split .card.mcperms-detail-pane input::placeholder{ color:var(--app-text-muted); } .mcperms-page .mcperms-split .card.mcperms-detail-pane input:focus, .mcperms-page .mcperms-split .card.mcperms-detail-pane select:focus{ outline:none !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; } /* v5.10-APP-PAGE-MCPERMS — permission row borders consistent with token system */ .mcperms-page .mcperms-split .card.mcperms-detail-pane div[style*="border:1px solid var(--border)"]{ border-color:var(--app-border-0) !important; border-radius:var(--app-r-md) !important; background:var(--app-bg-1); transition:border-color .14s ease; } .mcperms-page .mcperms-split .card.mcperms-detail-pane div[style*="border:1px dashed var(--border)"]{ border-color:var(--app-border-0) !important; border-radius:var(--app-r-md) !important; } /* v5.10-APP-PAGE-MCPERMS — info-tinted server-context pill polish */ .mcperms-page .mcperms-split .card.mcperms-detail-pane .pill[style*="rgba(56,123,255"]{ background:var(--app-accent-soft) !important; color:var(--app-accent) !important; border:1px solid rgba(124,92,240,0.22); } /* v5.10-APP-PAGE-MCPERMS — auto-sync hint banner softer */ .mcperms-page .mcperms-split .card.mcperms-detail-pane > div > div[style*="rgba(56,123,255,.06)"]{ background:var(--app-accent-soft) !important; border:1px solid rgba(124,92,240,0.22) !important; border-radius:var(--app-r-md) !important; color:var(--app-text-muted); } /* v5.10-APP-PAGE-MCPERMS — responsive: stack split panes under 980px */ @media(max-width:980px){ .mcperms-page .mcperms-split{ grid-template-columns:1fr !important; } .mcperms-page .mcperms-split .card.mcperms-list-pane, .mcperms-page .mcperms-split .card.mcperms-detail-pane{ height:auto !important; max-height:60vh; } } /* v5.10-APP-PAGE-MCPERMS — reduced motion */ @media (prefers-reduced-motion: reduce){ .mcperms-page .mcperms-home-grid .card.mcperms-tile, .mcperms-page .mcperms-split-ranks .card.mcperms-list-pane > button.btn{ transition:none !important; } .mcperms-page .mcperms-home-grid .card.mcperms-tile:hover{ transform:none !important; } } /* ================ v5.10-APP-PAGE-CONTAINERS ================ */ /* Container/Produkt-Liste — schoenes Karten-Grid mit Glas-Effekt, Status-Glow, Hover-Lift und farbigen Statusrand. Tokens stammen aus v5.10-APP-CHROME. */ /* v5.10-APP-PAGE-CONTAINERS — page wrapper */ .app-page-containers{ display:flex; flex-direction:column; gap:18px; padding-bottom:18px; } /* v5.10-APP-PAGE-CONTAINERS — page head (overrides default page-head spacing inside this page only) */ .app-page-containers > .page-head.app-pc-head{ margin:6px 2px 4px; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; } .app-page-containers > .page-head.app-pc-head h1{ font-size:28px; font-weight:800; letter-spacing:-.03em; background:linear-gradient(135deg, var(--app-text) 0%, var(--app-accent) 110%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } .app-page-containers > .page-head.app-pc-head p{ color:var(--app-text-muted); font-size:13.5px; margin-top:4px; } /* v5.10-APP-PAGE-CONTAINERS — create button accent */ .app-page-containers .btn.app-pc-create{ background:linear-gradient(135deg, var(--app-accent) 0%, var(--app-accent-soft) 140%); border:1px solid var(--app-accent); color:#0a1422; font-weight:700; letter-spacing:.01em; padding:10px 18px; border-radius:var(--app-r-md); box-shadow:0 8px 26px -10px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.18) inset; transition:transform .14s ease, box-shadow .18s ease, filter .18s ease; } .app-page-containers .btn.app-pc-create:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 14px 36px -10px var(--app-accent-glow), 0 1px 0 rgba(255,255,255,0.22) inset; } .app-page-containers .btn.app-pc-create:active{transform:translateY(0)} /* v5.10-APP-PAGE-CONTAINERS — body wrapper */ .app-page-containers .app-pc-body{ display:flex; flex-direction:column; gap:18px; } /* v5.10-APP-PAGE-CONTAINERS — stack-card (gruppen) als floating glass panel */ .app-page-containers .card.app-pc-stack{ position:relative; border:1px solid var(--app-border-1); border-radius:var(--app-r-lg); padding:18px 20px 20px; background: linear-gradient(180deg, rgba(255,255,255,0.035), transparent 35%), var(--app-surface-0); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); overflow:hidden; isolation:isolate; transition:border-color .18s ease, box-shadow .25s ease; } .app-page-containers .card.app-pc-stack::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, var(--app-accent-soft), transparent 22%); opacity:.55; pointer-events:none; z-index:0; } .app-page-containers .card.app-pc-stack > *{position:relative;z-index:1} .app-page-containers .card.app-pc-stack:hover{ border-color:var(--app-accent-glow); box-shadow:var(--app-shadow-card), 0 22px 50px -28px rgba(0,0,0,0.55); } /* v5.10-APP-PAGE-CONTAINERS — stack head titel */ .app-page-containers .card.app-pc-stack > h3.app-pc-stackhead{ font-size:15.5px; font-weight:700; letter-spacing:-.01em; color:var(--app-text); display:flex; align-items:center; gap:6px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--app-border-0); } .app-page-containers .card.app-pc-stack > h3.app-pc-stackhead .col-chev{ color:var(--app-text-muted); transition:color .15s, transform .18s; } .app-page-containers .card.app-pc-stack > h3.app-pc-stackhead:hover .col-chev{ color:var(--app-accent); } .app-page-containers .app-pc-stackcount{ color:var(--app-text-muted) !important; background:var(--app-surface-1); padding:2px 9px; border-radius:999px; border:1px solid var(--app-border-0); margin-left:auto; } /* v5.10-APP-PAGE-CONTAINERS — Grid mit Containerkarten */ .app-page-containers .clist.app-pc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; flex-direction:initial; } /* v5.10-APP-PAGE-CONTAINERS — Container-Karte */ .app-page-containers .crow.app-pc-card{ position:relative; display:flex; align-items:center; gap:12px; padding:14px 14px 14px 18px; border:1px solid var(--app-border-0); border-radius:var(--app-r-md); background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 40%), var(--app-surface-1); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); cursor:pointer; overflow:hidden; isolation:isolate; transition:transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s ease, box-shadow .22s ease, background-color .22s ease; } .app-page-containers .crow.app-pc-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--app-text-muted); opacity:.4; transition:background .2s ease, opacity .2s ease, width .2s ease; } .app-page-containers .crow.app-pc-card.is-run::before{ background:var(--app-success); opacity:.85; box-shadow:0 0 16px var(--app-success); } .app-page-containers .crow.app-pc-card.is-stop::before{ background:var(--app-text-muted); opacity:.55; } .app-page-containers .crow.app-pc-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at top right, var(--app-accent-soft), transparent 55%); opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:0; } .app-page-containers .crow.app-pc-card > *{position:relative;z-index:1} .app-page-containers .crow.app-pc-card:hover{ transform:translateY(-2px); border-color:var(--app-accent-glow); box-shadow:0 18px 36px -20px rgba(0,0,0,0.7), 0 0 0 1px var(--app-accent-glow) inset; } .app-page-containers .crow.app-pc-card:hover::after{opacity:1} .app-page-containers .crow.app-pc-card:hover::before{width:4px} .app-page-containers .crow.app-pc-card:active{transform:translateY(0)} /* v5.10-APP-PAGE-CONTAINERS — Status dot polish */ .app-page-containers .crow.app-pc-card > .dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; position:relative; } .app-page-containers .crow.app-pc-card > .dot.run{ background:var(--app-success); box-shadow:0 0 0 3px rgba(52,226,155,0.16), 0 0 14px var(--app-success); animation:appPcPulse 2.6s ease-in-out infinite; } .app-page-containers .crow.app-pc-card > .dot.stop{ background:var(--app-text-muted); box-shadow:0 0 0 3px rgba(154,163,200,0.14); opacity:.7; } @keyframes appPcPulse{ 0%,100%{box-shadow:0 0 0 3px rgba(52,226,155,0.16), 0 0 14px var(--app-success)} 50%{box-shadow:0 0 0 5px rgba(52,226,155,0.10), 0 0 22px var(--app-success)} } /* v5.10-APP-PAGE-CONTAINERS — info block */ .app-page-containers .crow.app-pc-card .app-pc-info{ display:flex; flex-direction:column; gap:3px; min-width:0; } .app-page-containers .crow.app-pc-card .app-pc-info .cname{ font-weight:700; font-size:14px; color:var(--app-text); letter-spacing:-.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color .18s ease; } .app-page-containers .crow.app-pc-card:hover .app-pc-info .cname{ color:#fff; } .app-page-containers .crow.app-pc-card .app-pc-info .cmeta{ color:var(--app-text-muted); font-size:11.5px; font-family:var(--mono); letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.82; } /* v5.10-APP-PAGE-CONTAINERS — action button cluster */ .app-page-containers .crow.app-pc-card .app-pc-actions{ display:flex; align-items:center; gap:4px; opacity:.7; transition:opacity .18s ease; margin-left:auto; } .app-page-containers .crow.app-pc-card:hover .app-pc-actions{opacity:1} .app-page-containers .crow.app-pc-card .app-pc-actions .btn.ghost.app-pc-btn{ background:var(--app-surface-0); border:1px solid var(--app-border-0); color:var(--app-text-muted); border-radius:var(--app-r-sm); padding:7px 10px !important; font-size:13px; line-height:1; min-width:34px; display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; } .app-page-containers .crow.app-pc-card .app-pc-actions .btn.ghost.app-pc-btn:hover{ background:var(--app-accent-soft); border-color:var(--app-accent); color:var(--app-text); transform:translateY(-1px); } .app-page-containers .crow.app-pc-card .app-pc-actions .btn.ghost.app-pc-btn:active{transform:translateY(0)} /* v5.10-APP-PAGE-CONTAINERS — empty state */ .app-page-containers .card.app-pc-empty{ border:1px dashed var(--app-border-1); background:var(--app-surface-0); border-radius:var(--app-r-lg); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); } /* v5.10-APP-PAGE-CONTAINERS — responsive */ @media(max-width:880px){ .app-page-containers .clist.app-pc-grid{ grid-template-columns:1fr; } .app-page-containers > .page-head.app-pc-head{ flex-direction:column; align-items:flex-start; gap:10px; } .app-page-containers .btn.app-pc-create{align-self:stretch;justify-content:center} } @media(max-width:560px){ .app-page-containers .crow.app-pc-card{padding:12px 12px 12px 16px} .app-page-containers .crow.app-pc-card .app-pc-actions{ gap:3px; } .app-page-containers .crow.app-pc-card .app-pc-actions .btn.ghost.app-pc-btn{ padding:6px 8px !important; min-width:30px; } } /* v5.10-APP-PAGE-CONTAINERS — reduce motion */ @media(prefers-reduced-motion:reduce){ .app-page-containers .crow.app-pc-card, .app-page-containers .crow.app-pc-card::before, .app-page-containers .crow.app-pc-card::after, .app-page-containers .crow.app-pc-card > .dot.run, .app-page-containers .btn.app-pc-create, .app-page-containers .card.app-pc-stack{ transition:none !important; animation:none !important; } .app-page-containers .crow.app-pc-card:hover{transform:none !important} } /* ================ v5.10-APP-PAGE-AUDIT ================ */ /* Operator-Console Audit-Log: monospace ticker feel for IP / time / action, tighter row rhythm than other pages, subtle accent glow on hover. Scoped to .app-audit; relies on global --app-* tokens. */ /* v5.10-APP-PAGE-AUDIT — outer page wrap: vertical flow + breathing rhythm */ .app-audit{ display:flex; flex-direction:column; gap:14px; color:var(--app-text); --app-audit-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace; --app-audit-row-h:46px; } /* v5.10-APP-PAGE-AUDIT — page-head as glass capsule with terminal accent */ .app-audit .page-head.app-audit-head{ margin:0 4px 4px !important; padding:14px 18px !important; border:1px solid var(--app-border-1); border-radius:var(--app-r-lg); background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%), var(--app-surface-1); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); position:relative; overflow:hidden; } /* v5.10-APP-PAGE-AUDIT — left accent stripe on page-head */ .app-audit .page-head.app-audit-head::before{ content:""; position:absolute; left:0; top:10%; bottom:10%; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg, var(--app-accent), transparent); opacity:.75; } /* v5.10-APP-PAGE-AUDIT — head h1 */ .app-audit .page-head.app-audit-head h1{ font-size:20px !important; font-weight:700 !important; letter-spacing:-.01em; color:var(--app-text); } /* v5.10-APP-PAGE-AUDIT — head subtitle */ .app-audit .page-head.app-audit-head p{ color:var(--app-text-muted); font-size:13px; margin-top:2px; } /* v5.10-APP-PAGE-AUDIT — filter bar as glass row */ .app-audit .app-audit-filter{ margin:0 4px !important; padding:10px 12px !important; border:1px solid var(--app-border-0); border-radius:var(--app-r-md); background:var(--app-surface-0); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); align-items:center; } /* v5.10-APP-PAGE-AUDIT — inputs in filter bar */ .app-audit .app-audit-filter input, .app-audit .app-audit-filter select{ background:var(--app-bg-1) !important; border:1px solid var(--app-border-1) !important; color:var(--app-text) !important; border-radius:var(--app-r-sm) !important; padding:8px 12px !important; font-size:13px !important; transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; } /* v5.10-APP-PAGE-AUDIT — search input gets mono treatment (it's a console) */ .app-audit .app-audit-filter input.app-audit-q, .app-audit .app-audit-filter input.app-audit-user{ font-family:var(--app-audit-mono); letter-spacing:-.005em; } /* v5.10-APP-PAGE-AUDIT — focus state with accent ring */ .app-audit .app-audit-filter input:focus, .app-audit .app-audit-filter select:focus{ outline:none !important; border-color:var(--app-accent) !important; box-shadow:0 0 0 3px var(--app-accent-soft) !important; background:var(--app-bg-0) !important; } /* v5.10-APP-PAGE-AUDIT — filter primary go-button */ .app-audit .app-audit-filter .btn.app-audit-go{ background:linear-gradient(135deg, var(--app-accent), #9579ff) !important; color:#08111e !important; border:1px solid var(--app-accent) !important; border-radius:var(--app-r-sm) !important; padding:8px 16px !important; font-weight:600; box-shadow:0 6px 18px -8px var(--app-accent-glow); transition:transform .14s ease, box-shadow .14s ease, filter .14s ease; } .app-audit .app-audit-filter .btn.app-audit-go:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -10px var(--app-accent-glow); filter:brightness(1.05); } .app-audit .app-audit-filter .btn.app-audit-go:active{ transform:translateY(0); } /* v5.10-APP-PAGE-AUDIT — filter ghost reset button */ .app-audit .app-audit-filter .btn.ghost.app-audit-reset{ background:transparent !important; border:1px solid var(--app-border-1) !important; color:var(--app-text-muted) !important; border-radius:var(--app-r-sm) !important; padding:8px 14px !important; transition:color .14s ease, border-color .14s ease, background .14s ease; } .app-audit .app-audit-filter .btn.ghost.app-audit-reset:hover{ color:var(--app-text) !important; border-color:var(--app-border-1) !important; background:var(--app-surface-0) !important; } /* v5.10-APP-PAGE-AUDIT — loading center */ .app-audit .center.app-audit-loading{ padding:42px 0; display:flex; align-items:center; justify-content:center; } /* v5.10-APP-PAGE-AUDIT — main table card */ .app-audit .card.app-audit-table{ margin:0 4px !important; border:1px solid var(--app-border-1) !important; border-radius:var(--app-r-lg) !important; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%), var(--app-surface-1) !important; -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card) !important; overflow:hidden !important; } /* v5.10-APP-PAGE-AUDIT — column header strip */ .app-audit .app-audit-table .app-audit-thead{ background: linear-gradient(180deg, rgba(124,92,240,0.05), transparent 80%), var(--app-bg-1) !important; border-bottom:1px solid var(--app-border-1) !important; color:var(--app-text-muted) !important; font-family:var(--app-audit-mono) !important; font-size:11px !important; letter-spacing:.08em !important; padding:12px 18px !important; position:sticky; top:0; z-index:2; } /* v5.10-APP-PAGE-AUDIT — body scroll region */ .app-audit .app-audit-table .app-audit-tbody{ background:transparent; } /* v5.10-APP-PAGE-AUDIT — scrollbar polish for body */ .app-audit .app-audit-table .app-audit-tbody::-webkit-scrollbar{ width:10px; } .app-audit .app-audit-table .app-audit-tbody::-webkit-scrollbar-thumb{ background:rgba(124,92,240,0.18); border-radius:10px; border:2px solid transparent; background-clip:padding-box; } .app-audit .app-audit-table .app-audit-tbody::-webkit-scrollbar-thumb:hover{ background:rgba(124,92,240,0.32); background-clip:padding-box; } /* v5.10-APP-PAGE-AUDIT — row base look + zebra fade */ .app-audit .app-audit-table .app-audit-row{ border-bottom:1px solid var(--app-border-0) !important; padding:12px 18px !important; color:var(--app-text); transition:background-color .14s ease, box-shadow .14s ease; position:relative; font-family:var(--app-audit-mono); font-size:12.5px !important; } /* v5.10-APP-PAGE-AUDIT — subtle zebra */ .app-audit .app-audit-table .app-audit-row:nth-child(even){ background:rgba(255,255,255,0.012); } /* v5.10-APP-PAGE-AUDIT — row hover: accent glow + tiny left rail */ .app-audit .app-audit-table .app-audit-row:hover{ background:var(--app-accent-soft); box-shadow:inset 3px 0 0 var(--app-accent); } /* v5.10-APP-PAGE-AUDIT — last row drops the separator */ .app-audit .app-audit-table .app-audit-row:last-child{ border-bottom:none !important; } /* v5.10-APP-PAGE-AUDIT — action cell: pill-ish label with accent text */ .app-audit .app-audit-table .app-audit-row .app-audit-action-cell{ color:var(--app-accent) !important; font-family:var(--app-audit-mono) !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.02em; text-transform:lowercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:10px; } /* v5.10-APP-PAGE-AUDIT — user cell: lighter, monospaced */ .app-audit .app-audit-table .app-audit-row .app-audit-user-cell{ color:var(--app-text) !important; font-family:var(--app-audit-mono); font-size:12.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:10px; } /* v5.10-APP-PAGE-AUDIT — target column */ .app-audit .app-audit-table .app-audit-row .app-audit-target{ padding-right:14px; } /* v5.10-APP-PAGE-AUDIT — main target line (proportional, easier scanning) */ .app-audit .app-audit-table .app-audit-row .app-audit-target-main{ color:var(--app-text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif; font-size:13px; font-weight:500; } /* v5.10-APP-PAGE-AUDIT — sub detail line */ .app-audit .app-audit-table .app-audit-row .app-audit-target-sub{ color:var(--app-text-muted) !important; font-family:var(--app-audit-mono); font-size:11.5px !important; margin-top:2px; opacity:.85; } /* v5.10-APP-PAGE-AUDIT — IP/time meta column */ .app-audit .app-audit-table .app-audit-row .app-audit-meta{ color:var(--app-text-muted) !important; font-family:var(--app-audit-mono); font-size:11px !important; line-height:1.4; } /* v5.10-APP-PAGE-AUDIT — IP line (slightly more visible) */ .app-audit .app-audit-table .app-audit-row .app-audit-meta .app-audit-ip{ color:var(--app-text); font-weight:600; opacity:.85; } /* v5.10-APP-PAGE-AUDIT — time line (muted) */ .app-audit .app-audit-table .app-audit-row .app-audit-meta .app-audit-time{ color:var(--app-text-muted); opacity:.75; margin-top:1px; } /* v5.10-APP-PAGE-AUDIT — empty state */ .app-audit .app-audit-table .app-audit-empty{ color:var(--app-text-muted) !important; font-family:var(--app-audit-mono); font-size:13px !important; padding:48px 24px !important; letter-spacing:.02em; opacity:.7; } /* v5.10-APP-PAGE-AUDIT — pager strip */ .app-audit .app-audit-table .app-audit-pager{ background: linear-gradient(0deg, rgba(0,0,0,0.18), transparent), var(--app-bg-1) !important; border-top:1px solid var(--app-border-1) !important; padding:12px 18px !important; } /* v5.10-APP-PAGE-AUDIT — pager ghost buttons */ .app-audit .app-audit-table .app-audit-pager .btn.ghost{ background:transparent !important; border:1px solid var(--app-border-1) !important; color:var(--app-text) !important; border-radius:var(--app-r-sm) !important; padding:7px 14px !important; font-size:12.5px; font-family:var(--app-audit-mono); transition:background .14s ease, border-color .14s ease, color .14s ease, opacity .14s ease; } .app-audit .app-audit-table .app-audit-pager .btn.ghost:hover:not(:disabled){ background:var(--app-accent-soft) !important; border-color:var(--app-accent) !important; color:var(--app-accent) !important; } .app-audit .app-audit-table .app-audit-pager .btn.ghost:disabled{ opacity:.35; cursor:not-allowed; } /* v5.10-APP-PAGE-AUDIT — pager info label centered */ .app-audit .app-audit-table .app-audit-pager .app-audit-pg-info{ flex:1; text-align:center; color:var(--app-text-muted) !important; font-family:var(--app-audit-mono); letter-spacing:.02em; font-size:12px !important; } /* v5.10-APP-PAGE-AUDIT — responsive: tighter columns below 980px */ @media (max-width:980px){ .app-audit .app-audit-table .app-audit-thead, .app-audit .app-audit-table .app-audit-row{ grid-template-columns:140px 110px 1fr 110px !important; padding:10px 12px !important; } } /* v5.10-APP-PAGE-AUDIT — responsive: stack filter bar below 720px */ @media (max-width:720px){ .app-audit .app-audit-filter{ flex-direction:column; align-items:stretch; } .app-audit .app-audit-filter input, .app-audit .app-audit-filter select, .app-audit .app-audit-filter .btn{ width:100% !important; } .app-audit .app-audit-table .app-audit-thead, .app-audit .app-audit-table .app-audit-row{ grid-template-columns:110px 90px 1fr 100px !important; padding:9px 10px !important; font-size:11.5px !important; } .app-audit .app-audit-table .app-audit-row .app-audit-target-main{ font-size:12px; } } /* v5.10-APP-PAGE-AUDIT — reduced motion */ @media (prefers-reduced-motion: reduce){ .app-audit .app-audit-table .app-audit-row, .app-audit .app-audit-filter input, .app-audit .app-audit-filter select, .app-audit .app-audit-filter .btn, .app-audit .app-audit-table .app-audit-pager .btn.ghost{ transition:none !important; } .app-audit .app-audit-filter .btn.app-audit-go:hover{ transform:none !important; } } /* ================ v5.10-APP-PAGE-REQUESTS ================ */ /* Service-Anfragen Page — Approve/Reject mit prominenten Aktionen. Alle Selectoren in diesem Block tragen den Marker v5.10-APP-PAGE-REQUESTS. Verwendet ausschliesslich --app-* Tokens aus dem v5.10-APP-BASE/CHROME Block. */ /* v5.10-APP-PAGE-REQUESTS — Tokens auch lokal als Alias (Fallback auf v5.10-APP-BASE) */ .apr-page{ --apr-bg-0: var(--app-bg-0, #060810); --apr-bg-1: var(--app-bg-1, #0a0d18); --apr-surface-0: var(--app-surface-0, rgba(15,20,35,0.5)); --apr-surface-1: var(--app-surface-1, rgba(20,26,42,0.7)); --apr-border-0: var(--app-border-0, rgba(255,255,255,0.07)); --apr-border-1: var(--app-border-1, rgba(255,255,255,0.10)); --apr-accent: var(--app-accent, #7c5cf0); --apr-accent-soft: var(--app-accent-soft, rgba(124,92,240,0.12)); --apr-accent-glow: var(--app-accent-glow, rgba(124,92,240,0.28)); --apr-success: var(--app-success, #34e29b); --apr-warn: var(--app-warn, #ffb84d); --apr-danger: var(--app-danger, #ff5c7c); --apr-text: var(--app-text, #e8ecf5); --apr-text-muted: var(--app-text-muted, #9aa3c8); --apr-r-sm: var(--app-r-sm, 8px); --apr-r-md: var(--app-r-md, 12px); --apr-r-lg: var(--app-r-lg, 16px); --apr-shadow-card: var(--app-shadow-card, 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6)); --apr-blur: var(--app-blur, blur(14px) saturate(140%)); } .apr-modal-overlay{ --apr-bg-0: var(--app-bg-0, #060810); --apr-bg-1: var(--app-bg-1, #0a0d18); --apr-surface-0: var(--app-surface-0, rgba(15,20,35,0.5)); --apr-surface-1: var(--app-surface-1, rgba(20,26,42,0.7)); --apr-border-0: var(--app-border-0, rgba(255,255,255,0.07)); --apr-border-1: var(--app-border-1, rgba(255,255,255,0.10)); --apr-accent: var(--app-accent, #7c5cf0); --apr-success: var(--app-success, #34e29b); --apr-danger: var(--app-danger, #ff5c7c); --apr-text: var(--app-text, #e8ecf5); --apr-text-muted: var(--app-text-muted, #9aa3c8); --apr-r-sm: var(--app-r-sm, 8px); --apr-r-md: var(--app-r-md, 12px); --apr-r-lg: var(--app-r-lg, 16px); --apr-shadow-card: var(--app-shadow-card, 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6)); --apr-blur: var(--app-blur, blur(14px) saturate(140%)); } /* v5.10-APP-PAGE-REQUESTS — page container baseline */ .apr-page{ color:var(--apr-text); padding-bottom:18px; } .apr-page .page-head h1{ background:linear-gradient(135deg, var(--apr-text) 0%, var(--apr-accent) 130%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .apr-page .page-head p{ color:var(--apr-text-muted); } /* v5.10-APP-PAGE-REQUESTS — FTP request card (glass surface with accent rail) */ .apr-page .card.apr-ftp-card{ background:linear-gradient(180deg, var(--apr-surface-1), var(--apr-surface-0)); border:1px solid var(--apr-border-1); border-radius:var(--apr-r-lg); box-shadow:var(--apr-shadow-card); -webkit-backdrop-filter:var(--apr-blur); backdrop-filter:var(--apr-blur); position:relative; overflow:hidden; } .apr-page .card.apr-ftp-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--apr-warn), var(--apr-accent)); opacity:.85; pointer-events:none; } .apr-page .card.apr-ftp-card > h3{ color:var(--apr-text); font-size:14px; letter-spacing:.2px; margin-bottom:10px; } /* v5.10-APP-PAGE-REQUESTS — filter bar pills */ .apr-page .apr-filterbar{ padding:6px; background:var(--apr-surface-0); border:1px solid var(--apr-border-0); border-radius:999px; -webkit-backdrop-filter:var(--apr-blur); backdrop-filter:var(--apr-blur); width:fit-content; max-width:100%; gap:4px !important; } .apr-page .apr-filterbar .btn.apr-filter-btn{ border-radius:999px !important; padding:8px 16px !important; background:transparent; border:1px solid transparent !important; color:var(--apr-text-muted); font-weight:600; font-size:13px; letter-spacing:.1px; transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease; } .apr-page .apr-filterbar .btn.apr-filter-btn:hover{ color:var(--apr-text); background:var(--apr-surface-1); border-color:var(--apr-border-0) !important; } .apr-page .apr-filterbar .btn.apr-filter-btn.apr-filter-on{ color:#fff !important; background:var(--apr-surface-1); box-shadow:0 0 0 1px var(--apr-border-1) inset, 0 6px 18px -10px rgba(0,0,0,.6); } .apr-page .apr-filterbar .btn.apr-filter-btn.apr-filter-pending.apr-filter-on{ background:linear-gradient(180deg, rgba(255,184,77,.18), rgba(255,184,77,.08)); box-shadow:0 0 0 1px rgba(255,184,77,.45) inset, 0 8px 22px -10px rgba(255,184,77,.35); } .apr-page .apr-filterbar .btn.apr-filter-btn.apr-filter-approved.apr-filter-on{ background:linear-gradient(180deg, rgba(52,226,155,.18), rgba(52,226,155,.08)); box-shadow:0 0 0 1px rgba(52,226,155,.45) inset, 0 8px 22px -10px rgba(52,226,155,.35); } .apr-page .apr-filterbar .btn.apr-filter-btn.apr-filter-rejected.apr-filter-on{ background:linear-gradient(180deg, rgba(255,92,124,.18), rgba(255,92,124,.08)); box-shadow:0 0 0 1px rgba(255,92,124,.45) inset, 0 8px 22px -10px rgba(255,92,124,.35); } .apr-page .apr-filterbar .btn.apr-filter-btn.apr-filter-all.apr-filter-on{ background:linear-gradient(180deg, var(--apr-accent-soft), rgba(124,92,240,.06)); box-shadow:0 0 0 1px var(--apr-accent-glow) inset, 0 8px 22px -10px var(--apr-accent-glow); } /* v5.10-APP-PAGE-REQUESTS — main request list card */ .apr-page .card.apr-list-card{ background:linear-gradient(180deg, var(--apr-surface-1), var(--apr-surface-0)); border:1px solid var(--apr-border-1); border-radius:var(--apr-r-lg); box-shadow:var(--apr-shadow-card); -webkit-backdrop-filter:var(--apr-blur); backdrop-filter:var(--apr-blur); padding:6px; } .apr-page .card.apr-list-card > .clist{ display:flex; flex-direction:column; gap:2px; } /* v5.10-APP-PAGE-REQUESTS — single request row */ .apr-page .crow.apr-req-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--apr-r-md); border:1px solid transparent; background:transparent; transition:background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease; position:relative; } .apr-page .crow.apr-req-row + .crow.apr-req-row{ border-top:1px solid var(--apr-border-0); } .apr-page .crow.apr-req-row:hover{ background:var(--apr-surface-0); border-color:var(--apr-border-1); box-shadow:0 6px 20px -12px rgba(0,0,0,.55); border-top-color:var(--apr-border-1); } .apr-page .crow.apr-req-row .cname{ color:var(--apr-text); font-weight:600; font-size:14px; } .apr-page .crow.apr-req-row .cmeta{ color:var(--apr-text-muted); font-size:12.5px; margin-top:2px; } .apr-page .crow.apr-req-row .apr-chev{ color:var(--apr-text-muted); opacity:.6; transition:opacity .15s ease, transform .15s ease; } .apr-page .crow.apr-req-row:hover .apr-chev{ opacity:1; transform:translateX(2px); } /* v5.10-APP-PAGE-REQUESTS — status pill */ .apr-page .pill.apr-status-pill{ font-weight:700; font-size:11px; letter-spacing:.5px; text-transform:uppercase; padding:4px 10px; border-radius:999px; white-space:nowrap; } /* v5.10-APP-PAGE-REQUESTS — Approve / Reject prominent action buttons */ .apr-page .btn.apr-btn-approve{ background:linear-gradient(180deg, var(--apr-success), color-mix(in srgb, var(--apr-success) 75%, #000)); color:#06251a !important; border:1px solid color-mix(in srgb, var(--apr-success) 70%, #ffffff 0%) !important; font-weight:700; letter-spacing:.2px; box-shadow:0 0 0 1px rgba(52,226,155,.25) inset, 0 8px 22px -10px rgba(52,226,155,.55); transition:transform .12s ease, box-shadow .18s ease, filter .18s ease; } .apr-page .btn.apr-btn-approve:hover{ transform:translateY(-1px); filter:brightness(1.07); box-shadow:0 0 0 1px rgba(52,226,155,.45) inset, 0 12px 26px -10px rgba(52,226,155,.7); } .apr-page .btn.apr-btn-approve:active{ transform:translateY(0); } .apr-page .btn.ghost.apr-btn-reject{ background:rgba(255,92,124,.08); color:var(--apr-danger) !important; border:1px solid rgba(255,92,124,.35) !important; font-weight:700; transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; } .apr-page .btn.ghost.apr-btn-reject:hover{ background:rgba(255,92,124,.18); border-color:rgba(255,92,124,.6) !important; color:#fff !important; transform:translateY(-1px); } .apr-page .btn.ghost.apr-btn-reject:active{ transform:translateY(0); } /* v5.10-APP-PAGE-REQUESTS — empty state */ .apr-page .muted.apr-empty{ display:block; padding:32px 14px; text-align:center; color:var(--apr-text-muted); font-size:13px; } /* v5.10-APP-PAGE-REQUESTS — Detail modal overlay + card */ .apr-modal-overlay{ background:radial-gradient(80% 60% at 50% 0%, rgba(124,92,240,.10), transparent 60%), rgba(4,6,16,.62) !important; } .apr-modal-overlay .card.apr-modal-card{ background:linear-gradient(180deg, var(--apr-surface-1), var(--apr-surface-0)) !important; border:1px solid var(--apr-border-1) !important; border-radius:var(--apr-r-lg) !important; box-shadow:var(--apr-shadow-card), 0 30px 60px -20px rgba(0,0,0,.7) !important; -webkit-backdrop-filter:var(--apr-blur); backdrop-filter:var(--apr-blur); padding:22px 22px 20px !important; color:var(--apr-text); } .apr-modal-overlay .apr-modal-head h3{ font-size:18px; letter-spacing:-.01em; color:var(--apr-text); } .apr-modal-overlay .btn.ghost.apr-modal-close{ background:transparent; border:1px solid var(--apr-border-0) !important; color:var(--apr-text-muted) !important; border-radius:999px !important; width:30px; height:30px; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease, border-color .15s ease; } .apr-modal-overlay .btn.ghost.apr-modal-close:hover{ background:var(--apr-surface-0); color:var(--apr-text) !important; border-color:var(--apr-border-1) !important; } /* v5.10-APP-PAGE-REQUESTS — modal property list */ .apr-modal-overlay .clist.apr-modal-list{ background:var(--apr-surface-0); border:1px solid var(--apr-border-0); border-radius:var(--apr-r-md); padding:4px 8px; } .apr-modal-overlay .clist.apr-modal-list .crow{ padding:9px 8px; border-radius:var(--apr-r-sm); display:flex; gap:12px; align-items:center; } .apr-modal-overlay .clist.apr-modal-list .crow + .crow{ border-top:1px solid var(--apr-border-0); } .apr-modal-overlay .clist.apr-modal-list .cmeta{ color:var(--apr-text-muted); font-size:12.5px; } .apr-modal-overlay .clist.apr-modal-list .cname{ color:var(--apr-text); font-weight:600; text-align:right; font-size:13.5px; } /* v5.10-APP-PAGE-REQUESTS — modal env block */ .apr-modal-overlay .apr-env-block .label{ font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--apr-text-muted); font-weight:700; } .apr-modal-overlay .apr-env-box{ background:var(--apr-bg-1) !important; border:1px solid var(--apr-border-0); color:var(--apr-text); } /* v5.10-APP-PAGE-REQUESTS — modal action buttons (large variant) */ .apr-modal-overlay .apr-modal-actions{ padding-top:14px; margin-top:6px; border-top:1px solid var(--apr-border-0); } .apr-modal-overlay .btn.apr-btn-approve-lg{ background:linear-gradient(180deg, var(--apr-success), color-mix(in srgb, var(--apr-success) 75%, #000)) !important; color:#06251a !important; border:1px solid color-mix(in srgb, var(--apr-success) 70%, #ffffff 0%) !important; font-weight:700; padding:9px 18px !important; border-radius:var(--apr-r-md) !important; box-shadow:0 0 0 1px rgba(52,226,155,.25) inset, 0 10px 26px -10px rgba(52,226,155,.55); transition:transform .12s ease, filter .15s ease, box-shadow .15s ease; } .apr-modal-overlay .btn.apr-btn-approve-lg:hover{ transform:translateY(-1px); filter:brightness(1.07); box-shadow:0 0 0 1px rgba(52,226,155,.45) inset, 0 14px 30px -10px rgba(52,226,155,.7); } .apr-modal-overlay .btn.ghost.apr-btn-reject-lg{ background:rgba(255,92,124,.08) !important; color:var(--apr-danger) !important; border:1px solid rgba(255,92,124,.45) !important; font-weight:700; padding:9px 18px !important; border-radius:var(--apr-r-md) !important; transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; } .apr-modal-overlay .btn.ghost.apr-btn-reject-lg:hover{ background:rgba(255,92,124,.18) !important; border-color:rgba(255,92,124,.6) !important; color:#fff !important; transform:translateY(-1px); } /* v5.10-APP-PAGE-REQUESTS — responsive */ @media (max-width: 720px){ .apr-page .apr-filterbar{ border-radius:var(--apr-r-md); width:100%; overflow-x:auto; } .apr-page .crow.apr-req-row{ flex-wrap:wrap; gap:8px; } .apr-modal-overlay .clist.apr-modal-list .cname{ text-align:left; } } /* v5.10-APP-PAGE-REQUESTS — reduced motion */ @media (prefers-reduced-motion: reduce){ .apr-page .btn.apr-btn-approve, .apr-page .btn.ghost.apr-btn-reject, .apr-page .btn.apr-filter-btn, .apr-page .crow.apr-req-row, .apr-page .apr-chev, .apr-modal-overlay .btn.apr-btn-approve-lg, .apr-modal-overlay .btn.ghost.apr-btn-reject-lg{ transition:none !important; } .apr-page .btn.apr-btn-approve:hover, .apr-page .btn.ghost.apr-btn-reject:hover, .apr-modal-overlay .btn.apr-btn-approve-lg:hover, .apr-modal-overlay .btn.ghost.apr-btn-reject-lg:hover, .apr-page .crow.apr-req-row:hover{ transform:none !important; } } /* ================ v5.10-APP-PAGE-SETTINGS ================ */ /* Settings page: sidebar tabs (Konto/Sicherheit/Notif/SSO/API-Keys) + content pane. All selectors scoped under .settings-shell. Uses --app-* tokens from APP-CHROME. */ /* v5.10-APP-PAGE-SETTINGS — outer shell: provide local token re-assertion so tokens are guaranteed available even if a parent scope drops them. */ .settings-shell{ --settings-side-w:248px; --settings-side-collapsed-w:64px; --settings-gap:18px; --settings-pad:20px; --settings-tab-radius:12px; --settings-accent:var(--app-accent, #7c5cf0); --settings-accent-soft:var(--app-accent-soft, rgba(124,92,240,0.12)); --settings-accent-glow:var(--app-accent-glow, rgba(124,92,240,0.28)); --settings-surface-0:var(--app-surface-0, rgba(15,20,35,0.5)); --settings-surface-1:var(--app-surface-1, rgba(20,26,42,0.7)); --settings-border-0:var(--app-border-0, rgba(255,255,255,0.07)); --settings-border-1:var(--app-border-1, rgba(255,255,255,0.10)); --settings-text:var(--app-text, #e8ecf5); --settings-text-muted:var(--app-text-muted, #9aa3c8); --settings-shadow:var(--app-shadow-card, 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6)); --settings-blur:var(--app-blur, blur(14px) saturate(140%)); --settings-r-sm:var(--app-r-sm, 8px); --settings-r-md:var(--app-r-md, 12px); --settings-r-lg:var(--app-r-lg, 16px); display:flex; flex-direction:column; gap:14px; color:var(--settings-text); min-height:0; } /* v5.10-APP-PAGE-SETTINGS — page-head reskin to match settings-app feel */ .settings-shell > .page-head{ margin:0 4px 4px !important; padding:6px 4px 14px; border-bottom:1px solid var(--settings-border-0); } .settings-shell > .page-head h1{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--settings-text); } .settings-shell > .page-head p{ color:var(--settings-text-muted); font-size:13px; margin-top:4px; } /* v5.10-APP-PAGE-SETTINGS — body: 2-col grid (sidebar | pane) */ .settings-shell .settings-body{ display:grid; grid-template-columns:var(--settings-side-w) 1fr; gap:var(--settings-gap); align-items:start; min-height:0; } /* v5.10-APP-PAGE-SETTINGS — sidebar tabs become a vertical glass card. We OVERRIDE the inline style flex-direction via flex-direction:column. */ .settings-shell .settings-tabs{ /* override inline display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap */ display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; gap:4px !important; margin:0 !important; padding:14px 10px; position:sticky; top:0; border:1px solid var(--settings-border-1); border-radius:var(--settings-r-lg); background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%), var(--settings-surface-1); -webkit-backdrop-filter:var(--settings-blur); backdrop-filter:var(--settings-blur); box-shadow:var(--settings-shadow); align-self:start; } /* v5.10-APP-PAGE-SETTINGS — sidebar header accent strip */ .settings-shell .settings-tabs::before{ content:"Bereiche"; display:block; font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--settings-text-muted); opacity:.75; font-weight:700; padding:2px 12px 10px; border-bottom:1px solid var(--settings-border-0); margin-bottom:6px; } /* v5.10-APP-PAGE-SETTINGS — each tab button as nav item. We re-style .btn.ghost INSIDE settings-tabs so it looks like a row, without touching the inline :style binding logic. */ .settings-shell .settings-tabs .btn.ghost.settings-tab{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; justify-content:flex-start; padding:10px 12px; border-radius:var(--settings-tab-radius); border:1px solid transparent; background:transparent; color:var(--settings-text-muted); font-weight:600; font-size:13.5px; cursor:pointer; transition:background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease; position:relative; } .settings-shell .settings-tabs .btn.ghost.settings-tab:hover{ color:var(--settings-text); background:var(--settings-surface-0); border-color:var(--settings-border-0); } .settings-shell .settings-tabs .btn.ghost.settings-tab:active{ transform:translateY(1px); } /* v5.10-APP-PAGE-SETTINGS — ACTIVE state. The Vue inline :style sets border-color:var(--primary) when active. We can detect the active state via that inline style — we add stronger selectors that win the cascade and use --settings-accent. */ .settings-shell .settings-tabs .btn.ghost.settings-tab[style*="border-color:var(--primary)"], .settings-shell .settings-tabs .btn.ghost.settings-tab[style*="border-color: var(--primary)"]{ color:var(--settings-text) !important; background:linear-gradient(135deg, var(--settings-accent-soft), transparent 70%), var(--settings-surface-0) !important; border:1px solid var(--settings-accent) !important; box-shadow:0 0 0 3px rgba(124,92,240,0.08), 0 8px 22px -12px var(--settings-accent-glow); } .settings-shell .settings-tabs .btn.ghost.settings-tab[style*="border-color:var(--primary)"]::before, .settings-shell .settings-tabs .btn.ghost.settings-tab[style*="border-color: var(--primary)"]::before{ content:""; position:absolute; left:-1px; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--settings-accent); box-shadow:0 0 12px var(--settings-accent-glow); } /* v5.10-APP-PAGE-SETTINGS — content pane: glass surface that hosts the bento grid */ .settings-shell .settings-pane{ display:flex; flex-direction:column; gap:14px; min-width:0; } /* v5.10-APP-PAGE-SETTINGS — bento grids inside pane get more breathing room and consistent card chrome. We only ADD styling — don't change col-* logic. */ .settings-shell .settings-pane .bento{ gap:16px; } /* v5.10-APP-PAGE-SETTINGS — cards in settings get the glass treatment */ .settings-shell .settings-pane .bento > .card{ background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 50%), var(--settings-surface-1); border:1px solid var(--settings-border-1); border-radius:var(--settings-r-lg); padding:18px 20px; -webkit-backdrop-filter:var(--settings-blur); backdrop-filter:var(--settings-blur); box-shadow:var(--settings-shadow); transition:border-color .15s ease, transform .15s ease; } .settings-shell .settings-pane .bento > .card:hover{ border-color:var(--settings-border-1); } /* v5.10-APP-PAGE-SETTINGS — card headings */ .settings-shell .settings-pane .bento > .card > h3{ font-size:15px; font-weight:700; letter-spacing:-.015em; color:var(--settings-text); margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--settings-border-0); } /* v5.10-APP-PAGE-SETTINGS — clist rows inside settings cards: subtler chrome */ .settings-shell .settings-pane .bento > .card .clist{ gap:6px; } .settings-shell .settings-pane .bento > .card .clist > .crow{ padding:10px 12px; border:1px solid var(--settings-border-0); border-radius:var(--settings-r-md); background:rgba(255,255,255,0.015); transition:background .14s ease, border-color .14s ease; } .settings-shell .settings-pane .bento > .card .clist > .crow:hover{ background:var(--settings-surface-0); border-color:var(--settings-border-1); } .settings-shell .settings-pane .bento > .card .clist > .crow .cmeta{ color:var(--settings-text-muted); font-size:12.5px; } .settings-shell .settings-pane .bento > .card .clist > .crow .cname{ font-weight:600; color:var(--settings-text); } /* v5.10-APP-PAGE-SETTINGS — form fields */ .settings-shell .settings-pane .bento > .card .field{ margin-bottom:12px; } .settings-shell .settings-pane .bento > .card .field label{ font-size:11.5px; letter-spacing:.4px; text-transform:uppercase; color:var(--settings-text-muted); font-weight:700; margin-bottom:6px; display:block; } .settings-shell .settings-pane .bento > .card .field input, .settings-shell .settings-pane .bento > .card input[type="text"], .settings-shell .settings-pane .bento > .card input[type="password"], .settings-shell .settings-pane .bento > .card input:not([type="checkbox"]):not([type="radio"]){ width:100%; padding:10px 12px; border:1px solid var(--settings-border-1); border-radius:var(--settings-r-md); background:var(--settings-surface-0); color:var(--settings-text); font-size:13.5px; outline:none; transition:border-color .14s ease, box-shadow .14s ease, background .14s ease; } .settings-shell .settings-pane .bento > .card input:focus{ border-color:var(--settings-accent); box-shadow:0 0 0 3px rgba(124,92,240,0.10); background:var(--settings-surface-1); } /* v5.10-APP-PAGE-SETTINGS — primary buttons in settings */ .settings-shell .settings-pane .bento > .card .btn:not(.ghost){ background:linear-gradient(135deg, var(--settings-accent), #a06bff); color:#fff; border:none; padding:10px 18px; border-radius:var(--settings-r-md); font-weight:700; font-size:13px; letter-spacing:.2px; cursor:pointer; box-shadow:0 8px 22px -10px var(--settings-accent-glow); transition:transform .12s ease, box-shadow .14s ease, filter .14s ease; } .settings-shell .settings-pane .bento > .card .btn:not(.ghost):hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 12px 30px -10px var(--settings-accent-glow); filter:brightness(1.05); } .settings-shell .settings-pane .bento > .card .btn:not(.ghost):active:not(:disabled){ transform:translateY(0); } .settings-shell .settings-pane .bento > .card .btn:not(.ghost):disabled{ opacity:.55; cursor:not-allowed; } /* v5.10-APP-PAGE-SETTINGS — ghost buttons in settings */ .settings-shell .settings-pane .bento > .card .btn.ghost{ background:var(--settings-surface-0); border:1px solid var(--settings-border-1); color:var(--settings-text); padding:9px 14px; border-radius:var(--settings-r-md); font-weight:600; font-size:12.5px; transition:background .14s ease, border-color .14s ease, color .14s ease; } .settings-shell .settings-pane .bento > .card .btn.ghost:hover{ background:var(--settings-surface-1); border-color:var(--settings-accent); } /* v5.10-APP-PAGE-SETTINGS — pills inside settings */ .settings-shell .settings-pane .bento > .card .pill{ background:var(--settings-accent-soft); color:var(--settings-accent); border:1px solid rgba(124,92,240,0.25); padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.3px; } /* v5.10-APP-PAGE-SETTINGS — dot indicators */ .settings-shell .settings-pane .bento > .card .dot{ width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; } .settings-shell .settings-pane .bento > .card .dot.run{ background:var(--app-success, #34e29b); box-shadow:0 0 8px rgba(52,226,155,0.5); } /* v5.10-APP-PAGE-SETTINGS — friend cards subtler */ .settings-shell .settings-pane .bento > .card[v-if] + .card, .settings-shell .settings-pane .bento > .card > div[style*="grid-template-columns:repeat(auto-fill"]{ gap:10px !important; } .settings-shell .settings-pane .bento > .card > div[style*="grid-template-columns:repeat(auto-fill"] > div{ background:var(--settings-surface-0) !important; border:1px solid var(--settings-border-1) !important; border-radius:var(--settings-r-md) !important; transition:border-color .14s ease, transform .14s ease; } .settings-shell .settings-pane .bento > .card > div[style*="grid-template-columns:repeat(auto-fill"] > div:hover{ border-color:var(--settings-accent) !important; transform:translateY(-1px); } /* v5.10-APP-PAGE-SETTINGS — OAuth provider sub-cards keep their nested look */ .settings-shell .settings-pane .bento > .card .card{ background:var(--settings-surface-0) !important; border:1px solid var(--settings-border-1) !important; border-radius:var(--settings-r-md); padding:14px; box-shadow:none; } /* v5.10-APP-PAGE-SETTINGS — checkboxes (notif toggles) */ .settings-shell .settings-pane .bento > .card label.crow{ border:1px solid var(--settings-border-0); background:rgba(255,255,255,0.015); border-radius:var(--settings-r-md); padding:10px 12px; } .settings-shell .settings-pane .bento > .card label.crow:hover{ background:var(--settings-surface-0); border-color:var(--settings-border-1); } .settings-shell .settings-pane .bento > .card input[type="checkbox"]{ accent-color:var(--settings-accent); cursor:pointer; } /* v5.10-APP-PAGE-SETTINGS — muted text consistency */ .settings-shell .settings-pane .muted, .settings-shell .settings-pane .bento > .card .muted{ color:var(--settings-text-muted); } /* v5.10-APP-PAGE-SETTINGS — spinner center placement */ .settings-shell .settings-pane > .center{ display:flex; align-items:center; justify-content:center; min-height:240px; padding:40px 16px; border:1px solid var(--settings-border-0); border-radius:var(--settings-r-lg); background:var(--settings-surface-1); } /* v5.10-APP-PAGE-SETTINGS — responsive: collapse sidebar to horizontal scroller */ @media (max-width: 880px){ .settings-shell .settings-body{ grid-template-columns:1fr; gap:12px; } .settings-shell .settings-tabs{ flex-direction:row !important; flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden; gap:6px !important; padding:8px 10px; position:relative; top:auto; scrollbar-width:thin; scrollbar-color:var(--settings-accent-soft) transparent; } .settings-shell .settings-tabs::before{ display:none; } .settings-shell .settings-tabs .btn.ghost.settings-tab{ width:auto; flex:0 0 auto; white-space:nowrap; padding:8px 14px; font-size:12.5px; } .settings-shell .settings-tabs .btn.ghost.settings-tab[style*="border-color:var(--primary)"]::before, .settings-shell .settings-tabs .btn.ghost.settings-tab[style*="border-color: var(--primary)"]::before{ left:8px; right:8px; top:auto; bottom:-1px; width:auto; height:3px; } } /* ================ v5.10-AGGR-DESIGN ================ NodePanel v5.10 aggressive redesign tokens. Provides: - .game-icon wrapper (40x40 round glass thumbnail) with per-game gradient logos via [data-game] - .ctr-card pattern (thumbnail + name + stats) for container grid-cards - .ctr-status[data-state="running"|"stopped"|"starting"] dot with pulse - .gradient-text, .glass-pill-action, .hover-lift helpers All colors via --app-* tokens. No external images — every "logo" is a CSS gradient stylization. These are pure definitions; templates remain untouched. Other agents can use these classes. ===================================================== */ /* v5.10-AGGR-DESIGN — game-icon wrapper (40x40 glass round) */ .game-icon{ width:40px; height:40px; flex:0 0 auto; border-radius:var(--app-r-md, 12px); background:var(--app-surface-1, rgba(20,26,42,0.7)); border:1px solid var(--app-border-1, rgba(255,255,255,0.10)); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 6px 18px -8px rgba(0,0,0,0.55); position:relative; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; isolation:isolate; font-size:18px; font-weight:800; color:var(--app-text, #e8ecf5); letter-spacing:-.02em; text-transform:uppercase; user-select:none; } /* v5.10-AGGR-DESIGN — game-icon size variants */ .game-icon.sm{ width:28px; height:28px; border-radius:var(--app-r-sm, 8px); font-size:13px; } .game-icon.lg{ width:56px; height:56px; border-radius:14px; font-size:22px; } .game-icon.xl{ width:72px; height:72px; border-radius:16px; font-size:26px; } /* v5.10-AGGR-DESIGN — base glow ring on hover for any game-icon */ .game-icon::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 0 var(--app-accent-soft, rgba(124,92,240,0.12)); transition:box-shadow .22s ease; z-index:2; } .game-icon:hover::after{ box-shadow:0 0 0 3px var(--app-accent-soft, rgba(124,92,240,0.12)); } /* v5.10-AGGR-DESIGN — game-icon: Minecraft Java (grass-block green diagonal) */ .game-icon[data-game="minecraft"], .game-icon[data-game="minecraft-java"], .game-icon[data-game="paper"], .game-icon[data-game="spigot"], .game-icon[data-game="forge"], .game-icon[data-game="fabric"], .game-icon[data-game="vanilla"]{ background: linear-gradient(180deg, transparent 0 38%, rgba(0,0,0,0.18) 38% 42%, transparent 42%), linear-gradient(135deg, #6cbf3a 0%, #4f9627 50%, #7a4a26 50%, #6b3e1d 100%); border-color:rgba(108,191,58,0.45); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.5); } .game-icon[data-game="minecraft"]::before, .game-icon[data-game="minecraft-java"]::before, .game-icon[data-game="paper"]::before, .game-icon[data-game="spigot"]::before, .game-icon[data-game="forge"]::before, .game-icon[data-game="fabric"]::before, .game-icon[data-game="vanilla"]::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 25% 30%, rgba(255,255,255,0.18) 0 14%, transparent 14%), radial-gradient(circle at 70% 28%, rgba(255,255,255,0.12) 0 10%, transparent 10%); pointer-events:none; z-index:1; } /* v5.10-AGGR-DESIGN — game-icon: Minecraft Bedrock (purple-blue) */ .game-icon[data-game="bedrock"], .game-icon[data-game="minecraft-bedrock"], .game-icon[data-game="mcbe"]{ background:linear-gradient(135deg, #8b5cf6 0%, #6d28d9 50%, #4c1d95 100%); border-color:rgba(139,92,246,0.45); color:#fff; } .game-icon[data-game="bedrock"]::before, .game-icon[data-game="minecraft-bedrock"]::before, .game-icon[data-game="mcbe"]::before{ content:"B"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; color:rgba(255,255,255,0.95); text-shadow:0 1px 3px rgba(0,0,0,0.55); z-index:1; } /* v5.10-AGGR-DESIGN — game-icon: FiveM (orange-red GTA stripe) */ .game-icon[data-game="fivem"], .game-icon[data-game="five-m"], .game-icon[data-game="gta"], .game-icon[data-game="gtav"]{ background: linear-gradient(110deg, transparent 0 38%, rgba(0,0,0,0.22) 38% 46%, transparent 46%), linear-gradient(135deg, #ff8a3d 0%, #f56b1a 55%, #c43e0a 100%); border-color:rgba(245,107,26,0.55); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.55); } .game-icon[data-game="fivem"]::before, .game-icon[data-game="five-m"]::before, .game-icon[data-game="gta"]::before, .game-icon[data-game="gtav"]::before{ content:"5"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; font-style:italic; font-size:20px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,0.6); z-index:1; } /* v5.10-AGGR-DESIGN — game-icon: RedM */ .game-icon[data-game="redm"], .game-icon[data-game="red-m"]{ background:linear-gradient(135deg, #c0392b 0%, #922520 50%, #5c130f 100%); border-color:rgba(192,57,43,0.5); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: TeamSpeak (deep blue with chevron) */ .game-icon[data-game="teamspeak"], .game-icon[data-game="ts3"], .game-icon[data-game="ts5"]{ background:linear-gradient(135deg, #1ea4f5 0%, #1675c0 50%, #0d4d8c 100%); border-color:rgba(30,164,245,0.45); color:#fff; } .game-icon[data-game="teamspeak"]::before, .game-icon[data-game="ts3"]::before, .game-icon[data-game="ts5"]::before{ content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; transform:translate(-50%,-50%); border:2.5px solid rgba(255,255,255,0.95); border-radius:50%; border-top-color:transparent; border-right-color:transparent; z-index:1; } /* v5.10-AGGR-DESIGN — game-icon: Discord */ .game-icon[data-game="discord"]{ background:linear-gradient(135deg, #7289da 0%, #5865f2 50%, #404eed 100%); border-color:rgba(88,101,242,0.45); color:#fff; } .game-icon[data-game="discord"]::before{ content:"D"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:19px; color:#fff; z-index:1; } /* v5.10-AGGR-DESIGN — game-icon: Mumble */ .game-icon[data-game="mumble"]{ background:linear-gradient(135deg, #cf3e3e 0%, #962323 50%, #5c1212 100%); border-color:rgba(207,62,62,0.45); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: Debian (red swirl) */ .game-icon[data-game="debian"]{ background: radial-gradient(circle at 70% 65%, rgba(255,255,255,0.18) 0 12%, transparent 12%), linear-gradient(135deg, #d32f5a 0%, #a01b3f 55%, #5e0d22 100%); border-color:rgba(211,47,90,0.45); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: Ubuntu */ .game-icon[data-game="ubuntu"]{ background:linear-gradient(135deg, #e95420 0%, #b1380d 50%, #6e2308 100%); border-color:rgba(233,84,32,0.45); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: Alpine */ .game-icon[data-game="alpine"]{ background:linear-gradient(135deg, #0d597f 0%, #093f59 50%, #062a3d 100%); border-color:rgba(13,89,127,0.5); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: Arch */ .game-icon[data-game="arch"], .game-icon[data-game="archlinux"]{ background:linear-gradient(135deg, #1793d1 0%, #0f6a99 50%, #084768 100%); border-color:rgba(23,147,209,0.5); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: Windows (blue tiles) */ .game-icon[data-game="windows"], .game-icon[data-game="win"], .game-icon[data-game="winsrv"]{ background: linear-gradient(90deg, transparent 49.5%, rgba(0,0,0,0.25) 49.5% 50.5%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, rgba(0,0,0,0.25) 49.5% 50.5%, transparent 50.5%), linear-gradient(135deg, #2596ec 0%, #1973b6 50%, #0e4a7b 100%); border-color:rgba(37,150,236,0.5); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: nginx (mint green) */ .game-icon[data-game="nginx"]{ background:linear-gradient(135deg, #4bbf52 0%, #2c8b32 50%, #16551b 100%); border-color:rgba(75,191,82,0.5); color:#fff; } .game-icon[data-game="nginx"]::before{ content:"N"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; font-style:italic; color:#fff; z-index:1; } /* v5.10-AGGR-DESIGN — game-icon: Apache */ .game-icon[data-game="apache"], .game-icon[data-game="httpd"]{ background:linear-gradient(135deg, #d22128 0%, #8c1419 50%, #4d0a0e 100%); border-color:rgba(210,33,40,0.5); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: Node.js (green hex) */ .game-icon[data-game="nodejs"], .game-icon[data-game="node"]{ background:linear-gradient(135deg, #67a04f 0%, #3c763d 50%, #1f4622 100%); border-color:rgba(103,160,79,0.5); color:#fff; clip-path:none; } .game-icon[data-game="nodejs"]::before, .game-icon[data-game="node"]::before{ content:""; position:absolute; left:50%; top:50%; width:22px; height:24px; transform:translate(-50%,-50%); background:rgba(255,255,255,0.18); clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); z-index:1; } /* v5.10-AGGR-DESIGN — game-icon: Python */ .game-icon[data-game="python"], .game-icon[data-game="py"]{ background:linear-gradient(135deg, #ffd848 0%, #3776ab 50%, #1c4a73 100%); border-color:rgba(55,118,171,0.55); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: MySQL / MariaDB */ .game-icon[data-game="mysql"], .game-icon[data-game="mariadb"]{ background:linear-gradient(135deg, #00758f 0%, #f29111 100%); border-color:rgba(0,117,143,0.5); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: PostgreSQL */ .game-icon[data-game="postgres"], .game-icon[data-game="postgresql"], .game-icon[data-game="pg"]{ background:linear-gradient(135deg, #336791 0%, #1e4163 50%, #0e2538 100%); border-color:rgba(51,103,145,0.55); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: Redis */ .game-icon[data-game="redis"]{ background:linear-gradient(135deg, #dc382c 0%, #a91d13 50%, #560b06 100%); border-color:rgba(220,56,44,0.55); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: MongoDB */ .game-icon[data-game="mongo"], .game-icon[data-game="mongodb"]{ background:linear-gradient(135deg, #4faa41 0%, #2e7029 50%, #1b4117 100%); border-color:rgba(79,170,65,0.5); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: Docker (blue whale) */ .game-icon[data-game="docker"]{ background:linear-gradient(135deg, #2496ed 0%, #1671b5 50%, #0e4a7a 100%); border-color:rgba(36,150,237,0.55); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: Steam-family (CS, Rust, Valheim, ARK, etc.) generic */ .game-icon[data-game="steam"], .game-icon[data-game="cs"], .game-icon[data-game="csgo"], .game-icon[data-game="cs2"]{ background:linear-gradient(135deg, #1b2838 0%, #2a475e 50%, #66c0f4 100%); border-color:rgba(102,192,244,0.45); color:#fff; } .game-icon[data-game="rust"]{ background:linear-gradient(135deg, #cd412b 0%, #8c2415 50%, #4c100a 100%); border-color:rgba(205,65,43,0.5); color:#fff; } .game-icon[data-game="valheim"]{ background:linear-gradient(135deg, #8ab17d 0%, #4f6f4a 50%, #2a3a26 100%); border-color:rgba(138,177,125,0.5); color:#fff; } .game-icon[data-game="ark"]{ background:linear-gradient(135deg, #2eb389 0%, #1b6e54 50%, #0d3a2c 100%); border-color:rgba(46,179,137,0.5); color:#fff; } .game-icon[data-game="palworld"]{ background:linear-gradient(135deg, #4cc6e7 0%, #3084a3 50%, #134a60 100%); border-color:rgba(76,198,231,0.5); color:#fff; } .game-icon[data-game="terraria"]{ background:linear-gradient(135deg, #9bd06f 0%, #4f7d2b 50%, #2a4214 100%); border-color:rgba(155,208,111,0.5); color:#fff; } .game-icon[data-game="factorio"]{ background:linear-gradient(135deg, #fd9c3d 0%, #b96815 50%, #6b3b07 100%); border-color:rgba(253,156,61,0.5); color:#fff; } .game-icon[data-game="satisfactory"]{ background:linear-gradient(135deg, #ec8b2d 0%, #a45612 50%, #5a2f08 100%); border-color:rgba(236,139,45,0.5); color:#fff; } .game-icon[data-game="garrysmod"], .game-icon[data-game="gmod"]{ background:linear-gradient(135deg, #4a6f8a 0%, #2d465a 50%, #16242f 100%); border-color:rgba(74,111,138,0.5); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: VPS / generic compute (slate gradient) */ .game-icon[data-game="vps"], .game-icon[data-game="compute"], .game-icon[data-game="server"], .game-icon[data-game="generic"]{ background:linear-gradient(135deg, #5c6f99 0%, #3b4869 50%, #1f273d 100%); border-color:rgba(92,111,153,0.5); color:#fff; } /* v5.10-AGGR-DESIGN — game-icon: Web / static hosting (teal accent) */ .game-icon[data-game="web"], .game-icon[data-game="static"], .game-icon[data-game="html"]{ background:linear-gradient(135deg, #34e29b 0%, #1f9d6b 50%, #0e5239 100%); border-color:rgba(52,226,155,0.5); color:#03130c; } /* v5.10-AGGR-DESIGN — game-icon: fallback (uses --app-accent gradient) */ .game-icon[data-game="unknown"], .game-icon:not([data-game]){ background:linear-gradient(135deg, var(--app-accent, #7c5cf0) 0%, #9579ff 60%, #5a3fd0 100%); border-color:var(--app-border-1, rgba(255,255,255,0.10)); color:#04121e; } /* ====== v5.10-AGGR-DESIGN — Container-Card Pattern ====== */ /* v5.10-AGGR-DESIGN — container card root (replaces row-style) */ .ctr-card{ position:relative; display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; grid-template-areas: "thumb name badge" "thumb meta stats"; gap:4px 14px; padding:14px 16px; border:1px solid var(--app-border-0, rgba(255,255,255,0.07)); border-radius:var(--app-r-lg, 16px); background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 50%), var(--app-surface-1, rgba(20,26,42,0.7)); -webkit-backdrop-filter:var(--app-blur, blur(14px) saturate(140%)); backdrop-filter:var(--app-blur, blur(14px) saturate(140%)); box-shadow:var(--app-shadow-card, 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6)); cursor:pointer; transition:transform .18s ease, border-color .18s ease, box-shadow .22s ease; align-items:center; isolation:isolate; overflow:hidden; } /* v5.10-AGGR-DESIGN — gradient sheen on hover (subtle accent bloom from top-right) */ .ctr-card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; background:radial-gradient(600px 220px at 100% -10%, var(--app-accent-soft, rgba(124,92,240,0.12)), transparent 60%); opacity:0; transition:opacity .22s ease; pointer-events:none; z-index:0; } .ctr-card:hover{ border-color:var(--app-border-1, rgba(255,255,255,0.10)); transform:translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 40px -18px rgba(0,0,0,0.7), 0 0 0 1px var(--app-accent-soft, rgba(124,92,240,0.12)); } .ctr-card:hover::before{ opacity:1; } .ctr-card > *{ position:relative; z-index:1; } /* v5.10-AGGR-DESIGN — card slots */ .ctr-card .ctr-thumb{ grid-area:thumb; width:48px; height:48px; border-radius:var(--app-r-md, 12px); overflow:hidden; display:inline-flex; align-items:center; justify-content:center; } /* allow .game-icon inside ctr-thumb to inherit size */ .ctr-card .ctr-thumb .game-icon{ width:100%; height:100%; } .ctr-card .ctr-name{ grid-area:name; font-weight:700; font-size:14.5px; letter-spacing:-.01em; color:var(--app-text, #e8ecf5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .ctr-card .ctr-meta{ grid-area:meta; font-size:11.5px; color:var(--app-text-muted, #9aa3c8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .ctr-card .ctr-badge{ grid-area:badge; align-self:start; justify-self:end; } .ctr-card .ctr-stats{ grid-area:stats; justify-self:end; display:inline-flex; align-items:center; gap:10px; font-family:var(--mono, ui-monospace, monospace); font-size:11px; color:var(--app-text-muted, #9aa3c8); white-space:nowrap; } .ctr-card .ctr-stats > span{ display:inline-flex; align-items:center; gap:4px; } .ctr-card .ctr-stats b{ color:var(--app-text, #e8ecf5); font-weight:600; } /* v5.10-AGGR-DESIGN — card grid container (consumer can wrap cards) */ .ctr-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; } @media(max-width:700px){ .ctr-grid{ grid-template-columns:1fr; } .ctr-card{ grid-template-columns:auto 1fr; grid-template-areas: "thumb name" "thumb meta" "badge stats"; gap:4px 12px; } .ctr-card .ctr-badge{ justify-self:start; } .ctr-card .ctr-stats{ justify-self:start; } } /* ====== v5.10-AGGR-DESIGN — Status Dot with Pulse ====== */ .ctr-status{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--app-text-muted, #9aa3c8); flex:0 0 auto; position:relative; vertical-align:middle; } .ctr-status[data-state="running"], .ctr-status[data-state="on"], .ctr-status[data-state="up"]{ background:var(--app-success, #34e29b); box-shadow:0 0 0 0 rgba(52,226,155,0.55); animation:ctrStatusPulse 1.8s ease-out infinite; } .ctr-status[data-state="starting"], .ctr-status[data-state="restarting"], .ctr-status[data-state="pending"]{ background:var(--app-warn, #ffb84d); box-shadow:0 0 0 0 rgba(255,184,77,0.55); animation:ctrStatusPulse 1.2s ease-out infinite; } .ctr-status[data-state="stopped"], .ctr-status[data-state="off"], .ctr-status[data-state="exited"], .ctr-status[data-state="down"]{ background:var(--app-danger, #ff5c7c); } .ctr-status[data-state="error"], .ctr-status[data-state="failed"], .ctr-status[data-state="crashed"]{ background:var(--app-danger, #ff5c7c); box-shadow:0 0 0 0 rgba(255,92,124,0.55); animation:ctrStatusPulse 0.9s ease-out infinite; } @keyframes ctrStatusPulse{ 0% { box-shadow:0 0 0 0 currentColor; } 70% { box-shadow:0 0 0 7px transparent; } 100% { box-shadow:0 0 0 0 transparent; } } /* v5.10-AGGR-DESIGN — status badge (text variant for header chips) */ .ctr-status-badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px 3px 8px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-radius:999px; border:1px solid var(--app-border-1, rgba(255,255,255,0.10)); background:var(--app-surface-0, rgba(15,20,35,0.5)); color:var(--app-text-muted, #9aa3c8); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); line-height:1.2; } .ctr-status-badge[data-state="running"], .ctr-status-badge[data-state="on"], .ctr-status-badge[data-state="up"]{ background:rgba(52,226,155,0.12); border-color:rgba(52,226,155,0.35); color:var(--app-success, #34e29b); } .ctr-status-badge[data-state="starting"], .ctr-status-badge[data-state="restarting"], .ctr-status-badge[data-state="pending"]{ background:rgba(255,184,77,0.12); border-color:rgba(255,184,77,0.35); color:var(--app-warn, #ffb84d); } .ctr-status-badge[data-state="stopped"], .ctr-status-badge[data-state="off"], .ctr-status-badge[data-state="exited"], .ctr-status-badge[data-state="down"]{ background:rgba(255,92,124,0.10); border-color:rgba(255,92,124,0.30); color:var(--app-danger, #ff5c7c); } .ctr-status-badge[data-state="error"], .ctr-status-badge[data-state="failed"], .ctr-status-badge[data-state="crashed"]{ background:rgba(255,92,124,0.15); border-color:rgba(255,92,124,0.45); color:var(--app-danger, #ff5c7c); } /* ====== v5.10-AGGR-DESIGN — Helper Utility Classes ====== */ /* v5.10-AGGR-DESIGN — gradient-text: Linear-style colored heading */ .gradient-text{ background:linear-gradient(135deg, var(--app-accent, #7c5cf0) 0%, #a06bff 50%, #ff6dc5 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; font-weight:800; letter-spacing:-.02em; } .gradient-text.cool{ background:linear-gradient(135deg, var(--app-accent, #7c5cf0) 0%, #9579ff 50%, #5a3fd0 100%); -webkit-background-clip:text; background-clip:text; } .gradient-text.warm{ background:linear-gradient(135deg, var(--app-warn, #ffb84d) 0%, #ff8a3d 60%, #ff5c7c 100%); -webkit-background-clip:text; background-clip:text; } .gradient-text.success{ background:linear-gradient(135deg, var(--app-success, #34e29b) 0%, #1f9d6b 60%, #0e5239 100%); -webkit-background-clip:text; background-clip:text; } /* v5.10-AGGR-DESIGN — glass-pill-action: subtle pill-shape action button */ .glass-pill-action{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font-size:12px; font-weight:600; line-height:1.2; border-radius:999px; border:1px solid var(--app-border-1, rgba(255,255,255,0.10)); background:var(--app-surface-0, rgba(15,20,35,0.5)); color:var(--app-text, #e8ecf5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); cursor:pointer; transition:.16s; text-decoration:none; font-family:inherit; user-select:none; } .glass-pill-action:hover{ border-color:var(--app-accent, #7c5cf0); background:var(--app-accent-soft, rgba(124,92,240,0.12)); color:var(--app-text, #e8ecf5); } .glass-pill-action:active{ transform:translateY(1px); } .glass-pill-action[disabled], .glass-pill-action.is-disabled{ opacity:.5; pointer-events:none; } .glass-pill-action.primary{ background:linear-gradient(135deg, var(--app-accent, #7c5cf0), #9579ff); border-color:transparent; color:#04121e; box-shadow:0 6px 16px -8px var(--app-accent-glow, rgba(124,92,240,0.28)); } .glass-pill-action.primary:hover{ filter:brightness(1.08); background:linear-gradient(135deg, var(--app-accent, #7c5cf0), #9579ff); color:#04121e; } .glass-pill-action.danger{ border-color:rgba(255,92,124,0.35); color:var(--app-danger, #ff5c7c); } .glass-pill-action.danger:hover{ background:rgba(255,92,124,0.12); border-color:var(--app-danger, #ff5c7c); color:var(--app-danger, #ff5c7c); } .glass-pill-action.success{ border-color:rgba(52,226,155,0.35); color:var(--app-success, #34e29b); } .glass-pill-action.success:hover{ background:rgba(52,226,155,0.12); border-color:var(--app-success, #34e29b); } /* v5.10-AGGR-DESIGN — hover-lift: subtle card lift on hover (Vercel-style) */ .hover-lift{ transition:transform .2s ease, box-shadow .22s ease, border-color .18s ease; will-change:transform; } .hover-lift:hover{ transform:translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 40px -16px rgba(0,0,0,0.7), 0 0 0 1px var(--app-accent-soft, rgba(124,92,240,0.12)); } .hover-lift:active{ transform:translateY(-1px); } /* v5.10-AGGR-DESIGN — respect reduced motion preference */ @media (prefers-reduced-motion: reduce){ .ctr-card, .ctr-card::before, .hover-lift, .game-icon, .game-icon::after, .ctr-status, .ctr-status-badge, .glass-pill-action{ transition:none !important; animation:none !important; } .ctr-status[data-state="running"], .ctr-status[data-state="starting"], .ctr-status[data-state="error"]{ box-shadow:none !important; } } /* ================ v5.10-AGGR-SHELL ================ Sidebar reduziert auf nur Dashboard + Settings (3-Item-Pattern). Externe Dienste (Cloud, Webmail) als kleiner Footer-Block. Topbar bekommt prominente Admin-Toggle-Pill und Brand-Mini. Layout-Restruktur: kein vertikales Reihen-Menü mehr, sondern Pill-Stack. ================================================ */ /* v5.10-AGGR-SHELL — Sidebar Container neu strukturiert: Brand + Primary-Nav + Footer-Block */ .aggr-shell{ display:flex !important; flex-direction:column !important; gap:18px; padding:18px 14px 14px !important; background:linear-gradient(180deg, var(--app-bg-1) 0%, var(--app-bg-0) 100%) !important; border-right:1px solid var(--app-border-0) !important; position:relative; } /* v5.10-AGGR-SHELL — Brand-Block: kleiner und ruhiger */ .aggr-brand{ padding:6px 8px 14px !important; border-bottom:1px solid var(--app-border-0); margin-bottom:4px; } /* v5.10-AGGR-SHELL — Primary-Nav: nur 2 Items, als grosse Pills */ .gnav.aggr-nav-primary{ display:flex !important; flex-direction:column !important; gap:6px !important; padding:0 !important; margin:0 !important; flex:0 0 auto; } /* Hide navlabel headers when in aggr mode (only Dashboard + Settings visible) */ .aggr-nav-primary .navlabel{ display:none !important; } /* v5.10-AGGR-SHELL — Nav-Pill: card-style item, 44px Höhe, hover-lift */ .gnav-i.aggr-nav-pill{ display:flex !important; align-items:center; gap:12px; padding:11px 14px !important; border-radius:var(--app-r-md); background:var(--app-surface-0); border:1px solid var(--app-border-0); color:var(--app-text-muted); font-size:13.5px; font-weight:600; letter-spacing:0.01em; text-decoration:none; transition:background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; position:relative; overflow:hidden; } .gnav-i.aggr-nav-pill::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; border-radius:0 2px 2px 0; transition:background 0.18s ease; } .gnav-i.aggr-nav-pill:hover{ background:var(--app-surface-1); border-color:var(--app-border-1); color:var(--app-text); transform:translateX(2px); } .gnav-i.aggr-nav-pill.on{ background:var(--app-accent-soft); border-color:var(--app-accent-glow); color:var(--app-text); box-shadow:0 0 0 1px var(--app-accent-glow) inset, 0 8px 22px -14px var(--app-accent-glow); } .gnav-i.aggr-nav-pill.on::before{ background:var(--app-accent); } .gnav-i.aggr-nav-pill .gi{ font-size:17px; width:24px; text-align:center; filter:drop-shadow(0 0 6px var(--app-accent-glow)); } .gnav-i.aggr-nav-pill.on .gi{ filter:drop-shadow(0 0 10px var(--app-accent-glow)); } /* v5.10-AGGR-SHELL — Sidebar Footer-Block: externe Links unten, kleiner Stil */ .aggr-sidebar-foot{ margin-top:auto; padding-top:14px; border-top:1px dashed var(--app-border-0); display:flex; flex-direction:column; gap:6px; } .aggr-foot-label{ font-size:10.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--app-text-muted); opacity:0.7; padding:0 4px 6px; } .aggr-foot-nav{ display:flex; flex-direction:column; gap:3px; } .gnav-i.aggr-foot-link{ display:flex !important; align-items:center; gap:10px; padding:7px 10px !important; border-radius:var(--app-r-sm); background:transparent; border:1px solid transparent; color:var(--app-text-muted); font-size:12.5px; font-weight:500; text-decoration:none; transition:background 0.16s ease, color 0.16s ease, border-color 0.16s ease; } .gnav-i.aggr-foot-link:hover{ background:var(--app-surface-0); border-color:var(--app-border-0); color:var(--app-text); } .gnav-i.aggr-foot-link .gi{ font-size:14px; width:18px; text-align:center; opacity:0.85; } .gnav-i.aggr-foot-link .gext{ margin-left:auto; font-size:10px; opacity:0.5; } /* v5.10-AGGR-SHELL — Collapsed sidebar: footer block hidden */ .gside-collapsed .aggr-sidebar-foot{ display:none !important; } .gside-collapsed .gnav-i.aggr-nav-pill{ justify-content:center; padding:11px 8px !important; } .gside-collapsed .gnav-i.aggr-nav-pill .gt{ display:none; } /* v5.11-SIDEBAR — Sektions-Header in der Primär-Navigation (Pterodactyl/Expanse-Stil) */ .aggr-nav-label{ font-size:10px; letter-spacing:0.13em; text-transform:uppercase; color:var(--app-text-muted); opacity:0.62; font-weight:700; padding:14px 6px 5px; user-select:none; } .aggr-nav-primary > .aggr-nav-label:first-child{padding-top:2px} /* v5.11-SIDEBAR — Server-Tab-Buttons (button-Reset, volle Breite, links) */ button.gnav-i.aggr-srvctx-tab{ width:100%; text-align:left; font-family:inherit; cursor:pointer; appearance:none; -webkit-appearance:none; margin:0; } .aggr-srvctx-tab.on.aggr-srvctx-danger{ border-color:var(--danger); color:var(--danger); background:rgba(239,68,68,0.10); box-shadow:0 0 0 1px rgba(239,68,68,0.4) inset; } .aggr-srvctx-tab.on.aggr-srvctx-danger::before{background:var(--danger)} .aggr-srvctx-tab.aggr-srvctx-danger:hover{color:var(--danger)} /* NAV-REORG Part 2 — 'Erweiterungen'-Untermenue (Parent + eingerueckte Sub-Items) */ .aggr-srvctx-parent .aggr-srvctx-chev{margin-left:auto;font-size:11px;opacity:.7;transition:transform .15s ease} .aggr-srvctx-parent.open .aggr-srvctx-chev{opacity:1} .aggr-srvctx-submenu{display:flex;flex-direction:column;gap:3px;margin:1px 0 3px 14px;padding-left:8px;border-left:1px solid var(--app-border-1)} .aggr-srvctx-tab.aggr-srvctx-sub{padding-top:8px;padding-bottom:8px;font-size:13px;opacity:.95} .aggr-srvctx-tab.aggr-srvctx-sub .gi{transform:scale(.92)} /* NAV-REORG Part 3 — Server-Adresse-Popover (Kopieren / Aendern) */ .addr-pop .addr-pop-item{border-color:transparent;background:transparent} .addr-pop .addr-pop-item:hover{background:var(--app-accent-soft, rgba(124,131,253,.16));border-color:var(--app-border-1)} .aggr-srv-addr-popwrap .aggr-srv-addr-val-copy{cursor:pointer} /* v5.11-SIDEBAR — Server-Kontext-Header (aktueller Server-Name als Abschnitts-Titel) */ .aggr-srvctx-head{ display:flex; align-items:center; gap:9px; margin:16px 0 4px; padding:9px 11px; border-radius:var(--app-r-md); background:linear-gradient(135deg, var(--app-accent-soft), transparent 75%), var(--app-surface-0); border:1px solid var(--app-border-1); border-left:3px solid var(--app-accent); } .aggr-srvctx-dot{ width:8px;height:8px;border-radius:50%;flex:0 0 auto; background:var(--app-text-muted); box-shadow:0 0 0 2px rgba(255,255,255,0.04); } .aggr-srvctx-dot.on{ background:var(--app-success, #34e29b); box-shadow:0 0 8px var(--app-success, #34e29b); } .aggr-srvctx-dot.off{background:var(--app-text-muted)} .aggr-srvctx-name{ font-size:13.5px;font-weight:700;color:var(--app-text); letter-spacing:-0.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0; } .aggr-srvctx-label{padding-top:11px} /* v5.11-SIDEBAR — Server-Wechsel-Block im Footer */ .aggr-srvswitch{ display:flex;flex-direction:column;gap:6px; padding-bottom:12px;margin-bottom:10px; border-bottom:1px dashed var(--app-border-0); } .aggr-srvswitch-select{ width:100%; padding:8px 10px; border-radius:var(--app-r-sm); background:var(--app-surface-0); border:1px solid var(--app-border-1); color:var(--app-text); font-size:12.5px;font-weight:600; font-family:inherit; cursor:pointer; } .aggr-srvswitch-select:focus{outline:none;border-color:var(--app-accent)} .aggr-srvswitch-back{ font-size:12px;color:var(--app-text-muted); text-decoration:none;padding:3px 4px; transition:color 0.15s ease; } .aggr-srvswitch-back:hover{color:var(--app-accent)} /* v5.11-SIDEBAR — collapsed: Sektions-Header + Server-Name-Text ausblenden, Tabs zentrieren */ .gside-collapsed .aggr-nav-label{display:none} .gside-collapsed .aggr-srvctx-head{justify-content:center;padding:9px 6px;border-left-width:0} .gside-collapsed .aggr-srvctx-tab .gt{display:none} .gside-collapsed button.gnav-i.aggr-srvctx-tab{justify-content:center;text-align:center;padding:11px 8px} /* v5.10-AGGR-SHELL — Topbar grid-restructure */ .gtop.aggr-topbar{ display:flex !important; align-items:center; justify-content:space-between; padding:10px 18px !important; gap:14px; border-bottom:1px solid var(--app-border-0); backdrop-filter:var(--app-blur); -webkit-backdrop-filter:var(--app-blur); background:var(--app-surface-0) !important; } .aggr-top-left{ display:flex !important; align-items:center; gap:14px; } .aggr-brand-mini{ display:flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:var(--app-surface-0); border:1px solid var(--app-border-0); } .aggr-brand-dot{ width:8px; height:8px; border-radius:50%; background:var(--app-accent); box-shadow:0 0 8px var(--app-accent-glow), 0 0 0 2px var(--app-accent-soft); } .aggr-brand-name{ font-size:12.5px; font-weight:600; color:var(--app-text); letter-spacing:0.02em; } .aggr-top-right{ display:flex !important; align-items:center; gap:10px; } /* v5.10-AGGR-SHELL — Admin-Toggle-Pill: prominenter Switch im Topbar-Right */ .aggr-admin-pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 11px; border-radius:999px; border:1px solid var(--app-border-1); background:var(--app-surface-0); color:var(--app-text-muted); font-size:12.5px; font-weight:600; letter-spacing:0.02em; cursor:pointer; transition:background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; position:relative; } .aggr-admin-pill:hover{ background:var(--app-surface-1); border-color:var(--app-accent-glow); color:var(--app-text); } .aggr-admin-pill.on{ background:linear-gradient(135deg, var(--app-accent-soft) 0%, var(--app-surface-1) 100%); border-color:var(--app-accent); color:var(--app-text); box-shadow:0 0 0 1px var(--app-accent) inset, 0 6px 18px -10px var(--app-accent-glow); } .aggr-admin-pill.off{ opacity:0.85; } .aggr-admin-pill-icon{ font-size:14px; filter:drop-shadow(0 0 6px var(--app-accent-glow)); } .aggr-admin-pill.on .aggr-admin-pill-icon{ filter:drop-shadow(0 0 10px var(--app-accent-glow)); } .aggr-admin-pill-label{ font-weight:600; } .aggr-admin-pill-state{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:0.08em; background:var(--app-border-0); color:var(--app-text-muted); margin-left:2px; } .aggr-admin-pill.on .aggr-admin-pill-state{ background:var(--app-accent); color:var(--app-bg-0); } /* v5.10-AGGR-SHELL — Sec. View-Toggle gets softer accent so admin-pill stays primary */ .aggr-view-toggle{ font-size:12px !important; font-weight:500 !important; opacity:0.85; } .aggr-view-toggle:hover{ opacity:1; } /* v5.10-AGGR-SHELL — Responsive: brand-mini hidden on narrow */ @media (max-width: 880px){ .aggr-brand-mini{ display:none; } .aggr-admin-pill-label{ display:none; } } @media (max-width: 640px){ .aggr-admin-pill{ padding:6px 9px; } .aggr-admin-pill-state{ margin-left:0; } } /* v5.10-AGGR-SHELL — Reduced motion: kill transitions on shell pieces */ @media (prefers-reduced-motion: reduce){ .gnav-i.aggr-nav-pill, .gnav-i.aggr-foot-link, .aggr-admin-pill{ transition:none !important; } .gnav-i.aggr-nav-pill:hover{ transform:none !important; } } /* ================================================================ v5.10-AGGR-SETTINGS — iOS-style Settings page ---------------------------------------------------------------- Replaces the flat tab-row with a grid of section-cards (icon + title + subtitle + chevron). The active card stays highlighted while the bento-pane below shows its content. Mobile: 1-column stack. Desktop: 2-column grid. ================================================================ */ /* v5.10-AGGR-SETTINGS — Outer shell rhythm */ .aggr-settings-ios.settings-shell{ padding-top:6px; } .aggr-settings-ios .aggr-settings-head{ margin-bottom:18px; } .aggr-settings-ios .aggr-settings-head h1{ letter-spacing:-0.01em; } /* SETTINGS-FIX 2026-06-18 — Body = echtes 2-Spalten-Layout: linke Sub-Nav | Inhalt. Vorher grid-template-columns:1fr (gestapelt) -> Tabs lagen mitten auf der Seite und ueberlappten den Content (zusammen mit position:sticky + Pane-translateY-Animation). Jetzt sauberer Dokument-Flow, kein Overlap. align-items:start verhindert Stretch-Overlap. */ .aggr-settings-ios .aggr-settings-body{ display:grid; grid-template-columns:248px minmax(0,1fr); align-items:start; gap:22px; min-height:0; } /* SETTINGS-FIX 2026-06-18 — Tab-Container wird zur vertikalen LINKEN Sub-Navigation (Liste, eine Spalte) statt 2-Spalten-Kachelblock in der Seitenmitte. Sticky links, eigene Spalte -> liegt nie ueber dem Inhalt. */ .aggr-settings-ios .aggr-settings-grid{ display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:10px !important; margin:0 !important; flex-wrap:initial !important; align-content:start; position:sticky; top:0; align-self:start; } /* SETTINGS-FIX 2026-06-18 — "BEREICHE"-Label ueber der linken Sub-Nav (rein dekorativ) */ .aggr-settings-ios .aggr-settings-grid::before{ content:"BEREICHE"; display:block; font-size:10px; letter-spacing:1.4px; font-weight:700; color:var(--app-text-muted, #9aa3c8); opacity:.7; padding:2px 4px 4px; } @media (max-width: 880px){ /* Schmal: Sub-Nav wandert nach oben, wird horizontaler Scroller — kein Overlap. */ .aggr-settings-ios .aggr-settings-body{ grid-template-columns:1fr; gap:14px; } .aggr-settings-ios .aggr-settings-grid{ grid-template-columns:1fr !important; position:relative; top:auto; gap:8px !important; } } /* v5.10-AGGR-SETTINGS — Section card (replaces tab button look) */ .aggr-settings-ios .aggr-settings-card{ position:relative; display:grid !important; grid-template-columns:46px 1fr 18px; align-items:center; gap:14px; width:100%; min-height:78px; padding:14px 18px !important; text-align:left !important; border-radius:18px !important; border:1px solid var(--app-border-1) !important; background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 55%), var(--app-surface-0) !important; color:var(--app-text) !important; font-weight:500 !important; font-size:14px !important; letter-spacing:0 !important; cursor:pointer; transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); box-shadow:0 1px 0 rgba(255,255,255,0.04) inset; overflow:hidden; } .aggr-settings-ios .aggr-settings-card:hover{ transform:translateY(-2px); border-color:var(--app-border-1) !important; background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 60%), var(--app-surface-1) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 26px rgba(0,0,0,0.32); } .aggr-settings-ios .aggr-settings-card:focus-visible{ outline:none; border-color:var(--app-accent) !important; box-shadow: 0 0 0 3px var(--app-accent-soft), 0 10px 26px rgba(0,0,0,0.32); } .aggr-settings-ios .aggr-settings-card.is-active{ border-color:var(--app-accent) !important; background: linear-gradient(180deg, var(--app-accent-soft), transparent 55%), var(--app-surface-1) !important; color:var(--app-text) !important; box-shadow: 0 0 0 1px var(--app-accent-soft), 0 12px 28px rgba(0,0,0,0.36); } .aggr-settings-ios .aggr-settings-card.is-active::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(180deg, var(--app-accent), var(--app-accent-glow)); border-radius:18px 0 0 18px; } /* v5.10-AGGR-SETTINGS — Icon tile inside the card */ .aggr-settings-ios .aggr-settings-card-icon{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:14px; font-size:22px; line-height:1; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)), var(--app-surface-1); border:1px solid var(--app-border-1); color:var(--app-text); flex:none; box-shadow:0 1px 0 rgba(255,255,255,0.05) inset; } .aggr-settings-ios .aggr-settings-card.is-active .aggr-settings-card-icon{ background: linear-gradient(180deg, var(--app-accent-soft), rgba(255,255,255,0.02)), var(--app-surface-1); border-color:var(--app-accent); color:var(--app-accent); box-shadow: 0 0 0 1px var(--app-accent-soft) inset, 0 0 14px var(--app-accent-glow); } .aggr-settings-ios .aggr-settings-card-icon[data-ico="security"], .aggr-settings-ios .aggr-settings-card-icon[data-ico="sso"]{ font-size:20px; } /* v5.10-AGGR-SETTINGS — Text stack inside the card */ .aggr-settings-ios .aggr-settings-card-body{ display:flex; flex-direction:column; gap:3px; min-width:0; text-align:left; } .aggr-settings-ios .aggr-settings-card-title{ font-size:14.5px; font-weight:600; line-height:1.2; color:var(--app-text); letter-spacing:-0.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .aggr-settings-ios .aggr-settings-card-sub{ font-size:12px; font-weight:400; line-height:1.35; color:var(--app-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* v5.10-AGGR-SETTINGS — Chevron on the right */ .aggr-settings-ios .aggr-settings-card-chev{ display:inline-flex; align-items:center; justify-content:center; font-size:22px; font-weight:300; color:var(--app-text-muted); line-height:1; opacity:.6; transition:transform .18s ease, color .18s ease, opacity .18s ease; } .aggr-settings-ios .aggr-settings-card:hover .aggr-settings-card-chev{ transform:translateX(2px); opacity:1; color:var(--app-text); } .aggr-settings-ios .aggr-settings-card.is-active .aggr-settings-card-chev{ transform:rotate(90deg); color:var(--app-accent); opacity:1; } /* SETTINGS-FIX 2026-06-18 — Inhalts-Pane sitzt sauber in der RECHTEN Spalte. translateY aus der Fade-Animation ENTFERNT (verursachte beim Wechsel kurzes Ueberlappen); jetzt nur Opacity-Fade. min-width:0 verhindert Grid-Overflow. */ .aggr-settings-ios .aggr-settings-pane{ position:relative; padding:0; min-width:0; animation:aggrSettingsFadeIn .22s ease; } @keyframes aggrSettingsFadeIn{ from{ opacity:0; } to { opacity:1; } } /* v5.10-AGGR-SETTINGS — Inner bento grids span full width inside the pane */ .aggr-settings-ios .aggr-settings-pane .bento{ grid-template-columns:repeat(12, 1fr); gap:16px; } @media (max-width: 760px){ .aggr-settings-ios .aggr-settings-pane .bento{ grid-template-columns:1fr; } .aggr-settings-ios .aggr-settings-pane .bento > .card[class*="col-"]{ grid-column:1 / -1 !important; } } /* v5.10-AGGR-SETTINGS — Override the prior inline ":style" so the active card's text stays readable (the inline style sets color:#fff which is fine, but we want our token-based hierarchy to win for non-text bits). */ .aggr-settings-ios .aggr-settings-card[style*="border-color:var(--primary)"]{ border-color:var(--app-accent) !important; } /* v5.10-AGGR-SETTINGS — Reduced motion */ @media (prefers-reduced-motion: reduce){ .aggr-settings-ios .aggr-settings-card, .aggr-settings-ios .aggr-settings-card-chev, .aggr-settings-ios .aggr-settings-pane{ transition:none !important; animation:none !important; } .aggr-settings-ios .aggr-settings-card:hover{ transform:none !important; } .aggr-settings-ios .aggr-settings-card.is-active .aggr-settings-card-chev{ transform:none !important; } } /* ============================================================ */ /* v5.10-AGGR-CONTAINERS — RESTRUCTURED Card-Grid (HTN-Panel) */ /* Row-Layout → Asymmetric Grid-Cards mit Game-Thumbnail, */ /* Status-Dot, Mini-Stats Pills und Hover-Lift. */ /* ============================================================ */ /* v5.10-AGGR-CONTAINERS — body container */ .app-page-containers .ctr-grid-body{ display:flex; flex-direction:column; gap:28px; padding:0; } /* v5.10-AGGR-CONTAINERS — group section (stack header + grid) */ .app-page-containers .ctr-group{ display:flex; flex-direction:column; gap:14px; background:transparent; border:0; padding:0; box-shadow:none; } /* v5.10-AGGR-CONTAINERS — group header (collapsible) */ .app-page-containers .ctr-group-head{ display:flex; align-items:center; gap:10px; padding:6px 4px 8px; cursor:pointer; user-select:none; border-bottom:1px solid var(--app-border-0, rgba(255,255,255,0.07)); } .app-page-containers .ctr-group-chev{ color:var(--app-text-muted, #9aa3c8); font-size:13px; width:14px; display:inline-block; } .app-page-containers .ctr-group-icon-img{ width:22px; height:22px; border-radius:6px; object-fit:cover; } .app-page-containers .ctr-group-icon-emoji{ font-size:16px; line-height:1; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; } .app-page-containers .ctr-group-title{ margin:0; font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--app-text, #e8ecf5); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .app-page-containers .ctr-group-count{ font-size:11.5px; font-weight:600; font-family:var(--mono, ui-monospace, monospace); color:var(--app-text-muted, #9aa3c8); background:var(--app-surface-0, rgba(15,20,35,0.5)); border:1px solid var(--app-border-0, rgba(255,255,255,0.07)); padding:3px 9px; border-radius:999px; } /* v5.10-AGGR-CONTAINERS — the grid (auto-fill cards) */ .app-page-containers .ctr-card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; } /* v5.10-AGGR-CONTAINERS — CARD root (override old grid-area layout) */ .app-page-containers .ctr-card-grid > .ctr-card{ display:flex; flex-direction:column; gap:12px; grid-template-areas:none; grid-template-columns:none; grid-template-rows:none; align-items:stretch; padding:16px; min-height:170px; border:1px solid var(--app-border-0, rgba(255,255,255,0.07)); border-radius:var(--app-r-lg, 16px); background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 55%), var(--app-surface-1, rgba(20,26,42,0.7)); -webkit-backdrop-filter:var(--app-blur, blur(14px) saturate(140%)); backdrop-filter:var(--app-blur, blur(14px) saturate(140%)); box-shadow:var(--app-shadow-card, 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6)); cursor:pointer; transition:transform .18s ease, border-color .18s ease, box-shadow .22s ease; isolation:isolate; overflow:hidden; position:relative; } /* v5.10-AGGR-CONTAINERS — subtle accent bloom (top-right) */ .app-page-containers .ctr-card-grid > .ctr-card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; background:radial-gradient(640px 240px at 100% -10%, var(--app-accent-soft, rgba(124,92,240,0.12)), transparent 60%); opacity:0; transition:opacity .25s ease; pointer-events:none; z-index:0; } .app-page-containers .ctr-card-grid > .ctr-card > *{ position:relative; z-index:1; } /* v5.10-AGGR-CONTAINERS — hover lift + accent glow */ .app-page-containers .ctr-card-grid > .ctr-card:hover{ border-color:var(--app-border-1, rgba(255,255,255,0.10)); transform:translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 22px 48px -22px rgba(0,0,0,0.78), 0 0 0 1px var(--app-accent-soft, rgba(124,92,240,0.18)); } .app-page-containers .ctr-card-grid > .ctr-card:hover::before{ opacity:1; } /* v5.10-AGGR-CONTAINERS — TOP: icon-thumbnail + status dot */ .app-page-containers .ctr-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .app-page-containers .ctr-card-icon{ width:52px; height:52px; border-radius:var(--app-r-md, 12px); display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--app-surface-0), var(--app-surface-1)); border:1px solid var(--app-border-0, rgba(255,255,255,0.07)); flex:0 0 auto; position:relative; overflow:hidden; } .app-page-containers .ctr-card-icon-glyph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; font-weight:700; color:var(--app-text, #e8ecf5); } .app-page-containers .ctr-card-icon-glyph::before{ content:"📦"; } /* v5.10-AGGR-CONTAINERS — per-game thumbnail icon mapping (emoji-glyph + tinted bg) */ .app-page-containers .ctr-card-icon[data-game="minecraft"]{ background:linear-gradient(135deg, rgba(95,170,80,0.22), rgba(50,120,40,0.10)); border-color:rgba(95,170,80,0.32); } .app-page-containers .ctr-card-icon[data-game="minecraft"] .ctr-card-icon-glyph::before{ content:"🟩"; } .app-page-containers .ctr-card-icon[data-game="minecraft-proxy"]{ background:linear-gradient(135deg, rgba(140,110,200,0.22), rgba(60,40,110,0.10)); border-color:rgba(140,110,200,0.32); } .app-page-containers .ctr-card-icon[data-game="minecraft-proxy"] .ctr-card-icon-glyph::before{ content:"🔀"; } .app-page-containers .ctr-card-icon[data-game="bedrock"]{ background:linear-gradient(135deg, rgba(180,140,90,0.22), rgba(110,80,40,0.10)); border-color:rgba(180,140,90,0.32); } .app-page-containers .ctr-card-icon[data-game="bedrock"] .ctr-card-icon-glyph::before{ content:"🟫"; } .app-page-containers .ctr-card-icon[data-game="fivem"]{ background:linear-gradient(135deg, rgba(255,140,60,0.22), rgba(180,80,30,0.10)); border-color:rgba(255,140,60,0.32); } .app-page-containers .ctr-card-icon[data-game="fivem"] .ctr-card-icon-glyph::before{ content:"🚓"; } .app-page-containers .ctr-card-icon[data-game="teamspeak"]{ background:linear-gradient(135deg, rgba(70,150,235,0.22), rgba(30,80,140,0.10)); border-color:rgba(70,150,235,0.32); } .app-page-containers .ctr-card-icon[data-game="teamspeak"] .ctr-card-icon-glyph::before{ content:"🎙"; } .app-page-containers .ctr-card-icon[data-game="debian"]{ background:linear-gradient(135deg, rgba(180,30,90,0.22), rgba(110,20,60,0.10)); border-color:rgba(180,30,90,0.32); } .app-page-containers .ctr-card-icon[data-game="debian"] .ctr-card-icon-glyph::before{ content:"🌀"; } .app-page-containers .ctr-card-icon[data-game="windows"]{ background:linear-gradient(135deg, rgba(60,140,220,0.22), rgba(30,80,140,0.10)); border-color:rgba(60,140,220,0.32); } .app-page-containers .ctr-card-icon[data-game="windows"] .ctr-card-icon-glyph::before{ content:"🪟"; } .app-page-containers .ctr-card-icon[data-game="nginx"]{ background:linear-gradient(135deg, rgba(90,200,140,0.22), rgba(40,120,80,0.10)); border-color:rgba(90,200,140,0.32); } .app-page-containers .ctr-card-icon[data-game="nginx"] .ctr-card-icon-glyph::before{ content:"🌐"; } .app-page-containers .ctr-card-icon[data-game="postgres"]{ background:linear-gradient(135deg, rgba(70,120,180,0.22), rgba(30,60,110,0.10)); border-color:rgba(70,120,180,0.32); } .app-page-containers .ctr-card-icon[data-game="postgres"] .ctr-card-icon-glyph::before{ content:"🐘"; } .app-page-containers .ctr-card-icon[data-game="mariadb"]{ background:linear-gradient(135deg, rgba(110,150,210,0.22), rgba(50,80,140,0.10)); border-color:rgba(110,150,210,0.32); } .app-page-containers .ctr-card-icon[data-game="mariadb"] .ctr-card-icon-glyph::before{ content:"🐬"; } .app-page-containers .ctr-card-icon[data-game="redis"]{ background:linear-gradient(135deg, rgba(220,80,70,0.22), rgba(150,40,30,0.10)); border-color:rgba(220,80,70,0.32); } .app-page-containers .ctr-card-icon[data-game="redis"] .ctr-card-icon-glyph::before{ content:"🟥"; } .app-page-containers .ctr-card-icon[data-game="mongo"]{ background:linear-gradient(135deg, rgba(80,180,110,0.22), rgba(40,110,60,0.10)); border-color:rgba(80,180,110,0.32); } .app-page-containers .ctr-card-icon[data-game="mongo"] .ctr-card-icon-glyph::before{ content:"🍃"; } .app-page-containers .ctr-card-icon[data-game="jellyfin"]{ background:linear-gradient(135deg, rgba(120,90,200,0.22), rgba(70,40,140,0.10)); border-color:rgba(120,90,200,0.32); } .app-page-containers .ctr-card-icon[data-game="jellyfin"] .ctr-card-icon-glyph::before{ content:"🎬"; } .app-page-containers .ctr-card-icon[data-game="claude"]{ background:linear-gradient(135deg, rgba(240,160,90,0.22), rgba(180,100,40,0.10)); border-color:rgba(240,160,90,0.32); } .app-page-containers .ctr-card-icon[data-game="claude"] .ctr-card-icon-glyph::before{ content:"🧠"; } .app-page-containers .ctr-card-icon[data-game="rust"]{ background:linear-gradient(135deg, rgba(190,110,70,0.22), rgba(120,60,30,0.10)); border-color:rgba(190,110,70,0.32); } .app-page-containers .ctr-card-icon[data-game="rust"] .ctr-card-icon-glyph::before{ content:"🔧"; } .app-page-containers .ctr-card-icon[data-game="valheim"]{ background:linear-gradient(135deg, rgba(140,110,80,0.22), rgba(90,60,40,0.10)); border-color:rgba(140,110,80,0.32); } .app-page-containers .ctr-card-icon[data-game="valheim"] .ctr-card-icon-glyph::before{ content:"🪓"; } .app-page-containers .ctr-card-icon[data-game="palworld"]{ background:linear-gradient(135deg, rgba(180,140,200,0.22), rgba(110,80,140,0.10)); border-color:rgba(180,140,200,0.32); } .app-page-containers .ctr-card-icon[data-game="palworld"] .ctr-card-icon-glyph::before{ content:"🐱"; } .app-page-containers .ctr-card-icon[data-game="ark"]{ background:linear-gradient(135deg, rgba(150,90,60,0.22), rgba(90,50,30,0.10)); border-color:rgba(150,90,60,0.32); } .app-page-containers .ctr-card-icon[data-game="ark"] .ctr-card-icon-glyph::before{ content:"🦖"; } .app-page-containers .ctr-card-icon[data-game="factorio"]{ background:linear-gradient(135deg, rgba(200,150,70,0.22), rgba(130,90,30,0.10)); border-color:rgba(200,150,70,0.32); } .app-page-containers .ctr-card-icon[data-game="factorio"] .ctr-card-icon-glyph::before{ content:"⚙"; } .app-page-containers .ctr-card-icon[data-game="terraria"]{ background:linear-gradient(135deg, rgba(110,180,90,0.22), rgba(60,120,40,0.10)); border-color:rgba(110,180,90,0.32); } .app-page-containers .ctr-card-icon[data-game="terraria"] .ctr-card-icon-glyph::before{ content:"🌳"; } .app-page-containers .ctr-card-icon[data-game="generic"]{ background:linear-gradient(135deg, rgba(154,163,200,0.18), rgba(80,90,130,0.08)); border-color:rgba(154,163,200,0.22); } .app-page-containers .ctr-card-icon[data-game="generic"] .ctr-card-icon-glyph::before{ content:"📦"; } /* v5.10-AGGR-CONTAINERS — STATUS dot (top-right) */ .app-page-containers .ctr-card .ctr-status{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; margin-top:6px; position:relative; box-shadow:0 0 0 3px var(--app-surface-1, rgba(20,26,42,0.7)); } .app-page-containers .ctr-card .ctr-status[data-state="running"]{ background:var(--app-success, #34e29b); box-shadow:0 0 0 3px rgba(52,226,155,0.10), 0 0 12px 2px rgba(52,226,155,0.45); } .app-page-containers .ctr-card .ctr-status[data-state="stopped"]{ background:var(--app-text-muted, #9aa3c8); opacity:0.55; } .app-page-containers .ctr-card .ctr-status[data-state="crash"]{ background:var(--app-danger, #ff5c7c); box-shadow:0 0 0 3px rgba(255,92,124,0.12), 0 0 12px 2px rgba(255,92,124,0.5); } /* v5.10-AGGR-CONTAINERS — BODY: name big, subtitle small (visual hierarchy) */ .app-page-containers .ctr-card-body{ display:flex; flex-direction:column; gap:4px; min-width:0; } .app-page-containers .ctr-card-name{ font-weight:700; font-size:15.5px; letter-spacing:-.015em; color:var(--app-text, #e8ecf5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.25; } .app-page-containers .ctr-card-subtitle{ font-size:12px; color:var(--app-text-muted, #9aa3c8); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; } /* v5.10-AGGR-CONTAINERS — STATS: 3 mini pill-badges */ .app-page-containers .ctr-card-stats{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; } .app-page-containers .ctr-pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; font-size:10.5px; font-weight:600; font-family:var(--mono, ui-monospace, monospace); letter-spacing:.02em; text-transform:uppercase; color:var(--app-text-muted, #9aa3c8); background:var(--app-surface-0, rgba(15,20,35,0.5)); border:1px solid var(--app-border-0, rgba(255,255,255,0.07)); border-radius:999px; line-height:1.4; } .app-page-containers .ctr-pill-dot{ width:5px; height:5px; border-radius:50%; display:inline-block; background:currentColor; opacity:.7; } .app-page-containers .ctr-pill-cpu{ color:var(--app-accent, #7c5cf0); border-color:var(--app-accent-soft, rgba(124,92,240,0.18)); } .app-page-containers .ctr-pill-ram{ color:var(--app-warn, #ffb84d); border-color:rgba(255,184,77,0.18); } .app-page-containers .ctr-pill-players{ color:var(--app-success, #34e29b); border-color:rgba(52,226,155,0.18); } /* CARDS 2026-07-09: Uptime-Pill (Zeit seit letztem Start — resettet bei Neustart) */ .app-page-containers .ctr-pill-up{ color:var(--app-text-muted, #9aa3c8); border-color:rgba(154,163,200,0.18); } /* v5.10-AGGR-CONTAINERS — FOOT: badge + quick-actions (only visible on hover) */ .app-page-containers .ctr-card-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:8px; border-top:1px dashed var(--app-border-0, rgba(255,255,255,0.07)); } .app-page-containers .ctr-card-badge{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 10px; border-radius:999px; border:1px solid transparent; } .app-page-containers .ctr-card-badge.on{ color:var(--app-success, #34e29b); background:rgba(52,226,155,0.10); border-color:rgba(52,226,155,0.22); } .app-page-containers .ctr-card-badge.off{ color:var(--app-text-muted, #9aa3c8); background:rgba(154,163,200,0.08); border-color:rgba(154,163,200,0.18); } /* CARDS 2026-07-09: quick-actions IMMER sichtbar (gedimmt), voll bei Hover — Kundenwunsch "ich will die Schaltflächen drücken können" (vorher opacity:0 bis Hover = wirkten tot/unklickbar). */ .app-page-containers .ctr-card-quick{ display:inline-flex; align-items:center; gap:4px; opacity:.6; transform:translateX(0); transition:opacity .18s ease, transform .18s ease; } .app-page-containers .ctr-card-grid > .ctr-card:hover .ctr-card-quick{ opacity:1; transform:translateX(0); } .app-page-containers .ctr-card-grid > .ctr-card:focus-within .ctr-card-quick{ opacity:1; transform:translateX(0); } .app-page-containers .ctr-quick-btn{ appearance:none; border:1px solid var(--app-border-0, rgba(255,255,255,0.07)); background:var(--app-surface-0, rgba(15,20,35,0.5)); color:var(--app-text-muted, #9aa3c8); width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:11.5px; cursor:pointer; padding:0; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; } .app-page-containers .ctr-quick-btn:hover{ background:var(--app-accent-soft, rgba(124,92,240,0.12)); color:var(--app-accent, #7c5cf0); border-color:var(--app-accent-soft, rgba(124,92,240,0.18)); transform:translateY(-1px); } .app-page-containers .ctr-quick-btn:active{ transform:translateY(0); } /* v5.10-AGGR-CONTAINERS — empty state */ .app-page-containers .ctr-empty{ border-radius:var(--app-r-lg, 16px); border:1px dashed var(--app-border-1, rgba(255,255,255,0.10)); background:var(--app-surface-0, rgba(15,20,35,0.5)); } /* v5.10-AGGR-CONTAINERS — Responsive: tighter on narrow */ @media (max-width:560px){ .app-page-containers .ctr-card-grid{ grid-template-columns:1fr; gap:12px; } .app-page-containers .ctr-card-grid > .ctr-card{ min-height:auto; padding:14px; } .app-page-containers .ctr-card-quick{ opacity:1; transform:none; } } /* v5.10-AGGR-CONTAINERS — Reduced-motion: kill lift + transitions */ @media (prefers-reduced-motion: reduce){ .app-page-containers .ctr-card-grid > .ctr-card, .app-page-containers .ctr-card-grid > .ctr-card::before, .app-page-containers .ctr-card-quick, .app-page-containers .ctr-quick-btn{ transition:none !important; } .app-page-containers .ctr-card-grid > .ctr-card:hover{ transform:none !important; } } /* ================================================================ v5.10-AGGR-DETAIL — Container-Detail Page (page==='c') Refinement ---------------------------------------------------------------- HTN-Panel / Pterodactyl style hero refresh: - .aggr-hero Big game-icon (xl 80x80) + gradient title + status + actions - .aggr-stats-row 5 big stat-cards in a row (Status/CPU/RAM/Disk/Net) - .aggr-srv-addr Prominent server-address card + player-list - .aggr-tab-pills Horizontal pill nav (replaces vertical sidebar) - .aggr-srv-shell Full-width tab-content area All scoped under .detail-c.aggr-detail to avoid leaks. ================================================================ */ /* v5.10-AGGR-DETAIL — Sticky-top container: more breathing room, glass surface */ .detail-c.aggr-detail .detail-sticky-top.aggr-detail-sticky{ padding:18px 0 14px; gap:14px; } /* v5.10-AGGR-DETAIL — HERO root */ .detail-c.aggr-detail .page-head.aggr-hero{ margin:0 4px; padding:18px 22px; border-radius:var(--app-r-lg, 16px); background: radial-gradient(circle at 0% 0%, var(--app-accent-soft, rgba(124,92,240,0.10)) 0%, transparent 55%), linear-gradient(180deg, var(--app-surface-1, rgba(20,26,42,0.72)) 0%, var(--app-surface-0, rgba(15,20,35,0.5)) 100%); border:1px solid var(--app-border-1, rgba(255,255,255,0.10)); -webkit-backdrop-filter:var(--app-blur, blur(14px) saturate(140%)); backdrop-filter:var(--app-blur, blur(14px) saturate(140%)); box-shadow:var(--app-shadow-card, 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -16px rgba(0,0,0,0.6)); position:relative; overflow:hidden; align-items:center !important; } /* v5.10-AGGR-DETAIL — accent bloom in top-right */ .detail-c.aggr-detail .page-head.aggr-hero::before{ content:""; position:absolute; top:-30%; right:-10%; width:280px; height:280px; background:radial-gradient(circle, var(--app-accent-glow, rgba(124,92,240,0.20)) 0%, transparent 65%); pointer-events:none; z-index:0; } .detail-c.aggr-detail .aggr-hero-left, .detail-c.aggr-detail .aggr-hero-actions{ position:relative; z-index:1; } /* v5.10-AGGR-DETAIL — back chevron: glass pill */ .detail-c.aggr-detail .aggr-hero-back{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex:0 0 auto; border-radius:10px; color:var(--app-text-muted, var(--muted)); text-decoration:none; background:rgba(255,255,255,0.03); border:1px solid var(--app-border-0, rgba(255,255,255,0.07)); font-size:18px; font-weight:600; transition:background .16s ease, color .16s ease, transform .16s ease; } .detail-c.aggr-detail .aggr-hero-back:hover{ background:var(--app-accent-soft, rgba(124,92,240,0.12)); color:var(--app-accent, #7c5cf0); transform:translateX(-2px); } /* v5.10-AGGR-DETAIL — Hero thumbnail (xl) ring + pulse */ .detail-c.aggr-detail .aggr-hero-thumb{ width:80px !important; height:80px !important; border-radius:18px !important; font-size:28px !important; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 16px 40px -12px rgba(0,0,0,0.55), 0 0 0 1px var(--app-border-1, rgba(255,255,255,0.10)); } /* v5.10-AGGR-DETAIL — Identity column: gradient title + subtitle */ .detail-c.aggr-detail .aggr-hero-ident{ display:flex; flex-direction:column; gap:8px; min-width:0; } .detail-c.aggr-detail .aggr-hero-title{ font-size:30px !important; font-weight:800 !important; letter-spacing:-.035em !important; line-height:1.05 !important; margin:0 !important; } .detail-c.aggr-detail .aggr-hero-dot{ width:10px; height:10px; flex:0 0 auto; } .detail-c.aggr-detail .aggr-hero-switch{ background:transparent; border:0; padding:2px 26px 2px 2px; font-size:30px; font-weight:800; letter-spacing:-.035em; color:var(--app-text, #e8ecf5); -webkit-text-fill-color:var(--app-text, #e8ecf5); /* solide Farbe — Gradient-clip:text macht select-Text unsichtbar */ cursor:pointer; max-width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } .detail-c.aggr-detail .aggr-hero-switch option{ color:#1a1f33; background:#fff; -webkit-text-fill-color:#1a1f33; font-size:14px; font-weight:600; } /* v5.10-FIX-VSHOW — Tab-Panels (.tab-files/.tab-backups/.tab-mods …) hatten display:flex/grid !important, was Vues v-show (display:none) überschrieb → ALLE Tabs gleichzeitig sichtbar (immer Datei-Manager). Erzwingt Verstecken sobald v-show display:none gesetzt hat → nur der aktive Tab zeigt. */ .detail-c .srv-main > [style*="display: none"], .detail-c .srv-main > [style*="display:none"]{ display:none !important; } .detail-c.aggr-detail .aggr-hero-switch:focus{ outline:none; text-decoration:underline; text-decoration-color:var(--app-accent, #7c5cf0); } /* v5.10-AGGR-DETAIL — Subtitle row: image + state pill + health */ .detail-c.aggr-detail .aggr-hero-sub{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; } .detail-c.aggr-detail .aggr-hero-image{ font-family:var(--mono); font-size:12.5px; color:var(--app-text-muted, var(--muted)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:420px; letter-spacing:-.01em; } .detail-c.aggr-detail .aggr-hero-statebadge{ margin-left:0 !important; padding:3px 10px !important; font-size:11px !important; font-weight:700 !important; border-radius:999px !important; letter-spacing:.02em; } .detail-c.aggr-detail .aggr-hero-health{ font-size:11.5px; font-style:italic; } /* v5.10-AGGR-DETAIL — Hero actions: bigger primary, smaller secondaries */ .detail-c.aggr-detail .aggr-hero-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; } .detail-c.aggr-detail .aggr-act{ padding:10px 16px; font-size:13.5px; font-weight:700; border-radius:10px; letter-spacing:.01em; transition:transform .12s ease, box-shadow .14s ease, background .14s ease; } .detail-c.aggr-detail .aggr-act:hover{ transform:translateY(-1px); } .detail-c.aggr-detail .aggr-act-primary{ padding:12px 22px; font-size:14px; background:linear-gradient(135deg, var(--app-success, #34e29b) 0%, var(--app-accent, #7c5cf0) 100%); border:0; color:#06121a; box-shadow:0 8px 22px -10px var(--app-accent-glow, rgba(124,92,240,0.40)); } .detail-c.aggr-detail .aggr-act-primary:hover{ box-shadow:0 12px 28px -10px var(--app-accent-glow, rgba(124,92,240,0.55)); } .detail-c.aggr-detail .aggr-act-danger{ padding:10px 14px; } /* v5.10-AGGR-DETAIL — Live-Stats-Row (replaces the old single horizontal divider row) */ .detail-c.aggr-detail .aggr-stats-row{ display:grid !important; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px !important; padding:0 !important; margin:0 4px !important; background:transparent !important; border:0 !important; box-shadow:none !important; } /* C: Game/MC-Server zeigen nur 3 Karten (Status/Disk/Netzwerk) — kompaktere 3-Spalten-Reihe. */ .detail-c.aggr-detail .aggr-stats-row.aggr-stats-row-lean{ grid-template-columns:repeat(3, minmax(0, 1fr)); max-width:760px; } /* F: Health-Ampel-Punkt im Status-Karten-Header (gruen/gelb/rot/grau via inline-style). */ .aggr-health-dot{ display:inline-block;width:9px;height:9px;border-radius:50%; margin-right:5px;vertical-align:middle;flex:0 0 auto; box-shadow:0 0 0 3px rgba(255,255,255,.04); } .detail-c.aggr-detail .aggr-stat-card{ background:var(--app-surface-1, var(--surface)); border:1px solid var(--app-border-1, var(--border)); border-radius:var(--app-r-md, 12px); padding:14px 16px; display:flex; flex-direction:column; gap:6px; min-width:0; position:relative; overflow:hidden; -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); box-shadow:var(--app-shadow-card, 0 8px 22px -16px rgba(0,0,0,0.5)); transition:transform .16s ease, border-color .16s ease; } .detail-c.aggr-detail .aggr-stat-card:hover{ border-color:var(--app-border-1, var(--border2)); transform:translateY(-1px); } .detail-c.aggr-detail .aggr-stat-ico{ display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--app-text-muted, var(--muted)); } .detail-c.aggr-detail .aggr-stat-tag{ font-size:9px; font-weight:400; text-transform:none; letter-spacing:0; margin-left:4px; } .detail-c.aggr-detail .aggr-stat-refresh{ margin-left:auto; padding:0 6px; font-size:11px; line-height:1.4; border:0; color:var(--app-text-muted, var(--muted)); } .detail-c.aggr-detail .aggr-stat-val{ font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--app-text, var(--text)); word-break:break-word; } .detail-c.aggr-detail .aggr-stat-sub{ font-size:11px; color:var(--app-text-muted, var(--muted)); } /* animated progress bar (Sparkline-like) */ .detail-c.aggr-detail .aggr-stat-bar{ height:5px; background:rgba(255,255,255,0.05); border-radius:4px; overflow:hidden; margin-top:auto; position:relative; } .detail-c.aggr-detail .aggr-stat-bar > i{ display:block; height:100%; background:var(--app-accent, var(--primary)); border-radius:4px; transition:width .35s cubic-bezier(.22,.94,.42,1); box-shadow:0 0 8px var(--app-accent-glow, rgba(124,92,240,0.30)); } .detail-c.aggr-detail .aggr-stat-net-rows{ display:flex; flex-direction:column; gap:4px; margin-top:2px; } .detail-c.aggr-detail .aggr-stat-net-row{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; font-size:13px; } .detail-c.aggr-detail .aggr-stat-net-row b{ font-weight:700; color:var(--app-text, var(--text)); } /* GAME-KOMPAKT-LEISTE 2026-06-26 — Chips/Pills in EINER umbrechenden Zeile statt grosser Einzelkarten. Konsole rueckt nach oben (auch im kleinen Fenster ohne grosses Scrollen). */ .detail-c.aggr-detail .aggr-chipbar{ display:flex !important; flex-wrap:wrap; align-items:stretch; gap:8px !important; padding:0 !important; margin:0 4px !important; background:transparent !important; border:0 !important; box-shadow:none !important; } .detail-c.aggr-detail .aggr-chip{ display:flex; align-items:baseline; gap:6px; padding:7px 12px; min-height:34px; background:var(--app-surface-1, var(--surface)); border:1px solid var(--app-border-1, var(--border)); border-radius:999px; box-shadow:var(--app-shadow-card, 0 6px 16px -14px rgba(0,0,0,0.5)); -webkit-backdrop-filter:blur(10px) saturate(140%); backdrop-filter:blur(10px) saturate(140%); white-space:nowrap; transition:border-color .16s ease, transform .16s ease; } .detail-c.aggr-detail .aggr-chip:hover{ border-color:var(--app-border-1, var(--border2)); transform:translateY(-1px); } .detail-c.aggr-detail .aggr-chip .aggr-chip-ic{ font-size:13px; line-height:1; align-self:center; } .detail-c.aggr-detail .aggr-chip .aggr-health-dot{ align-self:center; } .detail-c.aggr-detail .aggr-chip .aggr-chip-k{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--app-text-muted, var(--muted)); } .detail-c.aggr-detail .aggr-chip .aggr-chip-v{ font-size:14px; font-weight:800; letter-spacing:-.01em; color:var(--app-text, var(--text)); } .detail-c.aggr-detail .aggr-chip .aggr-chip-sub{ font-size:11px; font-weight:600; color:var(--app-text-muted, var(--muted)); } .detail-c.aggr-detail .aggr-chip .aggr-chip-tag{ font-size:9px; font-weight:400; text-transform:none; letter-spacing:0; } .detail-c.aggr-detail .aggr-chip-java{ border-color:rgba(255,180,67,.32); } /* Grosses Fenster: etwas luftiger, bleibt aber kompakte Pill-Leiste (keine Riesenkarten). */ @media (min-width:1200px){ .detail-c.aggr-detail .aggr-chipbar{ gap:10px !important; } .detail-c.aggr-detail .aggr-chip{ padding:8px 15px; min-height:38px; } .detail-c.aggr-detail .aggr-chip .aggr-chip-v{ font-size:15px; } } /* KOMPAKT-LEISTE responsive: bei niedrigen/schmalen Fenstern Chips schrumpfen, damit die Konsole oberhalb des Folds bleibt (analog zur frueheren Karten-Kompaktierung). */ @media (max-height: 740px){ .detail-c.aggr-detail .aggr-chip{ padding:5px 10px; min-height:30px; gap:5px; } .detail-c.aggr-detail .aggr-chip .aggr-chip-v{ font-size:13px; } .detail-c.aggr-detail .aggr-chipbar{ gap:6px !important; } } @media (max-height: 640px){ .detail-c.aggr-detail .aggr-chip{ padding:4px 9px; min-height:27px; } .detail-c.aggr-detail .aggr-chip .aggr-chip-sub{ display:none; } } /* schmal: bei wenig Breite die Sekundaer-Werte weg, damit mehr Chips pro Zeile passen. */ @media (max-width: 820px){ .detail-c.aggr-detail .aggr-chip .aggr-chip-sub{ display:none; } .detail-c.aggr-detail .aggr-chip{ padding:5px 10px; } } @media (max-width: 640px){ .detail-c.aggr-detail .aggr-chip .aggr-chip-k{ display:none; } .detail-c.aggr-detail .aggr-chip{ padding:4px 9px; gap:4px; } .detail-c.aggr-detail .aggr-chipbar{ gap:5px !important; } } /* v5.10-AGGR-DETAIL — Server-Address card: prominent gradient surface for game-servers */ .detail-c.aggr-detail .aggr-srv-addr{ margin:0 4px !important; padding:16px 20px !important; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0; background: linear-gradient(135deg, rgba(127,168,255,0.10) 0%, var(--app-surface-1, rgba(20,26,42,0.7)) 60%) !important; border:1px solid rgba(127,168,255,0.22) !important; border-radius:var(--app-r-md, 12px) !important; position:relative; overflow:hidden; } /* mittig geteilt: vertikaler Trenner + symmetrische Innenabstände */ .detail-c.aggr-detail .aggr-srv-addr-left{ padding-right:22px; } .detail-c.aggr-detail .aggr-srv-addr-right{ padding-left:22px; border-left:1px solid rgba(127,168,255,0.18); } .detail-c.aggr-detail .aggr-srv-addr::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 100% 0%, rgba(127,168,255,0.14) 0%, transparent 50%); } .detail-c.aggr-detail .aggr-srv-addr-left, .detail-c.aggr-detail .aggr-srv-addr-right{ position:relative; z-index:1; min-width:0; } .detail-c.aggr-detail .aggr-srv-addr-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--app-text-muted, var(--muted)); margin-bottom:6px; } .detail-c.aggr-detail .aggr-srv-addr-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .detail-c.aggr-detail .aggr-srv-addr-val{ font-size:20px; font-weight:800; font-family:var(--mono); color:#7fa8ff; letter-spacing:-.01em; word-break:break-all; } .detail-c.aggr-detail .aggr-srv-addr-copy{ padding:6px 12px !important; font-size:11.5px !important; border-radius:8px !important; } /* klickbarer Adress-Text (ersetzt den Kopieren-Button) */ .detail-c.aggr-detail .aggr-srv-addr-val-copy{ cursor:pointer; display:inline-flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:3px 6px; margin:-3px -6px; border-radius:8px; transition:background .12s ease, color .12s ease; outline:none; } .detail-c.aggr-detail .aggr-srv-addr-val-copy:hover, .detail-c.aggr-detail .aggr-srv-addr-val-copy:focus-visible{ background:rgba(127,168,255,0.12); color:#a9c4ff; } .detail-c.aggr-detail .aggr-srv-addr-copyhint{ font-size:10.5px; font-weight:600; font-family:var(--app-font, inherit); color:var(--app-text-muted, var(--muted)); opacity:.7; letter-spacing:0; white-space:nowrap; } .detail-c.aggr-detail .aggr-srv-addr-val-copy:hover .aggr-srv-addr-copyhint{ opacity:1; } .detail-c.aggr-detail .aggr-srv-addr-actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; } .detail-c.aggr-detail .aggr-srv-addr-avatar{ width:18px; height:18px; border-radius:4px; image-rendering:pixelated; flex-shrink:0; background:rgba(255,255,255,.06); } .detail-c.aggr-detail .aggr-srv-addr-more{ margin-left:0 !important; font-size:11.5px !important; font-weight:700 !important; padding:4px 12px !important; background:rgba(127,168,255,.20) !important; color:#bcd0ff !important; border:1px solid rgba(127,168,255,.30) !important; border-radius:999px !important; cursor:pointer; display:inline-flex !important; align-items:center !important; } .detail-c.aggr-detail .aggr-srv-addr-more:hover{ background:rgba(127,168,255,.32) !important; } .detail-c.aggr-detail .aggr-srv-addr-count{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; padding:1px 7px; border-radius:999px; background:var(--app-accent-soft, rgba(124,92,240,0.18)); color:var(--app-accent, #9bbcff); font-size:11px; font-weight:800; font-family:var(--mono); margin-left:4px; } .detail-c.aggr-detail .aggr-srv-addr-players{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; } .detail-c.aggr-detail .aggr-srv-addr-player{ margin-left:0 !important; font-size:12px !important; padding:4px 10px !important; background:rgba(56,123,255,.16) !important; color:#9bbcff !important; display:inline-flex !important; align-items:center !important; gap:6px !important; border-radius:999px !important; } .detail-c.aggr-detail .aggr-srv-addr-kick, .detail-c.aggr-detail .aggr-srv-addr-ban{ padding:0 5px !important; font-size:10px !important; line-height:1 !important; } .detail-c.aggr-detail .aggr-srv-addr-ban{ color:var(--app-danger, var(--danger)) !important; } .detail-c.aggr-detail .aggr-srv-addr-empty{ font-size:12px; margin-top:4px; } /* v5.10-AGGR-DETAIL — Shell switch: stack tab-pills above srv-main (was 2-col grid) */ .detail-c.aggr-detail > .bento.aggr-detail-bento > .srv-shell.aggr-srv-shell{ display:flex !important; flex-direction:column !important; grid-template-columns:none !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; gap:14px !important; align-items:stretch !important; } /* v5.10-AGGR-DETAIL — Horizontal pill tab-nav (replaces vertical sidebar) */ .detail-c.aggr-detail .srv-nav.aggr-tab-pills{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; gap:6px !important; position:sticky !important; top:0 !important; align-self:stretch !important; height:auto !important; max-height:none !important; overflow-y:visible !important; padding:8px 10px !important; background:var(--app-surface-0, rgba(15,20,35,0.5)); border:1px solid var(--app-border-0, rgba(255,255,255,0.07)); border-radius:var(--app-r-md, 12px); -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%); z-index:4; } .detail-c.aggr-detail .srv-nav.aggr-tab-pills .btn{ width:auto !important; flex:0 0 auto; padding:8px 14px !important; font-size:12.5px !important; border-radius:999px !important; border:1px solid transparent !important; background:transparent !important; color:var(--app-text-muted, var(--muted)) !important; font-weight:600 !important; white-space:nowrap; transition:background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease; } .detail-c.aggr-detail .srv-nav.aggr-tab-pills .btn:hover{ background:rgba(255,255,255,0.04) !important; color:var(--app-text, var(--text)) !important; } .detail-c.aggr-detail .srv-nav.aggr-tab-pills .btn[style*="primary"]{ background:rgba(99,102,241,.18) !important; border-color:var(--primary) !important; color:#fff !important; box-shadow:0 0 12px rgba(99,102,241,.35) !important; } .detail-c.aggr-detail .srv-nav.aggr-tab-pills .btn[style*="danger"]{ background:rgba(255,90,114,.10) !important; border-color:var(--app-danger, var(--danger)) !important; } .detail-c.aggr-detail .srv-nav.aggr-tab-pills .tab-divider{ width:1px;height:26px;background:var(--border);margin:5px 3px;align-self:center;display:inline-block; } /* v5.10-AGGR-DETAIL — srv-main full-width below tab-pills */ .detail-c.aggr-detail .srv-main{ align-self:stretch !important; width:100% !important; height:auto !important; max-height:none !important; overflow-y:auto; overflow-x:hidden; min-height:0; padding:0 6px 0 0; } /* v5.10-AGGR-DETAIL — dash-grid: invert layout — stats COMPLETE ON TOP, console below */ .detail-c.aggr-detail .dash-grid{ display:flex !important; flex-direction:column !important; grid-template-columns:none !important; gap:14px !important; height:auto !important; min-height:0 !important; } .detail-c.aggr-detail .dash-stats-col{ overflow:visible !important; min-height:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; } .detail-c.aggr-detail .dash-stats-col .dash-stat-cards{ grid-column:1 / -1; grid-template-columns:1fr 1fr; } .detail-c.aggr-detail .dash-console-col{ min-height:0 !important; flex:1 1 auto !important; } .detail-c.aggr-detail .dash-console-col > .card{ flex:1 1 auto !important; min-height:0 !important; display:flex; flex-direction:column; } .detail-c.aggr-detail .dash-console-col #gamelogbox{ flex:1 1 auto !important; height:auto !important; min-height:200px !important; max-height:none !important; overflow-y:auto !important; } /* v5.10-AGGR-DETAIL — Responsive: collapse hero on narrow screens */ @media (max-width: 880px){ .detail-c.aggr-detail .page-head.aggr-hero{ flex-direction:column !important; align-items:flex-start !important; padding:14px 16px; } .detail-c.aggr-detail .aggr-hero-actions{ width:100%; justify-content:flex-end; flex-wrap:wrap; } .detail-c.aggr-detail .aggr-hero-thumb{ width:64px !important; height:64px !important; font-size:22px !important; } .detail-c.aggr-detail .aggr-hero-title{ font-size:24px !important; } .detail-c.aggr-detail .aggr-hero-switch{ font-size:24px; } .detail-c.aggr-detail .aggr-stats-row{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } .detail-c.aggr-detail .aggr-srv-addr{ grid-template-columns:1fr !important; } .detail-c.aggr-detail .aggr-srv-addr-left{ padding-right:0 !important; padding-bottom:14px; } .detail-c.aggr-detail .aggr-srv-addr-right{ padding-left:0 !important; border-left:none !important; border-top:1px solid rgba(127,168,255,0.18); padding-top:14px; } } @media (max-width: 560px){ .detail-c.aggr-detail .aggr-stats-row{ grid-template-columns:1fr !important; } } /* v5.10-AGGR-DETAIL — Reduced motion: kill animations + lift */ @media (prefers-reduced-motion: reduce){ .detail-c.aggr-detail .aggr-stat-card, .detail-c.aggr-detail .aggr-act, .detail-c.aggr-detail .aggr-hero-back, .detail-c.aggr-detail .srv-nav.aggr-tab-pills .btn{ transition:none !important; } .detail-c.aggr-detail .aggr-stat-card:hover, .detail-c.aggr-detail .aggr-act:hover, .detail-c.aggr-detail .aggr-hero-back:hover{ transform:none !important; } .detail-c.aggr-detail .aggr-stat-bar > i{ transition:none !important; } } /* ================================================================ v5.10-AGGR-DASHBOARD — Linear/Notion-style Dashboard restructure ---------------------------------------------------------------- - Big hero with gradient title + multi-button action row - 4-stat grid with sparkline-bar below value - 2x2 quick-access cards (Bridge-Rechte/Übersicht/Backup/Anfragen) - Recent-active container rows with game-icon thumbnail - End-user product cards with game thumbnail + status badge ================================================================ */ /* v5.10-AGGR-DASHBOARD — Section heads */ .ctrl-page .aggr-dash-section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 2px 12px; } .ctrl-page .aggr-dash-section-title{ margin:0; font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--app-text); display:inline-flex; align-items:center; gap:8px; } .ctrl-page .aggr-dash-section-hint{ font-size:12px; color:var(--app-text-muted); font-weight:500; } .ctrl-page .aggr-dash-section-link{ font-size:12.5px; color:var(--app-accent); text-decoration:none; font-weight:600; } .ctrl-page .aggr-dash-section-link:hover{ text-decoration:underline; } .ctrl-page .aggr-dash-section-btn{ padding:6px 12px; border-radius:var(--app-r-sm); border:1px solid var(--app-border-1); background:var(--app-surface-0); color:var(--app-text); font-size:12.5px; cursor:pointer; transition:border-color .14s ease, background .14s ease; } .ctrl-page .aggr-dash-section-btn:hover{ border-color:var(--app-accent); background:var(--app-accent-soft); } /* v5.10-AGGR-DASHBOARD — Stats Grid (4 cards) */ .ctrl-page .aggr-dash-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:24px; } .ctrl-page .aggr-dash-statcard{ position:relative; display:flex; flex-direction:column; gap:10px; padding:18px 18px 16px; border-radius:var(--app-r-md); border:1px solid var(--app-border-1); background:var(--app-surface-0); -webkit-backdrop-filter:var(--app-blur); backdrop-filter:var(--app-blur); box-shadow:var(--app-shadow-card); cursor:pointer; overflow:hidden; transition:transform .16s ease, border-color .16s ease, background .16s ease; isolation:isolate; } .ctrl-page .aggr-dash-statcard::before{ content:''; position:absolute; inset:auto -20% -50% auto; width:220px; height:220px; background:radial-gradient(circle, var(--app-accent-soft) 0%, transparent 70%); pointer-events:none; z-index:0; opacity:.6; } .ctrl-page .aggr-dash-statcard-cpu::before{ background:radial-gradient(circle, rgba(255,180,67,.22) 0%, transparent 70%); } .ctrl-page .aggr-dash-statcard-ram::before{ background:radial-gradient(circle, rgba(124,92,240,.22) 0%, transparent 70%); } .ctrl-page .aggr-dash-statcard-disk::before{ background:radial-gradient(circle, rgba(52,226,155,.22) 0%, transparent 70%); } .ctrl-page .aggr-dash-statcard-up::before{ background:radial-gradient(circle, rgba(167,139,250,.22) 0%, transparent 70%); } .ctrl-page .aggr-dash-statcard:hover{ transform:translateY(-2px); border-color:var(--app-accent); } .ctrl-page .aggr-dash-statcard > *{ position:relative; z-index:1; } .ctrl-page .aggr-dash-statcard-head{ display:flex; align-items:center; gap:9px; } .ctrl-page .aggr-dash-statcard-glyph{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:var(--app-r-sm); background:var(--app-accent-soft); font-size:15px; } .ctrl-page .aggr-dash-statcard-label{ font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--app-text-muted); text-transform:uppercase; } .ctrl-page .aggr-dash-statcard-value{ font-size:34px; line-height:1; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--app-text); } .ctrl-page .aggr-dash-statcard-value-text{ font-size:22px; font-weight:700; } .ctrl-page .aggr-dash-statcard-unit{ font-size:18px; font-weight:600; opacity:.6; margin-left:2px; } .ctrl-page .aggr-dash-statcard-spark{ height:6px; border-radius:99px; background:var(--app-border-0); overflow:hidden; position:relative; } .ctrl-page .aggr-dash-statcard-spark-fill{ height:100%; border-radius:99px; background:var(--app-accent); transition:width .5s cubic-bezier(.22,1,.36,1); box-shadow:0 0 12px var(--app-accent-glow); } .ctrl-page .aggr-dash-statcard-spark-fill-fluid{ width:100%; background:linear-gradient(90deg, transparent 0%, var(--app-accent) 50%, transparent 100%); background-size:200% 100%; animation:aggrDashSparkSlide 2.4s ease-in-out infinite; } @keyframes aggrDashSparkSlide{ 0%{ background-position:200% 0; } 100%{ background-position:-100% 0; } } .ctrl-page .aggr-dash-statcard-foot{ font-size:11.5px; color:var(--app-text-muted); margin-top:-2px; } /* v5.10-AGGR-DASHBOARD — Server-Nodes wrapper */ .ctrl-page .aggr-dash-nodes{ margin-bottom:24px; } .ctrl-page .aggr-dash-nodes-bento{ margin-top:0; gap:14px; } .ctrl-page .aggr-dash-user-group{ margin-bottom:22px; } /* v5.10-AGGR-DASHBOARD — Responsive */ @media (max-width: 1100px){ .ctrl-page .aggr-dash-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 760px){ .ctrl-page .aggr-dash-stats{ grid-template-columns:1fr; } } /* v5.10-AGGR-DASHBOARD — Reduced motion */ @media (prefers-reduced-motion: reduce){ .ctrl-page .aggr-dash-statcard-spark-fill-fluid{ animation:none !important; } .ctrl-page .aggr-dash-statcard:hover{ transform:none !important; } } /* v5.10-AGGR-MODALS — Modal-Pattern: Admin-Sub-Pages (mcperms / audit / requests / users) Dashboard-Quick-Cards triggern Page-Switch + Smooth-Scroll. Sub-Pages bekommen Back-Bar die wie ein Modal-Header aussieht. Slide-in-Anim auf Page-Switch. */ .aggr-modal-backbar{ display:flex;align-items:center;gap:14px; margin:0 0 18px;padding:10px 14px; border:1px solid var(--border);border-radius:14px; background:linear-gradient(135deg,rgba(77,159,255,.06),rgba(160,107,255,.06)); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); position:sticky;top:14px;z-index:30; animation:aggr-modal-slidein .26s cubic-bezier(.22,1,.36,1); } .aggr-modal-back{ display:inline-flex;align-items:center;gap:8px; padding:7px 14px 7px 11px; border:1px solid var(--border);border-radius:10px; background:rgba(255,255,255,.04);color:var(--text); font-weight:600;font-size:13.5px;cursor:pointer; transition:.16s ease; } .aggr-modal-back:hover{ background:var(--grad-soft); border-color:var(--border2); transform:translateX(-2px); box-shadow:0 8px 22px -10px rgba(90,110,255,.5); } .aggr-modal-back-arrow{ font-size:16px;line-height:1;color:var(--primary); transition:transform .16s ease; } .aggr-modal-back:hover .aggr-modal-back-arrow{transform:translateX(-3px)} .aggr-modal-crumb{ flex:1;color:var(--muted);font-weight:600;font-size:13px; letter-spacing:.02em;text-transform:uppercase; display:flex;align-items:center;gap:8px; } .aggr-modal-crumb::before{ content:'';width:4px;height:4px;border-radius:50%; background:var(--primary);box-shadow:0 0 8px var(--primary); } /* Slide-in animation for modal-style page entry */ @keyframes aggr-modal-slidein{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .aggr-modal-backbar{animation:none} .aggr-modal-back:hover{transform:none} .aggr-modal-back:hover .aggr-modal-back-arrow{transform:none} } /* v5.10-FIX-CONSOLE — Konsole als FESTE scrollbare Box (wuchs vorher unbegrenzt mit Log-Inhalt -> Nav-Sidebar 5400px hoch). Deckelt die Konsole, damit Seite + Tab-Leiste normal hoch bleiben und alle Tabs sichtbar/wählbar sind. */ .detail-c #gamelogbox, .detail-c #logbox, .detail-c .dash-console-col #gamelogbox, .detail-c .dash-console-col #logbox{ height:40vh !important; min-height:240px !important; max-height:42vh !important; overflow-y:auto !important; flex:0 0 auto !important; } /* Konsolen-Spalte selbst nicht endlos wachsen lassen */ .detail-c .dash-console-col{ flex:0 0 auto !important; min-height:0 !important; max-height:48vh !important; overflow:hidden !important; } /* Tab-Nav HORIZONTAL oben (Pills) statt leerer vertikaler Sidebar — srv-shell wird Flex-Spalte: Nav oben, Content darunter */ .detail-c .srv-shell{ display:flex !important; flex-direction:column !important; grid-template-columns:none !important; gap:10px !important; align-items:stretch !important; } .detail-c .srv-nav{ flex-direction:row !important; flex-wrap:wrap !important; width:100% !important; height:auto !important; max-height:none !important; min-height:0 !important; align-self:stretch !important; position:static !important; overflow:visible !important; gap:6px !important; flex:0 0 auto !important; justify-content:flex-start !important; } .detail-c .srv-nav .btn{ width:auto !important; flex:0 0 auto !important; justify-content:center !important; } .detail-c .srv-main{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; } /* v5.10-FIX-DASHDEDUP — Netzwerk/Speicher/Status-Karten aus Dashboard-Tab entfernt, Konsole voll breit */ .detail-c .dash-grid{ grid-template-columns:1fr !important; } /* ============================================================ v5.10-RESPONSIVE-POLISH — durchgängige Anpassung Handy/Tablet/iPad ============================================================ */ /* kein horizontales Scrollen, alles passt in den Viewport */ .shell .gmain > .content{ max-width:100%; } .shell .gmain > .content *{ max-width:100%; } /* Tablet / kleines Laptop (≤960px) */ @media (max-width: 960px){ .gmain > .gtop{ flex-wrap:wrap !important; row-gap:8px !important; padding:10px 14px !important; } .ctrl-page .aggr-dash-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .detail-c.aggr-detail .page-head.aggr-hero{ flex-wrap:wrap !important; gap:12px !important; } .detail-c.aggr-detail .aggr-hero-actions{ width:100%; justify-content:flex-start !important; flex-wrap:wrap; } .ctr-card-grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important; } } /* Handy (≤600px) */ @media (max-width: 600px){ .shell .gmain > .content{ padding:10px 10px 28px !important; } .ctrl-page .aggr-dash-stats{ grid-template-columns:1fr !important; } .ctr-card-grid, .gamegrid, .modgrid{ grid-template-columns:1fr !important; } /* Create-Picker etwas kompakter aber lesbar */ #app .gamegrid, .cc-cards{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)) !important; } /* Detail-Hero: Thumbnail + Titel klein, Name umbricht */ .detail-c.aggr-detail .aggr-hero-thumb.xl{ width:52px !important; height:52px !important; } .detail-c.aggr-detail .aggr-hero-switch{ font-size:20px !important; } /* Modal-Karten füllen den Screen */ .gmodal-ov .card{ width:96vw !important; } /* Grid-Doppelspalten in Modals -> einspaltig (Name/Version, RAM/CPU/Disk) */ .field > div[style*="grid-template-columns"]{ grid-template-columns:1fr !important; } /* Tab-Pills scrollbar statt umbrechen-Chaos */ .detail-c .srv-nav{ overflow-x:auto !important; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch; } .detail-c .srv-nav .btn{ flex:0 0 auto !important; white-space:nowrap; } /* Topbar: User-Vorschau-Select + Admin-Label sparsamer */ .aggr-top-select{ max-width:120px; } } /* sehr kleine Handys (≤400px) */ @media (max-width: 400px){ .detail-c.aggr-detail .aggr-stat-card{ padding:10px !important; } .aggr-admin-pill-label{ display:none; } } /* v5.10-RESPONSIVE-SHELL — Shell auf Mobile einspaltig (Content voll), Sidebar als Off-Canvas-Overlay. Überschreibt die spätere .shell{display:grid;...}-Regel die die alte 880px-Query aushebelte. */ @media (max-width: 960px){ .shell{ display:block !important; grid-template-columns:1fr !important; height:auto !important; min-height:100vh !important; overflow:visible !important; } .shell .gmain{ width:100% !important; height:100vh !important; } .shell .gside{ position:fixed !important; left:0 !important; top:0 !important; bottom:0 !important; width:252px !important; max-width:84vw !important; z-index:120 !important; transform:translateX(-105%) !important; transition:transform .22s ease !important; box-shadow:0 0 40px rgba(0,0,0,.6); } .shell.gside-mobile-open .gside{ transform:translateX(0) !important; } .shell.gside-collapsed .gside{ width:252px !important; } /* auf Mobile nie collapsed-schmal */ .gside-toggle{ display:none !important; } /* Collapse-Pfeil auf Mobile aus, Hamburger reicht */ } /* v5.10-PRICE — Geschätzte Kosten im Create-Dialog */ .cc-price-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 16px;border-radius:12px;background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(16,185,129,.12));border:1px solid rgba(99,102,241,.28)} .cc-price-lbl{font-size:12.5px;font-weight:600;letter-spacing:.2px;opacity:.85} .cc-price-val{font-size:21px;font-weight:800;color:var(--text,#fff);line-height:1} .cc-price-val small{font-size:12px;font-weight:600;opacity:.7;margin-left:2px} /* v5.10-VPS-CONSOLE — Terminal (Linux) + Remote-Desktop (Windows) */ /* xterm.js-Container: feste Größe, xterm rendert intern (Canvas + Farben) */ .vps-term-box{background:#0a0e14;border-radius:10px;border:1px solid var(--border);height:58vh;max-height:62vh;overflow:hidden;margin:0;padding:8px 6px 8px 10px;position:relative} .vps-term-box .xterm{height:100%;padding:0} .vps-term-box .xterm-viewport{overflow-y:auto!important;border-radius:8px} .vps-term-box .xterm-viewport::-webkit-scrollbar{width:8px} .vps-term-box .xterm-viewport::-webkit-scrollbar-thumb{background:var(--border2,#2a3350);border-radius:4px} .vps-term-status.st-open{color:#34d399;border-color:rgba(52,211,153,.4)!important} .vps-term-status.st-error,.vps-term-status.st-failed{color:var(--danger);border-color:rgba(239,68,68,.4)!important} .vps-rdp-box{background:#000;border-radius:10px;border:1px solid var(--border);width:100%;height:62vh;max-height:66vh;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center} /* Konsole-Tab (Guacamole VNC) füllt den ganzen Bereich; Canvas wird per JS skaliert (zentriert) */ .detail-c .tab-screen{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; } .detail-c .tab-screen .vps-screen-box{ flex:1 1 auto; min-height:300px; max-height:none; } .vps-screen-box{width:100%;border:1px solid var(--border);border-radius:10px;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;outline:none} .vps-screen-box canvas{display:block} .vps-rdp-status.st-on{color:#34d399;border-color:rgba(52,211,153,.4)!important} @media(max-width:600px){.detail-c .tab-screen .vps-screen-box{min-height:240px}} .vps-rdp-box canvas{max-width:100%;max-height:100%;display:block} .vps-rdp-box:empty::after{content:'Nicht verbunden — „▶ Verbinden" klicken.';color:#667085;font-size:13px} @media(max-width:600px){.vps-term-box{height:52vh;font-size:12px}.vps-rdp-box{height:54vh}} /* v5.10-MODS-SCROLL-FIX — Mods-Grid darf NICHT mehr eigener Scroll-Container sein. Vorher: .detail-c .tab-mods .modgrid{max-height:52vh;overflow:auto} → verschachtelter Scroll im ohnehin scrollenden .srv-main ("haut nicht hin"). Jetzt: Grid fließt voll, nur .srv-main scrollt = eine saubere Scroll-Ebene über die ganze Mods-Liste. */ .detail-c .tab-mods .modgrid, .detail-c .tab-mods .tm-results-section .modgrid{ max-height:none !important; overflow:visible !important; padding-right:2px !important; } /* Sicherstellen, dass der Mods-Tab selbst nicht clippt und die Seite die volle Höhe scrollen kann */ .detail-c .tab-mods{ overflow:visible !important; min-height:0 !important; } .detail-c .tab-mods .tm-results-section{ overflow:visible !important; } /* ============================================================ v5.10-CONSOLE-FLEX (FINAL) — Konsole VARIABEL: füllt per Flex exakt den verbleibenden Fensterplatz (wächst/schrumpft mit dem Fenster), KEIN fixes px. Flex-Kette: .srv-main → .srv-tab-game → .tab-dash → .dash-grid → .dash-console-col → .card → #gamelogbox. .srv-tab-game (Klasse am Game-Tab-Wrapper) wird nur sichtbar via display:flex (ohne !important), damit v-show:none der anderen Tabs NICHT übersteuert wird. ============================================================ */ /* Der Wrapper .detail-sticky-top enthält Hero+Stats+Adresse+srv-shell und war flex:0 0 auto (content-groß 1266px) → Kette gebrochen. Jetzt bounded Flex-Column, füllt .detail-c. */ .detail-c .detail-sticky-top{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0 !important; overflow:hidden !important; } .detail-c .detail-sticky-top > .srv-shell{ flex:1 1 auto !important; min-height:0 !important; } .detail-c .srv-main{ display:flex !important; flex-direction:column !important; } .detail-c .srv-tab-game{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; } .detail-c .srv-tab-game .tab-dash{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0 !important; height:auto !important; } .detail-c .srv-tab-game .dash-grid{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0 !important; height:auto !important; overflow:visible !important; } .detail-c .srv-tab-game .dash-console-col{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0 !important; max-height:none !important; } .detail-c .srv-tab-game .dash-console-col > .card{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0 !important; } .detail-c #gamelogbox, .detail-c .srv-tab-game #gamelogbox, .detail-c .dash-console-col #gamelogbox{ flex:1 1 auto !important; height:auto !important; min-height:120px !important; max-height:none !important; overflow-y:auto !important; } /* ============================================================ v5.10-DETAIL-COMPACT — kleine/niedrige Fenster: UI komprimieren, damit die Konsole IMMER etwas Nützliches zeigt (statt zu verschwinden). Höhen-Media-Queries: flachere Stat-Karten + Adresse + nutzbare Konsolen-Min-Höhe. ============================================================ */ @media (max-height: 880px){ .detail-c.aggr-detail .detail-sticky-top{ gap:8px !important; } .detail-c.aggr-detail .aggr-stat-card{ padding:8px 13px !important; gap:3px !important; } .detail-c.aggr-detail .aggr-stat-val{ font-size:18px !important; line-height:1.12 !important; } .detail-c.aggr-detail .aggr-srv-addr{ padding:9px 14px !important; gap:10px !important; } .detail-c #gamelogbox, .detail-c .srv-tab-game #gamelogbox{ min-height:200px !important; } } @media (max-height: 740px){ .detail-c.aggr-detail .detail-sticky-top{ gap:6px !important; } .detail-c.aggr-detail .aggr-stat-card{ padding:6px 11px !important; gap:2px !important; } .detail-c.aggr-detail .aggr-stat-ico{ font-size:10.5px !important; } .detail-c.aggr-detail .aggr-stat-val{ font-size:16px !important; } .detail-c.aggr-detail .aggr-srv-addr{ padding:7px 12px !important; gap:8px !important; } .detail-c.aggr-detail .aggr-srv-addr-left{ gap:6px !important; } .detail-c #gamelogbox, .detail-c .srv-tab-game #gamelogbox{ min-height:185px !important; } } /* ============================================================ v5.10-SMALLWIN-FIT — sehr niedrige Fenster: Konsole etwas kleiner, damit ALLES ohne Scroll/Leerraum reinpasst (statt zu clippen). Bleibt nutzbar (~9-10 Zeilen). Die hohe Spezifität (.detail-c.aggr-detail .dash-console-col #gamelogbox) ist nötig, sonst gewinnt die min-height:200px-Regel. ============================================================ */ @media (max-height: 700px){ .detail-c.aggr-detail .detail-sticky-top{ gap:5px !important; } .detail-c.aggr-detail .aggr-stat-card{ padding:5px 10px !important; } .detail-c.aggr-detail .aggr-srv-addr{ padding:6px 12px !important; } .detail-c.aggr-detail .dash-console-col #gamelogbox, .detail-c .srv-tab-game #gamelogbox{ min-height:150px !important; } } @media (max-height: 600px){ .detail-c.aggr-detail .dash-console-col #gamelogbox, .detail-c .srv-tab-game #gamelogbox{ min-height:120px !important; } } /* v6.14 Dashboard Breakdown-Karten (Netzwerk + Disk pro Container) */ .aggr-bd-card{ background:var(--card,#0e1424); border:1px solid var(--border,#1d2740); border-radius:16px; padding:16px 18px; } .aggr-bd-card .aggr-dash-section-head{ margin-bottom:12px; } .aggr-bd-list{ display:flex; flex-direction:column; gap:9px; } .aggr-bd-row{ display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:10px; font-size:12.5px; } .aggr-bd-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text,#e6ecff); font-weight:600; } .aggr-bd-bar{ height:8px; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden; } .aggr-bd-bar-fill{ display:block; height:100%; border-radius:6px; transition:width .4s ease; } .aggr-bd-bar-fill-net{ background:linear-gradient(90deg,#3b82f6,#22d3ee); } .aggr-bd-bar-fill-disk{ background:linear-gradient(90deg,#a855f7,#ec4899); } .aggr-bd-val{ text-align:right; white-space:nowrap; color:var(--text,#e6ecff); } .aggr-bd-val b{ font-weight:700; } .aggr-bd-sub{ color:var(--muted,#8b98b8); font-size:10.5px; margin-left:4px; } /* v6.14 📦 Modpack-Tab (Split: Server live | Client-Modpack) */ .tab-modpack{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; } .mp-split{ display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:start; } @media (max-width:900px){ .mp-split{ grid-template-columns:1fr; } } .mp-side{ background:var(--card,#0e1424); border:1px solid var(--border,#1d2740); border-radius:14px; padding:16px 18px; } .mp-server{ position:sticky; top:0; } .mp-fullwidth{ width:100%; position:static; } .mp-flow{ margin-top:16px; padding:12px 14px; background:rgba(255,255,255,.03); border:1px dashed var(--border,#1d2740); border-radius:10px; font-size:12px; line-height:1.6; } .mp-cat{ border:1px solid var(--border,#1d2740); border-radius:12px; padding:12px 14px; margin-bottom:12px; background:rgba(255,255,255,.015); } .mp-cat-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; } .mp-cat-title{ font-weight:600; font-size:13.5px; color:var(--text,#e6ecff); } .mp-up{ padding:4px 10px; font-size:12px; } .mp-cat-list{ display:flex; flex-direction:column; gap:6px; } .mp-file{ display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,.025); font-size:12.5px; } .mp-file:hover{ background:rgba(255,255,255,.05); } .mp-file-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text,#e6ecff); font-family:var(--mono); } .mp-file-size{ font-size:11.5px; white-space:nowrap; } .mp-file-del{ padding:3px 8px; color:var(--danger,#ef4444); } .mp-empty{ font-size:12px; padding:6px 2px; } /* v6.14 Mod-Updates im Modpack-Tab */ .mp-updates{ margin-top:16px; padding:12px 14px; background:rgba(255,255,255,.03); border:1px solid var(--border,#1d2740); border-radius:10px; } .mp-upd-list{ display:flex; flex-direction:column; gap:4px; margin-top:8px; max-height:220px; overflow:auto; } .mp-upd-row{ display:flex; align-items:center; gap:8px; font-size:11px; padding:3px 6px; border-radius:6px; background:rgba(255,255,255,.02); } .mp-upd-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--mono); } .mp-upd-ver{ color:#34d399; white-space:nowrap; font-weight:600; } /* PERF v-perf1: Tab im Hintergrund (document.hidden, JS setzt body.np-bg-paused) → alle Dauer-Animationen pausieren. Spart Compositor-/GPU-Last bei nicht sichtbarem Tab. Reine Pause, kein Verhaltens-/Layout-Wechsel; bei Rueckkehr laufen sie sofort weiter. */ body.np-bg-paused *, body.np-bg-paused *::before, body.np-bg-paused *::after{ animation-play-state:paused !important; } /* PERF v-perf1: respektiere reduzierte Bewegung — grosse dauerhaft animierte Blur-Orbs anhalten. */ @media (prefers-reduced-motion: reduce){ .dash-page .dash-hero-wrap .dash-aurora{ animation:none !important; } } /* =================================================================== PAKET 5 — VENDORED SVG-ICON-SET (Lucide-derived, inline via ic()) Einheitliche Groesse/Stroke/Farbe. Icons erben currentColor vom Eltern-Element; explizite Box-Groesse, da inline-SVG sonst gross faellt. =================================================================== */ .gsv-ic{display:inline-block;width:1em;height:1em;vertical-align:-0.125em;color:currentColor;stroke:currentColor;flex:0 0 auto} /* Sidebar-Nav + Server-Tab-Icons: SVG ersetzt Emoji im .gi-Container. .gi steuert die Box; das SVG fuellt sie (1em == font-size des .gi). */ .gnav-i .gi .gsv-ic{width:18px;height:18px;vertical-align:middle} .gnav-i.aggr-nav-pill .gi .gsv-ic{width:18px;height:18px} .shell .gside.gside-glass .gnav-i .gi .gsv-ic{width:17px;height:17px} /* aktiver Zustand: kraeftigerer Strich fuer bessere Lesbarkeit */ .gnav-i.on .gi .gsv-ic{stroke-width:2.1} /* collapsed-Sidebar: Icon bleibt zentriert (Box ist schon zentriert) */ .shell.gside-collapsed .gnav-i .gi .gsv-ic{width:18px;height:18px} /* ===== PUNKT 2: FARBIGE SIDEBAR-/TAB-ICONS ===== ic() setzt pro Icon --ic-col + Klasse .gsv-ic-col. Hier wird die Farbe auf Stroke UND Fill (palette/list nutzen fill="currentColor") angewandt. Buttons ohne --ic-col bleiben currentColor. Lesbar auf dunklem BG: leicht gedaempft im Ruhezustand, volle Farbe + Glow im Hover/Active. */ .gsv-ic-col{ color: var(--ic-col); stroke: var(--ic-col); } .gsv-ic-col [fill="currentColor"], .gsv-ic-col circle[fill], .gsv-ic-col path[fill]{ fill: var(--ic-col); } /* Ruhezustand in der Sidebar: Farbe leicht zurueckgenommen, damit das Label fuehrt. */ .gnav-i .gi .gsv-ic-col{ opacity: .82; transition: opacity .16s ease, filter .16s ease; } .gnav-i:hover .gi .gsv-ic-col{ opacity: 1; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ic-col) 55%, transparent)); } /* Aktiver Tab: volle Farbe + farbiger Glow im eigenen Ton (statt generischem Accent). */ .gnav-i.on .gi .gsv-ic-col{ opacity: 1; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ic-col) 70%, transparent)); } /* Active-Indikatorleiste + Box-Glow nehmen den Icon-Ton auf, fuer konsistenten Active-State. */ .gnav-i.aggr-nav-pill.on:has(.gsv-ic-col){ border-color: color-mix(in srgb, var(--ic-col) 45%, var(--app-border-1)); } .gnav-i.aggr-nav-pill.on:has(.gsv-ic-col)::before{ background: var(--ic-col); } .shell .gside.gside-glass .gnav-i.on:has(.gsv-ic-col)::before{ background: var(--ic-col); box-shadow: 0 0 12px color-mix(in srgb, var(--ic-col) 60%, transparent); } /* der generische Accent-Drop-Shadow am .gi soll farbige Icons nicht ueberblenden */ .gnav-i.aggr-nav-pill .gi:has(.gsv-ic-col){ filter: none; } /* Gefahrenzone behaelt immer Rot, auch ohne Hover */ .aggr-srvctx-tab.aggr-srvctx-danger .gi .gsv-ic-col{ opacity: 1; } /* Primaer-/Aktions-Buttons (Start/Stop/Restart/Speichern): kleines Inline-Icon links vom Label, vertikal mittig zur Schrift. */ .btn-ic{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:0} .btn-ic .gsv-ic{width:15px;height:15px;vertical-align:middle} .btn .btn-ic{margin-right:1px} .btn.sm .btn-ic .gsv-ic{width:13px;height:13px} /* Spinner-State: wenn der Save-Span btn-spin animiert, dreht das Icon mit (rein kosmetisch ok) */ .btn-spin .btn-ic .gsv-ic{opacity:.8} /* ===== PAKET6: Toast-Stack (Queue, manuell schliessbar) + Upload-Overlay ===== */ .toaststack{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:10050;display:flex;flex-direction:column;gap:9px;align-items:center;max-width:92vw;pointer-events:none} .toaststack .toastbox{position:static;left:auto;bottom:auto;transform:none;margin:0;pointer-events:auto;max-width:min(92vw,520px)} .toaststack .toastbox .tmsg{flex:1;min-width:0;word-break:break-word} .toast-x{margin-left:6px;background:transparent;border:0;color:var(--app-text-muted,#9aa3c8);font-size:13px;line-height:1;cursor:pointer;padding:3px 5px;border-radius:7px;transition:.14s;flex:none} .toast-x:hover{color:var(--app-text,#fff);background:rgba(255,255,255,.08)} .toast-x:focus-visible{outline:2px solid var(--primary,#7c8bff);outline-offset:1px} .fmup-overlay{position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;background:rgba(4,7,20,.62);backdrop-filter:blur(3px)} .fmup-card{background:var(--surface,#161a2e);border:1px solid var(--border2,rgba(255,255,255,.1));border-radius:16px;padding:26px 30px;min-width:300px;max-width:90vw;text-align:center;box-shadow:0 30px 70px -25px rgba(0,0,0,.85)} .fmup-spin{width:34px;height:34px;margin:0 auto 14px;border-radius:50%;border:3px solid rgba(124,139,255,.25);border-top-color:var(--primary,#7c8bff);animation:gsv-btnspin .8s linear infinite} .fmup-title{font-weight:700;font-size:15.5px;color:var(--text,#fff);margin-bottom:4px} .fmup-sub{font-size:12.5px;margin-bottom:14px;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fmup-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden} .fmup-fill{height:100%;border-radius:6px;background:var(--grad,linear-gradient(135deg,#4d9fff,#a06bff));transition:width .2s ease} .shell .gmain > .content .xterm,.shell .gmain > .content .xterm *{max-width:none!important}.xterm-char-measure-element{max-width:none!important} /* Feature-Toggles: iOS-Stil Switch fuer den Features-Tab */ .gsv-switch{flex:0 0 auto;position:relative;width:46px;height:26px;border-radius:14px;border:1px solid var(--border2,rgba(255,255,255,.14));background:rgba(255,255,255,.08);cursor:pointer;padding:0;transition:background .16s,border-color .16s;outline:none} .gsv-switch:focus-visible{outline:2px solid var(--primary,#7c8bff);outline-offset:2px} .gsv-switch:disabled{opacity:.55;cursor:not-allowed} .gsv-switch .gsv-switch-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#cfd6f5;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .16s ease,background .16s} .gsv-switch.on{background:linear-gradient(135deg,#34d399,#22c55e);border-color:transparent} .gsv-switch.on .gsv-switch-knob{transform:translateX(20px);background:#fff} /* ===== PUNKT 1 — Einstellungen in zwei Gruppen (Benutzer/Konto + Admin/Betreiber) ===== */ .aggr-settings-grid.aggr-settings-grouped{display:flex;flex-direction:column;gap:14px} .aggr-settings-group{display:flex;flex-direction:column;gap:0} .aggr-settings-group + .aggr-settings-group{margin-top:4px;padding-top:10px;border-top:1px solid var(--app-border-0)} .settings-group-label{padding:0 4px 8px !important;font-size:11px !important;opacity:.78 !important;color:var(--app-accent,#7c8bff) !important} .aggr-settings-group-cards{display:flex;gap:8px;flex-wrap:wrap} /* ===== PUNKT 3 — Features-Zeilen-Icon == Sidebar-Tab-Icon (gleiches gefaerbtes SVG) ===== */ .tab-features .feat-row-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px} .tab-features .feat-row-ic .gsv-ic{width:21px;height:21px} /* ===== PUNKT 4/5 — SFTP-Button im Dateien-Tab ===== */ .detail-c .tab-files .tab-files-tree-head .tab-files-sftp{flex:0 0 auto;white-space:nowrap} /* ============================================================ RESPONSIVE-V2 (2026-06-26) — Ganzes Panel passt sich an Fenster-/ Bildschirmaufloesung an. Ziel: bei kleinem/schmalem Fenster bleibt die KONSOLE erreichbar (Server-Dashboard-Stats schrumpfen, statt sie zu verdraengen). Breiten- UND Hoehen-Stufen, plus Stat-Grid-Reflow. Alles additiv hinter den bestehenden Queries (gewinnt per Quell-Reihenfolge). ============================================================ */ /* --- Globaler Overflow-Schutz: nie horizontales Scrollen / abgeschnittene Buttons. Karten/Inhalte duerfen nie breiter als ihr Container werden. --- */ .shell, .shell .gmain, .shell .gmain > .content{ max-width:100vw; } .detail-c.aggr-detail .aggr-stats-row, .detail-c.aggr-detail .aggr-srv-addr, .detail-c .srv-shell, .detail-c .dash-grid{ max-width:100%; } .detail-c.aggr-detail .aggr-stat-val, .detail-c.aggr-detail .aggr-srv-addr-val{ overflow-wrap:anywhere; word-break:break-word; } /* --- BREITE: Zwischenstufe 1080px — die 5er-Stat-Reihe darf NIE als 5 enge Spalten in ein schmales Fenster gequetscht werden. Auto-fit reflowt in 2–3 sinnvolle Spalten; lean (Game = 3 Karten) bleibt sauber. --- */ @media (max-width: 1080px){ .detail-c.aggr-detail .aggr-stats-row{ grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)) !important; } .detail-c.aggr-detail .aggr-stats-row.aggr-stats-row-lean{ grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)) !important; max-width:none !important; } /* etwas flachere Karten + kleinere Zahl → Stats nehmen weniger Hoehe, Konsole rueckt nach oben. */ .detail-c.aggr-detail .aggr-stat-card{ padding:11px 13px !important; gap:4px !important; } .detail-c.aggr-detail .aggr-stat-val{ font-size:19px !important; } } /* --- BREITE: 820px — kompakter, 2 Spalten reichen, Hero bricht um. --- */ @media (max-width: 820px){ .detail-c.aggr-detail .aggr-stats-row, .detail-c.aggr-detail .aggr-stats-row.aggr-stats-row-lean{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } .detail-c.aggr-detail .aggr-stat-card{ padding:10px 12px !important; } .detail-c.aggr-detail .aggr-stat-val{ font-size:18px !important; } /* Konsolen-Tools (Buttons) duerfen umbrechen statt rauszulaufen */ .detail-c .dash-console-col .card > div[style*="flex"]{ flex-wrap:wrap !important; } } /* --- BREITE: 600px (Handy/sehr schmal) — eine Spalte, aber als kompakte Mini-Karten-Zeilen. Stat-Zahl + Label nebeneinander = wenig Hoehe. --- */ @media (max-width: 600px){ .detail-c.aggr-detail .aggr-stats-row, .detail-c.aggr-detail .aggr-stats-row.aggr-stats-row-lean{ grid-template-columns:1fr !important; gap:8px !important; } .detail-c.aggr-detail .aggr-stat-card{ flex-direction:row !important; flex-wrap:wrap !important; align-items:baseline !important; padding:9px 12px !important; gap:4px 10px !important; } .detail-c.aggr-detail .aggr-stat-ico{ flex:0 0 auto; font-size:10px !important; } .detail-c.aggr-detail .aggr-stat-val{ font-size:17px !important; margin-left:auto; } .detail-c.aggr-detail .aggr-stat-sub{ flex:1 1 100%; font-size:10.5px !important; } .detail-c.aggr-detail .aggr-stat-bar{ flex:1 1 100%; margin-top:4px !important; } .detail-c.aggr-detail .aggr-stat-net-rows{ flex:1 1 100%; flex-direction:row !important; gap:14px !important; } .detail-c.aggr-detail .aggr-stat-refresh{ flex:0 0 auto; } } /* --- HOEHE: bestehende 880/740-Stufen werden hier um eine sehr-flache 620er Stufe ergaenzt: Stats minimal, Konsole bekommt klaren Vorrang. --- */ @media (max-height: 620px){ .detail-c.aggr-detail .detail-sticky-top{ gap:5px !important; padding:6px 0 4px !important; } .detail-c.aggr-detail .page-head.aggr-hero{ padding:8px 12px !important; } .detail-c.aggr-detail .aggr-hero-thumb{ width:40px !important; height:40px !important; } .detail-c.aggr-detail .aggr-hero-title{ font-size:17px !important; } .detail-c.aggr-detail .aggr-stat-card{ padding:5px 10px !important; gap:1px !important; } .detail-c.aggr-detail .aggr-stat-val{ font-size:14px !important; } .detail-c.aggr-detail .aggr-stat-sub{ font-size:9.5px !important; } .detail-c.aggr-detail .aggr-stat-bar{ display:none !important; } .detail-c.aggr-detail .aggr-srv-addr{ padding:6px 11px !important; gap:6px !important; } /* Verlaufs-Tabelle bei extrem flach ausblenden (steht auch im Verlauf-Tab), damit die Konsole nicht weggedrueckt wird. */ .detail-c.aggr-detail .srv-tab-game .sh-card{ display:none !important; } .detail-c #gamelogbox, .detail-c .srv-tab-game #gamelogbox{ min-height:150px !important; } } /* --- KOMBI: schmal UND flach (z. B. 600x500) — aggressivste Kompaktierung, Konsole bleibt mit nutzbarer Mindesthoehe sichtbar/erreichbar. --- */ @media (max-width: 760px) and (max-height: 680px){ .detail-c.aggr-detail .aggr-stats-row, .detail-c.aggr-detail .aggr-stats-row.aggr-stats-row-lean{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:6px !important; } .detail-c.aggr-detail .aggr-stat-card{ padding:5px 9px !important; } .detail-c.aggr-detail .aggr-stat-bar{ display:none !important; } /* Verlauf-Tabelle + Sub-Texte weg, Hero minimal — Konsole bekommt Vorrang. */ .detail-c.aggr-detail .srv-tab-game > .tab-dash > .sh-card{ display:none !important; } .detail-c.aggr-detail .aggr-stat-sub{ display:none !important; } .detail-c.aggr-detail .aggr-hero-thumb, .detail-c.aggr-detail .aggr-hero-thumb.xl{ width:36px !important; height:36px !important; } .detail-c.aggr-detail .aggr-hero-title{ font-size:16px !important; } .detail-c.aggr-detail .aggr-srv-addr{ padding:6px 11px !important; } .detail-c #gamelogbox, .detail-c .srv-tab-game #gamelogbox{ min-height:130px !important; } } /* --- Extrem flach UND schmal (≤640 x ≤540, z. B. 600x500) — Stat-Karten als einzeilige Mini-Zeilen, Adresse sehr kompakt, damit die Konsole oberhalb des Folds startet (Stat-Block darf zusammen nur wenige Zeilen hoch sein). --- */ @media (max-width: 640px) and (max-height: 540px){ .detail-c.aggr-detail .aggr-stats-row, .detail-c.aggr-detail .aggr-stats-row.aggr-stats-row-lean{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:5px !important; } .detail-c.aggr-detail .aggr-stat-card{ flex-direction:column !important; padding:4px 7px !important; gap:0 !important; } .detail-c.aggr-detail .aggr-stat-ico{ font-size:9px !important; } .detail-c.aggr-detail .aggr-stat-val{ font-size:13px !important; margin-left:0 !important; } .detail-c.aggr-detail .aggr-stat-net-rows{ flex-direction:row !important; gap:8px !important; font-size:11px !important; } /* Adresse einzeilig + „Spieler online"-Leerzeile weg -> spart ~80px, Konsole rueckt ueber den Fold. Hero-Badges (Modpack/healthy) ebenfalls knapper. */ .detail-c.aggr-detail .aggr-srv-addr{ grid-template-columns:1fr !important; padding:4px 10px !important; gap:2px !important; } .detail-c.aggr-detail .aggr-srv-addr-right{ display:none !important; } .detail-c.aggr-detail .aggr-srv-addr-left{ padding:0 !important; } .detail-c.aggr-detail .aggr-hero-health{ display:none !important; } .detail-c.aggr-detail .detail-sticky-top{ gap:4px !important; padding:4px 0 3px !important; } .detail-c.aggr-detail .page-head.aggr-hero{ padding:6px 11px !important; } .detail-c #gamelogbox, .detail-c .srv-tab-game #gamelogbox{ min-height:110px !important; } } /* --- Off-Canvas-Sidebar (Hamburger) bereits aktiv ≤960px (siehe oben). Hier nur Sicherstellung: bei offenem Drawer + schmal kein Body-Scroll-Lock-Bug, Drawer liegt ueber dem Content und Hamburger ist immer klickbar. --- */ @media (max-width: 960px){ .shell .gmain > .gtop.gtop-glass .gside-hamburger{ display:inline-flex !important; } .detail-c .srv-shell.aggr-srv-shell{ grid-template-columns:1fr !important; } } /* ============================================================ RESPONSIVE-V2b (2026-06-26) — Feinschliff nach Headless-Messung: bei mittlerer Hoehe (~700px) wurde die Konsole noch unter den Fold gedrueckt (Hero + Stat-Karten + Adresse + Verlauf-Tabelle = zu hoch). Diese Stufen heben die Konsole ueber den Fold + verhindern Button-Clipping. ============================================================ */ /* --- Hero-Actions duerfen NIE rauslaufen: volle Breite, umbrechen, und der breite Auto-Neustart-Select (inline width:auto, ~487px Text) muss schrumpfen. Ursache fuer abgeschnittene Buttons bei 600–880px: Select hatte width:auto + min-width:auto → kein Schrumpfen → Zeile lief ueber den Viewport. --- */ @media (max-width: 900px){ /* Hero zeigt Actions sichtbar (kein Rechts-Clip), bleibt aber FLACH: Actions als eine volle Zeile, Buttons KOMPAKT (kleineres Padding/Font), Select schrumpfbar — so passt alles in 1 schmale Zeile, ohne den Hero hoch zu machen (Konsole bleibt oberhalb des Folds). */ .detail-c.aggr-detail .page-head.aggr-hero{ overflow:visible !important; align-items:stretch !important; } /* In der Spalten-Hero ist die Cross-Achse = Breite: align-self:stretch macht die Actions voll breit (width:100% greift in column-flex NICHT). margin:0 hebt evtl. margin-left:auto auf, das die Actions nach rechts schob. */ .detail-c.aggr-detail .aggr-hero-actions{ align-self:stretch !important; margin:0 !important; flex:0 0 auto !important; width:auto !important; max-width:100% !important; box-sizing:border-box !important; flex-wrap:wrap !important; justify-content:flex-start !important; gap:6px !important; } .detail-c.aggr-detail .aggr-hero-actions > .aggr-act{ min-width:0 !important; flex:0 1 auto !important; padding:7px 11px !important; font-size:12px !important; } /* Select schrumpft mit (flex-shrink), bleibt aber in derselben Zeile wie die Buttons solange Platz ist; min-width:0 verhindert Container-Blowout. */ .detail-c.aggr-detail .aggr-hero-actions > select.aggr-act{ min-width:0 !important; max-width:100% !important; flex:1 1 150px !important; box-sizing:border-box !important; padding:7px 9px !important; font-size:12px !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } } /* --- HOEHE ≤ 780px (z. B. 800x700 / 600x700): Stats + Adresse + Verlauf kompaktieren, Verlaufs-Tabelle im Dashboard-Tab schrumpfen, damit die Konsole oberhalb des Folds beginnt. --- */ @media (max-height: 780px){ .detail-c.aggr-detail .detail-sticky-top{ gap:7px !important; padding:8px 0 6px !important; } .detail-c.aggr-detail .page-head.aggr-hero{ padding:9px 14px !important; } .detail-c.aggr-detail .aggr-hero-thumb, .detail-c.aggr-detail .aggr-hero-thumb.xl{ width:46px !important; height:46px !important; } .detail-c.aggr-detail .aggr-hero-title{ font-size:19px !important; } .detail-c.aggr-detail .aggr-stat-card{ padding:7px 12px !important; gap:2px !important; } .detail-c.aggr-detail .aggr-stat-val{ font-size:16px !important; } .detail-c.aggr-detail .aggr-stat-sub{ font-size:10px !important; } .detail-c.aggr-detail .aggr-srv-addr{ padding:8px 13px !important; gap:8px !important; } /* Dashboard-Verlaufs-Tabelle (gleiche Daten auch im Verlauf-Tab) kompakter: kleinere Zellen-Fonts + weniger Padding statt voller Hoehe. */ .detail-c.aggr-detail .srv-tab-game .sh-card{ margin-bottom:10px !important; padding:10px 12px !important; } .detail-c.aggr-detail .srv-tab-game .sh-card .sh-grid{ gap:4px 5px !important; } .detail-c.aggr-detail .srv-tab-game .sh-card .sh-grid > div{ font-size:11px !important; } .detail-c #gamelogbox, .detail-c .srv-tab-game #gamelogbox{ min-height:170px !important; } } /* --- KOMBI schmal (≤880px) UND mittel-flach (≤780px): zusaetzlich die Verlaufs-Tabelle im Game-Dashboard ganz ausblenden (steht im Verlauf-Tab), damit auf kleinen Fenstern die Konsole klar Vorrang hat. --- */ @media (max-width: 880px) and (max-height: 780px){ .detail-c.aggr-detail .srv-tab-game > .tab-dash > .sh-card{ display:none !important; } .detail-c.aggr-detail .aggr-srv-addr{ grid-template-columns:1fr !important; padding:7px 12px !important; } .detail-c #gamelogbox, .detail-c .srv-tab-game #gamelogbox{ min-height:160px !important; } } /* ============================================================ GAME-KOMPAKT-FOLD (2026-06-26, LAST in cascade -> gewinnt per Quell-Reihenfolge) Ziel: Game-Dashboard mit Chip-Leiste -> Konsole bleibt bei niedrigen Fenstern (<=620px / kombiniert schmal) MIT >=150px ueber dem Fold. Hero + Adresse werden knapper, Spieler-Liste (steht auch in der Spieler-Verwaltung) faellt weg, Konsole bekommt garantierte Min-Hoehe. NUR Game (aggr-detail .srv-tab-game). ============================================================ */ @media (max-height: 660px){ /* Hero knapper: kleiner Thumb, weniger Padding, Auto-Neustart-Select schrumpfbar. */ .detail-c.aggr-detail .page-head.aggr-hero{ padding:7px 12px !important; } .detail-c.aggr-detail .aggr-hero-thumb, .detail-c.aggr-detail .aggr-hero-thumb.xl{ width:42px !important; height:42px !important; } .detail-c.aggr-detail .aggr-hero-health{ display:none !important; } .detail-c.aggr-detail .detail-sticky-top{ gap:6px !important; padding:8px 0 6px !important; } /* Adresse einzeilig: Spieler-Spalte als knappe Inline-Zahl, Spieler-Pills weg. */ .detail-c.aggr-detail .aggr-srv-addr{ grid-template-columns:1fr auto !important; padding:7px 13px !important; gap:2px 14px !important; align-items:center !important; } .detail-c.aggr-detail .aggr-srv-addr-left{ padding-right:0 !important; } .detail-c.aggr-detail .aggr-srv-addr-right{ padding-left:14px !important; display:flex !important; align-items:center !important; gap:8px !important; white-space:nowrap !important; } .detail-c.aggr-detail .aggr-srv-addr-right .aggr-srv-addr-label{ margin-bottom:0 !important; } .detail-c.aggr-detail .aggr-srv-addr-players, .detail-c.aggr-detail .aggr-srv-addr-empty{ display:none !important; } /* Chips minimal. */ .detail-c.aggr-detail .aggr-chip{ padding:4px 10px !important; min-height:28px !important; } .detail-c.aggr-detail .aggr-chip .aggr-chip-sub{ display:none !important; } /* Konsole garantiert >=150px ueber dem Fold. */ .detail-c.aggr-detail .dash-console-col #gamelogbox, .detail-c.aggr-detail .srv-tab-game #gamelogbox{ min-height:150px !important; } } /* sehr flach: Hero noch knapper, Konsole behaelt 150px. */ @media (max-height: 540px){ .detail-c.aggr-detail .aggr-hero-thumb, .detail-c.aggr-detail .aggr-hero-thumb.xl{ width:36px !important; height:36px !important; } .detail-c.aggr-detail .page-head.aggr-hero{ padding:5px 11px !important; } .detail-c.aggr-detail .detail-sticky-top{ gap:5px !important; padding:6px 0 4px !important; } .detail-c.aggr-detail .dash-console-col #gamelogbox, .detail-c.aggr-detail .srv-tab-game #gamelogbox{ min-height:150px !important; } } /* ============================================================ ROUND3 KONSOLE-FOLD-FIX (2026-06-26, ABSOLUT LETZT in der Kaskade -> gewinnt) Ziel: Bei flachen Viewports (<=560px Hoehe, z. B. 600x500 / 800x600-ish) muss die Konsole (#gamelogbox) IM Viewport beginnen (top < vh) UND mind. 150px sichtbar sein. Der Server-Detail-Header (Hero ~230px + Chip-Leiste + Adress-Card) wird hier maximal kompakt: kleiner Avatar, einzeilige Actions, einzeilige Adresse, gestauchte Konsolen-Card. Verlauf ist bereits im Performance-Tab (von der Uebersicht entfernt) -> Konsole rueckt zusaetzlich hoch. NUR Game-Server-Detail (.detail-c.aggr-detail .srv-tab-game). ============================================================ */ @media (max-height: 560px){ /* --- Hero: einzeilig + winzig --- */ .detail-c.aggr-detail .page-head.aggr-hero{ padding:5px 11px !important; gap:8px !important; align-items:center !important; } .detail-c.aggr-detail .aggr-hero-thumb, .detail-c.aggr-detail .aggr-hero-thumb.xl{ width:30px !important; height:30px !important; border-radius:9px !important; font-size:13px !important; } .detail-c.aggr-detail .aggr-hero-left{ gap:10px !important; } .detail-c.aggr-detail .aggr-hero-ident{ gap:1px !important; } .detail-c.aggr-detail .aggr-hero-title, .detail-c.aggr-detail .aggr-hero-switch{ font-size:16px !important; line-height:1.1 !important; } .detail-c.aggr-detail .aggr-hero-back{ width:28px !important; height:28px !important; font-size:15px !important; } /* Sub-Zeile (Image/Health) weg -> spart eine ganze Zeile. */ .detail-c.aggr-detail .aggr-hero-sub{ display:none !important; } /* Actions: in EINER schmalen Zeile, kompakt, Select schrumpft. */ .detail-c.aggr-detail .aggr-hero-actions{ gap:5px !important; flex-wrap:nowrap !important; } .detail-c.aggr-detail .aggr-hero-actions > .aggr-act{ padding:5px 9px !important; font-size:11.5px !important; } .detail-c.aggr-detail .aggr-hero-actions > select.aggr-act{ flex:0 1 120px !important; min-width:0 !important; padding:5px 7px !important; font-size:11px !important; } /* --- Sticky-Top: minimale Abstaende --- */ .detail-c.aggr-detail .detail-sticky-top{ gap:5px !important; padding:5px 0 3px !important; } .detail-c.aggr-detail .detail-sticky-top > .bento.aggr-detail-bento{ gap:5px !important; } /* --- Chip-Leiste minimal (Sub + Key weg) --- */ .detail-c.aggr-detail .aggr-chip{ padding:3px 9px !important; min-height:25px !important; gap:4px !important; } .detail-c.aggr-detail .aggr-chip .aggr-chip-sub{ display:none !important; } .detail-c.aggr-detail .aggr-chipbar{ gap:5px !important; } /* --- Adress-Card: EINE schmale Zeile, Spieler/Play/Hint weg --- */ .detail-c.aggr-detail .aggr-srv-addr{ grid-template-columns:1fr auto !important; padding:5px 12px !important; gap:1px 12px !important; align-items:center !important; } .detail-c.aggr-detail .aggr-srv-addr-left{ padding-right:0 !important; } .detail-c.aggr-detail .aggr-srv-addr-right{ padding-left:12px !important; display:flex !important; align-items:center !important; gap:6px !important; white-space:nowrap !important; border-left:1px solid rgba(127,168,255,0.18) !important; } .detail-c.aggr-detail .aggr-srv-addr-label{ margin-bottom:1px !important; font-size:9px !important; } .detail-c.aggr-detail .aggr-srv-addr-right .aggr-srv-addr-label{ margin-bottom:0 !important; } .detail-c.aggr-detail .aggr-srv-addr-val{ font-size:14px !important; } .detail-c.aggr-detail .aggr-srv-addr-copyhint, .detail-c.aggr-detail .aggr-srv-addr-play, .detail-c.aggr-detail .aggr-srv-addr-players, .detail-c.aggr-detail .aggr-srv-addr-empty{ display:none !important; } /* --- Konsolen-Card gestaucht: kleiner Header, weniger Padding --- */ .detail-c.aggr-detail .srv-tab-game .dash-console-col > .card{ padding:8px 12px !important; } .detail-c.aggr-detail .srv-tab-game .dash-console-col > .card > div:first-child{ margin-bottom:6px !important; } .detail-c.aggr-detail .srv-tab-game .dash-console-col > .card > div:first-child h3{ font-size:14px !important; } /* Konsole garantiert >=150px sichtbar (top wird durch obige Stauchung < vh). */ .detail-c.aggr-detail .dash-console-col #gamelogbox, .detail-c.aggr-detail .srv-tab-game #gamelogbox{ min-height:150px !important; height:150px !important; max-height:none !important; } } /* Noch flacher (<=460px): Hero-Image-Pill ganz weg, Avatar minimal — Konsole behaelt 150px. */ @media (max-height: 460px){ .detail-c.aggr-detail .aggr-hero-thumb, .detail-c.aggr-detail .aggr-hero-thumb.xl{ width:26px !important; height:26px !important; } .detail-c.aggr-detail .page-head.aggr-hero{ padding:4px 10px !important; } .detail-c.aggr-detail .aggr-hero-title, .detail-c.aggr-detail .aggr-hero-switch{ font-size:15px !important; } } /* ============================================================ ROUND3 CHIP-EINZEILE-FIX (2026-06-26, ABSOLUT LETZT -> gewinnt) Bei schmaler Breite (<=640px, z. B. 600x500 / 560x500) duerfen die 6 Aggregat-Chips NIE auf 2 Zeilen umbrechen (Chip-Leiste 28->60px wuerde die Konsole unter 150px druecken). Daher: EINE Zeile, horizontal scrollbar (flex-nowrap + overflow-x:auto), Chips schrumpfen nicht. NUR Game-Server-Detail-Chipbar. ============================================================ */ @media (max-width: 640px){ .detail-c.aggr-detail .aggr-chipbar{ flex-wrap:nowrap !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:5px !important; padding-bottom:1px !important; } .detail-c.aggr-detail .aggr-chipbar::-webkit-scrollbar{ height:0 !important; width:0 !important; } .detail-c.aggr-detail .aggr-chip{ flex:0 0 auto !important; padding:4px 9px !important; min-height:26px !important; gap:4px !important; } .detail-c.aggr-detail .aggr-chip .aggr-chip-sub{ display:none !important; } } /* ========================================================================= PHASE 4 — STEUERZENTRALE (Control-Hub) — design-parity mit dem Aurora-Panel Token-getrieben (--surface/--border/--primary/--ok/--warn). Eigener ctrl-* Namespace, beruehrt keine bestehende Regel. ========================================================================= */ .spin-sm{width:15px;height:15px;border:2px solid var(--border2);border-top-color:var(--primary);border-radius:50%;animation:sp 1s linear infinite;margin:0;display:inline-block;vertical-align:-2px} .ctrl-page{padding-bottom:30px} .ctrl-head{align-items:center} .ctrl-head-actions{display:flex;align-items:center;gap:12px} .ctrl-summary{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--muted);padding:7px 13px;border:1px solid var(--border2);border-radius:999px;background:rgba(255,255,255,.03)} .ctrl-summary.is-warn{color:var(--warn);border-color:rgba(255,180,67,.4);background:rgba(255,180,67,.10)} .ctrl-summary-dot{width:8px;height:8px;border-radius:50%} .ctrl-summary-dot.ok{background:var(--ok);box-shadow:0 0 0 4px rgba(52,226,155,.16)} .ctrl-summary-dot.warn{background:var(--warn);box-shadow:0 0 0 4px rgba(255,180,67,.16)} .ctrl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;margin:4px} .ctrl-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--border);border-radius:var(--r); background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0)),var(--surface); box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 14px 34px -22px rgba(0,0,0,.7);transition:border-color .18s,transform .18s,box-shadow .18s;overflow:hidden} .ctrl-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--ctrl-accent,var(--primary));opacity:.85} .ctrl-card:hover{transform:translateY(-2px);border-color:var(--border2);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 22px 44px -24px rgba(0,0,0,.8)} .ctrl-card.is-maint{border-color:rgba(255,180,67,.45);background:linear-gradient(180deg,rgba(255,180,67,.06),rgba(255,255,255,0)),var(--surface)} .ctrl-card.is-maint::before{background:var(--warn);opacity:1} .ctrl-card-head{display:flex;align-items:center;gap:12px} .ctrl-card-ico{width:44px;height:44px;flex:0 0 auto;border-radius:13px;display:grid;place-items:center;font-size:22px;border:1px solid var(--border2)} .ctrl-card-titlewrap{display:flex;flex-direction:column;min-width:0;flex:1} .ctrl-card-title{font-size:16.5px;font-weight:800;letter-spacing:-.02em;line-height:1.15} .ctrl-card-host{font-size:11.5px;color:var(--muted);font-family:var(--mono,monospace);margin-top:1px} .ctrl-reach{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap} .ctrl-reach-dot{width:8px;height:8px;border-radius:50%;background:#8a93b8;box-shadow:0 0 0 3px rgba(138,147,184,.14)} .ctrl-reach.online .ctrl-reach-dot{background:var(--ok);box-shadow:0 0 0 3px rgba(52,226,155,.18)} .ctrl-reach.online{color:var(--ok)} .ctrl-reach.offline .ctrl-reach-dot{background:var(--danger);box-shadow:0 0 0 3px rgba(255,90,114,.18)} .ctrl-reach.offline{color:var(--danger)} .ctrl-reach.unknown .ctrl-reach-dot{animation:ctrlPulse 1.4s ease-in-out infinite} .ctrl-card-desc{font-size:12.5px;color:var(--muted);line-height:1.45;margin:-2px 0 2px} .ctrl-status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .ctrl-statebadge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;border:1px solid var(--border2)} .ctrl-statebadge-dot{width:7px;height:7px;border-radius:50%} .ctrl-statebadge.live{color:var(--ok);background:rgba(52,226,155,.10);border-color:rgba(52,226,155,.32)} .ctrl-statebadge.live .ctrl-statebadge-dot{background:var(--ok);box-shadow:0 0 0 3px rgba(52,226,155,.18)} .ctrl-statebadge.maint{color:var(--warn);background:rgba(255,180,67,.12);border-color:rgba(255,180,67,.38)} .ctrl-statebadge.maint .ctrl-statebadge-dot{background:var(--warn);box-shadow:0 0 0 3px rgba(255,180,67,.2)} .ctrl-card-meta{font-size:11px;color:var(--muted)} .ctrl-card-msg{font-size:12.5px;color:var(--text);background:rgba(255,180,67,.08);border:1px solid rgba(255,180,67,.22);border-radius:10px;padding:8px 11px;line-height:1.4} .ctrl-card-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:4px} .ctrl-toggle{flex:1;display:inline-flex;align-items:center;gap:10px;justify-content:flex-start;font-weight:700;font-size:13px;padding:9px 13px;border-radius:11px;border:1px solid var(--border2);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;transition:all .16s} .ctrl-toggle:hover:not(:disabled){border-color:var(--primary)} .ctrl-toggle:disabled{opacity:.6;cursor:default} .ctrl-toggle-track{position:relative;width:36px;height:20px;flex:0 0 auto;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--border2);transition:background .18s,border-color .18s} .ctrl-toggle-knob{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:#cfd6f5;transition:transform .18s ease,background .18s} .ctrl-toggle.is-on .ctrl-toggle-track{background:var(--warn);border-color:var(--warn)} .ctrl-toggle.is-on .ctrl-toggle-knob{transform:translateX(16px);background:#1b1404} .ctrl-open{flex:0 0 auto;white-space:nowrap} .ctrl-foot-note{font-size:12px;line-height:1.5;margin:18px 6px 0;max-width:760px} @keyframes ctrlPulse{0%,100%{opacity:1}50%{opacity:.35}} /* ===== PHASE 2 v2 — Steuerzentrale Zusatz-Controls ================================ */ /* Selbst-enthaltene Formfeld/Warn-Button-Utilities (kein globales .inp/.warnbtn im Projekt). */ .ctrl-page .inp{width:100%;padding:8px 11px;border:1px solid var(--border2);border-radius:10px;background:rgba(255,255,255,.04);color:var(--text);font-family:var(--font,inherit);font-size:13px;transition:border-color .15s,background .15s} .ctrl-page .inp:focus{outline:none;border-color:var(--primary);background:rgba(255,255,255,.06)} .ctrl-page .inp::placeholder{color:var(--muted)} .ctrl-page .btn.warnbtn{background:var(--warn);color:#1b1404;box-shadow:0 8px 22px -12px rgba(255,180,67,.7)} .ctrl-page .btn.warnbtn:disabled{opacity:.55;cursor:default;box-shadow:none} /* (1) Global-Leiste: zwei Blocks (Global-Schalter + Global-Banner) */ .ctrl-globalbar{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:2px 4px 18px} .ctrl-gb-block{border:1px solid var(--border);border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),var(--surface);padding:16px;display:flex;flex-direction:column;gap:12px} .ctrl-gb-head{display:flex;align-items:flex-start;gap:12px} .ctrl-gb-ic{width:38px;height:38px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-size:19px;border:1px solid var(--border2);background:rgba(255,255,255,.03)} .ctrl-gb-title{font-size:14.5px;font-weight:800;letter-spacing:-.01em} .ctrl-gb-sub{font-size:11.5px;line-height:1.4;margin-top:2px} .ctrl-gb-actions{display:flex;gap:10px;flex-wrap:wrap} .ctrl-gb-bannerrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .ctrl-banner-inp{flex:1;min-width:180px} /* (2) Kennzahlen-Streifen */ .ctrl-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:-2px 0 2px;transition:opacity .2s} .ctrl-metrics.is-loading{opacity:.55} .ctrl-metric{display:flex;flex-direction:column;gap:2px;padding:8px 6px;border:1px solid var(--border2);border-radius:10px;background:rgba(255,255,255,.02);text-align:center} .ctrl-metric-v{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--text);line-height:1.1} .ctrl-metric-v small{font-size:10px;font-weight:600;color:var(--muted)} .ctrl-metric-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)} .ctrl-metric.is-hot{border-color:rgba(255,180,67,.4);background:rgba(255,180,67,.08)} .ctrl-metric.is-hot .ctrl-metric-v{color:var(--warn)} /* zusaetzliche Statusbadges */ .ctrl-statebadge.sched{color:#8ea2ff;background:rgba(108,140,255,.12);border-color:rgba(108,140,255,.34)} .ctrl-statebadge.sched .ctrl-statebadge-dot{background:#8ea2ff;box-shadow:0 0 0 3px rgba(108,140,255,.18)} .ctrl-statebadge.paused{color:#ff9f6b;background:rgba(255,120,60,.12);border-color:rgba(255,120,60,.34)} .ctrl-statebadge.paused .ctrl-statebadge-dot{background:#ff9f6b;box-shadow:0 0 0 3px rgba(255,120,60,.18)} /* (3)/(4) aufklappbare Advanced-Bloecke (Zeitplan / Banner) */ .ctrl-adv{border:1px solid var(--border2);border-radius:11px;background:rgba(255,255,255,.02);overflow:hidden} .ctrl-adv-sum{list-style:none;cursor:pointer;padding:9px 12px;font-size:12.5px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;user-select:none} .ctrl-adv-sum::-webkit-details-marker{display:none} .ctrl-adv-sum:hover{background:rgba(255,255,255,.03)} .ctrl-adv[open] .ctrl-adv-sum{border-bottom:1px solid var(--border2)} .ctrl-adv-badge{margin-left:auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:999px;color:var(--muted);border:1px solid var(--border2)} .ctrl-adv-badge.on{color:var(--warn);border-color:rgba(255,180,67,.4);background:rgba(255,180,67,.12)} .ctrl-adv-body{padding:11px 12px;display:flex;flex-direction:column;gap:9px} .ctrl-sched-row{display:grid;grid-template-columns:1fr 1fr;gap:9px} .ctrl-sched-row label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:var(--muted)} .ctrl-adv-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* (3) Neubestellung-Reihe unter dem Footer */ .ctrl-orders-row{margin-top:2px} .ctrl-orders-row .ctrl-toggle{width:100%;justify-content:flex-start} .ctrl-toggle.sm{padding:7px 11px;font-size:12px} @media (max-width:900px){.ctrl-globalbar{grid-template-columns:1fr}} @media (max-width:560px){.ctrl-grid{grid-template-columns:1fr}.ctrl-head{flex-direction:column;align-items:flex-start;gap:12px}.ctrl-metrics{grid-template-columns:repeat(2,1fr)}} /* ====================================================================== MAINREDESIGN 2026-07-04 — Command-Deck-Shell Feinschliff Rail-Foot User-Pill (.gfoot immer sichtbar) + Steuerzentrale-Metrik-Strip. Nur additive Overrides; die vorhandenen .gfoot/.gava/.gfmeta/.gside-toggle Regeln (weiter oben) liefern Grund-Look, Farben aus der Design-System-Phase. ====================================================================== */ /* Foot: die User-Pill sitzt jetzt IM .aggr-sidebar-foot -> doppelte Trennlinie/Abstand entschaerfen */ .aggr-sidebar-foot .gfoot{margin-top:0;border-top:none;padding:8px 4px 2px;cursor:default} .aggr-sidebar-foot .gfoot .gfmeta b{color:var(--app-text,var(--text))} /* Kollabiert: Foot bleibt sichtbar (nur Avatar), das frühere display:none wird aufgehoben */ .gside-collapsed .aggr-sidebar-foot{display:flex !important;padding:12px 6px 6px} .gside-collapsed .aggr-sidebar-foot .gfoot{justify-content:center;padding:0} .gside-collapsed .aggr-sidebar-foot .gfoot .gfmeta, .gside-collapsed .aggr-sidebar-foot .gfoot .gfoot-logout{display:none} /* Logout-Icon-Button in der User-Pill (Ghost, Danger-Hover) */ .gfoot-logout{margin-left:auto;flex:0 0 auto;width:28px;height:28px;border-radius:9px; border:1px solid var(--app-border-1,var(--border));background:transparent;color:var(--app-text-muted,var(--muted)); cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center;transition:.16s} .gfoot-logout:hover{color:var(--danger);border-color:var(--danger);background:rgba(255,90,114,.10)} /* Steuerzentrale-Home: Live-System-Metrik-Strip erbt das Dashboard-Statcard-Layout, sitzt aber kompakt zwischen Kopf und Global-Leiste. */ .ctrl-sysstrip{margin:0 0 18px} .ctrl-sysstrip .aggr-dash-statcard{cursor:default} /* ============================================================================ MAINREDESIGN 2026-07-04 — Steuerzentrale (Home) Zusatz-Bausteine (Pass 2) Node-Ampel + integrierte Monitoring-Sektion + Sektions-Trenner. Reine Ergaenzung; die integrierten Dashboard-Sektionen nutzen weiter die bestehenden .aggr-dash-*-Styles. Deck-Violett wird konkret gesetzt (#7c5cf0 / rgba(124,92,240,..)), da var(--accent) im Monolith-Cascade nicht zuverlaessig ist. ============================================================================ */ .ctrl-nodestrip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:10px 14px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--border)} .ctrl-nodestrip-title{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-right:2px} .ctrl-node-amp{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(124,92,240,.10);border:1px solid rgba(124,92,240,.28);font-size:12.5px;font-weight:600;line-height:1} .ctrl-node-amp.off{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.30)} .ctrl-node-amp-name{color:var(--text)} .ctrl-node-amp-meta{font-size:11px;color:var(--muted);font-weight:700} .ctrl-node-add{margin-left:auto} .ctrl-monitor{margin-top:6px} .ctrl-section-divider{display:flex;align-items:center;gap:14px;margin:30px 0 16px} .ctrl-section-divider span{font-size:12.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap} .ctrl-section-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)} .ctrl-sysstrip .aggr-dash-statcard[style*="cursor:pointer"]{transition:transform .12s ease,border-color .12s ease} .ctrl-sysstrip .aggr-dash-statcard[style*="cursor:pointer"]:hover{transform:translateY(-2px);border-color:rgba(124,92,240,.55)} /* ===================================================================== COMMAND-DECK COMPONENT LAYER (rebuild pass 3 — Views-Neubau) Additive only. Reuses existing atoms (.page-head/.card/.btn/.field/.spin/.dot). New content patterns for the rebuilt admin views: tables, segmented filters, key/value lists, ticket-thread, badges, empty-states, modals. Appended last -> wins on equal specificity, no !important churn. ===================================================================== */ /* --- page-header right action cluster (pairs with existing .page-head) --- */ .cd-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .page-head > div:first-child{min-width:0} /* --- small button size (replaces per-button inline padding) --- */ .btn.cd-sm{padding:6px 12px;font-size:12.5px} .btn.cd-xs{padding:4px 9px;font-size:12px} .btn.cd-danger{color:var(--danger);border-color:var(--danger);background:rgba(255,90,114,.08)} .btn.cd-ok{background:var(--ok);color:#04140d;box-shadow:none} .btn.cd-red{background:var(--danger);color:#fff;box-shadow:none} /* --- Command-Deck table: sticky head, zebra rows, hover --- */ .cd-tbl-wrap{padding:0;overflow:hidden} .cd-tbl-scroll{overflow-x:auto;max-height:64vh;overflow-y:auto} .cd-tbl{width:100%;border-collapse:collapse;font-size:13px} .cd-tbl thead th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:13px 18px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:1} .cd-tbl tbody td{padding:12px 18px;border-bottom:1px solid rgba(126,150,255,.07);vertical-align:top} .cd-tbl tbody tr:nth-child(even) td{background:rgba(255,255,255,.014)} .cd-tbl tbody tr:hover td{background:var(--grad-soft)} .cd-tbl tbody tr:last-child td{border-bottom:none} .cd-tbl-strong{font-weight:600;color:var(--text)} .cd-tbl-muted{color:var(--muted);font-size:12px} .cd-tbl-right{text-align:right;white-space:nowrap} .cd-tbl-click{cursor:pointer} .cd-tbl-empty{text-align:center;color:var(--muted);padding:34px 18px} .cd-ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:460px} /* --- pager --- */ .cd-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-top:1px solid var(--border)} .cd-pager-info{font-size:12.5px;color:var(--muted)} /* --- filter bar --- */ .cd-filterbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center} .cd-filterbar input,.cd-filterbar select{width:auto;padding:9px 12px} .cd-filter-grow{flex:1 1 200px;min-width:180px} /* --- badges --- */ .cd-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.6;border:1px solid transparent;white-space:nowrap} .cd-badge-muted{background:rgba(154,163,200,.14);color:var(--muted)} .cd-badge-ok{background:rgba(52,226,155,.14);color:var(--ok)} .cd-badge-warn{background:rgba(255,180,67,.15);color:var(--warn)} .cd-badge-danger{background:rgba(255,90,114,.15);color:var(--danger)} .cd-badge-info{background:rgba(124,92,240,.18);color:#c4b4ff} /* --- segmented control (filters) --- */ .cd-seg{display:inline-flex;gap:4px;padding:4px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:13px;flex-wrap:wrap;margin-bottom:16px} .cd-seg-btn{padding:7px 15px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--muted);background:transparent;border:none;cursor:pointer;transition:.14s} .cd-seg-btn:hover{color:var(--text);background:rgba(255,255,255,.04)} .cd-seg-btn.on{background:var(--grad);color:#fff;box-shadow:0 3px 12px -3px rgba(124,92,240,.55)} .cd-seg-btn.on-warn{background:var(--warn);color:#251500;box-shadow:none} .cd-seg-btn.on-ok{background:var(--ok);color:#04140d;box-shadow:none} .cd-seg-btn.on-danger{background:var(--danger);color:#fff;box-shadow:none} /* --- checkbox chips (multi-select, e.g. user services) --- */ .cd-chips{display:flex;flex-wrap:wrap;gap:8px} .cd-chip-check{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text);background:rgba(255,255,255,.03);border:1px solid var(--border2);border-radius:10px;padding:8px 12px;cursor:pointer;transition:.14s} .cd-chip-check:hover{border-color:var(--primary)} .cd-chip-check input{width:auto;margin:0} /* --- empty state --- */ .cd-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;padding:54px 24px;color:var(--muted)} .cd-empty-glyph{font-size:38px;opacity:.5;margin-bottom:2px} .cd-empty-title{font-size:15px;font-weight:700;color:var(--text)} .cd-empty-sub{font-size:13px;color:var(--muted);max-width:360px} /* --- modal --- */ .cd-modal-ov{position:fixed;inset:0;background:rgba(4,6,16,.62);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;animation:cdFade .16s ease} .cd-modal{width:480px;max-width:96vw;max-height:90vh;overflow:auto;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.006)),var(--surface);border:1px solid var(--border2);border-radius:18px;padding:24px;box-shadow:0 40px 90px -30px rgba(2,5,20,.9)} .cd-modal.wide{width:580px} .cd-modal-title{margin:0 0 4px;font-size:18px;font-weight:800} .cd-modal-head{display:flex;align-items:center;gap:10px;margin-bottom:14px} .cd-modal-head h3{margin:0;flex:1;font-size:18px;font-weight:800} .cd-modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:18px} @keyframes cdFade{from{opacity:0}to{opacity:1}} /* --- fresh list rows (lighter than legacy .crow) --- */ .cd-list{display:flex;flex-direction:column;gap:8px} .cd-row{display:flex;align-items:center;gap:13px;padding:11px 14px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.02);transition:.15s} .cd-row-click{cursor:pointer} .cd-row-click:hover{border-color:var(--border2);background:var(--grad-soft);transform:translateX(2px)} .cd-row-body{flex:1;min-width:0} .cd-row-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cd-row-sub{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cd-row-empty{color:var(--muted);font-size:13px;padding:12px 4px} .cd-row-chev{color:var(--muted);font-size:18px;flex:none} /* TICKETS 2026-07-04: ungelesene Tickets (Kunde->Admin) hervorheben */ .cd-row-unread{border-color:var(--primary);background:rgba(124,92,240,.07)} .cd-row-unread .cd-row-title{font-weight:700} /* --- avatar --- */ .cd-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex:none;background:var(--grad)} .cd-avatar.user{background:rgba(154,163,200,.28);color:var(--text)} /* --- stack cards --- */ .cd-stack-grid{display:flex;flex-direction:column;gap:14px} .cd-stack-card{padding:16px 18px} .cd-stack-head{display:flex;align-items:center;gap:12px;margin-bottom:12px} .cd-stack-icon{font-size:22px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(255,255,255,.04);flex:none} .cd-stack-img{width:28px;height:28px;border-radius:7px} .cd-stack-title{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .cd-stack-title h3{margin:0;font-size:15px} .cd-stack-tools{display:flex;gap:6px;flex-wrap:wrap} /* --- key/value detail list (zebra) --- */ .cd-kv{display:flex;flex-direction:column;gap:1px;margin:6px 0 16px} .cd-kv-row{display:flex;gap:14px;padding:9px 12px;border-radius:9px} .cd-kv-row:nth-child(odd){background:rgba(255,255,255,.02)} .cd-kv-k{color:var(--muted);font-size:12.5px;flex:0 0 148px} .cd-kv-v{flex:1;min-width:0;font-size:13px;white-space:pre-wrap;word-break:break-word} /* --- ticket thread (preserved loadThread/sendMsg semantics) --- */ .cd-label{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px} .cd-mono{font-family:var(--mono);font-size:12px} .cd-envbox{background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:10px;padding:11px;font-family:var(--mono);font-size:12px;max-height:150px;overflow:auto} .cd-thread{background:rgba(0,0,0,.22);border:1px solid var(--border);border-radius:12px;padding:12px;max-height:250px;overflow:auto;display:flex;flex-direction:column;gap:9px} .cd-msg{max-width:82%;display:flex;flex-direction:column} .cd-msg-in{align-self:flex-start} .cd-msg-out{align-self:flex-end} .cd-msg-bubble{padding:8px 12px;border-radius:13px;font-size:13px;white-space:pre-wrap;word-break:break-word} .cd-msg-in .cd-msg-bubble{background:rgba(255,255,255,.06);border-bottom-left-radius:4px} .cd-msg-out .cd-msg-bubble{background:rgba(124,92,240,.22);border-bottom-right-radius:4px} .cd-msg-meta{font-size:10px;color:var(--muted);margin-top:3px} .cd-msg-out .cd-msg-meta{text-align:right} .cd-thread-reply{display:flex;gap:8px;margin-top:10px} .cd-thread-reply textarea{flex:1;resize:vertical;min-height:46px} /* --- section sub-card inside a view --- */ .cd-section{margin-bottom:16px} .cd-section > h3{margin:0 0 12px;font-size:15px;font-weight:700} /* ===================================================================== POLISH for views kept structurally (mcperms / settings / server-detail): additive spacing + hover so they read as one system with the rebuilds. ===================================================================== */ .mcperms-tile{transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease} .mcperms-tile:hover{transform:translateY(-3px);border-color:var(--border2);box-shadow:0 14px 30px -18px rgba(90,110,255,.6)} .mcperms-list-pane,.mcperms-detail-pane{border-radius:16px} .aggr-settings-card{transition:transform .14s ease,border-color .14s ease} .aggr-settings-card:hover{border-color:var(--border2)} .aggr-settings-card.is-active{box-shadow:inset 0 0 0 1px var(--border2),0 10px 24px -14px rgba(124,92,240,.6)} .detail-c .aggr-stat-card{transition:transform .14s ease,border-color .14s ease} .detail-c .aggr-stat-card:hover{transform:translateY(-2px);border-color:var(--border2)}