/* ============================================================ Codino Engine - styles (no-account code editor) Theming via [data-theme] on . Dark is the default. ============================================================ */ :root { --bg: #0b0e16; --surface: #11151f; --surface-2: #171c28; --surface-3: #20283a; --border: #262f40; --border-soft: #1b2230; --editor-bg: #0e1320; --text: #e8ecf5; --text-dim: #94a0b4; --accent: #7c5cff; --accent-2: #19c3a3; --accent-soft: rgba(124, 92, 255, 0.16); --run-grad: linear-gradient(135deg, #10b981, #0ea5a4); --stop-grad: linear-gradient(135deg, #fb7185, #f43f5e); --warn: #f6b93b; --danger: #f43f5e; --success: #19c3a3; --radius: 14px; --radius-sm: 9px; --shadow: 0 12px 34px rgba(0, 0, 0, 0.5); --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.35); --mono: "JetBrains Mono", "Cascadia Code", "Consolas", "SFMono-Regular", monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } html[data-theme="light"] { --bg: #eef1f8; --surface: #ffffff; --surface-2: #f4f6fb; --surface-3: #e8edf6; --border: #dde3ee; --border-soft: #e7ebf3; --editor-bg: #ffffff; --text: #1a2232; --text-dim: #5e6a7e; --accent-soft: rgba(124, 92, 255, 0.12); --shadow: 0 12px 34px rgba(30, 41, 70, 0.14); --shadow-soft: 0 4px 14px rgba(30, 41, 70, 0.08); } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { display: flex; flex-direction: column; height: 100vh; color: var(--text); font-family: var(--sans); font-size: 14px; overflow: hidden; background: radial-gradient(1100px 520px at 100% -10%, rgba(124, 92, 255, 0.12), transparent 60%), radial-gradient(900px 480px at -10% 110%, rgba(25, 195, 163, 0.10), transparent 60%), var(--bg); } /* ---------------- Top bar ---------------- */ .topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; background: color-mix(in srgb, var(--surface) 88%, transparent); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); z-index: 5; } .topbar__brand { display: flex; align-items: center; gap: 10px; user-select: none; } .brand__logo { display: block; border-radius: 8px; box-shadow: 0 4px 12px rgba(124, 92, 255, 0.35); } .brand__name { font-size: 18px; font-weight: 800; letter-spacing: 0.2px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .topbar__file { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; } .file-icon { opacity: 0.6; font-size: 15px; } .project-name { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13.5px; font-weight: 600; width: 240px; max-width: 100%; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .project-name:hover { border-color: var(--accent); } .project-name:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .save-status { font-size: 12px; color: var(--text-dim); white-space: nowrap; } .save-status.is-saving { color: var(--warn); } .save-status.is-saved { color: var(--success); } .save-status.is-error { color: var(--danger); } .topbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; } .run-target { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); } .run-target select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; font-weight: 600; cursor: pointer; } .run-target select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* ---------------- Buttons ---------------- */ .btn { appearance: none; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; line-height: 1; transition: transform 0.06s ease, box-shadow 0.15s, border-color 0.15s, background 0.15s, opacity 0.15s; } .btn:hover { border-color: var(--accent); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } .btn__icon { font-size: 11px; line-height: 1; } .btn--ghost { background: transparent; } .btn--run { background: var(--run-grad); border: none; color: #042018; box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3); } .btn--run:hover { box-shadow: 0 8px 22px rgba(16, 185, 129, 0.42); } .btn--stop { background: var(--stop-grad); border: none; color: #2a0710; box-shadow: 0 6px 16px rgba(244, 63, 94, 0.3); } .btn--stop:hover { box-shadow: 0 8px 22px rgba(244, 63, 94, 0.42); } .btn--icon { padding: 8px 10px; font-size: 15px; } /* ---------------- Workspace ---------------- */ .workspace { flex: 1; display: flex; flex-direction: row; gap: 10px; padding: 12px; min-height: 0; } .panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; } .editor-panel { flex: 1 1 55%; } .output-panel { flex: 1 1 45%; } /* Tabs */ .tabbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: var(--surface-2); border-bottom: 1px solid var(--border); min-height: 44px; } .tab { appearance: none; background: transparent; border: none; border-radius: 8px; color: var(--text-dim); padding: 8px 12px; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: color 0.15s, background 0.15s; } .tab:hover { color: var(--text); background: var(--surface-3); } .tab.is-active { color: var(--text); background: var(--surface-3); } .tab.is-active::after { content: none; } .tab__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .tab__dot--html { background: #e44d26; } .tab__dot--css { background: #2965f1; } .tab__dot--js { background: #f7df1e; } .tab__dot--py { background: #3776ab; } .output-spacer { flex: 1; } .run-status { font-size: 12px; color: var(--text-dim); padding-right: 6px; white-space: nowrap; } .badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; } /* Editor host */ .editor-host { position: relative; flex: 1; min-height: 0; background: var(--editor-bg); } .editor-host .CodeMirror { height: 100%; font-family: var(--mono); font-size: 13.5px; line-height: 1.6; background: var(--editor-bg); } .editor-host .CodeMirror-gutters { background: var(--editor-bg); border-right: 1px solid var(--border-soft); } html[data-theme="light"] .CodeMirror { color: #1a2232; } /* Splitter */ .splitter { flex: 0 0 auto; width: 8px; cursor: col-resize; position: relative; border-radius: 8px; } .splitter::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 4px; height: 42px; border-radius: 4px; background: var(--border); transition: background 0.15s, height 0.15s; } .splitter:hover::after { background: var(--accent); height: 60px; } /* Output body */ .output-body { position: relative; flex: 1; min-height: 0; background: #fff; } html[data-theme="dark"] .output-body { background: #0b0d12; } .preview-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: #fff; } .console-output { position: absolute; inset: 0; margin: 0; padding: 14px 16px; overflow: auto; font-family: var(--mono); font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; background: var(--editor-bg); color: var(--text); } .console-line { display: block; } .console-line--err { color: var(--danger); } .console-line--warn { color: var(--warn); } .console-line--info { color: var(--text-dim); } .console-line--ok { color: var(--success); } /* ---------------- Toast ---------------- */ .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: 12px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: 13px; font-weight: 600; z-index: 60; opacity: 0; transition: opacity 0.2s, transform 0.2s; max-width: 90vw; } .toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.is-error { border-left-color: var(--danger); } .toast.is-success { border-left-color: var(--success); } /* ---------------- Scrollbars ---------------- */ .console-output::-webkit-scrollbar, .CodeMirror-vscrollbar::-webkit-scrollbar, .CodeMirror-hscrollbar::-webkit-scrollbar { width: 10px; height: 10px; } .console-output::-webkit-scrollbar-thumb, .CodeMirror-vscrollbar::-webkit-scrollbar-thumb, .CodeMirror-hscrollbar::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } .console-output::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: content-box; } /* ---------------- Responsive ---------------- */ @media (max-width: 860px) { .workspace { flex-direction: column; } .splitter { width: auto; height: 8px; cursor: row-resize; } .splitter::after { width: 42px; height: 4px; } .splitter:hover::after { width: 60px; height: 4px; } .editor-panel, .output-panel { flex: 1 1 auto; } .topbar { gap: 10px; } .topbar__file { order: 3; flex-basis: 100%; } } @media (max-width: 560px) { .brand__name { display: none; } .run-target__label { display: none; } #btn-run .btn__label, #btn-stop .btn__label, #btn-download .btn__label { display: none; } .topbar { padding: 10px 12px; } .workspace { padding: 8px; gap: 8px; } }