# sql-chart-builder/trunk/asset/admin.css

SQL Chart Builder, version trunk. 485 lines.

- Page: https://pluginprobe.com/plugins/sql-chart-builder/trunk/code/asset/admin.css
- Raw: https://pluginprobe.com/plugins/sql-chart-builder/trunk/raw/asset/admin.css
- Modified: 2026-07-04T10:11:08+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/sql-chart-builder/trunk/code/asset/admin.css#L10-L20`.

```css
/* SQL Chart Builder 3.0 — admin chart builder UI */

#gvnsql-app {
    margin: 4px 0 10px;
}

.gvnsql-note {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 13px;
}

.gvnsql-note-migrate {
    background: #fff8e5;
    border: 1px solid #f0c33c;
    color: #6b5310;
}

/* ---------- tabs ---------- */

.gvnsql-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #e3e6ea;
    margin-bottom: 18px;
}

.gvnsql-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: #50575e;
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease;
}

.gvnsql-tab:hover { color: #1d2327 }

.gvnsql-tab.active {
    color: #2271b1;
    border-bottom-color: #2271b1;
}

.gvnsql-tab-num {
    display: inline-block;
    width: 19px;
    height: 19px;
    line-height: 19px;
    margin-right: 4px;
    text-align: center;
    border-radius: 50%;
    background: #e3e6ea;
    color: #50575e;
    font-size: 11px;
}

.gvnsql-tab.active .gvnsql-tab-num {
    background: #2271b1;
    color: #fff;
}

.gvnsql-section { display: none }
.gvnsql-section.active { display: block }

.gvnsql-step {
    margin: 20px 0 10px;
    font-size: 14px;
    color: #1d2327;
}

.gvnsql-section .gvnsql-step:first-child { margin-top: 4px }

.gvnsql-hint {
    color: #646970;
    font-size: 12.5px;
    margin: 6px 0 12px;
}

.gvnsql-hint code { font-size: 11.5px }

/* ---------- chart type cards ---------- */

.gvnsql-typegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.gvnsql-typecard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px 10px;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    cursor: pointer;
    color: #787c82;
    transition: all .12s ease;
    user-select: none;
}

.gvnsql-typecard:hover {
    border-color: #2271b1;
    color: #2271b1;
}

.gvnsql-typecard.selected {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1, 0 2px 6px rgba(34, 113, 177, .18);
    color: #2271b1;
    background: #f0f6fb;
}

.gvnsql-typecard input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gvnsql-typeicon svg {
    width: 34px;
    height: 34px;
    display: block;
}

.gvnsql-typelabel {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* ---------- per-type guide ---------- */

.gvnsql-guide {
    display: flex;
    gap: 16px;
    align-items: stretch;
    background: #f0f6fb;
    border: 1px solid #c5d9ea;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 13px;
}

.gvnsql-guide-text { flex: 1 1 46% }

.gvnsql-guide-text strong { display: block; margin-bottom: 4px; color: #1d2327 }

.gvnsql-guide-example {
    flex: 1 1 54%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gvnsql-guide-example code {
    display: block;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    font-size: 11.5px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 84px;
    overflow-y: auto;
}

.gvnsql-guide-example .button { align-self: flex-start }

/* ---------- SQL builder toolbar ---------- */

.gvnsql-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.gvnsql-toolbar-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.gvnsql-toolbar-group + .gvnsql-toolbar-group {
    padding-left: 10px;
    border-left: 1px solid #dcdcde;
}

.gvnsql-kw {
    appearance: none;
    border: 1px solid #c6cbd2;
    background: #fff;
    border-radius: 5px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: Consolas, Monaco, monospace;
    color: #2271b1;
    cursor: pointer;
    transition: all .1s ease;
}

.gvnsql-kw:hover {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}

.gvnsql-toolbar select {
    max-width: 180px;
    font-size: 12px;
}

/* ---------- SQL editor + autocomplete ---------- */

.gvnsql-editorwrap {
    position: relative;
}

#guaven_sqlcharts_code {
    width: 100%;
    border: 1px solid #dcdcde;
    border-radius: 0 0 8px 8px;
    padding: 12px;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.55;
    color: #1d2327;
    background: #fff;
    resize: vertical;
    box-shadow: none;
}

#guaven_sqlcharts_code:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 1px #2271b1;
    outline: none;
}

.gvnsql-mirror {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    pointer-events: none;
}

.gvnsql-ac {
    position: absolute;
    z-index: 100;
    min-width: 220px;
    max-width: 340px;
    background: #fff;
    border: 1px solid #c6cbd2;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(29, 35, 39, .16);
    overflow: hidden;
}

.gvnsql-ac-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-family: Consolas, Monaco, monospace;
    font-size: 12.5px;
    cursor: pointer;
    color: #1d2327;
}

.gvnsql-ac-item:hover,
.gvnsql-ac-item.active {
    background: #f0f6fb;
    color: #2271b1;
}

.gvnsql-ac-kind {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.gvnsql-ac-kind-keyword { background: #2271b1 }
.gvnsql-ac-kind-table   { background: #26b286 }
.gvnsql-ac-kind-column  { background: #f2a33c }
.gvnsql-ac-kind-tag     { background: #8e6bd8 }

/* ---------- column mapping panel (final step) ---------- */

.gvnsql-mapbox {
    margin-top: 22px;
    padding: 16px 18px 14px;
    background: #c5d9ea;
    border: 2px solid #ff8a00;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(255, 138, 0, .15);
}

.gvnsql-mapbox-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px !important;
}

.gvnsql-mapbox-badge {
    display: inline-block;
    padding: 2px 10px;
    background: #ff8a00;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 999px;
}

.gvnsql-mapbox-hint {
    color: #33495c !important;
    margin-bottom: 12px !important;
}

.gvnsql-mapbox .gvnsql-field label { color: #17293a }
.gvnsql-mapbox .gvnsql-field small { color: #33495c }

.gvnsql-mapbox .gvnsql-field input[type=text],
.gvnsql-mapbox .gvnsql-colselect {
    background: #fff;
    border-color: #8fb4d4;
}

.gvnsql-colselect {
    width: 100%;
    max-width: 360px;
    display: block;
}

.gvnsql-colcustom { margin-top: 6px }

/* ---------- fields grid ---------- */

.gvnsql-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
    max-width: 900px;
}

@media (max-width: 900px) {
    .gvnsql-grid2 { grid-template-columns: 1fr }
}

.gvnsql-field label {
    display: block;
    font-weight: 600;
    font-size: 12.5px;
    margin-bottom: 4px;
    color: #1d2327;
}

.gvnsql-field input[type=text],
.gvnsql-field input[type=number],
.gvnsql-field input[type=password],
.gvnsql-field select {
    width: 100%;
    max-width: 360px;
}

.gvnsql-field small {
    display: block;
    color: #646970;
    margin-top: 3px;
}

.gvnsql-inlinecheck {
    display: block;
    font-weight: normal !important;
    margin: 4px 0;
}

.gvnsql-checkgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 22px;
    max-width: 900px;
    margin-bottom: 8px;
}

.gvnsql-checkbox-row { margin-top: 12px }

/* ---------- dynamic filters builder ---------- */

.gvnsql-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    padding: 8px 10px;
    margin-bottom: 6px;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 8px;
}

.gvnsql-filter-row input[type=text] { max-width: 190px }

.gvnsql-filter-name-select { max-width: 210px }

.gvnsql-filter-remove {
    color: #b32d2e !important;
    font-size: 17px;
    text-decoration: none;
    cursor: pointer;
}

.gvnsql-raw { display: none; width: 100% }

/* ---------- colors builder ---------- */

.gvnsql-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.gvnsql-color-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: #f6f7f7;
    border: 1px solid #dcdcde;
    border-radius: 6px;
}

.gvnsql-color-item input[type=color] {
    width: 42px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.gvnsql-color-remove {
    color: #b32d2e !important;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}

.gvnsql-colors-rawinput {
    display: block !important;
    width: 100%;
    max-width: 480px;
}

```