/* ═══════════════════════════════════════════════════════════════════ Jarvis – Dark Glassmorphism Theme ═══════════════════════════════════════════════════════════════════ */ /* ─── CSS Variables ────────────────────────────────────────────────── Alle Theme-Variablen (Dark/Light) liegen jetzt zentral in /css/theme.css (vor dieser Datei eingebunden). Branding ueberschreibt sie inline auf . Hier nur noch style.css-spezifische Regeln. */ /* ─── Light-Mode: hartkodierte dunkle Slate-Flaechen kippen ────────── Diese Selektoren nutzen feste rgba(15,23,42…)/rgba(17,24,39…)-Werte statt der --bg-*-Variablen und wuerden sonst im Hellmodus dunkel bleiben. Rein additiv – Dark-Mode unveraendert. */ body.light .control-bar, body.light .input-bar { background: var(--bg-glass); } body.light .modal-content { background: linear-gradient(135deg, #ffffff, #f4f5f7); } body.light .modal-header { background: rgba(var(--fg-rgb), 0.03); } body.light .tabs { background: rgba(var(--fg-rgb), 0.04); } body.light .kb-learned-item { background: rgba(var(--fg-rgb), 0.04); } body.light .kb-learned-textarea{ background: rgba(var(--fg-rgb), 0.04); } body.light .steps-list strong { color: var(--text-primary); } /* Normale Log-/Antwortzeilen sind mit 0.55 im Hellmodus zu blass → anheben */ body.light .log-entry { color: rgba(var(--fg-rgb), 0.82); } /* ─── Reset & Base ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; } body { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ─── Screen Transitions ────────────────────────────────────────── */ .screen { display: none; height: 100vh; height: 100dvh; /* dynamische Viewport-Höhe – korrigiert Safari/Chrome Adressleisten-Bug */ width: 100vw; } .screen.active { display: flex; } /* ═══════════════════════════════════════════════════════════════════ LOGIN SCREEN ═══════════════════════════════════════════════════════════════════ */ #login-screen { align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 20%, rgba(var(--accent-rgb), 0.08) 0%, transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%), var(--bg-primary); position: relative; overflow: hidden; } .login-container { text-align: center; z-index: 10; animation: fadeInUp 0.8s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Logo */ .jarvis-logo { margin-bottom: 2rem; display: flex; justify-content: center; } .logo-ring { width: 120px; height: 120px; border-radius: 50%; border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; position: relative; animation: pulse-ring 3s ease-in-out infinite; box-shadow: 0 0 40px var(--accent-glow), inset 0 0 40px var(--accent-glow); } .logo-ring-inner { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), 0.3); animation: rotate-ring 10s linear infinite; border-top-color: transparent; border-left-color: transparent; } .logo-core { font-size: 3rem; font-weight: 800; color: var(--accent); text-shadow: 0 0 20px var(--accent-glow); font-family: var(--font-body); } @keyframes pulse-ring { 0%, 100% { box-shadow: 0 0 30px var(--accent-glow), inset 0 0 30px var(--accent-glow); } 50% { box-shadow: 0 0 50px var(--accent-glow), inset 0 0 50px var(--accent-glow); } } @keyframes rotate-ring { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .login-title { font-size: 2.5rem; font-weight: 800; letter-spacing: 0.3em; background: linear-gradient(135deg, var(--accent), var(--accent-hover), var(--accent-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.25rem; } .login-subtitle { color: var(--text-secondary); font-size: 0.95rem; font-weight: 400; letter-spacing: 0.15em; margin-bottom: 2.5rem; } .login-form { width: 100%; max-width: 380px; margin: 0 auto; } .login-form .input-group { flex-direction: column; gap: 0; } .login-form .input-group input { border-bottom: 1px solid var(--border); } .login-form .input-group input:last-of-type { border-bottom: none; } .input-group { display: flex; gap: 0.5rem; background: var(--bg-glass); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 6px; backdrop-filter: blur(20px); transition: border-color var(--transition), box-shadow var(--transition); } /* Discover-Modelle Dropdown (LLM-Profil-Editor) */ .model-discover-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 9999; max-height: 260px; overflow-y: auto; background-color: #141a28 !important; /* hart deckend – nie transparent */ border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); } .model-discover-head { position: sticky; top: 0; padding: 7px 12px; font-size: 0.72rem; color: #cbd5e1; border-bottom: 1px solid rgba(255, 255, 255, 0.12); background-color: #141a28 !important; } body.light .model-discover-list, body.light .model-discover-head { background-color: #ffffff !important; border-color: rgba(0, 0, 0, 0.15); color: #1f2937; } .model-discover-item { padding: 7px 12px; font-size: 0.85rem; color: #e5e7eb; background-color: #141a28 !important; /* jede Zeile deckend */ cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .model-discover-item:hover { background-color: #20283c !important; } .model-discover-item.active { color: var(--accent-light); font-weight: 600; } .model-discover-msg { padding: 9px 12px; font-size: 0.8rem; color: #cbd5e1; background-color: #141a28 !important; } .model-discover-msg.error { color: #f87171; } body.light .model-discover-item, body.light .model-discover-msg { background-color: #ffffff !important; color: #1f2937; } body.light .model-discover-item:hover { background-color: #eef0f4 !important; } .input-group:focus-within { border-color: var(--border-focus); box-shadow: var(--shadow-glow); } .input-group select, .input-group input { flex: 1; background: transparent; border: none; color: var(--text-primary); font-family: var(--font-body); font-size: 0.95rem; padding: 0.75rem 1rem; outline: none; appearance: none; /* Entfernt Standard-Pfeil */ } .input-group select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.2rem; padding-right: 3rem; } .input-group select option { background: var(--bg-secondary); color: var(--text-primary); } .input-group input::placeholder { color: var(--text-muted); } .btn-login { background: var(--accent); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all var(--transition); white-space: nowrap; } .btn-login:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 16px var(--accent-glow); } .btn-login:active { transform: translateY(0); } /* ═══════════════════════════════════════════════════════════════════ SECURITY BANNER & BADGE ═══════════════════════════════════════════════════════════════════ */ .security-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; background: linear-gradient(90deg, #ef4444, #f97316); color: white; padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; display: none; animation: slideDownBanner 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); } .security-banner.warning { background: linear-gradient(90deg, #f59e0b, #eab308); box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); } @keyframes slideDownBanner { from { transform: translateY(-100%); } to { transform: translateY(0); } } .banner-content { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; } .btn-banner-action { background: rgba(var(--fg-rgb), 0.2); border: 1px solid rgba(var(--fg-rgb), 0.4); color: white; padding: 0.25rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: all 0.2s; text-transform: uppercase; } .btn-banner-action:hover { background: white; color: #ef4444; } .security-banner.warning .btn-banner-action:hover { color: #f59e0b; } .btn-close-banner { background: none; border: none; color: white; font-size: 1.25rem; cursor: pointer; margin-left: auto; opacity: 0.7; } .btn-close-banner:hover { opacity: 1; } .security-badge { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); cursor: pointer; transition: all 0.3s; } .security-badge.warning { background: rgba(245, 158, 11, 0.1); color: #f59e0b; border-color: rgba(245, 158, 11, 0.2); } .security-badge.secure { background: rgba(16, 185, 129, 0.1); color: #10b981; border-color: rgba(16, 185, 129, 0.2); } .security-badge:hover { transform: scale(1.1); filter: brightness(1.2); } .login-extras { margin-top: 2rem; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 0.75rem; } /* ── Sprach-Toggle (DE / EN) ──────────────────────────────────── */ .lang-toggle { display: flex; gap: 2px; background: rgba(var(--fg-rgb), 0.05); border: 1px solid rgba(var(--fg-rgb), 0.1); border-radius: 8px; padding: 2px; } .lang-toggle-btn { background: transparent; border: none; color: var(--text-muted, #64748b); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; } .lang-toggle-btn:hover { color: var(--text-primary); } .lang-toggle-btn.active { background: rgba(var(--accent-rgb),0.25); color: var(--text-primary); } /* Kompaktvariante im Header */ .lang-toggle.header-lang { border-color: rgba(var(--fg-rgb), 0.08); } .btn-link { background: rgba(var(--accent-rgb), 0.05); border: 1px solid rgba(var(--accent-rgb), 0.2); color: var(--text-secondary); font-size: 0.85rem; padding: 0.75rem 1.25rem; border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; gap: 0.75rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family: var(--font-body); backdrop-filter: blur(10px); } .btn-link:hover { color: var(--text-primary); background: rgba(var(--accent-rgb), 0.15); border-color: var(--accent); box-shadow: 0 0 20px var(--accent-glow); transform: translateY(-2px); } .btn-link svg { color: var(--accent); transition: transform 0.3s ease; } .btn-link:hover svg { transform: rotate(15deg) scale(1.1); } .login-error { color: var(--danger); font-size: 0.85rem; margin-top: 1rem; animation: shake 0.4s ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } } /* Particles Background */ .login-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } /* ═══════════════════════════════════════════════════════════════════ MAIN SCREEN ═══════════════════════════════════════════════════════════════════ */ #main-screen { flex-direction: column; background: var(--bg-primary); } /* ─── Header ────────────────────────────────────────────────────── */ .header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; background: var(--bg-glass); border-bottom: 1px solid var(--border); backdrop-filter: blur(20px); flex-shrink: 0; position: relative; z-index: 200; } .header-left { display: flex; align-items: center; gap: 1rem; } .logo-mini-ring { width: 36px; height: 36px; border-radius: 50%; /* Gefuellter Kreis wie das Topbar-Avatar in /chat (kein Ring/Glow mehr) */ background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; font-size: 1rem; font-weight: 800; overflow: hidden; display: flex; align-items: center; justify-content: center; } .btn-mic { background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.35); color: #22c55e; width: 44px; height: 44px; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition); display: flex; align-items: center; justify-content: center; align-self: flex-end; } .btn-mic:hover { background: rgba(34, 197, 94, 0.15); border-color: #22c55e; } .btn-mic.recording { background: rgba(239, 68, 68, 0.2); color: #ef4444; border-color: #ef4444; animation: micPulse 1.5s infinite; } @keyframes micPulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } .btn-tts { background: rgba(var(--fg-rgb), 0.05); border: 1px solid var(--border); color: var(--text-secondary); width: 44px; height: 44px; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition); display: flex; align-items: center; justify-content: center; align-self: flex-end; flex-shrink: 0; } .btn-tts:hover { background: rgba(var(--fg-rgb), 0.1); color: var(--accent); border-color: var(--accent); } .btn-tts.tts-active { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); border-color: var(--accent); } .logo-mini-core { font-size: 1rem; font-weight: 800; color: #fff; } .header-info { display: flex; align-items: center; gap: 0.75rem; } .header-title { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.15em; color: var(--text-primary); } /* Version als Pill neben Status */ .header-version-pill { font-size: 0.7rem; font-weight: 500; padding: 0.2rem 0.55rem; border-radius: 999px; background: rgba(var(--accent-rgb), 0.06); color: var(--text-muted); border: 1px solid var(--border); cursor: default; user-select: none; } .upd-pill-clickable { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: background 0.15s, border-color 0.15s, color 0.15s; } .upd-pill-clickable:hover { background: rgba(var(--accent-rgb), 0.15); border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); } /* Ampel-Logik: gruen = System aktuell, rot = Updates stehen bereit */ .upd-pill-clickable.up-to-date { background: rgba(46, 204, 113, 0.1); border-color: rgba(46, 204, 113, 0.4); color: #2ecc71; } .upd-pill-clickable.has-update { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.4); color: #ef4444; } .upd-pill-ver { font-family: monospace; letter-spacing: 0.02em; } /* Dropdown links von der Pill ausrichten (nicht rechts) */ .header-info .update-widget-wrap .update-dropdown { left: 0; right: auto; top: calc(100% + 8px); z-index: 9999; } /* Version im Settings-Modal Footer */ /* ─── MCP Settings ──────────────────────────────────────────────── */ .mcp-card { background: var(--bg-glass); border: 1px solid var(--border-color); border-radius: 12px; padding: 1rem; margin-bottom: 0.75rem; backdrop-filter: blur(10px); } .mcp-card-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .mcp-card-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; } .mcp-card-actions { display: flex; align-items: center; gap: 0.5rem; } .mcp-card-status { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.4rem; } .mcp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .mcp-dot-on { background: #22c55e; box-shadow: 0 0 6px #22c55e; } .mcp-dot-off { background: #666; } .mcp-badge { font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 4px; background: rgba(var(--fg-rgb), 0.08); color: var(--text-muted); } .mcp-toggle { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; } .mcp-toggle input { cursor: pointer; } .mcp-btn-sm { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 6px; padding: 0.2rem 0.5rem; font-size: 0.8rem; cursor: pointer; transition: background 0.2s; } .mcp-btn-sm:hover { background: rgba(var(--fg-rgb), 0.1); } .mcp-btn-danger:hover { background: rgba(239,68,68,0.2); color: #ef4444; } .mcp-btn-primary { background: var(--accent-primary); color: #fff; border: none; border-radius: 8px; padding: 0.5rem 1.2rem; font-size: 0.9rem; cursor: pointer; } .mcp-btn-primary:hover { filter: brightness(1.15); } .mcp-tools-list { margin-top: 0.5rem; font-size: 0.8rem; } .mcp-tools-list details summary { cursor: pointer; color: var(--text-muted); } .mcp-tools-list ul { list-style: none; padding: 0.3rem 0 0 0.5rem; color: var(--text-secondary); } .mcp-tools-list li { padding: 0.15rem 0; border-bottom: 1px solid rgba(var(--fg-rgb), 0.03); } .mcp-empty { text-align: center; color: var(--text-muted); padding: 2rem 1rem; } .mcp-hint { font-size: 0.8rem; margin-top: 0.3rem; } .mcp-form { background: var(--bg-glass); border: 1px solid var(--accent-primary); border-radius: 12px; padding: 1.2rem; margin-bottom: 1rem; } .mcp-form h4 { margin: 0 0 0.8rem; color: var(--text-primary); } .mcp-form-row { margin-bottom: 0.6rem; } .mcp-form-row label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.2rem; } .mcp-input { width: 100%; background: rgba(var(--shadow-rgb), 0.3); border: 1px solid var(--border-color); border-radius: 6px; padding: 0.4rem 0.6rem; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; box-sizing: border-box; } .mcp-input:focus { border-color: var(--accent-primary); outline: none; } .mcp-form-buttons { display: flex; gap: 0.5rem; margin-top: 0.8rem; } .settings-version-footer { padding: 0.6rem 2rem; text-align: center; font-size: 0.7rem; color: var(--text-muted); opacity: 0.5; border-top: 1px solid rgba(var(--fg-rgb), 0.05); } /* Version neben dem Titel – nicht mehr verwendet */ .version-title { font-size: 0.6rem; font-weight: 400; letter-spacing: 0.05em; color: var(--text-muted); opacity: 0.6; } .header-status { font-size: 0.75rem; font-weight: 500; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--accent-light); color: var(--accent-hover); border: 1px solid var(--border); } .header-status.running { background: rgba(16, 185, 129, 0.1); color: var(--success); border-color: rgba(16, 185, 129, 0.3); animation: status-pulse 2s ease-in-out infinite; } .header-status.paused { background: rgba(245, 158, 11, 0.1); color: var(--warning); border-color: rgba(245, 158, 11, 0.3); } .header-status.stopped { background: rgba(239, 68, 68, 0.1); color: var(--danger); border-color: rgba(239, 68, 68, 0.3); } @keyframes status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .header-right { display: flex; align-items: center; gap: 0.75rem; } .connection-indicator { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); transition: background var(--transition); } .connection-indicator.connected { background: var(--success); box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); } .btn-icon { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); } /* Aktiver Zustand (z.B. Desktop-Toggle wenn Desktop sichtbar) */ .btn-icon.active { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); } /* Benachrichtigungs-Badge (roter Kreis mit Anzahl) ueber dem Issue-Tracker-Icon */ .issues-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg-base, #0b0f17); pointer-events: none; } /* Badge am Zahnrad: offene Root-Freigaben (Root-Broker). Nutzt Theme-Variablen. */ .broker-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg-primary); pointer-events: none; } .btn-icon:hover { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-hover); } .btn-icon.btn-small { width: 28px; height: 28px; } /* ─── Update-Widget ─────────────────────────────────────────────── */ .update-widget-wrap { position: relative; display: flex; align-items: center; } .update-widget { position: relative; display: flex; align-items: center; gap: 4px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid transparent; transition: all var(--transition); user-select: none; } .update-widget:hover { background: var(--bg-input); border-color: var(--border); } .update-version { font-size: 0.72rem; font-family: monospace; color: var(--text-secondary); letter-spacing: 0.02em; } .update-badge { font-size: 0.55rem; color: #f39c12; animation: upd-pulse 2s infinite; line-height: 1; } .update-badge.has-update { color: #ef4444; } @keyframes upd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ─── Update-Dropdown ────────────────────────────────────────────── */ .update-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 360px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.6); z-index: 1000; overflow: hidden; } .update-dropdown.hidden { display: none; } .update-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; color: var(--text-primary); } .update-close-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.85rem; padding: 2px 5px; border-radius: 4px; transition: background 0.15s; } .update-close-btn:hover { background: rgba(var(--fg-rgb), 0.08); } .update-dropdown-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; max-height: 440px; overflow-y: auto; } .upd-status-row { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; } .upd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .upd-dot.ok { background: #2ecc71; } .upd-dot.pending { background: #f39c12; } .upd-dot.error { background: #e74c3c; } .upd-commit-list { display: flex; flex-direction: column; gap: 4px; background: rgba(var(--fg-rgb), 0.04); border-radius: 6px; padding: 8px 10px; } .upd-commit { display: flex; gap: 8px; align-items: flex-start; font-size: 0.77rem; } .upd-commit-hash { font-family: monospace; color: var(--accent); flex-shrink: 0; } .upd-commit-msg { color: var(--text-primary); } .upd-commit-date { color: var(--text-secondary); font-size: 0.71rem; flex-shrink: 0; } .upd-auto-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--border); } .upd-auto-label { font-size: 0.8rem; color: var(--text-secondary); } .upd-schedule-select { background: var(--bg-glass-heavy, rgba(15,23,42,0.9)); border: 1px solid var(--border-hover, rgba(var(--fg-rgb), 0.15)); border-radius: 6px; color: var(--text-primary, #f8fafc); font-size: 0.78rem; padding: 4px 8px; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; font-family: inherit; } .upd-schedule-select option { background: var(--bg-secondary); color: var(--text-primary); } .upd-schedule-select:focus { border-color: var(--accent, #6366f1); } /* ─── CPU Bar ───────────────────────────────────────────────────── */ .cpu-bar-container { padding: 0 1.5rem; padding-top: 0.5rem; flex-shrink: 0; } .cpu-bar { height: 22px; background: var(--bg-input); border-radius: 999px; position: relative; overflow: hidden; border: 1px solid var(--border); } .cpu-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #10b981, #22c55e, #84cc16, #eab308, #f97316, #ef4444); background-size: 300% 100%; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .cpu-bar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(var(--fg-rgb), 0.1)); border-radius: 999px; } .cpu-bar-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 0.7rem; font-weight: 600; font-family: var(--font-mono); color: var(--text-primary); text-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.8); z-index: 1; } /* ─── Main Content ──────────────────────────────────────────────── */ .main-content { display: flex; flex-direction: row; gap: 0; padding: 0.5rem; flex: 1; min-height: 0; overflow: hidden; } /* ─── Resize Handle ─────────────────────────────────────────────── */ .resize-handle { width: 6px; background: transparent; cursor: col-resize; transition: background 0.2s; flex-shrink: 0; z-index: 10; margin: 0 4px; border-radius: 4px; } .resize-handle:hover, .resize-handle.active { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } /* ─── Panels ────────────────────────────────────────────────────── */ .panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); backdrop-filter: blur(20px); display: flex; flex-direction: column; overflow: hidden; /* Wichtig fuer Flex-Layout: erlaubt Schrumpfen unter Content-Breite, sonst druecken lange Codebloecke das Panel ueber die 50% hinaus und ueberlagern den Desktop-Panel rechts. */ min-width: 0; } .panel-left { width: 50%; min-width: 300px; max-width: 80%; /* flex-shrink explizit, damit width:50% als Soll-Basis gilt und Content nie weiter wachsen kann. */ flex-shrink: 1; } .panel-right { flex: 1; min-width: 300px; /* Damit iframes nicht ausrasten */ position: relative; z-index: 1; } .panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } .panel-title { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 0.5rem; letter-spacing: 0.02em; } .panel-actions { display: flex; align-items: center; gap: 0.5rem; } .vnc-status { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-mono); } /* ─── Log ───────────────────────────────────────────────────────── */ /* Log-Wrapper: Container + Agent-Sidebar nebeneinander */ .log-wrapper { flex: 1; display: flex; overflow: hidden; min-height: 0; min-width: 0; } .log-container { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.75rem 1rem; scroll-behavior: smooth; font-size: 0.84rem; /* Ohne min-width:0 wuerde der Container von langen pre/code-Bloecken horizontal aufgeblasen werden und das gesamte Panel-Left verbreitern. */ min-width: 0; } /* ─── Multi-Agent Sidebar ─────────────────────────────────────── */ .agent-sidebar-resize { width: 4px; cursor: col-resize; background: transparent; transition: background 0.2s; flex-shrink: 0; position: relative; z-index: 5; } .agent-sidebar-resize:hover, .agent-sidebar-resize.dragging { background: var(--accent); } .agent-sidebar { width: 160px; min-width: 100px; max-width: 350px; border-left: 1px solid var(--border); background: var(--bg-glass); backdrop-filter: blur(12px); display: flex; flex-direction: column; overflow: hidden; box-shadow: -2px 0 12px rgba(var(--shadow-rgb), 0.25); } .agent-sidebar-header { font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5rem 0.6rem 0.3rem; border-bottom: 1px solid var(--border); background: rgba(var(--shadow-rgb), 0.15); } .agent-sidebar-list { flex: 1; overflow-y: auto; padding: 0.3rem; } .agent-sidebar-list::-webkit-scrollbar { width: 4px; } .agent-sidebar-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; } .agent-card { padding: 0.4rem 0.5rem; margin-bottom: 0.3rem; border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: all 0.2s; font-size: 0.7rem; } .agent-card:hover { background: rgba(var(--fg-rgb), 0.06); border-color: var(--border-color); } .agent-card.active { background: rgba(var(--fg-rgb), 0.08); border-color: var(--accent-color); } .agent-card.main-agent { border-left: 3px solid #4ade80; } .agent-card.sub-agent { border-left: 3px solid var(--accent-color); } .agent-card-header { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .agent-card-label { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .agent-card-close { flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; opacity: 0; transition: all 0.15s; line-height: 1; } .agent-card:hover .agent-card-close { opacity: 1; } .agent-card-close:hover { color: var(--danger); background: rgba(239, 68, 68, 0.15); } .agent-card-state { font-size: 0.62rem; color: var(--text-secondary); margin-top: 0.15rem; } .agent-card-state .state-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 3px; vertical-align: middle; } .state-dot.running { background: #4ade80; } .state-dot.idle { background: var(--text-secondary); } .state-dot.paused { background: #facc15; } .state-dot.stopped { background: #f87171; } .log-container::-webkit-scrollbar { width: 6px; } .log-container::-webkit-scrollbar-track { background: transparent; } .log-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .log-container::-webkit-scrollbar-thumb:hover { background: var(--border-hover); } .log-welcome { text-align: center; padding: 3rem 1rem; color: var(--text-muted); } .log-welcome p:first-child { font-size: 1.2rem; margin-bottom: 0.5rem; } .log-hint { font-size: 0.85rem; } .log-entry { padding: 0.15rem 0; font-size: inherit; line-height: 1.15; color: rgba(var(--fg-rgb), 0.55); border-bottom: 1px solid rgba(var(--accent-rgb), 0.05); animation: fadeIn 0.3s ease-out; word-break: break-word; overflow-wrap: anywhere; max-width: 100%; min-width: 0; } .log-entry.log-highlight { color: var(--text-primary); font-weight: 600; } /* Debug-Modus aus: nicht-highlight Eintraege ausblenden */ .log-container.hide-debug .log-entry:not(.log-highlight) { display: none !important; } /* Stats-Zeile (Dauer · Tokens · tok/s · Schritte) auch im Nicht-Debug-Modus zeigen */ .log-container.hide-debug .log-entry.log-stats { display: block !important; } /* LLM-Stats Zeile (Dauer + Token-Verbrauch) */ .log-entry.log-stats { padding: 0.05rem 0 0.2rem 0; border-bottom: none; } .log-stats-text { font-size: 0.7rem; color: rgba(165, 180, 252, 0.55); font-style: italic; letter-spacing: 0.02em; } /* Stats immer sichtbar – auch wenn Debug-Modus aus */ /* LLM Thinking Bar – animierter Ladebalken */ .llm-thinking-bar { height: 3px; width: 100%; background: transparent; overflow: hidden; flex-shrink: 0; } .llm-thinking-bar::after { content: ''; display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),0.9), rgba(var(--accent-rgb),0.9), transparent); animation: llm-shimmer 1.4s ease-in-out infinite; } @keyframes llm-shimmer { 0% { transform: translateX(-200%); } 100% { transform: translateX(400%); } } .log-entry:last-child { border-bottom: none; } /* ── Konversations-Verlauf ───────────────────────────────────────────────── */ .conv-log-entry { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; overflow: hidden; background: var(--bg-glass); } .conv-log-entry.conv-log-has-error { border-color: rgba(239,68,68,0.35); } .conv-log-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; user-select: none; transition: background var(--transition); } .conv-log-header:hover { background: rgba(var(--accent-rgb),0.07); } .conv-log-chevron { color: var(--text-muted); font-size: 0.7rem; flex-shrink: 0; } .conv-log-task { flex: 1; font-size: 0.84rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; } .conv-log-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; } .conv-log-badge { font-size: 0.7rem; padding: 1px 6px; border-radius: 999px; background: rgba(79,70,229,0.18); color: var(--accent-hover); border: 1px solid rgba(var(--accent-rgb),0.2); } .conv-log-badge.conv-log-error { background: rgba(239,68,68,0.15); color: #f87171; border-color: rgba(239,68,68,0.25); } .conv-log-ip, .conv-log-model, .conv-log-steps, .conv-log-dur, .conv-log-ts { font-size: 0.72rem; color: var(--text-muted); } .conv-log-body { padding: 10px 14px; border-top: 1px solid var(--border); } .conv-log-error-msg { font-size: 0.82rem; color: #f87171; margin-bottom: 8px; } .conv-log-system-prompt { margin-bottom: 10px; } .conv-log-system-prompt pre { font-size: 0.72rem; color: var(--text-muted); white-space: pre-wrap; background: rgba(var(--shadow-rgb), 0.2); border-radius: 6px; padding: 6px 10px; margin-top: 4px; max-height: 100px; overflow-y: auto; } .conv-log-msgs-label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 6px; } .conv-log-messages { display: flex; flex-direction: column; gap: 4px; } .conv-msg { display: flex; gap: 8px; font-size: 0.79rem; padding: 5px 8px; border-radius: 6px; background: rgba(var(--fg-rgb), 0.03); } .conv-msg-assistant { border-left: 2px solid rgba(var(--accent-rgb),0.5); } .conv-msg-tool { border-left: 2px solid rgba(251,191,36,0.4); } .conv-msg-user { border-left: 2px solid rgba(74,222,128,0.4); } .conv-msg-label { flex-shrink: 0; color: var(--text-muted); font-size: 0.72rem; min-width: 90px; } .conv-msg-preview { color: var(--text-secondary); white-space: pre-wrap; word-break: break-word; } .conv-log-empty { text-align: center; color: var(--text-muted); padding: 24px; font-size: 0.85rem; } /* Debug-Button */ /* Exakt wie .header-status Badge */ .btn-debug { font-size: 0.75rem; font-weight: 500; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--border); background: var(--accent-light); color: var(--accent-hover); cursor: pointer; transition: all var(--transition); margin-left: 0.5rem; font-family: inherit; } .btn-debug.active { background: rgba(245, 158, 11, 0.1); color: var(--warning); border-color: rgba(245, 158, 11, 0.3); } .btn-debug:hover { filter: brightness(1.2); } .log-entry .log-time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-right: 0.5rem; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ─── Control Bar ───────────────────────────────────────────────── */ .control-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-top: 1px solid var(--border); background: rgba(17, 24, 39, 0.5); flex-shrink: 0; } .btn-control { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); } .btn-control:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .btn-control:disabled { opacity: 0.3; cursor: not-allowed; } .btn-control.btn-danger:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); background: rgba(239, 68, 68, 0.1); } .zoom-control { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; } .btn-zoom { width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); padding: 0; } .btn-zoom:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); } .btn-zoom-reset { width: auto; padding: 0 0.4rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; color: var(--text-muted); } .form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; } /* Checkbox / Toggle Styling */ .checkbox-group { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; padding: 0.5rem 0; } .checkbox-group input { width: 20px; height: 20px; border-radius: var(--radius-sm); accent-color: var(--accent); cursor: pointer; } /* ─── Input Bar ─────────────────────────────────────────────────── */ .input-bar { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border); background: rgba(17, 24, 39, 0.5); flex-shrink: 0; } .input-bar textarea { flex: 1; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); font-family: var(--font-body); font-size: 0.9rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); resize: none; outline: none; transition: border-color var(--transition); line-height: 1.4; } .input-bar textarea:focus { border-color: var(--border-focus); } .input-bar textarea::placeholder { color: var(--text-muted); } .btn-send { width: 44px; height: 44px; border-radius: var(--radius-sm); border: none; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); flex-shrink: 0; align-self: flex-end; } .btn-send:hover { background: linear-gradient(135deg, var(--accent-hover), var(--accent)); transform: translateY(-1px); box-shadow: 0 4px 12px var(--accent-glow); } .btn-send:active { transform: translateY(0); } /* ─── Desktop Preview ───────────────────────────────────────────── */ .desktop-preview { flex: 1; position: relative; background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; } .desktop-placeholder { text-align: center; color: var(--text-muted); font-size: 0.85rem; } .desktop-placeholder p { margin-top: 1rem; } .vnc-iframe { width: 100%; height: 100%; border: none; background: #000; } /* ─── Responsive ────────────────────────────────────────────────── */ /* Portrait: untereinander stapeln */ @media (max-width: 900px) { .main-content { flex-direction: column; align-items: stretch; overflow: hidden; } .panel-left { flex: 0 0 38%; min-height: 160px; max-height: 38%; width: 100%; max-width: 100%; } .panel-right { flex: 1 1 0; min-height: 0; width: 100%; overflow: hidden; } } /* Landscape Tablet (breit aber nicht Desktop) – Input-Bar sicherstellen */ @media (max-width: 1400px) { .main-content { align-items: stretch; } .panel { height: 100%; } } /* ─── Loader Animation ──────────────────────────────────────────── */ .btn-loader { width: 16px; height: 16px; border: 2px solid rgba(var(--fg-rgb), 0.3); border-top-color: white; border-radius: 50%; animation: spin 0.6s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════════════════ PREMIUM MODAL UPGRADE ═══════════════════════════════════════════════════════════════════ */ .modal { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(2, 6, 23, 0.6); backdrop-filter: blur(25px) saturate(180%); align-items: center; justify-content: center; padding: 1rem; opacity: 0; transition: opacity 0.4s ease; } .modal.open { display: flex !important; opacity: 1 !important; visibility: visible !important; } .modal-content { background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98)); border: 1px solid rgba(var(--fg-rgb), 0.1); border-radius: var(--radius-xl); width: 100%; max-width: 820px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(var(--shadow-rgb), 0.5), 0 0 50px rgba(var(--accent-rgb), 0.1); animation: modalSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes modalSlideUp { from { transform: translateY(30px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; border-bottom: 1px solid rgba(var(--fg-rgb), 0.05); background: rgba(30, 41, 59, 0.3); } .modal-header h2 { font-size: 1.25rem; font-weight: 700; background: linear-gradient(135deg, #fff, #94a3b8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Hellmodus: weiss->grau Gradient-Text waere unsichtbar -> solide dunkle Schrift */ body.light .modal-header h2 { background: none; -webkit-text-fill-color: var(--text-primary); color: var(--text-primary); } .modal-body { padding: 2rem; overflow-y: auto; } .cert-download-section { display: flex; gap: 1.5rem; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(14, 165, 233, 0.05)); border: 1px solid rgba(var(--accent-rgb), 0.2); padding: 1.5rem; border-radius: var(--radius-lg); margin-bottom: 2rem; align-items: center; position: relative; } .cert-download-section::before { content: ''; position: absolute; inset: -1px; border-radius: var(--radius-lg); padding: 1px; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.4), transparent, rgba(14, 165, 233, 0.3)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .cert-icon { color: var(--accent); background: rgba(var(--accent-rgb), 0.15); width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); flex-shrink: 0; box-shadow: 0 8px 16px rgba(var(--shadow-rgb), 0.2); } .cert-info h3 { font-size: 1.1rem; margin-bottom: 0.5rem; font-weight: 700; color: var(--text-primary); } .cert-info p { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 1.25rem; line-height: 1.5; } .btn-primary.btn-download { display: inline-flex; align-items: center; gap: 0.75rem; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); color: white; padding: 0.75rem 1.5rem; border-radius: var(--radius-md); text-decoration: none; font-size: 0.95rem; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3); } .btn-primary.btn-download:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.5); filter: brightness(1.1); } /* Tabs Upgrade */ .tabs { display: flex; background: rgba(15, 23, 42, 0.5); padding: 0.25rem; border-radius: var(--radius-md); margin-bottom: 2rem; border: 1px solid rgba(var(--fg-rgb), 0.05); } .tab-btn { flex: 1; background: none; border: none; padding: 0.6rem 1rem; color: var(--text-muted); font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; cursor: pointer; border-radius: var(--radius-sm); transition: all 0.25s ease; } .tab-btn:hover { color: var(--text-secondary); } .tab-btn.active { background: rgba(var(--fg-rgb), 0.05); color: var(--text-primary); box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.2); } .tab-content { display: none; animation: tabFadeIn 0.4s ease-out; } .tab-content.active { display: block; } @keyframes tabFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .steps-list { list-style: none; counter-reset: steps; } .steps-list li { position: relative; padding-left: 3.5rem; margin-bottom: 1.25rem; font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; } .steps-list li::before { counter-increment: steps; content: counter(steps); position: absolute; left: 0; top: -2px; width: 2.2rem; height: 2.2rem; background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.3); color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; box-shadow: 0 4px 10px rgba(var(--shadow-rgb), 0.1); } .steps-list strong { color: #fff; font-weight: 600; } .code-block { background: #020617; padding: 1.25rem; border-radius: var(--radius-lg); font-family: var(--font-mono); font-size: 0.85rem; border: 1px solid rgba(var(--fg-rgb), 0.05); box-shadow: inset 0 2px 10px rgba(var(--shadow-rgb), 0.5); margin-bottom: 1.5rem; } .code-block code { color: #cbd5e1; } /* ═══ Settings Button ═══ */ #btn-settings { margin-right: 8px; color: var(--text-muted); background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 8px; transition: all 0.3s ease; } #btn-settings:hover { color: var(--accent); background: rgba(var(--fg-rgb), 0.05); transform: rotate(45deg); } /* ═══ Settings Modal Spezifisch ═══ */ #settings-modal .modal-content { max-width: min(1080px, 72vw); width: 72vw; } /* Einheitliche Ausrichtung – kein Höhensprung beim Tab-Wechsel */ #settings-modal { align-items: flex-start; padding-top: 4vh; } /* ── Vollbild-Modus für die Einstellungen (gilt für alle Tabs) ── */ .btn-maximize-settings { margin-left: auto; margin-right: 0.5rem; font-size: 1.05rem; line-height: 1; opacity: 0.7; } .btn-maximize-settings:hover, .btn-maximize-settings.active { opacity: 1; } #settings-modal.settings-maximized { padding-top: 2vh; } #settings-modal.settings-maximized .modal-content { width: 96vw; max-width: none; height: 92vh; } #settings-modal.settings-maximized .modal-body { flex: 1; min-height: 0; } /* ── Generischer Vollbild-/Expand-Umschalter für alle Popups (modal_expand.js) ── */ /* margin-left:auto verhindert, dass der Button im space-between-Header (Titel | ? | Schliessen) mittig landet – er gruppiert sich rechts neben den Schliessen-Button; margin-right sorgt fuer etwas Abstand zum X. */ .modal-expand-btn { font-size: 1.05rem; line-height: 1; opacity: 0.7; margin-left: auto; margin-right: 0.5rem; } .modal-expand-btn:hover, .modal-expand-btn.active { opacity: 1; } .modal.modal-expanded > .modal-content { width: 96vw !important; max-width: none !important; height: 92vh !important; } .modal.modal-expanded > .modal-content .modal-body { flex: 1 !important; min-height: 0 !important; } /* Sicherheits-Doku-Popup: Leerzeile vor jeder Überschrift */ #sec-secdoc-modal .modal-body h3 { margin-top: 1.8em; } #sec-fwdoc-modal .modal-body h3 { margin-top: 1.8em; } /* ── AD-Verzeichnis-Picker (Benutzer/Gruppen durchsuchen) ── */ .ldap-pick-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 12px; font-size: 0.8rem; border: 1px solid rgba(var(--fg-rgb), 0.18); border-radius: 8px; background: rgba(var(--fg-rgb), 0.05); color: var(--text-secondary); cursor: pointer; transition: background .12s; } .ldap-pick-btn:hover { background: rgba(var(--fg-rgb), 0.1); } .ldap-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(var(--fg-rgb), 0.06); } .ldap-row:last-child { border-bottom: none; } .ldap-row:hover { background: rgba(var(--fg-rgb), 0.07); } .ldap-row input[type="checkbox"] { margin-right: 4px; } .ldap-row-main { font-size: 0.88rem; color: var(--text-primary); font-weight: 500; } .ldap-row-sub { font-size: 0.74rem; color: var(--text-muted); } /* Gruppenname als Knopf: oeffnet die Mitgliederliste. Sieht wie Text aus, ist aber anklickbar – daher Unterstreichung erst beim Hover (sonst liest der ganze Treffer wie ein Link, obwohl ein Klick daneben die Auswahl umschaltet). */ .ldap-members-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: 0.88rem; font-weight: 500; color: var(--text-primary); cursor: pointer; text-align: left; text-decoration: underline dotted rgba(var(--fg-rgb), 0.35); text-underline-offset: 3px; } .ldap-members-btn:hover, .ldap-members-btn:focus-visible { color: var(--accent); text-decoration: underline solid var(--accent); } /* ── Token-Liste (Chips mit ✕) für AD-Felder ── */ .token-list { margin: 2px 0 2px; } .token-items { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; } .token-empty { font-size: 0.8rem; color: var(--text-muted); font-style: italic; } .token { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 12px; border-radius: 8px; background: rgba(var(--fg-rgb), 0.06); border: 1px solid rgba(var(--fg-rgb), 0.1); max-width: 520px; } .token-label { font-size: 0.86rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .token-x { flex-shrink: 0; width: 20px; height: 20px; line-height: 1; border-radius: 6px; border: none; background: rgba(239,68,68,0.15); color: #f0a0a0; cursor: pointer; font-size: 1rem; } .token-x:hover { background: rgba(239,68,68,0.3); color: #fff; } .token-add { display: flex; gap: 6px; max-width: 520px; } .token-add-input { flex: 1; box-sizing: border-box; font-size: 0.83rem; } .token-add-btn { flex-shrink: 0; padding: 5px 12px; font-size: 0.8rem; border-radius: 8px; border: 1px solid rgba(var(--fg-rgb), 0.18); background: rgba(var(--fg-rgb), 0.05); color: var(--text-secondary); cursor: pointer; } .token-add-btn:hover { background: rgba(var(--fg-rgb), 0.1); } /* ── Wissensgruppen (logische Tags) ── */ .kb-grp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .kb-grp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--grp, #64748b) 55%, transparent); background: color-mix(in srgb, var(--grp, #64748b) 14%, transparent); color: var(--text-primary); font-size: 0.82rem; cursor: pointer; transition: background 0.15s ease; } .kb-grp-chip:hover { background: color-mix(in srgb, var(--grp, #64748b) 26%, transparent); } .kb-grp-chip-ung { cursor: default; --grp: #94a3b8; } .kb-grp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grp, #64748b); flex-shrink: 0; } .kb-grp-count { font-size: 0.72rem; font-weight: 700; opacity: 0.85; background: rgba(var(--fg-rgb), 0.12); border-radius: 999px; padding: 1px 7px; } .kb-groups-files { margin-top: 12px; } .kb-grp-files-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .kb-grp-file-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; } .kb-grp-file-row:hover { background: rgba(var(--fg-rgb), 0.04); } .kb-grp-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; border: 1px solid color-mix(in srgb, var(--grp, #64748b) 55%, transparent); background: color-mix(in srgb, var(--grp, #64748b) 18%, transparent); color: var(--text-primary); } /* Checkbox-Auswahl (Upload + Extraktor) */ .kb-grp-checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .kb-grp-check { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; cursor: pointer; font-size: 0.82rem; border: 1px solid color-mix(in srgb, var(--grp, #64748b) 45%, transparent); background: color-mix(in srgb, var(--grp, #64748b) 10%, transparent); } .kb-grp-check input { accent-color: var(--grp, #64748b); cursor: pointer; margin: 0; } /* Tag-Popover pro Datei */ .kb-grp-popover { position: absolute; z-index: 10050; min-width: 200px; max-width: 280px; background: var(--bg-secondary, #1e293b); border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 10px; box-shadow: 0 12px 32px rgba(var(--shadow-rgb), 0.5); padding: 10px; } .kb-grp-popover-title { font-size: 0.78rem; font-weight: 700; margin-bottom: 8px; color: var(--text-secondary); } .kb-grp-popover-body { display: flex; flex-direction: column; gap: 6px; } .kb-grp-popover-file { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(var(--fg-rgb), 0.08); font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Gruppen-Button (öffnet die Checkbox-Liste) */ .kb-grp-btn { display: inline-flex; align-items: center; gap: 5px; max-width: 260px; padding: 3px 8px; border-radius: 8px; cursor: pointer; font-size: 0.74rem; border: 1px solid var(--border, rgba(255,255,255,0.12)); background: rgba(var(--fg-rgb), 0.05); color: var(--text-primary); margin-right: 8px; } .kb-grp-btn:hover { background: rgba(var(--fg-rgb), 0.1); } .kb-grp-btn-icon { flex-shrink: 0; } .kb-grp-btn-caret { flex-shrink: 0; opacity: 0.6; font-size: 0.7rem; } .kb-grp-btn-label { display: inline-flex; align-items: center; gap: 4px; overflow: hidden; } .kb-grp-btn-empty { color: var(--text-muted); } .kb-grp-btn-tag { padding: 1px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; white-space: nowrap; color: #fff; background: var(--grp, #64748b); } /* Gruppen-Verwaltung (anlegen / umbenennen / löschen) */ .kb-grp-manage { margin-top: 14px; border-top: 1px solid rgba(var(--fg-rgb), 0.08); padding-top: 12px; } .kb-grp-add-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .kb-grp-add-row input[type=text] { flex: 1; min-width: 160px; } .kb-grp-manage-list { display: flex; flex-direction: column; gap: 4px; } .kb-grp-manage-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; } .kb-grp-manage-row:hover { background: rgba(var(--fg-rgb), 0.04); } /* Drag & Drop Sortierung der Gruppen */ .kb-grp-drag { cursor: grab; color: var(--text-muted); font-size: 0.85rem; letter-spacing: -2px; user-select: none; flex-shrink: 0; } .kb-grp-manage-row.kb-grp-dragging { opacity: 0.4; } .kb-grp-manage-row.kb-grp-dropover { outline: 1px dashed rgba(var(--accent-rgb), 0.6); } .kb-grp-manage-name { cursor: pointer; font-size: 0.86rem; } .kb-grp-manage-name:hover { text-decoration: underline; } .kb-grp-editors { font-size: 0.78rem; font-weight: 400; color: var(--text-muted); text-decoration: none; } .kb-grp-manage-spacer { flex: 1; } .kb-grp-color-input { width: 26px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; border-radius: 4px; flex-shrink: 0; } .kb-grp-manage-btn { background: none; border: none; cursor: pointer; font-size: 0.9rem; opacity: 0.6; padding: 2px 4px; border-radius: 4px; color: var(--text-primary); } .kb-grp-manage-btn:hover { opacity: 1; background: rgba(var(--fg-rgb), 0.08); } /* Start-Zeile für die Matrix (Beschreibung + großes Tabellen-Symbol) */ .kb-grp-matrix-launch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; font-size: 0.84rem; color: var(--text-secondary); } .kb-grp-matrix-icon { font-size: 2rem; line-height: 1; padding: 4px 10px; border-radius: 10px; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.35); color: var(--accent); cursor: pointer; flex-shrink: 0; transition: background 0.15s ease; } .kb-grp-matrix-icon:hover { background: rgba(var(--accent-rgb), 0.22); } /* ── Wissensgruppen-Matrix (Vollbild-Tabelle) ── */ .kbm-overlay { position: fixed; inset: 0; z-index: 10070; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; } .kbm-panel { background: var(--bg-secondary, #0f172a); border: 1px solid var(--border, rgba(255,255,255,0.12)); border-radius: 12px; width: 100%; height: 94vh; display: flex; flex-direction: column; box-shadow: 0 25px 60px rgba(var(--shadow-rgb), 0.5); overflow: hidden; } .kbm-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(var(--fg-rgb), 0.08); } .kbm-title { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); } .kbm-count { font-weight: 400; font-size: 0.8rem; color: var(--text-muted); margin-left: 6px; } .kbm-filter { margin-left: auto; width: 240px; max-width: 40vw; padding: 6px 10px; border-radius: 8px; font-size: 0.85rem; background: var(--bg-glass); border: 1px solid var(--border); color: var(--text-primary); } .kbm-close { background: none; border: none; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; padding: 2px 8px; border-radius: 6px; } .kbm-close:hover { background: rgba(var(--fg-rgb), 0.1); color: var(--text-primary); } .kbm-table-wrap { flex: 1; overflow: auto; } .kbm-table { border-collapse: collapse; table-layout: fixed; font-size: 0.8rem; } .kbm-table th, .kbm-table td { border-bottom: 1px solid rgba(var(--fg-rgb), 0.07); border-right: 1px solid rgba(var(--fg-rgb), 0.05); padding: 2px 8px; line-height: 1.35; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .kbm-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-secondary, #0f172a); color: var(--text-secondary); font-weight: 600; user-select: none; padding-top: 6px; padding-bottom: 6px; } .kbm-c-grp, .kbm-c-act { text-align: center; } .kbm-th-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; } .kbm-th-name { vertical-align: middle; } .kbm-th-count { display: inline-block; margin-left: 5px; font-size: 0.7rem; opacity: 0.7; } .kbm-table tbody tr:hover { background: rgba(var(--fg-rgb), 0.04); } .kbm-gcell { text-align: center; cursor: pointer; } .kbm-gcell .kbm-check { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 5px; font-size: 0.72rem; color: #fff; border: 1px solid color-mix(in srgb, var(--grp, #64748b) 55%, transparent); } .kbm-gcell.on .kbm-check { background: var(--grp, #64748b); border-color: var(--grp, #64748b); } .kbm-gcell:hover .kbm-check { background: color-mix(in srgb, var(--grp, #64748b) 25%, transparent); } .kbm-c-act button { background: none; border: none; cursor: pointer; font-size: 0.9rem; opacity: 0.7; } .kbm-c-act button:hover { opacity: 1; } .kbm-resizer { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 4; } .kbm-resizer:hover { background: rgba(var(--accent-rgb), 0.5); } body.kbm-resizing { cursor: col-resize; user-select: none; } .kbm-content { cursor: help; color: var(--text-muted); font-style: italic; } .kbm-tip { position: fixed; z-index: 10080; width: 680px; max-width: calc(100vw - 24px); max-height: min(70vh, 560px); overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--bg-secondary, #0f172a); border: 1px solid var(--border, rgba(255,255,255,.15)); border-radius: 8px; padding: 12px 14px; font-size: 0.82rem; line-height: 1.5; color: var(--text-primary); box-shadow: 0 12px 30px rgba(var(--shadow-rgb), 0.5); pointer-events: auto; resize: both; } /* Gültiges JSON wird eingerückt + in Monospace angezeigt (besser lesbar). */ .kbm-tip.kbm-tip-json { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.78rem; tab-size: 2; } /* Medien (Bild/PDF) im Matrix-Tooltip: kein Textumbruch-Zwang. */ .kbm-tip.kbm-tip-media { white-space: normal; padding: 8px; resize: none; } /* Schmale Symbol-Spalte; das Symbol loest die Vorschau aus. Kein Ellipsis/ Padding-Overhead, sonst wird das Emoji als "📄…" abgeschnitten. */ .kbm-c-icon { text-align: center; padding-left: 2px; padding-right: 2px; overflow: visible; text-overflow: clip; } .kbm-c-icon .kb-file-icon { cursor: help; } /* Sortierbare Spaltenkoepfe */ .kbm-table thead th.kbm-sortable { cursor: pointer; } .kbm-table thead th.kbm-sortable:hover { color: var(--text-primary); } .kbm-sort-ind { margin-left: 4px; font-size: 0.7rem; opacity: 0.85; } /* Maus-über-Vorschau fuer Datei-Zeilen in der Gruppen-Ansicht (Wissen). Text/JSON wie .kbm-tip; Medien (Bild/GIF/PDF) ohne Zeilenumbruch-Zwang. */ .kb-file-tip { position: fixed; z-index: 10080; width: 560px; max-width: calc(100vw - 24px); max-height: min(72vh, 620px); overflow: auto; white-space: pre-wrap; word-break: break-word; background: var(--bg-secondary, #0f172a); border: 1px solid var(--border, rgba(255,255,255,.15)); border-radius: 8px; padding: 12px 14px; font-size: 0.82rem; line-height: 1.5; color: var(--text-primary); box-shadow: 0 12px 30px rgba(var(--shadow-rgb), 0.5); pointer-events: auto; resize: both; } .kb-file-tip.kb-file-tip-json { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.78rem; tab-size: 2; } /* Medien fuellen den Popup-Rand; kein Textumbruch/Padding-Overhead. */ .kb-file-tip.kb-file-tip-media { white-space: normal; padding: 8px; resize: none; } /* ── Profil-Liste ── */ .profiles-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 340px; overflow-y: auto; margin-bottom: 1rem; padding-right: 4px; } .profiles-list::-webkit-scrollbar { width: 4px; } .profiles-list::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb), 0.1); border-radius: 4px; } .profile-card { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: rgba(var(--fg-rgb), 0.03); border: 1px solid rgba(var(--fg-rgb), 0.08); border-radius: var(--radius-md, 8px); cursor: pointer; transition: all 0.2s ease; } .profile-card:hover { background: rgba(var(--fg-rgb), 0.06); border-color: rgba(var(--fg-rgb), 0.15); } .profile-card.active { border-color: var(--accent, #6366f1); background: rgba(var(--accent-rgb), 0.08); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.15); } .profile-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .profile-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .profile-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary, #e2e8f0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── LLM-Erreichbarkeits-Ampel (grün/gelb/rot) ────────────────────────── */ .llm-status-pill { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted, #94a3b8); box-shadow: 0 0 0 0 rgba(var(--shadow-rgb), 0); transition: background 0.3s, box-shadow 0.3s; cursor: help; } .llm-status-pill.checking { background: #64748b; animation: llm-pill-pulse 1s ease-in-out infinite; } .llm-status-pill.ok { background: #22c55e; /* grün – erreichbar + Modell vorhanden */ box-shadow: 0 0 6px rgba(34, 197, 94, 0.7); } .llm-status-pill.degraded { background: #f59e0b; /* gelb – erreichbar, Modell fehlt */ box-shadow: 0 0 6px rgba(245, 158, 11, 0.7); } .llm-status-pill.down { background: #ef4444; /* rot – nicht erreichbar */ box-shadow: 0 0 6px rgba(239, 68, 68, 0.7); } @keyframes llm-pill-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* Nicht-aktive Profile: Pills abgedunkelt. Nur aktives Profil hat helle Pills. */ .profile-card .llm-status-pill { opacity: 0.4; filter: saturate(0.55) brightness(0.8); box-shadow: none; } .profile-card.active .llm-status-pill { opacity: 1; filter: none; } .profile-card.active .llm-status-pill.ok { box-shadow: 0 0 6px rgba(34, 197, 94, 0.7); } .profile-card.active .llm-status-pill.degraded { box-shadow: 0 0 6px rgba(245, 158, 11, 0.7); } .profile-card.active .llm-status-pill.down { box-shadow: 0 0 6px rgba(239, 68, 68, 0.7); } /* ── Angemeldeter Benutzer im Header ── */ .header-user-badge { display: inline-flex; align-items: center; max-width: 220px; padding: 3px 10px; border-radius: 12px; background: var(--bg-glass, rgba(var(--fg-rgb), 0.06)); border: 1px solid rgba(var(--fg-rgb), 0.1); color: var(--text-secondary, #cbd5e1); font-size: 0.78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-user-badge:empty { display: none; } /* ── Aktionsleiste fuer Nachrichten-Mehrfachauswahl ── */ .msg-select-bar { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--bg-glass, rgba(var(--fg-rgb), 0.06)); border-bottom: 1px solid rgba(var(--fg-rgb), 0.08); } .msg-select-bar[hidden] { display: none; } .msg-select-info { font-size: 0.82rem; color: var(--text-secondary, #cbd5e1); margin-right: auto; } .msg-select-info #msg-select-count { font-weight: 700; color: var(--text-primary, #f8fafc); } .msg-select-btn { padding: 4px 12px; border-radius: 6px; border: 1px solid rgba(var(--fg-rgb), 0.15); background: rgba(var(--fg-rgb), 0.06); color: var(--text-primary, #f8fafc); font-size: 0.8rem; cursor: pointer; transition: background 0.15s, border-color 0.15s, opacity 0.15s; } .msg-select-btn:hover { background: rgba(var(--fg-rgb), 0.12); } .msg-select-btn.danger { border-color: rgba(239, 68, 68, 0.5); color: #fca5a5; } .msg-select-btn.danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.8); } .msg-select-btn:disabled { opacity: 0.4; cursor: not-allowed; } #btn-select-msgs.active { background: rgba(155, 89, 182, 0.35); color: #e9d5ff; } .profile-detail { font-size: 0.8rem; color: var(--text-muted, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Einschraenkungs-Hinweis (erlaubte Benutzer/Gruppen) – dezent angehaengt */ .profile-restriction { opacity: 0.75; font-style: italic; } .profile-actions { display: flex; gap: 4px; margin-left: 0.5rem; flex-shrink: 0; } .profile-actions .btn-icon { opacity: 0.5; transition: opacity 0.2s; } .profile-card:hover .profile-actions .btn-icon { opacity: 0.8; } .profile-actions .btn-icon:hover { opacity: 1; } .btn-add-profile { width: 100%; padding: 0.6rem; background: rgba(var(--accent-rgb), 0.06); border: 1px dashed rgba(var(--accent-rgb), 0.3); border-radius: var(--radius-md, 8px); color: var(--accent, #6366f1); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s; } .btn-add-profile:hover { background: rgba(var(--accent-rgb), 0.12); border-color: var(--accent, #6366f1); } .settings-divider { border: none; border-top: 1px solid rgba(var(--fg-rgb), 0.05); margin: 1.5rem 0; } .form-group { margin-bottom: 20px; } .form-group label { display: block; font-size: 0.9rem; color: var(--text-muted); margin-bottom: 8px; font-weight: 500; } .input-field { width: 100%; padding: 12px; background: rgba(var(--fg-rgb), 0.05); border: 1px solid rgba(var(--fg-rgb), 0.1); border-radius: 8px; color: var(--text-main); font-size: 0.95rem; transition: all 0.2s; } .input-field:focus { outline: none; border-color: var(--accent); background: rgba(var(--fg-rgb), 0.08); } select.input-field { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; } /* Dropdown-Eintraege (option/optgroup): Regel liegt jetzt in theme.css, weil style.css nur von settings.html und wissen.html geladen wird – auf allen anderen Seiten fehlte sie und die Auswahlmenues waren weiss auf weiss. Hier bewusst NICHT dupliziert (eine Quelle, sonst driftet es auseinander). */ .modal-actions { display: flex; gap: 12px; margin-top: 30px; } /* Kopfzeile des Profil-Formulars: nimmt nur das Abbrechen-× auf. Negativer Rand oben, damit das × auf der Hoehe des ersten Feld-Labels sitzt und keine leere Zeile entsteht. */ .prof-edit-top { display: flex; justify-content: flex-end; margin: -8px 0 -14px; } .btn-primary { flex: 1; padding: 12px; background: var(--accent); border: none; border-radius: 8px; color: white; font-weight: 600; cursor: pointer; transition: background 0.2s, opacity 0.2s; } .btn-primary:hover { opacity: 0.9; } .btn-secondary { flex: 1; padding: 12px; background: rgba(var(--fg-rgb), 0.1); border: none; border-radius: 8px; color: var(--text-main); cursor: pointer; transition: background 0.2s; } .btn-secondary:hover { background: rgba(var(--fg-rgb), 0.15); } /* ═══ Settings Modal Design Upgrade ═══ */ .settings-tabs { margin-bottom: 2rem; } #settings-modal .form-group { margin-bottom: 1.5rem; animation: fadeIn 0.4s ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } #settings-modal .input-group { background: rgba(var(--fg-rgb), 0.03); border: 1px solid rgba(var(--fg-rgb), 0.08); border-radius: var(--radius-md); padding: 2px 8px; transition: all 0.3s ease; } #settings-modal .input-group:focus-within { background: rgba(var(--fg-rgb), 0.05); border-color: var(--accent); box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.2); } #settings-modal .input-group input { color: var(--text-primary); font-size: 0.95rem; } #settings-modal .modal-actions { padding-top: 1rem; border-top: 1px solid rgba(var(--fg-rgb), 0.05); } #settings-modal .tab-content { display: none; } #settings-modal .tab-content.active { display: block; } /* ─── VNC Reconnect Overlay ──────────────────────────────────── */ .vnc-reconnect-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10, 14, 23, 0.92); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 100; animation: overlayFadeIn 0.3s ease; } @keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } } .vnc-reconnect-content { text-align: center; color: var(--text-primary); } .vnc-reconnect-spinner { width: 48px; height: 48px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 1.5rem; animation: vncSpin 1s linear infinite; } @keyframes vncSpin { to { transform: rotate(360deg); } } .vnc-reconnect-text { font-size: 1.1rem; font-weight: 500; margin-bottom: 1.5rem; color: var(--text-primary); } .vnc-reconnect-countdown { margin: 0 auto 0.75rem; } .vnc-countdown-number { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--accent); font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); box-shadow: 0 0 20px var(--accent-glow); animation: countdownPulse 1s ease-in-out infinite; } @keyframes countdownPulse { 0%, 100% { box-shadow: 0 0 15px var(--accent-glow); } 50% { box-shadow: 0 0 30px var(--accent-glow); } } .vnc-reconnect-sub { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.5rem; } .vnc-reconnect-btn { padding: 0.5rem 1.5rem; background: transparent; border: 1px solid var(--border-hover); color: var(--text-secondary); border-radius: 6px; cursor: pointer; font-size: 0.8rem; transition: all 0.2s ease; } .vnc-reconnect-btn:hover { background: rgba(var(--accent-rgb), 0.15); border-color: var(--accent); color: var(--text-primary); } /* ═══════════════════════════════════════════════════════════════════ SETTINGS TABS & SKILLS ═══════════════════════════════════════════════════════════════════ */ /* ─── Settings Tabs ─────────────────────────────────────────────── */ .settings-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--border); padding: 0 0.5rem; } .settings-tab-btn { padding: 0.65rem 1rem; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all var(--transition); white-space: nowrap; flex-shrink: 0; } .settings-tab-btn:hover { color: var(--text-primary); } .settings-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .settings-tab-content { display: none; } .settings-tab-content.active { display: block; } /* ─── Skills UI (sk-*) ─────────────────────────────────────────── */ .sk-list { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; } .sk-search-row { margin-bottom: 0.6rem; } .sk-search-input { width: 100%; } /* ── Gemeinsame Basis: EINE ZEILE, kein Wrap ────────────────────── */ .sk-item, .sk-avail-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.75rem; border-radius: 8px; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; min-height: 2.2rem; overflow: hidden; /* keine zweite Zeile */ } .sk-item { background: rgba(var(--fg-rgb), 0.03); border-color: rgba(var(--fg-rgb), 0.08); } /* OpenClaw Marketplace Skills – deutlich markiert */ .sk-item.sk-item-oc { background: rgba(234, 179, 8, 0.06); border-left: 3px solid rgba(234, 179, 8, 0.5); } .sk-item.sk-item-oc:hover { background: rgba(234, 179, 8, 0.12); border-color: rgba(var(--fg-rgb), 0.08); border-left-color: rgba(234, 179, 8, 0.7); } .sk-badge-oc { font-size: 0.6rem; font-weight: 600; padding: 0.05rem 0.35rem; border-radius: 4px; background: rgba(234, 179, 8, 0.18); color: #eab308; border: 1px solid rgba(234, 179, 8, 0.35); flex-shrink: 0; white-space: nowrap; } /* Installiert, aber DEAKTIVIERT – neutral gedämpft (dark/light + branding-sicher, nur --fg-rgb/--text-muted, keine harten Farben, kein Akzent) */ .sk-item.sk-item-disabled { background: rgba(var(--fg-rgb), 0.02); border-left: 3px solid rgba(var(--fg-rgb), 0.28); } .sk-item.sk-item-disabled .sk-item-icon { filter: grayscale(1); opacity: 0.5; } .sk-item.sk-item-disabled .sk-item-name { color: var(--text-muted); } .sk-item.sk-item-disabled .sk-item-desc { opacity: 0.7; } .sk-badge-off { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.05rem 0.4rem; border-radius: 4px; background: rgba(var(--fg-rgb), 0.1); color: var(--text-muted); border: 1px solid rgba(var(--fg-rgb), 0.2); flex-shrink: 0; white-space: nowrap; } /* Fehlende Abhängigkeiten: Warn-Plakette + Reparatur-Knopf am Skill. system_packages werden nur beim Einschalten installiert – ein nachträglich ergänztes Systempaket (z.B. LibreOffice für den Office-Skill) fehlt sonst unbemerkt, und der Skill sieht dabei völlig gesund aus. */ .sk-badge-missing { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.05rem 0.4rem; border-radius: 4px; background: rgba(var(--warning-rgb), 0.15); color: var(--warning); border: 1px solid rgba(var(--warning-rgb), 0.45); flex-shrink: 0; white-space: nowrap; cursor: help; } .sk-btn.sk-btn-fix { color: var(--warning); border-color: rgba(var(--warning-rgb), 0.45); font-weight: 700; } .sk-btn.sk-btn-fix:hover { background: rgba(var(--warning-rgb), 0.15); color: var(--warning); } /* Unsichtbarer Platzhalter für fehlende Aktions-Buttons (Config/Löschen), damit die Aktionsspalten aller Skill-Zeilen symmetrisch fluchten. */ .sk-btn.sk-btn-ghost { visibility: hidden; pointer-events: none; } .sk-avail-item { background: rgba(var(--fg-rgb), 0.01); border-color: rgba(var(--fg-rgb), 0.04); } .sk-item:hover { background: rgba(var(--fg-rgb), 0.06); border-color: rgba(var(--fg-rgb), 0.14); } .sk-avail-item:hover { background: rgba(var(--fg-rgb), 0.04); border-color: rgba(var(--fg-rgb), 0.1); } /* ── Icon (passend zu btn-icon / profile-card Größe) ────────────── */ .sk-item-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm, 6px); background: rgba(var(--fg-rgb), 0.06); border: 1px solid var(--border, rgba(var(--fg-rgb), 0.1)); color: var(--text-secondary); flex-shrink: 0; } .sk-item-icon-dim { opacity: 0.5; } /* ── Info-Block: alles inline, kein Wrap ────────────────────────── */ .sk-item-info { display: flex; align-items: center; gap: 0.45rem; flex: 1; min-width: 0; overflow: hidden; } .sk-item-name { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; flex-shrink: 0; } .sk-badge-sys { font-size: 0.6rem; font-weight: 600; padding: 0.05rem 0.35rem; border-radius: 4px; background: rgba(var(--accent-rgb), 0.15); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.28); flex-shrink: 0; white-space: nowrap; } .sk-item-cat { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; } .sk-item-tools { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; } .sk-item-desc { font-size: 0.78rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } /* ── Aktionen: nur bei Hover sichtbar ──────────────────────────── */ .sk-item-actions { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; } .sk-item:hover .sk-item-actions, .sk-avail-item:hover .sk-item-actions { opacity: 1; } /* Buttons: passend zu .btn-icon.btn-small */ .sk-btn { background: transparent; border: 1px solid var(--border, rgba(var(--fg-rgb), 0.1)); color: var(--text-secondary); width: 26px; height: 26px; border-radius: var(--radius-sm, 6px); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.15s; flex-shrink: 0; } .sk-btn:hover { background: var(--bg-input, rgba(var(--fg-rgb), 0.05)); color: var(--text-primary); border-color: var(--border-hover, rgba(var(--fg-rgb), 0.2)); } .sk-btn-cfg:hover { color: var(--accent); border-color: var(--accent); } .sk-btn-rm:hover { color: #f87171; border-color: #f87171; } /* Toggle im installierten Item */ .sk-item-actions .skill-toggle { margin-left: 0.1rem; } /* Hinzufügen-Button */ .sk-btn-add { font-size: 0.75rem; padding: 0.18rem 0.65rem; background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.28); color: var(--accent); border-radius: var(--radius-sm, 6px); cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s; height: 26px; } .sk-btn-add:hover { background: rgba(var(--accent-rgb), 0.22); border-color: var(--accent); } /* ─── Skill Category Pills ──────────────────────────────────────── */ .skill-category-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .skill-category-pill { padding: 0.35rem 0.85rem; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-size: 0.8rem; cursor: pointer; transition: all var(--transition); } .skill-category-pill:hover { border-color: var(--accent); color: var(--text-primary); } .skill-category-pill.active { background: var(--accent); border-color: var(--accent); color: white; } /* ─── Skills Grid ───────────────────────────────────────────────── */ .skills-grid { display: flex; flex-direction: column; gap: 0.75rem; } .skills-empty { text-align: center; color: var(--text-muted); padding: 2rem; } /* ─── Skill Card ────────────────────────────────────────────────── */ .skill-card { background: var(--bg-glass); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem; transition: all var(--transition); } .skill-card:hover { border-color: var(--border-hover); } .skill-card.disabled { opacity: 0.5; } .skill-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .skill-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--accent-light); color: var(--accent); flex-shrink: 0; } .skill-info { flex: 1; min-width: 0; } .skill-name { font-weight: 600; font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; } .skill-meta { font-size: 0.75rem; color: var(--text-muted); } .skill-system-badge { font-size: 0.65rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 4px; background: rgba(var(--accent-rgb), 0.15); color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; } .skill-description { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.5rem; line-height: 1.4; } .skill-card-footer { display: flex; align-items: center; gap: 0.5rem; } .skill-category-tag { font-size: 0.7rem; color: var(--text-muted); padding: 0.15rem 0.5rem; border-radius: 4px; background: rgba(var(--fg-rgb), 0.05); border: 1px solid var(--border); } .btn-skill-config, .btn-skill-delete { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 0.3rem; cursor: pointer; color: var(--text-muted); transition: all var(--transition); display: flex; align-items: center; margin-left: auto; } .btn-skill-config:hover { color: var(--accent); border-color: var(--accent); } .btn-skill-delete:hover { color: var(--danger); border-color: var(--danger); } /* ─── Skill Toggle ──────────────────────────────────────────────── */ .skill-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .skill-toggle input { opacity: 0; width: 0; height: 0; } .skill-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(var(--fg-rgb), 0.1); border-radius: 22px; transition: 0.3s; } .skill-toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.3s; } .skill-toggle input:checked + .skill-toggle-slider { background-color: var(--accent); } .skill-toggle input:checked + .skill-toggle-slider:before { transform: translateX(18px); } /* ─── Skill Config Overlay ──────────────────────────────────────── */ .skill-config-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(var(--shadow-rgb), 0.6); display: flex; align-items: center; justify-content: center; z-index: 10000; backdrop-filter: blur(4px); } .skill-config-dialog { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; max-width: 450px; width: 90%; } .skill-config-dialog h3 { margin-bottom: 1rem; font-size: 1.1rem; } .config-input { width: 100%; padding: 0.5rem 0.75rem; background: var(--bg-glass); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.9rem; } .config-input:focus { outline: none; border-color: var(--accent); } /* ─── WhatsApp Tab ─────────────────────────────────────────────── */ .wa-container { display: flex; flex-direction: column; gap: 1.25rem; } .wa-status-card { padding: 1.25rem; border-radius: var(--radius-lg); border: 1px solid var(--border); } .wa-status-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .wa-status-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(37, 211, 102, 0.15); display: flex; align-items: center; justify-content: center; color: #25d366; flex-shrink: 0; } .wa-status-icon.disconnected { background: rgba(var(--fg-rgb), 0.05); color: var(--text-secondary); } .wa-status-icon.connecting { background: rgba(255, 193, 7, 0.15); color: #ffc107; animation: wa-pulse 1.5s ease-in-out infinite; } @keyframes wa-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .wa-status-info { flex: 1; } .wa-status-info h3 { font-size: 1rem; margin: 0 0 0.25rem 0; } .wa-status-detail { font-size: 0.8rem; color: var(--text-secondary); margin: 0; } .wa-status-badge { padding: 0.3rem 0.75rem; border-radius: 100px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(var(--fg-rgb), 0.05); color: var(--text-secondary); } .wa-status-badge.connected { background: rgba(37, 211, 102, 0.15); color: #25d366; } .wa-status-badge.qr_pending { background: rgba(255, 193, 7, 0.15); color: #ffc107; } .wa-status-badge.connecting { background: rgba(100, 149, 237, 0.15); color: #6495ed; } .wa-status-stats { display: flex; gap: 2rem; padding-top: 0.75rem; border-top: 1px solid var(--border); } .wa-stat { display: flex; flex-direction: column; gap: 0.2rem; } .wa-stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); } .wa-stat-value { font-size: 0.95rem; font-weight: 500; color: var(--text-primary); } /* QR Section */ .wa-qr-section { text-align: center; } .wa-qr-section h3 { margin: 0 0 0.5rem 0; font-size: 1rem; } .wa-qr-hint { font-size: 0.8rem; color: var(--text-secondary); margin: 0 0 1rem 0; line-height: 1.5; } .wa-qr-box { display: inline-flex; align-items: center; justify-content: center; background: #ffffff; border-radius: var(--radius-lg); padding: 1rem; min-width: 200px; min-height: 200px; } .wa-qr-box canvas { display: block; } .wa-qr-loading { color: #666; font-size: 0.85rem; } .wa-qr-connected { color: #1a9c4a; font-size: 0.95rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .wa-qr-connected svg { color: #25d366; } /* Actions */ .wa-actions { display: flex; gap: 0.75rem; justify-content: center; } .btn-wa-action { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-glass); color: var(--text-primary); cursor: pointer; font-size: 0.85rem; transition: all 0.2s ease; } .btn-wa-action:hover { border-color: var(--accent); color: var(--accent); } .btn-wa-action:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25); } .btn-wa-action:active { background: rgba(var(--accent-rgb), 0.1); } .btn-wa-danger:hover { border-color: var(--danger); color: var(--danger); } .btn-wa-danger:focus { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25); } .btn-wa-sm { padding: 0.35rem 0.6rem; font-size: 0.75rem; } /* Logs Section */ .wa-logs-section { margin-top: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-glass); overflow: hidden; } .wa-logs-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 0.5rem; } .wa-logs-header h3 { margin: 0; font-size: 0.9rem; color: var(--text-primary); } .wa-logs-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .wa-debug-toggle { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; user-select: none; } .wa-debug-toggle input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; } /* Text-Selektion im WA-Bereich sichtbar machen */ .wa-container ::selection { background: rgba(var(--accent-rgb), 0.4); color: #fff; } .wa-log-select { padding: 0.25rem 0.5rem; font-size: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #1e293b; color: var(--text-primary); -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.4rem center; padding-right: 1.5rem; } .wa-log-select option { background: var(--bg-secondary); color: var(--text-primary); } .wa-log-select:focus { border-color: var(--accent); outline: none; } .wa-logs-container { max-height: 350px; overflow-y: auto; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.72rem; line-height: 1.5; padding: 0.5rem; } .wa-logs-empty { padding: 2rem; text-align: center; color: var(--text-secondary); font-family: inherit; font-size: 0.85rem; } .wa-log-entry { display: flex; gap: 0.5rem; padding: 0.2rem 0.4rem; border-radius: 2px; } .wa-log-entry:hover { background: rgba(var(--fg-rgb), 0.03); } .wa-log-ts { color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; } .wa-log-level { font-weight: 600; white-space: nowrap; flex-shrink: 0; min-width: 3.5em; } .wa-log-level.ERROR { color: var(--danger); } .wa-log-level.WARN { color: #f0a030; } .wa-log-level.INFO { color: var(--accent); } .wa-log-level.DEBUG { color: var(--text-secondary); } .wa-log-cat { color: #888; white-space: nowrap; flex-shrink: 0; } .wa-log-msg { color: var(--text-primary); word-break: break-word; } .wa-log-meta { margin-top: 0.15rem; padding-left: 1rem; color: var(--text-secondary); font-size: 0.68rem; word-break: break-all; } /* ═══════════════════════════════════════════════════════════════════ Knowledge Base Tab ═══════════════════════════════════════════════════════════════════ */ .kb-container { display: flex; flex-direction: column; gap: 1.5rem; padding: 0.25rem 0; } .kb-section { background: var(--bg-glass); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.25rem; } .kb-section h3 { margin: 0 0 0.75rem 0; font-size: 0.95rem; color: var(--text-primary); font-weight: 600; } .kb-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; } .kb-section-header h3 { margin: 0; } .kb-collapse-header { cursor: pointer; user-select: none; border-radius: 8px; padding: 2px 4px; margin: -2px -4px; transition: background 0.15s; } .kb-collapse-header:hover { background: rgba(var(--fg-rgb), 0.04); } .kb-collapse-header.is-collapsed { margin-bottom: 0; } .kb-collapse-body { padding-top: 6px; } /* Untergruppen innerhalb eines Klappabschnitts (z.B. "Tuning" im Reiter KI & System). Trennlinie zwischen den Gruppen, nicht vor der ersten. */ .tuning-group + .tuning-group { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); } .tuning-group-title { margin: 0 0 0.6rem 0; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0.01em; } /* Kleine Icon-Knoepfe in aufklappbaren Kopfzeilen (Telemetry: LLM-Verlauf, Tool-Audit-Log). Vorher nutzten die beiden Zeilen unterschiedliche Klassen – einmal den grossen CTA .kb-btn-action (fuellte die Zeile mit Akzentfarbe), einmal .kb-btn-secondary/.kb-btn-danger. Diese Klasse vereinheitlicht Groesse und Rahmen; die Bedeutung (neutral vs. loeschend) kommt ueber den Modifier. */ .kb-hdr-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-glass); color: var(--text-secondary); cursor: pointer; font-size: 0.8rem; line-height: 1; transition: background 0.15s, color 0.15s, border-color 0.15s; } .kb-hdr-btn:hover { background: rgba(var(--fg-rgb), 0.08); color: var(--text-primary); } /* Loeschen-Variante: als Rahmen/Schrift erkennbar, aber nicht so blass wie .kb-btn-danger es bei 0.72rem war. */ .kb-hdr-btn.is-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .kb-hdr-btn.is-danger:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); border-color: var(--danger); } .kb-hint { font-size: 0.8rem; color: var(--text-secondary); margin: -0.25rem 0 0.75rem 0; } .kb-hint code { background: rgba(var(--fg-rgb), 0.08); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.78rem; } /* Statistik-Grid */ .kb-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 0.75rem; } .kb-stat { display: flex; flex-direction: column; align-items: center; background: rgba(var(--fg-rgb), 0.04); border-radius: 8px; padding: 0.75rem 0.5rem; } .kb-stat-value { font-size: 1.4rem; font-weight: 700; color: var(--accent); line-height: 1; } .kb-stat-label { font-size: 0.72rem; color: var(--text-secondary); margin-top: 0.3rem; } /* Format-Badges */ .kb-formats { display: flex; gap: 0.5rem; flex-wrap: wrap; } .kb-format-badge { font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 20px; background: rgba(var(--fg-rgb), 0.06); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: default; } /* Gelerntes Wissen Panel */ .kb-learned-panel { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.2); font-size: 0.8rem; color: var(--text-secondary); flex-wrap: wrap; } .kb-learned-icon { font-size: 1rem; } .kb-learned-title { font-weight: 600; color: var(--text-primary); } .kb-learned-stat { color: var(--accent, #7c3aed); font-weight: 500; } .kb-learned-sep { color: var(--text-secondary); opacity: 0.5; } .kb-learned-months { font-size: 0.72rem; opacity: 0.7; } .kb-learned-open-btn { margin-left: auto; background: rgba(var(--accent-rgb),0.15); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--text-primary); border-radius: 6px; padding: 0.2rem 0.6rem; font-size: 0.75rem; cursor: pointer; transition: background 0.15s; } .kb-learned-open-btn:hover { background: rgba(var(--accent-rgb),0.28); } /* Gelernte Einträge – Liste */ .kb-learned-item { border: 1px solid rgba(var(--fg-rgb), 0.06); border-radius: 8px; margin-top: 6px; overflow: hidden; background: rgba(15,23,42,0.5); } .kb-learned-item-header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-wrap: wrap; } .kb-learned-item-title { font-size: 0.82rem; color: var(--text-primary); font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; } .kb-learned-item-date { font-size: 0.72rem; color: var(--text-secondary); opacity: 0.7; white-space: nowrap; } .kb-learned-item-actions { display: flex; gap: 4px; margin-left: auto; } .kb-btn-sm { background: rgba(var(--fg-rgb), 0.06); border: 1px solid rgba(var(--fg-rgb), 0.1); color: var(--text-secondary); border-radius: 5px; padding: 2px 7px; font-size: 0.78rem; cursor: pointer; transition: background 0.15s; } .kb-btn-sm:hover { background: rgba(var(--fg-rgb), 0.12); } .kb-btn-sm.kb-btn-del:hover { background: rgba(239,68,68,0.2); color: #ef4444; border-color: rgba(239,68,68,0.3); } .kb-btn-sm.kb-btn-save { color: #34d399; border-color: rgba(52,211,153,0.3); } .kb-btn-sm.kb-btn-save:hover { background: rgba(52,211,153,0.15); } .kb-learned-item-editor { padding: 0 10px 10px; } .kb-learned-textarea { width: 100%; min-height: 160px; background: rgba(15,23,42,0.8); border: 1px solid rgba(var(--fg-rgb), 0.1); border-radius: 6px; color: var(--text-primary); font-size: 0.8rem; font-family: 'JetBrains Mono', monospace, inherit; padding: 8px 10px; resize: vertical; outline: none; line-height: 1.5; box-sizing: border-box; } .kb-learned-textarea:focus { border-color: rgba(var(--accent-rgb),0.4); } .kb-learned-editor-btns { display: flex; gap: 6px; margin-top: 6px; } /* Suchmodus Toggle */ .kb-search-mode { display: flex; align-items: center; gap: 0.8rem; margin: 0.6rem 0; padding: 0.5rem 0; } .kb-search-mode-label { font-size: 0.82rem; color: var(--text-secondary); white-space: nowrap; } .kb-toggle-group { display: flex; gap: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); } .kb-toggle-btn { background: rgba(var(--fg-rgb), 0.04); border: none; color: var(--text-secondary); padding: 0.35rem 0.8rem; font-size: 0.78rem; cursor: pointer; transition: all 0.2s; border-right: 1px solid var(--border-color); } .kb-toggle-btn:last-child { border-right: none; } .kb-toggle-btn:hover:not(.disabled) { background: rgba(var(--fg-rgb), 0.08); color: var(--text-primary); } .kb-toggle-btn.active { background: var(--accent-color); color: #fff; font-weight: 600; } .kb-toggle-btn.disabled { opacity: 0.35; cursor: not-allowed; } /* Upload Drop-Zone */ /* ── Extraktor: Input-Tabs ───────────────────────────────────────────────── */ .ext-input-tabs { display: flex; gap: 6px; margin-bottom: 12px; } .ext-input-tab { padding: 5px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: none; color: var(--text-muted); cursor: pointer; font-size: 0.82rem; font-family: var(--font-body); transition: all 0.15s; } .ext-input-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); } .ext-input-tab:hover:not(.active) { border-color: var(--border-hover); color: var(--text-secondary); } /* ── Extraktor: Drop-Zone ────────────────────────────────────────────────── */ .ext-drop-zone { border: 2px dashed var(--border); border-radius: var(--radius-md); padding: 24px 16px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; color: var(--text-muted); position: relative; } .ext-drop-zone:hover, .ext-drop-zone.drag-over { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.07); color: var(--text-secondary); } .ext-drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .ext-drop-zone-label { font-size: 0.85rem; margin-top: 6px; } .ext-drop-zone-hint { font-size: 0.73rem; color: var(--text-muted); margin-top: 4px; } /* ── Extraktor: Drop-Banner (Bestätigung nach Drop) ─────────────────────── */ .ext-drop-banner { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: var(--radius-md); font-size: 0.82rem; } .ext-drop-banner-name { flex: 1; color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ext-drop-banner-size { color: var(--text-muted); font-size: 0.75rem; flex-shrink: 0; } .kb-upload-link { color: var(--accent); cursor: pointer; text-decoration: underline; } .kb-upload-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; } .kb-upload-select { flex: 1; max-width: 250px; } .kb-upload-status { font-size: 0.8rem; color: var(--text-secondary); flex: 1; } /* WebDAV / Mount Info */ .kb-webdav-info { background: rgba(var(--fg-rgb), 0.04); border-radius: 8px; padding: 0.75rem 1rem; margin-top: 0.5rem; } .kb-info-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.85rem; } .kb-info-label { color: var(--text-secondary); min-width: 70px; } .kb-info-hint { color: var(--text-secondary); font-size: 0.8rem; font-style: italic; } /* Netzwerk-Freigaben */ .kb-mount-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; } .kb-mount-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(var(--fg-rgb), 0.04); border-radius: 8px; border: 1px solid var(--border-color); font-size: 0.85rem; } .kb-mount-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .kb-mount-status.active { background: #10b981; } .kb-mount-status.inactive { background: #6b7280; } .kb-mount-source { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kb-mount-type { color: var(--text-secondary); font-size: 0.75rem; text-transform: uppercase; } .kb-mount-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; padding: 0.75rem; background: rgba(var(--fg-rgb), 0.04); border-radius: 8px; border: 1px solid var(--border-color); } .kb-mount-actions { display: flex; gap: 0.5rem; } .kb-btn-secondary { padding: 0.4rem 1rem; border-radius: 6px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 0.8rem; } .toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; inset: 0; cursor: pointer; background: rgba(var(--fg-rgb), 0.15); border-radius: 22px; transition: 0.3s; } .toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s; } .toggle-switch input:checked + .toggle-slider { background: var(--accent); } .toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); } /* Ordner-Liste */ .kb-folder-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .kb-folder-item { background: rgba(var(--fg-rgb), 0.04); border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden; } .kb-folder-header { display: flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.5rem 0.1rem 0; } .kb-folder-toggle { display: flex; align-items: center; gap: 0.5rem; flex: 1; background: none; border: none; cursor: pointer; padding: 0.45rem 0.75rem; color: var(--text-primary); text-align: left; border-radius: 8px; transition: background 0.15s; min-width: 0; } .kb-folder-toggle:hover { background: rgba(var(--fg-rgb), 0.06); } .kb-folder-icon { font-size: 1rem; flex-shrink: 0; } .kb-folder-path { flex: 1; font-size: 0.85rem; color: var(--text-primary); font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kb-folder-arrow { font-size: 0.65rem; color: var(--text-secondary); flex-shrink: 0; transition: transform 0.2s; } /* Dateiliste (Accordion) */ .kb-folder-files { border-top: 1px solid var(--border-color); padding: 0.4rem 0.75rem 0.5rem 2.5rem; display: flex; flex-direction: column; gap: 0.2rem; } .kb-file-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; } /* Mehrfachauswahl (Klick / Maus-Drag) zum Sammel-Löschen */ .kb-file-item.selected, .kb-grp-file-row.selected { background: rgba(var(--accent-rgb), 0.18); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.5); } .kb-folder-files { position: relative; } /* Bezug fuer das Auswahl-Rechteck */ .kb-folder-files.kb-selecting { user-select: none; } /* kein Text markieren beim Ziehen */ /* Unterordner (Modell A): verschachtelte Ebenen schlanker einruecken als die Wurzel */ .kb-folder-files .kb-folder-files { padding-left: 1.25rem; } .kb-subfolders { display: flex; flex-direction: column; gap: 0.2rem; } .kb-node-files { display: flex; flex-direction: column; gap: 0.2rem; position: relative; } .kb-btn-addsub { color: var(--text-secondary); } /* "Unterordner erstellen" dezent */ .kb-subfolder-item > .kb-folder-header { opacity: 0.95; } .kb-rubber { /* Auswahl-Rechteck (Rubber-Band) */ position: absolute; z-index: 5; pointer-events: none; border: 1px solid var(--accent, #6366f1); background: rgba(var(--accent-rgb), 0.12); border-radius: 3px; } .kb-bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; padding: 6px 10px; border-radius: 8px; background: rgba(var(--accent-rgb), 0.10); border: 1px solid rgba(var(--accent-rgb), 0.35); font-size: 0.8rem; color: var(--text-primary); } .kb-bulk-bar.hidden { display: none; } .kb-bulk-hint { color: var(--text-secondary); font-size: 0.75rem; margin-left: auto; } .kb-file-icon { font-size: 0.85rem; flex-shrink: 0; } /* In Gruppen- UND Ordner-Dateiliste loest das Symbol (nicht der Name) die Vorschau aus */ .kb-grp-file-row .kb-file-icon, .kb-file-item .kb-file-icon { cursor: help; } .kb-file-name { flex: 1; font-size: 0.82rem; color: var(--text-primary); font-family: monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kb-file-size { font-size: 0.75rem; color: var(--text-secondary); flex-shrink: 0; } .kb-btn-delete-file { flex-shrink: 0; width: 22px; height: 22px; border: none; background: transparent; color: var(--text-secondary); font-size: 0.85rem; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; opacity: 1; /* immer voll sichtbar (kein Mouseover mehr noetig) */ transition: color 0.15s, background 0.15s; } .kb-file-item:hover .kb-btn-delete-file { opacity: 1; } .kb-btn-delete-file:hover { color: #ef4444; background: rgba(239, 68, 68, 0.15); } .kb-btn-view-file { flex-shrink: 0; width: 22px; height: 22px; border: none; background: transparent; color: var(--text-secondary); font-size: 0.85rem; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; opacity: 1; /* immer voll sichtbar (kein Mouseover mehr noetig) */ transition: color 0.15s, background 0.15s; } .kb-file-item:hover .kb-btn-view-file { opacity: 1; } .kb-btn-view-file:hover { color: var(--accent); background: rgba(var(--accent-rgb), 0.15); } .kb-files-loading, .kb-files-empty, .kb-files-error { font-size: 0.82rem; font-style: italic; color: var(--text-secondary); padding: 0.25rem 0; } /* "Lädt…" beim Aufklappen eines Ordners: rotierender Ring + pulsierender Text, damit sichtbar ist, dass noch gearbeitet wird (Netzlaufwerke brauchen). */ .kb-files-loading { display: flex; align-items: center; gap: 8px; animation: kb-loading-pulse 1.4s ease-in-out infinite; } .kb-files-loading::before { content: ''; width: 13px; height: 13px; flex: 0 0 13px; border: 2px solid rgba(var(--accent-rgb), 0.25); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes kb-loading-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { .kb-files-loading, .kb-files-loading::before { animation: none; } } .kb-files-error { color: #f87171; } .kb-btn-remove { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.9rem; padding: 0.1rem 0.4rem; border-radius: 4px; transition: color 0.2s, background 0.2s; flex-shrink: 0; margin-right: 0.25rem; } .kb-btn-remove:hover { color: #ff6b6b; background: rgba(255,107,107,0.1); } /* Ordner hinzufügen */ .kb-add-folder { display: flex; gap: 0.5rem; align-items: center; } .kb-input { flex: 1; background: var(--input-bg, rgba(var(--fg-rgb), 0.06)); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); padding: 0.5rem 0.75rem; font-size: 0.85rem; font-family: monospace; outline: none; transition: border-color 0.2s; } .kb-input:focus { border-color: var(--accent); } /* Action-Button */ .kb-btn-action { background: var(--accent); border: none; border-radius: 8px; color: #fff; cursor: pointer; font-size: 0.82rem; padding: 0.45rem 0.9rem; font-weight: 500; transition: opacity 0.2s; white-space: nowrap; flex-shrink: 0; } .kb-btn-action:hover:not(:disabled) { opacity: 0.85; } .kb-btn-action:disabled { opacity: 0.5; cursor: not-allowed; } /* Abbruch-Zustand: derselbe Knopf, der die Indizierung gestartet hat, stoppt sie auch wieder – die Warnfarbe macht den Funktionswechsel sichtbar. */ .kb-btn-action.kb-btn-cancel { background: var(--warning); } /* Kachel mit Erklaerungs-Tooltip (z.B. "Chunks"): der Hilfe-Cursor signalisiert, dass beim Ueberfahren eine Erlaeuterung erscheint. */ .kb-stat-help { cursor: help; } /* Laufende Indizierung im Abschnitts-Kopf – bleibt sichtbar, auch wenn "Statistiken" zugeklappt ist. margin-right:auto haelt es links am Titel. */ .kb-sect-badge { font-size: 0.72rem; font-weight: 600; color: var(--warning); margin-left: 0.6rem; margin-right: auto; white-space: nowrap; } /* Sekundaeraktions-Button in Settings (z.B. 2FA aktivieren/deaktivieren). Akzentbasiert – folgt Branding; Gefahr-Variante via inline background:var(--danger). */ .settings-action-btn { background: var(--accent); border: none; border-radius: 8px; color: #fff; cursor: pointer; font-size: 0.82rem; padding: 0.45rem 0.9rem; font-weight: 500; transition: opacity 0.2s; } .settings-action-btn:hover:not(:disabled) { opacity: 0.85; } .settings-action-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Einheitliche Button-Familie fuer den Sicherheits-Tab (gleiche Groesse/Form; Farbe nur nach Rolle: primary=Akzent, danger=Gefahr, sonst neutral outline). */ .sec-btn { font-size: 0.82rem; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; font-weight: 500; line-height: 1.4; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: all var(--transition); } .sec-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-hover); background: rgba(var(--fg-rgb), 0.05); } .sec-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Lange Liste im Sicherheits-Reiter (z.B. "Letzte Zugriffs-Verstoesse"): zeigt die ersten Eintraege, der Rest ist scrollbar. Die max-height setzt das Skript aus den gemessenen Zeilenhoehen – hier steht nur das Aussehen. padding-right haelt den Text vom Scrollbalken frei, der Rahmen macht den Ausschnitt als solchen erkennbar (sonst sieht die abgeschnittene Zeile wie das Ende der Liste aus). */ .sec-scrollbox { overflow-y: auto; padding-right: 8px; border-bottom: 1px solid var(--border); overscroll-behavior: contain; } .sec-btn.primary { background: var(--accent); border-color: transparent; color: #fff; } .sec-btn.primary:hover:not(:disabled) { opacity: 0.88; color: #fff; background: var(--accent); } .sec-btn.danger { border-color: rgba(var(--danger-rgb), 0.5); color: var(--danger); } .sec-btn.danger:hover:not(:disabled) { color: var(--danger); background: rgba(var(--danger-rgb), 0.12); border-color: var(--danger); } .sec-btn.small { font-size: 0.74rem; padding: 3px 10px; } /* Zustände */ .kb-loading { color: var(--text-secondary); font-size: 0.85rem; padding: 0.5rem 0; } .kb-empty { color: var(--text-secondary); font-size: 0.85rem; font-style: italic; padding: 0.5rem 0; } .kb-error { color: #ff6b6b; font-size: 0.85rem; padding: 0.5rem 0; } /* Benachrichtigungen */ .kb-notification { border-radius: 8px; padding: 0.6rem 1rem; font-size: 0.85rem; margin-bottom: 0.25rem; } .kb-notification-success { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); color: #4ade80; } .kb-notification-error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; } .kb-notification-info { background: rgba(var(--accent-rgb), 0.15); border: 1px solid rgba(var(--accent-rgb), 0.3); color: var(--accent); } /* Responsive */ @media (max-width: 480px) { .kb-stat-grid { grid-template-columns: repeat(2, 1fr); } .kb-add-folder { flex-direction: column; } .kb-input { width: 100%; } } /* ─── Erweiterungen: Danger / Run / Label / Chip ─────────────────── */ .kb-btn-danger { padding: 0.3rem 0.65rem; border-radius: 6px; border: none; background: rgba(231, 76, 60, 0.15); color: #e74c3c; cursor: pointer; font-size: 0.78rem; transition: background 0.2s; } .kb-btn-danger:hover { background: rgba(231, 76, 60, 0.28); } .kb-btn-run { padding: 0.3rem 0.65rem; border-radius: 6px; border: none; background: rgba(46, 204, 113, 0.15); color: #2ecc71; cursor: pointer; font-size: 0.78rem; transition: background 0.2s; } .kb-btn-run:hover:not(:disabled) { background: rgba(46, 204, 113, 0.28); } .kb-btn-run:disabled { opacity: 0.5; cursor: not-allowed; } .kb-btn-icon { padding: 0.3rem 0.65rem; border-radius: 6px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 0.78rem; transition: background 0.2s; } .kb-btn-icon:hover { background: rgba(var(--fg-rgb), 0.07); } .kb-label { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 4px; } .kb-chip { font-size: 0.73rem; padding: 2px 9px; background: var(--bg-glass); border: 1px solid var(--border-color); border-radius: 20px; cursor: pointer; color: var(--text-secondary); transition: background 0.15s, color 0.15s; } .kb-chip:hover { background: rgba(var(--fg-rgb), 0.09); color: var(--text-primary); } /* ─── Cron / Watcher Listeneinträge ─────────────────────────────── */ .cron-item { background: rgba(var(--fg-rgb), 0.04); border: 1px solid var(--border-color); border-radius: 8px; padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; } .cron-item-row { display: flex; align-items: center; gap: 8px; min-width: 0; } .cron-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .cron-item-dot.active { background: var(--success-color, #2ecc71); } .cron-item-dot.inactive { background: var(--text-muted, #6b7280); } .cron-item-label { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cron-item-code { font-size: 0.75rem; background: rgba(var(--fg-rgb), 0.08); padding: 2px 7px; border-radius: 5px; font-family: monospace; flex-shrink: 0; color: var(--text-secondary); position: relative; cursor: help; } .cron-item-code[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--bg-secondary); border: 1px solid rgba(var(--fg-rgb), 0.15); border-radius: 7px; padding: 6px 11px; font-size: 0.76rem; font-family: var(--font-sans, sans-serif); color: var(--text-primary); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 9999; box-shadow: 0 4px 14px rgba(var(--shadow-rgb), 0.4); } .cron-item-code[data-tip]::before { content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: rgba(var(--fg-rgb), 0.15); pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 9999; } .cron-item-code[data-tip]:hover::after, .cron-item-code[data-tip]:hover::before { opacity: 1; } .cron-item-actions { display: flex; gap: 4px; align-items: center; flex-shrink: 0; margin-left: auto; } .cron-item-task { font-size: 0.80rem; color: var(--text-secondary); padding-left: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cron-item-meta { font-size: 0.73rem; color: var(--text-secondary); opacity: 0.65; padding-left: 16px; } .cron-item-path { font-size: 0.78rem; color: var(--text-secondary); padding-left: 16px; font-family: monospace; } /* Auftraggeber-Bindung eines Auftrags (mit welchen Rechten laeuft er?). Farben ausschliesslich ueber Theme-Variablen + color-mix, damit Light/Dark und Branding-Ueberschreibungen greifen. */ .cron-owner-badge { display: inline-block; font-size: 0.68rem; border-radius: 4px; padding: 1px 6px; margin-right: 6px; border: 1px solid transparent; opacity: 1; } .cron-owner-badge.cron-badge-sys { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .cron-owner-badge.cron-badge-user { color: var(--text-secondary); background: rgba(var(--fg-rgb), 0.06); border-color: var(--border-color); } .cron-owner-badge.cron-badge-none { color: var(--warning, var(--text-secondary)); background: color-mix(in srgb, var(--warning, var(--text-secondary)) 12%, transparent); border-color: color-mix(in srgb, var(--warning, var(--text-secondary)) 30%, transparent); } .cron-event-badge { font-size: 0.68rem; background: rgba(var(--fg-rgb), 0.07); border: 1px solid var(--border-color); padding: 1px 5px; border-radius: 4px; color: var(--text-secondary); } /* ─── Formulargitter ─────────────────────────────────────────────── */ .kb-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .kb-form-field { display: flex; flex-direction: column; gap: 4px; } .kb-form-field .kb-input { width: 100%; box-sizing: border-box; } .kb-form-row { margin-bottom: 10px; } .kb-form-row .kb-input { width: 100%; box-sizing: border-box; resize: vertical; } .kb-form-footer { display: flex; gap: 8px; align-items: center; margin-top: 4px; } .kb-form-footer-left { display: flex; align-items: center; gap: 6px; } .kb-form-footer-right { display: flex; gap: 6px; margin-left: auto; } .kb-form-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-secondary); cursor: pointer; } .kb-chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; } .kb-form-error { color: #e74c3c; font-size: 0.8rem; margin-top: 6px; } @media (max-width: 520px) { .kb-form-grid-2 { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════ Audit-Log Tab ═══════════════════════════════════════════════════════════════════ */ .audit-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } /* Kopfzeile bleibt beim Scrollen stehen (der Rahmen hat max-height: 400px). ZWEI Fehler steckten hier und ergaben zusammen die gemeldete Ueberlappung (2026-08-05): `position: sticky` sass auf dem `` – bei `border-collapse: collapse` bleiben die Zellen dann nicht zuverlaessig beim Kopf, und die durchscrollende Zeile wurde UEBER die Kopftexte gezeichnet. Und der Hintergrund war mit `rgba(..., 0.05)` halbtransparent, sodass die Zeile zusaetzlich durchschien. Richtig ist sticky auf den `th`-Zellen mit DECKENDEM Grund – genau wie `.kbm-table thead th` im selben Projekt. Die alte leichte Toenung bleibt als Gradient-Schicht ueber der deckenden Basis erhalten, damit sich die Optik nicht aendert. */ .audit-table th { position: sticky; top: 0; z-index: 2; background-color: var(--bg-secondary); background-image: linear-gradient(rgba(var(--fg-rgb), 0.05), rgba(var(--fg-rgb), 0.05)); padding: 0.5rem 0.75rem; text-align: left; color: var(--text-secondary); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border-color); white-space: nowrap; } .audit-table td { padding: 0.4rem 0.75rem; border-bottom: 1px solid rgba(var(--fg-rgb), 0.04); vertical-align: middle; color: var(--text-primary); } .audit-table tbody tr:hover td { background: rgba(var(--fg-rgb), 0.03); } .audit-ts { color: var(--text-secondary); white-space: nowrap; font-size: 0.75rem; } .audit-user { font-weight: 500; } .audit-dur { color: var(--text-secondary); white-space: nowrap; } .audit-res { color: var(--text-secondary); white-space: nowrap; } .audit-args { font-size: 0.75rem; font-family: monospace; word-break: break-word; max-width: 280px; } .audit-arg-key { color: var(--text-secondary); } .audit-arg-val { color: var(--text-primary); } .audit-empty { text-align: center; padding: 2rem !important; color: var(--text-secondary); font-style: italic; } /* Tool-Badges */ .audit-tool-badge { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 0.72rem; font-family: monospace; font-weight: 600; white-space: nowrap; } .audit-tool-task { background: rgba(var(--fg-rgb), .05); color: var(--text-muted); font-style:italic; } .audit-tool-shell { background: rgba(231,76,60,.15); color: #e74c3c; } .audit-tool-fs { background: rgba(52,152,219,.15); color: #3498db; } .audit-tool-desktop { background: rgba(155,89,182,.15); color: #9b59b6; } .audit-tool-msg { background: rgba(46,204,113,.15); color: #2ecc71; } .audit-tool-memory { background: rgba(243,156,18,.15); color: #f39c12; } .audit-tool-knowledge { background: rgba(26,188,156,.15); color: #1abc9c; } .audit-tool-agent { background: rgba(var(--accent-rgb),.15); color: var(--accent); } .audit-tool-other { background: rgba(var(--fg-rgb), .07); color: var(--text-secondary); } /* ═══════════════════════════════════════════════════════════════════ Allgemeines Modal-Overlay (genutzt von Extractor-Anleitung etc.) ═══════════════════════════════════════════════════════════════════ */ .modal-overlay { position: fixed; inset: 0; background: rgba(var(--shadow-rgb), 0.75); display: flex; align-items: center; justify-content: center; z-index: 10000; backdrop-filter: blur(4px); } .modal-overlay.hidden { display: none; } .modal-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; width: 520px; max-width: 92vw; max-height: 90vh; overflow-y: auto; box-shadow: 0 16px 48px rgba(var(--shadow-rgb), 0.6); } .modal-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 16px; } .btn-modal-close { display: inline-block; padding: 7px 20px; background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: opacity 0.15s; } .btn-modal-close:hover { opacity: 0.85; } /* ═══════════════════════════════════════════════════════════════════ Web-Extractor Tab ═══════════════════════════════════════════════════════════════════ */ /* Anleitung: nummerierte Schritte */ .ext-info-step { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border-color); } .ext-info-step:last-of-type { border-bottom: none; } .ext-info-num { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; min-width: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; } /* Pending-Badge */ .ext-badge { display: inline-block; background: var(--accent); color: #fff; border-radius: 10px; font-size: 0.72rem; font-weight: 700; padding: 1px 7px; margin-left: 6px; vertical-align: middle; } .ext-badge-approved { background: var(--green, #10b981); } /* Fakten-Liste */ .ext-facts-list { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; } .ext-fact-row { display: flex; gap: 6px; align-items: center; } /* Q&A-Liste */ .ext-qa-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .ext-qa-row { background: rgba(var(--fg-rgb), 0.04); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 10px; } .ext-qa-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .ext-qa-fields { display: flex; flex-direction: column; gap: 0; } /* ═══════════════════════════════════════════════════════════════════ Google Apps Tab ═══════════════════════════════════════════════════════════════════ */ /* Basis-Card */ .google-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-glass); } /* Status-Varianten */ .google-card-ok { border-color: rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.06); } .google-card-warn { border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.06); flex-direction: column; align-items: flex-start; } .google-card-idle { border-color: var(--border); } /* Icon */ .google-card-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; } /* Body */ .google-card-body { flex: 1; min-width: 0; } .google-card-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.2rem; } .google-card-desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 0.5rem; } .google-card-email { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.6rem; } /* Service-Badges (Gmail, Drive, Calendar) */ .google-card-services { display: flex; gap: 0.4rem; flex-wrap: wrap; } .google-service-badge { font-size: 0.7rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 20px; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.28); color: var(--accent); text-transform: uppercase; letter-spacing: 0.4px; } /* Buttons */ .google-btn-connect, .google-btn-revoke { flex-shrink: 0; white-space: nowrap; } .google-btn-revoke { background: none; border: 1px solid rgba(239, 68, 68, 0.4); color: #f87171; font-size: 0.8rem; padding: 0.35rem 0.85rem; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .google-btn-revoke:hover { background: rgba(239, 68, 68, 0.1); border-color: var(--danger); } /* Setup-Schritte (credentials.json fehlt) */ .google-card-warn .google-card-body { width: 100%; } .google-setup-steps { margin: 0.5rem 0 0 1.2rem; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.8; } .google-setup-steps a { color: var(--accent); text-decoration: none; } .google-setup-steps a:hover { text-decoration: underline; } .google-setup-steps code { background: rgba(var(--fg-rgb), 0.08); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.78rem; font-family: var(--font-mono); } /* ─── Device Flow Card ─────────────────────────────────────────────── */ .google-card-flow { border-color: rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.06); flex-direction: column; align-items: flex-start; } .google-card-flow .google-card-body { width: 100%; } .google-flow-steps { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 0.5rem; } .google-flow-step { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--text-primary); } .google-flow-num { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700; flex-shrink: 0; } .google-flow-url { color: var(--accent); text-decoration: none; font-weight: 600; word-break: break-all; } .google-flow-url:hover { text-decoration: underline; } /* Großer Code-Block */ .google-flow-code { display: inline-block; margin: 0.85rem 0 0.5rem; padding: 0.55rem 1.6rem; background: rgba(var(--accent-rgb), 0.14); border: 2px solid rgba(var(--accent-rgb), 0.4); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 1.9rem; font-weight: 700; letter-spacing: 0.35em; color: var(--accent); user-select: all; cursor: text; } .google-flow-hint { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.3rem; } /* code-Tags in google-card-warn */ .google-card-warn .google-card-body code { background: rgba(var(--fg-rgb), 0.08); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.78rem; font-family: var(--font-mono); } /* ─── Google Tab: Sektionen ───────────────────────────────────────── */ .google-section { margin-bottom: 1rem; } .google-section-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .google-section-divider { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; } .gog-badge { font-size: 0.62rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 20px; background: rgba(var(--accent-rgb),0.15); border: 1px solid rgba(var(--accent-rgb),0.3); color: var(--accent); text-transform: none; letter-spacing: 0; } /* ─── gog Setup-Formular ──────────────────────────────────────────── */ .gog-setup-card { flex-direction: column; align-items: flex-start; } .gog-form { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.85rem; width: 100%; } .gog-form-row { display: flex; align-items: center; gap: 0.75rem; } .gog-label { font-size: 0.78rem; color: var(--text-secondary); min-width: 100px; flex-shrink: 0; } .gog-input { flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.82rem; padding: 0.35rem 0.6rem; font-family: var(--font-mono); transition: border-color 0.15s; min-width: 0; } .gog-input:focus { outline: none; border-color: var(--accent); } .gog-input::placeholder { color: var(--text-muted, rgba(var(--fg-rgb), 0.25)); font-style: italic; } /* Buttons */ .gog-btn-row { display: flex; gap: 0.5rem; margin-top: 0.4rem; flex-wrap: wrap; } .gog-btn { font-size: 0.8rem; font-weight: 500; padding: 0.4rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--border); cursor: pointer; transition: background 0.15s, border-color 0.15s, opacity 0.15s; background: var(--bg-glass); color: var(--text-primary); } .gog-btn:disabled { opacity: 0.4; cursor: not-allowed; } .gog-btn-primary { border-color: rgba(var(--accent-rgb),0.4); color: var(--accent); } .gog-btn-primary:hover:not(:disabled) { background: rgba(var(--accent-rgb),0.12); border-color: var(--accent); } .gog-btn-connect { border-color: rgba(16,185,129,0.4); color: #34d399; } .gog-btn-connect:hover:not(:disabled) { background: rgba(16,185,129,0.1); border-color: #10b981; } /* Status-Meldungen */ .gog-status-msg { font-size: 0.8rem; padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); margin-top: 0.2rem; } .gog-msg-info { color: var(--text-secondary); } .gog-msg-success { color: #34d399; background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.2); } .gog-msg-warn { color: #fbbf24; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); } .gog-msg-error { color: #f87171; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); } /* VNC-Hinweis-Box */ .gog-vnc-hint { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 0.85rem; padding: 0.75rem 1rem; background: rgba(var(--accent-rgb),0.07); border: 1px solid rgba(var(--accent-rgb),0.25); border-radius: var(--radius-md); } .gog-vnc-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1; } .gog-vnc-text { font-size: 0.82rem; color: var(--text-primary); line-height: 1.5; } .gog-vnc-text a { color: var(--accent); text-decoration: none; } .gog-vnc-text a:hover { text-decoration: underline; } .gog-spinner { font-size: 0.78rem; color: var(--text-secondary); margin-top: 0.4rem; } /* code in google-card-body generell */ .google-card-body code { background: rgba(var(--fg-rgb), 0.08); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.78rem; font-family: var(--font-mono); } /* Auth-Link Button (Remote Flow) */ .gog-auth-link { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.6rem 0; padding: 0.5rem 1.1rem; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.35); border-radius: var(--radius-md); color: #34d399; font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: background 0.15s, border-color 0.15s; } .gog-auth-link:hover { background: rgba(16,185,129,0.18); border-color: #10b981; text-decoration: none; } /* ─── Skill Info-Button ─────────────────────────────────────────── */ .sk-btn-info { color: var(--text-secondary); } .sk-btn-info:hover { color: var(--accent); border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); } /* ─── Skill Info-Popup Overlay ──────────────────────────────────── */ #sk-info-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(var(--shadow-rgb), 0.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; } .sk-info-panel { background: var(--bg-secondary); border: 1px solid var(--border-hover, rgba(var(--fg-rgb), 0.18)); border-radius: 14px; width: 480px; max-width: calc(100vw - 2rem); max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(var(--shadow-rgb), 0.5); animation: sk-info-in 0.18s ease; } @keyframes sk-info-in { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Header */ .sk-info-header { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1.1rem 1.25rem 0.9rem; border-bottom: 1px solid var(--border, rgba(var(--fg-rgb), 0.08)); flex-shrink: 0; } .sk-info-icon-lg { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.25); color: var(--accent); flex-shrink: 0; } .sk-info-title-group { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.1rem; } .sk-info-name { font-size: 1rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .sk-info-badges { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .sk-info-cat { font-size: 0.7rem; color: var(--text-secondary); background: rgba(var(--fg-rgb), 0.06); border: 1px solid rgba(var(--fg-rgb), 0.1); border-radius: 4px; padding: 0.05rem 0.4rem; } .sk-info-close { background: transparent; border: 1px solid transparent; color: var(--text-secondary); width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.9rem; flex-shrink: 0; transition: all 0.15s; margin-top: 0.1rem; } .sk-info-close:hover { background: rgba(248,113,113,0.1); border-color: #f87171; color: #f87171; } /* Body */ .sk-info-body { overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; } .sk-info-body::-webkit-scrollbar { width: 4px; } .sk-info-body::-webkit-scrollbar-track { background: transparent; } .sk-info-body::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb), 0.15); border-radius: 2px; } .sk-info-details { font-size: 0.88rem; color: var(--text-primary); line-height: 1.6; margin: 0; } /* Sections */ .sk-info-section { display: flex; flex-direction: column; gap: 0.5rem; } .sk-info-section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); } .sk-info-section-text { font-size: 0.83rem; color: var(--text-secondary); line-height: 1.55; margin: 0; } /* Tools-Liste */ .sk-info-tools { display: flex; flex-direction: column; gap: 0.6rem; } .sk-info-tool { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.6rem; row-gap: 0.15rem; align-items: start; } .sk-info-tool-name { font-size: 0.75rem; font-family: var(--font-mono, monospace); background: rgba(var(--accent-rgb),0.12); border: 1px solid rgba(var(--accent-rgb),0.2); color: var(--accent); padding: 0.1rem 0.45rem; border-radius: 4px; white-space: nowrap; grid-column: 1; grid-row: 1; } .sk-info-tool-label { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); grid-column: 2; grid-row: 1; align-self: center; } .sk-info-tool-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; margin: 0; grid-column: 1 / -1; grid-row: 2; padding-top: 0.05rem; } /* Use-Cases */ .sk-info-use-cases { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; } .sk-info-use-cases li { font-size: 0.82rem; color: var(--text-secondary); padding: 0.3rem 0.65rem; background: rgba(var(--fg-rgb), 0.03); border: 1px solid rgba(var(--fg-rgb), 0.06); border-radius: 6px; line-height: 1.45; } .sk-info-use-cases li::before { content: "▸ "; color: var(--accent); font-size: 0.7rem; } /* Setup-Section (grün) */ .sk-info-section-setup { padding: 0.65rem 0.75rem; background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.18); border-left: 3px solid rgba(16,185,129,0.5); border-radius: 6px; } .sk-info-section-setup .sk-info-section-title { color: #34d399; } /* Notes-Section (amber) */ .sk-info-section-notes { padding: 0.65rem 0.75rem; background: rgba(245,158,11,0.05); border: 1px solid rgba(245,158,11,0.18); border-left: 3px solid rgba(245,158,11,0.45); border-radius: 6px; } .sk-info-section-notes .sk-info-section-title { color: #fbbf24; } /* Footer */ .sk-info-footer { padding: 0.6rem 1.25rem; border-top: 1px solid var(--border, rgba(var(--fg-rgb), 0.08)); font-size: 0.72rem; color: var(--text-muted, rgba(var(--fg-rgb), 0.35)); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════ Kategorie-Pills (oberhalb "Mögliche Skills") ═══════════════════════════════════════════════════════════════════ */ .sk-category-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; } .sk-cat-pill { padding: 0.25rem 0.75rem; border-radius: 999px; border: 1px solid var(--border, rgba(var(--fg-rgb), 0.12)); background: transparent; color: var(--text-secondary, rgba(var(--fg-rgb), 0.55)); font-size: 0.78rem; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .sk-cat-pill:hover { border-color: var(--accent, #7c6af7); color: var(--accent, #7c6af7); background: rgba(124,106,247,0.08); } .sk-cat-pill.active { background: var(--accent, #7c6af7); border-color: var(--accent, #7c6af7); color: #fff; font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════ OpenClaw Marketplace Sektion ═══════════════════════════════════════════════════════════════════ */ .sk-openclaw-section { margin-top: 0.75rem; border: 1px solid var(--border, rgba(var(--fg-rgb), 0.1)); border-radius: 10px; overflow: hidden; background: rgba(var(--fg-rgb), 0.02); } .sk-openclaw-header { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1rem; cursor: pointer; user-select: none; transition: background 0.15s; } .sk-openclaw-header:hover { background: rgba(var(--fg-rgb), 0.04); } .sk-openclaw-title { font-size: 0.88rem; font-weight: 600; color: var(--text-primary, #e8e3ff); } .sk-openclaw-toggle { font-size: 0.7rem; color: var(--text-muted, rgba(var(--fg-rgb), 0.35)); } .sk-openclaw-body { padding: 0.9rem 1rem 1rem; border-top: 1px solid var(--border, rgba(var(--fg-rgb), 0.08)); display: flex; flex-direction: column; gap: 0.65rem; } /* LLM-Status-Badge */ .sk-openclaw-llm-status { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 6px; font-size: 0.8rem; font-weight: 500; width: fit-content; } .sk-openclaw-llm-checking { background: rgba(var(--fg-rgb), 0.06); color: var(--text-secondary, rgba(var(--fg-rgb), 0.6)); border: 1px solid rgba(var(--fg-rgb), 0.1); } .sk-openclaw-llm-local { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.25); } .sk-openclaw-llm-cloud { background: rgba(234,179,8,0.1); color: #fbbf24; border: 1px solid rgba(234,179,8,0.2); } .sk-openclaw-hint { font-size: 0.82rem; color: var(--text-secondary, rgba(var(--fg-rgb), 0.55)); margin: 0; line-height: 1.5; } .sk-openclaw-label { font-size: 0.82rem; color: var(--text-secondary, rgba(var(--fg-rgb), 0.65)); font-weight: 500; } .sk-openclaw-label small { font-weight: 400; color: var(--text-muted, rgba(var(--fg-rgb), 0.35)); margin-left: 0.3rem; } .sk-openclaw-textarea { width: 100%; padding: 0.5rem 0.7rem; border-radius: 7px; border: 1px solid var(--border, rgba(var(--fg-rgb), 0.12)); background: var(--bg-input, rgba(var(--fg-rgb), 0.05)); color: var(--text-primary, #e8e3ff); font-size: 0.85rem; font-family: inherit; resize: vertical; min-height: 52px; transition: border-color 0.15s; box-sizing: border-box; } .sk-openclaw-textarea:focus { outline: none; border-color: var(--accent, #7c6af7); } .sk-openclaw-btn { align-self: flex-start; padding: 0.45rem 1.1rem; border-radius: 7px; border: none; background: var(--accent, #7c6af7); color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s, transform 0.1s; } .sk-openclaw-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); } .sk-openclaw-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; } /* ── OpenClaw Suchergebnisse ───────────────────────────────────── */ .sk-oc-results { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; } .sk-oc-loading, .sk-oc-empty { padding: 1rem; text-align: center; color: var(--text-secondary); font-size: 0.9rem; } .sk-oc-card { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.8rem; gap: 0.8rem; background: var(--bg-glass, rgba(var(--fg-rgb), 0.04)); border: 1px solid rgba(var(--fg-rgb), 0.08); border-radius: 8px; transition: border-color 0.2s; } .sk-oc-card:hover { border-color: var(--accent-primary, #7c6af7); } .sk-oc-card-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; } .sk-oc-card-info strong { color: var(--text-primary); font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sk-oc-card-desc { color: var(--text-secondary); font-size: 0.8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sk-oc-card-meta { color: var(--text-muted, #666); font-size: 0.75rem; } .sk-oc-import-btn { flex-shrink: 0; padding: 0.35rem 0.8rem; border-radius: 6px; border: 1px solid var(--accent-primary, #7c6af7); background: transparent; color: var(--accent-primary, #7c6af7); font-size: 0.8rem; cursor: pointer; transition: all 0.2s; } .sk-oc-import-btn:hover:not(:disabled) { background: var(--accent-primary, #7c6af7); color: #fff; } .sk-oc-import-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ═══════════════════════════════════════════════════════════════════ OpenClaw Import-Modal (Mini-Chat) ═══════════════════════════════════════════════════════════════════ */ #sk-import-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(var(--shadow-rgb), 0.6); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; } .sk-import-panel { width: min(520px, 92vw); max-height: 82vh; background: var(--bg-glass, rgba(20,18,40,0.97)); border: 1px solid var(--border, rgba(var(--fg-rgb), 0.12)); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(var(--shadow-rgb), 0.5); animation: sk-import-in 0.2s ease; } @keyframes sk-import-in { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .sk-import-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border, rgba(var(--fg-rgb), 0.08)); flex-shrink: 0; } .sk-import-title { font-size: 0.92rem; font-weight: 700; color: var(--text-primary, #e8e3ff); } .sk-import-close { width: 28px; height: 28px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--text-muted, rgba(var(--fg-rgb), 0.4)); cursor: pointer; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .sk-import-close:hover { background: rgba(var(--fg-rgb), 0.08); color: var(--text-primary, #e8e3ff); } /* Chat-Log */ .sk-import-log { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.45rem; min-height: 180px; max-height: 45vh; } .sk-import-log::-webkit-scrollbar { width: 4px; } .sk-import-log::-webkit-scrollbar-track { background: transparent; } .sk-import-log::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb), 0.12); border-radius: 2px; } .sk-import-msg { font-size: 0.83rem; line-height: 1.55; padding: 0.3rem 0.5rem; border-radius: 6px; word-break: break-word; } .sk-import-msg-agent { color: var(--text-primary, #e8e3ff); background: rgba(124,106,247,0.08); border-left: 2px solid var(--accent, #7c6af7); padding-left: 0.6rem; } .sk-import-msg-user { color: var(--text-primary, #e8e3ff); background: rgba(var(--fg-rgb), 0.05); border-left: 2px solid rgba(var(--fg-rgb), 0.2); padding-left: 0.6rem; text-align: right; border-left: none; border-right: 2px solid rgba(var(--fg-rgb), 0.25); padding-right: 0.6rem; } .sk-import-msg-tool { color: var(--text-secondary, rgba(var(--fg-rgb), 0.55)); font-size: 0.78rem; font-family: monospace; background: rgba(var(--shadow-rgb), 0.2); } .sk-import-msg-sys { color: var(--text-muted, rgba(var(--fg-rgb), 0.38)); font-size: 0.77rem; font-style: italic; } .sk-import-msg-info { color: var(--text-muted, rgba(var(--fg-rgb), 0.45)); font-size: 0.8rem; font-style: italic; text-align: center; } .sk-import-msg-error { color: #f87171; background: rgba(248,113,113,0.08); border-left: 2px solid rgba(248,113,113,0.4); padding-left: 0.6rem; } /* Input-Zeile */ .sk-import-input-row { display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.6rem 0.75rem; border-top: 1px solid var(--border, rgba(var(--fg-rgb), 0.08)); flex-shrink: 0; } .sk-import-input { flex: 1; padding: 0.45rem 0.65rem; border-radius: 7px; border: 1px solid var(--border, rgba(var(--fg-rgb), 0.12)); background: var(--bg-input, rgba(var(--fg-rgb), 0.05)); color: var(--text-primary, #e8e3ff); font-size: 0.83rem; font-family: inherit; resize: none; transition: border-color 0.15s; } .sk-import-input:focus { outline: none; border-color: var(--accent, #7c6af7); } .sk-import-send-btn { width: 36px; height: 36px; border-radius: 7px; border: none; background: var(--accent, #7c6af7); color: #fff; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.15s; } .sk-import-send-btn:hover { opacity: 0.85; } /* Footer-Buttons */ .sk-import-footer { display: flex; gap: 0.5rem; padding: 0.55rem 0.75rem; border-top: 1px solid var(--border, rgba(var(--fg-rgb), 0.06)); flex-shrink: 0; } .sk-import-footer-btn { font-size: 0.8rem; padding: 0.35rem 0.75rem; } /* ═══════════════════════════════════════════════════════════════════ Vision Tab – Gesichtserkennung ═══════════════════════════════════════════════════════════════════ */ .vis-container { display: flex; flex-direction: column; gap: 1.25rem; } /* Notification-Banner (Toast-Style) */ .vis-notification { padding: 0.75rem 1.5rem; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; border: 1px solid var(--border); background: var(--bg-glass); backdrop-filter: blur(12px); position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 9999; text-align: center; box-shadow: 0 4px 20px rgba(var(--shadow-rgb), 0.4); min-width: 200px; max-width: 400px; } .vis-notification-success { border-color: var(--success); color: var(--success); background: rgba(46, 204, 113, 0.15); } .vis-notification-error { border-color: var(--danger); color: var(--danger); background: rgba(231, 76, 60, 0.15); } /* Sektionen */ .vis-section { padding: 1rem 1.25rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-glass); } .vis-section-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; } .vis-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .vis-section-header h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0; } /* Status-Punkt (Dashboard) */ .vis-status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .vis-dot-off { background: var(--text-muted); } .vis-dot-on { background: var(--success); box-shadow: 0 0 6px var(--success); } .vis-status-label { font-size: 0.8rem; color: var(--text-secondary); } /* Dashboard-Layout */ .vis-dashboard { display: flex; gap: 1rem; margin-bottom: 0.75rem; } .vis-feed-wrap { flex: 1; min-width: 0; position: relative; background: rgba(var(--shadow-rgb), 0.3); border-radius: var(--radius-md); overflow: hidden; } .vis-feed-img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); } .vis-feed-placeholder { width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #111; border-radius: var(--radius-md); color: #555; font-size: 1rem; } .vis-detected-panel { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.5rem; } .vis-detected-panel h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin: 0; } .vis-no-faces { font-size: 0.8rem; color: var(--text-muted); font-style: italic; } /* Vision Log */ .vis-log-section { margin-top: 0.5rem; } .vis-log-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; } .vis-log-header h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin: 0; } .vis-log { background: rgba(var(--shadow-rgb), 0.3); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; max-height: 160px; overflow-y: auto; font-family: monospace; font-size: 0.72rem; line-height: 1.4; color: var(--text-muted); } .vis-log-entry { padding: 1px 0; border-bottom: 1px solid rgba(var(--fg-rgb), 0.03); } .vis-log-entry:last-child { border-bottom: none; } .vis-log-time { color: #555; margin-right: 0.4rem; } .vis-log-entry.error { color: #e74c3c; } .vis-log-entry.warn { color: #f39c12; } .vis-log-entry.success { color: #2ecc71; } .vis-log-entry.info { color: var(--text-muted); } .vis-face-badge { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(var(--fg-rgb), 0.03); font-size: 0.82rem; color: var(--text-primary); } .vis-face-badge small { color: var(--text-muted); font-size: 0.72rem; } .vis-face-crop { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: rgba(var(--fg-rgb), 0.05); } /* Erkannte Gesichter */ .vis-face-card { padding: 0.5rem 0.65rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(var(--fg-rgb), 0.03); } .vis-face-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); } .vis-face-conf { font-size: 0.75rem; color: var(--text-secondary); } /* Buttons */ .vis-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; } .vis-btn { padding: 0.45rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-glass); color: var(--text-primary); font-size: 0.82rem; cursor: pointer; transition: var(--transition); } .vis-btn:hover { border-color: var(--border-hover); background: rgba(var(--fg-rgb), 0.06); } .vis-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .vis-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .vis-btn-danger { border-color: var(--danger); color: var(--danger); background: rgba(239, 68, 68, 0.1); } .vis-btn-danger:hover { background: rgba(239, 68, 68, 0.2); } .vis-btn-sm { padding: 0.35rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-glass); color: var(--text-primary); font-size: 0.78rem; cursor: pointer; transition: var(--transition); } .vis-btn-sm:hover { border-color: var(--border-hover); } .vis-btn-sm.vis-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .vis-btn-sm.vis-btn-primary:hover { background: var(--accent-hover); } .vis-btn-sm.vis-btn-test { border-color: var(--success); color: var(--success); } .vis-btn-sm.vis-btn-test:hover { background: rgba(16, 185, 129, 0.15); border-color: var(--success); } .vis-btn-sm.vis-btn-test:disabled { opacity: 0.5; cursor: wait; } .vis-btn-sm.vis-btn-download { border-color: var(--info); color: var(--info); } .vis-btn-sm.vis-btn-download:hover { background: rgba(59, 130, 246, 0.15); border-color: var(--info); } /* Inputs */ .vis-input { padding: 0.45rem 0.65rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input, rgba(var(--fg-rgb), 0.04)); color: var(--text-primary); font-size: 0.85rem; outline: none; transition: var(--transition); } .vis-input:focus { border-color: var(--accent); } .vis-input-sm { width: 80px; } .vis-hint { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--text-muted); font-style: italic; } .vis-select { padding: 0.45rem 0.65rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input, rgba(var(--fg-rgb), 0.04)); color: var(--text-primary); font-size: 0.85rem; outline: none; cursor: pointer; transition: var(--transition); } .vis-select:focus { border-color: var(--accent); } .vis-select option { background: var(--bg-secondary); color: var(--text-primary); } /* Training */ /* ─── Training Wizard ───────────────────────────────────────────── */ .vis-wizard { margin-top: 0.75rem; padding: 1rem; border-radius: 8px; background: rgba(var(--fg-rgb), 0.04); border: 1px solid var(--border); } .vis-wizard-step { text-align: center; } .vis-wizard-step p { margin: 0.5rem 0 0.25rem; color: var(--text-primary); font-size: 0.9rem; } .vis-wizard-spinner { width: 40px; height: 40px; margin: 0 auto; border: 3px solid rgba(var(--fg-rgb), 0.1); border-top-color: var(--accent); border-radius: 50%; animation: visSpinner 0.8s linear infinite; } @keyframes visSpinner { to { transform: rotate(360deg); } } .vis-wizard-face-row { display: flex; align-items: center; gap: 1rem; text-align: left; } .vis-wizard-crop { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; border: 2px solid var(--accent); flex-shrink: 0; } .vis-wizard-name-col { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; } .vis-wizard-name-col p { margin: 0; } .vis-wizard-name-col .vis-input { width: 100%; } .vis-wizard-name-col .vis-btn { align-self: flex-start; } .vis-wizard-name-row { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.75rem 0; } .vis-wizard-name-row label, .vis-wizard-action-row label { font-size: 0.85rem; color: var(--text-secondary); } .vis-wizard-action-row { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; } .vis-wizard-action-row .vis-select, .vis-wizard-action-row .vis-input { width: 100%; } #vis-wizard-step-action h4 { color: var(--accent); margin: 0 0 0.25rem; } #vis-wizard-cancel { margin-top: 0.75rem; opacity: 0.6; } #vis-wizard-cancel:hover { opacity: 1; } .vis-progress-wrap { margin: 0.5rem 0; } .vis-progress-bar { width: 100%; height: 8px; border-radius: 4px; background: rgba(var(--fg-rgb), 0.06); overflow: hidden; } .vis-progress-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.3s ease; } .vis-progress-text { font-size: 0.78rem; color: var(--text-secondary); display: inline-block; margin-top: 0.25rem; } /* Pulsierende Animation waehrend Encoding-Berechnung */ .vis-progress-fill.vis-progress-pulse { animation: visPulse 1.5s ease-in-out infinite; } @keyframes visPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .vis-hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.25rem; } /* Profile-Liste */ .vis-profiles-list { display: flex; flex-direction: column; gap: 0.5rem; } .vis-profile-item { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: rgba(var(--fg-rgb), 0.02); transition: var(--transition); } .vis-profile-item:hover { border-color: var(--border-hover); } .vis-profile-header { display: flex; align-items: center; gap: 0.75rem; } .vis-profile-thumb { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; background: rgba(var(--fg-rgb), 0.05); flex-shrink: 0; } .vis-profile-info { flex: 1; min-width: 0; } .vis-profile-name { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); } .vis-profile-detail { font-size: 0.75rem; color: var(--text-secondary); } .vis-profile-actions { display: flex; gap: 0.35rem; flex-shrink: 0; } .vis-profile-actions button { width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .vis-profile-actions button:hover { border-color: var(--border-hover); color: var(--text-primary); } .vis-profile-actions button.vis-btn-del:hover { color: var(--danger); border-color: var(--danger); } /* Aktions-Konfiguration inline beim Profil */ .vis-profile-action-config { display: flex; align-items: flex-start; gap: 0.5rem; padding-top: 0.4rem; border-top: 1px solid rgba(var(--fg-rgb), 0.05); flex-wrap: wrap; } .vis-profile-action-config .vis-select { flex-shrink: 0; } .vis-profile-action-config .vis-action-value-wrap { flex: 1; min-width: 120px; } .vis-profile-action-config .vis-btn-sm { align-self: flex-start; margin-top: 2px; } .vis-action-header { font-size: 0.88rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.4rem; } .vis-action-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .vis-action-value { flex: 1; min-width: 120px; } .vis-action-value input, .vis-action-value textarea { width: 100%; padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-input, rgba(var(--fg-rgb), 0.04)); color: var(--text-primary); font-size: 0.82rem; resize: vertical; outline: none; } .vis-action-value input:focus, .vis-action-value textarea:focus { border-color: var(--accent); } /* Einstellungen */ .vis-settings-grid { display: flex; flex-direction: column; gap: 0.65rem; } .vis-setting-row { display: flex; align-items: center; gap: 0.75rem; } .vis-setting-row label:first-child { width: 140px; flex-shrink: 0; font-size: 0.82rem; color: var(--text-secondary); } .vis-setting-controls { display: flex; align-items: center; gap: 0.4rem; flex: 1; } .vis-checkbox { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-secondary); cursor: pointer; } .vis-checkbox input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; } .vis-divider { border: none; border-top: 1px solid var(--border); margin: 0.75rem 0; } .vis-danger-zone { display: flex; align-items: center; gap: 0.75rem; } .vis-empty { font-size: 0.82rem; color: var(--text-muted); font-style: italic; padding: 0.25rem 0; } /* Modal (Profil bearbeiten) */ .vis-modal { position: fixed; inset: 0; background: rgba(var(--shadow-rgb), 0.6); display: flex; align-items: center; justify-content: center; z-index: 10100; } .vis-modal-panel { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); width: min(400px, 90vw); overflow: hidden; box-shadow: var(--shadow-lg); } .vis-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); } .vis-modal-header h3 { font-size: 0.95rem; color: var(--text-primary); margin: 0; } .vis-modal-close { background: none; border: none; color: var(--text-secondary); font-size: 1.3rem; cursor: pointer; line-height: 1; } .vis-modal-close:hover { color: var(--text-primary); } .vis-modal-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .vis-modal-body label { font-size: 0.82rem; color: var(--text-secondary); } .vis-modal-footer { display: flex; gap: 0.5rem; justify-content: flex-end; padding: 0.75rem 1rem; border-top: 1px solid var(--border); } /* Responsive: Kamerabild und erkannte Gesichter untereinander */ @media (max-width: 700px) { .vis-dashboard { flex-direction: column; } .vis-detected-panel { width: 100%; } .vis-setting-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .vis-setting-row label:first-child { width: auto; } } /* ── Druck / "An PDF drucken": nur das Support-API-Doku-Modal, lesbar in Schwarz auf Weiss ── Aktiviert durch body.printing-apidoc (gesetzt vom PDF-Button vor window.print()). */ @media print { /* html/body haben overflow:hidden + height:100% -> ohne Override druckt nur die erste (Viewport-)Seite. Fuer den Ausdruck aufheben. */ html, body { height: auto !important; overflow: visible !important; } body.printing-apidoc > *:not(#support-api-modal) { display: none !important; } body.printing-apidoc #support-api-modal { display: block !important; position: static !important; inset: auto !important; background: #fff !important; backdrop-filter: none !important; padding: 0 !important; opacity: 1 !important; overflow: visible !important; z-index: auto !important; } body.printing-apidoc #support-api-modal .modal-content { background: #fff !important; box-shadow: none !important; border: none !important; width: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important; display: block !important; animation: none !important; } body.printing-apidoc #support-api-modal .modal-header { background: none !important; border-bottom: 1px solid #ccc !important; padding: 0 0 8px !important; } body.printing-apidoc #support-api-modal .modal-body { overflow: visible !important; max-height: none !important; padding: 12px 0 0 !important; } /* Lesbare Farben (Dark-Theme -> Schwarz auf Weiss) */ body.printing-apidoc #support-api-modal, body.printing-apidoc #support-api-modal * { color: #000 !important; } body.printing-apidoc #support-api-modal h2 { background: none !important; -webkit-text-fill-color: #000 !important; } body.printing-apidoc #support-api-modal pre, body.printing-apidoc #support-api-modal code { background: #f5f5f5 !important; border-color: #ccc !important; white-space: pre-wrap !important; word-break: break-word !important; } body.printing-apidoc #support-api-modal th, body.printing-apidoc #support-api-modal td, body.printing-apidoc #support-api-modal tr { border-color: #ccc !important; } /* Steuer-Buttons nicht mitdrucken */ body.printing-apidoc #support-api-pdf, body.printing-apidoc #support-api-close { display: none !important; } /* Saubere Seitenumbrueche fuer Tabellen */ body.printing-apidoc #support-api-modal table { page-break-inside: auto; } body.printing-apidoc #support-api-modal tr { page-break-inside: avoid; } /* ── Druck der Sicherheitsschicht-Funktionsbeschreibung (body.printing-secdoc) ── */ body.printing-secdoc > *:not(#sec-secdoc-modal) { display: none !important; } body.printing-secdoc #sec-secdoc-modal { display: block !important; position: static !important; inset: auto !important; background: #fff !important; backdrop-filter: none !important; padding: 0 !important; opacity: 1 !important; overflow: visible !important; z-index: auto !important; } body.printing-secdoc #sec-secdoc-modal .modal-content { background: #fff !important; box-shadow: none !important; border: none !important; width: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important; display: block !important; animation: none !important; } body.printing-secdoc #sec-secdoc-modal .modal-header { background: none !important; border-bottom: 1px solid #ccc !important; padding: 0 0 8px !important; } body.printing-secdoc #sec-secdoc-modal .modal-body { overflow: visible !important; max-height: none !important; padding: 12px 0 0 !important; } body.printing-secdoc #sec-secdoc-modal, body.printing-secdoc #sec-secdoc-modal * { color: #000 !important; } body.printing-secdoc #sec-secdoc-modal h2 { background: none !important; -webkit-text-fill-color: #000 !important; } body.printing-secdoc #sec-secdoc-modal pre, body.printing-secdoc #sec-secdoc-modal code { background: #f5f5f5 !important; border-color: #ccc !important; white-space: pre-wrap !important; word-break: break-word !important; } body.printing-secdoc #sec-secdoc-modal th, body.printing-secdoc #sec-secdoc-modal td, body.printing-secdoc #sec-secdoc-modal tr { border-color: #ccc !important; } body.printing-secdoc #sec-secdoc-pdf, body.printing-secdoc #sec-secdoc-close { display: none !important; } body.printing-secdoc #sec-secdoc-modal table { page-break-inside: auto; } body.printing-secdoc #sec-secdoc-modal tr { page-break-inside: avoid; } /* ── Druck der Firewall-Funktionsbeschreibung (body.printing-fwdoc) ── */ body.printing-fwdoc > *:not(#sec-fwdoc-modal) { display: none !important; } body.printing-fwdoc #sec-fwdoc-modal { display: block !important; position: static !important; inset: auto !important; background: #fff !important; backdrop-filter: none !important; padding: 0 !important; opacity: 1 !important; overflow: visible !important; z-index: auto !important; } body.printing-fwdoc #sec-fwdoc-modal .modal-content { background: #fff !important; box-shadow: none !important; border: none !important; width: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important; display: block !important; animation: none !important; } body.printing-fwdoc #sec-fwdoc-modal .modal-header { background: none !important; border-bottom: 1px solid #ccc !important; padding: 0 0 8px !important; } body.printing-fwdoc #sec-fwdoc-modal .modal-body { overflow: visible !important; max-height: none !important; padding: 12px 0 0 !important; } body.printing-fwdoc #sec-fwdoc-modal, body.printing-fwdoc #sec-fwdoc-modal * { color: #000 !important; } body.printing-fwdoc #sec-fwdoc-modal h2 { background: none !important; -webkit-text-fill-color: #000 !important; } body.printing-fwdoc #sec-fwdoc-modal pre, body.printing-fwdoc #sec-fwdoc-modal code { background: #f5f5f5 !important; border-color: #ccc !important; white-space: pre-wrap !important; word-break: break-word !important; } body.printing-fwdoc #sec-fwdoc-modal th, body.printing-fwdoc #sec-fwdoc-modal td, body.printing-fwdoc #sec-fwdoc-modal tr { border-color: #ccc !important; } body.printing-fwdoc #sec-fwdoc-pdf, body.printing-fwdoc #sec-fwdoc-close { display: none !important; } body.printing-fwdoc #sec-fwdoc-modal table { page-break-inside: auto; } body.printing-fwdoc #sec-fwdoc-modal tr { page-break-inside: avoid; } /* ── Druck der Root-Broker-Funktionsbeschreibung (body.printing-brkdoc) ── */ body.printing-brkdoc > *:not(#sec-brkdoc-modal) { display: none !important; } body.printing-brkdoc #sec-brkdoc-modal { display: block !important; position: static !important; inset: auto !important; background: #fff !important; backdrop-filter: none !important; padding: 0 !important; opacity: 1 !important; overflow: visible !important; z-index: auto !important; } body.printing-brkdoc #sec-brkdoc-modal .modal-content { background: #fff !important; box-shadow: none !important; border: none !important; width: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important; display: block !important; animation: none !important; } body.printing-brkdoc #sec-brkdoc-modal .modal-header { background: none !important; border-bottom: 1px solid #ccc !important; padding: 0 0 8px !important; } body.printing-brkdoc #sec-brkdoc-modal .modal-body { overflow: visible !important; max-height: none !important; padding: 12px 0 0 !important; } body.printing-brkdoc #sec-brkdoc-modal, body.printing-brkdoc #sec-brkdoc-modal * { color: #000 !important; } body.printing-brkdoc #sec-brkdoc-modal h2 { background: none !important; -webkit-text-fill-color: #000 !important; } body.printing-brkdoc #sec-brkdoc-modal pre, body.printing-brkdoc #sec-brkdoc-modal code { background: #f5f5f5 !important; border-color: #ccc !important; white-space: pre-wrap !important; word-break: break-word !important; } body.printing-brkdoc #sec-brkdoc-modal th, body.printing-brkdoc #sec-brkdoc-modal td, body.printing-brkdoc #sec-brkdoc-modal tr { border-color: #ccc !important; } body.printing-brkdoc #sec-brkdoc-pdf, body.printing-brkdoc #sec-brkdoc-close { display: none !important; } body.printing-brkdoc #sec-brkdoc-modal table { page-break-inside: auto; } body.printing-brkdoc #sec-brkdoc-modal tr { page-break-inside: avoid; } } /* ── Hover-Vorschau fuer Skill-Anleitungen (skillcfg.js) ────────────────── Der Pfad in einer Skill-Beschreibung ist als reiner Text eine Sackgasse: die Datei liegt auf dem Server. Beim Ueberfahren wird sie gezeigt. */ .skcfg-doc { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; color: var(--accent); } .skcfg-doc:hover, .skcfg-doc:focus { color: var(--accent-hover); outline: none; } .skcfg-docbox { position: absolute; z-index: 10060; width: min(600px, calc(100vw - 24px)); max-height: min(70vh, 560px); display: flex; flex-direction: column; /* DECKEND: darunter liegt das Einstellungs-Formular mit Text. */ background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(var(--shadow-rgb), .35); overflow: hidden; } .skcfg-docbox[hidden] { display: none; } .skcfg-doc-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: .78rem; font-weight: 600; color: var(--text-primary); background: rgba(var(--accent-rgb), .10); } .skcfg-doc-meta { margin-left: auto; font-weight: 500; color: var(--text-muted); } /* Kopieren: die Anleitung enthaelt fertige LLM-Prompts – sie soll sich in einem Griff weiterreichen lassen, ohne die Datei auf dem Server zu suchen. */ .skcfg-doc-copy { flex: 0 0 auto; background: none; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 6px; padding: 2px 7px; font-size: .85rem; line-height: 1.3; cursor: pointer; font-family: inherit; } .skcfg-doc-copy:hover, .skcfg-doc-copy:focus { color: var(--text-primary); border-color: var(--accent); background: rgba(var(--accent-rgb), .14); outline: none; } .skcfg-doc-copy.is-ok { color: var(--success); border-color: var(--success); } .skcfg-doc-copy.is-fail { color: var(--danger); border-color: var(--danger); } .skcfg-doc-body { padding: 10px 14px; overflow-y: auto; font-size: .8rem; line-height: 1.5; color: var(--text-secondary); } .skcfg-doc-body h1, .skcfg-doc-body h2, .skcfg-doc-body h3 { color: var(--text-primary); margin: .8em 0 .3em; font-size: .92rem; } .skcfg-doc-body h1 { font-size: 1rem; } .skcfg-doc-body code { background: rgba(var(--fg-rgb), .08); padding: 1px 4px; border-radius: 4px; font-size: .92em; } .skcfg-doc-body pre { background: rgba(var(--fg-rgb), .06); padding: 8px 10px; border-radius: 8px; overflow-x: auto; font-size: .75rem; } .skcfg-doc-body table { border-collapse: collapse; font-size: .74rem; } .skcfg-doc-body th, .skcfg-doc-body td { border: 1px solid var(--border); padding: 3px 6px; text-align: left; } .skcfg-doc-body img { max-width: 100%; }