/* ────────────────────────────────────────────────────────────────────── GoNavi V2 — UI ────────────────────────────────────────────────────────────────────── This stylesheet contains the v2 tokens and the structural workbench rules used by the React layout when: body[data-ui-version="v2"] is set by App.tsx (driven by the AppearanceSettings.uiVersion store field). Legacy stays available as a rollback option in settings. Strategy: 1. Define design tokens (light + dark) as CSS variables on the body. 2. Override the small handful of Ant Design / project class selectors that drive the visual impression: surfaces, typography, sidebar tree, tabs, buttons, tables, inputs, dropdowns, modals. 3. Keep specificity tight to the v2 scope so legacy is untouched. Workbench-specific rules are imported after this file at app entry. ────────────────────────────────────────────────────────────────────── */ /* ─── Light tokens ─────────────────────────────────────── */ body[data-ui-version="v2"][data-theme="light"] { --gn-font-sans: "Inter", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "WenQuanYi Micro Hei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Ubuntu", sans-serif; --gn-font-mono: "JetBrains Mono", "Noto Sans Mono CJK SC", "Noto Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; --gn-bg-app: #f6f6f4; --gn-bg-chrome: #ececea; --gn-bg-panel: #ffffff; --gn-bg-panel-2: #fafaf8; --gn-bg-hover: rgba(15, 23, 42, 0.045); --gn-bg-active: rgba(15, 23, 42, 0.075); --gn-bg-selected: rgba(34, 197, 94, 0.10); --gn-bg-input: #ffffff; --gn-fg-1: #0c1322; --gn-fg-2: #1f2937; --gn-fg-3: #4b5563; --gn-fg-4: #6b7280; --gn-fg-5: #9ca3af; --gn-br-1: rgba(15, 23, 42, 0.08); --gn-br-2: rgba(15, 23, 42, 0.12); --gn-br-3: rgba(15, 23, 42, 0.18); --gn-accent: #16a34a; --gn-accent-2: #15803d; --gn-accent-soft: #dcfce7; --gn-info: #0284c7; --gn-info-soft: #e0f2fe; --gn-warn: #d97706; --gn-warn-soft: rgba(245, 158, 11, 0.14); --gn-danger: #dc2626; --gn-danger-strong: #dc2626; --gn-danger-strong-hover: #b91c1c; --gn-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --gn-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08); --gn-shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.14); --gn-shadow-card: 0 0 0 0.5px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06); --gn-kbd-bg: #f3f4f6; --gn-kbd-fg: #374151; } /* ─── Dark tokens ──────────────────────────────────────── */ body[data-ui-version="v2"][data-theme="dark"] { --gn-font-sans: "Inter", "PingFang SC", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "WenQuanYi Micro Hei", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Ubuntu", sans-serif; --gn-font-mono: "JetBrains Mono", "Noto Sans Mono CJK SC", "Noto Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; --gn-bg-app: #0c0e12; --gn-bg-chrome: #14171c; --gn-bg-panel: #161a21; --gn-bg-panel-2: #1b1f27; --gn-bg-hover: rgba(255, 255, 255, 0.05); --gn-bg-active: rgba(255, 255, 255, 0.08); --gn-bg-selected: rgba(34, 197, 94, 0.14); --gn-bg-input: #0f1217; --gn-fg-1: #f1f3f5; --gn-fg-2: #d6dade; --gn-fg-3: #a8aeb5; --gn-fg-4: #80868f; --gn-fg-5: #5a6068; --gn-br-1: rgba(255, 255, 255, 0.06); --gn-br-2: rgba(255, 255, 255, 0.10); --gn-br-3: rgba(255, 255, 255, 0.16); --gn-accent: #22c55e; --gn-accent-2: #16a34a; --gn-accent-soft: rgba(34, 197, 94, 0.16); --gn-info: #38bdf8; --gn-info-soft: rgba(56, 189, 248, 0.14); --gn-warn: #f59e0b; --gn-warn-soft: rgba(245, 158, 11, 0.16); --gn-danger: #f87171; --gn-danger-strong: #dc2626; --gn-danger-strong-hover: #b91c1c; --gn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --gn-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45); --gn-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); --gn-shadow-card: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.35); --gn-kbd-bg: #20242c; --gn-kbd-fg: #c7ccd2; } /* ─── Base typography & body ──────────────────────────── */ body[data-ui-version="v2"] { font-family: var(--gn-font-sans) !important; font-size: var(--gn-font-size, var(--gonavi-font-size, 14px)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; font-feature-settings: "cv11", "ss01"; } body[data-ui-version="v2"][data-platform="darwin"] { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; } body[data-ui-version="v2"] code, body[data-ui-version="v2"] pre, body[data-ui-version="v2"] kbd, body[data-ui-version="v2"] .ant-typography code, body[data-ui-version="v2"] .gonavi-mono, body[data-ui-version="v2"] [class*="monospace"] { font-family: var(--gn-font-mono) !important; } /* ────────────────────────────────────────────────────────── ANT DESIGN OVERRIDES — surfaces & chrome ────────────────────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-layout, body[data-ui-version="v2"] .ant-layout-content { background: var(--gn-bg-app) !important; } body[data-ui-version="v2"] .ant-layout-sider { background: var(--gn-bg-panel-2) !important; border-right: 0.5px solid var(--gn-br-1) !important; } body[data-ui-version="v2"] .ant-layout-header { background: var(--gn-bg-chrome) !important; border-bottom: 0.5px solid var(--gn-br-1) !important; } /* ─── Tabs (top tab bar) ───────────────────────────────── */ body[data-ui-version="v2"] .ant-tabs > .ant-tabs-nav { background: var(--gn-bg-panel-2); margin-bottom: 0; } body[data-ui-version="v2"] .ant-tabs > .ant-tabs-nav::before { border-bottom: 0.5px solid var(--gn-br-1) !important; } body[data-ui-version="v2"] .ant-tabs-tab { padding: 8px 12px !important; border-radius: 0 !important; background: transparent !important; border-right: 0.5px solid var(--gn-br-1) !important; font-weight: 500 !important; color: var(--gn-fg-3) !important; transition: background 0.08s !important; } body[data-ui-version="v2"] .ant-tabs-tab:hover { background: var(--gn-bg-hover) !important; color: var(--gn-fg-1) !important; } body[data-ui-version="v2"] .ant-tabs-tab.ant-tabs-tab-active { background: var(--gn-bg-panel) !important; color: var(--gn-fg-1) !important; font-weight: 600 !important; position: relative; } body[data-ui-version="v2"] .ant-tabs-tab.ant-tabs-tab-active::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gn-accent); } body[data-ui-version="v2"] .ant-tabs-tab .ant-tabs-tab-btn { font-family: var(--gn-font-sans); font-size: var(--gn-font-size-sm, 12px); } body[data-ui-version="v2"] .ant-tabs-ink-bar { display: none !important; } /* ─── Tree (sidebar database tree) ─────────────────────── */ body[data-ui-version="v2"] .ant-tree { background: transparent !important; font-size: var(--gn-sidebar-tree-font-size, var(--gn-font-size-sm, 12px)); color: var(--gn-fg-2); } body[data-ui-version="v2"] .ant-tree .ant-tree-treenode { padding: 1px 4px !important; } body[data-ui-version="v2"] .ant-tree .ant-tree-node-content-wrapper { border-radius: 6px !important; padding: 2px 6px !important; min-height: 26px !important; transition: background 0.06s !important; } body[data-ui-version="v2"] .ant-tree .ant-tree-node-content-wrapper:hover { background: var(--gn-bg-hover) !important; } body[data-ui-version="v2"] .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected { background: var(--gn-bg-selected) !important; color: var(--gn-fg-1) !important; font-weight: 400; } /* table names — mono */ body[data-ui-version="v2"] .ant-tree .ant-tree-title { font-family: var(--gn-font-sans); } body[data-ui-version="v2"] .ant-tree .ant-tree-iconEle .anticon-table, body[data-ui-version="v2"] .ant-tree .ant-tree-iconEle .anticon-eye, body[data-ui-version="v2"] .ant-tree .ant-tree-iconEle .anticon-function { color: var(--gn-accent); } body[data-ui-version="v2"] .ant-tree .ant-tree-iconEle .anticon-database { color: var(--gn-info); } body[data-ui-version="v2"] .ant-tree-switcher { color: var(--gn-fg-4) !important; } /* ─── Buttons ──────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-btn { font-weight: 500; border-radius: 7px !important; height: 30px !important; padding: 0 12px !important; box-shadow: none !important; border-color: var(--gn-br-2) !important; transition: background 0.08s, border-color 0.08s !important; } body[data-ui-version="v2"] .ant-btn-sm { height: 24px !important; padding: 0 8px !important; font-size: 12px !important; } body[data-ui-version="v2"] .ant-btn-default { background: var(--gn-bg-panel) !important; color: var(--gn-fg-2) !important; } body[data-ui-version="v2"] .ant-btn-default:hover { background: var(--gn-bg-hover) !important; border-color: var(--gn-br-3) !important; color: var(--gn-fg-1) !important; } body[data-ui-version="v2"] .ant-btn-primary { background: var(--gn-accent) !important; border-color: var(--gn-accent-2) !important; color: #fff !important; font-weight: 600 !important; box-shadow: var(--gn-shadow-sm), inset 0 0.5px 0 rgba(255,255,255,0.15) !important; } body[data-ui-version="v2"] .ant-btn-primary:hover { background: var(--gn-accent-2) !important; border-color: var(--gn-accent-2) !important; } /* 查询工具栏「保存」:与「运行」同款实心饱满,色值用蓝色 */ body[data-ui-version="v2"] .gn-v2-query-toolbar-save-action.ant-btn-primary { background: #2563eb !important; border-color: #1d4ed8 !important; color: #fff !important; font-weight: 600 !important; box-shadow: var(--gn-shadow-sm), inset 0 0.5px 0 rgba(255, 255, 255, 0.18) !important; } body[data-ui-version="v2"] .gn-v2-query-toolbar-save-action.ant-btn-primary:hover { background: #1d4ed8 !important; border-color: #1e40af !important; color: #fff !important; } body[data-ui-version="v2"] .gn-v2-query-toolbar-save-action.ant-btn-primary:active { background: #1e40af !important; border-color: #1e3a8a !important; } body[data-ui-version="v2"] .ant-btn-primary:disabled { background: var(--gn-bg-active) !important; border-color: var(--gn-br-2) !important; color: var(--gn-fg-5) !important; } body[data-ui-version="v2"] .ant-btn-dangerous { color: var(--gn-danger) !important; } body[data-ui-version="v2"] .ant-btn-primary.ant-btn-dangerous:not(:disabled):not(.ant-btn-disabled) { background: var(--gn-danger-strong) !important; border-color: var(--gn-danger-strong) !important; color: #fff !important; } body[data-ui-version="v2"] .ant-btn-primary.ant-btn-dangerous:not(:disabled):not(.ant-btn-disabled):hover { background: var(--gn-danger-strong-hover) !important; border-color: var(--gn-danger-strong-hover) !important; color: #fff !important; } body[data-ui-version="v2"] .ant-btn-link { color: var(--gn-info) !important; } body[data-ui-version="v2"] .ant-btn-text { color: var(--gn-fg-3) !important; } body[data-ui-version="v2"] .ant-btn-text:hover { background: var(--gn-bg-hover) !important; color: var(--gn-fg-1) !important; } /* ─── Inputs ──────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-input, body[data-ui-version="v2"] .ant-input-affix-wrapper, body[data-ui-version="v2"] .ant-input-number, body[data-ui-version="v2"] .ant-select-selector, body[data-ui-version="v2"] .ant-picker { background: var(--gn-bg-input) !important; border-color: var(--gn-br-2) !important; border-radius: 7px !important; color: var(--gn-fg-1) !important; box-shadow: none !important; transition: border-color 0.08s, background 0.08s !important; } body[data-ui-version="v2"] .ant-input::placeholder, body[data-ui-version="v2"] .ant-input-affix-wrapper input::placeholder { color: var(--gn-fg-5) !important; } body[data-ui-version="v2"] .ant-input:focus, body[data-ui-version="v2"] .ant-input-affix-wrapper-focused, body[data-ui-version="v2"] .ant-input-number-focused, body[data-ui-version="v2"] .ant-select-focused .ant-select-selector, body[data-ui-version="v2"] .ant-picker-focused { border-color: var(--gn-info) !important; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12) !important; } body[data-ui-version="v2"] .ant-input-search-button { background: var(--gn-accent) !important; border-color: var(--gn-accent-2) !important; color: #fff !important; } /* ─── Select dropdown ─────────────────────────────────── */ body[data-ui-version="v2"] .ant-select-dropdown, body[data-ui-version="v2"] .ant-dropdown-menu, body[data-ui-version="v2"] .ant-picker-dropdown .ant-picker-panel-container { background: var(--gn-bg-panel) !important; border: 0.5px solid var(--gn-br-2) !important; border-radius: 10px !important; box-shadow: var(--gn-shadow-lg) !important; padding: 4px !important; } body[data-ui-version="v2"] .ant-dropdown-menu-item, body[data-ui-version="v2"] .ant-select-item { border-radius: 6px !important; padding: 6px 10px !important; color: var(--gn-fg-1) !important; min-height: 28px !important; font-size: 12.5px !important; } body[data-ui-version="v2"] .ant-dropdown-menu-item:hover, body[data-ui-version="v2"] .ant-select-item-option-active:not(.ant-select-item-option-disabled) { background: var(--gn-bg-active) !important; } body[data-ui-version="v2"] .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { background: var(--gn-bg-selected) !important; color: var(--gn-fg-1) !important; font-weight: 600 !important; } body[data-ui-version="v2"] .ant-dropdown-menu-item-divider { background: var(--gn-br-1) !important; margin: 4px 0 !important; } /* Right-click menu items get a tighter, sectioned look */ body[data-ui-version="v2"] .ant-dropdown-menu-item-icon { color: var(--gn-fg-4); margin-right: 8px !important; } body[data-ui-version="v2"] .ant-dropdown-menu-item-danger { color: var(--gn-danger) !important; } body[data-ui-version="v2"] .ant-dropdown-menu-item-danger:hover { background: rgba(220, 38, 38, 0.08) !important; } body[data-ui-version="v2"] .ant-dropdown-menu-submenu-title { border-radius: 6px !important; padding: 6px 10px !important; font-size: 12.5px !important; } /* ─── Tables (ant-table, used by some legacy panes) ────── */ body[data-ui-version="v2"] .ant-table { background: var(--gn-bg-panel) !important; color: var(--gn-fg-1); } body[data-ui-version="v2"] .ant-table-thead > tr > th { background: var(--gn-bg-panel-2) !important; color: var(--gn-fg-3) !important; font-weight: 600 !important; font-size: 11.5px !important; border-bottom: 0.5px solid var(--gn-br-2) !important; padding: 8px 12px !important; } body[data-ui-version="v2"] .ant-table-tbody > tr > td { border-bottom: 0.5px solid var(--gn-br-1) !important; padding: 6px 12px !important; font-size: 12px; } body[data-ui-version="v2"] .ant-table-tbody > tr:hover > td { background: var(--gn-bg-hover) !important; } body[data-ui-version="v2"] .ant-table-tbody > tr.ant-table-row-selected > td, body[data-ui-version="v2"] .ant-table-tbody .ant-table-row.ant-table-row-selected > .ant-table-cell, body[data-ui-version="v2"] .ant-table-tbody-virtual .ant-table-row.ant-table-row-selected > .ant-table-cell, body[data-ui-version="v2"] .ant-table-tbody-virtual-holder .ant-table-row.ant-table-row-selected > .ant-table-cell, body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-row.ant-table-row-selected > .ant-table-cell { background: var(--gn-bg-selected) !important; background-color: var(--gn-bg-selected) !important; background-image: none !important; } body[data-ui-version="v2"] .ant-table-tbody > tr.ant-table-row-selected:hover > td, body[data-ui-version="v2"] .ant-table-tbody .ant-table-row.ant-table-row-selected:hover > .ant-table-cell, body[data-ui-version="v2"] .ant-table-tbody-virtual .ant-table-row.ant-table-row-selected:hover > .ant-table-cell, body[data-ui-version="v2"] .ant-table-tbody-virtual-holder .ant-table-row.ant-table-row-selected:hover > .ant-table-cell, body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-row.ant-table-row-selected:hover > .ant-table-cell { background: var(--gn-bg-selected) !important; background-color: var(--gn-bg-selected) !important; background-image: none !important; } /* ─── Tags / Badges ────────────────────────────────────── */ body[data-ui-version="v2"] .ant-tag { font-family: var(--gn-font-sans); font-size: var(--gn-font-size-xs, 10px) !important; font-weight: 600; padding: 1px 6px !important; border-radius: 4px !important; line-height: 16px !important; border: none !important; letter-spacing: 0; } body[data-ui-version="v2"] .ant-tag-success, body[data-ui-version="v2"] .ant-tag-green { background: var(--gn-accent-soft) !important; color: var(--gn-accent-2) !important; } body[data-ui-version="v2"] .ant-tag-processing, body[data-ui-version="v2"] .ant-tag-blue { background: var(--gn-info-soft) !important; color: var(--gn-info) !important; } body[data-ui-version="v2"] .ant-tag-warning, body[data-ui-version="v2"] .ant-tag-orange, body[data-ui-version="v2"] .ant-tag-gold { background: var(--gn-warn-soft) !important; color: var(--gn-warn) !important; } body[data-ui-version="v2"] .ant-tag-error, body[data-ui-version="v2"] .ant-tag-red { background: rgba(220, 38, 38, 0.10) !important; color: var(--gn-danger) !important; } /* ─── Switch ──────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-switch-checked { background: var(--gn-accent) !important; } /* ─── Modal ───────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-modal .ant-modal-content { background: var(--gn-bg-panel) !important; border-radius: 14px !important; box-shadow: var(--gn-shadow-lg) !important; border: 0.5px solid var(--gn-br-2) !important; padding: 0 !important; overflow: hidden; } body[data-ui-version="v2"] .ant-modal .ant-modal-header { background: var(--gn-bg-panel-2) !important; border-bottom: 0.5px solid var(--gn-br-1) !important; padding: 12px 18px !important; margin: 0 !important; } body[data-ui-version="v2"] .ant-modal .ant-modal-title { font-size: 14px !important; font-weight: 600 !important; color: var(--gn-fg-1) !important; } body[data-ui-version="v2"] .ant-modal .ant-modal-body { padding: 18px !important; } body[data-ui-version="v2"] .ant-modal-confirm .ant-modal-confirm-title { color: var(--gn-fg-1) !important; } body[data-ui-version="v2"] .ant-modal-confirm .ant-modal-confirm-content { color: var(--gn-fg-2) !important; } body[data-ui-version="v2"] .ant-modal .ant-modal-footer { border-top: 0.5px solid var(--gn-br-1) !important; padding: 10px 18px !important; margin: 0 !important; } /* ─── Tooltip ─────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-tooltip-inner { background: var(--gn-bg-panel) !important; color: var(--gn-fg-1) !important; border: 0.5px solid var(--gn-br-2) !important; border-radius: 7px !important; box-shadow: var(--gn-shadow-md) !important; font-size: 11.5px !important; padding: 5px 8px !important; } body[data-ui-version="v2"] .ant-tooltip-arrow::before { background: var(--gn-bg-panel) !important; } /* ─── Badge ───────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-badge-status-dot { width: 7px; height: 7px; } body[data-ui-version="v2"] .ant-badge-status-success { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); } /* ─── Segmented (used in some places like density picker) ─ */ body[data-ui-version="v2"] .ant-segmented { background: var(--gn-bg-active) !important; padding: 2px !important; border-radius: 7px !important; } body[data-ui-version="v2"] .ant-segmented .ant-segmented-item { border-radius: 5px !important; color: var(--gn-fg-4) !important; font-weight: 500 !important; transition: color 0.08s !important; } body[data-ui-version="v2"] .ant-segmented .ant-segmented-item-selected, body[data-ui-version="v2"] .ant-segmented .ant-segmented-thumb { background: var(--gn-bg-panel) !important; color: var(--gn-fg-1) !important; box-shadow: var(--gn-shadow-sm) !important; } /* ─── Scrollbars ──────────────────────────────────────── */ body[data-ui-version="v2"] ::-webkit-scrollbar { width: 10px; height: 10px; } body[data-ui-version="v2"] ::-webkit-scrollbar-track { background: transparent; } body[data-ui-version="v2"] ::-webkit-scrollbar-thumb { background: var(--gn-br-3); border: 3px solid transparent; background-clip: content-box; border-radius: 10px; } body[data-ui-version="v2"] ::-webkit-scrollbar-thumb:hover { background: var(--gn-fg-5); border: 3px solid transparent; background-clip: content-box; } /* ─── DataGrid (project's internal class names) ────────── */ body[data-ui-version="v2"] [class*="data-grid"] thead, body[data-ui-version="v2"] [class*="dataGrid"] thead, body[data-ui-version="v2"] .gonavi-datagrid thead { background: var(--gn-bg-panel-2) !important; } body[data-ui-version="v2"] [class*="data-grid"] th, body[data-ui-version="v2"] [class*="dataGrid"] th { border-bottom: 0.5px solid var(--gn-br-2) !important; font-weight: 600 !important; color: var(--gn-fg-2) !important; font-size: var(--gn-data-table-font-size, var(--gn-font-size-mono, 12px)) !important; } /* monospace cells in data grid */ body[data-ui-version="v2"] [class*="data-grid"] td, body[data-ui-version="v2"] [class*="dataGrid"] td { font-family: var(--gn-font-mono) !important; font-size: var(--gn-data-table-font-size, var(--gn-font-size-mono, 12px)) !important; border-bottom: 0.5px solid var(--gn-br-1) !important; color: var(--gn-fg-1) !important; } body[data-ui-version="v2"] .gn-v2-data-grid-fields-view, body[data-ui-version="v2"] .gn-v2-data-grid-ddl-view, body[data-ui-version="v2"] .gn-v2-data-grid-er-view { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--gn-bg-panel); } body[data-ui-version="v2"] .gn-v2-data-grid-fields-view { display: flex; flex-direction: column; } body[data-ui-version="v2"] .gn-v2-data-grid-fields-head, body[data-ui-version="v2"] .gn-v2-data-grid-alt-toolbar { min-height: 42px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 0.5px solid var(--gn-br-1); background: var(--gn-bg-panel-2); } body[data-ui-version="v2"] .gn-v2-data-grid-fields-head > div, body[data-ui-version="v2"] .gn-v2-data-grid-alt-toolbar > div { min-width: 0; display: inline-flex; align-items: center; gap: 8px; } body[data-ui-version="v2"] .gn-v2-data-grid-fields-head > div:first-child, body[data-ui-version="v2"] .gn-v2-data-grid-alt-toolbar > div:first-child { flex-direction: column; align-items: flex-start; gap: 1px; } body[data-ui-version="v2"] .gn-v2-data-grid-fields-head span, body[data-ui-version="v2"] .gn-v2-data-grid-alt-toolbar span { color: var(--gn-fg-5); font-family: var(--gn-font-sans); font-size: 10.5px; font-weight: 650; } body[data-ui-version="v2"] .gn-v2-data-grid-fields-head strong, body[data-ui-version="v2"] .gn-v2-data-grid-alt-toolbar strong { max-width: 520px; overflow: hidden; color: var(--gn-fg-1); font-family: var(--gn-font-sans); font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-data-grid-fields-table { min-width: 920px; padding: 6px 0; } body[data-ui-version="v2"] .gn-v2-data-grid-fields-row { display: grid; grid-template-columns: 44px minmax(180px, 1.2fr) minmax(140px, 0.9fr) 72px 76px minmax(100px, 0.7fr) minmax(240px, 1.5fr); align-items: center; min-height: 34px; border-bottom: 0.5px solid var(--gn-br-1); } body[data-ui-version="v2"] .gn-v2-data-grid-fields-row.is-head { position: sticky; top: 0; z-index: 1; min-height: 30px; background: var(--gn-bg-panel-2); } body[data-ui-version="v2"] .gn-v2-data-grid-fields-row > span { min-width: 0; padding: 6px 10px; overflow: hidden; color: var(--gn-fg-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-data-grid-fields-row.is-head > span { color: var(--gn-fg-5); font-family: var(--gn-font-mono); font-size: 10.5px; font-weight: 750; } body[data-ui-version="v2"] .gn-v2-data-grid-field-name, body[data-ui-version="v2"] .gn-v2-data-grid-field-type, body[data-ui-version="v2"] .gn-v2-data-grid-fields-row > span:nth-child(1), body[data-ui-version="v2"] .gn-v2-data-grid-fields-row > span:nth-child(4), body[data-ui-version="v2"] .gn-v2-data-grid-fields-row > span:nth-child(5), body[data-ui-version="v2"] .gn-v2-data-grid-fields-row > span:nth-child(6) { font-family: var(--gn-font-mono); } body[data-ui-version="v2"] .gn-v2-data-grid-field-name { color: var(--gn-fg-1) !important; font-weight: 700; } body[data-ui-version="v2"] .gn-v2-data-grid-field-type { color: var(--gn-info) !important; } body[data-ui-version="v2"] .gn-v2-data-grid-fields-row em { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--gn-warn-soft); color: var(--gn-warn); font-family: var(--gn-font-mono); font-size: 10px; font-style: normal; font-weight: 800; } body[data-ui-version="v2"] .gn-v2-data-grid-ddl-view { display: flex; flex-direction: column; } body[data-ui-version="v2"] .gn-v2-data-grid-split-workspace { flex: 1 1 auto; min-width: 0; min-height: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 8px var(--gn-v2-ddl-sidebar-width, 420px); background: var(--gn-bg-panel); } body[data-ui-version="v2"] .gn-v2-data-grid-split-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } body[data-ui-version="v2"] .gn-v2-data-grid-ddl-sidebar { width: var(--gn-v2-ddl-sidebar-width, 420px); min-width: 320px; min-height: 0; display: flex; flex-direction: column; background: var(--gn-bg-panel); overflow: hidden; } body[data-ui-version="v2"] .gn-v2-data-grid-ddl-resizer { position: relative; z-index: 5; width: 8px; min-width: 8px; cursor: col-resize; background: linear-gradient( 90deg, transparent 0, transparent 3px, var(--gn-br-1) 3px, var(--gn-br-1) 4px, transparent 4px, transparent 100% ); touch-action: none; } body[data-ui-version="v2"] .gn-v2-data-grid-ddl-resizer::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2px; height: 42px; border-radius: 2px; background: var(--gn-br-2); opacity: 0; transform: translate(-50%, -50%); transition: opacity 120ms ease, background 120ms ease; } body[data-ui-version="v2"] .gn-v2-data-grid-ddl-resizer:hover::after { background: var(--gn-accent); opacity: 1; } body[data-ui-version="v2"] .gn-v2-data-grid-ddl-resize-preview { position: absolute; top: 0; bottom: 0; left: 0; z-index: 8; width: 2px; pointer-events: none; opacity: 0; background: var(--gn-accent); transform: translate3d(0, 0, 0); will-change: transform; } body[data-ui-version="v2"] .gn-v2-data-grid-ddl-view.is-side { width: 100%; height: 100%; border-radius: 0; overflow: hidden; } body[data-ui-version="v2"] .gn-v2-data-grid-ddl-view.is-side .gn-v2-data-grid-alt-toolbar { min-height: 46px; align-items: center; gap: 8px; padding: 7px 10px; } body[data-ui-version="v2"] .gn-v2-data-grid-ddl-view.is-side .gn-v2-data-grid-ddl-title { flex: 1 1 72px; overflow: hidden; } body[data-ui-version="v2"] .gn-v2-data-grid-ddl-view.is-side .gn-v2-data-grid-ddl-actions { justify-content: flex-end; flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-data-grid-ddl-view.is-side .gn-v2-data-grid-ddl-actions .ant-btn-sm { padding-inline: 7px; } body[data-ui-version="v2"] .gn-v2-data-grid-ddl-view.is-side .gn-v2-data-grid-ddl-actions .ant-segmented-small .ant-segmented-item-label { padding-inline: 8px; } body[data-ui-version="v2"] .gn-v2-data-grid-ddl-view.is-side .gn-v2-data-grid-alt-toolbar strong { max-width: 150px; } body[data-ui-version="v2"] .gn-v2-data-grid-ddl-code { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0; } body[data-ui-version="v2"] .gn-v2-data-grid-alt-empty { padding: 28px 16px; color: var(--gn-fg-5); font-size: 12.5px; text-align: center; } body[data-ui-version="v2"] .gn-v2-data-grid-er-view { padding: 34px; display: grid; grid-template-columns: minmax(220px, 0.75fr) 88px minmax(240px, 1fr); align-items: center; gap: 8px; } body[data-ui-version="v2"] .gn-v2-data-grid-er-node { min-width: 0; padding: 13px 14px; border: 0.5px solid var(--gn-br-2); border-radius: 8px; background: var(--gn-bg-panel-2); box-shadow: var(--gn-shadow-sm); } body[data-ui-version="v2"] .gn-v2-data-grid-er-node.is-main { border-color: color-mix(in srgb, var(--gn-accent) 38%, var(--gn-br-2)); background: var(--gn-accent-soft); } body[data-ui-version="v2"] .gn-v2-data-grid-er-node span { display: block; color: var(--gn-fg-5); font-family: var(--gn-font-mono); font-size: 10px; font-weight: 750; } body[data-ui-version="v2"] .gn-v2-data-grid-er-node strong { display: block; margin-top: 4px; overflow: hidden; color: var(--gn-fg-1); font-family: var(--gn-font-mono); font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-data-grid-er-node small { display: block; margin-top: 6px; color: var(--gn-fg-4); font-size: 11px; } body[data-ui-version="v2"] .gn-v2-data-grid-er-lines { display: flex; flex-direction: column; gap: 22px; } body[data-ui-version="v2"] .gn-v2-data-grid-er-lines span { height: 1px; background: linear-gradient(90deg, var(--gn-br-3), var(--gn-info)); } body[data-ui-version="v2"] .gn-v2-data-grid-er-side { display: flex; flex-direction: column; gap: 10px; } body[data-ui-version="v2"] .gn-v2-data-grid-er-diagram { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--gn-bg-panel); } body[data-ui-version="v2"] .gn-v2-data-grid-er-toolbar { min-height: 52px; padding: 10px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 0.5px solid var(--gn-br-1); background: var(--gn-bg-panel-2); } body[data-ui-version="v2"] .gn-v2-data-grid-er-toolbar > div { min-width: 0; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } body[data-ui-version="v2"] .gn-v2-data-grid-er-toolbar > div:first-child { flex-direction: column; align-items: flex-start; gap: 1px; } body[data-ui-version="v2"] .gn-v2-data-grid-er-toolbar span { color: var(--gn-fg-5); font-family: var(--gn-font-sans); font-size: 10.5px; font-weight: 650; } body[data-ui-version="v2"] .gn-v2-data-grid-er-toolbar strong { max-width: 520px; overflow: hidden; color: var(--gn-fg-1); font-family: var(--gn-font-sans); font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-data-grid-er-summary { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } body[data-ui-version="v2"] .gn-v2-data-grid-er-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } body[data-ui-version="v2"] .gn-v2-data-grid-er-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0.5px solid var(--gn-br-2); border-radius: 999px; background: var(--gn-bg-panel); color: var(--gn-fg-3); font-size: 12px; } body[data-ui-version="v2"] .gn-v2-data-grid-er-chip .anticon { color: var(--gn-accent); } body[data-ui-version="v2"] .gn-v2-data-grid-er-alert { padding: 10px 12px 0; background: var(--gn-bg-panel); } body[data-ui-version="v2"] .gn-v2-data-grid-er-canvas { position: relative; flex: 1 1 auto; min-height: 0; padding: 12px; background: var(--gn-bg-panel); } body[data-ui-version="v2"] .gn-v2-data-grid-er-canvas > .ant-spin-nested-loading, body[data-ui-version="v2"] .gn-v2-data-grid-er-canvas > .ant-spin-nested-loading > div, body[data-ui-version="v2"] .gn-v2-data-grid-er-canvas .ant-spin-container { height: 100%; } body[data-ui-version="v2"] .gn-v2-data-grid-er-empty { position: absolute; top: 18px; left: 50%; z-index: 5; transform: translateX(-50%); padding: 6px 10px; border: 0.5px solid color-mix(in srgb, var(--gn-accent) 18%, var(--gn-br-2)); border-radius: 999px; background: color-mix(in srgb, var(--gn-accent-soft) 72%, var(--gn-bg-panel-2)); color: var(--gn-fg-3); font-size: 12px; box-shadow: var(--gn-shadow-sm); } body[data-ui-version="v2"] .gn-v2-data-grid-er-placeholder { min-height: 320px; } body[data-ui-version="v2"] .gn-v2-data-grid-er-canvas .react-flow, body[data-ui-version="v2"] .gn-v2-data-grid-er-canvas .react-flow__renderer, body[data-ui-version="v2"] .gn-v2-data-grid-er-canvas .react-flow__viewport { background: transparent; } body[data-ui-version="v2"] .gn-v2-data-grid-er-canvas .react-flow__controls { border-radius: 8px; box-shadow: var(--gn-shadow-sm); } body[data-ui-version="v2"] .gn-er-node-card { width: 320px; overflow: hidden; border: 0.5px solid var(--gn-br-2); border-radius: 8px; background: var(--gn-bg-panel-2); box-shadow: var(--gn-shadow-sm); } body[data-ui-version="v2"] .gn-er-node-card.is-selected { border-color: color-mix(in srgb, var(--gn-accent) 56%, var(--gn-br-2)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gn-accent) 22%, transparent), var(--gn-shadow-sm); } body[data-ui-version="v2"] .gn-er-node-card.is-current { background: color-mix(in srgb, var(--gn-accent-soft) 68%, var(--gn-bg-panel-2)); } body[data-ui-version="v2"] .gn-er-node-header { padding: 12px 12px 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border-bottom: 0.5px solid var(--gn-br-1); cursor: grab; } body[data-ui-version="v2"] .gn-er-node-title { min-width: 0; } body[data-ui-version="v2"] .gn-er-node-title strong { display: block; overflow: hidden; color: var(--gn-fg-1); font-family: var(--gn-font-mono); font-size: 13px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-er-node-badge { display: inline-flex; align-items: center; height: 18px; margin-bottom: 6px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--gn-accent) 14%, var(--gn-bg-panel)); color: var(--gn-accent); font-size: 10px; font-weight: 700; } body[data-ui-version="v2"] .gn-er-node-open { color: var(--gn-fg-4); } body[data-ui-version="v2"] .gn-er-node-stats { display: flex; gap: 8px; padding: 8px 12px 0; } body[data-ui-version="v2"] .gn-er-node-stats span { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--gn-bg-panel); color: var(--gn-fg-4); font-size: 11px; font-weight: 600; } body[data-ui-version="v2"] .gn-er-node-columns { padding: 8px 0 6px; max-height: var(--er-node-columns-max-height); overflow: hidden; } body[data-ui-version="v2"] .gn-er-node-columns.is-scrollable { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } body[data-ui-version="v2"] .gn-er-node-column { min-height: 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 12px; } body[data-ui-version="v2"] .gn-er-node-column + .gn-er-node-column { border-top: 0.5px solid var(--gn-br-1); } body[data-ui-version="v2"] .gn-er-node-column.is-relation { background: color-mix(in srgb, var(--gn-accent-soft) 38%, transparent); } body[data-ui-version="v2"] .gn-er-node-column-name { min-width: 0; display: inline-flex; align-items: center; gap: 6px; } body[data-ui-version="v2"] .gn-er-node-column-name em { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; font-family: var(--gn-font-mono); font-size: 10px; font-style: normal; font-weight: 800; } body[data-ui-version="v2"] .gn-er-node-column-name em.is-pk { background: var(--gn-warn-soft); color: var(--gn-warn); } body[data-ui-version="v2"] .gn-er-node-column-name em.is-fk { background: color-mix(in srgb, var(--gn-info) 16%, var(--gn-bg-panel)); color: var(--gn-info); } body[data-ui-version="v2"] .gn-er-node-column-name code { min-width: 0; overflow: hidden; color: var(--gn-fg-1); font-family: var(--gn-font-mono); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-er-node-column-type { max-width: 112px; overflow: hidden; color: var(--gn-fg-5); font-family: var(--gn-font-mono); font-size: 10.5px; text-align: right; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-er-node-footer { padding: 6px 12px 12px; color: var(--gn-fg-5); font-size: 11px; } body[data-ui-version="v2"] .gn-er-node-footer-toggle { padding: 0; border: 0; background: transparent; color: var(--gn-accent); font-size: 11px; font-weight: 650; cursor: pointer; } body[data-ui-version="v2"] .gn-er-node-footer-toggle:hover { text-decoration: underline; } /* ─── AI Chat Panel hooks (project's class names) ──────── */ body[data-ui-version="v2"] .ai-chat-panel { background: var(--gn-bg-panel) !important; border-left: 0.5px solid var(--gn-br-1) !important; } body[data-ui-version="v2"] .ai-chat-panel input, body[data-ui-version="v2"] .ai-chat-panel textarea { background: var(--gn-bg-input) !important; border: 0.5px solid var(--gn-br-2) !important; border-radius: 9px !important; font-family: var(--gn-font-sans) !important; } /* AI accent button (send / 生成 SQL) */ body[data-ui-version="v2"] .ant-btn.ai-send, body[data-ui-version="v2"] [class*="AISend"] { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important; border-color: #0369a1 !important; color: #fff !important; } /* ─── Code / SQL editor surfaces ───────────────────────── */ body[data-ui-version="v2"] .monaco-editor, body[data-ui-version="v2"] .monaco-editor-background, body[data-ui-version="v2"] .monaco-editor .margin { background-color: var(--gn-bg-panel) !important; } body[data-ui-version="v2"] .monaco-editor, body[data-ui-version="v2"] .monaco-editor .margin, body[data-ui-version="v2"] .monaco-editor .view-lines, body[data-ui-version="v2"] .monaco-editor .view-line, body[data-ui-version="v2"] .monaco-editor textarea, body[data-ui-version="v2"] .monaco-editor .inputarea { font-family: var(--gn-font-mono) !important; } /* ─── Progress ────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-progress-bg { background: var(--gn-accent) !important; } body[data-ui-version="v2"] .ant-progress-success-bg { background: var(--gn-accent) !important; } /* ─── Divider ─────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-divider { border-color: var(--gn-br-1) !important; } /* ────────────────────────────────────────────────────────── Small additions — visual polish unique to v2 ────────────────────────────────────────────────────────── */ /* Brand-tinted active row indicator in sidebar */ body[data-ui-version="v2"] .gn-v2-object-explorer .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected::before { content: ''; position: absolute; left: -6px; top: 4px; bottom: 4px; width: 2px; background: var(--gn-accent); border-radius: 2px; } body[data-ui-version="v2"] .ant-tree .ant-tree-node-content-wrapper { position: relative; } /* Number-tabular for monospace stats / counts */ body[data-ui-version="v2"] .ant-statistic-content, body[data-ui-version="v2"] [class*="data-count"], body[data-ui-version="v2"] [class*="row-count"] { font-variant-numeric: tabular-nums; font-family: var(--gn-font-mono) !important; } /* Subtle inset highlight on the macOS-style traffic-light area + title */ body[data-ui-version="v2"][data-theme="light"] .ant-layout-header { box-shadow: inset 0 -0.5px 0 rgba(15, 23, 42, 0.05) !important; } body[data-ui-version="v2"][data-theme="dark"] .ant-layout-header { box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, 0.05) !important; } /* ─── Version indicator for v2 (purely cosmetic, added in settings) ─ */ body[data-ui-version="v2"] .gonavi-v2-version-ribbon { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0; padding: 1px 5px; background: var(--gn-info-soft); color: var(--gn-info); border-radius: 4px; } /* ══════════════════════════════════════════════════════════ EXTENDED COVERAGE — forms, deep modals, Redis viewer, etc. ══════════════════════════════════════════════════════════ */ /* ─── Form (新建连接、AI 设置 等) ──────────────────────── */ body[data-ui-version="v2"] .ant-form-item-label > label { color: var(--gn-fg-3) !important; font-size: 12.5px !important; font-weight: 500 !important; height: 26px !important; } body[data-ui-version="v2"] .ant-form-item-label > label.ant-form-item-required::before { color: var(--gn-danger) !important; } body[data-ui-version="v2"] .ant-form-item { margin-bottom: 14px !important; } body[data-ui-version="v2"] .ant-form-item-extra { font-size: 11px !important; color: var(--gn-fg-5) !important; padding-top: 4px !important; } body[data-ui-version="v2"] .ant-form-item-explain-error { font-size: 11.5px !important; color: var(--gn-danger) !important; } /* ─── Radio ───────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-radio-wrapper { color: var(--gn-fg-2) !important; font-size: 12.5px !important; } body[data-ui-version="v2"] .ant-radio-inner { border-color: var(--gn-br-3) !important; background: var(--gn-bg-input) !important; } body[data-ui-version="v2"] .ant-radio-checked .ant-radio-inner { border-color: var(--gn-accent) !important; background: var(--gn-accent) !important; } body[data-ui-version="v2"] .ant-radio-checked .ant-radio-inner::after { background: #fff !important; } body[data-ui-version="v2"] .ant-radio-button-wrapper { background: var(--gn-bg-panel) !important; border-color: var(--gn-br-2) !important; color: var(--gn-fg-2) !important; height: 28px !important; line-height: 26px !important; font-size: 12.5px !important; } body[data-ui-version="v2"] .ant-radio-button-wrapper:hover { color: var(--gn-fg-1) !important; } body[data-ui-version="v2"] .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { background: var(--gn-accent-soft) !important; border-color: var(--gn-accent) !important; color: var(--gn-accent-2) !important; font-weight: 600 !important; } /* ─── Checkbox ────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-checkbox-inner { border-color: var(--gn-br-3) !important; background: var(--gn-bg-input) !important; border-radius: 4px !important; } body[data-ui-version="v2"] .ant-checkbox-checked .ant-checkbox-inner { background: var(--gn-accent) !important; border-color: var(--gn-accent-2) !important; } body[data-ui-version="v2"] .ant-checkbox-wrapper { color: var(--gn-fg-2) !important; font-size: 12.5px !important; } body[data-ui-version="v2"] .ant-checkbox-indeterminate .ant-checkbox-inner::after { background-color: var(--gn-accent) !important; } /* ─── Slider ──────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-slider-rail { background: var(--gn-bg-active) !important; } body[data-ui-version="v2"] .ant-slider-track { background: var(--gn-accent) !important; } body[data-ui-version="v2"] .ant-slider-handle::after { box-shadow: 0 0 0 2px var(--gn-accent) !important; } body[data-ui-version="v2"] .ant-slider:hover .ant-slider-track { background: var(--gn-accent-2) !important; } /* ─── Steps (Modal multi-step flows) ──────────────────── */ body[data-ui-version="v2"] .ant-steps-item-process .ant-steps-item-icon { background: var(--gn-accent) !important; border-color: var(--gn-accent-2) !important; } body[data-ui-version="v2"] .ant-steps-item-finish .ant-steps-item-icon { background: var(--gn-accent-soft) !important; border-color: var(--gn-accent) !important; } body[data-ui-version="v2"] .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon { color: var(--gn-accent-2) !important; } body[data-ui-version="v2"] .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after { background-color: var(--gn-accent) !important; } body[data-ui-version="v2"] .ant-steps-item-title { font-size: 13px !important; font-weight: 600 !important; color: var(--gn-fg-1) !important; } /* ─── Drawer ──────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-drawer-content { background: var(--gn-bg-panel) !important; } body[data-ui-version="v2"] .ant-drawer-header { background: var(--gn-bg-panel-2) !important; border-bottom: 0.5px solid var(--gn-br-1) !important; padding: 12px 18px !important; } body[data-ui-version="v2"] .ant-drawer-title { font-size: 14px !important; font-weight: 600 !important; color: var(--gn-fg-1) !important; } body[data-ui-version="v2"] .ant-drawer-footer { border-top: 0.5px solid var(--gn-br-1) !important; background: var(--gn-bg-panel-2) !important; padding: 10px 18px !important; } /* ─── Collapse ────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-collapse { background: transparent !important; border: 0.5px solid var(--gn-br-1) !important; border-radius: 9px !important; overflow: hidden; } body[data-ui-version="v2"] .ant-collapse-item { border-bottom: 0.5px solid var(--gn-br-1) !important; } body[data-ui-version="v2"] .ant-collapse-item:last-child { border-bottom: 0 !important; } body[data-ui-version="v2"] .ant-collapse-header { background: var(--gn-bg-panel-2) !important; color: var(--gn-fg-1) !important; font-weight: 600 !important; padding: 10px 14px !important; } body[data-ui-version="v2"] .ant-collapse-content { background: var(--gn-bg-panel) !important; border-top: 0.5px solid var(--gn-br-1) !important; } body[data-ui-version="v2"] .ant-collapse-content-box { padding: 12px 14px !important; } /* ─── Card ────────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-card { background: var(--gn-bg-panel) !important; border: 0.5px solid var(--gn-br-1) !important; border-radius: 10px !important; box-shadow: var(--gn-shadow-card) !important; } body[data-ui-version="v2"] .ant-card-head { border-bottom: 0.5px solid var(--gn-br-1) !important; min-height: 38px !important; padding: 0 14px !important; } body[data-ui-version="v2"] .ant-card-head-title { font-size: 13px !important; font-weight: 600 !important; color: var(--gn-fg-1) !important; padding: 10px 0 !important; } body[data-ui-version="v2"] .ant-card-body { padding: 14px !important; } /* ─── Statistic / number readouts ─────────────────────── */ body[data-ui-version="v2"] .ant-statistic-title { font-size: 11px !important; color: var(--gn-fg-4) !important; letter-spacing: 0; text-transform: uppercase; font-weight: 600 !important; } body[data-ui-version="v2"] .ant-statistic-content { font-family: var(--gn-font-mono) !important; font-variant-numeric: tabular-nums; color: var(--gn-fg-1) !important; } /* ─── Empty ───────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-empty-description { color: var(--gn-fg-4) !important; font-size: 12.5px !important; } /* ─── Spin ────────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-spin-dot-item { background: var(--gn-accent) !important; } /* ─── Notification / Message ──────────────────────────── */ body[data-ui-version="v2"] .ant-message-notice-content, body[data-ui-version="v2"] .ant-notification-notice { background: var(--gn-bg-panel) !important; border: 0.5px solid var(--gn-br-2) !important; border-radius: 10px !important; box-shadow: var(--gn-shadow-lg) !important; color: var(--gn-fg-1) !important; } /* ─── Pagination ──────────────────────────────────────── */ body[data-ui-version="v2"] .ant-pagination-item { border-radius: 5px !important; border-color: var(--gn-br-2) !important; background: var(--gn-bg-panel) !important; font-family: var(--gn-font-mono) !important; } body[data-ui-version="v2"] .ant-pagination-item-active { border-color: var(--gn-accent) !important; background: var(--gn-accent-soft) !important; } body[data-ui-version="v2"] .ant-pagination-item-active a { color: var(--gn-accent-2) !important; } body[data-ui-version="v2"] .ant-pagination-prev .ant-pagination-item-link, body[data-ui-version="v2"] .ant-pagination-next .ant-pagination-item-link { border-radius: 5px !important; border-color: var(--gn-br-2) !important; background: var(--gn-bg-panel) !important; color: var(--gn-fg-3) !important; } /* ─── Alert / banners (security update etc.) ──────────── */ body[data-ui-version="v2"] .ant-alert { border-radius: 9px !important; border-width: 0.5px !important; padding: 10px 12px !important; } body[data-ui-version="v2"] .ant-alert-info { background: var(--gn-info-soft) !important; border-color: rgba(56, 189, 248, 0.3) !important; } body[data-ui-version="v2"] .ant-alert-success { background: var(--gn-accent-soft) !important; border-color: rgba(34, 197, 94, 0.3) !important; } body[data-ui-version="v2"] .ant-alert-warning { background: var(--gn-warn-soft) !important; border-color: rgba(245, 158, 11, 0.3) !important; } /* ─── Tabs inside Modal/Drawer (smaller, no extra chrome) ─ */ body[data-ui-version="v2"] .ant-modal .ant-tabs > .ant-tabs-nav, body[data-ui-version="v2"] .ant-drawer .ant-tabs > .ant-tabs-nav { background: transparent !important; margin-bottom: 12px !important; } body[data-ui-version="v2"] .ant-modal .ant-tabs-tab, body[data-ui-version="v2"] .ant-drawer .ant-tabs-tab { background: transparent !important; border: none !important; padding: 6px 12px !important; } body[data-ui-version="v2"] .ant-modal .ant-tabs-tab-active::after, body[data-ui-version="v2"] .ant-drawer .ant-tabs-tab-active::after { display: none !important; } body[data-ui-version="v2"] .ant-modal .ant-tabs-ink-bar, body[data-ui-version="v2"] .ant-drawer .ant-tabs-ink-bar { display: block !important; background: var(--gn-accent) !important; height: 2px !important; } /* ─── Tree-select / Cascader ──────────────────────────── */ body[data-ui-version="v2"] .ant-tree-select-dropdown, body[data-ui-version="v2"] .ant-cascader-dropdown { background: var(--gn-bg-panel) !important; border: 0.5px solid var(--gn-br-2) !important; border-radius: 10px !important; box-shadow: var(--gn-shadow-lg) !important; } /* ─── Popover ─────────────────────────────────────────── */ body[data-ui-version="v2"] .ant-popover-inner { background: var(--gn-bg-panel) !important; border: 0.5px solid var(--gn-br-2) !important; border-radius: 10px !important; box-shadow: var(--gn-shadow-lg) !important; } body[data-ui-version="v2"] .ant-popover-title { border-bottom: 0.5px solid var(--gn-br-1) !important; font-size: 12.5px !important; font-weight: 600 !important; } /* ─── Connection modal special touches ────────────────── */ /* The form preset cards usually use bordered divs, give them our card style */ body[data-ui-version="v2"] [class*="preset-card"], body[data-ui-version="v2"] [class*="connection-preset"] { background: var(--gn-bg-panel) !important; border: 0.5px solid var(--gn-br-2) !important; border-radius: 10px !important; box-shadow: var(--gn-shadow-card) !important; transition: border-color 0.08s, box-shadow 0.08s !important; } body[data-ui-version="v2"] [class*="preset-card"]:hover { border-color: var(--gn-accent) !important; box-shadow: 0 0 0 1px var(--gn-accent), var(--gn-shadow-md) !important; } /* ─── Settings center utility panels ──────────────────── */ /* The settings modal uses inline-styled panels — we can't override those, but anything wrapped in `.ant-modal-body > div` benefits from these resets. */ body[data-ui-version="v2"] .ant-modal-body input[type="text"], body[data-ui-version="v2"] .ant-modal-body input[type="number"] { background: var(--gn-bg-input) !important; border-color: var(--gn-br-2) !important; border-radius: 7px !important; } /* ─── Redis viewer / Driver manager / overlay workbench ─── */ /* These render their cards via inline styles read from workbenchTheme objects (see overlayWorkbenchTheme.ts, redisViewerWorkbenchTheme.ts, driverManagerWorkbenchTheme.ts). Those files now branch on uiVersion and supply v2 colors directly. The hooks below tighten edges that inline styles can't reach. */ body[data-ui-version="v2"] .redis-viewer-workbench { background: var(--gn-bg-app) !important; /* the inner cards still read workbenchTheme — those return v2 palette once the workbench theme files honor uiVersion */ } body[data-ui-version="v2"] .redis-tree-expander-button:hover { background: var(--gn-bg-hover) !important; } /* class-based selectors for Tree inside Redis viewer — tighten paddings */ body[data-ui-version="v2"] .redis-viewer-workbench .ant-tree-node-content-wrapper { padding: 2px 8px !important; } /* ─── Logo / brand chip (a generic helper for v2 places) ─ */ body[data-ui-version="v2"] .gonavi-v2-brand-chip { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, var(--gn-accent) 0%, var(--gn-accent-2) 100%); color: var(--gn-on-accent, #fff); display: inline-flex; align-items: center; justify-content: center; font-family: var(--gn-font-mono); font-weight: 800; font-size: 10px; letter-spacing: 0; box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(15,23,42,0.18); } /* ─── Hide / soften legacy chrome that clashes with v2 ─── */ /* Antd's default Tabs add-icon area can look heavy — soften it */ body[data-ui-version="v2"] .ant-tabs-nav-add { border-radius: 6px !important; width: 28px !important; height: 28px !important; } /* ─── Final: minor pixel hygiene ──────────────────────── */ body[data-ui-version="v2"] .ant-divider-horizontal { margin: 12px 0 !important; } body[data-ui-version="v2"] .ant-typography { color: var(--gn-fg-1); } body[data-ui-version="v2"] h1.ant-typography, body[data-ui-version="v2"] h2.ant-typography, body[data-ui-version="v2"] h3.ant-typography, body[data-ui-version="v2"] h4.ant-typography { letter-spacing: 0; } /* ─── V2 structural shell: redesigned sidebar / workbench ─ */ body[data-ui-version="v2"] .gn-v2-sidebar-shell { background: var(--gn-bg-panel-2); } body[data-ui-version="v2"] .gn-v2-app-sider { min-width: 232px !important; max-width: min(960px, calc(100vw - 360px)) !important; } body[data-ui-version="v2"] .gn-v2-sidebar-redesign { --gn-v2-rail-scale: calc(var(--gn-ui-scale, 1) * var(--gn-sidebar-rail-scale, 1)); width: 100%; background: var(--gn-bg-panel-2); border-right: 0.5px solid var(--gn-br-1); overflow: hidden; } body[data-ui-version="v2"] .gn-v2-connection-rail { width: calc(38px * var(--gn-v2-rail-scale)); flex: 0 0 calc(38px * var(--gn-v2-rail-scale)); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: calc(4px * var(--gn-v2-rail-scale)); padding: calc(8px * var(--gn-v2-rail-scale)) 0; border-right: 0.5px solid var(--gn-br-1); background: transparent; } body[data-ui-version="v2"] .gn-v2-rail-items { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--gn-v2-rail-scale)); width: 100%; box-sizing: border-box; padding-top: calc(4px * var(--gn-v2-rail-scale)); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--gn-accent) 45%, transparent) transparent; } body[data-ui-version="v2"] .gn-v2-rail-items::-webkit-scrollbar { width: 5px; } body[data-ui-version="v2"] .gn-v2-rail-items::-webkit-scrollbar-thumb { border-radius: 999px; background: color-mix(in srgb, var(--gn-accent) 38%, transparent); } body[data-ui-version="v2"] .gn-v2-rail-group { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--gn-v2-rail-scale)); } body[data-ui-version="v2"] .gn-v2-rail-group + .gn-v2-rail-group { padding-top: calc(5px * var(--gn-v2-rail-scale)); border-top: 0.5px solid var(--gn-br-1); } body[data-ui-version="v2"] .gn-v2-rail-group-header { position: relative; width: 100%; min-height: calc(24px * var(--gn-v2-rail-scale)); overflow: visible; border: none; border-radius: 0; display: flex; align-items: center; justify-content: flex-start; gap: calc(4px * var(--gn-v2-rail-scale)); padding: 0 calc(4px * var(--gn-v2-rail-scale)) 0 calc(6px * var(--gn-v2-rail-scale)); background: transparent; color: var(--gn-fg-5); box-shadow: none; } body[data-ui-version="v2"] .gn-v2-rail-group-header:hover { background: transparent; color: var(--gn-fg-3); } body[data-ui-version="v2"] .gn-v2-rail-group-chevron { position: static; display: inline-flex; color: var(--gn-fg-5); font-size: calc(9px * var(--gn-v2-rail-scale)); line-height: 1; transform: rotate(0deg); transition: transform 120ms ease; } body[data-ui-version="v2"] .gn-v2-rail-group.is-collapsed .gn-v2-rail-group-chevron { transform: rotate(-90deg); } body[data-ui-version="v2"] .gn-v2-rail-group-title { min-width: 0; color: var(--gn-fg-4); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body[data-ui-version="v2"] .gn-v2-rail-group-count { position: absolute; top: -1px; right: -1px; min-width: calc(16px * var(--gn-v2-rail-scale)); height: calc(16px * var(--gn-v2-rail-scale)); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 calc(4px * var(--gn-v2-rail-scale)); border: 2px solid var(--gn-bg-panel-2); background: var(--gn-accent); color: var(--gn-on-accent, #fff); font-family: var(--gn-font-mono); font-size: calc(9px * var(--gn-v2-rail-scale)); font-weight: 800; line-height: 1; } body[data-ui-version="v2"] .gn-v2-rail-group-items { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--gn-v2-rail-scale)); } body[data-ui-version="v2"] .gn-v2-rail-primary-actions, body[data-ui-version="v2"] .gn-v2-rail-secondary-actions { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--gn-v2-rail-scale)); } body[data-ui-version="v2"] .gn-v2-rail-primary-actions { padding-top: calc(4px * var(--gn-v2-rail-scale)); } body[data-ui-version="v2"] .gn-v2-rail-secondary-actions { margin-top: auto; padding-bottom: calc(4px * var(--gn-v2-rail-scale)); } body[data-ui-version="v2"] .gn-v2-rail-action-group, body[data-ui-version="v2"] .gn-v2-rail-system-actions { display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--gn-v2-rail-scale)); } body[data-ui-version="v2"] .gn-v2-rail-action-group { padding-bottom: calc(6px * var(--gn-v2-rail-scale)); border-bottom: 0.5px solid var(--gn-br-1); } body[data-ui-version="v2"] .gn-v2-rail-action-wrap { display: inline-flex; } body[data-ui-version="v2"] .gn-v2-rail-action { color: var(--gn-fg-3); } body[data-ui-version="v2"] .gn-v2-rail-action:disabled { opacity: 0.42; color: var(--gn-fg-5); cursor: not-allowed; } body[data-ui-version="v2"] .gn-v2-rail-item, body[data-ui-version="v2"] .gn-v2-rail-tool { position: relative; width: calc(36px * var(--gn-v2-rail-scale)); height: calc(38px * var(--gn-v2-rail-scale)); border-radius: calc(9px * var(--gn-v2-rail-scale)); border: none; background: transparent; color: var(--gn-fg-4); font-size: calc(var(--gn-font-size-sm, 12px) * var(--gn-sidebar-rail-scale, 1)); display: flex; align-items: center; justify-content: center; gap: 0; padding: 0; } body[data-ui-version="v2"] .gn-v2-rail-tool { width: calc(24px * var(--gn-v2-rail-scale)); height: calc(32px * var(--gn-v2-rail-scale)); border-radius: calc(8px * var(--gn-v2-rail-scale)); justify-content: center; padding: 0; } body[data-ui-version="v2"] .gn-v2-rail-item:hover, body[data-ui-version="v2"] .gn-v2-rail-tool:hover { background: var(--gn-bg-hover); } body[data-ui-version="v2"] .gn-v2-rail-item.is-active { background: var(--gn-bg-active); box-shadow: inset 0 0 0 0.5px var(--gn-br-1); } body[data-ui-version="v2"] .gn-v2-rail-active-bar { display: none; position: absolute; left: calc(-8px * var(--gn-v2-rail-scale)); top: calc(7px * var(--gn-v2-rail-scale)); bottom: calc(7px * var(--gn-v2-rail-scale)); width: calc(3px * var(--gn-v2-rail-scale)); border-radius: calc(3px * var(--gn-v2-rail-scale)); background: var(--gn-accent); } body[data-ui-version="v2"] .gn-v2-rail-item.is-active .gn-v2-rail-active-bar { display: block; } body[data-ui-version="v2"] .gn-v2-rail-icon { display: flex; width: calc(24px * var(--gn-v2-rail-scale)); height: calc(24px * var(--gn-v2-rail-scale)); align-items: center; justify-content: center; } body[data-ui-version="v2"] .gn-v2-rail-badge { width: calc(22px * var(--gn-v2-rail-scale)); height: calc(22px * var(--gn-v2-rail-scale)); border-radius: calc(6px * var(--gn-v2-rail-scale)); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--gn-font-mono); font-size: calc(9.5px * var(--gn-sidebar-rail-scale, 1)); font-weight: 800; line-height: 1; box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.3), 0 0.5px 1px rgba(0,0,0,0.2); letter-spacing: 0; } body[data-ui-version="v2"] .gn-v2-rail-badge-wrap { position: relative; width: calc(22px * var(--gn-v2-rail-scale)); height: calc(22px * var(--gn-v2-rail-scale)); flex: 0 0 calc(22px * var(--gn-v2-rail-scale)); } body[data-ui-version="v2"] .gn-v2-rail-fallback { display: none; } body[data-ui-version="v2"] .gn-v2-rail-status { position: absolute; right: calc(-2px * var(--gn-v2-rail-scale)); bottom: calc(-2px * var(--gn-v2-rail-scale)); width: calc(8px * var(--gn-v2-rail-scale)); height: calc(8px * var(--gn-v2-rail-scale)); border-radius: 50%; border: calc(1.5px * var(--gn-sidebar-rail-scale, 1)) solid var(--gn-bg-panel); background: var(--gn-fg-5); } body[data-ui-version="v2"] .gn-v2-rail-status.is-live { background: var(--gn-accent); } body[data-ui-version="v2"] .gn-v2-rail-status.is-error { background: var(--gn-danger); } body[data-ui-version="v2"] .gn-v2-rail-create-button { margin-top: calc(4px * var(--gn-v2-rail-scale)); width: calc(40px * var(--gn-v2-rail-scale)); height: calc(40px * var(--gn-v2-rail-scale)); border: 1px dashed var(--gn-br-2); border-radius: calc(14px * var(--gn-v2-rail-scale)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6px * var(--gn-v2-rail-scale)); padding: 0; color: var(--gn-fg-5); background: transparent; } body[data-ui-version="v2"] .gn-v2-rail-create-button:hover { background: color-mix(in srgb, var(--gn-bg-hover) 54%, transparent); } body[data-ui-version="v2"] .gn-v2-rail-create-icon { width: calc(24px * var(--gn-v2-rail-scale)); height: calc(24px * var(--gn-v2-rail-scale)); border-radius: calc(8px * var(--gn-v2-rail-scale)); display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--gn-bg-panel) 72%, var(--gn-accent) 28%); color: var(--gn-accent); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--gn-accent) 28%, transparent); } body[data-ui-version="v2"] .gn-v2-rail-create-label { color: var(--gn-fg-5); font-size: calc(10px * var(--gn-sidebar-rail-scale, 1)); line-height: 1; } body[data-ui-version="v2"] .gn-v2-object-explorer { min-width: 0; flex: 1 1 calc(100% - calc(38px * var(--gn-v2-rail-scale))); background: var(--gn-bg-panel-2); overflow: hidden; } body[data-ui-version="v2"] .gn-v2-active-connection-header { padding: 10px 10px 8px 12px; min-height: 52px; border-bottom: 0.5px solid var(--gn-br-1); display: flex; align-items: center; gap: 8px; } body[data-ui-version="v2"] .gn-v2-active-connection-trigger { min-width: 0; flex: 1 1 auto; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 9px; border: 0; border-radius: 0; background: transparent; color: inherit; text-align: left; } body[data-ui-version="v2"] .gn-v2-live-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--gn-fg-5); } body[data-ui-version="v2"] .gn-v2-live-dot.is-live { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); } body[data-ui-version="v2"] .gn-v2-live-dot.is-loading { width: 10px; height: 10px; border: 2px solid rgba(37, 99, 235, 0.24); border-top-color: #2563eb; background: transparent; animation: gn-v2-tree-status-spin 0.8s linear infinite; } body[data-ui-version="v2"] .gn-v2-live-dot.is-error { background: var(--gn-danger); } body[data-ui-version="v2"] .gn-v2-active-connection-copy { min-width: 0; flex: 1 1 auto; } body[data-ui-version="v2"] .gn-v2-active-connection-copy strong, body[data-ui-version="v2"] .gn-v2-active-connection-copy span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--gn-font-sans); letter-spacing: 0; } body[data-ui-version="v2"] .gn-v2-active-connection-copy strong { color: var(--gn-fg-1); font-size: 13px; font-weight: 400; line-height: 1.2; } body[data-ui-version="v2"] .gn-v2-active-connection-copy span { margin-top: 2px; color: var(--gn-fg-4); font-size: 11px; font-weight: 400; line-height: 1.2; } body[data-ui-version="v2"] .gn-v2-active-connection-actions { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; } body[data-ui-version="v2"] .gn-v2-active-connection-query-action { padding: 0 8px; max-width: 96px; font-size: 12px; font-weight: 500; } body[data-ui-version="v2"] .gn-v2-active-connection-query-action > span:not(.anticon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-explorer-search { padding: 10px 10px 6px !important; border-bottom: none !important; } body[data-ui-version="v2"] .gn-v2-explorer-command-row, body[data-ui-version="v2"] .gn-v2-explorer-legacy-filter-row { display: flex; align-items: center; gap: 6px; min-width: 0; } body[data-ui-version="v2"] .gn-v2-explorer-legacy-filter-row .ant-input-affix-wrapper { flex: 1 1 auto; min-width: 0; } body[data-ui-version="v2"] .gn-v2-explorer-command-trigger { flex: 1 1 auto; min-width: 0; height: 30px; display: flex; align-items: center; gap: 8px; border: 0.5px solid var(--gn-br-2); border-radius: 7px; padding: 0 8px; background: var(--gn-bg-input); color: var(--gn-fg-4); cursor: text; font-size: 12px; font-weight: 500; text-align: left; } body[data-ui-version="v2"] .gn-v2-explorer-command-trigger:hover { border-color: var(--gn-accent); background: var(--gn-bg-hover); color: var(--gn-fg-2); } body[data-ui-version="v2"] .gn-v2-explorer-command-trigger > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-explorer-filter-action { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; border: 0.5px solid var(--gn-br-2); border-radius: 7px; background: var(--gn-bg-input); color: var(--gn-fg-4); cursor: pointer; } body[data-ui-version="v2"] .gn-v2-explorer-filter-action:hover:not(:disabled) { border-color: var(--gn-accent); background: var(--gn-bg-hover); color: var(--gn-fg-2); } body[data-ui-version="v2"] .gn-v2-explorer-filter-action:disabled { opacity: 0.42; cursor: not-allowed; } body[data-ui-version="v2"] .gn-v2-command-backdrop { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 24px; background: rgba(15, 23, 42, 0.24); } body[data-ui-version="v2"] .gn-v2-command-palette { width: min(720px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 48px)); display: flex; flex-direction: column; overflow: hidden; border: 0.5px solid var(--gn-br-2); border-radius: 14px; background: var(--gn-bg-panel); box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24); } body[data-ui-version="v2"] .gn-v2-command-searchbar { height: 68px; flex: 0 0 68px; display: flex; align-items: center; gap: 14px; padding: 0 22px; border-bottom: 0.5px solid var(--gn-br-1); color: var(--gn-fg-4); } body[data-ui-version="v2"] .gn-v2-command-searchbar .ant-input { flex: 1 1 auto; height: 54px; min-width: 0; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--gn-fg-1) !important; font-size: 19px; font-weight: 500; } body[data-ui-version="v2"] .gn-v2-command-searchbar .ant-input::placeholder { color: var(--gn-fg-5); } body[data-ui-version="v2"] .gn-v2-command-searchbar > .anticon { font-size: 18px; color: var(--gn-fg-4); } body[data-ui-version="v2"] .gn-v2-command-filter-switch { height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; } body[data-ui-version="v2"] .gn-v2-command-searchbar .ant-switch { flex: 0 0 auto; } body[data-ui-version="v2"] .gn-v2-command-searchbar .ant-btn { width: 30px !important; height: 30px !important; flex: 0 0 30px; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; color: var(--gn-fg-4) !important; } body[data-ui-version="v2"] .gn-v2-command-searchbar .ant-btn:hover:not(:disabled) { background: var(--gn-bg-hover) !important; color: var(--gn-fg-2) !important; } body[data-ui-version="v2"] .gn-v2-command-searchbar .ant-btn:disabled { color: var(--gn-fg-5) !important; } body[data-ui-version="v2"] .gn-v2-command-searchbar > kbd, body[data-ui-version="v2"] .gn-v2-command-footer kbd, body[data-ui-version="v2"] .gn-v2-command-row kbd { min-width: 28px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 0.5px solid var(--gn-br-2); border-radius: 6px; background: var(--gn-bg-panel-2); color: var(--gn-fg-3); font-family: var(--gn-font-mono); font-size: 12px; font-weight: 800; } body[data-ui-version="v2"] .gn-v2-command-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 0 14px; } body[data-ui-version="v2"] .gn-v2-command-section { margin-bottom: 16px; } body[data-ui-version="v2"] .gn-v2-command-section-title { padding: 0 22px 8px; color: var(--gn-fg-4); font-family: var(--gn-font-mono); font-size: 12px; font-weight: 850; letter-spacing: 0; text-transform: uppercase; } body[data-ui-version="v2"] .gn-v2-command-row { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 14px; border: 0; padding: 7px 22px; background: transparent; color: var(--gn-fg-2); cursor: pointer; text-align: left; } body[data-ui-version="v2"] .gn-v2-command-row:hover, body[data-ui-version="v2"] .gn-v2-command-row.is-active { background: var(--gn-bg-hover); } body[data-ui-version="v2"] .gn-v2-command-row-icon { width: 22px; flex: 0 0 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--gn-fg-4); font-size: 15px; } body[data-ui-version="v2"] .gn-v2-command-row-icon.is-node { color: var(--gn-accent); } body[data-ui-version="v2"] .gn-v2-command-row-icon.is-action { color: var(--gn-info); } body[data-ui-version="v2"] .gn-v2-command-row-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; } body[data-ui-version="v2"] .gn-v2-command-row-main strong { overflow: hidden; color: var(--gn-fg-1); font-family: var(--gn-font-mono); font-size: 14px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-command-row-main small { overflow: hidden; color: var(--gn-fg-4); font-family: var(--gn-font-mono); font-size: 11.5px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-command-empty { padding: 32px 22px; color: var(--gn-fg-4); font-size: 13px; text-align: center; } body[data-ui-version="v2"] .gn-v2-command-footer { min-height: 46px; flex: 0 0 auto; display: flex; align-items: center; gap: 20px; padding: 10px 22px; border-top: 0.5px solid var(--gn-br-1); background: var(--gn-bg-panel-2); color: var(--gn-fg-4); font-size: 12px; } body[data-ui-version="v2"] .gn-v2-command-footer span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } @media (max-width: 720px) { body[data-ui-version="v2"] .gn-v2-command-backdrop { padding: 8px; } body[data-ui-version="v2"] .gn-v2-command-palette { width: calc(100vw - 16px); max-height: calc(100vh - 16px); } body[data-ui-version="v2"] .gn-v2-command-footer { flex-wrap: wrap; gap: 8px 14px; } } body[data-ui-version="v2"] .gn-v2-explorer-search .ant-input-affix-wrapper { height: 30px !important; display: flex !important; align-items: center !important; border-radius: 7px !important; border: 0.5px solid var(--gn-br-2) !important; padding: 0 8px !important; background: var(--gn-bg-input) !important; color: var(--gn-fg-2) !important; font-size: 12px !important; font-weight: 500 !important; } body[data-ui-version="v2"] .gn-v2-explorer-search .ant-input { height: 28px !important; min-width: 0; border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--gn-fg-2) !important; font-size: 12px !important; font-weight: 500 !important; } body[data-ui-version="v2"] .gn-v2-explorer-search .ant-input-prefix { margin-inline-end: 8px !important; color: var(--gn-fg-4) !important; } body[data-ui-version="v2"] .gn-v2-explorer-search .ant-input-prefix .anticon { font-size: 13px; } body[data-ui-version="v2"] .gn-v2-explorer-search .ant-input-suffix { margin-inline-start: 8px !important; } body[data-ui-version="v2"] .gn-v2-search-shortcut { display: inline-flex; align-items: center; gap: 4px; } body[data-ui-version="v2"] .gn-v2-search-shortcut kbd { min-width: 18px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 0.5px solid var(--gn-br-2); border-radius: 5px; background: var(--gn-bg-panel-2); color: var(--gn-fg-3); font-family: var(--gn-font-mono); font-size: 11px; font-weight: 700; } body[data-ui-version="v2"] .gn-v2-explorer-filter-tabs { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 2px 10px 8px; scrollbar-width: none; } body[data-ui-version="v2"] .gn-v2-explorer-filter-tabs::-webkit-scrollbar { display: none; } body[data-ui-version="v2"] .gn-v2-explorer-filter-tabs button { flex: 0 0 auto; height: 22px; padding: 0 6px; border: none; border-radius: 5px; background: transparent; color: var(--gn-fg-4); font-size: 11px; font-weight: 600; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-explorer-filter-tabs button.is-active { background: var(--gn-bg-active); color: var(--gn-fg-1); } body[data-ui-version="v2"] .gn-v2-explorer-toolbar { display: none !important; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell { --gn-v2-tree-horizontal-scroll-reserve: 32px; margin: 0; border: 0; border-radius: 0; background: transparent; overflow: hidden !important; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .sidebar-tree-scroll-content { display: flex; flex-direction: column; min-height: 0; height: 100%; box-sizing: border-box; padding: 4px 0 0; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; height: 100%; font-size: var(--gn-sidebar-tree-font-size, var(--gn-font-size-sm, 12px)); line-height: 1.2; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-list { position: relative; height: 100%; min-height: 0; box-sizing: border-box; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-list-holder { box-sizing: border-box; height: calc(100% - var(--gn-v2-tree-horizontal-scroll-reserve)); max-height: calc(100% - var(--gn-v2-tree-horizontal-scroll-reserve)) !important; overflow-x: hidden !important; scrollbar-width: thin; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-list-scrollbar-horizontal { height: 12px !important; left: 8px !important; right: 8px !important; bottom: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-list-scrollbar-horizontal .ant-tree-list-scrollbar-thumb { height: 8px !important; border-radius: 999px !important; background: color-mix(in srgb, var(--gn-fg-4) 52%, transparent) !important; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-list-scrollbar-horizontal .ant-tree-list-scrollbar-thumb:hover, body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-list-scrollbar-horizontal .ant-tree-list-scrollbar-thumb-moving { background: color-mix(in srgb, var(--gn-fg-3) 72%, transparent) !important; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-list-holder-inner { width: 100%; min-width: 100%; box-sizing: border-box; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-treenode { min-height: 26px !important; padding: 0 6px !important; align-items: center; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-switcher { width: 16px !important; min-width: 16px !important; align-self: stretch; line-height: 26px !important; font-size: 12px !important; color: var(--gn-fg-4); } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-indent-unit { width: 12px !important; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-node-content-wrapper { min-width: 100%; width: max-content !important; min-height: 26px !important; padding: 0 6px !important; display: flex !important; align-items: center; border-radius: 6px !important; color: var(--gn-fg-3) !important; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-node-content-wrapper:hover { background: var(--gn-bg-hover) !important; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-node-content-wrapper.ant-tree-node-selected { background: var(--gn-bg-selected) !important; color: var(--gn-fg-1) !important; font-weight: 400 !important; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-iconEle { width: 15px !important; min-width: 15px !important; margin-right: 4px !important; display: inline-flex !important; align-items: center; justify-content: center; color: var(--gn-fg-4); font-size: 13px; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-iconEle .anticon-table, body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-iconEle .anticon-eye, body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-iconEle .anticon-code, body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-iconEle .anticon-function, body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-iconEle .anticon-thunderbolt { color: var(--gn-accent); } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-iconEle .anticon-folder, body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-iconEle .anticon-folder-open { color: var(--gn-fg-4); } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .gn-v2-tree-folder-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .gn-v2-tree-folder-icon .anticon-folder, body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .gn-v2-tree-folder-icon .anticon-folder-open { color: #faad14; font-size: 18px; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-title { min-width: max-content; flex: 0 0 auto; display: inline-flex; align-items: center; overflow: visible; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-title > span { min-width: max-content; overflow: visible; text-overflow: clip; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-explorer-tree-shell .ant-tree-title > .gn-v2-tree-title { width: max-content; min-width: 100%; overflow: visible; } body[data-ui-version="v2"] .gn-v2-tree-title { width: max-content; min-width: 100%; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: var(--gn-fg-2); font-family: var(--gn-font-sans); font-size: var(--gn-sidebar-tree-font-size, var(--gn-font-size-sm, 12px)); font-weight: 400 !important; line-height: 1.25; } body[data-ui-version="v2"] .gn-v2-tree-title.is-mono { width: max-content; min-width: 100%; flex: 0 0 auto; } body[data-ui-version="v2"] .gn-v2-tree-title.is-mono .gn-v2-tree-label { flex: 0 0 auto; overflow: visible; text-overflow: clip; font-family: inherit; font-size: inherit; font-weight: 400 !important; } body[data-ui-version="v2"] .gn-v2-tree-title.is-group { font-weight: 400 !important; color: var(--gn-fg-1); } body[data-ui-version="v2"] .gn-v2-tree-title.is-connection { align-items: center; gap: 6px; } body[data-ui-version="v2"] .gn-v2-tree-status { position: relative; margin: 0 2px 0 0; width: 14px; min-width: 14px; height: 14px; flex: 0 0 14px; display: inline-flex; align-items: center; justify-content: center; overflow: visible; } body[data-ui-version="v2"] .gn-v2-tree-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; background: #b8c0cc; } body[data-ui-version="v2"] .gn-v2-tree-status.is-success::before { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18); } body[data-ui-version="v2"] .gn-v2-tree-status.is-loading::before { width: 10px; height: 10px; flex: 0 0 10px; border: 2px solid rgba(37, 99, 235, 0.24); border-top-color: #2563eb; background: transparent; box-shadow: none; animation: gn-v2-tree-status-spin 0.8s linear infinite; } body[data-ui-version="v2"] .gn-v2-tree-status.is-error::before { background: var(--gn-danger); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.16); } @keyframes gn-v2-tree-status-spin { to { transform: rotate(360deg); } } body[data-ui-version="v2"] .gn-v2-tree-label { min-width: max-content; flex: 0 0 auto; overflow: visible; text-overflow: clip; white-space: nowrap; letter-spacing: 0; font-weight: 400 !important; } body[data-ui-version="v2"] .gn-v2-tree-title.is-redis-db .gn-v2-tree-label { display: inline-flex; align-items: baseline; gap: 6px; } body[data-ui-version="v2"] .gn-v2-tree-table-comment { max-width: 24em; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gn-fg-5); font-family: var(--gn-font-sans); font-size: clamp(10px, calc(var(--gn-sidebar-tree-font-size, var(--gn-font-size-sm, 12px)) - 1px), 16px); font-weight: 400 !important; opacity: 0.78; } body[data-ui-version="v2"] .gn-v2-tab-hover-tooltip .ant-tooltip-inner { min-width: 260px; padding: 0; } body[data-ui-version="v2"] .gn-v2-tab-hover-tooltip { pointer-events: auto; } body[data-ui-version="v2"] .gn-v2-tab-hover-card { --gn-v2-tab-hover-grid-columns: 56px minmax(0, 1fr); display: flex; flex-direction: column; gap: 8px; padding: 10px; color: var(--gn-fg-2); cursor: text; user-select: text; -webkit-user-select: text; } body[data-ui-version="v2"] .gn-v2-tab-hover-card * { user-select: text; -webkit-user-select: text; } body[data-ui-version="v2"] .gn-v2-tab-hover-head { display: grid; grid-template-columns: var(--gn-v2-tab-hover-grid-columns); align-items: start; gap: 8px; min-width: 0; } body[data-ui-version="v2"] .gn-v2-tab-hover-head > span { justify-self: start; padding: 2px 6px; border-radius: 5px; background: var(--gn-bg-active); color: var(--gn-accent-2); font-family: var(--gn-font-mono); font-size: 10px; font-weight: 700; line-height: 14px; } body[data-ui-version="v2"] .gn-v2-tab-hover-head > strong { min-width: 0; overflow-wrap: anywhere; color: var(--gn-fg-1); font-size: var(--gn-font-size-sm, 12px); font-weight: 700; line-height: 18px; white-space: normal; } body[data-ui-version="v2"] .gn-v2-tab-hover-rows { display: grid; gap: 5px; } body[data-ui-version="v2"] .gn-v2-tab-hover-row { display: grid; grid-template-columns: var(--gn-v2-tab-hover-grid-columns); align-items: start; gap: 8px; font-size: var(--gn-font-size-sm, 12px); line-height: 18px; } body[data-ui-version="v2"] .gn-v2-tab-hover-row > span { color: var(--gn-fg-5); } body[data-ui-version="v2"] .gn-v2-tab-hover-row > strong { min-width: 0; overflow-wrap: anywhere; color: var(--gn-fg-2); font-weight: 600; } body[data-ui-version="v2"] .gn-v2-redis-db-alias { color: var(--gn-fg-5); font-family: var(--gn-font-sans); font-size: clamp(10px, calc(var(--gn-sidebar-tree-font-size, var(--gn-font-size-sm, 12px)) - 1px), 16px); font-weight: 400 !important; opacity: 0.78; } body[data-ui-version="v2"] .gn-v2-tree-connection-copy { min-width: max-content; flex: 0 0 auto; color: var(--gn-fg-1); font-weight: 400 !important; } body[data-ui-version="v2"] .gn-v2-tree-count { flex: 0 0 auto; color: var(--gn-fg-5); font-family: var(--gn-font-sans); font-variant-numeric: tabular-nums; font-size: clamp(10px, calc(var(--gn-sidebar-tree-font-size, var(--gn-font-size-sm, 12px)) - 1px), 16px); font-weight: 400 !important; opacity: 0.82; } body[data-ui-version="v2"] .gn-v2-table-pin-action { width: 18px; height: 18px; flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--gn-fg-5); cursor: pointer; opacity: 0; transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease; } body[data-ui-version="v2"] .gn-v2-table-pin-action:hover { background: var(--gn-bg-hover); color: var(--gn-fg-2); } body[data-ui-version="v2"] .gn-v2-table-pin-action.is-pinned { color: var(--gn-warn); opacity: 1; } body[data-ui-version="v2"] .ant-tree-node-content-wrapper:hover .gn-v2-table-pin-action, body[data-ui-version="v2"] .gn-v2-table-pin-action:focus-visible { opacity: 1; } body[data-ui-version="v2"] .gn-v2-object-explorer .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected::before { display: none; } body[data-ui-version="v2"] .gn-v2-tree-title[data-node-type="database"] { font-weight: 400 !important; color: var(--gn-fg-1); } body[data-ui-version="v2"] .gn-v2-tree-title[data-node-type="queries-folder"], body[data-ui-version="v2"] .gn-v2-tree-title[data-node-type="external-sql-root"] { color: var(--gn-fg-1); font-weight: 400 !important; } body[data-ui-version="v2"] .gn-v2-tree-external-root { width: 100%; min-width: 0; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; } body[data-ui-version="v2"] .gn-v2-tree-external-root .gn-v2-tree-title { min-width: 0; flex: 1 1 auto; } body[data-ui-version="v2"] .gn-v2-tree-external-root .gn-v2-tree-label { display: inline-flex; align-items: center; gap: 6px; } body[data-ui-version="v2"] .gn-v2-tree-external-root-action { flex: 0 0 auto; padding-inline: 4px !important; height: 20px !important; } body[data-ui-version="v2"] .gn-v2-tree-title[data-group-key="triggers"] { color: var(--gn-fg-1); } body[data-ui-version="v2"] .gn-v2-tree-section-title { display: flex; align-items: center; width: 100%; height: 22px; padding: 7px 4px 3px 2px; color: var(--gn-fg-5); font-family: var(--gn-font-sans); font-size: clamp(10px, calc(var(--gn-sidebar-tree-font-size, var(--gn-font-size-sm, 12px)) - 1px), 16px); font-weight: 400; line-height: 1.1; letter-spacing: 0; pointer-events: none; user-select: none; } body[data-ui-version="v2"] .ant-tree-treenode:has(.gn-v2-tree-section-title) { pointer-events: none; } body[data-ui-version="v2"] .ant-tree-treenode:has(.gn-v2-tree-section-title) .ant-tree-switcher, body[data-ui-version="v2"] .ant-tree-treenode:has(.gn-v2-tree-section-title) .ant-tree-iconEle { display: none !important; } body[data-ui-version="v2"] .ant-tree-treenode:has(.gn-v2-tree-section-title) .ant-tree-node-content-wrapper { min-height: 22px !important; padding-left: 0 !important; cursor: default !important; background: transparent !important; } body[data-ui-version="v2"] .ant-tree-treenode:has(.gn-v2-tree-section-title) .ant-tree-title { display: flex; width: 100%; } body[data-ui-version="v2"] .gn-v2-sidebar-log-footer { padding: 8px 10px; border-top: 0.5px solid var(--gn-br-1); background: var(--gn-bg-panel-2); flex-shrink: 0; display: flex; align-items: center; gap: 8px; } body[data-ui-version="v2"] .gn-v2-sidebar-slow-query-button { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; } body[data-ui-version="v2"] .gn-v2-sidebar-sql-audit-button { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; } body[data-ui-version="v2"] .gn-v2-sidebar-slow-query-button:hover { background: var(--gn-bg-hover) !important; } body[data-ui-version="v2"] .gn-v2-sidebar-sql-audit-button:hover { background: var(--gn-bg-hover) !important; } body[data-ui-version="v2"] .gn-v2-empty-workbench { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); align-content: stretch; gap: 0; padding: 0; background: var(--gn-bg-panel-2); } body[data-ui-version="v2"] .gn-v2-empty-hero, body[data-ui-version="v2"] .gn-v2-empty-panel { align-self: stretch; border: 0; border-radius: 0; background: transparent; box-shadow: none; } body[data-ui-version="v2"] .gn-v2-empty-hero { display: flex; flex-direction: column; justify-content: flex-start; min-height: 0; background: var(--gn-bg-panel-2); padding: 28px 28px 24px 30px; } body[data-ui-version="v2"] .gn-v2-empty-eyebrow { display: flex; flex-wrap: wrap; gap: 8px; color: var(--gn-accent); font-size: 11px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } body[data-ui-version="v2"] .gn-v2-empty-hero h1 { max-width: 720px; margin: 12px 0 0; color: var(--gn-fg-1); font-size: 34px; line-height: 1.1; font-weight: 800; } @media (max-width: 720px) { body[data-ui-version="v2"] .gn-v2-empty-hero h1 { font-size: 28px; } } body[data-ui-version="v2"] .gn-v2-empty-hero p { max-width: 560px; margin: 12px 0 0; color: var(--gn-fg-3); font-size: 13px; line-height: 1.6; } body[data-ui-version="v2"] .gn-v2-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } body[data-ui-version="v2"] .gn-v2-empty-actions .ant-btn { height: 38px !important; border-radius: 8px !important; } body[data-ui-version="v2"] .gn-v2-empty-panel { border-left: 0.5px solid var(--gn-br-1); background: var(--gn-bg-panel-2); padding: 16px 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; font-family: var(--gn-font-sans); } body[data-ui-version="v2"] .gn-v2-panel-heading { display: flex; justify-content: space-between; align-items: center; color: var(--gn-fg-1); font-family: var(--gn-font-sans); font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0; margin-bottom: 4px; } body[data-ui-version="v2"] .gn-v2-empty-panel button { width: 100%; min-height: 62px; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; border: 0.5px solid var(--gn-br-1); border-radius: 6px; background: color-mix(in srgb, var(--gn-bg-panel-2) 88%, var(--gn-bg-panel) 12%); color: var(--gn-fg-1); cursor: pointer; font-family: var(--gn-font-sans); padding: 10px 12px; } body[data-ui-version="v2"] .gn-v2-empty-panel button:hover { border-color: color-mix(in srgb, var(--gn-accent) 42%, var(--gn-br-1)); background: var(--gn-bg-hover); } body[data-ui-version="v2"] .gn-v2-empty-panel button > .anticon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; color: var(--gn-accent); background: var(--gn-accent-soft); } body[data-ui-version="v2"] .gn-v2-empty-panel strong, body[data-ui-version="v2"] .gn-v2-empty-panel small { display: block; font-family: var(--gn-font-sans); letter-spacing: 0; } body[data-ui-version="v2"] .gn-v2-empty-panel strong { color: var(--gn-fg-1); font-size: 13px; font-weight: 650; line-height: 1.35; } body[data-ui-version="v2"] .gn-v2-empty-panel small { color: var(--gn-fg-4); font-size: 11px; margin-top: 3px; font-weight: 500; line-height: 1.45; } @media (max-width: 1360px) { body[data-ui-version="v2"] .gn-v2-empty-workbench { grid-template-columns: minmax(0, 1.28fr) minmax(260px, 0.72fr); } body[data-ui-version="v2"] .gn-v2-empty-hero { padding: 24px 22px 22px 24px; } body[data-ui-version="v2"] .gn-v2-empty-panel { padding: 14px 14px 14px 16px; } } @media (max-width: 1120px) { body[data-ui-version="v2"] .gn-v2-empty-workbench { grid-template-columns: minmax(0, 1fr); } body[data-ui-version="v2"] .gn-v2-empty-panel { border-left: 0; border-top: 0.5px solid var(--gn-br-1); } } /* ─── Full V2 workbench shell: app / topbar / workspace ─ */ body[data-ui-version="v2"] .gn-v2-app-root { background: var(--gn-bg-app) !important; color: var(--gn-fg-1); } body[data-ui-version="v2"] .gn-v2-titlebar { position: relative; background: var(--gn-bg-chrome) !important; border-bottom: 0.5px solid var(--gn-br-1) !important; box-shadow: none !important; } body[data-ui-version="v2"] .gn-v2-titlebar-brand { width: 18px; height: 18px; border-radius: 5px; background: linear-gradient(135deg, var(--gn-accent) 0%, var(--gn-accent-2) 100%); color: var(--gn-on-accent, #fff); display: inline-flex; align-items: center; justify-content: center; font-family: var(--gn-font-mono); font-size: 9px; font-weight: 800; box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.3); } body[data-ui-version="v2"] .gn-v2-titlebar-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.05; } body[data-ui-version="v2"] .gn-v2-titlebar-copy strong { color: var(--gn-fg-2); font-size: 12px; font-weight: 800; } body[data-ui-version="v2"] .gn-v2-titlebar-copy small { max-width: 260px; margin-top: 2px; overflow: hidden; color: var(--gn-fg-4); font-family: var(--gn-font-mono); font-size: 9.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-titlebar-center { position: absolute; left: 50%; top: 50%; display: inline-flex; max-width: 520px; transform: translate(-50%, -50%); align-items: center; gap: 8px; color: var(--gn-fg-3); font-family: var(--gn-font-mono); font-size: 12px; font-weight: 650; overflow: hidden; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-titlebar-center span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } body[data-ui-version="v2"] .gn-v2-titlebar-live { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); } body[data-ui-version="v2"] .gn-v2-app-shell { background: var(--gn-bg-app) !important; } body[data-ui-version="v2"] .gn-v2-app-sider { background: var(--gn-bg-panel-2) !important; } body[data-ui-version="v2"] .gn-v2-workspace-shell { background: var(--gn-bg-app) !important; } body[data-ui-version="v2"] .gn-v2-workspace-body { background: var(--gn-bg-app); } body[data-ui-version="v2"] .gn-v2-workspace-main { background: var(--gn-bg-panel) !important; } body[data-ui-version="v2"] .gn-v2-ai-panel-dock { background: var(--gn-bg-panel); } body[data-ui-version="v2"] .gn-v2-ai-panel-overlay { position: absolute; inset: 0; display: flex; justify-content: flex-end; pointer-events: none; z-index: 14; } body[data-ui-version="v2"] .gn-v2-ai-panel-backdrop { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(248, 250, 252, 0.38); backdrop-filter: blur(2px); pointer-events: auto; } body[data-ui-version="v2"] .gn-v2-ai-panel-dock.is-overlay { position: relative; height: 100%; pointer-events: auto; z-index: 1; } body[data-ui-version="v2"] .gn-v2-ai-panel-dock.is-overlay .gn-v2-ai-panel { height: 100%; box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18); } body[data-ui-version="v2"] .gn-v2-tab-workbench { min-height: 0; min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; background: var(--gn-bg-panel-2); } body[data-ui-version="v2"] .gn-v2-main-tabs > .ant-tabs-nav { height: 36px; flex: 0 0 36px; background: var(--gn-bg-panel-2); } body[data-ui-version="v2"] .gn-v2-main-tabs-double > .ant-tabs-nav { height: 46px; flex: 0 0 46px; } body[data-ui-version="v2"] .gn-v2-main-tabs .ant-tabs-nav-wrap, body[data-ui-version="v2"] .gn-v2-main-tabs .ant-tabs-nav-list { min-height: 36px; } body[data-ui-version="v2"] .gn-v2-main-tabs-double .ant-tabs-nav-wrap, body[data-ui-version="v2"] .gn-v2-main-tabs-double .ant-tabs-nav-list { min-height: 46px; } body[data-ui-version="v2"] .gn-v2-main-tabs .ant-tabs-tab { width: 260px; min-width: 260px; max-width: 260px; height: 36px; margin: 0 !important; padding: 0 !important; } body[data-ui-version="v2"] .gn-v2-main-tabs-double .ant-tabs-tab { height: 46px; } body[data-ui-version="v2"] .gn-v2-main-tabs .ant-tabs-tab-btn { width: 100%; height: 100%; } body[data-ui-version="v2"] .gn-v2-tab-label { position: relative; width: 100%; height: 100%; box-sizing: border-box; padding: 0 8px 0 10px; gap: 7px; } body[data-ui-version="v2"] .gn-v2-tab-label-content { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 7px; overflow: hidden; } body[data-ui-version="v2"] .gn-v2-tab-label-double { padding-top: 4px; padding-bottom: 3px; } body[data-ui-version="v2"] .gn-v2-tab-label-double .gn-v2-tab-label-content { align-items: stretch; justify-content: flex-start; flex-direction: column; gap: 0; } body[data-ui-version="v2"] .gn-v2-tab-label-double .gn-v2-tab-label-main { flex: 0 1 auto; gap: 5px; line-height: 17px; } body[data-ui-version="v2"] .gn-v2-tab-label-main { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gn-fg-2); font-weight: 700; line-height: 16px; } body[data-ui-version="v2"] .gn-v2-tab-label-secondary { min-width: 0; display: block; overflow: hidden; color: var(--gn-fg-5); font-family: var(--gn-font-mono); font-size: 10px; font-weight: 650; line-height: 12px; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-tab-label-part { min-width: 0; flex: 0 0 auto; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-tab-label-part-object { flex: 1 1 auto; color: var(--gn-fg-2); font-weight: 700; } body[data-ui-version="v2"] .gn-v2-tab-label-part-connection { flex: 0 1 92px; color: var(--gn-fg-2); font-family: var(--gn-font-mono); font-weight: 700; } body[data-ui-version="v2"] .gn-v2-tab-label-part-host, body[data-ui-version="v2"] .gn-v2-tab-label-part-database, body[data-ui-version="v2"] .gn-v2-tab-label-part-schema { flex: 0 2 auto; max-width: 112px; } body[data-ui-version="v2"] .gn-v2-tab-kind-icon { display: inline-flex; color: var(--gn-accent); font-size: 12px; } body[data-ui-version="v2"] .gn-v2-tab-kind { height: 17px; flex: 0 0 auto; display: inline-flex; align-items: center; padding: 0 5px; border-radius: 3px; background: var(--gn-bg-active); color: var(--gn-fg-4); font-family: var(--gn-font-mono); font-size: 9.5px; font-weight: 750; } body[data-ui-version="v2"] .gn-v2-tab-conn { max-width: 76px; overflow: hidden; color: var(--gn-fg-5); font-family: var(--gn-font-mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-tab-close { width: 18px; height: 18px; flex: 0 0 18px; border: none; border-radius: 4px; background: transparent; color: var(--gn-fg-4); display: inline-flex; align-items: center; justify-content: center; padding: 0; opacity: 0.7; } body[data-ui-version="v2"] .gn-v2-tab-close:hover { opacity: 1; background: var(--gn-bg-active); color: var(--gn-fg-1); } body[data-ui-version="v2"] .gn-v2-tab-context-menu-popup .ant-dropdown-menu { min-width: 188px; padding: 6px !important; border: 0.5px solid var(--gn-br-2) !important; border-radius: 12px !important; background: color-mix(in srgb, var(--gn-bg-panel) 94%, transparent) !important; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.04) !important; backdrop-filter: blur(12px); } body[data-ui-version="v2"] .gn-v2-tab-context-menu-popup .ant-dropdown-menu-item { min-height: 34px !important; padding: 7px 10px !important; border-radius: 8px !important; color: var(--gn-fg-2) !important; font-size: 13px !important; font-weight: 650 !important; } body[data-ui-version="v2"] .gn-v2-tab-context-menu-popup .ant-dropdown-menu-item:hover { background: var(--gn-bg-active) !important; color: var(--gn-fg-1) !important; } body[data-ui-version="v2"] .gn-v2-tab-context-menu-popup .ant-dropdown-menu-item-disabled { color: var(--gn-fg-5) !important; opacity: 0.5; } body[data-ui-version="v2"] .gn-v2-tab-context-menu-popup .ant-dropdown-menu-item-icon { color: var(--gn-info); font-size: 14px; } body[data-ui-version="v2"] .gn-v2-tab-context-menu-popup .ant-dropdown-menu-item-divider { margin: 5px 4px !important; background: var(--gn-br-1) !important; } body[data-ui-version="v2"] .gn-v2-tab-context-menu-popup .ant-dropdown-menu-title-content { display: inline-flex; align-items: center; } body[data-ui-version="v2"] .gn-v2-tab-context-menu-popup .ant-dropdown-menu-item:first-child { color: var(--gn-fg-1) !important; background: color-mix(in srgb, var(--gn-info) 8%, transparent) !important; } body[data-ui-version="v2"] .gn-v2-tab-context-menu-popup .ant-dropdown-menu-item:first-child:hover { background: color-mix(in srgb, var(--gn-info) 14%, transparent) !important; } /* ─── V2 DataGrid: toolbar, smart filters, table, statusbar ─ */ body[data-ui-version="v2"] .gn-v2-data-viewer { background: var(--gn-bg-panel); } body[data-ui-version="v2"] .gn-v2-data-grid { padding: 0 !important; background: var(--gn-bg-panel) !important; } body[data-ui-version="v2"] .gn-v2-data-grid-toolbar-frame { margin: 0 !important; border-width: 0 0 0.5px !important; border-color: var(--gn-br-1) !important; border-radius: 0 !important; background: var(--gn-bg-panel) !important; } body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-toolbar-scroll { min-height: 44px; padding: 7px 12px !important; gap: 4px !important; background: var(--gn-bg-panel) !important; } body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-toolbar-scroll .ant-btn { height: 28px !important; border-radius: 7px !important; } body[data-ui-version="v2"] .gn-v2-data-grid-toolbar-title { display: inline-flex; align-items: center; gap: 8px; min-width: 180px; max-width: 460px; flex: 0 1 auto; overflow: hidden; white-space: nowrap; color: var(--gn-fg-4); } body[data-ui-version="v2"] .gn-v2-data-grid-toolbar-title .gn-v2-data-grid-icon { width: 18px; height: 18px; border-radius: 0; background: transparent; color: var(--gn-fg-1); } body[data-ui-version="v2"] .gn-v2-data-grid-toolbar-title strong { min-width: 0; overflow: hidden; color: var(--gn-fg-1); font-family: var(--gn-font-mono); font-size: 13.5px; font-weight: 400; text-overflow: ellipsis; } body[data-ui-version="v2"] .gn-v2-data-grid-toolbar-title small { min-width: 0; overflow: hidden; color: var(--gn-fg-4); font-family: var(--gn-font-mono); font-size: 10.5px; font-weight: 400; text-overflow: ellipsis; } body[data-ui-version="v2"] .gn-v2-toolbar-divider { flex: 0 0 1px; height: 20px !important; margin: 0 8px !important; background: var(--gn-br-1) !important; } body[data-ui-version="v2"] .gn-v2-toolbar-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 18px; margin-left: 4px; padding: 0 4px; border: 0.5px solid var(--gn-br-2); border-radius: 4px; background: var(--gn-bg-input); color: inherit; font-family: var(--gn-font-mono); font-size: 10.5px; font-weight: 650; line-height: 18px; } body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-commit-button { border-color: transparent !important; background: var(--gn-accent-soft) !important; color: var(--gn-accent-2) !important; font-weight: 750 !important; } body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-commit-button:disabled { opacity: 1; background: var(--gn-accent-soft) !important; color: var(--gn-accent-2) !important; } body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-commit-button .gn-v2-toolbar-kbd { border: none; background: rgba(22, 163, 74, 0.18); color: var(--gn-accent-2); } body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-ai-insight-button { border-color: transparent !important; background: var(--gn-info-soft) !important; color: var(--gn-info) !important; font-weight: 750 !important; } body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-ai-insight-button:hover { filter: brightness(0.96); } body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-ai-insight-button .gn-v2-toolbar-kbd { border: none; background: var(--gn-bg-input); color: var(--gn-info); } body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-query-result-toolbar-hide { border-color: var(--gn-br-1) !important; background: var(--gn-bg-panel) !important; color: var(--gn-fg-2) !important; font-weight: 650 !important; } body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-query-result-toolbar-hide:hover { background: var(--gn-bg-hover) !important; color: var(--gn-fg-1) !important; } body[data-ui-version="v2"] .gn-v2-smart-filter-panel { background: var(--gn-bg-panel-2) !important; border-top: 0.5px solid var(--gn-br-1); font-size: var(--gn-font-size, 14px); } body[data-ui-version="v2"] .gn-v2-smart-filter-panel [data-grid-quick-where="true"] { min-height: 38px; margin-bottom: 8px !important; border: 0.5px solid var(--gn-br-2) !important; border-radius: 8px !important; background: var(--gn-bg-panel) !important; } body[data-ui-version="v2"] .gn-v2-smart-filter-panel [data-grid-quick-where="true"], body[data-ui-version="v2"] .gn-v2-smart-filter-panel [data-grid-quick-where-input="true"] { user-select: text !important; -webkit-user-select: text !important; } body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-btn, body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-input, body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-input-affix-wrapper, body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-input-affix-wrapper input, body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-input-textarea, body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-input-textarea textarea, body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-select, body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-select-selector, body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-select-selection-item, body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-select-selection-placeholder, body[data-ui-version="v2"] .gn-v2-smart-filter-panel .ant-checkbox-wrapper { font-size: var(--gn-font-size-sm, 12px) !important; } body[data-ui-version="v2"] .gn-v2-smart-filter-panel [data-grid-quick-where="true"] .ant-input, body[data-ui-version="v2"] .gn-v2-smart-filter-panel [data-grid-quick-where="true"] .ant-input-affix-wrapper, body[data-ui-version="v2"] .gn-v2-smart-filter-panel [data-grid-quick-where="true"] .ant-input-affix-wrapper input, body[data-ui-version="v2"] .gn-v2-smart-filter-panel [data-grid-quick-where-input="true"] { font-size: var(--gn-font-size, 14px) !important; line-height: 1.35 !important; } body[data-ui-version="v2"] .gn-v2-data-grid-table-shell { border: none !important; border-radius: 0 !important; background: var(--gn-bg-panel) !important; } body[data-ui-version="v2"] .gn-v2-data-grid-table-wrap { background: var(--gn-bg-panel); } body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-thead > tr > th { height: 48px !important; padding: 3px 8px !important; background: var(--gn-bg-panel-2) !important; color: var(--gn-fg-2) !important; font-family: var(--gn-font-mono) !important; font-weight: 400 !important; vertical-align: top !important; } body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-table-designer.is-embedded .ant-table-thead > tr > th { height: var(--gn-v2-designer-header-height, 40px) !important; min-height: var(--gn-v2-designer-header-height, 40px) !important; padding: var(--gn-v2-designer-header-padding, 0 8px) !important; color: var(--gn-fg-3) !important; font-family: inherit !important; font-size: var(--gn-v2-designer-content-font-size, 12px) !important; font-weight: 600 !important; vertical-align: middle !important; } body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-table-designer.is-embedded .ant-table-thead .ant-table-column-title { min-height: var(--gn-v2-designer-header-height, 40px) !important; color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: 600 !important; } body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-table-designer.is-embedded .ant-table-thead .ant-table-column-sorters { min-height: var(--gn-v2-designer-header-height, 40px) !important; align-items: center !important; } body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-thead .ant-table-column-title { font-size: var(--gn-data-table-font-size, var(--gn-font-size-mono, 12px)); font-weight: 400 !important; } body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-thead .ant-table-column-sorters { min-height: 0 !important; align-items: flex-start !important; } body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-thead > tr > th.is-single-line-title { vertical-align: middle !important; } body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-thead > tr > th.is-single-line-title .ant-table-column-sorters { min-height: 48px !important; align-items: center !important; } body[data-ui-version="v2"] .gn-v2-data-grid .sortable-header-cell-drag-handle { min-height: 48px !important; align-items: flex-start !important; padding: 3px 8px !important; } body[data-ui-version="v2"] .gn-v2-data-grid .sortable-header-cell-drag-handle > div { align-items: flex-start !important; } body[data-ui-version="v2"] .gn-v2-data-grid .is-single-line-title .sortable-header-cell-drag-handle { align-items: center !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[data-ui-version="v2"] .gn-v2-data-grid .is-single-line-title .sortable-header-cell-drag-handle > div { align-items: center !important; } body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-thead > tr > th:first-child, body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-selection-column { width: 56px !important; /* 与固定列(行号/钉住列)统一用 panel,勿用 panel-2 造成色差 */ background: var(--gn-bg-panel) !important; border-right: 0.5px solid var(--gn-br-1) !important; } body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-table-designer.is-embedded .ant-table-thead > tr > th:first-child, body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-table-designer.is-embedded .ant-table-thead > tr > th.ant-table-selection-column, body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-table-designer.is-embedded .ant-table-selection-column { width: var(--gn-v2-designer-selection-column-width, 44px) !important; min-width: var(--gn-v2-designer-selection-column-width, 44px) !important; max-width: var(--gn-v2-designer-selection-column-width, 44px) !important; } body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-thead > tr > th:first-child, body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-thead > tr > th.ant-table-selection-column { vertical-align: middle !important; text-align: center !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-thead > tr > th:first-child .ant-table-selection, body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-thead > tr > th.ant-table-selection-column .ant-table-selection { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-table-designer.is-embedded .ant-table-thead > tr > th:first-child .ant-table-selection, body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-table-designer.is-embedded .ant-table-thead > tr > th.ant-table-selection-column .ant-table-selection { min-height: var(--gn-v2-designer-header-height, 40px) !important; } body[data-ui-version="v2"] .gn-v2-column-title { width: 100%; min-width: 0; height: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; line-height: 1.1; overflow: hidden; } body[data-ui-version="v2"] .gn-v2-column-title.is-single-line { height: 100%; justify-content: center; } body[data-ui-version="v2"] .gn-v2-column-title-main { display: flex; align-items: center; gap: 5px; min-width: 0; } body[data-ui-version="v2"] .gn-v2-column-title-icon { width: calc(13px * var(--gn-ui-scale, 1)); height: calc(13px * var(--gn-ui-scale, 1)); flex: 0 0 calc(13px * var(--gn-ui-scale, 1)); display: inline-flex; align-items: center; justify-content: center; color: var(--gn-fg-4); font-size: var(--gn-font-size-xs, 10px); } body[data-ui-version="v2"] .gn-v2-column-title-icon.is-primary { color: var(--gn-warn); } body[data-ui-version="v2"] .gn-v2-column-title-name { min-width: 0; overflow: hidden; color: var(--gn-fg-1); font-family: var(--gn-font-mono); font-size: var(--gn-font-size-sm, 12px); font-weight: 400 !important; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-column-badge { height: calc(18px * var(--gn-ui-scale, 1)); padding: 0 calc(6px * var(--gn-ui-scale, 1)); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--gn-font-mono); font-size: var(--gn-font-size-xs, 10px); font-weight: 800; line-height: calc(18px * var(--gn-ui-scale, 1)); letter-spacing: 0; } body[data-ui-version="v2"] .gn-v2-column-badge.is-pk { background: var(--gn-accent-soft); color: var(--gn-accent-2); } body[data-ui-version="v2"] .gn-v2-column-badge.is-idx { background: var(--gn-warn-soft); color: var(--gn-warn); } body[data-ui-version="v2"] .gn-v2-column-title-type, body[data-ui-version="v2"] .gn-v2-column-title-comment { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-column-title-type { color: var(--gn-fg-4); font-family: var(--gn-font-mono); font-size: var(--gn-font-size-xs, 10px); font-weight: 400 !important; } body[data-ui-version="v2"] .gn-v2-column-title-comment { color: var(--gn-fg-4); font-family: var(--gn-font-mono); font-size: var(--gn-font-size-xs, 10px); font-weight: 400 !important; } body[data-ui-version="v2"] .gn-v2-data-grid .react-resizable-handle::after { content: ''; position: absolute; top: 8px; bottom: 8px; left: 4px; width: 2px; border-radius: 1px; background: transparent; } body[data-ui-version="v2"] .gn-v2-data-grid .react-resizable-handle:hover::after { background: color-mix(in srgb, var(--gn-info) 42%, transparent); } body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-tbody > tr > td, body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-tbody .ant-table-row > .ant-table-cell { height: calc(28px * var(--gn-ui-scale, 1)); padding: 0 calc(10px * var(--gn-ui-scale, 1)) !important; font-family: var(--gn-font-mono) !important; font-size: var(--gn-data-table-font-size, var(--gn-font-size-mono, 12px)) !important; line-height: calc(28px * var(--gn-ui-scale, 1)) !important; vertical-align: middle !important; } body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-tbody > tr > td .editable-cell-value-wrap, body[data-ui-version="v2"] .gn-v2-data-grid .ant-table-tbody .ant-table-row > .ant-table-cell .editable-cell-value-wrap { min-height: calc(28px * var(--gn-ui-scale, 1)); line-height: calc(28px * var(--gn-ui-scale, 1)); } body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-virtual-inline-editing .ant-form-item, body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-virtual-inline-editing .ant-form-item-row, body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-virtual-inline-editing .ant-form-item-control, body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-virtual-inline-editing .ant-form-item-control-input, body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-virtual-inline-editing .ant-form-item-control-input-content { display: flex !important; align-items: center !important; height: 24px !important; min-height: 24px !important; } body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-virtual-inline-editing .ant-form-item { margin: 0 !important; } body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-virtual-inline-editing .ant-input, body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-virtual-inline-editing .ant-input-affix-wrapper, body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-virtual-inline-editing .ant-picker { display: flex !important; align-items: center !important; width: 100% !important; height: 24px !important; min-height: 24px !important; line-height: 24px !important; margin: 0 !important; box-sizing: border-box !important; position: static !important; } body[data-ui-version="v2"] .gn-v2-data-grid-statusbar { --gn-v2-statusbar-control-height: 26px; container-type: inline-size; container-name: gn-v2-data-grid-statusbar; height: calc(40px * var(--gn-ui-scale, 1)); min-height: calc(40px * var(--gn-ui-scale, 1)); display: flex; align-items: center; gap: calc(8px * var(--gn-ui-scale, 1)); flex-wrap: nowrap; padding: 0 calc(10px * var(--gn-ui-scale, 1)) !important; border-top: 0.5px solid var(--gn-br-1); background: var(--gn-bg-panel-2); white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--gn-br-3) transparent; flex-shrink: 0; box-sizing: border-box; } body[data-ui-version="v2"] .gn-v2-data-grid-statusbar::-webkit-scrollbar { height: 7px; } body[data-ui-version="v2"] .gn-v2-data-grid-statusbar::-webkit-scrollbar-track { background: transparent; } body[data-ui-version="v2"] .gn-v2-data-grid-statusbar::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--gn-br-3); } body[data-ui-version="v2"] .gn-v2-data-grid-status-main { display: inline-flex; align-items: center; gap: calc(8px * var(--gn-ui-scale, 1)); min-width: max-content; flex: 0 0 auto; overflow: visible; } body[data-ui-version="v2"] .gn-v2-data-grid-status-right { display: inline-flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; min-width: max-content; max-width: none; margin-left: auto; overflow: visible; } @media (max-width: 1180px) { body[data-ui-version="v2"] .gn-v2-data-grid-statusbar { overflow-x: auto; } body[data-ui-version="v2"] .gn-v2-data-grid-status-main { flex: 0 0 auto; overflow: visible; } body[data-ui-version="v2"] .gn-v2-data-grid-status-center { flex: 0 0 auto; } } body[data-ui-version="v2"] .gn-v2-data-grid-status-summary { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 0.5px solid var(--gn-br-1); border-radius: 7px; background: var(--gn-bg-panel); } body[data-ui-version="v2"] .gn-v2-data-grid-status-summary span { min-height: 22px; padding: 0 7px; border-radius: 5px; color: var(--gn-fg-4); font-family: var(--gn-font-mono); font-size: 10.5px; font-weight: 650; line-height: 22px; } body[data-ui-version="v2"] .gn-v2-data-grid-status-summary span:not(:first-child) { background: var(--gn-bg-panel-2); } body[data-ui-version="v2"] .gn-v2-data-grid-view-tabs, body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher, body[data-ui-version="v2"] .gn-v2-data-grid-status-center, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap, body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-pagination-shell, body[data-ui-version="v2"] .gn-v2-data-grid-page-find, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find { display: inline-flex; align-items: center; align-self: center; min-width: 0; } body[data-ui-version="v2"] .gn-v2-data-grid-view-tabs { height: var(--gn-v2-statusbar-control-height); min-height: var(--gn-v2-statusbar-control-height); gap: 2px; flex: 0 0 auto; } body[data-ui-version="v2"] .gn-v2-data-grid-view-tabs .ant-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 26px !important; min-height: 26px !important; line-height: 26px !important; padding: 0 calc(10px * var(--gn-ui-scale, 1)) !important; border-radius: 7px; border-color: transparent !important; font-size: var(--gn-font-size-sm, 12px) !important; } body[data-ui-version="v2"] .gn-v2-data-grid-view-tabs .ant-btn-primary { background: var(--gn-bg-active) !important; color: var(--gn-fg-1) !important; border-color: transparent !important; box-shadow: none !important; } body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher { height: var(--gn-v2-statusbar-control-height); min-height: var(--gn-v2-statusbar-control-height); gap: 6px; flex: 0 0 auto; padding-left: 4px; color: var(--gn-fg-4); font-family: var(--gn-font-mono); font-size: 10.5px; line-height: 26px; } body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher > span { display: inline-flex; align-items: center; height: var(--gn-v2-statusbar-control-height); line-height: 26px; } body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher .ant-segmented { display: inline-flex; align-items: center; height: var(--gn-v2-statusbar-control-height) !important; min-height: var(--gn-v2-statusbar-control-height) !important; padding: 2px !important; border: 0.5px solid var(--gn-br-1); border-radius: 7px; background: var(--gn-bg-panel); box-sizing: border-box; } body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher .ant-segmented-group { display: inline-flex; align-items: center; height: 20px; } body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher .ant-segmented-item { display: inline-flex; align-items: center; justify-content: center; height: 20px; min-height: 20px; border-radius: 5px; line-height: 20px; } body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher .ant-segmented-item-label { display: inline-flex; align-items: center; justify-content: center; height: 20px; min-height: 20px; padding: 0 8px; color: var(--gn-fg-3); font-size: var(--gn-font-size-sm, 12px); line-height: 20px; } body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher .ant-segmented-item-selected .ant-segmented-item-label { color: var(--gn-fg-1); } body[data-ui-version="v2"] .gn-v2-data-grid-status-center { height: var(--gn-v2-statusbar-control-height); min-height: var(--gn-v2-statusbar-control-height); gap: 4px; flex: 0 0 auto; min-width: max-content; overflow: visible; color: var(--gn-fg-4); font-family: var(--gn-font-mono); font-size: 10px; line-height: 26px; opacity: 0.88; } body[data-ui-version="v2"] .gn-v2-data-grid-status-center > span { display: inline-flex; align-items: center; height: var(--gn-v2-statusbar-control-height); flex: 0 0 auto; line-height: 26px; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-data-grid-status-center > span:not(:last-child)::after { content: ''; display: inline-block; width: 1px; height: 10px; margin-left: 6px; vertical-align: -1px; background: var(--gn-br-1); } body[data-ui-version="v2"] .gn-v2-data-grid-live { color: var(--gn-accent-2) !important; font-weight: 700; } body[data-ui-version="v2"] .gn-v2-data-grid-live::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--gn-accent); box-shadow: 0 0 0 3px var(--gn-accent-soft); vertical-align: 1px; } body[data-ui-version="v2"] .gn-v2-data-grid-page-find { height: var(--gn-v2-statusbar-control-height); min-height: var(--gn-v2-statusbar-control-height); gap: 2px; flex: 0 0 auto; max-width: 214px; margin-left: 0; overflow: visible; } body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find { display: grid !important; grid-template-columns: 180px 28px; column-gap: 4px; height: 28px; min-height: 28px; gap: 4px; flex: 0 0 auto; max-width: 244px; margin-left: 0; overflow: hidden; align-items: stretch; box-sizing: border-box; } body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find-field { display: flex; align-items: center; flex: 0 0 180px; width: 180px; min-width: 180px; height: 28px; min-height: 28px; align-self: stretch; box-sizing: border-box; } body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-select { display: flex !important; align-items: center !important; flex: 0 0 180px; height: 28px !important; min-height: 28px !important; width: 180px !important; min-width: 180px; align-self: stretch; vertical-align: top; } body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-input-affix-wrapper, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-select-selector { display: flex !important; align-items: center !important; width: 180px !important; min-width: 180px; height: 28px !important; min-height: 28px !important; line-height: 28px !important; border-radius: 6px !important; border: 0.5px solid var(--gn-br-2) !important; background: var(--gn-bg-input) !important; box-shadow: none !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; } body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn { align-self: stretch; width: 28px !important; min-width: 28px !important; height: 28px !important; min-height: 28px !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; border-width: 0.5px !important; border-style: solid !important; border-color: var(--gn-br-2) !important; border-radius: 6px !important; background: var(--gn-bg-input) !important; box-shadow: none !important; outline: none !important; box-sizing: border-box !important; vertical-align: top !important; position: relative; top: 0 !important; } body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find-submit { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 28px; width: 28px !important; min-width: 28px !important; height: 28px !important; min-height: 28px !important; align-self: stretch; } body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input-affix-wrapper { width: 160px !important; min-width: 160px; max-width: 160px !important; height: 26px !important; min-height: 26px !important; line-height: 26px !important; border-radius: 6px !important; border: 0.5px solid var(--gn-br-2) !important; background: var(--gn-bg-input) !important; box-shadow: none !important; padding-inline: 8px !important; } body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input-affix-wrapper .ant-input, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-input-affix-wrapper .ant-input { border: none !important; outline: none !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; } body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input-affix-wrapper > input.ant-input:focus, body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input-affix-wrapper > input.ant-input:focus-visible, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-input-affix-wrapper > input.ant-input:focus, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-input-affix-wrapper > input.ant-input:focus-visible { border: none !important; box-shadow: none !important; outline: none !important; background: transparent !important; } body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input-affix-wrapper.ant-input-affix-wrapper-focused, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-input-affix-wrapper.ant-input-affix-wrapper-focused { border-color: color-mix(in srgb, var(--gn-info) 38%, var(--gn-br-2)) !important; box-shadow: none !important; outline: none !important; } body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn:focus, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn:focus-visible, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn:active, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn.ant-btn-default:focus, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn.ant-btn-default:focus-visible, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn.ant-btn-icon-only:focus, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn.ant-btn-icon-only:focus-visible { outline: none !important; box-shadow: none !important; border-color: var(--gn-br-3) !important; } body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn::after, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn:focus::after, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn:focus-visible::after, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn:active::after { display: none !important; box-shadow: none !important; } body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-select-selector, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-select-focused .ant-select-selector { border-color: transparent !important; background: transparent !important; box-shadow: none !important; } body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-btn { width: 26px !important; height: 26px !important; min-height: 26px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; border-width: 0.5px !important; border-style: solid !important; border-color: var(--gn-br-2) !important; border-radius: 6px !important; background: var(--gn-bg-input) !important; box-shadow: none !important; } body[data-ui-version="v2"] .gn-v2-data-grid-page-find > span { overflow: hidden; color: var(--gn-fg-5); text-overflow: ellipsis; } body[data-ui-version="v2"] .gn-v2-data-grid-statusbar [data-grid-page-find="true"] { padding: 0; border: none; border-radius: 7px; } body[data-ui-version="v2"] .gn-v2-data-grid-statusbar [data-grid-column-quick-find="true"] { padding: 0; border: none; border-radius: 7px; } body[data-ui-version="v2"] .gn-v2-data-grid-statusbar [data-grid-view-switcher="true"] { margin-left: 0; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap { height: var(--gn-v2-statusbar-control-height); min-height: var(--gn-v2-statusbar-control-height); gap: 4px; flex: 0 1 auto; min-width: 0; max-width: 100%; margin-left: 0; padding: 0 !important; border-top: none !important; background: transparent; justify-content: flex-end !important; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap::-webkit-scrollbar { display: none; } body[data-ui-version="v2"] .gn-v2-data-grid .data-grid-pagination-shell { gap: 4px; flex: 0 0 max-content; min-width: max-content; align-items: center !important; align-self: center; justify-content: flex-start !important; flex-wrap: nowrap !important; max-width: none !important; height: 26px !important; min-height: 26px !important; padding: 0 !important; background: transparent !important; border: none !important; } body[data-ui-version="v2"] .gn-v2-data-grid-statusbar .ant-btn, body[data-ui-version="v2"] .gn-v2-data-grid-statusbar .ant-input-affix-wrapper, body[data-ui-version="v2"] .gn-v2-data-grid-statusbar .ant-select, body[data-ui-version="v2"] .gn-v2-data-grid-statusbar .ant-select-selector, body[data-ui-version="v2"] .gn-v2-data-grid-statusbar .data-grid-pagination-page-chip, body[data-ui-version="v2"] .gn-v2-data-grid-statusbar .data-grid-pagination-summary-value { box-sizing: border-box; height: var(--gn-v2-statusbar-control-height) !important; min-height: var(--gn-v2-statusbar-control-height) !important; } body[data-ui-version="v2"] .gn-v2-data-grid-statusbar .ant-btn, body[data-ui-version="v2"] .gn-v2-data-grid-statusbar .ant-btn > span, body[data-ui-version="v2"] .gn-v2-data-grid-statusbar .ant-btn .ant-btn-icon, body[data-ui-version="v2"] .gn-v2-data-grid-statusbar .anticon { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } body[data-ui-version="v2"] .gn-v2-data-grid-statusbar .ant-btn > span { height: 100%; } body[data-ui-version="v2"] .gn-v2-data-grid-statusbar .anticon svg { display: block; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-summary { display: inline-flex; align-items: center; gap: 0; margin-right: 0; padding: 0 !important; min-height: 26px !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--gn-fg-3); font-family: var(--gn-font-mono); font-size: 11.5px; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-summary-value { display: inline-flex; align-items: center; height: 26px; margin-right: 2px; color: var(--gn-fg-1); font-family: var(--gn-font-mono); font-size: 11.5px; font-weight: 700; line-height: 26px; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .ant-btn { width: 26px !important; min-width: 26px !important; height: 26px !important; min-height: 26px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center; border-width: 0.5px !important; border-style: solid !important; border-color: var(--gn-br-2) !important; border-radius: 6px !important; background: var(--gn-bg-input) !important; box-shadow: none !important; line-height: 1 !important; vertical-align: top; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap [data-grid-pagination-total-count="true"].ant-btn { width: auto !important; min-width: max-content !important; max-width: none !important; flex: 0 0 auto; gap: 4px; padding: 0 8px !important; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap [data-grid-pagination-total-count="true"].ant-btn .ant-btn-icon { margin-inline-end: 3px !important; } body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-btn:hover, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn:hover, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .ant-btn:hover { border-color: var(--gn-br-3) !important; background: var(--gn-bg-panel-2) !important; } body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-btn:disabled, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-btn:disabled, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .ant-btn:disabled { border-color: var(--gn-br-1) !important; background: var(--gn-bg-panel) !important; color: var(--gn-fg-5) !important; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .ant-btn .ant-btn-icon, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .ant-btn .anticon, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .ant-btn svg { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 12px; height: 12px; line-height: 1 !important; margin-inline-end: 0 !important; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-page-chip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 26px; min-height: 26px; padding: 0 6px; border: 0.5px solid var(--gn-br-1); border-radius: 4px; background: transparent; color: var(--gn-fg-4); font-family: var(--gn-font-mono); font-size: 11.5px; line-height: 26px; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-page-chip strong { color: var(--gn-fg-1); } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump { display: inline-flex; align-items: center; gap: 3px; height: 26px; min-height: 26px; color: var(--gn-fg-4); font-family: var(--gn-font-mono); font-size: 11px; line-height: 26px; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-label { color: var(--gn-fg-4); font-size: 11px; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-input, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-input.ant-input-number, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-button.ant-btn { height: 26px !important; min-height: 26px !important; border-width: 0.5px !important; border-style: solid !important; border-color: var(--gn-br-2) !important; border-radius: 5px !important; background: var(--gn-bg-input) !important; box-shadow: none !important; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-input, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-input.ant-input-number { display: inline-flex !important; align-items: stretch !important; width: 44px !important; min-width: 44px !important; max-width: 44px !important; line-height: 26px !important; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-input .ant-input-number-input-wrap, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-input .ant-input-number-input { height: 26px !important; line-height: 26px !important; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-input .ant-input-number-input { padding: 0 4px !important; color: var(--gn-fg-1) !important; font-family: var(--gn-font-mono); font-size: 11px !important; font-weight: 700; text-align: center; background: transparent !important; box-shadow: none !important; font-variant-numeric: tabular-nums; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-input.ant-input-number-focused, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-input.ant-input-number:focus-within { border-color: color-mix(in srgb, var(--gn-info) 38%, var(--gn-br-2)) !important; box-shadow: none !important; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-button.ant-btn { width: 26px !important; min-width: 26px !important; padding: 0 !important; color: var(--gn-fg-2) !important; font-size: 11px !important; font-weight: 700; } @container gn-v2-data-grid-statusbar (max-width: 1120px) { body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-summary { display: none; } } @container gn-v2-data-grid-statusbar (max-width: 960px) { body[data-ui-version="v2"] .gn-v2-data-grid-page-find { max-width: 154px; } body[data-ui-version="v2"] .gn-v2-data-grid-page-find .ant-input-affix-wrapper { width: 112px !important; min-width: 112px; max-width: 112px !important; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-label { display: none; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-input, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-jump-input.ant-input-number { width: 38px !important; min-width: 38px !important; max-width: 38px !important; } } @container gn-v2-data-grid-statusbar (max-width: 760px) { body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher > span { display: none; } body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-select, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-input-affix-wrapper, body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find .ant-select-selector { width: 140px !important; min-width: 140px !important; } body[data-ui-version="v2"] .gn-v2-data-grid-column-quick-find { grid-template-columns: 140px 28px !important; max-width: 180px; } } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-size-select, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-size-select.ant-select, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-size-select.ant-select-single, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-size-select.ant-select-single.ant-select-sm { display: inline-flex !important; align-items: center !important; width: 66px !important; min-width: 66px !important; max-width: 66px !important; height: 26px !important; min-height: 26px !important; line-height: 26px !important; vertical-align: top; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-size-select .ant-select-selector { height: 26px !important; min-height: 26px !important; padding: 0 20px 0 8px !important; border-radius: 5px !important; font-family: var(--gn-font-mono); font-size: 11px !important; display: flex !important; align-items: center !important; line-height: 26px !important; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-size-select .ant-select-selection-wrap, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-size-select .ant-select-selection-item { display: flex !important; align-items: center !important; justify-content: flex-start !important; height: 26px !important; line-height: 26px !important; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-size-select .ant-select-arrow { top: 50% !important; inset-inline-end: 6px !important; width: 12px; height: 12px; margin-top: 0 !important; transform: translateY(-50%) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-size-select .ant-select-arrow .anticon, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-size-select .ant-select-arrow svg { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 12px; height: 12px; line-height: 1 !important; } body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-size-select.ant-select-focused .ant-select-selector, body[data-ui-version="v2"] .gn-v2-data-grid-pagination-wrap .data-grid-pagination-size-select.ant-select-open .ant-select-selector { border-color: color-mix(in srgb, var(--gn-info) 38%, var(--gn-br-2)) !important; box-shadow: none !important; outline: none !important; } /* ─── V2 context menus, including portal-rendered custom menus ─ */ body[data-ui-version="v2"] .gn-v2-context-menu { width: 260px !important; min-width: 220px !important; border: 0.5px solid var(--gn-br-2) !important; border-radius: 10px !important; background: var(--gn-bg-panel) !important; box-shadow: var(--gn-shadow-lg) !important; color: var(--gn-fg-1) !important; overflow: hidden; } body[data-ui-version="v2"] .gn-v2-context-menu > div { color: inherit; } body[data-ui-version="v2"] .gn-v2-context-menu > div:not(:empty) { font-size: 12.5px; } body[data-ui-version="v2"] .gn-v2-table-context-menu-popup .ant-dropdown-menu { display: none !important; } body[data-ui-version="v2"] .gn-v2-table-context-menu-popup { width: 264px !important; max-width: calc(100vw - 24px); } body[data-ui-version="v2"] .gn-v2-sidebar-context-menu-portal { width: 264px; max-width: calc(100vw - 24px); } body[data-ui-version="v2"] .gn-v2-table-overview-context-menu-portal { width: 264px; max-width: calc(100vw - 24px); } body[data-ui-version="v2"] .gn-v2-table-context-menu { width: 264px; max-height: min(582px, var(--gn-v2-context-menu-max-height, calc(100vh - 28px))); display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden; padding: 0; border: 0.5px solid var(--gn-br-2); border-radius: 10px; background: var(--gn-bg-panel); color: var(--gn-fg-1); box-shadow: var(--gn-shadow-lg); font-size: 12.5px; animation: gnV2ContextMenuFadeIn 0.08s ease-out; } body[data-ui-version="v2"] .gn-v2-context-menu-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overflow-x: hidden; padding: 4px 4px 20px; box-sizing: border-box; overscroll-behavior: contain; scroll-padding-bottom: 20px; } body[data-ui-version="v2"] .gn-v2-context-menu-body::-webkit-scrollbar { width: 7px; } body[data-ui-version="v2"] .gn-v2-context-menu-body::-webkit-scrollbar-track { background: transparent; } body[data-ui-version="v2"] .gn-v2-context-menu-body::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--gn-fg-5) 58%, transparent); background-clip: padding-box; } body[data-ui-version="v2"] .gn-v2-context-menu-header { flex: 0 0 auto; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 6px; row-gap: 3px; align-items: center; padding: 10px 12px; border-bottom: 0.5px solid var(--gn-br-1); background: var(--gn-bg-panel-2); } body[data-ui-version="v2"] .gn-v2-context-menu-table-icon { width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--gn-accent); font-size: 13px; } body[data-ui-version="v2"] .gn-v2-context-menu-heading { min-width: 0; display: contents; } body[data-ui-version="v2"] .gn-v2-context-menu-heading strong { grid-column: 2; min-width: 0; overflow: hidden; color: var(--gn-fg-1); font-family: var(--gn-font-mono); font-size: 12.5px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-context-menu-heading small { grid-column: 1 / -1; overflow: hidden; color: var(--gn-fg-4); font-family: var(--gn-font-mono); font-size: 10.5px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-context-menu-engine-pill { grid-column: 3; max-width: 62px; overflow: hidden; padding: 1px 4px; border-radius: 3px; background: var(--gn-bg-active); color: var(--gn-fg-4); font-family: var(--gn-font-mono); font-size: 9px; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-context-menu-section-title { padding: 8px 12px 2px; color: var(--gn-fg-5); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } body[data-ui-version="v2"] .gn-v2-context-menu-divider { height: 1px; margin: 4px 0; background: var(--gn-br-1); } body[data-ui-version="v2"] .gn-v2-context-menu-item { width: 100%; height: 28px; display: flex; gap: 8px; align-items: center; border: 0; border-radius: 5px; padding: 0 8px 0 10px; background: transparent; color: var(--gn-fg-1); font: inherit; font-size: 12.5px; font-weight: 500; text-align: left; white-space: nowrap; cursor: default; } body[data-ui-version="v2"] .gn-v2-context-menu-item:hover { background: var(--gn-bg-active); color: var(--gn-fg-1); } body[data-ui-version="v2"] .gn-v2-context-menu-item.is-disabled, body[data-ui-version="v2"] .gn-v2-context-menu-item:disabled { opacity: 0.48; cursor: not-allowed; } body[data-ui-version="v2"] .gn-v2-context-menu-item.is-disabled:hover, body[data-ui-version="v2"] .gn-v2-context-menu-item:disabled:hover { background: transparent; color: var(--gn-fg-1); } body[data-ui-version="v2"] .gn-v2-context-menu-item.is-featured { color: var(--gn-info); } body[data-ui-version="v2"] .gn-v2-context-menu-item.is-featured:hover { background: var(--gn-info-soft); } body[data-ui-version="v2"] .gn-v2-context-menu-item.is-ai { color: var(--gn-info); } body[data-ui-version="v2"] .gn-v2-context-menu-item.is-ai:not(.is-featured) { background: transparent; } body[data-ui-version="v2"] .gn-v2-context-menu-item.is-ai:not(.is-featured):hover { background: var(--gn-info-soft); } body[data-ui-version="v2"] .gn-v2-context-menu-item.is-danger { color: var(--gn-danger); } body[data-ui-version="v2"] .gn-v2-context-menu-item.is-danger:hover { background: rgba(220, 38, 38, 0.08); } body[data-ui-version="v2"][data-theme="dark"] .gn-v2-context-menu-item.is-danger:hover { background: rgba(248, 113, 113, 0.12); } body[data-ui-version="v2"] .gn-v2-context-menu-item-icon { width: 14px; flex: 0 0 14px; display: inline-flex; align-items: center; justify-content: center; color: var(--gn-fg-4); font-size: 13px; } body[data-ui-version="v2"] .gn-v2-context-menu-item.is-featured .gn-v2-context-menu-item-icon, body[data-ui-version="v2"] .gn-v2-context-menu-item.is-ai .gn-v2-context-menu-item-icon { color: var(--gn-info); } body[data-ui-version="v2"] .gn-v2-group-context-menu .gn-v2-context-menu-item .anticon-check-square, body[data-ui-version="v2"] .gn-v2-group-context-menu .gn-v2-context-menu-item.is-selected { color: var(--gn-accent); } body[data-ui-version="v2"] .gn-v2-database-context-menu .gn-v2-context-menu-table-icon { color: var(--gn-info); } body[data-ui-version="v2"] .gn-v2-context-menu-item.is-danger .gn-v2-context-menu-item-icon { color: var(--gn-danger); } body[data-ui-version="v2"] .gn-v2-context-menu-item-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-ui-version="v2"] .gn-v2-context-menu-kbd { flex: 0 0 auto; color: var(--gn-fg-5); font-family: var(--gn-font-mono); font-size: 10.5px; font-weight: 500; text-align: center; } @keyframes gnV2ContextMenuFadeIn { from { opacity: 0; transform: translateY(-2px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }