@charset "UTF-8"; /* ============================== Theme Variables — minimal, modern ============================== */ :root { /* Surfaces: a calmer near-black scale */ --bg: #0f1115; --panel1: #14171d; --panel2: #1a1e26; --sidepanel: #14171d; --panel: #1a1e26; /* Text + lines */ --ink: #e6e8ee; --muted: rgba(230, 232, 238, 0.55); --line: rgba(255, 255, 255, 0.08); /* Accents — single hue, used sparingly */ --accent: #5b8def; --accent50: rgba(91, 141, 239, 0.5); --accent25: rgba(91, 141, 239, 0.18); /* States */ --dir: #e0a060; --previewed: rgba(255, 213, 0, 0.08); /* Inputs / buttons */ --checkbox-bg: #1a1e26; --checkbox-tick: #ffffff; --hover-border: rgba(255, 255, 255, 0.16); --hover-bg: rgba(255, 255, 255, 0.04); --btn-bg: #1a1e26; --textarea-bg: #14171d; --textarea-fg: var(--ink); --notes-fg: #bdd2ee; --kbd-bg: #0c0e12; --focus-shadow: rgba(91, 141, 239, 0.35); --footer-gradient: var(--bg); --sidebar-width: 360px; --sidebar-min: 340px; --sidebar-max: 600px; --divider-width: 6px; /* Radius tokens for consistent rounding */ --radius: 8px; /* slightly softer corners */ --radius-sm: 6px; --radius-round: 999px; /* fully rounded elements like pills */ /* ==== Semantic tokens ==== */ --fg-on-accent: #ffffff; --success: #34c08a; --danger: #e5615a; --danger-strong: #e5615a; --selected: var(--accent); --hl-search-bg: #ffd54a; --hl-search-fg: #1a1a1a; /* Iconography */ --icon-size: 16px; --icon-stroke: currentColor; --spinner-color: currentColor; --spinner-size: 16px; --spinner-thickness: 2px; --loading-overlay-bg: rgba(0, 0, 0, 0.08); /* faint ring color (fallback first, then override with color-mix if supported) */ --spinner-faint-color: rgba(0, 0, 0, 0.2); --spinner-faint-color: color-mix(in oklab, var(--spinner-color) 20%, transparent); /* NEW: tree preview marker/arrow color (defaults to folder color) */ --tree-preview-arrow: var(--dir); } /* Light theme overrides (activated via ) */ :root[data-theme=light] { /* Surfaces */ --bg: #fafafa; --panel1: #ffffff; --panel2: #f1f3f7; --sidepanel: #ffffff; --panel: #f4f5f8; /* Text + lines */ --ink: #1a1d23; --muted: rgba(26, 29, 35, 0.55); --line: rgba(0, 0, 0, 0.08); /* Accent */ --accent: #2f6fe5; --accent50: rgba(47, 111, 229, 0.5); --accent25: rgba(47, 111, 229, 0.18); /* States */ --dir: #b56d29; --previewed: rgba(180, 120, 17, 0.18); /* Inputs / buttons */ --hover-border: rgba(0, 0, 0, 0.12); --hover-bg: rgba(0, 0, 0, 0.04); --btn-bg: #ffffff; --checkbox-bg: #ffffff; --checkbox-tick: #ffffff; --textarea-bg: #ffffff; --textarea-fg: var(--ink); --kbd-bg: #eef1f6; /* Text-Spezialfälle */ --notes-fg: #103b66; /* Fokus / Auswahl / States */ --focus-shadow: rgba(47, 111, 229, 0.28); --selected: var(--accent); --hl-search-bg: #ffe44d; --hl-search-fg: #1a1a1a; /* Semantische Farben */ --fg-on-accent: #ffffff; --success: #2da472; --danger: #d8554f; --danger-strong: #d8554f; /* Footer */ --footer-gradient: var(--bg); /* Spinner / Loading */ --spinner-color: currentColor; /* erbt vom Kontext */ --spinner-size: 16px; --spinner-thickness: 2px; --loading-overlay-bg: rgba(255, 255, 255, 0.6); /* Light: Weißfilm statt Schwarz */ /* Fallback + dynamische, zarte Ringfarbe */ --spinner-faint-color: rgba(0, 0, 0, 0.15); --spinner-faint-color: color-mix(in oklab, var(--spinner-color) 22%, transparent); /* keep it tied to --dir; it will be different automatically in light */ --tree-preview-arrow: var(--dir); } /* ============================== Global ============================== */ html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Inter, Arial, sans-serif; overflow: hidden; } /* Visuell verstecken, aber im DOM und für SRs belassen */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } mark.hl-search { background: var(--hl-search-bg) !important; color: var(--hl-search-fg) !important; padding: 0 2px !important; border-radius: var(--radius) !important; /* unify radius */ box-shadow: none; text-shadow: none; } /* --- THEME TOGGLE: Buttons Dark/Light (4a: aktiver Button kontrastreich) --- */ .theme-toggle-group { display: inline-flex; gap: 0.5rem; margin-left: 0.5rem; vertical-align: middle; } .theme-toggle-group .opt-toggle { border: 1px solid #bbb; background: transparent; color: inherit; padding: 0.35rem 0.6rem; border-radius: 0.5rem; cursor: pointer; line-height: 1; } .theme-toggle-group .opt-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .theme-toggle-group .opt-toggle[aria-pressed=true][data-theme=dark] { background: #000; color: #fff; border-color: #000; } .theme-toggle-group .opt-toggle[aria-pressed=true][data-theme=light] { background: #fff; color: #000; border-color: #000; } .theme-toggle-group .opt-toggle[aria-pressed=false] { background: transparent; color: inherit; } /* .theme-toggle-group umgezogen nach _footer.scss */ /* ============================== Header — minimal flat ============================== */ header { position: sticky; top: 0; z-index: 10; display: flex; gap: 6px; align-items: center; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); } header h1 { margin: 0 8px 0 0; display: inline-flex; align-items: center; min-height: 32px; } header .brand-button { display: inline-flex; align-items: center; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; } header .brand-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; } header .brand-logo { display: block; width: 230px; height: auto; filter: brightness(0) invert(1); /* dark theme → weiß */ } header .logo { width: 28px; height: 28px; display: block; } :root[data-theme=light] header .brand-logo { filter: brightness(0); /* light theme → schwarz */ } dialog#aboutDialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--ink); box-shadow: var(--shadow); padding: 0; width: min(440px, 92vw); } dialog#aboutDialog::backdrop { background: rgba(0, 0, 0, 0.5); } .about-dialog-form { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 28px; } .about-header { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; position: static; text-align: center; } .about-logo { width: min(260px, 100vw - 120px); height: auto; filter: brightness(0) invert(1); } :root[data-theme=light] .about-logo { filter: brightness(0); } .about-header p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.35; } .about-meta { display: grid; gap: 10px; margin: 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .about-meta div { display: grid; grid-template-columns: minmax(64px, max-content) minmax(0, 1fr); gap: 16px; align-items: start; } .about-meta dt { color: var(--muted); font-size: 12px; line-height: 1.35; } .about-meta dd { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; } .about-close-btn { position: absolute; top: 12px; right: 12px; } .about-footer { color: var(--muted); font-size: 12px; line-height: 1.35; text-align: center; } @media (max-width: 420px) { .about-dialog-form { padding: 24px 20px; } .about-logo { width: min(220px, 100vw - 96px); } } .output-title { display: none; /* hidden by default, shown when output exists */ } /* ============================== Header quick-toggles (prompt output) ============================== */ header .header-toggles { display: inline-flex; align-items: center; gap: 2px; margin: 0 4px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--btn-bg); } header .header-toggle { min-height: 30px; min-width: 32px; padding: 6px; gap: 0; border: 1px solid transparent; background: transparent; color: var(--muted); } header .header-toggle:hover:not(:disabled) { background: var(--hover-bg); color: var(--ink); } header .header-toggle.is-active { background: var(--accent25); border-color: var(--accent50); color: var(--accent); } header .header-toggle .btn-icon { margin: 0; } /* ============================== Main Layout (UPDATED) ============================== */ main { display: grid; grid-template-columns: var(--sidebar-width) var(--divider-width) 1fr; /* ⬅️ 3 columns */ gap: 0; /* keep a single thin divider, no gap */ height: calc(100% - 53px); /* matches new minimal header height */ } @media (max-width: 980px) { main { grid-template-columns: 1fr; /* single column on small screens */ height: auto; } } /* ============================== Sidebar (border moved to divider) ============================== */ .sidebar { /* remove the hard border; the resizer draws the line */ border-right: 0; padding: 0 12px 100px; overflow: auto; /* wichtig: Scrollbar gehört diesem Element */ background: var(--sidepanel); /* NEU: Scrollbar-Styling für Chromium/WebKit */ } .sidebar::-webkit-scrollbar { width: 10px; /* konsistenter als Default, ähnlich zu Textareas */ height: 10px; /* falls horizontal */ } .sidebar::-webkit-scrollbar-track { background: var(--panel); /* jetzt definiert */ } .sidebar::-webkit-scrollbar-thumb { background: var(--muted); border-radius: var(--radius); /* unify scrollbar rounding */ /* optional: dünner „Spacing“-Rand, damit der Thumb sich vom Track abhebt */ border: 2px solid var(--panel); } .sidebar::-webkit-scrollbar-thumb:hover { background: var(--accent); } .sidebar { /* Fallback / Firefox */ scrollbar-width: thin; scrollbar-color: var(--muted) var(--panel); } /* Disable the divider on small screens */ @media (max-width: 980px) { .sidebar { border-right: 1px solid var(--line); } /* restore a static line on mobile */ } /* ============================== Content Area ============================== */ .content { display: flex; flex-direction: column; height: 100%; /* CHANGED: wichtig, damit Kind-Flex-Container (#bundleOutput) tatsächlich Resthöhe bekommt */ min-height: 0; overflow: hidden; padding-left: 15px; } h2 { margin-top: 0; } label { display: block; margin: 10px 0; } /* NEW: Der Wrapper um #bundleOutput wird ein vertikaler Flex-Container, bekommt selbst Resthöhe und lässt #bundleOutput darin wachsen/scrollen. */ .texarea { display: flex; flex-direction: column; /* nimmt den gesamten verbleibenden Platz in .content */ flex: 1 1 auto; /* kritisch: ohne min-height:0 kann der Inhalt nicht in die Resthöhe schrumpfen */ min-height: 0; padding-right: 15px; padding-bottom: 5px; } hr { border: none; } /* ============================== Buttons — clean, minimal, icon-aware ============================== */ button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--btn-bg); color: var(--ink); padding: 6px 12px; min-height: 32px; font-size: 13px; font-weight: 500; line-height: 1; border-radius: var(--radius); border: 1px solid var(--line); cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease; } button:hover:not(:disabled), .btn:hover:not(:disabled) { background: var(--hover-bg); border-color: var(--hover-border); color: var(--ink); } button:active:not(:disabled), .btn:active:not(:disabled) { transform: translateY(0.5px); } button:focus-visible, .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-shadow); } button.primary, .btn.primary { background: var(--accent); color: var(--fg-on-accent); border-color: transparent; } button.primary:hover:not(:disabled), .btn.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.08); color: var(--fg-on-accent); border-color: transparent; } button:disabled, .btn:disabled { opacity: 0.45; cursor: not-allowed; } /* === Inline Phosphor icon inside any button =============================== */ .btn-icon { width: var(--icon-size, 16px); height: var(--icon-size, 16px); flex: 0 0 auto; fill: currentColor; color: currentColor; display: inline-block; vertical-align: middle; pointer-events: none; } /* === Icon-only Button ===================================================== */ .icon-btn { width: 32px; height: 32px; min-height: 32px; padding: 0; gap: 0; background: transparent; border: 1px solid transparent; color: var(--muted); } .icon-btn:hover:not(:disabled) { background: var(--hover-bg); border-color: var(--line); color: var(--ink); } .icon-btn .btn-icon { width: 18px; height: 18px; } #selectAllBtn { display: none; } #generateBtn { background: var(--success); color: var(--fg-on-accent); border-color: transparent; } #generateBtn:hover:not(:disabled) { filter: brightness(1.08); background: var(--success); color: var(--fg-on-accent); border-color: transparent; } #optionsBtn { border: 1px solid transparent; box-shadow: none; outline: none; } /* ============================== Inputs & Textareas ============================== */ input[type=text], textarea { width: 100%; background: var(--textarea-bg); /* thematisierbar: vorher hart codiert */ border: 1px solid var(--line); color: var(--textarea-fg, var(--ink)); /* neue Variable mit sicherem Fallback */ border-radius: var(--radius); /* unify radius */ padding: 0.6rem 0.7rem; transition: border-color 0.2s, box-shadow 0.2s; margin-right: 15px; } input[type=text]:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-shadow); /* nutzt zentrales Token */ } textarea { min-height: 160px; resize: vertical; } textarea#notes { color: var(--notes-fg); /* neue Variable in :root definiert */ font-size: 1.2rem; /* obere rechte Ecke explizit abrunden und Platz für Clear-Button schaffen */ border-top-right-radius: var(--radius) !important; padding-right: 2.75rem; /* Platz für runden Clear-Button */ } textarea#notes::-webkit-scrollbar { width: 6px; } textarea#notes::-webkit-scrollbar-track { background: var(--panel); } textarea#notes::-webkit-scrollbar-thumb { background: var(--muted); border-radius: var(--radius); /* unify scrollbar rounding */ } textarea#notes::-webkit-scrollbar-thumb:hover { background: var(--accent); } #notesWrap { position: relative; /* für absolut positionierten Clear-Button */ /* visuelle Konsistenz – falls Wrapper sichtbar ist */ border-top-right-radius: var(--radius); } /* runder Clear-Button in der Ecke von #notes */ .notes-clear-btn { position: absolute; top: 8px; right: 20px; width: 26px; height: 26px; min-height: 0; padding: 0; gap: 0; border-radius: 9999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; background: var(--panel); color: var(--muted); cursor: pointer; z-index: 2; transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease; } .notes-clear-btn:hover:not(:disabled) { background: var(--hover-bg); border-color: var(--hover-border); color: var(--ink); } .notes-clear-btn .btn-icon { width: 12px; height: 12px; } .notes-clear-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-shadow); } /* Sichtbarkeit: Standard via [hidden]; Wrapper-Class zeigt Button an */ #notesWrap .notes-clear-btn[hidden] { display: none; } #notesWrap.notes-has-value .notes-clear-btn[hidden] { display: inline-flex; } #bundleOutput { flex: 1; min-height: 0; overflow: auto; margin-bottom: 10px; /* match input/textarea visuals */ background: var(--textarea-bg); border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius); /* unify radius */ padding: 0.6rem 0.7rem; box-sizing: border-box; /* readable for code/text */ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: pre-wrap; word-break: break-word; /* focus ring parity */ } #bundleOutput:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-shadow); } #bundleOutput { /* faux placeholder */ } #bundleOutput:empty::before { content: "Generated prompt will appear here..."; opacity: 0.6; } #bundleOutput { /* same scrollbar look as before */ } #bundleOutput::-webkit-scrollbar { width: 6px; } #bundleOutput::-webkit-scrollbar-track { background: var(--panel); } #bundleOutput::-webkit-scrollbar-thumb { background: var(--muted); border-radius: var(--radius); } #bundleOutput::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* Image preview inside output */ #bundleOutput .img-preview { display: block; /* verhindert Inline-Gaps */ max-width: 100%; /* skaliert auf Containerbreite */ height: auto; /* Seitenverhältnis bewahren */ /* Keine zusätzlichen Ränder, respektiert Padding des Containers */ } pre.line-numbers { border: none !important; outline: none !important; box-shadow: none !important; } /* === Markdown Preview (GitHub Markdown CSS integration) ================== */ /* Scope all overrides to markdown-body inside the output so plain text/code stays as-is */ #bundleOutput .markdown-body { /* use app typography, not monospace */ font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Inter, Arial, sans-serif; color: var(--ink); background: transparent; line-height: 1.6; /* undo container defaults that make prose look "techy" */ white-space: normal; word-break: normal; } /* let Prism control code colors; keep backgrounds transparent to match dark theme */ #bundleOutput .markdown-body pre { background: transparent; } #bundleOutput .markdown-body pre code, #bundleOutput .markdown-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* tables readable on dark */ #bundleOutput .markdown-body table { width: 100%; border-collapse: collapse; } #bundleOutput .markdown-body th, #bundleOutput .markdown-body td { border: 1px solid var(--line); padding: 0.4rem 0.6rem; } /* links and blockquotes tuned for dark UI */ #bundleOutput .markdown-body a { color: var(--accent); } #bundleOutput .markdown-body blockquote { border-left: 3px solid var(--accent); margin: 0.8rem 0; padding: 0.4rem 0.8rem; color: inherit; background: var(--hover-bg); border-radius: var(--radius); } /* ============================== moved from index.html: search clear-button overlay (kept selectors as-is; minimal-risk migration) ============================== */ .search-wrap { position: relative; } .search-wrap > input { /* reserve space for the clear button on the right */ padding-right: 2rem; } .search-wrap > .clear-btn { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); display: none; /* toggled by JS depending on input value */ background: transparent; border: 0; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.125rem; opacity: 0.7; } .search-wrap > .clear-btn:hover { opacity: 1; } .search-wrap > .clear-btn:focus { outline: 2px solid currentColor; outline-offset: 2px; } /* ============================== moved from index.html: soft-wrap for code preview note: #bundleOutput already sets overflow:auto; keeping .prompt-output for compatibility ============================== */ .prompt-output pre.wrap { white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; } .prompt-output { overflow: auto; } /* ============================== Checkboxes (zentralisiert) - Globale Basis-Regeln fuer input[type="checkbox"] - Tree-spezifische Feinheiten bitte in _tree.scss ueber Selektor-Hook (.tree ...) ueberschreiben - Single source of truth: keine Duplikate in _tree.scss oder _utilities.scss (falls vorhanden: bitte entfernen, damit keine Kaskaden-Drift entsteht) =============================== */ input[type=checkbox] { appearance: none; width: 14px; height: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--checkbox-bg); position: relative; cursor: pointer; transition: all 0.15s ease-in-out; } input[type=checkbox]:hover { border-color: var(--muted); } input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); } input[type=checkbox]:checked::after { content: ""; position: absolute; top: 0px; left: 4px; width: 3px; height: 7px; border: solid var(--checkbox-tick); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* Scope-Hook (Override-Punkt fuer Tree-spezifische Anpassungen; bewusst leer) */ /* ============================== Toolbar ============================== */ .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; padding-right: 15px; } .toolbar #generateBtn { position: absolute; right: 15px; } .selection-toolbar { display: flex; gap: 8px; margin-bottom: 8px; } .selection-toolbar button { flex: 1 1 0; } .filter-bar { margin-bottom: 8px; display: flex; flex: 1; width: 100%; padding: 0; gap: 8px; } .filter-bar #extFilter, .filter-bar #textSearch { margin: 0; flex: 1 1 0; } .filter-bar { /* icon-prefixed variant: search/magnifier inside the input */ } .filter-bar.with-icon { position: relative; align-items: stretch; } .filter-bar.with-icon .filter-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted); fill: currentColor; pointer-events: none; z-index: 1; } .filter-bar.with-icon input[type=text] { padding-left: 32px; } /* ============================== Utilities ============================== */ .muted { color: var(--muted); position: absolute; bottom: 10px; margin-bottom: 10px; } .path { opacity: 0.9; } #result { position: absolute; bottom: 15px; right: 30px; padding: 0; height: 15px; } /* ============================== Tree View ============================== */ .tree { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12.5px; user-select: none; } .tree details { margin-left: 20px; } .tree details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.25rem; } .tree details > summary::-webkit-details-marker { display: none; } .tree .twist { display: inline-block; width: 1rem; text-align: center; } .tree .node { display: flex; align-items: center; gap: 0.4rem; padding: 4px 20px; border-radius: var(--radius); /* unify */ color: var(--ink); /* use theme token */ cursor: pointer; } .tree .node.folder { padding-left: 0; } .tree .node.folder .path { font-weight: bold; color: var(--dir); } .tree .node.folder input[type=checkbox] { display: none; } .tree .node:hover { background: var(--hover-bg); } .tree .node .path { border-bottom: 3px solid transparent; } .tree .node { /* [folders] Ordner mit ausgewählten Dateien im Unterbaum */ } .tree .node .path.has-selected { color: var(--selected); /* zentralisiert */ } .tree .node .path.imported { border-bottom: 3px solid var(--accent50); color: var(--ink); /* avoid hard white; keep readable across themes */ } .tree .node .path.import-missing { color: var(--danger-strong); } .tree summary.node.folder { display: flex; align-items: center; gap: 0; } .tree summary.node.folder .twist { width: 40px; text-align: center; } .tree summary.node.folder .twist::after { content: "📁"; display: inline-block; font-size: 1.5em; width: 1.5em; text-align: center; margin-left: 0.1rem; } .tree details[open] > summary.node.folder .twist::after { content: "📂"; font-size: 1.5em; width: 1.5em; } .tree .node input[type=checkbox] { flex-shrink: 0; } .tree { /* [siblings] Reines Symbol hinter Ordnernamen, ohne Button-Optik */ } .tree summary .pick-siblings { margin-left: 6px; padding: 0; font-size: 18px; line-height: 1.2; opacity: 0.7; cursor: pointer; user-select: none; } .tree summary .pick-siblings:hover, .tree summary .pick-siblings:focus { opacity: 1; } .tree { /* Preview marker (arrow) color */ } .tree .node.is-preview::before, .tree .node.preview::before { color: var(--tree-preview-arrow); } .tree .node.is-preview .twist, .tree .node.preview .twist { color: var(--tree-preview-arrow); } .tree .node.is-preview .twist svg, .tree .node.preview .twist svg { fill: var(--tree-preview-arrow); } /* ============================== VSCode Icons mapping ============================== */ .file-icon { --icon: url("/assets/icn/default_file.svg"); width: 18px; height: 18px; border-radius: var(--radius); /* unify */ display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: none; } .file-icon::before { content: ""; width: 100%; height: 100%; display: block; background: center/contain no-repeat; background-image: var(--icon); border-radius: var(--radius); /* unify */ } /* ============================== Checkboxes (gemeinsame Regeln) ============================== */ input[type=checkbox], .tree input[type=checkbox] { appearance: none; width: 14px; height: 14px; border: 1px solid var(--line); border-radius: var(--radius); /* unify radius for all checkboxes */ background: var(--checkbox-bg); position: relative; cursor: pointer; transition: all 0.15s ease-in-out; } input[type=checkbox]:hover, .tree input[type=checkbox]:hover { border-color: var(--muted); } input[type=checkbox]:checked, .tree input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); } input[type=checkbox]:checked::after, .tree input[type=checkbox]:checked::after { content: ""; position: absolute; top: 0px; left: 4px; width: 3px; height: 7px; border: solid var(--checkbox-tick); /* now white */ border-width: 0 2px 2px 0; transform: rotate(45deg); } /* note: Checkbox-Basis-Styles werden zentral in styles/_checkbox.scss gepflegt. Hier bitte nur Tree-spezifische Feinheiten lassen (z. B. Layout). */ .path.current-output { position: relative; } .path.current-output::before { /* siehe js/main.js: dynamisch erzeugtes CSS */ content: ""; position: absolute; top: 9px; left: -5px; width: calc(100% - 15px); height: 22px; background: var(--previewed); border-radius: 5px; } .path.current-output::after { position: relative; content: " →"; color: var(--tree-preview-arrow); margin-left: 4px; font-weight: 600; font-size: 1.5rem; top: 2px; left: 3px; } /* ============================== Resizer handle (Sidebar) ============================== */ .resizer { position: relative; cursor: col-resize; /* expand hit area without looking fat */ width: 20px; background: transparent; touch-action: none; /* allow horizontal drag on touch */ /* === NEW: Optik an .ta-resizer angleichen ========================= Wir ersetzen die alte 1px-Linie durch eine vertikale „Pille“ (3×64px) und schieben sie leicht nach rechts (+3px). Variablen lokal, um Side-Effects zu vermeiden. */ --resizer-handle-length: 64px; /* vertikale Länge der Pille */ --resizer-handle-thickness: 3px; /* Breite der Pille */ --resizer-handle-offset-x: 3px; /* Rechtsversatz (Default 2b) */ /* Alte Linie deaktivieren */ } .resizer::before { content: none; } .resizer { /* Neue vertikale „Pille“ */ } .resizer::after { content: ""; position: absolute; top: 50%; left: 50%; width: var(--resizer-handle-thickness); height: var(--resizer-handle-length); border-radius: var(--radius); /* unify */ background: var(--line); opacity: 0.75; /* leicht nach rechts, zentriert vertikal */ transition: background 0.2s, opacity 0.2s; } .resizer { /* Hover-/Dragging-Feedback wie beim horizontalen Griff */ } .resizer:hover::after { background: var(--ink); } .resizer.dragging::after { opacity: 1; } @media (max-width: 980px) { .resizer { display: none; } } /* === Textarea-Wrap + Resizer (NEW) ================================== */ .ta-wrap { position: relative; /* für die absolute Resizer-Position */ padding-right: 15px; } .ta-wrap > textarea#notes { display: block; width: 100%; /* CHANGED: Minhöhe auf 120px, übersteuert globale 160px */ min-height: 120px; /* Native Resize aus, da eigener Resizer vorhanden */ resize: none; box-sizing: border-box; } /* Breiter, unsichtbarer „Griff“ an der gesamten Unterkante */ .ta-resizer { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; /* Griff-Zone, anfassbar über volle Breite */ cursor: ns-resize; /* optional leichte optische Hilfe */ display: flex; align-items: center; justify-content: center; user-select: none; transform: translateY(11px); } /* kleine Markierung in der Mitte (optisch, optional) */ .ta-resizer::after { content: ""; width: 64px; height: 3px; border-radius: var(--radius); /* unify */ background: var(--line); opacity: 0.75; transition: background 0.2s; } .ta-resizer:hover::after { background: var(--ink); } /* visuelles Feedback beim Ziehen (optional) */ .ta-resizer.dragging::after { opacity: 1; } /* ============================== Modal Dialogs (Options + Startup-Blocker) ============================== */ dialog#optionsDialog, dialog#blockerDialog, dialog#wpDialog, dialog#summaryResultDialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--sidepanel); color: var(--ink); padding: 22px 22px 16px; width: min(440px, 92vw); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); position: relative; } dialog#summaryResultDialog { padding: 0; overflow: hidden; } dialog#optionsDialog { width: min(760px, 94vw); /* Feste Hoehe, damit der Dialog beim Tab-Wechsel nicht springt. */ height: min(680px, 88vh); padding: 0; overflow: hidden; } /* Backdrop der modalen Dialoge: nur abdunkeln, kein Blur */ dialog#optionsDialog::backdrop, dialog#blockerDialog::backdrop, dialog#wpDialog::backdrop, dialog#summaryResultDialog::backdrop { background: rgba(8, 10, 14, 0.55); } /* Inhalt des Dialogs */ .options-form { display: flex; flex-direction: column; gap: 0; height: 100%; } .options-form h3 { margin: 0; padding-right: 32px; /* Platz für das X oben rechts */ font-size: 18px; font-weight: 600; letter-spacing: 0.01em; } .options-form .settings-header { position: static; top: auto; z-index: auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 0; padding: 20px 52px 16px 20px; border-bottom: 1px solid var(--line); background: var(--panel1); } .options-form .settings-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; } .options-form .settings-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 0; flex: 1 1 auto; } .options-form .settings-tabs { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-right: 1px solid var(--line); background: var(--sidepanel); } .options-form .settings-tab { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease; } .options-form .settings-tab:hover, .options-form .settings-tab:focus { background: var(--hover-bg); color: var(--ink); } .options-form .settings-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .options-form .settings-tab[aria-selected=true] { background: var(--accent25); border-color: var(--accent50); color: var(--ink); } .options-form .settings-panels { min-width: 0; overflow: auto; background: var(--panel1); } .options-form .settings-panel { padding: 18px; } .options-form .settings-section { display: flex; flex-direction: column; gap: 8px; max-width: 460px; } .options-form .settings-section--wide { max-width: 100%; } .options-form .settings-section h4 { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.3; text-transform: uppercase; } .options-form .settings-textarea { width: 100%; min-height: 190px; resize: none; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--textarea-bg); color: var(--textarea-fg); font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } .options-form .settings-textarea:focus { outline: 2px solid var(--ink); outline-offset: 2px; } .options-form .settings-editor-actions { display: flex; justify-content: flex-end; gap: 8px; } .options-form .settings-editor-actions button { min-height: 32px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: transparent; cursor: pointer; } .options-form .settings-editor-actions button.primary { border-color: var(--accent); background: var(--accent); color: var(--fg-on-accent); } .options-form .settings-editor-actions button:hover, .options-form .settings-editor-actions button:focus { filter: brightness(1.05); } .options-form .settings-hint { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.5; } .options-form .settings-callout { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 8%, transparent); } .options-form .settings-callout__badge { flex: 0 0 auto; margin-top: 1px; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: var(--fg-on-accent); font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; } .options-form .settings-callout__body strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 13.5px; font-weight: 600; } .options-form .settings-callout__body p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .options-form .settings-status { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.4; } .options-form .settings-status[data-tone=ok] { color: var(--success); } .options-form .settings-status[data-tone=warn] { color: var(--danger-strong); } .options-form .settings-preview { min-height: 82px; max-height: 150px; overflow: auto; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel2); color: var(--muted); font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; white-space: pre-wrap; } .options-form { /* generisches Label-Layout wie im Header */ } .options-form label.option { margin: 0; display: flex; align-items: center; font-size: 13px; color: var(--ink); cursor: pointer; /* Label nimmt volle Breite ein, damit der Button darin strecken kann */ width: 100%; } .options-form { /* Opt-Toggle im Dialog: füllt die Zeile, linksbündig */ } .options-form label.option .opt-toggle { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; column-gap: 12px; flex: 1 1 auto; width: 100%; justify-content: flex-start; text-align: left; min-height: 48px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink); font-size: 13px; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .options-form label.option-theme .theme-toggle-option { text-transform: none; } .options-form label.option .opt-toggle__switch { position: relative; margin-top: 1px; width: 38px; height: 22px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel2); transition: background-color 0.16s ease, border-color 0.16s ease; } .options-form label.option .opt-toggle__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); transition: transform 0.16s ease, background-color 0.16s ease; } .options-form label.option .opt-toggle__copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; } .options-form label.option .opt-toggle__title { color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.25; } .options-form label.option .opt-toggle__description { color: var(--muted); font-size: 12px; line-height: 1.35; } .options-form { /* Aktive Einstellung: dezent farbig, nicht laut */ } .options-form label.option .opt-toggle[aria-pressed=true] { background-color: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); color: var(--ink); } .options-form label.option .opt-toggle[aria-pressed=true] .opt-toggle__switch { background-color: var(--accent); border-color: var(--accent); } .options-form label.option .opt-toggle[aria-pressed=true] .opt-toggle__switch::after { transform: translateX(16px); background: var(--fg-on-accent); } .options-form { /* Inaktive Einstellung: neutrale Surface, keine Warnfarbe */ } .options-form label.option .opt-toggle[aria-pressed=false] { background-color: transparent; border-color: var(--line); color: var(--muted); } .options-form { /* Hover/Focus dezent aufhellen; Focus-Ring bleibt sichtbar */ } .options-form label.option .opt-toggle:hover, .options-form label.option .opt-toggle:focus { filter: brightness(1.05); } .options-form label.option .opt-toggle:focus-visible { outline: 2px solid var(--ink); /* nutzt Theme-Foreground */ outline-offset: 2px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15); } .options-form #missingAgentsBtn { width: 100%; justify-content: flex-start; text-align: left; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--muted); font-size: 13px; white-space: nowrap; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .options-form #missingAgentsBtn:hover, .options-form #missingAgentsBtn:focus { filter: brightness(1.05); } .options-form #missingAgentsBtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15); } .options-form .actions { /* Close-Button ist absolut oben rechts positioniert und nimmt keinen Platz ein. Container bleibt sichtbar, fügt aber keinen zusätzlichen Abstand hinzu. */ display: flex; justify-content: flex-end; gap: 0; margin: 0; min-height: 0; } /* Close-Button oben rechts: schlichtes "X" */ dialog#optionsDialog #optionsCloseBtn { position: absolute; /* oben rechts im Dialog */ top: 14px; right: 14px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink); transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.08s ease; } dialog#optionsDialog #optionsCloseBtn .btn-icon { width: 16px; height: 16px; } dialog#optionsDialog #optionsCloseBtn:hover, dialog#optionsDialog #optionsCloseBtn:focus { filter: brightness(1.05); } dialog#optionsDialog #optionsCloseBtn:focus-visible { outline: 2px solid var(--ink); /* A11y: nutzt Theme-FG */ outline-offset: 2px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15); } dialog#optionsDialog #optionsCloseBtn:active { transform: scale(0.96); } /* ============================== Startup-Blocker Inhalt ============================== */ dialog#blockerDialog::backdrop { /* Dunkles Overlay ueber dem Hintergrundbild, damit Logo + Hinweistext lesbar bleiben. */ background: linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.62)), url("/assets/bg.jpg") center center/cover no-repeat; } dialog#blockerDialog { border: none; background: transparent; box-shadow: none; } dialog#blockerDialog .blocker-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 140px; text-align: center; } dialog#blockerDialog .blocker-title { margin: 0; line-height: 1; } dialog#blockerDialog .blocker-logo { display: block; width: min(360px, 78vw); height: auto; filter: brightness(0) invert(1) drop-shadow(0 2px 18px rgba(0, 0, 0, 0.55)); } @media (max-width: 560px) { dialog#blockerDialog .blocker-logo { width: min(300px, 78vw); } } dialog#blockerDialog .blocker-actions { margin-top: 4px; } dialog#blockerDialog .blocker-privacy { display: flex; align-items: flex-start; gap: 8px; max-width: min(460px, 82vw); margin: 10px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 12.5px; line-height: 1.5; text-align: left; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } dialog#blockerDialog .blocker-privacy__icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; fill: currentColor; opacity: 0.85; } dialog#blockerDialog .blocker-status { max-width: min(520px, 82vw); margin: 6px 0 0; padding: 8px 10px; border-radius: var(--radius); background: rgba(0, 0, 0, 0.48); color: #fff; font-size: 13px; line-height: 1.4; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } /* ============================================ Ergebnis-Popup "Generate summary" (settings-Look) ============================================ */ .summary-result-form { position: relative; display: flex; flex-direction: column; } .summary-result-header { display: flex; align-items: center; gap: 14px; padding: 20px 52px 16px 20px; border-bottom: 1px solid var(--line); background: var(--panel1); } .summary-result-header h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 0.01em; } .summary-result-header p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; } .summary-result-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .summary-result-badge svg { width: 22px; height: 22px; fill: currentColor; } .summary-result-stats { display: grid; gap: 0; margin: 0; padding: 8px 20px; } .summary-result-stats div { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); } .summary-result-stats div:last-child { border-bottom: 0; } .summary-result-stats dt { color: var(--muted); font-size: 12.5px; line-height: 1.35; } .summary-result-stats dd { margin: 0; color: var(--ink); font-size: 13.5px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; text-align: right; } .summary-result-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; } .summary-result-actions button.primary { min-height: 36px; padding: 8px 18px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--fg-on-accent); font-weight: 600; cursor: pointer; } .summary-result-actions button.primary:hover, .summary-result-actions button.primary:focus { filter: brightness(1.05); } .summary-result-close { position: absolute; top: 12px; right: 12px; } /* ============================================ Positionierung: Options-Dialog zentriert - Browser-Default zentriert das modale ; wir setzen margin:auto, falls UA-Defaults vom Reset überschrieben wurden. ============================================ */ dialog#optionsDialog { position: fixed; inset: 0; margin: auto; } @media (max-width: 640px) { dialog#optionsDialog { width: min(94vw, 520px); max-height: 86vh; } .options-form { min-height: 360px; } .options-form .settings-header { padding: 18px 52px 14px 16px; } .options-form .settings-layout { grid-template-columns: 1fr; } .options-form .settings-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; } .options-form .settings-tab { width: auto; flex: 0 0 auto; white-space: nowrap; } .options-form .settings-panel { padding: 14px; } } dialog#wpDialog { position: fixed; inset: 0; margin: auto; } .wp-dialog-message { margin: 0 0 10px; color: var(--ink); font-size: 13px; line-height: 1.5; } /* ============================== Search highlight inside preview ============================== */ #bundleOutput code mark.hl-search { background: color-mix(in oklab, var(--accent) 30%, transparent); outline: 1px solid var(--accent); border-radius: var(--radius); /* unify */ padding: 0 0.1em; } @supports not (background: color-mix(in oklab, black, white)) { #bundleOutput code mark.hl-search { background: rgba(8, 108, 147, 0.25); /* Fallback für ältere Browser */ } } /* ============================== Footer ============================== */ footer { position: fixed; left: 0; bottom: 0; padding: 6px 10px; background: var(--footer-gradient); color: var(--muted); text-align: left; z-index: 100; } footer:empty { display: none; } /* Fester Actions-Stack unten rechts: Theme oben, Options unten */ .footer-actions { position: fixed; left: 0px; bottom: 0px; display: flex; flex-direction: column; align-items: flex-end; gap: 0; z-index: 1000; } /* Theme-Single-Toggle im Footer (eigene Klasse ohne Zahnrad-Pseudo-Icon) */ .theme-toggle-btn { width: 27px; height: 27px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 50%; line-height: 1; cursor: pointer; font-size: var(--icon-size, 18px); /* gleiche Größe wie das Zahnrad */ /* Hinweis: Inhalt kommt als Text (☀︎/☾︎) aus JS, keine ::before Icons */ } .theme-toggle-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-shadow); } .theme-toggle-btn[aria-pressed=true], .theme-toggle-btn[aria-pressed=false] { /* Icon (☀/☾) kommt aus JS als TextContent; keine Pseudo-Icons */ } /* Icon-Button-Reset nur für Theme-Toggle (verhindert Zahnrad aus .icon-btn) */ .theme-toggle-btn::before { content: none; } /* Help und Theme: exakt identische Optik (kleines, rundes Icon mit Textinhalt) */ .theme-toggle-btn, footer #helpBtn { width: 27px; height: 27px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 50% !important; line-height: 1; cursor: pointer; font-size: var(--icon-size, 18px); } .theme-toggle-btn:focus-visible, footer #helpBtn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-shadow); } .theme-toggle-btn::before, footer #helpBtn::before { content: none; /* keine Pseudo-Icons wie beim Zahnrad */ } /* ============================== Option-Toggles (Basis) - aus _buttons.scss umgezogen ============================== */ .opt-toggle { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .opt-toggle:hover { border-color: var(--hover-border); background: var(--hover-bg); } .opt-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-shadow); } .opt-toggle[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: var(--fg-on-accent); } /* ============================== Theme Toggle Group (falls noch genutzt) - aus _global.scss umgezogen ============================== */ .theme-toggle-group { display: inline-flex; gap: 0.5rem; margin-left: 0.5rem; vertical-align: middle; } .theme-toggle-group .opt-toggle { border: 1px solid #bbb; background: transparent; color: inherit; padding: 0.35rem 0.6rem; border-radius: 0.5rem; cursor: pointer; line-height: 1; } .theme-toggle-group .opt-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .theme-toggle-group .opt-toggle[aria-pressed=true][data-theme=dark] { background: #000; color: #fff; border-color: #000; } .theme-toggle-group .opt-toggle[aria-pressed=true][data-theme=light] { background: #fff; color: #000; border-color: #000; } .theme-toggle-group .opt-toggle[aria-pressed=false] { background: transparent; color: inherit; } /* WICHTIG: #optionsBtn NICHT mehr anfassen, damit das Zahnrad via .icon-btn greift */ /* Help Hover-Fix: '?' soll auf Hover weiß werden, ohne invertierten Button-Hintergrund. ID-Spezifität überstimmt globale button:hover-Regel aus _buttons.scss. */ footer #helpBtn:hover:not(:disabled) { color: #fff; /* 1a: explizit weiß; alternativ 1b: var(--fg-on-accent) */ background: transparent; /* 1d: verhindert globale Hover-Invertierung */ } input[type=text], textarea { font-family: var(--ff-default); font-size: 1rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem; margin: 0; width: 100%; box-sizing: border-box; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } input[type=text]:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-shadow); } /* spezielle Textarea-Styles */ textarea { min-height: 160px; resize: vertical; } textarea#notes { color: var(--notes-fg); /* neue Variable in :root definiert */ font-size: 1.2rem; /* obere rechte Ecke explizit abrunden und Platz für Clear-Button schaffen */ border-top-right-radius: var(--radius) !important; padding-right: 2.75rem; /* Platz für runden Clear-Button */ } textarea#notes::-webkit-scrollbar { width: 6px; } textarea#notes::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius); } textarea#notes::-webkit-scrollbar-track { background: transparent; } /* ========== Generic text & images ========== */ .file-icon[data-lang=txt], .file-icon[data-file=README], .file-icon[data-file=CHANGES], .file-icon[data-file=CHANGELOG], .file-icon[data-file=LICENSE] { --icon: url("/assets/icn/file_type_text.svg"); } .file-icon[data-lang=md] { --icon: url("/assets/icn/file_type_markdown.svg"); } .file-icon[data-lang=rst] { --icon: url("/assets/icn/file_type_text.svg"); } .file-icon[data-lang=png], .file-icon[data-lang=jpg], .file-icon[data-lang=jpeg], .file-icon[data-lang=webp], .file-icon[data-lang=gif], .file-icon[data-lang=bmp], .file-icon[data-lang=tiff] { --icon: url("/assets/icn/file_type_image.svg"); } .file-icon[data-lang=svg] { --icon: url("/assets/icn/file_type_svg.svg"); } /* ========== Code (base) ========== */ .file-icon[data-lang=ts] { --icon: url("/assets/icn/file_type_typescript.svg"); } .file-icon[data-lang=tsx] { --icon: url("/assets/icn/file_type_reactts.svg"); } .file-icon[data-lang=js] { --icon: url("/assets/icn/file_type_js.svg"); } .file-icon[data-lang=jsx] { --icon: url("/assets/icn/file_type_reactjs.svg"); } .file-icon[data-lang=json] { --icon: url("/assets/icn/file_type_json.svg"); } .file-icon[data-lang=html] { --icon: url("/assets/icn/file_type_html.svg"); } .file-icon[data-lang=css] { --icon: url("/assets/icn/file_type_css.svg"); } .file-icon[data-lang=scss] { --icon: url("/assets/icn/file_type_scss.svg"); } .file-icon[data-lang=less] { --icon: url("/assets/icn/file_type_less.svg"); } .file-icon[data-lang=xml] { --icon: url("/assets/icn/file_type_xml.svg"); } .file-icon[data-lang=yaml], .file-icon[data-lang=yml] { --icon: url("/assets/icn/file_type_yaml.svg"); } .file-icon[data-lang=py] { --icon: url("/assets/icn/file_type_python.svg"); } .file-icon[data-lang=php] { --icon: url("/assets/icn/file_type_php.svg"); } .file-icon[data-lang=rb] { --icon: url("/assets/icn/file_type_ruby.svg"); } .file-icon[data-lang=go] { --icon: url("/assets/icn/file_type_go.svg"); } .file-icon[data-lang=rs] { --icon: url("/assets/icn/file_type_rust.svg"); } .file-icon[data-lang=cs] { --icon: url("/assets/icn/file_type_csharp.svg"); } .file-icon[data-lang=cpp] { --icon: url("/assets/icn/file_type_cpp.svg"); } .file-icon[data-lang=c] { --icon: url("/assets/icn/file_type_c.svg"); } .file-icon[data-lang=java] { --icon: url("/assets/icn/file_type_java.svg"); } .file-icon[data-lang=kt] { --icon: url("/assets/icn/file_type_kotlin.svg"); } .file-icon[data-lang=swift] { --icon: url("/assets/icn/file_type_swift.svg"); } .file-icon[data-lang=sh] { --icon: url("/assets/icn/file_type_shell.svg"); } .file-icon[data-lang=ps1] { --icon: url("/assets/icn/file_type_powershell.svg"); } .file-icon[data-lang=bat] { --icon: url("/assets/icn/file_type_bat.svg"); } .file-icon[data-lang=sql] { --icon: url("/assets/icn/file_type_sql.svg"); } .file-icon[data-lang=ini] { --icon: url("/assets/icn/file_type_ini.svg"); } .file-icon[data-lang=toml] { --icon: url("/assets/icn/file_type_toml.svg"); } /* ========== Vue ecosystem ========== */ .file-icon[data-lang=vue] { --icon: url("/assets/icn/file_type_vue.svg"); } .file-icon[data-file^="vite.config"] { --icon: url("/assets/icn/file_type_vite.svg"); } .file-icon[data-file^="vitest.config"] { --icon: url("/assets/icn/file_type_vitest.svg"); } /* if missing, point to vite.svg or test.svg */ .file-icon[data-file^="nuxt.config"] { --icon: url("/assets/icn/file_type_nuxt.svg"); } .file-icon[data-file^="vue.config"] { --icon: url("/assets/icn/file_type_vue.svg"); } .file-icon[data-file^="tailwind.config"] { --icon: url("/assets/icn/file_type_tailwind.svg"); } .file-icon[data-file^="postcss.config"] { --icon: url("/assets/icn/file_type_postcss.svg"); } .file-icon[data-file^="babel.config"], .file-icon[data-file^=".babelrc"] { --icon: url("/assets/icn/file_type_babel.svg"); } .file-icon[data-file^="jest.config"] { --icon: url("/assets/icn/file_type_jest.svg"); } .file-icon[data-file^="cypress.config"] { --icon: url("/assets/icn/file_type_cypress.svg"); } .file-icon[data-file^="webpack.config"] { --icon: url("/assets/icn/file_type_webpack.svg"); } .file-icon[data-file^="rollup.config"] { --icon: url("/assets/icn/file_type_rollup.svg"); } .file-icon[data-file^="esbuild.config"] { --icon: url("/assets/icn/file_type_esbuild.svg"); } /* if missing, map to javascript.svg */ /* ========== Tooling & linters ========== */ .file-icon[data-file^=".eslintrc"], .file-icon[data-file=".eslintignore"] { --icon: url("/assets/icn/file_type_eslint.svg"); } .file-icon[data-file^=".prettierrc"], .file-icon[data-file^="prettier.config"], .file-icon[data-file=".prettierignore"] { --icon: url("/assets/icn/file_type_prettier.svg"); } .file-icon[data-file^=".stylelintrc"], .file-icon[data-file^="stylelint.config"], .file-icon[data-file=".stylelintignore"] { --icon: url("/assets/icn/file_type_stylelint.svg"); } .file-icon[data-file=".browserslistrc"], .file-icon[data-file=browserslist] { --icon: url("/assets/icn/file_type_browserslist.svg"); } .file-icon[data-file=".editorconfig"] { --icon: url("/assets/icn/file_type_editorconfig.svg"); } /* ========== Node/NPM/Yarn/PNPM & configs ========== */ .file-icon[data-file="package.json"] { --icon: url("/assets/icn/file_type_npm.svg"); } .file-icon[data-file="package-lock.json"] { --icon: url("/assets/icn/file_type_npm.svg"); } .file-icon[data-file="yarn.lock"] { --icon: url("/assets/icn/file_type_yarn.svg"); } .file-icon[data-file="pnpm-lock.yaml"] { --icon: url("/assets/icn/file_type_pnpm.svg"); } /* if missing, map to npm.svg */ .file-icon[data-file=".npmrc"] { --icon: url("/assets/icn/file_type_npm.svg"); } .file-icon[data-file=".yarnrc"], .file-icon[data-file=".yarnrc.yml"] { --icon: url("/assets/icn/file_type_yarn.svg"); } .file-icon[data-file=".nvmrc"], .file-icon[data-file=".node-version"] { --icon: url("/assets/icn/file_type_node.svg"); } .file-icon[data-file="tsconfig.json"] { --icon: url("/assets/icn/file_type_tsconfig.svg"); } /* if missing, map to typescript.svg */ .file-icon[data-file="jsconfig.json"] { --icon: url("/assets/icn/file_type_js.svg"); } /* ========== Git & CI ========== */ .file-icon[data-file=".gitignore"], .file-icon[data-file=".gitattributes"], .file-icon[data-file=".gitmodules"] { --icon: url("/assets/icn/file_type_git.svg"); } .file-icon[data-file=".gitlab-ci.yml"], .file-icon[data-file=".gitlab-ci.yaml"] { --icon: url("/assets/icn/file_type_gitlab.svg"); } .file-icon[data-file^=".github/workflows/"], .file-icon[data-file="action.yml"], .file-icon[data-file="action.yaml"] { --icon: url("/assets/icn/file_type_git.svg"); } /* path-based may not match; use when you pass full name */ /* ========== Docker, env, misc ========== */ .file-icon[data-file=Dockerfile] { --icon: url("/assets/icn/file_type_docker.svg"); } .file-icon[data-file="docker-compose.yml"], .file-icon[data-file="docker-compose.yaml"] { --icon: url("/assets/icn/file_type_docker.svg"); } .file-icon[data-file=".env"], .file-icon[data-file^=".env."], .file-icon[data-lang=env] { --icon: url("/assets/icn/file_type_dotenv.svg"); } .file-icon[data-file=Makefile], .file-icon[data-lang=make] { --icon: url("/assets/icn/file_type_shell.svg"); } .file-icon[data-file=LICENSE] { --icon: url("/assets/icn/file_type_license.svg"); } /* ========== Fallbacks ========== */ .file-icon[data-lang=file] { --icon: url("/assets/icn/default_file.svg"); } /* =========================================== Loading UI (scoped, konfliktarm, rueckbaubar) - Keine A11y-Aenderungen (Option 5b) - Overlay blockiert keine Pointer-Events =========================================== */ /* Theme tokens (Option 4a). Kann vom Host ueberschrieben werden. */ :root { color-scheme: light dark; /* Hint fuer native UI */ --spinner-color: currentColor; --spinner-size: 16px; --spinner-thickness: 2px; --loading-overlay-bg: rgba(0,0,0,0.08); } @keyframes app-spin { to { transform: rotate(360deg); } } /* Für zentrierte Pseudo-Elemente: translate beibehalten */ @keyframes app-spin-center { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Inline-Spinner – conic-gradient Ring (Option 2a). Border-Fallback bleibt fuer aeltere Engines erhalten. */ .spinner { display: inline-block; width: var(--spinner-size); height: var(--spinner-size); border-radius: 50%; vertical-align: text-bottom; animation: app-spin 0.8s linear infinite; } @supports (background: conic-gradient(#000, #000)) { .spinner { background: conic-gradient(var(--spinner-color) 12%, transparent 0), conic-gradient(from 0turn, var(--spinner-faint-color) 0 1turn); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--spinner-thickness)), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - var(--spinner-thickness)), #000 0); border: 0; } } @supports not (background: conic-gradient(#000, #000)) { /* Legacy-Fallback: Border-Spinner beibehalten */ .spinner { border: var(--spinner-thickness) solid var(--spinner-color); border-right-color: transparent; } } .spinner--sm { /* Groesse via Token ueberschreiben */ --spinner-size: 12px; } /* Tree-Loader: echtes Overlay-Element statt ::before/::after */ .sidebar.scrollable { position: relative; } /* Anker für absolute Position */ #tree-loader { position: absolute; inset: 0; display: none; /* standardmäßig aus */ pointer-events: none; /* blockiert keine Interaktionen */ z-index: 10; /* über dem Inhalt */ } .sidebar.is-loading-tree #tree-loader { display: block; } /* Dimmen */ #tree-loader::after { content: ""; position: absolute; inset: 0; background: var(--loading-overlay-bg); } /* Spinner */ #tree-loader::before { content: ""; position: absolute; left: 50%; top: 50%; /* Basis-Translate bleibt; Rotation in Keyframes */ transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; transform-origin: 50% 50%; will-change: transform; animation: app-spin-center 0.8s linear infinite; /* Gleiche Ring-Logik wie bei .spinner */ --spinner-color: currentColor; --spinner-thickness: 3px; /* groesser sichtbar */ background: conic-gradient(var(--spinner-color) 12%, transparent 0), conic-gradient(from 0turn, var(--spinner-faint-color) 0 1turn); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--spinner-thickness)), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - var(--spinner-thickness)), #000 0); } /* ============================== Archive Dialog (isolated scope) All styles here are specific to the archive loading popup. We intentionally avoid touching generic dialog rules to keep risk low. ============================== */ #archiveDialog { /* mirror base look of other dialogs, but keep it isolated here */ border: 1px solid var(--line); border-radius: var(--radius); background: var(--sidepanel); color: var(--ink); padding: 16px; width: min(860px, 92vw); /* a bit wider than options */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); position: relative; padding-bottom: 8px; /* align with list spacing */ } #archiveDialog h3 { margin: 0 0 6px 0; font-size: 16px; } #archiveDialog .filter-bar { margin: 0 0 8px 0; display: flex; gap: 8px; } #archiveDialog #archiveSearch { margin: 0; flex: 1 1 auto; } #archiveDialog #archiveList.scrollable { max-height: 50vh; /* avoid oversized dialog */ overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; /* inherit surface */ } #archiveDialog .archive-table { width: 100%; border-collapse: collapse; table-layout: fixed; /* keep this so col1 absorbs the leftover */ } #archiveDialog .archive-table thead th { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 600; background: var(--sidepanel); border-bottom: 1px solid var(--line); padding: 6px 8px; /* col2 = 100px centered */ } #archiveDialog .archive-table thead th.col-date { width: 100px; text-align: center; } #archiveDialog .archive-table thead th { /* col3 = 100px right */ } #archiveDialog .archive-table thead th.col-size { width: 100px; text-align: right; } #archiveDialog .archive-table tbody td { padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; /* col1 = flex (takes remaining space) */ } #archiveDialog .archive-table tbody td.cell-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: auto; /* ensures it can grow */ } #archiveDialog .archive-table tbody td { /* col2 = 100px centered */ } #archiveDialog .archive-table tbody td.cell-date { width: 100px; white-space: nowrap; text-align: center; } #archiveDialog .archive-table tbody td { /* col3 = 100px right (you already had this) */ } #archiveDialog .archive-table tbody td.cell-size { width: 100px; white-space: nowrap; text-align: right; } #archiveDialog .archive-table tbody tr { cursor: pointer; transition: background-color 0.12s ease, transform 0.06s ease; } #archiveDialog .archive-table tbody tr:hover { filter: brightness(1.05); } #archiveDialog .archive-table tbody tr:active { transform: scale(0.999); } #archiveDialog .archive-table tbody tr:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; /* stays within the row */ } #archiveDialog .actions { margin-top: 8px; display: flex; justify-content: flex-end; gap: 0; } #archiveDialog::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); } /* ============================== Sidebar Controls Collapsible complex (filter inputs + selection toolbar). Sticks to the top of the scrolling sidebar when expanded. ============================== */ .sidebar-controls { /* Sticky relative to the sidebar's overflow:auto container. Negative side margins make it bleed into the sidebar's padding so the solid background fully covers scrolled-past tree rows underneath. */ position: sticky; top: 0; z-index: 5; margin: -12px -12px 8px; padding: 8px 12px 10px; background: var(--sidepanel); border-bottom: 1px solid var(--line); } .sidebar-controls__header { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; } .sidebar-controls__toggle { width: 32px; height: 32px; min-height: 32px; padding: 0; gap: 0; background: transparent; border: 1px solid transparent; color: var(--muted); justify-content: center; } .sidebar-controls__toggle:hover:not(:disabled) { background: var(--hover-bg); color: var(--ink); border-color: transparent; } .sidebar-controls__toggle .caret { width: 14px; height: 14px; transition: transform 160ms ease; } /* Collapsed state: rotate caret, hide body */ .sidebar-controls[data-collapsed=true] { margin-bottom: 4px; padding-bottom: 6px; border-bottom-color: transparent; } .sidebar-controls[data-collapsed=true] .sidebar-controls__toggle .caret { transform: rotate(-90deg); } .sidebar-controls[data-collapsed=true] .sidebar-controls__body { display: none; } .sidebar-controls__body { display: block; padding-top: 8px; /* Nullify the bottom margin on the last child so the bordered footer of the complex sits tight against the toolbar without an extra gap. */ } .sidebar-controls__body > :last-child { margin-bottom: 0; } .sidebar-controls .selection-toolbar { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; justify-content: flex-start; margin: 0; } .sidebar-controls .selection-toolbar button.icon-btn { flex: 0 0 32px; } /*# sourceMappingURL=styles.css.map */