/* * Visual language: Apple platform conventions, adapted for a dense data tool. * * The reference points are Finder, Numbers and Xcode rather than a marketing page — those are * Apple's own answers to "a lot of information, still calm". So: system typography, hairline * separators, translucent chrome, restrained accent colour, and generous rhythm in the chrome * while the data grid itself stays tight. An airy grid would be prettier and worse. * * Colours are the system palette (systemBlue/Red/Green/Orange) with their documented light and * dark variants, because those are what a Mac user's eye is already calibrated to. */ :root { /* Neutrals — macOS window/sidebar/control greys */ --bg: #ececee; --surface: #ffffff; --surface-2: #f5f5f7; --surface-3: #ebebed; --chrome: rgba(246, 246, 248, 0.72); --sidebar: rgba(240, 240, 243, 0.68); --border: rgba(0, 0, 0, 0.10); --border-strong: rgba(0, 0, 0, 0.16); --text: #1d1d1f; --text-2: #3c3c43; --muted: rgba(60, 60, 67, 0.60); /* System colours, light appearance */ --accent: #007aff; --accent-hover: #0071eb; --accent-soft: rgba(0, 122, 255, 0.12); --danger: #ff3b30; --danger-soft: rgba(255, 59, 48, 0.12); --danger-bg: rgba(255, 59, 48, 0.10); --warn: #ff9500; --warn-soft: rgba(255, 149, 0, 0.16); --ok: #34c759; --on-accent: #ffffff; /* Continuous-feeling radii: small controls, panels, sheets */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 980px; --shadow-1: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 0.5px rgba(0, 0, 0, .05); --shadow-2: 0 4px 16px rgba(0, 0, 0, .10), 0 0 0 0.5px rgba(0, 0, 0, .06); --shadow-sheet: 0 24px 64px rgba(0, 0, 0, .28), 0 0 0 0.5px rgba(0, 0, 0, .10); --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace; --ease: cubic-bezier(0.25, 0.1, 0.25, 1); } /* * Theme. The operator can pin light or dark from the top bar; "System" follows the OS. JS stamps * the resolved choice on , so the dark palette applies either when pinned or * when the OS is dark and nothing is pinned. Both blocks carry the same values on purpose. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1c1c1e; --surface: #2c2c2e; --surface-2: #242426; --surface-3: #3a3a3c; --chrome: rgba(40, 40, 42, 0.72); --sidebar: rgba(30, 30, 32, 0.66); --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.20); --text: #f5f5f7; --text-2: #e5e5e7; --muted: rgba(235, 235, 245, 0.60); /* Dark-appearance system colours — brighter, as Apple specifies */ --accent: #0a84ff; --accent-hover: #3d9bff; --accent-soft: rgba(10, 132, 255, 0.20); --danger: #ff453a; --danger-soft: rgba(255, 69, 58, 0.20); --danger-bg: rgba(255, 69, 58, 0.14); --warn: #ff9f0a; --warn-soft: rgba(255, 159, 10, 0.20); --ok: #30d158; --shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 0 0 0.5px rgba(255, 255, 255, .06); --shadow-2: 0 6px 20px rgba(0, 0, 0, .48), 0 0 0 0.5px rgba(255, 255, 255, .07); --shadow-sheet: 0 28px 72px rgba(0, 0, 0, .64), 0 0 0 0.5px rgba(255, 255, 255, .10); } } :root[data-theme="dark"] { --bg: #1c1c1e; --surface: #2c2c2e; --surface-2: #242426; --surface-3: #3a3a3c; --chrome: rgba(40, 40, 42, 0.72); --sidebar: rgba(30, 30, 32, 0.66); --border: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.20); --text: #f5f5f7; --text-2: #e5e5e7; --muted: rgba(235, 235, 245, 0.60); /* Dark-appearance system colours — brighter, as Apple specifies */ --accent: #0a84ff; --accent-hover: #3d9bff; --accent-soft: rgba(10, 132, 255, 0.20); --danger: #ff453a; --danger-soft: rgba(255, 69, 58, 0.20); --danger-bg: rgba(255, 69, 58, 0.14); --warn: #ff9f0a; --warn-soft: rgba(255, 159, 10, 0.20); --ok: #30d158; --shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 0 0 0.5px rgba(255, 255, 255, .06); --shadow-2: 0 6px 20px rgba(0, 0, 0, .48), 0 0 0 0.5px rgba(255, 255, 255, .07); --shadow-sheet: 0 28px 72px rgba(0, 0, 0, .64), 0 0 0 0.5px rgba(255, 255, 255, .10); } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } /* * The UA stylesheet's [hidden] rule is display:none at the lowest specificity, so any class that * sets display (.overlay uses grid, .panel uses flex) silently defeats it. Everything here is * shown and hidden via the hidden attribute, so it has to win. */ [hidden] { display: none !important; } body { margin: 0; font-family: var(--font); font-size: 13px; line-height: 1.45; /* Apple's own UI enables these; they visibly tighten SF at small sizes. */ -webkit-font-smoothing: antialiased; font-feature-settings: "kern" 1; letter-spacing: -0.005em; background: var(--bg); color: var(--text); } /* ---------------------------------------------------------------- controls */ button { font: inherit; font-weight: 500; letter-spacing: -0.01em; padding: 5px 12px; border: 0.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: var(--shadow-1); transition: background .15s var(--ease), transform .08s var(--ease), opacity .15s var(--ease); } button:hover:not(:disabled) { background: var(--surface-3); } /* A small, quick depression is the tactile cue Apple controls give on press. */ button:active:not(:disabled) { transform: scale(0.975); } button:disabled { opacity: .38; cursor: default; box-shadow: none; } button.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); } button.primary:hover:not(:disabled) { background: var(--accent-hover); } button.danger { background: var(--danger); border-color: transparent; color: #fff; } button.danger:hover:not(:disabled) { filter: brightness(1.08); } button.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--accent); } button.ghost:hover:not(:disabled) { background: var(--accent-soft); } button.small { padding: 3px 9px; font-size: 12px; } input, select, textarea { font: inherit; font-size: 13px; padding: 5px 9px; border: 0.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } /* The 3px translucent halo is the system focus ring. */ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input.narrow { width: 78px; } select { appearance: none; padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 12px center, right 7px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; } code { font-family: var(--mono); font-size: 12px; } .error { color: var(--danger); margin: 8px 0 0; font-size: 12px; } .muted { color: var(--muted); } .spacer { flex: 1; } .hint { color: var(--muted); font-size: 12px; padding: 8px 16px; margin: 0; } /* ---------------------------------------------------------------- login */ .login-view { min-height: 100vh; display: grid; place-items: center; padding: 20px; /* A soft radial wash, the way Apple's sign-in surfaces sit on a gradient rather than flat grey. */ background: radial-gradient(1200px 600px at 50% -10%, var(--accent-soft), transparent 60%), var(--bg); } .login-card { width: 340px; background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--r-lg); padding: 32px 28px 26px; display: flex; flex-direction: column; box-shadow: var(--shadow-2); } .login-card h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -0.022em; text-align: center; } .login-sub { margin: 0 0 22px; color: var(--muted); font-size: 12px; text-align: center; line-height: 1.4; } .login-card label { font-size: 11px; color: var(--muted); margin-bottom: 5px; font-weight: 500; } .login-card input { margin-bottom: 14px; padding: 7px 10px; } .login-card button[type="submit"] { margin-top: 6px; padding: 8px; background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 500; } .login-note { font-size: 11px; line-height: 1.4; text-align: center; margin: 12px 0 0; } /* First-run setup, presented as a numbered checklist so the required order is obvious. */ .setup-card { width: min(560px, 100%); } .setup-steps { list-style: none; margin: 8px 0 0; padding: 0; } .setup-step { border: 0.5px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 14px; background: var(--surface-2); transition: opacity .2s var(--ease); } /* A completed step stays visible but recedes, so progress is legible at a glance. */ .setup-step.done { opacity: .5; } .setup-step.done .account-grid { display: none; } .setup-step-title { display: flex; align-items: center; gap: 9px; font-weight: 590; font-size: 13px; margin-bottom: 12px; } .setup-num { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 600; } .setup-step.done .setup-num { background: var(--ok); } .setup-step.done .setup-num::after { content: '✓'; } .setup-step.done .setup-num { font-size: 0; } .setup-step.done .setup-num::after { font-size: 12px; } .setup-why { font-size: 11px; margin: -4px 0 12px; line-height: 1.4; } /* A step that cannot be started yet is visibly inert rather than merely unfilled. */ .setup-step.locked { opacity: .45; } .setup-step.locked .setup-num { background: var(--surface-3); color: var(--muted); } #setup-totp-body .account-grid input[hidden], #setup-totp-body .account-grid label[hidden] { display: none; } /* ---------------------------------------------------------------- shell */ .console { height: 100vh; display: flex; flex-direction: column; } /* Translucent toolbar over scrolling content, as in a macOS window. */ .topbar { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--chrome); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid var(--border); z-index: 10; } .brand { font-weight: 600; font-size: 13px; letter-spacing: -0.015em; } .user { color: var(--muted); font-size: 12px; } .field-inline { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .badge { font-size: 10px; font-weight: 590; padding: 2px 8px; border-radius: var(--r-pill); border: none; text-transform: uppercase; letter-spacing: 0.03em; background: var(--surface-3); color: var(--muted); white-space: nowrap; } .badge-prod { background: var(--danger); color: #fff; } .badge-staging { background: var(--warn); color: #1d1d1f; } .badge-dev { background: var(--surface-3); color: var(--muted); } .badge-muted { background: transparent; color: var(--muted); border: 0.5px solid var(--border-strong); } .layout { flex: 1; display: flex; min-height: 0; } .sidebar { width: var(--sidebar-width, 264px); min-width: 180px; flex: none; border-right: 0.5px solid var(--border); background: var(--sidebar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); display: flex; flex-direction: column; min-height: 0; } .sidebar-head { display: flex; gap: 6px; padding: 10px; } .sidebar-head input { flex: 1; border-radius: var(--r-pill); padding-left: 11px; } .tree { flex: 1; overflow: auto; padding: 2px 8px 10px; } .tree-schema > .tree-label { font-weight: 590; } /* Rounded selection pills, the Finder/Mail sidebar idiom. */ .tree-label { display: flex; align-items: center; gap: 6px; padding: 4px 8px; margin: 1px 0; border-radius: var(--r-sm); cursor: default; white-space: nowrap; transition: background .12s var(--ease); } .tree-label:hover { background: rgba(120, 120, 128, .12); } .tree-label.selected { background: var(--accent); color: var(--on-accent); } .tree-children { margin-left: 12px; } .tree-caret { width: 10px; flex: none; color: var(--muted); font-size: 10px; } .tree-folder-label { font-weight: 500; color: var(--text-2); } .tree-folder > .tree-children { margin-left: 16px; } .tree-empty { padding: 2px 8px; font-size: 11px; color: var(--muted); } .tree-name { flex: 1 1 auto; min-width: 48px; overflow: hidden; text-overflow: ellipsis; } .tree-item .tree-meta { flex: 0 1 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; margin-left: 6px; } /* Drag handles: a hairline that widens its hit area on hover, Xcode/Finder style. */ .resizer-v { flex: none; width: 5px; margin: 0 -2px; cursor: col-resize; background: transparent; z-index: 5; transition: background .12s var(--ease); } .resizer-v:hover, .resizer-v.active { background: var(--accent-soft); } .resizer-h { flex: none; height: 6px; cursor: row-resize; background: var(--surface-2); border-bottom: 0.5px solid var(--border); position: relative; } .resizer-h::after { content: ''; position: absolute; left: 50%; top: 2px; width: 36px; height: 2px; margin-left: -18px; border-radius: 2px; background: var(--border-strong); } .resizer-h:hover, .resizer-h.active { background: var(--accent-soft); } body.resizing { cursor: col-resize; user-select: none; } body.resizing-h { cursor: row-resize; user-select: none; } body.resizing iframe, body.resizing-h iframe { pointer-events: none; } .tree-glyph, .tree-folder-icon { font-family: var(--mono); font-size: 9px; font-weight: 600; width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 4px; flex: none; color: #fff; } .icon-table { background: #af52de; } /* systemPurple, matches autocomplete */ .icon-view { background: #5ac8fa; } /* systemTeal */ .icon-matview { background: #30b0c7; } .icon-foreign { background: #ff9f0a; } .icon-sequence { background: #8e8e93; } .icon-index { background: #34c759; } .tree-label.selected .tree-glyph { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); } /* Right-click menu — same material as the autocomplete popover. */ .ctx-menu { position: fixed; z-index: 90; min-width: 220px; max-width: 360px; background: var(--chrome); backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); border: 0.5px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 4px; } .ctx-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: none; background: none; box-shadow: none; padding: 5px 10px; border-radius: var(--r-sm); font-size: 12px; color: var(--text); cursor: default; } .ctx-menu .ctx-item:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); } .ctx-menu .ctx-item:disabled { color: var(--muted); background: none; opacity: 1; } .ctx-menu .ctx-item.danger { background: none; color: var(--danger); box-shadow: none; } .ctx-menu .ctx-item.danger:hover:not(:disabled) { background: var(--danger); color: #fff; } .ctx-item .ctx-hint { margin-left: auto; font-size: 10px; color: var(--muted); } .ctx-item:hover:not(:disabled) .ctx-hint { color: rgba(255, 255, 255, .8); } .ctx-sep { height: 0.5px; background: var(--border-strong); margin: 4px 8px; } /* Result grid header: type glyph + name, numeric columns right-aligned, row numbers gutter. */ th .col-glyph, .col-glyph { display: inline-block; font-family: var(--mono); font-size: 9px; font-weight: 600; min-width: 18px; padding: 0 3px; margin-right: 5px; line-height: 14px; text-align: center; border-radius: 3px; color: var(--muted); background: rgba(120, 120, 128, .16); vertical-align: 1px; } .col-glyph.num { color: #ff9f0a; } .col-glyph.txt { color: #5ac8fa; } .col-glyph.bool { color: #30d158; } .col-glyph.time { color: #bf5af2; } .col-glyph.json { color: #ffd60a; } .col-glyph.uuid { color: #64d2ff; } table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; } table.grid th.row-num, table.grid td.row-num { text-align: right; color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; background: var(--surface-2); position: sticky; left: 0; z-index: 2; user-select: none; min-width: 34px; } table.grid tbody tr:hover td { background: rgba(120, 120, 128, .08); } .result-foot { display: flex; gap: 10px; align-items: center; padding: 4px 12px; font-size: 11px; color: var(--muted); border-top: 0.5px solid var(--border); background: var(--surface-2); } .result-foot .spacer { flex: 1; } .result-foot button { padding: 2px 8px; font-size: 11px; } .result-block.collapsed .grid-wrap, .result-block.collapsed .result-foot { display: none; } .result-toggle { cursor: pointer; } .theme-select { padding: 3px 24px 3px 8px; font-size: 11px; } .result-editable { color: var(--accent); font-weight: 500; padding: 1px 7px; border-radius: var(--r-pill); background: var(--accent-soft); } .result-grid { max-height: 60vh; } .result-head button { margin-left: 4px; } .plan-scope { font-size: 11px; padding-bottom: 4px; } .tree-meta { margin-left: auto; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; } .tree-label.selected .tree-meta { color: rgba(255, 255, 255, .8); } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--surface); } /* Tabs read as a segmented control rather than underlined links. */ .tabs { display: flex; gap: 2px; padding: 8px 14px; background: var(--chrome); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid var(--border); } .tab { border: none; border-radius: var(--r-sm); background: none; box-shadow: none; padding: 4px 12px; font-size: 12px; font-weight: 500; color: var(--muted); } .tab:hover:not(.active) { background: rgba(120, 120, 128, .12); } .tab.active { color: var(--text); background: var(--surface); box-shadow: var(--shadow-1); } .panel { display: none; flex: 1; min-height: 0; flex-direction: column; } .panel.active { display: flex; } .toolbar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 0.5px solid var(--border); background: var(--surface); flex-wrap: wrap; } .title { font-weight: 590; font-size: 13px; letter-spacing: -0.01em; } .library-bar { background: var(--surface-2); } /* ---------------------------------------------------------------- grid */ .grid-wrap { flex: 1; overflow: auto; min-height: 0; background: var(--surface); } table.grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 12px; } table.grid th, table.grid td { border-right: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border); padding: 5px 10px; text-align: left; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.grid th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; cursor: default; font-weight: 590; font-size: 11px; color: var(--text-2); letter-spacing: 0; } table.grid th:hover { background: var(--surface-3); } table.grid th .col-type { font-weight: 400; color: var(--muted); font-size: 10px; margin-left: 6px; } /* Tabular figures keep numeric columns aligned — the single biggest legibility win in a data grid. */ table.grid td { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; } table.grid tbody tr:hover td { background: rgba(120, 120, 128, .06); } td.null-cell { color: var(--muted); font-style: italic; } td.pk-cell { font-weight: 590; } /* Spreadsheet grid */ table.grid-sheet { outline: none; user-select: none; } table.grid-sheet td { cursor: cell; } th.row-head { background: var(--surface-2); position: sticky; left: 0; z-index: 2; white-space: nowrap; font-weight: 400; } thead th.row-head { z-index: 3; } th.row-head .row-number { color: var(--muted); font-size: 10px; margin-left: 6px; font-variant-numeric: tabular-nums; } tr.row-selected td { background: var(--accent-soft); } td.cell-cursor { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 2px; } td.cell-dirty { background: var(--warn-soft); } td.cell-dirty::after { content: ' •'; color: var(--warn); } td.cell-locked { cursor: default; color: var(--muted); } input.cell-editor { width: 100%; border: none; outline: none; box-shadow: none; padding: 0; margin: 0; font: inherit; font-family: var(--mono); background: transparent; color: var(--text); } /* ---------------------------------------------------------------- autocomplete */ .autocomplete { position: fixed; z-index: 70; min-width: 240px; max-width: 420px; max-height: 240px; overflow-y: auto; background: var(--chrome); backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); border: 0.5px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 4px; } .ac-item { display: flex; align-items: baseline; gap: 8px; padding: 4px 8px; border-radius: var(--r-sm); cursor: default; font-size: 12px; } .ac-item.active { background: var(--accent); color: var(--on-accent); } .ac-item.active .ac-detail { color: rgba(255, 255, 255, .8); } .ac-kind { font-family: var(--mono); font-size: 9px; font-weight: 600; width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 4px; flex: none; color: #fff; } .ac-table { background: #af52de; } /* systemPurple */ .ac-column { background: #5ac8fa; } /* systemTeal */ .ac-keyword { background: #8e8e93; } /* systemGray */ .ac-label { font-family: var(--mono); } .ac-detail { margin-left: auto; color: var(--muted); font-size: 10px; } /* ---------------------------------------------------------------- editor */ .editor-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 14px; background: var(--surface-2); border-bottom: 0.5px solid var(--border); overflow-x: auto; } .editor-tab { display: flex; align-items: center; gap: 6px; padding: 3px 6px 3px 11px; border-radius: var(--r-pill); font-size: 12px; cursor: default; white-space: nowrap; background: var(--surface); border: 0.5px solid var(--border); transition: background .12s var(--ease); } .editor-tab:hover { background: var(--surface-3); } .editor-tab.active { background: var(--accent); border-color: transparent; color: var(--on-accent); } .editor-tab-close { border: none; background: none; box-shadow: none; padding: 0 3px; font-size: 14px; line-height: 1; color: inherit; opacity: .55; } .editor-tab-close:hover { opacity: 1; background: none; } .sql-input { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; min-height: 90px; height: var(--editor-height, 200px); flex: none; resize: none; border: none; border-bottom: 0.5px solid var(--border); border-radius: 0; padding: 14px 16px; outline: none; box-shadow: none; tab-size: 2; background: var(--surface); } .sql-input:focus { box-shadow: none; border-color: var(--border); } .plan { padding: 10px 16px; border-bottom: 0.5px solid var(--border); background: var(--surface-2); } .plan-item { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 12px; } .plan-kind { font-size: 10px; font-weight: 590; font-family: var(--mono); padding: 1px 7px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--muted); } .plan-item.destructive .plan-kind { background: var(--danger); color: #fff; } .plan-sql { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plan-reason { color: var(--danger); font-size: 11px; } .warning { color: var(--warn); font-size: 12px; padding: 3px 0; } .results { flex: 1; overflow: auto; min-height: 0; } .result-block { border-bottom: 0.5px solid var(--border); } .result-head { display: flex; gap: 10px; align-items: baseline; padding: 8px 16px; background: var(--surface-2); font-size: 11px; color: var(--muted); } .result-head .ok { color: var(--ok); font-weight: 500; } .result-head .bad { color: var(--danger); font-weight: 500; } .result-head .pending { color: var(--warn); font-weight: 590; } .result-sql { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .result-error { padding: 10px 16px; background: var(--danger-bg); color: var(--danger); font-family: var(--mono); font-size: 11.5px; } /* Open-transaction banner */ .tx-banner { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--warn-soft); border-bottom: 0.5px solid var(--warn); color: var(--text); font-size: 12px; } .tx-countdown { font-family: var(--mono); font-size: 11px; color: var(--warn); font-variant-numeric: tabular-nums; } .tx-banner.urgent { background: var(--danger-soft); border-bottom-color: var(--danger); } .tx-banner.urgent .tx-countdown { color: var(--danger); font-weight: 600; } /* ---------------------------------------------------------------- structure */ .structure { flex: 1; overflow: auto; padding: 18px; } .structure h3 { margin: 22px 0 10px; font-size: 13px; font-weight: 590; letter-spacing: -0.01em; } .structure h3:first-child { margin-top: 0; } .def-list { font-family: var(--mono); font-size: 11.5px; } .def-list div { padding: 5px 0; border-bottom: 0.5px solid var(--border); } /* ---------------------------------------------------------------- sheets */ .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: grid; place-items: center; padding: 24px; z-index: 50; animation: overlay-in .18s var(--ease); } @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } /* Sheets drop in from above, as macOS document sheets do. */ .modal { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--r-lg); padding: 24px 26px; width: min(680px, 100%); max-height: 86vh; overflow: auto; box-shadow: var(--shadow-sheet); animation: sheet-in .22s var(--ease); } @keyframes sheet-in { from { opacity: 0; transform: translateY(-14px) scale(.985); } to { opacity: 1; transform: none; } } .modal h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.018em; } .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } .confirm-list { margin: 14px 0; padding-left: 18px; font-size: 12px; } .confirm-list li { margin-bottom: 10px; } .confirm-list code { display: block; color: var(--muted); margin-top: 2px; } #confirm-phrase-wrap { margin-top: 14px; } #confirm-phrase, #commit-phrase { width: 100%; margin-top: 6px; } #commit-overlay label { font-size: 12px; } .row-fields { display: grid; grid-template-columns: 180px 1fr; gap: 9px 14px; align-items: center; } .row-fields label { font-size: 11px; color: var(--muted); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; } .row-fields .field-note { font-size: 10px; color: var(--muted); margin-top: 3px; } .row-fields input { width: 100%; } .row-fields input:disabled { background: var(--surface-2); color: var(--muted); } /* Toast, styled after a macOS notification banner. */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--chrome); backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); border: 0.5px solid var(--border-strong); border-radius: var(--r-md); padding: 10px 18px; box-shadow: var(--shadow-2); z-index: 60; font-size: 12px; font-weight: 500; max-width: 70vw; animation: toast-in .22s var(--ease); } @keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%); } } .toast.bad { color: var(--danger); } .toast.good { color: var(--ok); } /* ---------------------------------------------------------------- admin */ .admin-body { flex: 1; overflow: auto; padding: 18px; } .admin-body > section { margin-bottom: 30px; } .admin-body h3 { margin: 0 0 12px; font-size: 13px; font-weight: 590; letter-spacing: -0.01em; } .role-block { border: 0.5px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 10px; background: var(--surface-2); } .role-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; } .grant-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 11.5px; } .grant-allow { color: var(--ok); font-weight: 590; font-size: 10px; width: 44px; } .grant-deny { color: var(--danger); font-weight: 590; font-size: 10px; width: 44px; } .grant-form { display: grid; grid-template-columns: 150px minmax(0, 420px); gap: 9px 14px; align-items: center; max-width: 620px; } .grant-form label { font-size: 11px; color: var(--muted); font-weight: 500; } .grant-actions { display: flex; gap: 14px; flex-wrap: wrap; } .grant-actions label { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-family: var(--mono); font-size: 11.5px; } /* ---------------------------------------------------------------- account */ .account-heading { margin: 24px 0 10px; font-size: 13px; font-weight: 590; letter-spacing: -0.01em; } .account-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 9px 14px; align-items: center; } .account-grid label { font-size: 11px; color: var(--muted); font-weight: 500; } .totp-enrol { display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap; } .totp-qr { background: #fff; padding: 10px; border-radius: var(--r-md); line-height: 0; box-shadow: var(--shadow-1); } .totp-manual { flex: 1; min-width: 260px; } .totp-secret { display: block; font-family: var(--mono); font-size: 13px; letter-spacing: .06em; padding: 9px 12px; background: var(--surface-2); border-radius: var(--r-sm); margin-bottom: 14px; word-break: break-all; } /* ---------------------------------------------------------------- scrollbars */ /* Overlay-style scrollbars, the way macOS renders them over content. */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(120, 120, 128, .38); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 128, .58); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ================================================================ workspace shell (redesign) */ .workspace { display: flex; align-items: stretch; gap: 2px; padding: 0 8px 0 0; background: var(--chrome); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid var(--border); min-height: 36px; overflow: hidden; } .workspace-tabs { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; min-width: 0; } .workspace-tabs::-webkit-scrollbar { display: none; } .ws-tab { display: flex; align-items: center; gap: 7px; padding: 0 8px 0 12px; max-width: 220px; font-size: 12px; color: var(--muted); border-right: 0.5px solid var(--border); cursor: default; white-space: nowrap; position: relative; transition: background .12s var(--ease), color .12s var(--ease); } .ws-tab:hover { background: rgba(120, 120, 128, .10); color: var(--text); } .ws-tab.active { background: var(--surface); color: var(--text); } .ws-tab.active::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); } .ws-title { overflow: hidden; text-overflow: ellipsis; } .ws-close { border: none; background: none; box-shadow: none; padding: 0 4px; font-size: 14px; line-height: 1; color: var(--muted); border-radius: 4px; opacity: 0; } .ws-tab:hover .ws-close, .ws-tab.active .ws-close { opacity: 1; } .ws-close:hover { background: rgba(120, 120, 128, .2); color: var(--text); } .workspace .ws-fixed { align-self: center; padding: 4px 10px; } .workspace .ws-fixed.active { background: var(--surface); box-shadow: var(--shadow-1); color: var(--text); } .subtabs { display: flex; align-items: center; gap: 2px; padding: 6px 12px; border-bottom: 0.5px solid var(--border); background: var(--surface-2); } .subtab { border: none; background: none; box-shadow: none; padding: 3px 10px; font-size: 12px; color: var(--muted); border-radius: var(--r-sm); } .subtab:hover:not(.active) { background: rgba(120, 120, 128, .12); } .subtab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); } .crumb { margin-left: auto; font-size: 11px; color: var(--muted); } .subpanel { display: none; flex: 1; min-height: 0; flex-direction: column; } .subpanel.active { display: flex; } #panel-table { flex-direction: column; } #panel-object, #panel-structure { overflow: auto; } /* Welcome */ .welcome { align-items: center; justify-content: center; background: var(--surface); } .welcome-card { max-width: 520px; text-align: center; padding: 32px; } .welcome-card h2 { font-size: 20px; letter-spacing: -0.02em; margin: 0 0 6px; } .welcome-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin-top: 22px; text-align: left; font-size: 12px; color: var(--text-2); } kbd { font-family: var(--font); font-size: 10.5px; padding: 1px 6px; border-radius: 5px; border: 0.5px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); box-shadow: 0 1px 0 var(--border-strong); margin-right: 6px; } .key-word { font-weight: 590; margin-right: 6px; } /* Status bar */ .statusbar { display: flex; align-items: center; gap: 16px; padding: 3px 12px; border-top: 0.5px solid var(--border); background: var(--chrome); font-size: 11px; color: var(--muted); min-height: 24px; } .status-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #status-tx { color: var(--warn); font-weight: 590; } /* Editor with gutter */ .editor-shell { display: flex; flex: none; min-height: 0; border-bottom: 0.5px solid var(--border); background: var(--surface); } .sql-gutter { margin: 0; padding: 14px 8px 14px 12px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--muted); text-align: right; user-select: none; overflow: hidden; background: var(--surface-2); border-right: 0.5px solid var(--border); min-width: 40px; height: var(--editor-height, 200px); } .editor-shell .sql-input { flex: 1; border-bottom: none; } .toolbar-sep { width: 0.5px; height: 18px; background: var(--border-strong); margin: 0 4px; } .quick-open { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 400; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(120, 120, 128, .10); border-color: transparent; } .quick-open kbd { margin: 0 0 0 4px; } .quick-open-icon { font-size: 13px; } /* Result tabs */ .result-tabs { display: flex; gap: 2px; padding: 6px 12px 0; background: var(--surface-2); border-bottom: 0.5px solid var(--border); } .result-tab { border: 0.5px solid transparent; border-bottom: none; background: none; box-shadow: none; padding: 4px 10px; font-size: 11.5px; color: var(--muted); border-radius: var(--r-sm) var(--r-sm) 0 0; } .result-tab.active { background: var(--surface); color: var(--text); border-color: var(--border); } .result-tab.failed { color: var(--danger); } /* Structure / metadata */ .structure { padding: 12px 20px 40px; } .meta-header h2 { margin: 6px 0 4px; font-size: 18px; letter-spacing: -0.02em; font-family: var(--mono); } .meta-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .meta-comment { margin: 0 0 8px; } .meta-section { border: 0.5px solid var(--border); border-radius: var(--r-md); margin: 10px 0; background: var(--surface); overflow-x: auto; } .meta-section > summary { list-style: none; cursor: default; padding: 8px 12px; font-weight: 590; font-size: 12.5px; background: var(--surface-2); display: flex; align-items: center; gap: 8px; } .meta-section > summary::-webkit-details-marker { display: none; } .meta-section > summary::before { content: '▸'; color: var(--muted); font-size: 10px; width: 10px; } .meta-section[open] > summary::before { content: '▾'; } .meta-count { font-size: 10px; font-weight: 600; color: var(--muted); background: rgba(120, 120, 128, .16); border-radius: var(--r-pill); padding: 0 7px; line-height: 16px; } .meta-section > *:not(summary) { margin: 0; } .meta-section .muted { padding: 10px 12px; font-size: 12px; } .meta-section > button { margin: 8px 12px 12px; } .meta-table { width: 100%; min-width: 0; } table.grid.meta-table td { font-family: var(--font); font-size: 12px; max-width: 360px; } table.grid.meta-table td .inline-code { max-width: 360px; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .kv-grid { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; padding: 10px 12px; font-size: 12px; } .kv-key { color: var(--muted); } .kv-val { font-variant-numeric: tabular-nums; } .pill { display: inline-block; font-size: 10px; font-weight: 600; padding: 0 6px; line-height: 16px; border-radius: var(--r-pill); background: rgba(120, 120, 128, .16); color: var(--text-2); margin-right: 4px; } .pill-pk { background: var(--warn-soft); color: var(--warn); } .pill-fk { background: var(--accent-soft); color: var(--accent); } .rel-link { color: var(--accent); text-decoration: none; } .rel-link:hover { text-decoration: underline; } .inline-code { font-family: var(--mono); font-size: 11px; white-space: nowrap; } .code-block { margin: 0; padding: 12px 16px; font-family: var(--mono); font-size: 12px; line-height: 1.55; white-space: pre; overflow: auto; background: var(--surface-2); color: var(--text); flex: 1; min-height: 0; } #panel-ddl .code-block { border-top: none; } .enum-list { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px; } /* Quick open */ .quick-overlay { align-items: flex-start; padding-top: 12vh; } .quick-panel { width: min(640px, 92vw); background: var(--chrome); backdrop-filter: saturate(180%) blur(30px); -webkit-backdrop-filter: saturate(180%) blur(30px); border: 0.5px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-sheet); overflow: hidden; } .quick-panel input { width: 100%; border: none; border-bottom: 0.5px solid var(--border); border-radius: 0; padding: 14px 16px; font-size: 15px; background: transparent; box-shadow: none; } .quick-list { max-height: 50vh; overflow: auto; padding: 6px; } .quick-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-sm); font-size: 13px; } .quick-item.active { background: var(--accent); color: var(--on-accent); } .quick-name { font-family: var(--mono); } .quick-schema { margin-left: auto; font-size: 11px; color: var(--muted); } .quick-item.active .quick-schema { color: rgba(255, 255, 255, .8); } .quick-empty { padding: 14px; } .quick-foot { padding: 6px 12px; font-size: 11px; border-top: 0.5px solid var(--border); } /* Object glyph colours for the new kinds */ .icon-function { background: #ff375f; } .icon-procedure { background: #ff2d55; } .icon-trigger { background: #ffd60a; color: #1d1d1f; } .icon-trigger.disabled { opacity: .45; } .icon-type { background: #ac8e68; } /* ================================================================ admin redesign */ .admin-sec { display: none; } .admin-sec.active { display: block; } .admin-sec-head { margin-bottom: 14px; } .admin-sec-head h3 { margin: 0 0 4px; font-size: 15px; letter-spacing: -0.015em; } .admin-sec-head p { margin: 0; font-size: 12px; max-width: 760px; } .role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; } .role-grid .role-block { border: 0.5px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface); box-shadow: var(--shadow-1); margin: 0; } .role-grid .role-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .role-grid .role-title strong { font-size: 13.5px; } .role-grid .grant-row { border-top: 0.5px solid var(--border); padding: 5px 0; } .role-grid .grant-row code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #admin-users table.grid, #admin-connections table.grid { width: 100%; } #admin-users td button { margin-right: 4px; } /* Slide-in sheet (right side), used for Add grant */ .sheet { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .28); display: flex; justify-content: flex-end; } .sheet-panel { width: min(480px, 100vw); height: 100%; overflow: auto; background: var(--surface); box-shadow: var(--shadow-sheet); padding: 18px 22px; border-left: 0.5px solid var(--border); animation: sheet-in .18s var(--ease); } @keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .sheet-head h3 { margin: 0; font-size: 16px; } /* Maintenance */ .maint-db-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 0.5px solid var(--border); background: var(--surface-2); font-size: 12px; } .maint-table td.warn-cell { color: var(--danger); font-weight: 590; } .maint-table td.soft-warn-cell { color: var(--warn); font-weight: 590; } .maint-actions { white-space: nowrap; } .maint-actions button { padding: 1px 7px; font-size: 11px; margin-right: 2px; } .meta-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; } .narrow-wide { width: 220px; } /* ================================================================ activity monitor & jobs */ .ws-badge { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 6px; border-radius: var(--r-pill); background: var(--danger); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; } .status-jobs { color: var(--accent); font-weight: 590; } .mon-sec { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: auto; } .mon-sec.active { display: flex; } .mon-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; padding: 14px 16px 0; } .mon-card { border: 0.5px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; background: var(--surface); box-shadow: var(--shadow-1); } .mon-card-title { font-size: 11px; color: var(--muted); font-weight: 500; } .mon-card-value { font-size: 20px; font-weight: 590; letter-spacing: -0.02em; margin: 2px 0; font-variant-numeric: tabular-nums; } .mon-card-sub { font-size: 11px; color: var(--muted); } .mon-card.warn .mon-card-value { color: var(--warn); } .mon-card.bad .mon-card-value { color: var(--danger); } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { font-size: 11px; padding: 2px 9px; border-radius: var(--r-pill); background: rgba(120, 120, 128, .14); color: var(--text-2); font-variant-numeric: tabular-nums; } .chip.st-active { background: var(--accent-soft); color: var(--accent); } .chip.st-idletx { background: var(--warn-soft); color: var(--warn); } .chip.chip-warn { background: var(--warn-soft); color: var(--warn); font-weight: 590; } .chip.chip-bad { background: var(--danger-soft); color: var(--danger); font-weight: 590; } .state-pill { font-size: 10.5px; padding: 1px 7px; border-radius: var(--r-pill); background: rgba(120, 120, 128, .14); white-space: nowrap; } .state-pill.st-active { background: var(--accent-soft); color: var(--accent); font-weight: 590; } .state-pill.st-idle { color: var(--muted); } .state-pill.st-idletx { background: var(--warn-soft); color: var(--warn); font-weight: 590; } .mon-table td.mon-query { max-width: 420px; font-family: var(--mono); font-size: 11px; cursor: default; } .mon-table tr.row-blocked td { background: var(--danger-bg); } .lock-empty { padding: 20px; } .maint-activity { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 14px; border-bottom: 0.5px solid var(--border); background: var(--surface-2); max-height: 38vh; overflow: auto; } @media (max-width: 1100px) { .maint-activity { grid-template-columns: 1fr; } } .maint-activity-col { min-width: 0; } .maint-activity-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; font-size: 12px; } .maint-list { font-size: 12px; } .maint-jobs-table { width: 100%; } .job-status { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: var(--r-pill); } .job-running { background: var(--accent-soft); color: var(--accent); } .job-completed { background: rgba(52, 199, 89, .16); color: var(--ok); } .job-failed { background: var(--danger-soft); color: var(--danger); } .job-cancelled { background: var(--warn-soft); color: var(--warn); } .progress-card { border: 0.5px solid var(--border); border-radius: var(--r-md); padding: 8px 10px; margin-bottom: 8px; background: var(--surface); } .progress-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .progress-phase { font-size: 11px; color: var(--muted); margin: 2px 0 4px; } .progress-bar { position: relative; height: 16px; background: rgba(120, 120, 128, .14); border-radius: 8px; overflow: hidden; margin: 4px 0; } .progress-fill { height: 100%; background: var(--accent); transition: width .4s var(--ease); } .progress-pct { position: absolute; inset: 0; font-size: 10px; line-height: 16px; padding-left: 8px; color: var(--text); } /* ================================================================ truncated cells & cell viewer */ td.cell-truncated { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(120, 120, 128, .06) 6px 7px); } .cell-truncated-mark { color: var(--warn); font-weight: 700; margin-left: 3px; } .cell-modal { width: min(900px, 100%); display: flex; flex-direction: column; max-height: 86vh; } .cell-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .cell-head h2 { margin: 0; font-family: var(--mono); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50%; } .cell-note { padding: 6px 0; } .cell-body { flex: 1; min-height: 120px; overflow: auto; border: 0.5px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); } .cell-pre { margin: 0; padding: 12px 14px; font-family: var(--mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .cell-record { grid-template-columns: max-content minmax(0, 1fr); } .cell-record .kv-key { font-family: var(--mono); } .cell-record-val { font-family: var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; } /* ================================================================ result sort / quick filter */ table.grid th.sortable { cursor: pointer; } table.grid th.sort-asc::after { content: ' ▲'; font-size: 9px; color: var(--accent); } table.grid th.sort-desc::after { content: ' ▼'; font-size: 9px; color: var(--accent); } .quick-filter { width: 180px; padding: 3px 9px; font-size: 11.5px; border-radius: var(--r-pill); } .result-foot .quick-filter { width: 200px; } /* ================================================================ audit */ .audit-toolbar { flex-wrap: wrap; row-gap: 6px; } .audit-facet { max-width: 150px; font-size: 11.5px; padding: 3px 22px 3px 8px; } .audit-date { font-size: 11px; padding: 3px 6px; } .audit-health { display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 12px; background: var(--danger-bg); color: var(--danger); border-bottom: 0.5px solid var(--border); } .audit-health code { font-family: var(--mono); font-size: 11px; color: var(--text); } .pill-event { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .02em; } .pill-event.ev-query, .pill-event.ev-execute { background: var(--accent-soft); color: var(--accent); } .pill-event.ev-write, .pill-event.ev-destructive, .pill-event.ev-delete, .pill-event.ev-ddl { background: var(--danger-soft); color: var(--danger); } .pill-event.ev-login, .pill-event.ev-logout, .pill-event.ev-auth { background: rgba(52, 199, 89, .16); color: var(--ok); } .pill-event.ev-maintenance, .pill-event.ev-export { background: var(--warn-soft); color: var(--warn); } .pill-event.ev-other { background: rgba(120, 120, 128, .14); color: var(--text-2); } .pill-outcome-ok { color: var(--ok); font-weight: 590; } .pill-outcome-bad { color: var(--danger); font-weight: 590; } .audit-sql { font-family: var(--mono); font-size: 11px; max-width: 520px; } /* ================================================================ maintenance: invalid indexes, LOST */ .maint-invalid { margin: 0 16px 8px; padding: 10px 14px; border: 0.5px solid var(--danger); border-radius: var(--r-md); background: var(--danger-bg); font-size: 12px; overflow-x: auto; } .maint-invalid-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; color: var(--danger); font-weight: 590; } .maint-invalid table { width: 100%; } .maint-invalid .inline-code { max-width: 520px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; } .job-lost { background: var(--warn-soft); color: var(--warn); } .job-persisted { font-size: 9px; color: var(--muted); margin-left: 4px; } /* ================================================================ production frame */ body.env-prod .topbar { border-top: 3px solid var(--danger); } body.env-prod .workspace { background: var(--danger-bg); } body.env-prod .workspace::before { content: 'PRODUCTION'; align-self: center; font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--danger); padding: 0 8px 0 10px; } /* ================================================================ EXPLAIN tree */ .xp-tree { padding: 10px 16px 16px; font-size: 12px; border-top: 0.5px solid var(--border); } .xp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .xp-node { margin: 2px 0 2px 0; border-left: 2px solid var(--border); padding-left: 10px; } .xp-node > .xp-body { margin-left: 8px; } .xp-summary { display: flex; align-items: baseline; gap: 10px; cursor: default; padding: 3px 6px; border-radius: var(--r-sm); list-style: none; flex-wrap: wrap; } .xp-summary::-webkit-details-marker { display: none; } .xp-summary::before { content: '▾'; color: var(--muted); font-size: 10px; } .xp-node:not([open]) > .xp-summary::before { content: '▸'; } .xp-summary:hover { background: rgba(120, 120, 128, .08); } .xp-type { font-weight: 590; } .xp-rel { font-family: var(--mono); color: var(--accent); } .xp-stats { display: flex; gap: 10px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; margin-left: auto; } .xp-share { font-weight: 590; } .xp-hot > .xp-summary { background: var(--danger-bg); } .xp-hot > .xp-summary .xp-share { color: var(--danger); } .xp-warm > .xp-summary { background: var(--warn-soft); } .xp-detail { display: flex; gap: 8px; font-size: 11px; padding: 1px 6px; } .xp-key { color: var(--muted); min-width: 120px; } .xp-val { font-family: var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; } /* ================================================================ syntax-highlighted editor */ .editor-host { position: relative; flex: 1; min-width: 0; height: var(--editor-height, 200px); } .editor-host .sql-input, .sql-highlight { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; box-sizing: border-box; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; padding: 14px 16px; tab-size: 2; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; letter-spacing: normal; overflow: auto; } .editor-host .sql-input { background: transparent; color: transparent; caret-color: var(--text); border-bottom: none; resize: none; z-index: 1; } .editor-host .sql-input::placeholder { color: var(--muted); opacity: 1; } .editor-host .sql-input::selection { background: var(--accent-soft); } .sql-highlight { color: var(--text); background: var(--surface); pointer-events: none; z-index: 0; border: none; } /* overflow:auto (not hidden) so the mirror grows the same scrollbar gutter as the textarea and wraps at exactly the same width; the textarea's scrollbar draws over the mirror's. */ .sql-highlight::-webkit-scrollbar { background: transparent; } .hl-keyword { color: #af52de; font-weight: 590; } .hl-string { color: #d12f1b; } .hl-number { color: #1c7fd0; } .hl-comment { color: var(--muted); font-style: italic; } .hl-ident { color: #b25f00; } :root[data-theme="dark"] .hl-keyword { color: #da8fff; } :root[data-theme="dark"] .hl-string { color: #ff8170; } :root[data-theme="dark"] .hl-number { color: #6bb8ff; } :root[data-theme="dark"] .hl-ident { color: #ffb86c; } /* ================================================================ admin forms in sheets */ .sheet-body h4 { margin: 14px 0 6px; font-size: 12.5px; } .form-field { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; align-items: center; margin-bottom: 10px; } .form-field label { font-size: 12px; color: var(--muted); } .form-field .field-note { grid-column: 2; font-size: 11px; color: var(--muted); } .role-picker { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; margin-bottom: 8px; } .role-option { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 0.5px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); cursor: default; font-size: 12px; } .role-option input { margin-top: 3px; } .role-option-text { min-width: 0; flex: 1; } .role-option-title { display: flex; gap: 6px; align-items: center; } .role-option-grants { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 11px; } .role-option-grants code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grant-deny-code { color: var(--danger); } .superadmin-option { border-color: var(--danger); background: var(--danger-bg); margin-top: 6px; } .role-pill { margin: 1px 4px 1px 0; } .effective-preview { margin-top: 12px; } .effective-preview table.grid { width: 100%; } .cred-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: center; margin: 6px 0; } .cred-label { font-size: 12px; color: var(--muted); } .cred-value { font-family: var(--mono); font-size: 12px; word-break: break-all; padding: 4px 8px; background: var(--surface-2); border-radius: var(--r-sm); } .sheet .modal-actions { margin-top: 16px; } .cred-message { width: 100%; font-family: var(--mono); font-size: 12px; resize: vertical; user-select: text; } .sheet-panel, .sheet-panel * { user-select: text; }