/* living-docs.css — "Om"-modalen (Living Docs) extraherad ur UI Worktree Dashboard v0.17.1 * Genererad av tools/extract.mjs — REDIGERA INTE FÖR HAND, kör om scriptet. * Alla generiska klasser/variabler har ld-prefix så kitet inte krockar med värdprojektets CSS. * Teman: sätt data-theme="midnight" | "sun" på (default = mörkt). */ /* --- Design-tokens (identiska med dashboardens :root) --- */ :root { --ld-bg: #0a0b0f; --ld-bg-elevated: #13141a; --ld-bg-card: #1a1c24; --ld-bg-hover: #22242e; --ld-border: #2a2d38; --ld-border-hover: #3a3d4a; --ld-text: #e5e7eb; --ld-text-dim: #9ca3af; --ld-text-faint: #6b7280; --ld-accent: #3b82f6; --ld-accent-hover: #2563eb; --ld-success: #10b981; --ld-warning: #f59e0b; --ld-danger: #ef4444; --ld-radius: 10px; --ld-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); --ld-mono: ui-monospace, 'SF Mono', Menlo, monospace; } :root[data-theme="midnight"] { --ld-bg: #0a0514; --ld-bg-elevated: #120a22; --ld-bg-card: #1a0f2e; --ld-bg-hover: #241640; --ld-border: #2d1f4a; --ld-border-hover: #3d2b5c; --ld-text: #ede9fe; --ld-text-dim: #a78bfa; --ld-text-faint: #6d57a8; --ld-accent: #a78bfa; --ld-accent-hover: #8b5cf6; } :root[data-theme="sun"] { --ld-bg: #fafaf7; --ld-bg-elevated: #ffffff; --ld-bg-card: #ffffff; --ld-bg-hover: #f3f2ec; --ld-border: #e5e3da; --ld-border-hover: #d4d1c4; --ld-text: #1f2937; --ld-text-dim: #4b5563; --ld-text-faint: #9ca3af; --ld-accent: #f59e0b; --ld-accent-hover: #d97706; --ld-shadow: 0 4px 24px rgba(245, 158, 11, 0.08); } /* --- Scoped reset: dashboarden har `* { box-sizing:border-box; margin:0; padding:0 }` globalt. :where() ger specificitet 0 så alla modal-regler nedan vinner precis som i originalet. --- */ :where(#modal-info), :where(#modal-info) *, :where(#modal-info) *::before, :where(#modal-info) *::after, :where(#ld-toast-container), :where(#ld-toast-container) * { box-sizing: border-box; margin: 0; padding: 0; } /* --- Typografi som dashboardens gav modalen via arv --- */ .ld-modal, #ld-toast-container { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 14px; line-height: 1.5; color: var(--ld-text); text-align: start; } /* OBS: ingen `button { font: inherit }` — originalet sätter inte det heller; knappar/chips följer webbläsarens UA-font precis som i dashboarden (macOS Chrome = systemfonten). */ /* --- Extraherade regler (ursprunglig ordning bevarad = samma kaskad) --- */ .ld-btn { padding: 8px 16px; border: 1px solid var(--ld-border); background: var(--ld-bg-card); color: var(--ld-text); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.15s; white-space: nowrap; } .ld-btn:hover { background: var(--ld-bg-hover); border-color: var(--ld-border-hover); } .ld-btn-ghost { background: transparent; } .ld-btn-sm { padding: 5px 10px; font-size: 12px; } .ld-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; } .ld-modal.ld-hidden { display: none; } .ld-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); } .ld-modal-body { position: relative; background: var(--ld-bg-elevated); border: 1px solid var(--ld-border); border-radius: 14px; padding: 28px; min-width: 480px; max-width: 600px; box-shadow: var(--ld-shadow); } .ld-modal-body h2 { margin-bottom: 18px; font-size: 18px; } .ld-modal-body > label { display: block; margin-bottom: 14px; font-size: 12px; color: var(--ld-text-dim); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .ld-modal-body input[type="text"] { display: block; width: 100%; margin-top: 5px; padding: 10px 12px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 6px; color: var(--ld-text); font-size: 13px; font-family: var(--ld-mono); } .ld-modal-body input[type="text"]:focus { outline: none; border-color: var(--ld-accent); } .ld-system-pill { font-family: var(--ld-mono); font-size: 11px; color: var(--ld-text-dim); background: var(--ld-bg-card); padding: 4px 10px; border-radius: 20px; border: 1px solid var(--ld-border); display: inline-flex; align-items: center; gap: 6px; } .ld-system-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ld-success); box-shadow: 0 0 6px var(--ld-success); } .ld-modal-wide { min-width: 720px; max-width: 860px; } #modal-info.ld-fullscreen .ld-modal-body.ld-modal-wide { min-width: 0; max-width: none; width: 96vw; height: 94vh; max-height: 94vh; display: flex; flex-direction: column; transition: all 0.25s cubic-bezier(.4, 0, .2, 1); } #modal-info.ld-fullscreen .info-panel.active { max-height: none; flex: 1; min-height: 0; overflow-y: auto; } #modal-info.ld-fullscreen .info-panel[data-panel="features"] .fl-root { height: 100%; min-height: 0; } .ld-modal-body.ld-modal-wide { transition: all 0.25s cubic-bezier(.4, 0, .2, 1); } .info-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .info-header h2 { margin: 0; } .info-header-actions { display: flex; gap: 6px; align-items: center; } .info-header-actions .ld-btn-icon-only { padding: 7px 9px; } .info-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ld-border); margin-bottom: 18px; padding-bottom: 0; } .info-tab { padding: 9px 16px; background: transparent; border: none; color: var(--ld-text-dim); cursor: pointer; font-size: 13px; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; } .info-tab:hover { color: var(--ld-text); } .info-tab.active { color: var(--ld-accent); border-bottom-color: var(--ld-accent); } .info-panel { display: none; max-height: 60vh; overflow-y: auto; padding-right: 8px; } .info-panel.active { display: block; } .info-panel h3 { font-size: 16px; margin-bottom: 10px; } .info-panel h4 { font-size: 13px; margin: 16px 0 8px; color: var(--ld-text-dim); text-transform: uppercase; letter-spacing: 0.5px; } .info-panel p { margin-bottom: 10px; color: var(--ld-text); line-height: 1.6; } .info-panel ul { margin: 10px 0 14px 18px; } .info-panel li { margin-bottom: 6px; line-height: 1.5; } .info-panel code { background: var(--ld-bg); padding: 2px 6px; border-radius: 4px; font-family: var(--ld-mono); font-size: 12px; border: 1px solid var(--ld-border); } .info-panel pre { background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 6px; padding: 12px; overflow-x: auto; margin: 10px 0; } .info-panel pre code { background: none; border: none; padding: 0; font-size: 11px; line-height: 1.5; } .info-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-family: var(--ld-mono); font-size: 12px; } .info-table th, .info-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--ld-border); } .info-table th { color: var(--ld-text-dim); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; } .info-table td:first-child { color: var(--ld-accent); font-weight: 600; } .ld-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin: 0 2px; } .ld-dot.ld-green { background: var(--ld-success); box-shadow: 0 0 4px var(--ld-success); } .ld-dot.ld-gray { background: var(--ld-text-faint); } #system-info { font-family: var(--ld-mono); font-size: 12px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 6px; padding: 12px 16px; } #system-info .row { display: flex; justify-content: space-between; padding: 4px 0; } #system-info .key { color: var(--ld-text-dim); } #system-info .val { color: var(--ld-text); } .ld-btn i[data-lucide], .ld-btn svg.lucide { width: 14px; height: 14px; stroke-width: 2.2; display: inline-block; vertical-align: -2px; } .ld-btn-icon-only { padding: 7px 9px; } .ld-btn-icon-only i[data-lucide], .ld-btn-icon-only svg.lucide { width: 15px; height: 15px; vertical-align: 0; } #ld-toast-container { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 200; } .ld-toast { background: var(--ld-bg-card); border: 1px solid var(--ld-border); padding: 12px 16px; border-radius: 8px; box-shadow: var(--ld-shadow); font-size: 13px; display: flex; align-items: center; gap: 10px; min-width: 260px; animation: toastSlide 0.3s cubic-bezier(.2,.9,.3,1.2); } .ld-toast.ld-toast-success { border-color: rgba(16, 185, 129, 0.4); } .ld-toast.ld-toast-error { border-color: rgba(239, 68, 68, 0.4); } .ld-toast i[data-lucide] { width: 16px; height: 16px; stroke-width: 2.5; flex-shrink: 0; } .ld-toast.ld-toast-success i { color: var(--ld-success); } .ld-toast.ld-toast-error i { color: var(--ld-danger); } .hiw-stack { display: flex; flex-direction: column; align-items: stretch; margin-top: 16px; } .hiw-level { display: flex; gap: 14px; padding: 16px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 10px; align-items: flex-start; } .hiw-level-num { width: 32px; height: 32px; border-radius: 50%; background: var(--ld-bg-elevated); border: 1.5px solid var(--ld-accent); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--ld-accent); flex-shrink: 0; } .hiw-level-body { flex: 1; } .hiw-level-body h4 { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ld-text); margin-bottom: 6px; } .hiw-level-body h4 i { width: 16px; height: 16px; color: var(--ld-accent); } .hiw-level-body p { font-size: 12px; color: var(--ld-text-dim); line-height: 1.6; margin-bottom: 6px; } .hiw-level-body code { font-family: var(--ld-mono); background: var(--ld-bg-elevated); border: 1px solid var(--ld-border); padding: 1px 5px; border-radius: 3px; font-size: 11px; color: var(--ld-text); } .hiw-tip { font-size: 11px !important; color: var(--ld-text-faint) !important; font-style: italic; margin-top: 8px !important; } .hiw-arrow { display: flex; justify-content: center; padding: 4px 0; color: var(--ld-border-hover); } .hiw-arrow i { width: 18px; height: 18px; } .hiw-example { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .hiw-tag { font-size: 10px; color: var(--ld-text-faint); text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px; } .hiw-project-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1.5px solid; border-radius: 999px; font-size: 11px; background: rgba(0, 0, 0, 0.2); color: var(--ld-text); } .hiw-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .hiw-parallel-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; } .hiw-parallel-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 8px; font-size: 12px; color: var(--ld-text-dim); line-height: 1.5; } .hiw-parallel-list li i { width: 16px; height: 16px; flex-shrink: 0; } .hiw-parallel-list li strong { color: var(--ld-text); margin-right: 4px; } .hiw-pro-tip { display: flex; gap: 12px; padding: 14px 16px; margin-top: 20px; background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(251, 191, 36, 0.04) 100%); border: 1px solid rgba(245, 158, 11, 0.25); border-radius: 10px; } .hiw-pro-tip > i { width: 20px; height: 20px; color: var(--ld-warning); flex-shrink: 0; margin-top: 1px; } .hiw-pro-tip strong { display: block; font-size: 13px; color: var(--ld-text); margin-bottom: 3px; } .hiw-pro-tip p { font-size: 12px; color: var(--ld-text-dim); line-height: 1.5; } .system-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; } .log-viewer { position: absolute; inset: 60px 28px 28px 28px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 10px; display: flex; flex-direction: column; box-shadow: var(--ld-shadow); z-index: 50; } .log-viewer.ld-hidden { display: none; } .log-viewer-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--ld-border); font-size: 12px; color: var(--ld-text-dim); font-family: var(--ld-mono); } #log-viewer-content { flex: 1; overflow: auto; padding: 12px 16px; font-family: var(--ld-mono); font-size: 11px; line-height: 1.5; color: var(--ld-text); background: var(--ld-bg); white-space: pre-wrap; word-break: break-word; margin: 0; } .info-panel[data-panel="features"] { padding: 0; max-height: none; overflow: visible; } .info-panel[data-panel="features"].active { display: block; } .fl-root { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 0; /* height sätts via flex: 1 i features-panelen (se rad ~4250). Fallback: 60vh om inte inuti en flex-container. */ height: 60vh; min-height: 460px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 10px; overflow: hidden; } .fl-sidebar { border-right: 1px solid var(--ld-border); background: var(--ld-bg-elevated); display: flex; flex-direction: column; min-width: 0; transition: width 0.25s cubic-bezier(.4, 0, .2, 1); } .fl-root.sidebar-collapsed { grid-template-columns: 52px 1fr; } .fl-root.sidebar-collapsed .fl-sidebar-title, .fl-root.sidebar-collapsed .fl-sidebar-count { display: none; } .fl-root.sidebar-collapsed .fl-sidebar-header { padding: 14px 10px; justify-content: center; } .fl-root.sidebar-collapsed .fl-sidebar-chevron { transform: rotate(180deg); } .fl-root.sidebar-collapsed .fl-release-list { padding: 8px 6px; gap: 6px; } .fl-root.sidebar-collapsed .fl-release-item { padding: 7px 4px 8px 4px; text-align: center; border-radius: 7px; position: relative; } .fl-root.sidebar-collapsed .fl-release-item::before { display: none; /* göm tidslinje-dot */ } .fl-root.sidebar-collapsed .fl-release-date, .fl-root.sidebar-collapsed .fl-release-meta, .fl-root.sidebar-collapsed .fl-new-badge { display: none; } .fl-root.sidebar-collapsed .fl-release-version { justify-content: center; margin: 0; } .fl-root.sidebar-collapsed .fl-release-version span:first-child { font-size: 10.5px; font-weight: 700; color: var(--ld-accent); font-family: var(--ld-mono); letter-spacing: -0.2px; } .fl-root.sidebar-collapsed .fl-release-item:first-child::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--ld-accent); box-shadow: 0 0 6px var(--ld-accent); animation: releaseDotPulse 2s ease-in-out infinite; } .fl-sidebar-header { padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--ld-border); cursor: pointer; user-select: none; transition: background 0.12s; } .fl-sidebar-header:hover { background: var(--ld-bg-hover); } .fl-sidebar-chevron { width: 12px !important; height: 12px !important; stroke-width: 2.5; color: var(--ld-text-dim); transition: transform 0.25s; flex-shrink: 0; } .fl-sidebar-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px; color: var(--ld-text-dim); } .fl-sidebar-count { font-size: 10px; color: var(--ld-text-faint); font-family: var(--ld-mono); } .fl-release-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; } .fl-release-item { position: relative; padding: 10px 12px 10px 22px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; transition: background 0.12s, border-color 0.12s; } .fl-release-item::before { content: ''; position: absolute; left: 10px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--ld-text-faint); box-shadow: 0 0 0 3px var(--ld-bg-elevated); } .fl-release-item:not(:last-child)::after { content: ''; position: absolute; left: 12.5px; top: 22px; bottom: -6px; width: 1px; background: var(--ld-border); } .fl-release-item:hover { background: var(--ld-bg-hover); } .fl-release-item.active { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.32); } .fl-release-item.active::before { background: var(--ld-accent); box-shadow: 0 0 0 3px var(--ld-bg-elevated), 0 0 10px var(--ld-accent); } .fl-release-version { font-family: var(--ld-mono); font-size: 13px; font-weight: 600; color: var(--ld-text); display: flex; align-items: center; gap: 6px; } .fl-release-version .fl-new-badge { font-size: 8px; font-weight: 700; background: var(--ld-accent); color: white; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.4px; text-transform: uppercase; } .fl-release-date { font-size: 10px; color: var(--ld-text-dim); margin-top: 2px; font-family: var(--ld-mono); } .fl-release-meta { font-size: 10px; color: var(--ld-text-faint); margin-top: 3px; display: flex; gap: 8px; } .fl-release-meta span { display: inline-flex; align-items: center; gap: 3px; } .fl-main { display: flex; flex-direction: column; min-width: 0; overflow-y: auto; overflow-x: hidden; } .fl-hero { padding: 16px 20px 12px; border-bottom: 1px solid var(--ld-border); background: linear-gradient(180deg, rgba(59, 130, 246, 0.04) 0%, transparent 100%); } .fl-hero-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ld-text-dim); font-family: var(--ld-mono); margin-bottom: 6px; } .fl-hero-version { color: var(--ld-accent); font-weight: 600; } .fl-hero-dot { color: var(--ld-text-faint); } .fl-hero-tagline { font-size: 17px; font-weight: 600; color: var(--ld-text); margin: 0 0 4px; line-height: 1.3; } .fl-hero-summary { font-size: 12px; color: var(--ld-text-dim); line-height: 1.5; margin: 0; } .fl-hero-highlights { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .fl-hero-highlight { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 20px; font-size: 10.5px; color: #60a5fa; font-weight: 500; cursor: pointer; transition: all 0.15s; } .fl-hero-highlight:hover { background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.5); transform: translateY(-1px); } .fl-hero-highlight i[data-lucide] { width: 10px; height: 10px; stroke-width: 2.5; } .fl-filter-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--ld-border); background: var(--ld-bg-elevated); } .fl-search { position: relative; width: 100%; display: flex; align-items: center; } .fl-search i[data-lucide] { position: absolute; left: 8px; width: 12px; height: 12px; color: var(--ld-text-faint); pointer-events: none; } .fl-search input { width: 100%; padding: 6px 10px 6px 26px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 6px; color: var(--ld-text); font-size: 12px; font-family: inherit; } .fl-search input:focus { outline: none; border-color: var(--ld-accent); } .fl-category-chips { flex: 1; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; } .fl-category-chips::-webkit-scrollbar { display: none; } .fl-chip { padding: 4px 10px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 20px; font-size: 10px; font-weight: 600; color: var(--ld-text-dim); text-transform: uppercase; letter-spacing: 0.4px; cursor: pointer; white-space: nowrap; transition: all 0.12s; } .fl-chip:hover { background: var(--ld-bg-hover); color: var(--ld-text); } .fl-chip.active { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.4); color: #60a5fa; } .fl-chip-count { margin-left: 6px; padding: 1px 5px; background: rgba(255,255,255,0.08); border-radius: 10px; font-size: 9px; letter-spacing: 0; text-transform: none; color: var(--ld-text-faint); } .fl-chip.active .fl-chip-count { background: rgba(96, 165, 250, 0.18); color: #93c5fd; } .fl-tech-row { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--ld-border); background: var(--ld-bg-elevated); } .fl-tech-label { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; color: var(--ld-text-faint); text-transform: uppercase; letter-spacing: 0.6px; flex-shrink: 0; } .fl-tech-label i[data-lucide] { width: 11px; height: 11px; } .fl-tech-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; overflow-x: auto; scrollbar-width: none; } .fl-tech-chips::-webkit-scrollbar { display: none; } .fl-tech-chip { padding: 3px 8px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 4px; font-size: 10px; font-weight: 500; color: var(--ld-text-dim); cursor: pointer; white-space: nowrap; transition: all 0.12s; font-family: var(--ld-mono); display: inline-flex; align-items: center; } .fl-tech-chip:hover { background: var(--ld-bg-hover); color: var(--ld-text); border-color: var(--ld-border-hover); } .fl-tech-chip.active { background: rgba(168, 85, 247, 0.14); border-color: rgba(168, 85, 247, 0.45); color: #c084fc; } .fl-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; margin-bottom: 12px; background: linear-gradient(180deg, var(--ld-bg-elevated), var(--ld-bg-card)); border: 1px solid var(--ld-border); border-radius: 10px; } .fl-view-toggle { display: inline-flex; padding: 3px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 8px; gap: 2px; } .fl-view-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: transparent; border: none; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--ld-text-dim); cursor: pointer; transition: all 0.15s; font-family: inherit; } .fl-view-btn i[data-lucide] { width: 13px; height: 13px; stroke-width: 2.2; } .fl-view-btn:hover { color: var(--ld-text); } .fl-view-btn.active { background: var(--ld-accent); color: #fff; box-shadow: 0 1px 4px rgba(59, 130, 246, 0.3); } .fl-view-btn-count { padding: 1px 6px; background: rgba(0, 0, 0, 0.2); border-radius: 8px; font-size: 9px; font-family: var(--ld-mono); } .fl-view-btn.active .fl-view-btn-count { background: rgba(255, 255, 255, 0.25); } .fl-view-stats { display: flex; gap: 14px; font-size: 11px; color: var(--ld-text-dim); } .fl-view-stat { display: inline-flex; align-items: center; gap: 5px; } .fl-view-stat i[data-lucide] { width: 12px; height: 12px; color: var(--ld-text-faint); } .fl-view-stat b { color: var(--ld-text); font-family: var(--ld-mono); font-weight: 700; } .fl-feature-version { position: absolute; top: 8px; right: 8px; padding: 2px 7px; background: rgba(168, 85, 247, 0.14); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 10px; font-size: 9px; font-weight: 600; font-family: var(--ld-mono); color: #c084fc; letter-spacing: 0.2px; } .fl-feature-card { position: relative; } .fl-feature-tech-row { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; } .fl-feature-tech { padding: 1px 6px; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 3px; font-size: 9px; font-family: var(--ld-mono); color: #c084fc; letter-spacing: 0.1px; } .fl-endpoint-version { font-family: var(--ld-mono); font-size: 9px; font-weight: 600; padding: 2px 6px; background: rgba(168, 85, 247, 0.12); border-radius: 3px; color: #c084fc; flex-shrink: 0; min-width: 42px; text-align: center; } .fl-view-actions { display: flex; gap: 4px; } .fl-icon-btn { width: 32px; height: 32px; display: grid; place-items: center; background: var(--ld-bg-card); border: 1px solid var(--ld-border); border-radius: 7px; color: var(--ld-text-dim); cursor: pointer; transition: all 0.15s; } .fl-icon-btn:hover { background: var(--ld-bg-hover); color: var(--ld-text); border-color: var(--ld-border-hover); transform: translateY(-1px); } .fl-icon-btn i[data-lucide] { width: 14px; height: 14px; } #fl-random-btn:hover i[data-lucide] { animation: flShake 0.5s ease; } .fl-random-pulse { animation: flRandomPulse 1.2s ease; } .fl-keyhelp { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); } .fl-keyhelp-card { background: var(--ld-bg-elevated); border: 1px solid var(--ld-border); border-radius: 14px; padding: 0; min-width: 320px; max-width: 420px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .fl-keyhelp-header { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--ld-border); font-weight: 700; color: var(--ld-text); } .fl-keyhelp-header i[data-lucide] { width: 18px; height: 18px; color: var(--ld-accent); } .fl-keyhelp-header span { flex: 1; } .fl-keyhelp-close { width: 26px; height: 26px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 5px; color: var(--ld-text-dim); cursor: pointer; display: grid; place-items: center; } .fl-keyhelp-close:hover { color: var(--ld-text); } .fl-keyhelp-close i[data-lucide] { width: 12px; height: 12px; } .fl-keyhelp-body { padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 8px; } .fl-keyhelp-row { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ld-text-dim); } .fl-keyhelp-row kbd { min-width: 30px; padding: 4px 8px; background: var(--ld-bg); border: 1px solid var(--ld-border-hover); border-bottom-width: 2px; border-radius: 5px; font-family: var(--ld-mono); font-size: 11px; color: var(--ld-text); text-align: center; font-weight: 600; } #feature-library.view-all { grid-template-columns: 1fr; } #feature-library.view-all .fl-sidebar { display: none; } #feature-library.view-all .fl-main { border-left: none; } .info-panel[data-panel="features"] { display: none; padding: 0 !important; position: relative; } .info-panel[data-panel="features"].active { display: block; overflow-y: auto; overflow-x: hidden; } #modal-info.ld-fullscreen .info-panel[data-panel="features"].active { overflow-y: auto !important; overflow-x: hidden !important; } .info-panel[data-panel="features"] .fl-sidebar { position: sticky; top: 0; align-self: start; max-height: 55vh; overflow-y: auto; } #modal-info.ld-fullscreen .info-panel[data-panel="features"] .fl-sidebar { max-height: 85vh; } .fl-scroll { flex: 0 0 auto; padding: 16px 20px 20px; } .fl-section { margin-bottom: 20px; } .fl-section:last-child { margin-bottom: 0; } .fl-section-header { display: flex; align-items: center; gap: 7px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--ld-text-dim); font-weight: 600; margin-bottom: 10px; } .fl-section-header i[data-lucide] { width: 12px; height: 12px; stroke-width: 2.2; } .fl-section-count { margin-left: auto; font-family: var(--ld-mono); font-size: 10px; color: var(--ld-text-faint); text-transform: none; letter-spacing: 0; } .fl-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .fl-feature-card { background: var(--ld-bg-card); border: 1px solid var(--ld-border); border-radius: 8px; padding: 12px; cursor: pointer; transition: border-color 0.15s, transform 0.15s, background 0.15s; display: flex; flex-direction: column; gap: 8px; text-align: left; min-height: 108px; } .fl-feature-card:hover { border-color: var(--ld-accent); background: var(--ld-bg-hover); transform: translateY(-1px); } .fl-feature-card .fl-feature-icon { width: 30px; height: 30px; border-radius: 7px; background: rgba(59, 130, 246, 0.12); color: var(--ld-accent); display: grid; place-items: center; flex-shrink: 0; } .fl-feature-card .fl-feature-icon i[data-lucide] { width: 15px; height: 15px; stroke-width: 2.2; } .fl-feature-card .fl-feature-name { font-size: 12px; font-weight: 600; color: var(--ld-text); line-height: 1.3; } .fl-feature-card .fl-feature-tagline { font-size: 11px; color: var(--ld-text-dim); line-height: 1.4; flex: 1; } .fl-feature-card .fl-feature-category { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; color: var(--ld-text-faint); font-family: var(--ld-mono); } .fl-endpoint-list { display: flex; flex-direction: column; gap: 4px; background: var(--ld-bg-card); border: 1px solid var(--ld-border); border-radius: 8px; padding: 4px; } .fl-endpoint-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background 0.12s; } .fl-endpoint-row:hover { background: var(--ld-bg-hover); } .fl-method { font-family: var(--ld-mono); font-size: 9px; font-weight: 700; padding: 3px 7px; border-radius: 4px; min-width: 46px; text-align: center; flex-shrink: 0; letter-spacing: 0.4px; } .fl-method.get { background: rgba(16, 185, 129, 0.14); color: #34d399; } .fl-method.post { background: rgba(59, 130, 246, 0.14); color: #60a5fa; } .fl-method.put { background: rgba(245, 158, 11, 0.14); color: #fbbf24; } .fl-method.delete { background: rgba(239, 68, 68, 0.14); color: #f87171; } .fl-method.patch { background: rgba(168, 85, 247, 0.14); color: #c084fc; } .fl-endpoint-path { font-family: var(--ld-mono); font-size: 11px; color: var(--ld-text); flex: 0 0 auto; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fl-endpoint-what { font-size: 11px; color: var(--ld-text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fl-endpoint-row .fl-chev { width: 12px; height: 12px; color: var(--ld-text-faint); flex-shrink: 0; } .fl-empty, .fl-loading { padding: 24px; text-align: center; color: var(--ld-text-faint); font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .fl-loading i[data-lucide] { width: 18px; height: 18px; animation: flSpin 1s linear infinite; } .fl-drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 40; } .fl-drawer-backdrop.open, .fl-drawer-backdrop.visible { opacity: 1; pointer-events: auto; } .fl-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 72%); background: var(--ld-bg-elevated); border-left: 1px solid var(--ld-border); box-shadow: -16px 0 40px rgba(0, 0, 0, 0.45); transform: translateX(100%); transition: transform 0.25s cubic-bezier(.25,.9,.3,1); display: flex; flex-direction: column; z-index: 50; } .fl-drawer.open { transform: translateX(0); } .fl-drawer-header { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--ld-border); } .fl-drawer-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(59, 130, 246, 0.14); color: var(--ld-accent); display: grid; place-items: center; flex-shrink: 0; } .fl-drawer-icon i[data-lucide] { width: 20px; height: 20px; stroke-width: 2.2; } .fl-drawer-heading { flex: 1; min-width: 0; } .fl-drawer-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--ld-text-faint); font-family: var(--ld-mono); margin-bottom: 3px; } .fl-drawer-title { font-size: 16px; font-weight: 600; color: var(--ld-text); line-height: 1.25; } .fl-drawer-close { background: transparent; border: 1px solid var(--ld-border); color: var(--ld-text-dim); border-radius: 6px; padding: 5px 7px; cursor: pointer; transition: all 0.12s; } .fl-drawer-close:hover { background: var(--ld-bg-hover); color: var(--ld-text); border-color: var(--ld-border-hover); } .fl-drawer-close i[data-lucide] { width: 14px; height: 14px; } .fl-drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px 22px; } .fl-drawer-block { margin-bottom: 18px; } .fl-drawer-block:last-child { margin-bottom: 0; } .fl-drawer-block-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--ld-text-dim); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .fl-drawer-block-label i[data-lucide] { width: 12px; height: 12px; stroke-width: 2.2; } .fl-drawer-benefit { font-size: 13px; color: var(--ld-text); line-height: 1.55; padding: 12px 14px; background: rgba(16, 185, 129, 0.06); border: 1px solid rgba(16, 185, 129, 0.18); border-radius: 8px; border-left: 3px solid var(--ld-success); } .fl-drawer-details { font-size: 12px; color: var(--ld-text); line-height: 1.6; } .fl-drawer-details code { background: var(--ld-bg); border: 1px solid var(--ld-border); padding: 1px 5px; border-radius: 3px; font-family: var(--ld-mono); font-size: 11px; } .fl-drawer-knowhow { font-size: 12px; color: var(--ld-text-dim); line-height: 1.55; padding: 10px 12px; background: rgba(245, 158, 11, 0.05); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: 8px; } .fl-drawer-tags { display: flex; flex-wrap: wrap; gap: 5px; } .fl-drawer-tag { font-size: 10px; padding: 3px 8px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 20px; color: var(--ld-text-dim); font-family: var(--ld-mono); } .fl-drawer-endpoint-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 8px; } .fl-drawer-endpoint-head .fl-method { font-size: 10px; } .fl-drawer-endpoint-head code { font-family: var(--ld-mono); font-size: 12px; color: var(--ld-text); background: transparent; border: none; padding: 0; word-break: break-all; } .fl-curl { font-family: var(--ld-mono); font-size: 11px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 8px; padding: 12px; color: var(--ld-text); white-space: pre-wrap; word-break: break-word; line-height: 1.5; position: relative; } .fl-copy-btn { position: absolute; top: 8px; right: 8px; background: var(--ld-bg-card); border: 1px solid var(--ld-border); border-radius: 5px; padding: 3px 7px; font-size: 10px; color: var(--ld-text-dim); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .fl-copy-btn:hover { background: var(--ld-bg-hover); color: var(--ld-text); } .fl-copy-btn i[data-lucide] { width: 11px; height: 11px; } .fl-param-list { display: flex; flex-direction: column; gap: 6px; } .fl-param-row { display: grid; grid-template-columns: minmax(100px, 140px) auto 1fr; gap: 10px; align-items: center; padding: 8px 10px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 6px; font-size: 11px; } .fl-param-name { font-family: var(--ld-mono); color: var(--ld-accent); font-weight: 600; } .fl-param-type { font-family: var(--ld-mono); color: var(--ld-text-faint); font-size: 10px; } .fl-param-desc { color: var(--ld-text-dim); } .fl-param-required { display: inline-block; font-size: 9px; padding: 1px 5px; border-radius: 3px; background: rgba(239, 68, 68, 0.12); color: #f87171; margin-left: 4px; } @media (max-width: 780px) { .fl-root { grid-template-columns: 180px 1fr; height: 62vh; } .fl-feature-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .fl-filter-row { flex-direction: column; align-items: stretch; gap: 8px; } .fl-search { flex: 1; } } .info-panel[data-panel="changelog"] { display: none; padding: 0 !important; position: relative; } .info-panel[data-panel="changelog"].active { display: block; overflow-y: auto; overflow-x: hidden; } #modal-info.ld-fullscreen .info-panel[data-panel="changelog"].active { overflow-y: auto !important; overflow-x: hidden !important; } .clg-root { padding: 14px 20px 40px; max-width: 1400px; margin: 0 auto; } .clg-page-header { position: sticky; top: 14px; z-index: 15; display: grid; grid-template-columns: minmax(200px, 1fr) auto auto; grid-template-rows: auto auto auto; grid-template-areas: "titleBlock view actions" "titleBlock search actions" "jump jump jump"; column-gap: 16px; row-gap: 2px; margin: 0 0 14px; padding: 12px 16px 10px; background: color-mix(in srgb, var(--ld-bg-card) 96%, transparent); border: 1px solid var(--ld-border); border-radius: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } .clg-page-header-left { grid-area: titleBlock; min-width: 0; align-self: center; display: flex; flex-direction: column; gap: 2px; } .clg-page-heading { position: absolute; left: 50%; top: 36px; /* (12px padding-top + ~48px halva rad1+rad2-höjden) justera visuellt */ transform: translate(-50%, -50%); font-size: 22px; font-weight: 800; letter-spacing: -0.5px; background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; pointer-events: none; z-index: 5; } .clg-view-toggle { grid-area: view; align-self: end; justify-self: stretch; } .clg-page-actions { grid-area: actions; align-self: center; justify-self: end; } .clg-search { grid-area: search; align-self: start; justify-self: stretch; height: 44px; /* exakt samma som view-toggle */ box-sizing: border-box; } .clg-version-jump { grid-area: jump; min-width: 0; align-self: center; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--ld-border); } .clg-search { position: relative; width: 100%; height: 44px; } .clg-search > i[data-lucide], .clg-search > svg { position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 15px !important; height: 15px !important; color: var(--ld-text-faint); pointer-events: none; z-index: 1; } .clg-page-header .clg-search input#clg-search-input { width: 100% !important; height: 44px !important; padding: 0 38px 0 38px !important; /* 38px vänster = ikon, 38px höger = clear-knapp */ background: var(--ld-bg) !important; border: 1px solid var(--ld-border) !important; border-radius: 8px !important; color: var(--ld-text) !important; font-size: 12px !important; font-family: inherit !important; box-sizing: border-box !important; line-height: 44px !important; margin: 0 !important; } .clg-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: none; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 50%; color: var(--ld-text-faint); cursor: pointer; transition: all 0.12s; padding: 0; z-index: 2; } .clg-search.has-value .clg-search-clear { display: flex; } .clg-search-clear:hover { background: var(--ld-bg-hover); color: var(--ld-text); } .clg-search-clear > svg, .clg-search-clear > i[data-lucide] { width: 14px !important; height: 14px !important; } .clg-page-header .clg-search input#clg-search-input::placeholder { color: var(--ld-text-faint) !important; } .clg-page-header .clg-search input#clg-search-input:focus { outline: none !important; border-color: var(--ld-accent) !important; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important; } .clg-version-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .clg-version-jump-label { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--ld-text-faint); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; margin-right: 4px; } .clg-version-jump-label i[data-lucide] { width: 11px; height: 11px; color: var(--ld-accent); } .clg-version-jump-chip { padding: 3px 9px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 5px; color: var(--ld-text-dim); font-size: 10px; font-family: var(--ld-mono); font-weight: 600; cursor: pointer; transition: all 0.12s; } .clg-version-jump-chip:hover { background: var(--ld-bg-hover); color: var(--ld-text); border-color: var(--ld-border-hover); transform: translateY(-1px); } .clg-version-jump-chip.newest { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.35); color: #34d399; } .clg-version-jump-chip.newest:hover { background: rgba(52, 211, 153, 0.22); } .clg-view-toggle { display: inline-flex; padding: 3px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 8px; gap: 2px; flex-shrink: 0; } .clg-view-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; background: transparent; border: none; border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--ld-text-dim); cursor: pointer; transition: all 0.15s; font-family: inherit; } .clg-view-btn i[data-lucide] { width: 12px; height: 12px; stroke-width: 2.2; } .clg-view-btn:hover { color: var(--ld-text); } .clg-view-btn.active { background: linear-gradient(135deg, #60a5fa, #a78bfa); color: #fff; box-shadow: 0 1px 4px rgba(96, 165, 250, 0.3); } #modal-info:not(.ld-fullscreen) .clg-page-heading { display: none; /* Göm UI Worktree-rubriken */ } #modal-info:not(.ld-fullscreen) .clg-view-btn span { display: none; /* Göm textetiketter, visa bara ikoner */ } #modal-info:not(.ld-fullscreen) .clg-view-btn { padding: 8px 10px; /* Smalare när bara ikon */ } #modal-info:not(.ld-fullscreen) .clg-view-btn i[data-lucide], #modal-info:not(.ld-fullscreen) .clg-view-btn svg { width: 14px !important; height: 14px !important; } #modal-info:not(.ld-fullscreen) .clg-page-header .clg-search input#clg-search-input { width: 44px !important; /* Kvadrat, matchar höjden */ padding: 0 10px 0 34px !important; /* Ikonen ligger i mitten, text göms */ cursor: pointer !important; transition: width 0.25s cubic-bezier(.25, .9, .3, 1) !important; } #modal-info:not(.ld-fullscreen) .clg-page-header .clg-search:focus-within input#clg-search-input, #modal-info:not(.ld-fullscreen) .clg-page-header .clg-search.has-value input#clg-search-input { width: 220px !important; /* Expandera vid focus eller om det finns text */ cursor: text !important; } #modal-info:not(.ld-fullscreen) .clg-search-clear { right: 6px; } .clg-page-title { font-size: 22px; font-weight: 700; color: var(--ld-text); background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 4px; } .clg-page-subtitle { font-size: 12px; color: var(--ld-text-dim); margin: 0; } .clg-page-actions { display: flex; gap: 6px; } .clg-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; background: var(--ld-bg-card); border: 1px solid var(--ld-border); border-radius: 6px; color: var(--ld-text-dim); font-size: 11px; font-weight: 500; cursor: pointer; transition: all 0.15s; font-family: inherit; } .clg-btn:hover { background: var(--ld-bg-hover); color: var(--ld-text); border-color: var(--ld-border-hover); } .clg-btn i[data-lucide] { width: 12px; height: 12px; } .clg-velocity { margin: 20px 0 18px; padding: 16px 20px; background: var(--ld-bg-card); border: 1px solid var(--ld-border); border-radius: 10px; } .clg-velocity-inner { position: relative; } .clg-velocity-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .clg-velocity-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ld-text-faint); font-weight: 600; } .clg-velocity-stats { font-size: 11px; color: var(--ld-text-dim); display: flex; gap: 6px; } .clg-velocity-stats b { color: var(--ld-text); font-family: var(--ld-mono); } .clg-velocity-svg { width: 100%; height: 70px; display: block; } .clg-velocity-dot { cursor: pointer; transition: r 0.15s, stroke-width 0.15s; } .clg-velocity-dot:hover { r: 5; stroke-width: 2.5; } .clg-velocity-axis { position: relative; height: 16px; margin-top: 2px; } .clg-velocity-axis-label { position: absolute; font-family: var(--ld-mono); font-size: 9px; color: var(--ld-text-faint); transform: translateX(-50%); top: 0; } .clg-heatmap-section { margin-bottom: 22px; padding: 16px 20px; background: var(--ld-bg-card); border: 1px solid var(--ld-border); border-radius: 10px; } .clg-heatmap-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ld-text-faint); font-weight: 600; } .clg-heatmap-header i[data-lucide] { width: 12px; height: 12px; } .clg-heatmap-hint { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ld-text-faint); font-size: 10px; } .clg-heatmap { display: grid; gap: 3px; font-family: var(--ld-mono); font-size: 10px; } .clg-heat-corner { background: transparent; } .clg-heat-colhead { text-align: center; padding: 3px 0; color: var(--ld-text-faint); font-weight: 600; font-size: 9px; } .clg-heat-rowhead { text-align: left; padding: 6px 10px 6px 0; color: var(--ld-text-dim); font-size: 10px; letter-spacing: 0.4px; font-weight: 600; display: flex; align-items: center; } .clg-heat-cell { height: 28px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--ld-text); border: 1px solid rgba(255,255,255,0.05); transition: transform 0.12s, border-color 0.12s; font-family: var(--ld-mono); font-size: 11px; } .clg-heat-cell:hover { transform: scale(1.1); border-color: #60a5fa; z-index: 2; position: relative; } .clg-heat-cell.active { border-color: #a78bfa; box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.3); } .clg-release-stack { display: flex; flex-direction: column; gap: 14px; } .clg-release-block { background: var(--ld-bg-card); border: 1px solid var(--ld-border); border-radius: 12px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .clg-release-block:hover { border-color: var(--ld-border-hover); } .clg-release-block.expanded { border-color: rgba(96, 165, 250, 0.35); box-shadow: 0 4px 20px rgba(96, 165, 250, 0.06); } .clg-release-block.flash { animation: clgFlash 1.4s ease; } .clg-release-header { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; cursor: pointer; user-select: none; } .clg-release-version-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; flex-shrink: 0; } .clg-release-version { font-family: var(--ld-mono); font-size: 18px; font-weight: 800; background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.5px; } .clg-new-badge { padding: 1px 6px; background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.35); border-radius: 10px; color: #34d399; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; } .clg-release-main { flex: 1; min-width: 0; } .clg-release-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 11px; color: var(--ld-text-dim); font-family: var(--ld-mono); } .clg-release-dot { color: var(--ld-text-faint); } .clg-release-tagline { font-size: 14px; color: var(--ld-text); font-family: inherit; font-weight: 600; } .clg-release-tldr { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--ld-text-dim); margin-top: 7px; } .clg-release-tldr span { display: inline-flex; align-items: center; gap: 5px; } .clg-release-tldr i[data-lucide] { width: 12px; height: 12px; color: var(--ld-text-faint); } .clg-release-tldr b { color: var(--ld-text); font-family: var(--ld-mono); font-weight: 700; } .clg-release-summary-preview { font-size: 12px; color: var(--ld-text-dim); line-height: 1.5; margin: 8px 0 0; } .clg-release-chevron { width: 16px; height: 16px; color: var(--ld-text-faint); margin-top: 4px; transition: transform 0.2s; flex-shrink: 0; } .clg-release-block.expanded .clg-release-chevron { transform: rotate(180deg); } .clg-release-body { display: none; padding: 0 18px 18px; border-top: 1px solid var(--ld-border); padding-top: 16px; } .clg-release-block.expanded .clg-release-body { display: block; } .clg-release-summary { font-size: 13px; color: var(--ld-text-dim); line-height: 1.6; margin: 0 0 14px; } .clg-highlights { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .clg-highlight { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: rgba(96, 165, 250, 0.1); border: 1px solid rgba(96, 165, 250, 0.25); border-radius: 12px; font-size: 11px; color: #93c5fd; } .clg-highlight i[data-lucide] { width: 11px; height: 11px; } .clg-filter-active { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(167, 139, 250, 0.12); border: 1px solid rgba(167, 139, 250, 0.3); border-radius: 20px; font-size: 11px; color: #c4b5fd; margin-bottom: 12px; } .clg-filter-active i[data-lucide] { width: 12px; height: 12px; } .clg-filter-clear { background: transparent; border: none; color: #c4b5fd; cursor: pointer; font-size: 14px; padding: 0 4px; } .clg-filter-clear:hover { color: #fff; } .clg-section-label { display: flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--ld-text-faint); font-weight: 600; margin: 14px 0 10px; } .clg-section-label i[data-lucide] { width: 11px; height: 11px; } .clg-task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; } .clg-task-card { background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 8px; padding: 12px; cursor: pointer; transition: all 0.15s; position: relative; } .clg-task-card:hover { border-color: var(--ld-border-hover); transform: translateY(-1px); } .clg-task-card.expanded { border-color: rgba(96, 165, 250, 0.5); grid-column: 1 / -1; background: var(--ld-bg-elevated); } .clg-task-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; } .clg-task-icon { width: 32px; height: 32px; border-radius: 7px; background: rgba(96, 165, 250, 0.12); color: #60a5fa; display: grid; place-items: center; flex-shrink: 0; } .clg-task-icon i[data-lucide] { width: 15px; height: 15px; stroke-width: 2.2; } .clg-task-heading { flex: 1; min-width: 0; } .clg-task-title { font-size: 12px; font-weight: 700; color: var(--ld-text); margin-bottom: 2px; line-height: 1.3; } .clg-task-tagline { font-size: 11px; color: var(--ld-text-dim); line-height: 1.4; } .clg-cat-badge { padding: 2px 7px; background: rgba(167, 139, 250, 0.14); border: 1px solid rgba(167, 139, 250, 0.3); border-radius: 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #c4b5fd; flex-shrink: 0; white-space: nowrap; } .clg-cat-badge.cat-ux { background: rgba(167, 139, 250, 0.14); border-color: rgba(167, 139, 250, 0.3); color: #c4b5fd; } .clg-cat-badge.cat-git { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.3); color: #fbbf24; } .clg-cat-badge.cat-automation { background: rgba(59, 130, 246, 0.14); border-color: rgba(59, 130, 246, 0.3); color: #60a5fa; } .clg-cat-badge.cat-integration { background: rgba(16, 185, 129, 0.14); border-color: rgba(16, 185, 129, 0.3); color: #34d399; } .clg-cat-badge.cat-infrastructure { background: rgba(107, 114, 128, 0.18); border-color: rgba(107, 114, 128, 0.35); color: #9ca3af; } .clg-cat-badge.cat-productivity { background: rgba(236, 72, 153, 0.14); border-color: rgba(236, 72, 153, 0.3); color: #f472b6; } .clg-task-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .clg-tech-pill { padding: 1px 7px; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.22); border-radius: 3px; font-size: 9px; font-family: var(--ld-mono); color: #c084fc; letter-spacing: 0.1px; } .clg-task-detail { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ld-border); } .clg-task-card.expanded .clg-task-detail { display: block; } .clg-detail-section { margin-bottom: 10px; } .clg-detail-section:last-child { margin-bottom: 0; } .clg-detail-label { display: flex; align-items: center; gap: 5px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ld-text-faint); font-weight: 600; margin-bottom: 4px; } .clg-detail-label i[data-lucide] { width: 11px; height: 11px; } .clg-detail-body { font-size: 12px; color: var(--ld-text-dim); line-height: 1.55; } .clg-detail-body code { background: rgba(255, 255, 255, 0.05); padding: 1px 5px; border-radius: 3px; font-family: var(--ld-mono); font-size: 11px; color: #e4e4e7; } .clg-endpoints-section { margin-top: 16px; } .clg-endpoint-list { display: flex; flex-direction: column; gap: 4px; background: var(--ld-bg); border: 1px solid var(--ld-border); border-radius: 6px; padding: 4px; } .clg-endpoint-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 4px; } .clg-endpoint-row:hover { background: var(--ld-bg-hover); } .clg-endpoint-path { font-family: var(--ld-mono); font-size: 11px; color: var(--ld-text); background: transparent; padding: 0; } .clg-endpoint-what { font-size: 11px; color: var(--ld-text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clg-release-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ld-border); font-size: 11px; color: var(--ld-text-faint); } .clg-agents-minimal { display: inline-flex; align-items: center; gap: 5px; } .clg-agents-minimal i[data-lucide] { width: 11px; height: 11px; } .clg-release-date-footer { font-family: var(--ld-mono); } .clg-empty, .clg-loading { padding: 40px; text-align: center; color: var(--ld-text-faint); display: flex; flex-direction: column; align-items: center; gap: 8px; } .clg-loading i[data-lucide] { width: 20px; height: 20px; animation: flSpin 1s linear infinite; } .clg-release-stack.view-timeline .clg-timeline { position: relative; padding-left: 48px; } .clg-timeline-intro { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; margin-left: -24px; padding: 8px 14px; background: var(--ld-bg-card); border: 1px solid var(--ld-border); border-radius: 20px; font-size: 11px; color: var(--ld-text-dim); } .clg-timeline-intro i[data-lucide] { width: 13px; height: 13px; color: var(--ld-accent); } .clg-timeline-line { position: absolute; left: 15px; top: 60px; bottom: 20px; width: 2px; background: linear-gradient(180deg, #60a5fa, #a78bfa 50%, transparent); } .clg-tl-item { position: relative; margin-bottom: 18px; background: var(--ld-bg-card); border: 1px solid var(--ld-border); border-radius: 10px; padding: 14px 18px; cursor: pointer; transition: all 0.18s; } .clg-tl-item:hover { border-color: var(--ld-border-hover); transform: translateX(2px); box-shadow: 0 4px 16px rgba(0,0,0,0.25); } .clg-tl-item.newest { border-color: rgba(96, 165, 250, 0.4); background: linear-gradient(135deg, var(--ld-bg-card), color-mix(in srgb, #60a5fa 5%, var(--ld-bg-card))); } .clg-tl-node { position: absolute; left: -44px; top: 18px; width: 22px; height: 22px; display: grid; place-items: center; } .clg-tl-dot { width: 12px; height: 12px; border-radius: 50%; background: #60a5fa; border: 2px solid var(--ld-bg); box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3); } .clg-tl-item.newest .clg-tl-dot { background: #34d399; box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.3); } .clg-tl-item.oldest .clg-tl-dot { background: #a78bfa; box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.3); } .clg-tl-pulse { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #34d399; animation: clgTlPulse 2s ease-out infinite; } .clg-tl-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .clg-tl-version { font-family: var(--ld-mono); font-size: 16px; font-weight: 800; background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .clg-tl-date { margin-left: auto; font-family: var(--ld-mono); font-size: 10px; color: var(--ld-text-faint); } .clg-tl-tagline { font-size: 13px; font-weight: 600; color: var(--ld-text); margin-bottom: 6px; } .clg-tl-meta { display: flex; gap: 12px; font-size: 11px; color: var(--ld-text-dim); margin-bottom: 8px; } .clg-tl-meta span { display: inline-flex; align-items: center; gap: 4px; } .clg-tl-meta i[data-lucide] { width: 11px; height: 11px; color: var(--ld-text-faint); } .clg-tl-cats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .clg-tl-cat { padding: 2px 8px; border-radius: 10px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .clg-tl-cat.cat-ux { background: rgba(167, 139, 250, 0.14); color: #c4b5fd; } .clg-tl-cat.cat-git { background: rgba(245, 158, 11, 0.14); color: #fbbf24; } .clg-tl-cat.cat-automation { background: rgba(59, 130, 246, 0.14); color: #60a5fa; } .clg-tl-cat.cat-integration { background: rgba(16, 185, 129, 0.14); color: #34d399; } .clg-tl-cat.cat-infrastructure { background: rgba(107, 114, 128, 0.18); color: #9ca3af; } .clg-tl-cat.cat-productivity { background: rgba(236, 72, 153, 0.14); color: #f472b6; } .clg-tl-preview { font-size: 11px; color: var(--ld-text-dim); line-height: 1.5; margin-bottom: 8px; } .clg-tl-more { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: rgba(96, 165, 250, 0.12); border: 1px solid rgba(96, 165, 250, 0.3); border-radius: 6px; color: #93c5fd; font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; } .clg-tl-more:hover { background: rgba(96, 165, 250, 0.2); transform: translateX(2px); } .clg-tl-more i[data-lucide] { width: 11px; height: 11px; transition: transform 0.15s; } .clg-tl-more:hover i[data-lucide] { transform: translateX(2px); } .clg-release-stack.view-compact .clg-compact { background: var(--ld-bg-card); border: 1px solid var(--ld-border); border-radius: 12px; overflow: hidden; } .clg-compact-header { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--ld-border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ld-text-faint); font-weight: 700; } .clg-compact-header i[data-lucide] { width: 13px; height: 13px; color: var(--ld-accent); } .clg-compact-list { display: flex; flex-direction: column; } .clg-compact-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--ld-border); cursor: pointer; transition: background 0.12s; } .clg-compact-row:last-child { border-bottom: none; } .clg-compact-row:hover { background: var(--ld-bg-hover); } .clg-compact-version { font-family: var(--ld-mono); font-size: 10px; font-weight: 700; padding: 3px 7px; background: rgba(167, 139, 250, 0.14); border: 1px solid rgba(167, 139, 250, 0.3); border-radius: 4px; color: #c4b5fd; min-width: 50px; text-align: center; flex-shrink: 0; } .clg-compact-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(96, 165, 250, 0.12); color: #60a5fa; display: grid; place-items: center; flex-shrink: 0; } .clg-compact-icon i[data-lucide] { width: 14px; height: 14px; } .clg-compact-main { flex: 1; min-width: 0; } .clg-compact-title { font-size: 12px; font-weight: 600; color: var(--ld-text); margin-bottom: 2px; } .clg-compact-tagline { font-size: 11px; color: var(--ld-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clg-compact-tech { display: flex; flex-wrap: wrap; gap: 3px; max-width: 200px; justify-content: flex-end; } .clg-back-to-top { position: fixed; bottom: 68px; right: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; background: linear-gradient(135deg, #60a5fa, #a78bfa); border: none; border-radius: 24px; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(96, 165, 250, 0.4); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.25s, transform 0.25s; z-index: 50; font-family: inherit; } .clg-back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .clg-back-to-top:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(96, 165, 250, 0.55); } .clg-back-to-top i[data-lucide] { width: 14px; height: 14px; } @media (max-width: 780px) { .clg-root { padding: 14px; } .clg-task-grid { grid-template-columns: 1fr; } .clg-heatmap { font-size: 9px; } .clg-heat-cell { height: 24px; font-size: 10px; } .clg-page-header { flex-direction: column; align-items: stretch; } .clg-view-toggle { justify-content: center; } } .mascot { position: absolute; bottom: 14px; right: 14px; width: 42px; height: 42px; cursor: pointer; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; animation: mascotFloat 3s ease-in-out infinite; } #modal-info:not(.ld-hidden) .mascot { opacity: 1; pointer-events: auto; } .mascot:hover { transform: scale(1.15) rotate(-5deg); } .mascot-svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(96, 165, 250, 0.4)); } .mascot.mascot-bounce { animation: mascotBounce 0.5s ease; } .mascot-bubble { position: absolute; bottom: 50%; right: calc(100% + 10px); transform: translateY(50%); background: var(--ld-bg-elevated); border: 1px solid var(--ld-border-hover); padding: 8px 12px; border-radius: 10px; font-size: 11px; color: var(--ld-text); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; box-shadow: 0 4px 14px rgba(0,0,0,0.25); font-family: inherit; } .mascot-bubble.visible { opacity: 1; transform: translateY(50%) translateX(0); } .mascot-bubble::before { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; background: var(--ld-bg-elevated); border-top: 1px solid var(--ld-border-hover); border-right: 1px solid var(--ld-border-hover); } .mascot-bubble b { color: #93c5fd; font-family: var(--ld-mono); } /* --- @keyframes som reglerna ovan refererar --- */ @keyframes toastSlide { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes releaseDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } @keyframes flShake { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-15deg); } 75% { transform: rotate(15deg); } } @keyframes flRandomPulse { 0% { color: #c4b5fd; text-shadow: 0 0 12px rgba(167, 139, 250, 0.6); } 100% { color: inherit; text-shadow: none; } } @keyframes flSpin { to { transform: rotate(360deg); } } @keyframes clgFlash { 0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.6); } 50% { box-shadow: 0 0 0 10px rgba(167, 139, 250, 0.15); } 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); } } @keyframes clgTlPulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.2); opacity: 0; } } @keyframes mascotFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes mascotBounce { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.3) rotate(-12deg); } 60% { transform: scale(0.9) rotate(8deg); } }