/* ========================================================= Datei: /public/assets/admin.css © Sven Gauditz – sven@gauditz.com Zweck: - Admin UI Styles (Dark Default) - Light Theme via: ========================================================= */ /* ---------- Dark (Default) ---------- */ :root{ --bg:#0a1224; --bg2:#070c18; --panel:#0e1732; --panel2:#0b1126; --card:#121e3f; --card2:#0f1a37; --text:#f2f6ff; --text2:rgba(242,246,255,.88); --muted:rgba(242,246,255,.60); --border:rgba(255,255,255,.10); --accent:#4ea1ff; --accent2:#22c55e; --accent3:#14b8a6; --danger:#ef4444; --shadow: 0 16px 60px rgba(0,0,0,.55); --shadow2: 0 10px 30px rgba(0,0,0,.35); --radius:18px; --sidebar-w:280px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; background: radial-gradient(900px 600px at 12% -10%, rgba(78,161,255,.28), transparent 58%), radial-gradient(900px 700px at 92% 12%, rgba(20,184,166,.20), transparent 55%), radial-gradient(800px 520px at 70% 110%, rgba(34,197,94,.12), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg2)); background-attachment: fixed; /* Verlauf fix beim Scrollen */ background-repeat:no-repeat; color:var(--text); } a{color:inherit; text-decoration:none} .small{font-size:12px;color:var(--muted)} .h1{font-size:22px; margin:0 0 6px; font-weight:850; letter-spacing:.2px} .h2{font-size:16px; margin:0 0 8px; font-weight:850; letter-spacing:.2px} .p{margin:0; color:var(--text2)} .hr{height:1px; background:var(--border); border:0; margin:14px 0} /* ---------- Badges ---------- */ .badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; background:rgba(78,161,255,.14); border:1px solid rgba(78,161,255,.28); color:rgba(242,246,255,.92); font-size:12px; } .badge.success{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.25); } .badge.warning{ background:rgba(234,179,8,.14); border-color:rgba(234,179,8,.28); } .badge.danger{ background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.28); } .badge.info{ background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.28); } .badge.muted{ background:rgba(148,163,184,.14); border-color:rgba(148,163,184,.28); opacity:0.7; } .badge.secondary{ background:rgba(100,116,139,.14); border-color:rgba(100,116,139,.28); } .badge .dot{ width:8px;height:8px;border-radius:99px; background:var(--accent3); box-shadow:0 0 18px rgba(20,184,166,.55); } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:var(--text); cursor:pointer; user-select:none; box-shadow: var(--shadow2); } .btn:hover{background:rgba(255,255,255,.08)} .btn.primary{ border-color: rgba(78,161,255,.38); background: linear-gradient(180deg, rgba(78,161,255,.30), rgba(78,161,255,.14)); } .btn.primary:hover{ background: linear-gradient(180deg, rgba(78,161,255,.38), rgba(78,161,255,.18)); } .btn.danger{ border-color: rgba(239,68,68,.38); background: linear-gradient(180deg, rgba(239,68,68,.28), rgba(239,68,68,.12)); } .btn.danger:hover{ background: linear-gradient(180deg, rgba(239,68,68,.36), rgba(239,68,68,.16)); } .btn.block{width:100%} /* ---------- Inputs ---------- */ .input{ width:100%; padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: var(--text); outline:none; } .input:focus{ border-color: rgba(78,161,255,.55); box-shadow:0 0 0 4px rgba(78,161,255,.16); } /* ---------- Cards ---------- */ .card{ background: radial-gradient(500px 260px at 20% 0%, rgba(78,161,255,.10), transparent 60%), radial-gradient(480px 260px at 90% 10%, rgba(20,184,166,.10), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.10); border-radius: var(--radius); box-shadow: var(--shadow); } /* ---------- Layout ---------- */ .container{ display:flex; min-height:100vh; } /* ---------- Sidebar ---------- */ .sidebar{ width:var(--sidebar-w); padding:22px 18px; background: radial-gradient(520px 300px at 10% 0%, rgba(78,161,255,.20), transparent 60%), linear-gradient(180deg, rgba(14,23,50,.96), rgba(7,12,24,.94)); border-right: 1px solid rgba(255,255,255,.10); position:sticky; top:0; height:100vh; } .brand{ border-radius:16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); margin-bottom:18px; overflow:hidden; } .nav{ margin-top:10px; display:flex; flex-direction:column; gap:8px; } .nav a{ display:flex; align-items:center; justify-content:space-between; padding:12px 12px; border-radius:16px; border:1px solid transparent; color: rgba(242,246,255,.92); } .nav a:hover{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); } .nav a.active{ background: linear-gradient(180deg, rgba(78,161,255,.20), rgba(78,161,255,.10)); border-color: rgba(78,161,255,.30); box-shadow: 0 10px 30px rgba(78,161,255,.12); } .nav a .right{ color: var(--muted); font-size:12px; } /* ---------- Main ---------- */ .main{ flex:1; padding:26px 26px 34px; min-width:0; } .topbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); box-shadow: var(--shadow2); margin-bottom:18px; } .top-left{display:flex; align-items:center; gap:12px; min-width:0} .top-right{display:flex; align-items:center; gap:10px} .burger{ display:none; width:44px; height:44px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); cursor:pointer; } .burger:hover{background: rgba(255,255,255,.07)} .burger span{ display:block; width:18px; height:2px; background: rgba(242,246,255,.92); margin:4px auto; border-radius:2px; } .page{ padding:18px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); } /* ---------- Grid ---------- */ .grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; } .col-12{grid-column: span 12} .col-6{grid-column: span 6} .col-4{grid-column: span 4} .col-3{grid-column: span 3} /* KPI Cards */ .kpi{padding:16px} .kpi .num{font-size:24px;font-weight:950;margin-top:6px} .kpi .label{color:var(--muted); font-size:12px} .kpi .trend{margin-top:10px; font-size:12px; color: rgba(242,246,255,.86)} .kpi .trend b{color:var(--accent3)} /* ---------- Table (generic) ---------- */ .table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius: 16px; border:1px solid rgba(255,255,255,.10); } .table th, .table td{ padding:12px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,.08); font-size:13px; } .table th{ color: rgba(242,246,255,.86); background: rgba(255,255,255,.04); font-weight:800; } .table tr:hover td{background: rgba(255,255,255,.03)} .table td{color: rgba(242,246,255,.92)} .table .muted{color:var(--muted)} /* ========================================================= Tickets Page (aus der View rausgezogen) ========================================================= */ .tickets-toolbar{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:12px; } .tickets-toolbar .left{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-width:0; } .tickets-toolbar .right{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .tickets-filters{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin: 10px 0 14px; } .tickets-filters .input{ min-width: 220px; } .table-wrap{ overflow:auto; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.02); } /* scoped: nicht global alle tables killen */ .tickets-table{ width:100%; border-collapse:separate; border-spacing:0; min-width: 980px; } .tickets-table thead th{ text-align:left; font-size: 12px; letter-spacing: .02em; opacity: 1; /* wichtig: im Light Theme nicht ausgrauen */ padding: 12px 12px; border-bottom: 1px solid rgba(255,255,255,.10); position: sticky; top: 0; background: rgba(10,14,20,.92); backdrop-filter: blur(6px); z-index: 1; color: rgba(242,246,255,.94); font-weight: 850; } .tickets-table tbody td{ padding: 12px 12px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; font-size: 13px; } .tickets-table tbody tr{ cursor:pointer; transition: filter .12s ease, background .12s ease; } .tickets-table tbody tr:hover{ background: rgba(255,255,255,.03); filter: brightness(1.06); } .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;} .muted{opacity:.75;} .nowrap{white-space:nowrap;} .subject{ max-width: 520px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } .pill{ display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); font-size: 12px; font-weight: 800; white-space: nowrap; } .pill.small{ font-size: 11px; padding: 5px 9px; font-weight: 800; } .empty{ padding: 18px; border-radius: 16px; border: 1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.03); } /* ---------- Mobile Off-canvas Sidebar ---------- */ .overlay{ display:none; position:fixed; inset:0; background: rgba(0,0,0,.60); z-index:40; } @media (max-width: 980px){ .main{padding:18px} .sidebar{ position:fixed; left:-100%; top:0; height:100vh; z-index:50; transition: left .22s ease; box-shadow: 0 30px 90px rgba(0,0,0,.70); } body.sidebar-open .sidebar{left:0} body.sidebar-open .overlay{display:block} .overlay{display:block; opacity:0; pointer-events:none; transition: opacity .22s ease} body.sidebar-open .overlay{opacity:1; pointer-events:auto} .burger{display:inline-block} } @media (max-width: 720px){ .topbar{flex-direction:column; align-items:stretch} .top-right{justify-content:flex-end} .grid{grid-template-columns: repeat(6, 1fr)} .col-6{grid-column: span 6} .col-4{grid-column: span 6} .col-3{grid-column: span 6} .page{padding:14px} } @media (max-width: 520px){ .main{padding:14px} .grid{grid-template-columns: repeat(4, 1fr)} .col-12,.col-6,.col-4,.col-3{grid-column: span 4} .btn{width:100%} } /* ========================================================= Light Theme Overrides aktiv via: ========================================================= */ [data-theme="light"]{ --bg:#f6f8ff; --bg2:#edf2ff; --panel:#ffffff; --panel2:#f7f9ff; --card:#ffffff; --card2:#f7f9ff; --text:#0b1224; --text2:rgba(11,18,36,.88); --muted:rgba(11,18,36,.60); --border:rgba(11,18,36,.10); --accent:#0b5fff; --accent2:#16a34a; --accent3:#0ea5a4; --danger:#dc2626; --shadow: 0 16px 50px rgba(11,18,36,.14); --shadow2: 0 10px 26px rgba(11,18,36,.10); } [data-theme="light"] body{ background: radial-gradient(900px 600px at 12% -10%, rgba(11,95,255,.14), transparent 58%), radial-gradient(900px 700px at 92% 12%, rgba(14,165,164,.10), transparent 55%), radial-gradient(800px 520px at 70% 110%, rgba(22,163,74,.08), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg2)); background-attachment: fixed; background-repeat:no-repeat; color:var(--text); } /* Pills/Badges im Light Theme besser lesbar */ [data-theme="light"] .badge{ background: rgba(11,95,255,.10); border: 1px solid rgba(11,95,255,.22); color: rgba(11,18,36,.92); } [data-theme="light"] .badge.success{ background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.20); color: rgba(11,18,36,.92); } [data-theme="light"] .badge.warning{ background: rgba(202,138,4,.10); border-color: rgba(202,138,4,.22); color: rgba(11,18,36,.92); } [data-theme="light"] .badge.danger{ background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.22); color: rgba(11,18,36,.92); } [data-theme="light"] .badge.info{ background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.22); color: rgba(11,18,36,.92); } [data-theme="light"] .badge.muted{ background: rgba(100,116,139,.10); border-color: rgba(100,116,139,.18); color: rgba(11,18,36,.70); } [data-theme="light"] .badge.secondary{ background: rgba(71,85,105,.10); border-color: rgba(71,85,105,.18); color: rgba(11,18,36,.85); } [data-theme="light"] .badge .dot{ box-shadow: 0 0 14px rgba(14,165,164,.35); } /* Buttons im Light Theme */ [data-theme="light"] .btn{ border:1px solid rgba(11,18,36,.12); background:rgba(255,255,255,.82); color: rgba(11,18,36,.92); } [data-theme="light"] .btn:hover{background:rgba(255,255,255,.96)} /* Logout (Danger) knallrot + gut lesbar */ [data-theme="light"] .btn.danger{ border-color: rgba(220,38,38,.55); background: linear-gradient(180deg, rgba(220,38,38,.96), rgba(185,28,28,.92)); color: rgba(255,255,255,.96); box-shadow: 0 14px 30px rgba(220,38,38,.22); } [data-theme="light"] .btn.danger:hover{ background: linear-gradient(180deg, rgba(220,38,38,1), rgba(153,27,27,.96)); } /* Primary Button im Light Theme */ [data-theme="light"] .btn.primary{ border-color: rgba(11,95,255,.30); background: linear-gradient(180deg, rgba(11,95,255,.18), rgba(11,95,255,.10)); color: rgba(11,18,36,.92); } [data-theme="light"] .btn.primary:hover{ background: linear-gradient(180deg, rgba(11,95,255,.22), rgba(11,95,255,.12)); } [data-theme="light"] .input{ border:1px solid rgba(11,18,36,.14); background: rgba(255,255,255,.90); color: var(--text); } [data-theme="light"] .card{ background: radial-gradient(500px 260px at 20% 0%, rgba(11,95,255,.08), transparent 60%), radial-gradient(480px 260px at 90% 10%, rgba(14,165,164,.08), transparent 55%), linear-gradient(180deg, rgba(11,18,36,.02), rgba(11,18,36,.01)); border:1px solid rgba(11,18,36,.10); } [data-theme="light"] .topbar{ background: rgba(255,255,255,.78); border: 1px solid rgba(11,18,36,.10); } [data-theme="light"] .sidebar{ background: radial-gradient(520px 300px at 10% 0%, rgba(11,95,255,.12), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,249,255,.92)); border-right: 1px solid rgba(11,18,36,.10); } [data-theme="light"] .brand{ border-color: rgba(11,18,36,.10); background: rgba(11,18,36,.03); } [data-theme="light"] .nav a{ color: rgba(11,18,36,.92); } [data-theme="light"] .nav a:hover{ background: rgba(11,18,36,.04); border-color: rgba(11,18,36,.08); } [data-theme="light"] .nav a.active{ background: linear-gradient(180deg, rgba(11,95,255,.16), rgba(11,95,255,.08)); border-color: rgba(11,95,255,.22); box-shadow: 0 10px 26px rgba(11,95,255,.10); } [data-theme="light"] .nav a .right{ color: var(--muted); } [data-theme="light"] .burger span{ background: rgba(11,18,36,.90); } [data-theme="light"] .table{ border:1px solid rgba(11,18,36,.10); box-shadow: 0 10px 26px rgba(11,18,36,.10); } /* Tickets: Wrap + Header fix (damit der Text endlich lesbar ist) */ [data-theme="light"] .table-wrap{ border: 1px solid rgba(11,18,36,.10); background: rgba(255,255,255,.70); } [data-theme="light"] .tickets-table thead th{ background: rgba(11,18,36,.78); color: rgba(255,255,255,.95); border-bottom: 1px solid rgba(255,255,255,.16); text-shadow: 0 1px 0 rgba(0,0,0,.35); } /* Pill im Light Theme */ [data-theme="light"] .pill{ border: 1px solid rgba(11,18,36,.16); background: rgba(255,255,255,.85); color: rgba(11,18,36,.92); } [data-theme="light"] .overlay{ background: rgba(11,18,36,.45); } /* ========================================================= Light Theme: Generic tables (fix white-on-light text) ========================================================= */ [data-theme="light"] .table th{ background: rgba(255,255,255,.78); color: rgba(11,18,36,.92); border-bottom: 1px solid rgba(11,18,36,.10); } [data-theme="light"] .table td{ color: rgba(11,18,36,.92); border-bottom: 1px solid rgba(11,18,36,.08); } [data-theme="light"] .table tr:hover td{ background: rgba(11,18,36,.03); } [data-theme="light"] .table .muted{ color: rgba(11,18,36,.60); }