/* ═══════════════════════════════════════════════════════════════ hub.css – Stylesheet der Plattform (tabillyHub) Genutzt von: login.php · dashboard.php · profile.php admin/*.php Nicht genutzt von: index.php (→ style.css) ═══════════════════════════════════════════════════════════════ */ /* ── Variablen (Hub-Standard) ─────────────────────────────────── Bildet die Basis. Wird zur Laufzeit durch branding_css() im mit Kundenwerten überschrieben (body.page-hub). Bewusst von style.css entkoppelt – kann eigenständig weiterentwickelt werden. ─────────────────────────────────────────────────────────────── */ :root { /* --- Basisfarben (Hub-Standard) ----------------------------- */ --primary-blue: #1455C0; --primary-blue-dark: #0f44a8; --accent-red: #FF0000; --accent-red-dark: #d60000; /* --- Neutrals / Texte -------------------------------------- */ --text-dark: #333333; --dark: #1f2937; --color-text-secondary: #4a5568; --color-text-label: #374151; --color-text-hint: #9ca3af; /* --- Hintergründe / Flächen -------------------------------- */ --bg-light: #F7F7F9; --bg-white: #FFFFFF; --bg-subtle: #f3f4f6; --bg-hover-blue: #eef2ff; /* --- Dunkel (Footer) --------------------------------------- */ --color-footer-bg: #111827; --color-footer-text: #e5e7eb; /* --- Borders ----------------------------------------------- */ --border-default: #e1e4ec; --border-strong: #cfd3df; /* --- Rot-Palette -------------------------------------------- */ --color-red-text: #7f1d1d; --color-red-border: #dc2626; --color-red-bg: #fee2e2; --color-red-muted: #fca5a5; /* --- Grün-Palette ------------------------------------------- */ --color-green-border: #10b981; --color-green-text: #166534; /* --- Gelb-Palette ------------------------------------------- */ --color-yellow-border: #fbbf24; --color-yellow-bg: #fef9c3; --color-yellow-text: #854d0e; /* --- RGB-Kanäle -------------------------------------------- */ --primary-blue-rgb: 20, 85, 192; --accent-red-rgb: 255, 0, 0; --black-rgb: 0, 0, 0; --red-strong-rgb: 220, 38, 38; --green-rgb: 16, 185, 129; /* --- Opacity-Stufen ---------------------------------------- */ --primary-blue-05: rgba(var(--primary-blue-rgb), 0.05); --primary-blue-06: rgba(var(--primary-blue-rgb), 0.06); --accent-red-06: rgba(var(--accent-red-rgb), 0.06); --accent-red-08: rgba(var(--red-strong-rgb), 0.08); --accent-red-25: rgba(var(--red-strong-rgb), 0.25); --shadow-06: rgba(var(--black-rgb), 0.06); --shadow-08: rgba(var(--black-rgb), 0.08); --shadow-09: rgba(var(--black-rgb), 0.09); --shadow-50: rgba(var(--black-rgb), 0.50); --green-08: rgba(var(--green-rgb), 0.08); --green-10: rgba(var(--green-rgb), 0.10); /* --- Gradienten -------------------------------------------- */ --gradient-header: linear-gradient(135deg, #ffffff 0%, #e8eefb 40%, #fdfdfd 100%); /* --- Schriften ---------------------------------------------- */ --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: monospace; /* --- Layout ------------------------------------------------- */ --max-width: 1100px; } /* ── Variablen (Admin + Profil) ───────────────────────────────── Scoped auf body.page-admin und main.profile-main. ─────────────────────────────────────────────────────────────── */ main.profile-main, body.page-admin { --color-blue-deep: #1e40af; --color-blue-light: #dbeafe; --color-blue-border: #93c5fd; --color-blue-lighter: #bfdbfe; --color-red-mid: #991b1b; --color-green-bg: #dcfce7; --color-member-bg: #f0fdf4; --color-member-border: #86efac; --color-yellow-deep: #92400e; --color-orange: #f97316; --color-orange-bg: #fff7ed; --color-orange-light: #ffedd5; --color-code-text: #86efac; } /* ── Branding-Override (body.page-hub) ────────────────────────── Kunden-Farben aus branding_css() überschreiben diese Werte. Ohne branding.json gelten die Hub-Standard-Werte aus :root. ─────────────────────────────────────────────────────────────── */ body.page-hub { --primary-blue: #1455C0; --primary-blue-dark: #0f44a8; --accent-red: #FF0000; --accent-red-dark: #d60000; } /* ══════════════════════════════════════════════════════════════ BASIS ══════════════════════════════════════════════════════════════ */ html { scrollbar-gutter: stable; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-base); color: var(--text-dark); background-color: var(--bg-light); line-height: 1.6; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } /* Spam-Schutz */ .textschutz { direction: rtl; unicode-bidi: bidi-override; display: inline-block; user-select: none; } .textschutz .keintext { display: none; } .mailschutz::before { content: "ed."; } /* Footer */ footer { background-color: var(--color-footer-bg); color: var(--color-footer-text); padding: 1.5rem 0 1.8rem; font-size: 0.85rem; margin-top: 2rem; } .footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; } .footer-links { display: flex; gap: 1.2rem; flex-wrap: wrap; } .footer-links a { color: var(--color-text-hint); } .footer-links a:hover { color: var(--bg-white); } .legal-section { display: none; } .legal-section.open { display: block; } /* Powered-by-Hinweis */ body footer .footer-product-hint { font-size: 0.8rem; color: var(--color-text-hint); text-decoration: none; } body footer .footer-product-hint a { color: var(--color-text-hint); text-decoration: none; } body footer .footer-product-hint a:hover { color: var(--color-footer-text); } /* ══════════════════════════════════════════════════════════════ HUB-SPEZIFISCH ══════════════════════════════════════════════════════════════ */ /* ── Header (alle Hub-Seiten) ───────────────────────────────── */ header { background: var(--gradient-header); border-bottom: 1px solid var(--border-default); padding: 0; } .header-inner { max-width: var(--max-width); margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .site-logo { width: 180px; aspect-ratio: 6714 / 2160; object-fit: contain; display: block; } /* ── User-Bar (dashboard.php) ───────────────────────────────── */ .user-bar { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; color: var(--color-text-secondary); } .user-bar strong { color: var(--dark); } .btn-logout { background: transparent; color: var(--primary-blue); border: 1px solid var(--primary-blue); border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.85rem; cursor: pointer; font-weight: 500; line-height: 1rem; } .btn-logout:hover { background: var(--primary-blue-06); } /* ── Login-Seite ────────────────────────────────────────────── */ body.page-login { min-height: 100vh; display: flex; flex-direction: column; } body.page-login main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .login-card { background: var(--bg-white); border-radius: 14px; padding: 2rem 2.5rem; box-shadow: 0 8px 32px var(--shadow-08); border: 1px solid var(--border-default); width: 100%; max-width: 400px; } .login-card h1 { font-size: 1.4rem; color: var(--dark); margin-bottom: 0.3rem; } .login-card p { font-size: 0.9rem; color: var(--color-text-secondary); margin-bottom: 1.5rem; } .login-error { background: var(--color-red-bg); border-left: 4px solid var(--color-red-border); color: var(--color-red-text); border-radius: 6px; padding: 0.7rem 1rem; font-size: 0.9rem; margin-bottom: 1rem; } /* Lockout */ .login-lockout { background: var(--color-red-bg); border: 1px solid var(--color-red-muted); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1.25rem; } .lockout-text { font-size: 0.9rem; color: var(--color-red-text); margin-bottom: 0.5rem; } .lockout-timer { font-size: 0.9rem; color: var(--color-red-text); margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; } .lockout-bar-outer { height: 4px; background: var(--bg-subtle); border-radius: 999px; overflow: hidden; margin-bottom: 0.5rem; } .lockout-bar-inner { height: 100%; width: 100%; background: var(--color-red-text); border-radius: 999px; transition: width 0.5s linear; } .lockout-hint { font-size: 0.8rem; color: var(--color-text-hint); } /* Login-Buttons */ .login-actions { display: flex; gap: .75rem; align-items: center; margin-top: 1rem; } .btn-login { width: 100%; padding: 0.8rem; background: var(--accent-red); color: var(--bg-white); border: 1px solid var(--accent-red); border-radius: 999px; font-size: 1rem; font-weight: 600; cursor: pointer; letter-spacing: 0.02em; } .btn-login:hover { background: var(--accent-red-dark); } .btn-cancel-login { display: inline-block; width: 100%; padding: 0.8rem; background: transparent; color: var(--primary-blue); border: 1px solid var(--primary-blue); border-radius: 999px; font-size: 1rem; font-weight: 600; text-align: center; letter-spacing: 0.02em; line-height: 1.2; } .btn-cancel-login:hover { background: var(--primary-blue-06); } .btn-login--warn { background: var(--color-yellow-bg); border: 1px solid var(--color-yellow-border); color: var(--color-yellow-text); } .btn-login--warn:hover { background: var(--color-yellow-bg); filter: brightness(.9); } /* 2FA-Buttons */ .tfa-resend-form .btn-link { margin-top: 1rem; background: transparent; color: var(--primary-blue); border: 1px solid var(--primary-blue); border-radius: 999px; padding: 0.8rem; font-size: 1rem; font-weight: 600; cursor: pointer; width: 100%; } .btn-link:hover { background: var(--primary-blue-06); } .tfa-resend-form .btn-cancel-login { margin-top: 1rem; display: block; } /* Formulare (Login-Card) */ label { display: block; margin-bottom: 0.2rem; } label.required::after { content: ' *'; color: var(--color-red-border); font-weight: 700; } input, textarea, select { width: 100%; padding: 0.6rem 0.7rem; border-radius: 6px; border: 1px solid var(--border-strong); font-size: 0.95rem; font-family: var(--font-base); } textarea { min-height: 120px; resize: vertical; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--primary-blue); border-color: var(--primary-blue); } /* Passwort-Stärke */ .pw-strength-bar { height: .35rem; background: var(--border-default); border-radius: 2px; margin-top: .35rem; overflow: hidden; } .pw-strength-fill { height: 100%; width: 0; border-radius: 2px; transition: width .2s ease, background .2s ease; } .pw-requirements { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .8rem; } .pw-requirements li { white-space: nowrap; } .req-ok { color: var(--color-green-border); } .req-fail { color: var(--color-red-border); } /* ── Dashboard ──────────────────────────────────────────────── */ body.page-dashboard { min-height: 100vh; display: flex; flex-direction: column; } body.page-dashboard main { flex: 1; max-width: var(--max-width); margin: 0 auto; padding: 2rem 1.5rem; width: 100%; } body.page-dashboard h1 { font-size: 1.5rem; color: var(--dark); margin-bottom: 0.3rem; } .welcome { font-size: 0.95rem; color: var(--color-text-secondary); margin-bottom: 2rem; } .services-grid-dashboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; } .service-tile { background: var(--bg-white); border: 1px solid var(--border-default); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; transition: box-shadow 0.15s, transform 0.15s; } .service-tile:hover { box-shadow: 0 6px 20px var(--shadow-09); transform: translateY(-2px); } .tile-icon { font-size: 2rem; line-height: 1; } .tile-label { font-size: 1.05rem; font-weight: 700; color: var(--dark); } .tile-desc { font-size: 0.85rem; color: var(--color-text-secondary); flex: 1; } .tile-type { font-size: 0.72rem; color: var(--color-text-hint); text-transform: uppercase; letter-spacing: 0.04em; } .btn-open { margin-top: 0.5rem; background: var(--primary-blue); border: 1px solid var(--primary-blue); color: var(--bg-white); border-radius: 999px; padding: 0.55rem 1.2rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; width: 100%; } .btn-open:hover { background: var(--primary-blue-dark); } .btn-cancel { margin-top: 0.5rem; background: transparent; color: var(--primary-blue); border: 1px solid var(--primary-blue); border-radius: 999px; padding: 0.55rem 1.2rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; width: 100%; } .btn-cancel:hover { background: var(--primary-blue-06); } .empty { text-align: center; color: var(--color-text-hint); padding: 3rem; font-size: 0.95rem; } /* iFrame-Overlay */ .overlay { display: none; position: fixed; inset: 0; background: var(--shadow-50); z-index: 100; align-items: center; justify-content: center; } .overlay.open { display: flex; } .iframe-box { background: var(--bg-white); border-radius: 14px; overflow: hidden; width: 92vw; height: 88vh; display: flex; flex-direction: column; } .iframe-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-default); font-weight: 600; color: var(--dark); } .iframe-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--color-text-hint); line-height: 1; } .iframe-close:hover { color: var(--dark); } iframe { flex: 1; border: none; width: 100%; } /* ── Alerts & Badges ────────────────────────────────────────── */ .alert { padding: .7rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: .9rem; } .alert-ok { background: var(--green-10); border-left: 4px solid var(--color-green-border); color: var(--color-green-text); } .alert-err { background: var(--accent-red-08); border-left: 4px solid var(--color-red-border); color: var(--color-red-text); } .alert-warn { background: var(--color-yellow-bg); border-left: 4px solid var(--color-yellow-border); color: var(--color-yellow-text); } .badge-active { color: var(--color-green-text); background: var(--color-green-bg); border-radius: 999px; padding: .15rem .6rem; font-size: .78rem; } .badge-inactive { color: var(--color-red-text); background: var(--color-red-bg); border-radius: 999px; padding: .15rem .6rem; font-size: .78rem; } .badge-ok { color: var(--color-green-text); background: var(--color-green-bg); border-radius: 999px; padding: .15rem .55rem; font-size: .75rem; } .badge-locked { color: var(--color-red-text); background: var(--color-red-bg); border-radius: 999px; padding: .15rem .55rem; font-size: .75rem; white-space: nowrap; } .badge-temp-locked { color: var(--color-yellow-text); background: var(--color-yellow-bg); border-radius: 999px; padding: .15rem .55rem; font-size: .75rem; white-space: nowrap; } .count-badge { background: var(--bg-subtle); border-radius: 999px; padding: .1rem .6rem; font-size: .75rem; color: var(--color-text-secondary); } /* ── Hilfsklassen ───────────────────────────────────────────── */ .u-hidden { display: none; } .mt-sm { margin-top: .75rem; } .text-muted-sm { font-size: .8rem; color: var(--color-text-hint); } /* ══════════════════════════════════════════════════════════════ ADMIN & PROFIL ══════════════════════════════════════════════════════════════ */ body.page-admin main { max-width: var(--max-width); margin: 0 auto; padding: 2rem 1.5rem; } /* Admin-Tabelle */ .admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 1.5rem; } .admin-table th, .admin-table td { border: 1px solid var(--border-default); padding: .55rem .75rem; text-align: left; vertical-align: middle; } .admin-table th { background: var(--bg-subtle); font-weight: 600; } .admin-table tr:hover td { background: var(--bg-subtle); } .td-small { font-size: .78rem; } .td-url { font-size: .8rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .th-drag { width: 2rem; } .td-actions { display: flex; gap: .3rem; align-items: center; flex-wrap: nowrap; } /* Admin-Formular */ .admin-form { background: var(--bg-white); border: 1px solid var(--border-default); border-radius: 12px; padding: 1.5rem; margin-top: 1.5rem; } .admin-form h2 { font-size: 1.1rem; margin-bottom: 1rem; color: var(--dark); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-group { display: flex; flex-direction: column; gap: .25rem; } .form-group label { font-size: .85rem; font-weight: 600; color: var(--color-text-label); } .form-group input, .form-group textarea, .form-group select { padding: .5rem .6rem; border: 1px solid var(--border-strong); border-radius: 6px; font-size: .9rem; font-family: var(--font-base); } .form-group textarea { min-height: 80px; resize: vertical; } .form-group small { font-size: .75rem; color: var(--color-text-hint); } .form-group--full { grid-column: 1 / -1; } .input-readonly { background: var(--bg-subtle); } .input-pw-reset { width: 260px; } .checkbox-inline { width: auto; margin: 0; } .select-inline { padding: .4rem .6rem; border: 1px solid var(--border-strong); border-radius: 6px; font-size: .9rem; } .form-actions { margin-top: 1rem; display: flex; gap: .75rem; align-items: center; } .btn-open--auto { width: auto; padding: .55rem 1.5rem; } .btn-cancel--auto { width: auto; padding: .55rem 1.5rem; } .section-divider { margin-top: 1.25rem; border-top: 1px solid var(--border-default); padding-top: 1rem; } .section-label { font-size: .85rem; font-weight: 600; color: var(--color-text-label); margin-bottom: .5rem; } .inline-form { margin-top: .75rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } /* Admin-Buttons */ .btn-sm { padding: .3rem .7rem; font-size: .82rem; border-radius: 6px; border: none; cursor: pointer; font-weight: 500; } .btn-edit { background: var(--color-blue-light); color: var(--color-blue-deep); } .btn-del { background: var(--color-red-bg); color: var(--color-red-mid); } .btn-del:disabled { opacity: .35; cursor: not-allowed; } .btn-toggle { background: var(--color-yellow-bg); color: var(--color-yellow-text); } .btn-unlock { background: var(--color-green-bg); color: var(--color-green-text); } .btn-pw { margin-top: 1.8rem; margin-left: 0.5rem; background: var(--color-yellow-bg); color: var(--color-yellow-text); border: 1px solid var(--color-yellow-text); border-radius: 999px; padding: 0.55rem 1.2rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; width: 100%; } .btn-pw--auto { width: auto; padding: .55rem 1.5rem; } .btn-edit:hover { background: var(--color-blue-border); } .btn-del:hover { background: var(--color-red-border); } .btn-pw:hover { background: var(--color-yellow-border); } .btn-toggle:hover { background: var(--color-yellow-border); } .btn-unlock:hover { background: var(--color-green-border); } /* Admin-Navigation */ .admin-nav { display: flex; gap: .5rem; margin-bottom: 1.75rem; border-bottom: 2px solid var(--border-default); padding-bottom: .75rem; } .admin-nav-link { padding: .4rem 1rem; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--color-text-secondary); text-decoration: none; border: 1px solid transparent; transition: all .15s; } .admin-nav-link:hover { border-color: var(--border-default); background: var(--bg-subtle); } .admin-nav-link.active { background: var(--border-default); color: var(--text-dark); border-color: var(--border-default); } .admin-nav-link.has-pending { color: var(--color-yellow-deep); border-color: var(--color-yellow-border); background: var(--color-yellow-bg); } .admin-nav-link.has-pending:hover { background: var(--color-yellow-border); } .nav-pending-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--color-red-border); color: var(--bg-white); border-radius: 999px; font-size: .7rem; font-weight: 700; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; margin-left: .3rem; vertical-align: middle; line-height: 1; } .sub-nav { margin-top: 1rem; } .form-group--checkbox-inline { flex-direction: row; align-items: center; gap: .5rem; } .form-group--checkbox-inline label { margin: 0; font-weight: 600; font-size: .85rem; color: var(--color-text-label); } /* Gruppen-Tags */ .group-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; } .group-tag { display: inline-flex; align-items: center; gap: .3rem; background: var(--color-blue-light); color: var(--color-blue-deep); border-radius: 999px; padding: .2rem .65rem; font-size: .78rem; border: 1px solid var(--color-blue-border); } .group-tag form { display: inline; } .group-tag button { background: none; border: none; cursor: pointer; color: var(--color-blue-deep); font-size: .8rem; line-height: 1; padding: 0; } .group-tag button:hover { color: var(--color-red-mid); } /* Mitglieder-Tags */ .member-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; } .member-tag { display: inline-flex; align-items: center; gap: .3rem; background: var(--color-member-bg); color: var(--color-green-text); border-radius: 999px; padding: .2rem .65rem; font-size: .78rem; border: 1px solid var(--color-member-border); } .member-tag form { display: inline; } .member-tag button { background: none; border: none; cursor: pointer; color: var(--color-green-text); font-size: .8rem; line-height: 1; padding: 0; } .member-tag button:hover { color: var(--color-red-mid); } /* Passwort-Sektion */ .pw-section { background: var(--color-yellow-bg); border: 1px solid var(--color-yellow-border); border-radius: 10px; padding: 1rem; margin-top: 1rem; } .pw-section h3 { font-size: .95rem; font-weight: 600; color: var(--color-yellow-deep); margin-bottom: .75rem; } /* Lockout-Banner */ .lockout-banner { background: var(--color-red-bg); border: 1px solid var(--color-red-muted); border-left: 4px solid var(--color-red-border); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; } .lockout-banner-title { font-weight: 700; color: var(--color-red-text); font-size: .95rem; margin-bottom: .35rem; } .lockout-banner-detail { font-size: .82rem; color: var(--color-red-mid); } /* CLI-Hilfe */ .cli-help-wrap { margin: 2rem 0 1rem; } .cli-help-toggle { width: 100%; text-align: left; background: var(--color-orange-bg); border: 1px solid var(--color-orange); border-radius: 10px; padding: .75rem 1rem; font-size: .9rem; font-weight: 600; color: var(--color-yellow-deep); cursor: pointer; transition: background .15s; } .cli-help-toggle:hover { background: var(--color-orange-light); } .cli-help-toggle[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .cli-help-panel { background: var(--bg-white); border: 1px solid var(--color-orange); border-top: none; border-radius: 0 0 10px 10px; padding: 1.25rem; } .cli-intro { font-size: .85rem; color: var(--color-text-secondary); margin-bottom: 1.25rem; line-height: 1.6; } .cli-section { margin-bottom: 1.25rem; } .cli-section-title { font-size: .85rem; font-weight: 700; color: var(--dark); margin-bottom: .4rem; } .cli-code-wrap { position: relative; } .cli-code { background: var(--color-footer-bg); color: var(--color-code-text); border-radius: .5rem; padding: .75rem 2.5rem .75rem .75rem; font-size: .72rem; font-family: var(--font-mono); white-space: pre; overflow-x: auto; margin: 0; } .cli-copy { position: absolute; top: .4rem; right: .4rem; background: none; border: none; cursor: pointer; font-size: .85rem; opacity: .6; transition: opacity .15s; } .cli-copy:hover { opacity: 1; } .drag-handle { cursor: grab; color: var(--color-text-hint); padding-right: .5rem; } /* Rollen-Picker */ .roles-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; } .role-checkbox-label { display: inline-flex; align-items: center; gap: .35rem; background: var(--bg-subtle); border: 1px solid var(--border-default); border-radius: 999px; padding: .3rem .75rem; font-size: .85rem; cursor: pointer; font-weight: 400; } .role-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; } .role-tag { background: var(--color-blue-light); color: var(--color-blue-deep); border-radius: 999px; padding: .2rem .6rem; font-size: .78rem; cursor: pointer; border: 1px solid var(--color-blue-border); } .role-tag:hover { background: var(--color-blue-lighter); } /* Formular-Abschnittsbeschriftung */ .form-section { font-size: .85rem; font-weight: 700; color: var(--primary-blue); margin: .75rem 0 .25rem; grid-column: 1 / -1; } .form-section.section-divider { margin-top: 1.25rem; font-size: 1.1rem; } /* 2FA-Gerätetabelle */ .kf-table { table-layout: fixed; width: 100%; } .kf-table col.col-name { width: 18rem; } .kf-table col.col-created { width: auto; } .kf-table col.col-expires { width: auto; } .kf-table col.col-lastused { width: auto; } .kf-table col.col-actions { width: 18rem; } .kf-table th { white-space: nowrap; } .kf-action-views { display: flex; } .kf-actions-edit, .kf-actions-view { display: flex; padding-top: 0px; gap: 0.5rem; } .inline-form { margin-top: 0px; display: inline; } .btn-sm.btn-cancel { margin-top: 0px; width: auto; border: 1px solid var(--primary-blue); } .btn-sm.btn-cancel:hover { background: var(--primary-blue-06); } .btn-sm.btn-pw { margin: 0rem; border-radius: 6px; padding: .3rem .7rem; font-size: 0.82rem; font-weight: 500; cursor: pointer; width: auto; } .kf-name-input { width: 100%; max-width: 18rem; } .code-inline { margin-top: .3rem; font-size: .85rem; } .code-display { font-family: var(--font-mono); font-size: 1.1em; letter-spacing: .1em; } /* Filter- und Aufräum-Leiste */ .filter-bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .75rem; } .filter-input, .filter-select { padding: .35rem .6rem; border-radius: 4px; border: 1px solid var(--border-default); } .cleanup-bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .75rem; } .cleanup-bar select { padding: .35rem .6rem; border-radius: 4px; border: 1px solid var(--border-default); } /* Cartridge-Verwaltung */ .cartridge-selector { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; } .cartridge-btn { padding: .35rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 500; border: 1px solid var(--border-default); background: var(--bg-white); color: var(--color-text-secondary); cursor: pointer; transition: all .15s; text-decoration: none; } .cartridge-btn:hover { border-color: var(--border-strong); } .cartridge-btn.active { background: var(--dark); color: var(--bg-white); border-color: var(--dark); } .svc-card { border: 1px solid var(--border-default); border-radius: 6px; padding: .6rem .75rem; margin-bottom: .5rem; background: var(--bg-white); } .svc-card-title { font-weight: 600; font-size: .85rem; margin-bottom: .25rem; } .svc-meta { font-size: .75rem; color: var(--color-text-hint); } .path-hint { font-family: var(--font-mono); font-size: .72rem; background: var(--bg-subtle); color: var(--color-text-secondary); padding: .15rem .4rem; border-radius: .3rem; } .secret-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .8rem; margin: .25rem 0; } .secret-key { font-family: var(--font-mono); background: var(--bg-subtle); padding: .15rem .4rem; border-radius: .3rem; } .secret-set { color: var(--color-green-text); font-weight: 600; } .secret-miss { color: var(--color-red-border); font-weight: 600; } .webhook-progress { display: flex; flex-direction: column; gap: .4rem; } .webhook-progress-label { font-size: .85rem; } .webhook-progress-bar { height: .35rem; background: var(--color-yellow-border); border-radius: 999px; overflow: hidden; } .webhook-progress-fill { height: 100%; width: 40%; background: var(--color-yellow-deep); border-radius: 999px; animation: webhook-slide 1.2s ease-in-out infinite; } @keyframes webhook-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } .cli-code .nginx-placeholder { background: var(--color-yellow-deep); color: var(--color-yellow-bg) !important; border-radius: .2rem; padding: 0 .2rem; font-style: normal; font-weight: 600; } .nginx-tpl-legend { font-size: .75rem; color: var(--color-text-hint); margin-top: .35rem; padding-left: .25rem; } .webhook-status { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; padding: .2rem .6rem; border-radius: 999px; } .webhook-ok { background: var(--color-green-bg); color: var(--color-green-text); } .webhook-none { background: var(--bg-subtle); color: var(--color-text-hint); } .checkbox-label { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .85rem; color: var(--color-text-label); cursor: pointer; } .checkbox-label input[type="checkbox"] { width: auto; margin: 0; flex-shrink: 0; } .svc-edit-block { border: 1px solid var(--border-default); border-radius: 6px; padding: .75rem 1rem; margin-bottom: .75rem; background: var(--bg-white); } /* Responsive */ @media (max-width: 900px) { .services-grid-dashboard { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } } @media (max-width: 600px) { .services-grid-dashboard { grid-template-columns: 1fr; } section { padding: 2.3rem 0; } } /* ── Branding-Editor ────────────────────────────────────────── */ /* Radio-Gruppen */ .radio-group { display: flex; flex-direction: column; gap: .6rem; margin-top: .25rem; } .radio-group--inline { flex-direction: row; flex-wrap: wrap; gap: .5rem 2rem; } .radio-label { font-weight: 400; display: flex; align-items: center; gap: .4rem; cursor: pointer; } .radio-label input[type="radio"] { width: auto; margin: 0; flex-shrink: 0; } /* Colorpicker – Quadrat, Höhe = Eingabefeld */ .color-picker-row { display: flex; gap: .5rem; align-items: center; } .color-picker-input { width: auto !important; aspect-ratio: 1; height: calc(0.9rem * 1.6 + 0.6rem) !important; /*font-size * line-height + padding */ block-size: calc(0.9rem * 1.6 - 0.5rem); padding: 0 0.1rem !important;; /* height: calc(.9rem * 1.6 + 1rem + 2px) !important; /* font-size * line-height + padding + border */ /* padding: .2rem !important; */ border: 1px solid var(--border-strong) !important; border-radius: 6px; cursor: pointer; flex-shrink: 0; } .color-text-input { width: 8rem !important; font-family: var(--font-mono); } /* Footer-Link-Zeile: einzeilig über volle Breite */ .custom-link-row { display: flex; align-items: flex-end; gap: .5rem; margin-bottom: .5rem; } .custom-link-row .link-label-group, .custom-link-row .link-url-group { flex: 1; display: flex; flex-direction: column; gap: .25rem; } .custom-link-row .link-label-group label, .custom-link-row .link-url-group label { font-size: .85rem; font-weight: 600; color: var(--color-text-label); } .custom-link-row .btn-del { width: auto; flex-shrink: 0; margin-bottom: .1rem; } /* Vorschau-Elemente */ .preview-header { border-radius: 8px 8px 0 0; padding: .75rem 1.5rem; border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; } .preview-strip { border-left: 1px solid var(--border-default); border-right: 1px solid var(--border-default); padding: 1rem 1.5rem; background: var(--bg-light); font-size: .85rem; color: var(--color-text-secondary); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .preview-footer { border-radius: 0 0 8px 8px; padding: 1rem 1.5rem; border: 1px solid var(--border-default); border-top: none; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .85rem; } .preview-footer-links { display: flex; gap: 1rem; flex-wrap: wrap; } .preview-btn-group { display: flex; gap: .5rem; } .preview-logo { height: 36px; max-width: 160px; object-fit: contain; } .preview-logo--lg { height: 40px; max-width: 180px; } .preview-user-label { font-size: .9rem; color: var(--color-text-secondary); } .preview-user-label strong { color: var(--dark); } /* Farb-Swatch in Tabellen */ .color-swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: 3px; vertical-align: middle; margin-right: .4rem; border: 1px solid var(--border-default); } /* Logo-Vorschau */ .logo-preview-row { display: flex; align-items: center; gap: 1rem; margin-top: .25rem; } .logo-preview-img { max-height: 60px; max-width: 220px; border: 1px solid var(--border-default); border-radius: 6px; padding: .5rem; background: var(--bg-white); } /* Font-Datei-Zeile */ .font-file-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }