/* ============================================================= SQL Formatter & Minifier Source design: "Querybench" - clean editor-style workbench with a syntax-highlighted split-pane editor. EVERYTHING IS SCOPED UNDER .qbfmt. The design tokens here (--ink, --paper, --brand, --t-k...) are short, generic names that could easily collide with variables used elsewhere on the site. Declaring them on :root would repaint every other tool page, so they live on .qbfmt instead - a plain element selector whose specificity (two classes) safely wins over any same-named global rule without depending on source order. THEME: follows the site. The source file had its own header toggle and localStorage key; the site already sets data-theme on before first paint, so that toggle and its script are dropped and these rules just read the site's attribute. ============================================================= */ .qbfmt { --ink: #0F1319; --ink-2: #4A535F; --ink-3: #7C8794; --paper: #EBEEF2; --surface: #FFFFFF; --surface-2: #F5F7FA; --surface-3: #EDF0F4; --line: #DBE0E7; --line-2: #C3CAD4; --brand: #2A4FD7; --brand-2: #4468EA; --brand-soft: #E7EBFC; --brand-ink: #1B357F; --amber: #B26A08; --amber-soft: #FBEEDA; --danger: #C0392B; --danger-soft: #FBE8E5; --ok: #0E7A5A; --ok-soft: #E0F2EB; --code-bg: #FBFCFE; --code-bg-2: #F2F5F9; --code-line: #E3E8EF; --code-gutter: #A2ADBA; --code-caret: #2A4FD7; --code-sel: #CFDCFB; --code-active: #F0F4FB; --t-k: #8B33B8; --t-f: #1A62CF; --t-i: #1E2630; --t-q: #0B7A63; --t-s: #0A7A52; --t-n: #B5541A; --t-p: #B02F86; --t-o: #C0306B; --t-c: #6B7684; --t-m: #8A94A0; --radius: 14px; --radius-sm: 9px; --display: "Sora", system-ui, sans-serif; --body: "IBM Plex Sans", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --code-size: 13.5px; --code-lh: 1.65; --shadow-sm: 0 1px 2px rgba(15,19,25,.05); --shadow: 0 2px 4px rgba(15,19,25,.04), 0 18px 44px -24px rgba(15,19,25,.32); --shadow-lg: 0 2px 6px rgba(15,19,25,.05), 0 44px 80px -44px rgba(42,79,215,.45); background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } [data-theme="dark"] .qbfmt { --ink: #E7ECF2; --ink-2: #9AA5B3; --ink-3: #6D7885; --paper: #0A0D12; --surface: #12161C; --surface-2: #181D25; --surface-3: #1F252E; --line: #242B35; --line-2: #333C48; --brand: #7C97F5; --brand-2: #9AB0F8; --brand-soft: #18213F; --brand-ink: #B6C6FB; --amber: #E0A951; --amber-soft: #2B2211; --danger: #EF7A6B; --danger-soft: #331815; --ok: #45C79E; --ok-soft: #0D2A23; --code-bg: #0D1117; --code-bg-2: #151B23; --code-line: #1E2630; --code-gutter: #4C5765; --code-caret: #7C97F5; --code-sel: #25355C; --code-active: #151C27; --t-k: #C792EA; --t-f: #82AAFF; --t-i: #D6DEE8; --t-q: #5FD8BE; --t-s: #7FD88F; --t-n: #F7A76C; --t-p: #F78CD0; --t-o: #FF7B9C; --t-c: #8892A0; --t-m: #5F6B79; --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow: 0 2px 4px rgba(0,0,0,.4), 0 18px 44px -24px rgba(0,0,0,.95); --shadow-lg: 0 2px 6px rgba(0,0,0,.45), 0 44px 80px -44px rgba(0,0,0,1); } .qbfmt *, .qbfmt *::before, .qbfmt *::after { box-sizing: border-box } .qbfmt h1, .qbfmt h2, .qbfmt h3, .qbfmt h4 { font-family: var(--display); margin: 0; line-height: 1.15; letter-spacing: -.03em; font-weight: 600 } .qbfmt p { margin: 0 } .qbfmt button, .qbfmt input, .qbfmt select, .qbfmt textarea { font: inherit; color: inherit } .qbfmt button { cursor: pointer; background: none; border: 0 } .qbfmt a { color: var(--brand); text-underline-offset: 3px } .qbfmt :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 5px } .qbfmt .wrap { max-width: 1240px; margin: 0 auto; padding: 0 22px } .qbfmt .eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3) } .qbfmt .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap } /* ---------- in-page section nav (was a sticky site header) ---------- */ .qbfmt .section-nav { border-bottom: 1px solid var(--line); background: var(--surface); margin-bottom: 4px } .qbfmt .section-nav__in { display: flex; align-items: center; gap: 20px; min-height: 50px; flex-wrap: wrap } .qbfmt .section-nav a { text-decoration: none; color: var(--ink-2); font-size: 13.5px; font-weight: 500; padding-bottom: 2px; border-bottom: 2px solid transparent } .qbfmt .section-nav a:hover { color: var(--ink); border-bottom-color: var(--line-2) } .qbfmt .section-nav a.active { color: var(--brand-ink); border-bottom-color: var(--brand) } @media (max-width: 700px) { .qbfmt .section-nav__in { gap: 13px; font-size: 13px } } /* ---------- hero ---------- */ .qbfmt .hero { padding: 26px 0 20px; position: relative; overflow: hidden } .qbfmt .hero::before { content: ""; position: absolute; inset: -200px 0 auto 0; height: 520px; pointer-events: none; background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%) } .qbfmt .hero > * { position: relative } .qbfmt .hero h1 { font-size: clamp(29px,4vw,42px); margin: 12px 0 10px } .qbfmt .hero h1 em { font-style: normal; color: var(--brand) } .qbfmt .hero .lede { color: var(--ink-2); max-width: 74ch; font-size: 16px } /* ---------- workbench ---------- */ .qbfmt .bench { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; margin-top: 20px } .qbfmt .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 13px; border-bottom: 1px solid var(--line); background: var(--surface-2) } .qbfmt .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 9px; font-family: var(--display); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; border: 1px solid transparent; transition: transform .12s, filter .18s, background .18s, border-color .18s } .qbfmt .btn svg { width: 15px; height: 15px } .qbfmt .btn:active { transform: translateY(1px) } .qbfmt .btn-primary { background: var(--brand); color: #fff; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand) 90%, transparent) } .qbfmt .btn-primary:hover { filter: brightness(1.09) } [data-theme="dark"] .qbfmt .btn-primary { color: #0B1020 } .qbfmt .btn-amber { background: var(--amber); color: #fff } [data-theme="dark"] .qbfmt .btn-amber { color: #241B08 } .qbfmt .btn-amber:hover { filter: brightness(1.09) } .qbfmt .btn-ghost { border-color: var(--line); color: var(--ink-2); background: var(--surface) } .qbfmt .btn-ghost:hover { border-color: var(--line-2); color: var(--ink) } .qbfmt .tb-sep { width: 1px; height: 24px; background: var(--line); margin: 0 3px } .qbfmt .tb-spacer { flex: 1 } .qbfmt .sel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 7px 28px 7px 11px; font-size: 13px; font-family: var(--mono); cursor: pointer; appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position: calc(100% - 15px) 54%, calc(100% - 10px) 54%; background-size: 5px 5px,5px 5px; background-repeat: no-repeat } .qbfmt .sel:focus { outline: none; border-color: var(--brand) } .qbfmt .kbd { font-family: var(--mono); font-size: 10.5px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink-3); background: var(--surface) } .qbfmt .btn-primary .kbd, .qbfmt .btn-amber .kbd { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.85); background: transparent } [data-theme="dark"] .qbfmt .btn-primary .kbd, [data-theme="dark"] .qbfmt .btn-amber .kbd { border-color: rgba(0,0,0,.28); color: rgba(0,0,0,.6) } /* ---------- editors ---------- */ .qbfmt .panes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line) } .qbfmt .pane { background: var(--surface); display: flex; flex-direction: column; min-width: 0 } .qbfmt .pane-head { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-bottom: 1px solid var(--line); background: var(--surface-2); min-height: 42px } .qbfmt .pane-title { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 7px } .qbfmt .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand) } .qbfmt .dot.out { background: var(--ok) } .qbfmt .pane-head .sp { flex: 1 } .qbfmt .tiny { font-size: 11.5px; color: var(--ink-3); border: 1px solid transparent; border-radius: 6px; padding: 4px 8px; display: inline-flex; align-items: center; gap: 5px; transition: all .16s } .qbfmt .tiny:hover { color: var(--ink); background: var(--surface-3); border-color: var(--line) } .qbfmt .tiny svg { width: 13px; height: 13px } .qbfmt .tiny.on { color: var(--brand); background: var(--brand-soft); border-color: transparent } .qbfmt .edit { position: relative; height: var(--pane-h,430px); background: var(--code-bg); display: flex; overflow: hidden } .qbfmt .gutter { flex: none; width: 52px; padding: 14px 10px 14px 0; text-align: right; overflow: hidden; font-family: var(--mono); font-size: var(--code-size); line-height: var(--code-lh); color: var(--code-gutter); background: var(--code-bg-2); border-right: 1px solid var(--code-line); user-select: none; white-space: pre } .qbfmt .scroll { position: relative; flex: 1; min-width: 0; overflow: auto } .qbfmt .scroll::-webkit-scrollbar { width: 11px; height: 11px } .qbfmt .scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 3px solid var(--code-bg) } .qbfmt .scroll::-webkit-scrollbar-track { background: transparent } .qbfmt .hl, .qbfmt .ta { margin: 0; padding: 14px 16px; font-family: var(--mono); font-size: var(--code-size); line-height: var(--code-lh); tab-size: 4; border: 0; white-space: pre; overflow-wrap: normal; min-width: 100%; min-height: 100%; letter-spacing: 0 } .qbfmt .hl { position: absolute; inset: 0; pointer-events: none; color: var(--t-i) } .qbfmt .ta { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; background: transparent; color: transparent; caret-color: var(--code-caret); outline: none; overflow: hidden; display: block } .qbfmt .ta::selection { background: var(--code-sel) } .qbfmt .ta::placeholder { color: var(--ink-3) } .qbfmt .wrapon .hl, .qbfmt .wrapon .ta { white-space: pre-wrap; overflow-wrap: break-word } .qbfmt .hl-out { position: static; pointer-events: auto; user-select: text } .qbfmt .empty-out { color: var(--ink-3); font-style: italic } .qbfmt .t-k { color: var(--t-k); font-weight: 600 } .qbfmt .t-f { color: var(--t-f); font-weight: 500 } .qbfmt .t-i { color: var(--t-i) } .qbfmt .t-q { color: var(--t-q) } .qbfmt .t-s { color: var(--t-s) } .qbfmt .t-n { color: var(--t-n) } .qbfmt .t-p { color: var(--t-p); font-weight: 500 } .qbfmt .t-o { color: var(--t-o) } .qbfmt .t-c { color: var(--t-c) } .qbfmt .t-m { color: var(--t-m); font-style: italic } /* ---------- status bar ---------- */ .qbfmt .status { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 9px 13px; border-top: 1px solid var(--line); background: var(--surface-2); font-family: var(--mono); font-size: 11.5px; color: var(--ink-3) } .qbfmt .stat { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line) } .qbfmt .stat b { color: var(--ink); font-weight: 500 } .qbfmt .stat.good b { color: var(--ok) } .qbfmt .stat.warn b { color: var(--amber) } .qbfmt .stat.bad b { color: var(--danger) } .qbfmt .status .sp { flex: 1 } /* ---------- options ---------- */ .qbfmt .opts { border-top: 1px solid var(--line); background: var(--surface) } .qbfmt .opts-head { display: flex; align-items: center; gap: 10px; padding: 12px 15px; cursor: pointer; user-select: none } .qbfmt .opts-head h3 { font-size: 14px; font-family: var(--body); font-weight: 600 } .qbfmt .opts-head .chev { width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform .25s } .qbfmt .opts.open .opts-head .chev { transform: rotate(45deg) } .qbfmt .opts-body { display: none; padding: 4px 15px 18px; border-top: 1px solid var(--line) } .qbfmt .opts.open .opts-body { display: block } .qbfmt .ogrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(196px,1fr)); gap: 14px 20px; padding-top: 14px } .qbfmt .ofield { display: flex; flex-direction: column; gap: 6px } .qbfmt .ofield label { font-size: 12px; font-weight: 500; color: var(--ink-2) } .qbfmt .ofield .sel, .qbfmt .ofield input[type=number] { width: 100%; background: var(--surface-2) } .qbfmt .ofield input[type=number] { border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; font-family: var(--mono); font-size: 13px } .qbfmt .ofield input[type=number]:focus { outline: none; border-color: var(--brand) } .qbfmt .switch { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13px; color: var(--ink-2); padding: 6px 0 } .qbfmt .track { position: relative; width: 34px; height: 19px; border-radius: 10px; background: var(--line-2); flex: none; transition: background .2s } .qbfmt .track i { position: absolute; top: 2.5px; left: 2.5px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s } .qbfmt .switch input { position: absolute; opacity: 0; width: 0; height: 0 } .qbfmt .switch input:checked + .track { background: var(--brand) } .qbfmt .switch input:checked + .track i { transform: translateX(15px) } .qbfmt .switch input:focus-visible + .track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent) } .qbfmt .opts-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line) } /* ---------- issues ---------- */ .qbfmt .issues { border-top: 1px solid var(--line); background: var(--surface); padding: 0 15px } .qbfmt .issues[hidden] { display: none } .qbfmt .issue { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px } .qbfmt .issue:first-child { border-top: 0 } .qbfmt .badge { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; flex: none; margin-top: 1px } .qbfmt .b-error { background: var(--danger-soft); color: var(--danger) } .qbfmt .b-warn { background: var(--amber-soft); color: var(--amber) } .qbfmt .b-info { background: var(--brand-soft); color: var(--brand-ink) } .qbfmt .b-ok { background: var(--ok-soft); color: var(--ok) } @media (max-width: 900px) { .qbfmt .panes { grid-template-columns: 1fr } .qbfmt .edit { height: 320px } } /* ---------- sections ---------- */ .qbfmt section.block { padding: 52px 0 0 } .qbfmt .block-head { margin-bottom: 20px } .qbfmt .block-head h2 { font-size: clamp(23px,3vw,30px); margin: 9px 0 8px } .qbfmt .block-head p { color: var(--ink-2); max-width: 64ch } .qbfmt .cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(262px,1fr)); gap: 16px } .qbfmt .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 19px; box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s, transform .2s } .qbfmt .card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px) } .qbfmt .card h3 { font-size: 15.5px; font-family: var(--body); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 9px } .qbfmt .card h3 svg { width: 16px; height: 16px; color: var(--brand) } .qbfmt .card p { font-size: 13.5px; color: var(--ink-2) } .qbfmt .card code { font-family: var(--mono); font-size: 12.3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px } .qbfmt .lit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm) } .qbfmt .lit-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2) } .qbfmt .lit-head span { font-size: 13.5px; color: var(--ink-2) } .qbfmt .lit pre { margin: 0; padding: 16px; background: var(--code-bg); font-family: var(--mono); font-size: 12.8px; line-height: 1.7; color: var(--t-i); overflow-x: auto; white-space: pre; max-height: 260px } .qbfmt table.ref { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden } .qbfmt table.ref th, .qbfmt table.ref td { padding: 10px 15px; text-align: left; font-size: 13.6px; border-bottom: 1px solid var(--line); vertical-align: top } .qbfmt table.ref th { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; background: var(--surface-2) } .qbfmt table.ref td:first-child { font-family: var(--mono); font-size: 12.6px; color: var(--ink); white-space: nowrap } .qbfmt table.ref td { color: var(--ink-2) } .qbfmt table.ref tr:last-child td { border-bottom: 0 } .qbfmt table.ref tbody tr:hover { background: var(--surface-2) } .qbfmt .faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 22px } .qbfmt details { border-top: 1px solid var(--line) } .qbfmt details:first-of-type { border-top: 0 } .qbfmt summary { cursor: pointer; list-style: none; padding: 15px 0; font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 12px } .qbfmt summary::-webkit-details-marker { display: none } .qbfmt summary::before { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); transition: transform .25s } .qbfmt details[open] summary::before { transform: rotate(45deg) } .qbfmt details .ans { padding: 0 0 17px 20px; color: var(--ink-2); font-size: 14.5px } .qbfmt details .ans code { font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px } .qbfmt .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%,18px); background: var(--ink); color: var(--paper); font-size: 13.5px; font-weight: 500; padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .24s, transform .24s; z-index: 80 } .qbfmt .toast.show { opacity: 1; transform: translate(-50%,0) } .qbfmt .drop { position: fixed; inset: 0; background: color-mix(in srgb, var(--brand) 14%, transparent); border: 3px dashed var(--brand); z-index: 90; display: none; place-items: center; font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--brand-ink); backdrop-filter: blur(2px) } .qbfmt .drop.on { display: grid } @media (prefers-reduced-motion: reduce) { .qbfmt * { transition-duration: .001ms !important } } @media print { .qbfmt .toolbar, .qbfmt .opts, .qbfmt .toast { display: none !important } }