/* ============================================================ SQL Visualizer — styles Theme-aware (light / dark) via [data-theme] on /. ============================================================ */ :root { /* surfaces */ --bg: #f6f7fb; --bg-elev: #fbfcfe; --bg-panel: #ffffff; --bg-inset: #f1f3f9; --border: rgba(17, 24, 39, .08); --border-strong: rgba(17, 24, 39, .16); --text: #14161f; --text-muted: #626b7d; --accent: #4f46e5; --accent-2: #7c3aed; --accent-soft: #eef0fe; --accent-text: #4f46e5; --code-bg: #f3f0fc; --code-text: #6d3fc4; /* signature gradient + glow */ --grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #a855f7 100%); --grad-soft: linear-gradient(135deg, rgba(99,102,241,.14), rgba(168,85,247,.10)); --glow: 0 6px 20px -6px rgba(99, 102, 241, .5); /* layered shadows */ --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06); --shadow: 0 2px 6px rgba(16,24,40,.05), 0 12px 28px -10px rgba(16,24,40,.14); --shadow-lg: 0 8px 20px rgba(16,24,40,.07), 0 30px 60px -20px rgba(16,24,40,.22); /* glass */ --glass-bg: rgba(255, 255, 255, .72); --glass-brd: rgba(255, 255, 255, .5); --glass-blur: saturate(180%) blur(14px); /* shape + type */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --ease: cubic-bezier(.34, 1.28, .64, 1); --font-sans: "Inter", "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", "Cascadia Code", "Fira Code", "SF Mono", ui-monospace, Consolas, monospace; --kept: #059669; --removed-bg: #fff1f2; --removed-line: #f43f5e; --clause-from: #0ea5e9; --clause-join: #8b5cf6; --clause-where: #f59e0b; --clause-group: #10b981; --clause-having: #ec4899; --clause-select: #6366f1; --clause-order: #14b8a6; --clause-limit: #ef4444; /* soft ring colors for GROUP BY blocks */ --g0: #e0f2fe; --g1: #ede9fe; --g2: #dcfce7; --g3: #fef3c7; --g4: #fce7f3; --g5: #e0e7ff; --g6: #ccfbf1; --g7: #ffe4e6; } :root[data-theme="dark"], body[data-theme="dark"] { --bg: #0a0d15; --bg-elev: #10141f; --bg-panel: #131826; --bg-inset: #1a2030; --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .16); --text: #e8eaf2; --text-muted: #98a1b5; --accent: #8b93ff; --accent-2: #a855f7; --accent-soft: #23264a; --accent-text: #b6bcff; --code-bg: #241f3d; --code-text: #c9bcff; --grad: linear-gradient(135deg, #7c83ff 0%, #a855f7 55%, #c084fc 100%); --grad-soft: linear-gradient(135deg, rgba(124,131,255,.20), rgba(168,85,247,.14)); --glow: 0 8px 26px -6px rgba(124, 131, 255, .55); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 4px 14px rgba(0,0,0,.45), 0 18px 40px -14px rgba(0,0,0,.6); --shadow-lg: 0 12px 30px rgba(0,0,0,.5), 0 40px 80px -24px rgba(0,0,0,.7); --glass-bg: rgba(19, 24, 38, .62); --glass-brd: rgba(255, 255, 255, .1); --glass-blur: saturate(160%) blur(16px); --kept: #34d399; --removed-bg: #2c1a20; --removed-line: #fb7185; --g0: #10344a; --g1: #2b2450; --g2: #123524; --g3: #3d3011; --g4: #3a1a2c; --g5: #232a52; --g6: #0f3a34; --g7: #3a1d22; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background: radial-gradient(1200px 620px at 100% -8%, rgba(168, 85, 247, .07), transparent 60%), radial-gradient(1000px 520px at -8% 2%, rgba(79, 70, 229, .06), transparent 55%), var(--bg); background-attachment: fixed; } /* smooth theme switching */ .panel, .topbar, .nav-bar, .nav-btn, .primary-btn, .ghost-btn, .modal, table.data th, .order-pill, .col-chip, .sample-chip { transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .25s ease; } /* custom scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; } *::-webkit-scrollbar-track { background: transparent; } ::selection { background: rgba(124, 92, 246, .28); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ---------------- Top bar ---------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 13px 24px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: center; gap: 13px; } .logo { font-size: 22px; line-height: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--grad); box-shadow: var(--glow); } .topbar h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .tagline { margin: 3px 0 0; font-size: 13px; color: var(--text-muted); } /* ---------------- Layout ---------------- */ .layout { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; gap: 20px; padding: 20px 24px; max-width: 1500px; margin: 0 auto; align-items: start; } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } } .panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 20px; } .editor-panel { position: sticky; top: 88px; } @media (max-width: 900px) { .editor-panel { position: static; } } .panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .panel-head h2 { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); } /* ---------------- Samples (grouped by difficulty) ---------------- */ .samples { margin-bottom: 14px; } .sample-group { margin-bottom: 8px; } .sample-group-lbl { width: 100%; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 7px; padding: 4px 8px 4px 8px; border: 0; border-left: 3px solid var(--border-strong); background: transparent; border-radius: 0 6px 6px 0; cursor: pointer; transition: background-color .15s, color .15s; } .sample-group-lbl:hover { background: var(--bg-inset); color: var(--text); } .sg-chevron { display: inline-flex; transition: transform .2s var(--ease); color: currentColor; } .sg-chevron .btn-ico { width: 13px; height: 13px; } .sample-group:not(.collapsed) .sg-chevron { transform: rotate(90deg); } .sg-title { flex: 1 1 auto; text-align: left; } .sg-count { flex: 0 0 auto; font-size: 10px; font-weight: 700; color: var(--text-muted); background: var(--bg-inset); border: 1px solid var(--border); padding: 0 6px; border-radius: 999px; min-width: 18px; text-align: center; } .sample-group.lvl-basic .sample-group-lbl { border-left-color: var(--clause-group); } .sample-group.lvl-inter .sample-group-lbl { border-left-color: var(--clause-where); } .sample-group.lvl-adv .sample-group-lbl { border-left-color: var(--clause-limit); } .sample-chips { display: flex; flex-wrap: wrap; gap: 6px; overflow: hidden; max-height: 400px; opacity: 1; transition: max-height .28s var(--ease), opacity .2s ease, margin .2s ease; } .sample-group.collapsed .sample-chips { max-height: 0; opacity: 0; margin: 0; pointer-events: none; } .sample-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-inset); color: var(--text); cursor: pointer; transition: all .15s; } .sample-chip { transition: all .15s var(--ease); } .sample-chip:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .lvl-basic .sample-chip:hover { border-color: var(--clause-group); color: var(--clause-group); } .lvl-inter .sample-chip:hover { border-color: var(--clause-where); color: var(--clause-where); } .lvl-adv .sample-chip:hover { border-color: var(--clause-limit); color: var(--clause-limit); } /* ---------------- Editor (highlight overlay) ---------------- */ .editor-wrap { position: relative; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg-inset); overflow: hidden; } .editor-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* shared metrics so the overlay and textarea align exactly */ .editor-wrap #sqlInput, .editor-wrap .highlight { margin: 0; padding: 15px 16px; border: 0; width: 100%; min-height: 152px; font-family: var(--font-mono); font-size: 14px; line-height: 1.65; tab-size: 2; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; letter-spacing: 0; } .editor-wrap .highlight { position: absolute; inset: 0; margin: 0; overflow: auto; pointer-events: none; color: var(--text); background: transparent; } .editor-wrap #sqlInput { position: relative; resize: vertical; background: transparent; color: transparent; caret-color: var(--accent); -webkit-text-fill-color: transparent; } .editor-wrap #sqlInput::selection { background: rgba(79,70,229,.25); } .editor-wrap #sqlInput:focus { outline: none; } /* syntax token colors */ .tok-keyword { color: #7c3aed; font-weight: 700; } .tok-func { color: #0891b2; font-weight: 600; } .tok-string { color: #16a34a; } .tok-number { color: #d97706; } .tok-op { color: var(--text-muted); } .tok-comment { color: #9aa3b2; font-style: italic; } .tok-ident { color: var(--text); } :root[data-theme="dark"] .tok-keyword { color: #c4b5fd; } :root[data-theme="dark"] .tok-func { color: #67e8f9; } :root[data-theme="dark"] .tok-string { color: #86efac; } :root[data-theme="dark"] .tok-number { color: #fbbf24; } :root[data-theme="dark"] .tok-comment { color: #6b7488; } /* active clause highlight (synced with the current step) */ .clause-active { background: rgba(245, 158, 11, .20); box-shadow: 0 0 0 1px rgba(245, 158, 11, .35); border-radius: 4px; transition: background .2s; } :root[data-theme="dark"] .clause-active { background: rgba(245, 158, 11, .22); box-shadow: 0 0 0 1px rgba(245, 158, 11, .4); } /* error token highlight in the editor */ .error-token { background: rgba(244, 63, 94, .22); border-radius: 3px; text-decoration: underline wavy var(--removed-line); text-underline-offset: 3px; box-shadow: 0 0 0 1px rgba(244, 63, 94, .45); animation: errPulse .9s ease 2; } @keyframes errPulse { 0%, 100% { background: rgba(244, 63, 94, .18); } 50% { background: rgba(244, 63, 94, .38); } } .err-hint { margin-top: 8px; font-size: 12.5px; color: var(--text-muted); } .editor-actions { display: flex; gap: 10px; margin-top: 14px; } .primary-btn { flex: 1; padding: 12px 18px; border: none; border-radius: var(--r); background: var(--grad); background-size: 160% 160%; background-position: 0% 50%; color: #fff; font-weight: 650; font-size: 14px; letter-spacing: .01em; cursor: pointer; box-shadow: var(--glow); transition: background-position .5s ease, transform .12s var(--ease), box-shadow .2s ease, filter .2s; } .primary-btn:hover { background-position: 100% 50%; transform: translateY(-1px); box-shadow: 0 10px 26px -6px rgba(99,102,241,.6); } .primary-btn:active { transform: translateY(0) scale(.99); } .ghost-btn { padding: 11px 15px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--bg-panel); color: var(--text); font-size: 14px; font-weight: 550; cursor: pointer; transition: all .16s var(--ease); } .ghost-btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); transform: translateY(-1px); } .ghost-btn:active { transform: translateY(0); } /* icon buttons: align icon + label */ .primary-btn, .ghost-btn, .nav-btn, #whyOrderBtn, #editDataBtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .btn-ico { width: 16px; height: 16px; flex: 0 0 auto; display: block; } .primary-btn .btn-ico { width: 15px; height: 15px; } #themeToggle { padding: 10px; line-height: 0; } #themeToggle .btn-ico { width: 18px; height: 18px; } .nav-btn { padding: 7px 12px; } #prevBtn, #nextBtn { padding: 7px 10px; } .ghost-btn.tiny .btn-ico { width: 14px; height: 14px; } /* ---------------- Schema ---------------- */ .schema { margin-top: 20px; border-top: 1px dashed var(--border); padding-top: 16px; } .schema h3 { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } .schema-table { margin-bottom: 14px; } .schema-table .name { font-weight: 700; font-size: 14px; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .schema-table .name .count { font-weight: 400; color: var(--text-muted); font-size: 12px; } .schema-cols { display: flex; flex-wrap: wrap; gap: 4px; } .schema-col { font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--code-bg); color: var(--code-text); } /* ---------------- Order bar (progress of logical order) ---------------- */ .order-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .order-bar:empty { display: none; } .order-pill { font-family: inherit; /* são