/* Glücksrad Cloud — Admin Panel */ :root { --bg: #f4f5f8; --card: #ffffff; --card-soft: #f8f9fb; --text: #1a1a1a; --text-muted: #6b7280; --border: #e5e7eb; --input-bg: #ffffff; --input-border: #e5e7eb; --primary: #232b52; --primary-text: #ffffff; --success: #16a34a; --warning: #f59e0b; --danger: #dc2626; --code-bg: #f8f9fb; --highlight-bg: #fffbe6; --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04); } /* Dark Mode — aktiviert via */ [data-theme="dark"] { --bg: #15171f; --card: #1f2231; --card-soft: #262a3b; --text: #e6e8ee; --text-muted: #8a92a3; --border: #353a4d; --input-bg: #262a3b; --input-border: #404560; --primary: #4a5599; --primary-text: #ffffff; --success: #22c55e; --warning: #fbbf24; --danger: #f87171; --code-bg: #262a3b; --highlight-bg: #3b3415; --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25); } /* "system"-Mode: kein data-theme Attribut → folgt OS */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #15171f; --card: #1f2231; --card-soft: #262a3b; --text: #e6e8ee; --text-muted: #8a92a3; --border: #353a4d; --input-bg: #262a3b; --input-border: #404560; --primary: #4a5599; --primary-text: #ffffff; --success: #22c55e; --warning: #fbbf24; --danger: #f87171; --code-bg: #262a3b; --highlight-bg: #3b3415; --shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.25); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--text-muted); } small { font-size: 12px; } /* Topbar */ .topbar { display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 56px; background: var(--primary); color: var(--primary-text); box-shadow: var(--shadow); } .topbar .brand { font-weight: 700; font-size: 16px; color: var(--primary-text); } .topbar .brand:hover { text-decoration: none; } .mainnav { display: flex; gap: 4px; flex: 1; } .mainnav a { color: var(--primary-text); opacity: .75; padding: 8px 14px; border-radius: 6px; font-size: 14px; } .mainnav a:hover { opacity: 1; text-decoration: none; background: rgba(255,255,255,.08); } .mainnav a.active { opacity: 1; background: rgba(255,255,255,.15); } .useractions { display: flex; align-items: center; gap: 12px; } .useractions .username { font-size: 13px; opacity: .85; } /* Layout */ .container { max-width: 1280px; margin: 24px auto; padding: 0 24px; } .page-head { margin-bottom: 20px; } .page-head h1 { margin: 0 0 4px 0; font-size: 22px; } /* Cards */ .card { background: var(--card); border-radius: 8px; box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; } /* Stats grid */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .stat { background: var(--card); border-radius: 8px; padding: 16px; box-shadow: var(--shadow); } .stat-num { font-size: 28px; font-weight: 700; } .stat-label { color: var(--text-muted); font-size: 13px; } .stat-online .stat-num { color: var(--success); } .stat-recent .stat-num { color: var(--warning); } .stat-offline .stat-num { color: var(--danger); } /* Tables */ table.data { width: 100%; border-collapse: collapse; } table.data th, table.data td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } table.data th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); font-weight: 600; } table.data tr:last-child td { border-bottom: none; } .empty { text-align: center; color: var(--text-muted); padding: 24px; } /* Status dots */ .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #ccc; } .dot-online { background: var(--success); box-shadow: 0 0 0 3px rgba(22,163,74,.15); } .dot-recent { background: var(--warning); } .dot-offline { background: var(--danger); } /* Badges */ .badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; background: #eee; } .badge-active { background: #dcfce7; color: #166534; } .badge-suspended{ background: #fef9c3; color: #854d0e; } .badge-expired { background: #fee2e2; color: #991b1b; } .badge-revoked { background: #1f2937; color: #fff; } /* Buttons */ .btn { display: inline-block; padding: 8px 16px; border-radius: 6px; border: 1px solid transparent; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; background: #fff; color: var(--text); } .btn:hover { text-decoration: none; } .btn-primary { background: var(--primary); color: var(--primary-text); } .btn-primary:hover { filter: brightness(1.1); } .btn-ghost { background: transparent; color: inherit; border-color: rgba(255,255,255,.2); } .btn-ghost:hover { background: rgba(255,255,255,.1); } .container .btn-ghost { color: var(--text); border-color: var(--border); background: var(--card); } .container .btn-ghost:hover { background: var(--card-soft); } .btn-danger { background: var(--danger); color: #fff; } .btn-sm { padding: 4px 10px; font-size: 12px; } /* Forms */ form label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--text-muted); } form input, form select, form textarea { display: block; width: 100%; padding: 8px 10px; margin-top: 4px; border: 1px solid var(--input-border); border-radius: 6px; font-size: 14px; font-family: inherit; background: var(--input-bg); color: var(--text); } form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(35,43,82,.1); } form textarea { min-height: 80px; resize: vertical; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .error { background: #fee2e2; color: #991b1b; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; } .success { background: #dcfce7; color: #166534; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; } /* Login page */ .loginpage { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #232b52 0%, #4359a8 100%); } .loginbox { background: #fff; padding: 32px; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.2); width: 100%; max-width: 380px; } .loginbox h1 { margin: 0 0 4px 0; font-size: 22px; } .loginbox p { margin: 0 0 20px 0; } .loginbox button { width: 100%; margin-top: 8px; } /* Mono / Code */ code, pre, .mono { font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; font-size: 13px; background: var(--code-bg); color: var(--text); padding: 2px 6px; border-radius: 4px; } pre { padding: 12px; overflow-x: auto; } /* Page actions */ .actions { display: flex; gap: 8px; align-items: center; } .toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } /* Theme-Toggle */ .theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: rgba(255,255,255,.08); border-radius: 6px; } .theme-toggle button { background: transparent; border: none; color: var(--primary-text); opacity: .55; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; font-family: inherit; line-height: 1; } .theme-toggle button.active { opacity: 1; background: rgba(255,255,255,.15); } .theme-toggle button:hover { opacity: .9; } /* Dark-Adjustments für eingefärbte Bereiche */ [data-theme="dark"] .badge-active { background: #14532d; color: #86efac; } [data-theme="dark"] .badge-suspended{ background: #422006; color: #fcd34d; } [data-theme="dark"] .badge-expired { background: #450a0a; color: #fca5a5; } [data-theme="dark"] .badge-revoked { background: #0a0a0a; color: #fff; } [data-theme="dark"] .error { background: #450a0a; color: #fca5a5; } [data-theme="dark"] .success { background: #14532d; color: #86efac; } [data-theme="dark"] .stat-online .stat-num { color: #4ade80; } [data-theme="dark"] .stat-recent .stat-num { color: #fbbf24; } [data-theme="dark"] .stat-offline .stat-num { color: #f87171; } [data-theme="dark"] form input:focus, [data-theme="dark"] form select:focus, [data-theme="dark"] form textarea:focus { box-shadow: 0 0 0 3px rgba(74,85,153,.3); } [data-theme="dark"] .dot { background: #555; } [data-theme="dark"] .dot-online { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.15); } [data-theme="dark"] .dot-recent { background: #fbbf24; } [data-theme="dark"] .dot-offline { background: #f87171; } /* Auch im prefers-color-scheme: dark + ohne data-theme */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) .badge-active { background: #14532d; color: #86efac; } :root:not([data-theme]) .badge-suspended{ background: #422006; color: #fcd34d; } :root:not([data-theme]) .badge-expired { background: #450a0a; color: #fca5a5; } :root:not([data-theme]) .badge-revoked { background: #0a0a0a; color: #fff; } :root:not([data-theme]) .error { background: #450a0a; color: #fca5a5; } :root:not([data-theme]) .success { background: #14532d; color: #86efac; } :root:not([data-theme]) .stat-online .stat-num { color: #4ade80; } :root:not([data-theme]) .stat-recent .stat-num { color: #fbbf24; } :root:not([data-theme]) .stat-offline .stat-num { color: #f87171; } } /* ─── Sub-Cards (Status, Lizenz, Hinweise) ───────────────────────────────── */ .subcard { background: var(--card-soft); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; box-shadow: none; } .subcard.subcard-warn { background: var(--highlight-bg); border-color: var(--border); } .subcard summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; gap: 6px; } .subcard summary::-webkit-details-marker { display: none; } .subcard summary::before { content: "▸"; font-size: 12px; transition: transform .15s; color: var(--text-muted); } .subcard[open] summary::before { transform: rotate(90deg); } .subcard code { word-break: break-all; } .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .info-grid .info-cell small { display: block; margin-bottom: 2px; } /* ─── Action-Menü (Tabs oben in Detailseiten) ─────────────────────────────── */ .action-menu { display: flex; gap: 4px; flex-wrap: wrap; background: var(--card-soft); border: 1px solid var(--border); border-radius: 8px; padding: 4px; margin-bottom: 16px; } .action-menu a, .action-menu button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 6px; font-size: 14px; color: var(--text); text-decoration: none; border: none; background: transparent; cursor: pointer; font-family: inherit; } .action-menu a:hover, .action-menu button:hover { background: var(--card); text-decoration: none; } .action-menu a.active, .action-menu .active { background: var(--primary); color: var(--primary-text); } .action-menu .sep { flex: 1; } /* ─── Inline-Checkbox sauber formatiert ───────────────────────────────────── */ .checkbox-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--card-soft); border: 1px solid var(--border); border-radius: 6px; margin: 8px 0; cursor: pointer; font-size: 13px; color: var(--text); } .checkbox-row input[type="checkbox"] { width: auto; margin: 2px 0 0 0; accent-color: var(--primary); } .checkbox-row.danger { background: color-mix(in srgb, var(--danger) 8%, var(--card-soft)); border-color: color-mix(in srgb, var(--danger) 25%, var(--border)); } .checkbox-row .ck-text { flex: 1; line-height: 1.45; } .checkbox-row .ck-hint { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; } /* ─── Form-Footer (Speichern + Löschen unten rechts) ──────────────────────── */ .form-footer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .form-footer .spacer { flex: 1; } /* ─── Preis-Bild-Thumb (in Tabellen) ──────────────────────────────────────── */ .prize-thumb { width: 56px; height: 56px; border-radius: 6px; background: var(--card-soft); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; position: relative; transition: border-color .15s, transform .15s; } .prize-thumb:hover { border-color: var(--primary); transform: scale(1.04); } .prize-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .prize-thumb .thumb-placeholder { font-size: 11px; color: var(--text-muted); text-align: center; padding: 4px; line-height: 1.2; } .prize-thumb input[type="file"] { display: none; } .prize-thumb .upload-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; display: none; align-items: center; justify-content: center; } .prize-thumb:hover .upload-overlay { display: flex; } /* ─── Lightbox ────────────────────────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; } .lightbox.open { display: flex; } .lightbox img, .lightbox video { max-width: 95vw; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.6); } .lightbox .lb-close { position: absolute; top: 16px; right: 20px; background: rgba(255,255,255,.15); color: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 22px; cursor: pointer; line-height: 1; } .lightbox .lb-close:hover { background: rgba(255,255,255,.3); } .lightbox .lb-caption { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: #ddd; font-size: 13px; } img.clickable-thumb { cursor: zoom-in; transition: opacity .15s; } img.clickable-thumb:hover { opacity: .85; } /* ═══ MOBILE / RESPONSIVE ════════════════════════════════════════════════ Greifen unter 768px (Tablet portrait + Smartphone). Desktop bleibt unverändert. */ /* Hamburger-Button — auf Desktop ausgeblendet */ .nav-burger { display: none; background: transparent; border: none; color: var(--primary-text); font-size: 22px; cursor: pointer; padding: 6px 10px; border-radius: 6px; line-height: 1; } .nav-burger:hover { background: rgba(255,255,255,.1); } @media (max-width: 768px) { /* ── Topbar: Burger-Menü ───────────────────────────────────────────── */ .topbar { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 8px; } .topbar .brand { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-burger { display: inline-flex; } .mainnav { display: none; flex-basis: 100%; flex-direction: column; background: rgba(0,0,0,.18); border-radius: 8px; padding: 6px; gap: 2px; } .mainnav.open { display: flex; } .mainnav a { padding: 10px 12px; font-size: 14px; } .useractions { flex-wrap: wrap; gap: 8px; width: auto; } .useractions .username { display: none; } .theme-toggle button { padding: 4px 6px; font-size: 13px; } /* ── Container ───────────────────────────────────────────────────────── */ .container { margin: 12px auto; padding: 0 12px; } .page-head h1 { font-size: 18px; } .page-head .toolbar { flex-direction: column; align-items: stretch; gap: 8px; } .page-head .toolbar .btn { align-self: flex-start; } /* ── Cards: weniger Padding ──────────────────────────────────────────── */ .card { padding: 14px; } /* ── Stat-Grid: 2 Spalten statt 4 ────────────────────────────────────── */ .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .stat { padding: 12px; } .stat-num { font-size: 22px; } .stat-label { font-size: 12px; } /* ── Form: 1 Spalte ──────────────────────────────────────────────────── */ .form-row { grid-template-columns: 1fr; gap: 10px; } /* ── Tabellen → Card-View pro Zeile (kein horizontales Scrollen) ─────── */ .card { overflow-x: hidden; } table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; } table.data thead { display: none; } table.data tr { border: 1px solid var(--border); border-radius: 8px; background: var(--card-soft); padding: 6px 10px; margin-bottom: 8px; } /* "leere Liste"-Zeile bleibt zentriert */ table.data tr td.empty { text-align: center; padding: 18px 8px; } table.data td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: none; padding: 6px 0; text-align: right; font-size: 13px; border-bottom: 1px dashed var(--border); } table.data tr td:last-child { border-bottom: none; padding-bottom: 0; } table.data tr td:first-child { padding-top: 0; } /* Label aus data-label Attribut, wird via Template gesetzt */ table.data td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; text-align: left; flex-shrink: 0; } /* Cells ohne data-label (z.B. Action-Buttons) bekommen ganze Breite */ table.data td:not([data-label]) { justify-content: stretch; text-align: left; } table.data td:not([data-label]) > * { width: 100%; } table.data td:not([data-label]) .btn { display: block; width: 100%; text-align: center; } /* ── Action-Menü: scrollbar wenn zu breit ────────────────────────────── */ .action-menu { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .action-menu a, .action-menu button { white-space: nowrap; flex-shrink: 0; padding: 6px 10px; font-size: 13px; } /* ── Form-Footer (Speichern, Löschen, ...) ──────────────────────────── */ .form-footer { flex-direction: column-reverse; align-items: stretch; gap: 8px; } .form-footer .btn { width: 100%; text-align: center; } /* ── Subcards info-grid ──────────────────────────────────────────────── */ .info-grid { grid-template-columns: 1fr; } /* ── Login-Seite ─────────────────────────────────────────────────────── */ .loginpage { padding: 16px; } .loginbox { padding: 24px 18px; } /* ── Buttons: Mindesthoehe fuer Touch ────────────────────────────────── */ .btn { min-height: 36px; } .btn-sm { min-height: 28px; } } /* Sehr kleine Geräte (< 480px) */ @media (max-width: 480px) { .topbar .brand { font-size: 13px; } .stat-grid { grid-template-columns: 1fr 1fr; } .stat-num { font-size: 20px; } table.data { font-size: 11px; } table.data th, table.data td { padding: 6px 8px; } /* Lightbox-Close-Button leichter erreichbar */ .lightbox .lb-close { width: 44px; height: 44px; top: 10px; right: 10px; } }