/* =========================================================================== Theme tokens — synced with the parent app ("poru" / shadcn-ui). Primitives are shadcn HSL triplets. The active theme class (dark, midnight, dim, …) is applied to by app.js, mirroring the parent so the embedded tool inherits the exact same palette. Semantic tokens below resolve per-theme because the primitives are inherited from . ========================================================================== */ :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; --secondary: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 5.9% 10%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --primary: 0 0% 98%; --primary-foreground: 240 5.9% 10%; --secondary: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; } .midnight { --background: 222 40% 6%; --foreground: 210 40% 98%; --card: 222 40% 8%; --primary: 217 90% 65%; --primary-foreground: 222 40% 98%; --secondary: 222 40% 15%; --muted-foreground: 215 25% 70%; --border: 222 35% 15%; --input: 222 35% 15%; --ring: 217 90% 65%; } .dim { --background: 220 20% 10%; --foreground: 220 10% 98%; --card: 220 20% 12%; --primary: 220 90% 70%; --primary-foreground: 220 30% 10%; --secondary: 220 20% 20%; --muted-foreground: 220 10% 70%; --border: 220 20% 18%; --input: 220 20% 18%; --ring: 220 90% 70%; } .rose { --background: 340 30% 6%; --foreground: 0 0% 98%; --card: 340 30% 8%; --primary: 340 80% 60%; --primary-foreground: 340 10% 98%; --secondary: 340 30% 15%; --muted-foreground: 340 20% 70%; --border: 340 25% 15%; --input: 340 25% 15%; --ring: 340 80% 60%; } .forest { --background: 160 40% 5%; --foreground: 160 20% 98%; --card: 160 40% 7%; --primary: 160 70% 50%; --primary-foreground: 160 10% 98%; --secondary: 160 40% 15%; --muted-foreground: 160 20% 65%; --border: 160 30% 15%; --input: 160 30% 15%; --ring: 160 70% 50%; } .blackpink { --background: 326 40% 4%; --foreground: 326 20% 98%; --card: 326 40% 6%; --primary: 326 90% 65%; --primary-foreground: 326 10% 98%; --secondary: 326 40% 15%; --muted-foreground: 326 20% 70%; --border: 326 30% 15%; --input: 326 30% 15%; --ring: 326 90% 65%; } .warm { --background: 36 20% 6.5%; --foreground: 36 20% 98%; --card: 36 20% 8.5%; --primary: 36 90% 60%; --primary-foreground: 36 10% 98%; --secondary: 36 20% 15%; --muted-foreground: 36 20% 70%; --border: 36 20% 15%; --input: 36 20% 15%; --ring: 36 90% 60%; } .latte { --background: 40 30% 96%; --foreground: 25 40% 25%; --card: 40 30% 94%; --primary: 25 40% 45%; --primary-foreground: 40 30% 98%; --secondary: 40 20% 90%; --muted-foreground: 25 20% 45%; --border: 40 20% 85%; --input: 40 20% 85%; --ring: 25 40% 45%; } .ocean { --background: 200 30% 96%; --foreground: 190 80% 20%; --card: 200 30% 94%; --primary: 190 80% 30%; --primary-foreground: 200 30% 98%; --secondary: 200 20% 90%; --muted-foreground: 190 20% 45%; --border: 200 20% 85%; --input: 200 20% 85%; --ring: 190 80% 30%; } .pastel { --background: 280 20% 98%; --foreground: 280 40% 30%; --card: 280 20% 96%; --primary: 280 40% 60%; --primary-foreground: 280 10% 98%; --secondary: 280 10% 94%; --muted-foreground: 280 20% 50%; --border: 280 10% 90%; --input: 280 10% 90%; --ring: 280 40% 60%; } .earth { --background: 60 20% 95%; --foreground: 120 30% 20%; --card: 60 20% 93%; --primary: 120 30% 25%; --primary-foreground: 60 20% 98%; --secondary: 60 10% 90%; --muted-foreground: 120 10% 45%; --border: 60 10% 85%; --input: 60 10% 85%; --ring: 120 30% 25%; } /* ===== Semantic tokens used by the UI, mapped onto the parent palette ===== */ :root { --bg-color: hsl(var(--background)); --card-bg: hsl(var(--card)); --surface-2: hsl(var(--secondary)); --border-color: hsl(var(--border)); --text-primary: hsl(var(--foreground)); --text-secondary: hsl(var(--muted-foreground)); --accent-color: hsl(var(--primary)); --accent-fg: hsl(var(--primary-foreground)); --ring-color: hsl(var(--ring)); /* Git-semantic colours (kept stable across themes) */ --success-color: #3fb950; --error-color: #f85149; --font-main: var(--font-sans, "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"); --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --border-radius: var(--radius, 8px); --transition-speed: 0.15s; } * { box-sizing: border-box; margin: 0; padding: 0; } /* Paint the themed surface on so the iframe is never see-through to a white canvas — it always shows the parent-matched background. */ html { background-color: var(--bg-color); } body { background-color: var(--bg-color); color: var(--text-primary); font-family: var(--font-main); min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; line-height: 1.5; } /* Hide background orbs completely */ .bg-orb { display: none !important; } /* Container */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 32px 24px; flex-grow: 1; } /* Header */ .header { margin-bottom: 32px; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; } .logo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .logo-icon { font-size: 24px; } .logo h1 { font-size: 24px; font-weight: 600; color: var(--text-primary); } .badge { font-size: 11px; font-weight: 500; background: hsl(var(--muted-foreground) / 0.15); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 1px 6px; border-radius: 12px; text-transform: uppercase; } .subtitle { color: var(--text-secondary); font-size: 14px; max-width: 100%; } /* Main Layout Grid */ .main-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; } @media (max-width: 900px) { .main-layout { grid-template-columns: 1fr; } } /* Card Styling */ .card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 24px; } .card h2 { font-size: 16px; font-weight: 600; margin-bottom: 16px; color: var(--text-primary); } /* Form Styling */ .form-group { margin-bottom: 16px; } .form-group label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 6px; color: var(--text-primary); } .label-note { text-transform: none; font-weight: 400; font-size: 11px; color: var(--text-secondary); } input[type="text"], input[type="number"], input[type="password"], select { width: 100%; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 8px 12px; color: var(--text-primary); font-family: var(--font-main); font-size: 14px; transition: border-color var(--transition-speed), box-shadow var(--transition-speed); } input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, select:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.35); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Collapsible Advanced Toggle */ .btn-toggle { background: none; border: none; color: var(--accent-color); font-family: var(--font-main); font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 4px; margin-bottom: 16px; padding: 4px 0; } .btn-toggle:hover { text-decoration: underline; } .chevron { transition: transform var(--transition-speed); } .btn-toggle.active .chevron { transform: rotate(180deg); } .advanced-section { max-height: 500px; opacity: 1; overflow: hidden; transition: max-height var(--transition-speed) ease-in-out, opacity var(--transition-speed); } .advanced-section.collapsed { max-height: 0; opacity: 0; pointer-events: none; } /* Checkbox */ .checkbox-group { margin-top: 12px; margin-bottom: 12px; } .checkbox-container { display: flex; align-items: center; position: relative; padding-left: 24px; cursor: pointer; font-size: 13px; color: var(--text-secondary); user-select: none; } .checkbox-container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .checkmark { position: absolute; top: 0; left: 0; height: 16px; width: 16px; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 3px; } .checkbox-container input:checked ~ .checkmark { background-color: var(--accent-color); border-color: var(--accent-color); } .checkmark:after { content: ""; position: absolute; display: none; } .checkbox-container input:checked ~ .checkmark:after { display: block; } .checkbox-container .checkmark:after { left: 5px; top: 2px; width: 4px; height: 7px; border: solid var(--accent-fg); border-width: 0 2px 2px 0; transform: rotate(45deg); } /* Standard Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--border-radius); font-family: var(--font-main); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color var(--transition-speed), border-color var(--transition-speed), filter var(--transition-speed); } /* Primary action uses the parent's primary colour so it matches every theme */ .btn-primary { background-color: var(--accent-color); color: var(--accent-fg); } .btn-primary:hover { background-color: hsl(var(--primary) / 0.9); } .btn-primary:active { background-color: hsl(var(--primary) / 0.8); } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } /* Console Card — kept dark in every theme for terminal readability */ .console-card { display: flex; flex-direction: column; padding: 0; height: 480px; overflow: hidden; } .console-header { background: #161b22; padding: 10px 16px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; } .console-buttons { display: flex; gap: 6px; } .console-buttons .dot { width: 8px; height: 8px; border-radius: 50%; background-color: #30363d; } .console-title { font-family: var(--font-mono); font-size: 11px; color: #8b949e; } .btn-clear { background: none; border: none; color: #8b949e; cursor: pointer; display: flex; align-items: center; } .btn-clear:hover { color: #e6edf3; } .console-body { background: #0d1117; padding: 16px; flex-grow: 1; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: #e6edf3; overflow-y: auto; white-space: pre-wrap; word-break: break-all; } .console-placeholder { color: #8b949e; text-align: center; margin-top: 160px; } .console-err { color: var(--error-color); } .console-success { color: #3fb950; /* Light Green */ } .console-info { color: #79c0ff; /* Light Blue */ } .console-write { color: #e6edf3; } /* Result Downloads */ .result-download { background: hsl(var(--primary) / 0.08); border-top: 1px solid var(--border-color); padding: 16px 20px; } .result-download h3 { color: var(--accent-color); font-size: 15px; font-weight: 600; margin-bottom: 4px; } #result-meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; } .download-actions { display: flex; gap: 8px; } .btn-download { flex: 1; padding: 8px 12px; font-size: 13px; text-decoration: none; } .btn-download.btn-secondary { background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border-color); } .btn-download.btn-secondary:hover { filter: brightness(1.15); border-color: hsl(var(--ring) / 0.5); } .btn-download:not(.btn-secondary) { background-color: var(--accent-color); color: var(--accent-fg); border: 1px solid transparent; } .btn-download:not(.btn-secondary):hover { background-color: hsl(var(--primary) / 0.9); } .hidden { display: none !important; } /* Loader — uses the surrounding text colour so it works on any button */ .loader { border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; width: 14px; height: 14px; opacity: 0.85; animation: spin 0.8s linear infinite; display: inline-block; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* History Section */ .history-section { margin-top: 32px; border-top: 1px solid var(--border-color); padding-top: 24px; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .section-header h2 { font-size: 18px; font-weight: 600; color: var(--text-primary); } .btn-refresh { background: var(--surface-2); border: 1px solid var(--border-color); color: var(--text-primary); padding: 6px 12px; border-radius: var(--border-radius); font-family: var(--font-main); font-size: 12px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; } .btn-refresh:hover { filter: brightness(1.15); border-color: hsl(var(--ring) / 0.5); } .history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .history-loading { grid-column: 1 / -1; text-align: center; padding: 24px; color: var(--text-secondary); font-style: italic; font-size: 13px; } .history-empty { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-secondary); background: var(--card-bg); border: 1px dashed var(--border-color); border-radius: var(--border-radius); font-size: 13px; } .history-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; } .history-card:hover { border-color: hsl(var(--ring) / 0.6); } .history-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; } .history-card-title { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.4; word-break: break-word; max-width: 75%; } .state-badge { font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 10px; text-transform: uppercase; } .state-closed { background-color: rgba(248, 81, 73, 0.15); color: #ff7b72; } .state-open { background-color: rgba(56, 139, 253, 0.15); color: #58a6ff; } .state-merged { background-color: rgba(163, 113, 247, 0.15); color: #bc8cff; } .history-card-meta { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; display: flex; flex-direction: column; gap: 3px; } .history-stats { display: flex; gap: 8px; font-weight: 500; margin-top: 3px; } .stat-additions { color: var(--success-color); } .stat-deletions { color: var(--error-color); } .history-actions { display: flex; gap: 6px; margin-top: auto; } .btn-history-dl { flex: 1; padding: 6px 10px; font-size: 12px; border-radius: var(--border-radius); } /* Footer */ .footer { text-align: center; padding: 24px; color: var(--text-secondary); font-size: 11px; border-top: 1px solid var(--border-color); margin-top: 32px; } /* Animations disabled for a plain/utility feel */ .animate-fade-in, .animate-slide-in, .delay-1, .delay-2 { opacity: 1 !important; transform: none !important; animation: none !important; } /* ===== Embed Mode — themed, flat, blends into the parent surface ===== */ body.embed { background-color: var(--bg-color); background-image: none; min-height: 100vh; padding: 0; } body.embed .container { padding: 20px; max-width: 100%; } body.embed .header, body.embed .footer { display: none; } body.embed .main-layout { grid-template-columns: 1fr; gap: 20px; margin-bottom: 0; } /* Flatter cards inside the embed: a subtly raised surface (lifted toward the foreground) instead of a hard outline, so cards stay legible even when --card equals --background (shadcn dark) without looking like nested boxes. */ body.embed .card, body.embed .history-card { box-shadow: none; background: color-mix(in oklab, hsl(var(--card)), hsl(var(--foreground)) 4%); border-color: hsl(var(--border) / 0.5); } body.embed .history-section { margin-top: 24px; border-top-color: hsl(var(--border) / 0.5); } body.embed .console-card { height: 360px; }