@import url("sc-icons.css");
/**
* SC Extension Theme - SoftCreator Green (Webix 6.4.6 + ProtoUI)
* Version: 2.0.0 - merged from Resuminator resume.css + legacy webix-dark-override.css
*
* Single source of truth for UI theming across all SC Browser Extensions.
* Loaded AFTER mini.min.css, BEFORE extension-specific CSS.
*
*
*
*
* @import at top distributes the SoftCreator Icon Font (3883 .sci-* classes)
* to every consumer automatically - no per-extension needed.
*
* Dark mode is driven by the `data-theme="dark"` attribute on or
* (NOT @media prefers-color-scheme) - theme toggle is under user control via
* the 🌙/☀️ button wired by each extension's panel.js.
*
* Consumers: llm-ssh, llm-sql, llm-devconfig, youtube-summary, chatbot-screenshoter,
* resuminator, test-harness pages under _shared/storage/*.html.
*/
/* ========================================================================
1. CSS VARIABLES - LIGHT MODE (default)
======================================================================== */
:root {
/* ── SoftCreator brand palette (invariant across themes) ───────────── */
--sc-primary: #6fd42f;
--sc-secondary: #4caf50;
--sc-accent: #bcffb4;
--sc-accent-dark: #008807;
/* Legacy resume.css aliases (kept for copy-paste compatibility; all
resolve to the SoftCreator palette above). New code should prefer
the --sc-*, --bg-*, --text-*, --accent-* names. */
--primary-color: var(--sc-primary);
--secondary-color: var(--sc-secondary);
--accent-color: var(--sc-accent);
--accent-dark: var(--sc-accent-dark);
--accent-light: #dcf5dc;
--accent-hover: #eaf5ea;
--accent-active: #a5d6a7;
--light-color: #f5fff2;
--dark-color: #2c3e2e;
/* ── Background ─────────────────────────────────────────────────── */
--bg-primary: #f5fff2; /* = --light-color */
--bg-secondary: #e8f5e9;
--bg-tertiary: #dcf5dc; /* = --accent-light */
--bg-input: #ffffff;
/* ── Text ───────────────────────────────────────────────────────── */
--text-primary: #2c3e2e; /* = --dark-color */
--text-secondary: #2d4a30;
--text-muted: #5a7a5d;
--placeholder-color: rgba(44, 62, 46, 0.5);
/* ── Accent / state colors ──────────────────────────────────────── */
--accent-primary: #4caf50; /* = --sc-secondary */
--accent-success: #2e7d32;
--accent-warning: #f57f17;
--accent-danger: #d32f2f;
--accent-info: #1976d2;
--accent-button-text: #f5fff2;
/* Severity colors (resume.css names) */
--error-color: #ff5252;
--warning-color: #ffc107;
--success-color: #4caf50;
--info-color: #2196f3;
/* ── Borders & shadows ──────────────────────────────────────────── */
--border-color: #c8e6c9;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
/* ── Interactive states ─────────────────────────────────────────── */
--hover-bg: #e0f2e1;
--selected-bg: rgba(76, 175, 80, 0.15);
--selected-text: #2c3e2e;
--focus-ring: 0 0 0 3px rgba(76, 175, 80, 0.2);
/* ── Tab bar ────────────────────────────────────────────────────── */
--tab-active-bg: #f5fff2;
--tab-hover-bg: #e0f2e1;
--tab-hover-highlight-bottom: #0eff0d;
--tab-text-color: var(--selected-text);
--tab-selected-color: var(--selected-text);
--tab-selected-shadow: var(--selected-text);
--tab-selected-hover-bg: var(--bg-primary);
--tab-close-icon-color: var(--text-primary);
/* ── Status backgrounds ─────────────────────────────────────────── */
--error-bg: #ffebee;
--success-bg: #e8f5e9;
--warning-bg: #fff8e1;
--info-bg: #e3f2fd;
/* ── Progress ───────────────────────────────────────────────────── */
--progress-track: #c8e6c9;
--progress-fill: #4caf50;
/* ── Scrollbar ──────────────────────────────────────────────────── */
--scrollbar-track: #e8f5e9;
--scrollbar-thumb: #a5d6a7;
--scrollbar-thumb-hover: #81c784;
/* ── Tooltip (balloon) ──────────────────────────────────────────── */
--tooltip-bg: var(--sc-accent);
--tooltip-text: var(--dark-color);
--tooltip-border: var(--dark-color);
/* ── Form / label ───────────────────────────────────────────────── */
--form-bg: var(--bg-primary);
--form-text: var(--text-primary);
--form-border: var(--border-color);
--form-label-text: var(--text-primary);
--form-placeholder-text: rgba(44, 62, 46, 0.5);
/* ── Segmented control ──────────────────────────────────────────── */
--segment-bg: var(--bg-primary);
--segment-text: var(--text-primary);
--segment-border: var(--sc-accent);
--segment-hover-bg: var(--accent-hover);
--segment-hover-text: var(--text-primary);
--segment-active-bg: var(--sc-accent);
--segment-active-text: var(--text-primary);
--segment-selected-bg: var(--sc-secondary);
--segment-selected-text: var(--bg-primary);
--segment-selected-hover-bg: var(--sc-accent-dark);
--segment-selected-hover-text: var(--bg-primary);
--segment-selected-active-bg: var(--sc-accent-dark);
--segment-selected-active-text:var(--bg-primary);
/* ── Toolbar-button canvas ──────────────────────────────────────── */
--toolbar-button-cancel-bg: #f0f0f0;
/* ── Button ────────────────────────────────────────────────────── */
--btn-bg: var(--sc-accent);
--btn-color: var(--text-primary);
--btn-hover-bg: var(--sc-accent-dark);
--btn-hover-color: var(--accent-button-text);
/* ── SC Platform toolbar buttons (historical save/cancel/edit keys;
colours now mapped onto the SoftCreator green palette). ─────── */
--btn-save-bg: var(--sc-accent);
--btn-save-color: var(--dark-color);
--btn-cancel-bg: var(--toolbar-button-cancel-bg);
--btn-cancel-color: var(--dark-color);
--btn-delete-bg: #ffb3b3;
--btn-delete-color: var(--dark-color);
--btn-new-bg: #fcffb0;
--btn-new-bg-hover: color-mix(in srgb, var(--btn-new-bg) 50%, #fbff00);
--btn-new-color: var(--dark-color);
--btn-edit-bg: var(--sc-accent);
--btn-edit-color: var(--dark-color);
/* ── Sidebar ────────────────────────────────────────────────────── */
--sidebar-item-radius: 0 30px 30px 0;
--sidebar-right-margin: 2px;
/* ── Login background ───────────────────────────────────────────── */
/* `softcreator-background-fade.png` is a soft near-transparent overlay
(alpha ≤ 30/255 everywhere) of white wave strokes. The green tint
comes from the gradient painted underneath it - the PNG only adds
a subtle highlight, mirroring SoftCreator's own login page.
Override --login-bg-gradient-start / --login-bg-gradient-end
per-extension for bespoke branding. */
--login-bg-color: #87c734;
--login-bg-gradient-start: #b9e07a;
--login-bg-gradient-end: #6b972c;
--login-bg-image: url('../../branding/softcreator-background-fade.png');
/* ── Selection ──────────────────────────────────────────────────── */
--selection-bg: var(--selected-bg);
--selection-text: var(--selected-text);
}
/* ========================================================================
2. CSS VARIABLES - DARK MODE
Activated by or .
======================================================================== */
[data-theme="dark"] {
/* ── Background ─────────────────────────────────────────────────── */
--bg-primary: #1a291c;
--bg-secondary: #1e3220;
--bg-tertiary: #152217;
--bg-input: #243826;
/* Dark-mode aliases (for copy-pasted rules using resume.css names) */
--dark-mode-bg: #1a291c;
--dark-mode-bg-area: #345038;
--dark-mode-text: #f5fff2;
--dark-mode-border: #324634;
--dark-mode-hover: #2a3f2c;
--dark-mode-active: #3a513d;
/* ── Text ───────────────────────────────────────────────────────── */
--text-primary: #f5fff2;
--text-secondary: #b8d4ba;
--text-muted: #8aaa8d;
--placeholder-color: rgba(245, 255, 242, 0.5);
/* ── Accent / state colors ──────────────────────────────────────── */
--accent-primary: #6fd42f; /* SC primary pops on dark */
--accent-success: #4caf50;
--accent-warning: #ffc107;
--accent-danger: #ff5252;
--accent-info: #2196f3;
--accent-button-text: #f5fff2;
/* ── Borders & shadows ──────────────────────────────────────────── */
--border-color: #324634;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
/* ── Interactive states ─────────────────────────────────────────── */
--hover-bg: #2a3f2c;
--selected-bg: rgba(111, 212, 47, 0.30);
--selected-text: #f5fff2;
--focus-ring: 0 0 0 3px rgba(111, 212, 47, 0.25);
/* ── Tab bar ────────────────────────────────────────────────────── */
--tab-active-bg: #1a291c;
--tab-hover-bg: #243826;
--tab-hover-highlight-bottom: var(--sc-primary);
--tab-text-color: var(--sc-primary);
--tab-selected-color: var(--sc-primary);
--tab-selected-shadow: var(--sc-primary);
--tab-selected-hover-bg: var(--dark-mode-active);
--tab-close-icon-color: var(--text-primary);
/* ── Status backgrounds ─────────────────────────────────────────── */
--error-bg: rgba(255, 82, 82, 0.15);
--success-bg: rgba(76, 175, 80, 0.15);
--warning-bg: rgba(255, 193, 7, 0.15);
--info-bg: rgba(33, 150, 243, 0.15);
/* ── Progress ───────────────────────────────────────────────────── */
--progress-track: #2e4a30;
--progress-fill: var(--sc-primary);
/* ── Scrollbar ──────────────────────────────────────────────────── */
--scrollbar-track: #152217;
--scrollbar-thumb: #3a5a3c;
--scrollbar-thumb-hover: #4a7a4c;
/* ── Tooltip ────────────────────────────────────────────────────── */
--tooltip-bg: var(--dark-mode-bg);
--tooltip-text: var(--dark-mode-text);
--tooltip-border: var(--dark-mode-border);
/* ── Form ───────────────────────────────────────────────────────── */
--form-bg: var(--dark-mode-bg);
--form-text: var(--dark-mode-text);
--form-border: var(--dark-mode-border);
--form-label-text: var(--dark-mode-text);
--form-placeholder-text: rgba(245, 255, 242, 0.5);
/* ── Segmented ──────────────────────────────────────────────────── */
--segment-bg: var(--dark-mode-bg);
--segment-text: var(--dark-mode-text);
--segment-border: var(--dark-mode-border);
--segment-hover-bg: var(--dark-mode-hover);
--segment-hover-text: var(--dark-mode-text);
--segment-active-bg: var(--dark-mode-active);
--segment-active-text: var(--dark-mode-text);
--segment-selected-bg: var(--sc-secondary);
--segment-selected-text: var(--light-color);
--segment-selected-hover-bg: var(--sc-accent-dark);
--segment-selected-hover-text: var(--light-color);
--segment-selected-active-bg: var(--sc-accent-dark);
--segment-selected-active-text:var(--light-color);
/* ── Toolbar-button canvas ──────────────────────────────────────── */
--toolbar-button-cancel-bg: #2a2a2a;
/* ── SC Platform toolbar buttons (dark-mode text colors) ─────────
Backgrounds --sc-accent / --btn-delete-bg / --btn-new-bg stay light
in dark mode (not overridden), so button text must remain DARK for
contrast. Only --toolbar-button-cancel-bg flips to dark (#2a2a2a),
so the cancel button's text flips to light. ──────────────────── */
--btn-save-color: var(--dark-color);
--btn-cancel-color: var(--light-color);
--btn-delete-color: var(--dark-color);
--btn-new-color: var(--dark-color);
--btn-edit-color: var(--dark-color);
/* ── Login background (dark mode) ───────────────────────────────
Deep forest-green gradient so the centered form card reads as
a raised surface, not a bright hole punched into the panel. */
--login-bg-color: #1e3220;
--login-bg-gradient-start: #2a4a2a;
--login-bg-gradient-end: #132016;
}
/* ========================================================================
3. GLOBAL DEFAULTS - box model, body, headings, scrollbars, selection
======================================================================== */
* { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PT Sans', Tahoma, Arial, Helvetica, Verdana, sans-serif;
font-size: 13px;
color: var(--text-primary);
background-color: var(--bg-primary);
}
/* ── Headings ─────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
color: var(--text-primary);
font-family: 'PT Sans', Tahoma, Arial, Helvetica, Verdana, Roboto, sans-serif;
margin: 0 0 14px 0;
padding: 0;
}
h1 {
font-size: 28px; font-weight: 700; line-height: 1.2;
padding-bottom: 8px;
margin-bottom: 16px;
}
h2 {
font-size: 24px; font-weight: 600; line-height: 1.3;
padding-bottom: 6px;
border-bottom: 2px solid var(--primary-color);
}
h3 { font-size: 20px; font-weight: 600; line-height: 1.4; margin-bottom: 12px; }
h4 { font-size: 18px; font-weight: 500; line-height: 1.4; margin-bottom: 10px; }
[data-theme="dark"] h2 { border-bottom-color: var(--sc-accent); }
/* ── Custom scrollbar (page-level) ─────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::selection {
background-color: var(--selection-bg);
color: var(--selection-text);
}
::placeholder { color: var(--placeholder-color); }
button::-moz-focus-inner { border: 0; }
/* ========================================================================
4. WEBIX BASE VIEW OVERRIDES
======================================================================== */
.webix_view,
.webix_layout,
.webix_abslayout,
.webix_multiview {
background: var(--bg-primary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
font-family: sans-serif, Tahoma, Arial, Helvetica, Verdana, Roboto;
}
.webix_scroll_cont { background: var(--bg-primary) !important; }
.webix_view.webix_form {
background-color: var(--form-bg) !important;
border-color: var(--form-border) !important;
}
/* Zoom helpers (resume.css compatibility - for scaled modal windows) */
.webix_view div.zoom110,
.webix_view.webix_window.zoom110 { transform: scale(1.1); }
.webix_view div.zoom120,
.webix_view.webix_window.zoom120 { transform: scale(1.2); }
/* Generic focus - remove default outline on interactive elements */
.webix_view a.webix_list_item,
.webix_view div,
.webix_view div.webix_inp_static:focus,
.webix_view span,
.webix_view.webix_window,
button, input, select, textarea { outline: 0; }
/* ========================================================================
5. TOOLBAR
======================================================================== */
.webix_toolbar,
.webix_view.webix_toolbar,
.webix_layout_toolbar.webix_toolbar {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
.webix_toolbar:hover,
.webix_view.webix_toolbar:hover,
.webix_layout_toolbar.webix_toolbar:hover,
.webix_toolbar:active,
.webix_view.webix_toolbar:active,
.webix_layout_toolbar.webix_toolbar:active {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
}
.webix_toolbar.webix_dark { background: var(--bg-tertiary) !important; }
.webix_toolbar .webix_el_label .webix_el_box { color: var(--text-primary) !important; }
/* ========================================================================
6. BUTTONS - Generic Webix (primary / secondary / danger)
======================================================================== */
.webix_toolbar .webix_el_button button,
.webix_toolbar .webix_img_btn {
color: var(--btn-color) !important;
border: none !important;
}
.webix_toolbar .webix_el_button button:hover,
.webix_toolbar .webix_img_btn:hover {
background: var(--btn-hover-bg) !important;
color: var(--btn-hover-color) !important;
border-radius: 10px !important;
}
.webix_el_button button {
background: var(--btn-bg) !important;
color: var(--btn-color) !important;
border: none !important;
border-radius: 10px !important;
font-weight: 500 !important;
}
.webix_el_button button:hover {
background: var(--btn-hover-bg) !important;
color: var(--btn-hover-color) !important;
}
.webix_secondary button {
background: var(--btn-bg) !important;
color: var(--btn-color) !important;
border: none !important;
border-radius: 10px !important;
font-weight: 500 !important;
}
.webix_secondary button:hover {
background: var(--btn-hover-bg) !important;
color: var(--btn-hover-color) !important;
}
.webix_primary button,
.webix_el_button.webix_primary button {
background: var(--accent-primary) !important;
color: var(--accent-button-text) !important;
border: 1px solid var(--accent-primary) !important;
}
.webix_primary button:hover,
.webix_el_button.webix_primary button:hover { filter: brightness(1.1); }
.webix_danger button,
.webix_el_button.webix_danger button {
background: var(--accent-danger) !important;
color: var(--accent-button-text) !important;
border: 1px solid var(--accent-danger) !important;
}
.webix_danger button:hover,
.webix_el_button.webix_danger button:hover { filter: brightness(1.1); }
/* Toolbar-context overrides: restore transparent flavor after generic rules */
.webix_toolbar .webix_el_button.webix_primary button {
background: var(--accent-primary) !important;
color: var(--accent-button-text) !important;
border: 1px solid var(--accent-primary) !important;
}
.webix_toolbar .webix_el_button.webix_danger button {
background: var(--accent-danger) !important;
color: var(--accent-button-text) !important;
border: 1px solid var(--accent-danger) !important;
}
.webix_toolbar .webix_el_button.webix_primary button:hover {
background: var(--accent-primary) !important;
color: var(--accent-button-text) !important;
}
.webix_toolbar .webix_el_button.webix_danger button:hover {
background: var(--accent-danger) !important;
color: var(--accent-button-text) !important;
}
/* ========================================================================
7. BUTTONS - SC Platform toolbar classes (save/cancel/delete/new/edit/
import/export/copy/ai) - pill-shaped, with SoftCreator icons via :before.
======================================================================== */
.toolbar_button button,
.toolbar_button_save button,
.toolbar_button_delete button,
.toolbar_button_cancel button,
.toolbar_button_new button,
.toolbar_button_edit button,
.toolbar_button_import button,
.toolbar_button_export button,
.toolbar_button_copy button,
.toolbar_button_ai button {
border: none !important;
border-radius: 10px !important;
position: relative;
transition: all 0.2s ease;
font-weight: 500 !important;
line-height: 1 !important;
}
/* Webix `autowidth` measures the label via `.webix_measure_size.webixbutton`;
our `toolbar_button_*` class isn't in that selector, so phantom padding
here reserves wrapper width for the absolutely-positioned `:before` icon. */
.webix_measure_size.webixbutton {
padding-left: 22px !important;
}
/* Common button - .webix_el_button prefix raises specificity to (0,2,1)
so these rules beat the generic .webix_toolbar .webix_el_button button
rule (same specificity, source-order wins). Otherwise --text-primary
flips to light in dark mode and overrides the intended dark text. */
.webix_el_button.toolbar_button button {
background-color: var(--sc-accent) !important;
color: var(--btn-save-color) !important;
line-height: unset !important;
}
.webix_el_button.toolbar_button button .webix_icon_btn { color: var(--btn-save-color) !important; }
.webix_el_button.toolbar_button button:hover {
background-color: var(--sc-accent-dark) !important;
color: var(--light-color) !important;
}
.webix_el_button.toolbar_button button:hover .webix_icon_btn { color: var(--light-color) !important; }
/* Default (primary, filled) button */
.webix_el_button.toolbar_button_default button { background: var(--sc-primary) !important; }
/* Accent family (save/edit/import/export + wizard finish/next) */
.webix_el_button.toolbar_button_save button,
.webix_el_button.toolbar_button_copy button,
.webix_el_button.toolbar_button_edit button,
.webix_el_button.toolbar_button_import button,
.webix_el_button.toolbar_button_export button,
.webix_el_button.toolbar_button_wizard_finish button,
.webix_el_button.toolbar_button_wizard_next button {
background-color: var(--sc-accent) !important;
color: var(--btn-save-color) !important;
}
.webix_el_button.toolbar_button_save button:hover,
.webix_el_button.toolbar_button_save button:active,
.webix_el_button.toolbar_button_edit button:hover,
.webix_el_button.toolbar_button_edit button:active,
.webix_el_button.toolbar_button_copy button:hover,
.webix_el_button.toolbar_button_copy button:active,
.webix_el_button.toolbar_button_import button:hover,
.webix_el_button.toolbar_button_import button:active,
.webix_el_button.toolbar_button_export button:hover,
.webix_el_button.toolbar_button_export button:active,
.webix_el_button.toolbar_button_wizard_finish button:hover,
.webix_el_button.toolbar_button_wizard_finish button:active,
.webix_el_button.toolbar_button_wizard_next button:hover,
.webix_el_button.toolbar_button_wizard_next button:active {
background-color: var(--sc-accent-dark) !important;
color: var(--light-color) !important;
}
/* Danger family (delete + wizard cancel) */
.webix_el_button.toolbar_button_delete button,
.webix_el_button.toolbar_button_wizard_cancel button {
background-color: var(--btn-delete-bg) !important;
color: var(--btn-delete-color) !important;
}
.webix_el_button.toolbar_button_delete button:hover,
.webix_el_button.toolbar_button_delete button:active,
.webix_el_button.toolbar_button_wizard_cancel button:hover,
.webix_el_button.toolbar_button_wizard_cancel button:active {
background-color: var(--error-color) !important;
}
.webix_el_button.toolbar_button_delete button:hover,
.webix_el_button.toolbar_button_delete button:active {
color: var(--light-color) !important;
}
.webix_el_button.toolbar_button_wizard_cancel button:hover,
.webix_el_button.toolbar_button_wizard_cancel button:active {
color: var(--dark-mode-bg) !important;
}
/* Cancel */
.webix_el_button.toolbar_button_cancel button {
background-color: var(--toolbar-button-cancel-bg) !important;
color: var(--btn-cancel-color) !important;
}
.webix_el_button.toolbar_button_cancel button:hover,
.webix_el_button.toolbar_button_cancel button:active {
background-color: var(--dark-color) !important;
color: var(--light-color) !important;
}
/* New (yellowish) */
.webix_el_button.toolbar_button_new button {
background-color: var(--btn-new-bg) !important;
color: var(--btn-new-color) !important;
}
.webix_el_button.toolbar_button_new button:hover,
.webix_el_button.toolbar_button_new button:active {
background-color: var(--btn-new-bg-hover) !important;
color: var(--btn-new-color) !important;
}
/* Neutral family (wizard back) */
.webix_el_button.toolbar_button_wizard_back button {
background-color: rgba(115, 115, 115, 0.3) !important;
color: var(--btn-save-color) !important;
}
.webix_el_button.toolbar_button_wizard_back button:hover,
.webix_el_button.toolbar_button_wizard_back button:active {
background-color: var(--dark-color) !important;
color: var(--light-color) !important;
}
/* AI (amber) */
.webix_el_button.toolbar_button_ai button {
background-color: rgba(190, 190, 5, 0.8) !important;
color: var(--light-color) !important;
}
.webix_el_button.toolbar_button_ai button:hover {
background-color: rgba(190, 190, 5, 0.6) !important;
color: var(--dark-color) !important;
}
.webix_el_button.toolbar_button_ai button:active {
background-color: rgba(190, 190, 5, 0.8) !important;
color: var(--light-color) !important;
}
/* ── SC Icon Font pseudo-icons (provided by sc-icons.css @font-face) ── */
.toolbar_button_save button:before,
.toolbar_button_delete button:before,
.toolbar_button_cancel button:before,
.toolbar_button_new button:before,
.toolbar_button_edit button:before,
.toolbar_button_import button:before,
.toolbar_button_export button:before,
.toolbar_button_copy button:before,
.toolbar_button_ai button:before {
font-family: 'SoftCreatorIconFont';
font-weight: normal;
font-style: normal;
font-size: 16px;
vertical-align: text-top;
padding-right: 3px;
top: calc(50% - 1px);
transform: translateY(-50%);
pointer-events: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.toolbar_button_save button:before { content: "\04C1"; } /* content_save_outline */
.toolbar_button_delete button:before { content: "\0E0E"; } /* trash_can_outline */
.toolbar_button_cancel button:before { content: "\044F"; } /* close_circle_outline */
.toolbar_button_new button:before { content: "\0B39"; } /* plus - generic default for "new record" */
/* Modifier: New Folder action - use the folder_plus_outline glyph instead
of the generic "+". Apply via `css: 'toolbar_button_new toolbar_button_new_folder'`. */
.toolbar_button_new.toolbar_button_new_folder button:before { content: "\06D5"; } /* folder_plus_outline */
.toolbar_button_edit button:before { content: "\0ADB"; } /* pencil_outline */
.toolbar_button_import button:before { content: "\0519"; } /* database_import */
.toolbar_button_export button:before { content: "\0518"; } /* database_export */
.toolbar_button_copy button:before { content: "\04B7"; } /* content_copy */
.toolbar_button_ai button:before { content: "\0BE9"; } /* robot */
/* ── Wizard button classes (finish / next / back / cancel) ────────── */
.toolbar_button_wizard_finish button,
.toolbar_button_wizard_next button,
.toolbar_button_wizard_back button,
.toolbar_button_wizard_cancel button {
text-transform: uppercase;
border-radius: 15px;
padding: 6px 12px;
transition: all 0.2s ease;
font-weight: 500;
}
/* Colors for wizard buttons are inherited from families above. */
.toolbar_button_wizard_finish button:after { content: "\03C2"; font-family: 'SoftCreatorIconFont'; font-weight: normal; font-size: 16px; padding-left: 5px; vertical-align: middle; } /* check */
.toolbar_button_wizard_next button:after { content: "\017A"; font-family: 'SoftCreatorIconFont'; font-weight: normal; font-size: 16px; padding-left: 5px; vertical-align: middle; } /* arrow_right */
.toolbar_button_wizard_back button:before{ content: "\0169"; font-family: 'SoftCreatorIconFont'; font-weight: normal; font-size: 16px; padding-right: 5px; vertical-align: middle; } /* arrow_left */
.toolbar_button_wizard_cancel button:before{ content: "\0447"; font-family: 'SoftCreatorIconFont'; font-weight: normal; font-size: 16px; padding-right: 5px; vertical-align: middle; } /* close */
/* ── Universal button-icon helpers (pure-CSS, no font asset required) ──
Apply via Webix `css:` on a button, e.g.:
{ view:'button', value:'Save', css:'webix_primary btn-icon btn-icon-save' }
*/
.btn-icon button {
padding-left: 28px !important;
position: relative;
}
.btn-icon button::before {
position: absolute;
left: 9px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
line-height: 1;
display: inline-block;
width: 14px;
text-align: center;
font-family: -apple-system, "Segoe UI Symbol", "Apple Symbols", sans-serif;
font-weight: 600;
}
.btn-icon-new button::before { content: "＋"; }
.btn-icon-save button::before { content: "💾"; font-size: 12px; }
.btn-icon-delete button::before { content: "🗑"; }
.btn-icon-refresh button::before { content: "↻"; font-size: 16px; }
.btn-icon-send button::before { content: "➤"; font-size: 13px; }
.btn-icon-edit button::before { content: "✎"; }
.btn-icon-search button::before { content: "🔍"; font-size: 12px; }
.btn-icon-close button::before { content: "✕"; }
.btn-icon-up button::before { content: "↑"; }
.btn-icon-down button::before { content: "↓"; }
.btn-icon-info button::before { content: "ⓘ"; }
.btn-icon-warning button::before { content: "⚠"; }
.btn-icon-play button::before { content: "▶"; font-size: 11px; }
.btn-icon-stop button::before { content: "■"; font-size: 12px; }
.webix_primary.btn-icon button::before,
.webix_danger.btn-icon button::before { color: var(--accent-button-text); }
/* ========================================================================
8. SIDEBAR (Webix sidebar menu - used by Resuminator / multi-page layouts)
======================================================================== */
.webix_sidebar {
background-color: var(--bg-primary);
color: var(--text-primary);
}
.webix_sidebar .webix_tree_item {
color: var(--text-primary);
background-color: var(--bg-primary);
border-radius: var(--sidebar-item-radius);
margin-right: var(--sidebar-right-margin) !important;
box-shadow: none !important;
height: 60px !important;
line-height: 60px !important;
font-size: 150%;
padding-right: 10px !important;
}
.webix_sidebar .webix_sidebar_icon { padding-right: 10px !important; }
.webix_sidebar .webix_tree_item:hover {
background-color: var(--hover-bg) !important;
color: var(--text-primary) !important;
border-radius: var(--sidebar-item-radius);
margin-right: var(--sidebar-right-margin) !important;
}
.webix_sidebar .webix_tree_item.webix_selected {
background-color: var(--selected-bg) !important;
color: var(--selected-text) !important;
border-radius: var(--sidebar-item-radius);
margin-right: var(--sidebar-right-margin) !important;
}
.webix_sidebar .webix_tree_item.webix_selected span {
color: var(--sc-secondary);
font-weight: 600 !important;
}
.webix_sidebar .webix_tree_item.webix_disabled {
opacity: 0.4;
pointer-events: none;
}
.webix_sidebar .webix_tree_item.webix_selected .webix_sidebar_dir_icon,
.webix_sidebar .webix_tree_item.webix_selected .webix_sidebar_icon,
.webix_sidebar .webix_tree_item.webix_sidebar_selected .webix_sidebar_dir_icon,
.webix_sidebar .webix_tree_item.webix_sidebar_selected .webix_sidebar_icon {
color: var(--sc-accent-dark);
}
/* Sidebar popup (flyout for collapsed sidebar) */
.webix_sidebar_popup_title {
background-color: var(--bg-tertiary) !important;
border-top-right-radius: 20px !important;
border-bottom-right-radius: 20px !important;
}
.webix_sidebar_popup {
margin-top: 10px !important;
margin-left: -5px !important;
border-top-right-radius: 20px !important;
border-bottom-right-radius: 20px !important;
}
/* ========================================================================
9. TREE (non-sidebar)
======================================================================== */
.webix_tree { background: var(--bg-primary) !important; }
.webix_tree_item {
color: var(--text-primary) !important;
background-color: var(--bg-primary);
}
.webix_tree_item:hover {
background: var(--hover-bg) !important;
color: var(--text-primary) !important;
}
.webix_selected .webix_tree_item,
.webix_tree .webix_selected,
.webix_cell.webix_row_select {
background: var(--selected-bg) !important;
color: var(--selected-text) !important;
font-weight: 500;
}
.webix_selected span,
.webix_row_select span,
.webix_cell.webix_row_select span { color: inherit !important; }
.webix_tree_branch_1 > .webix_tree_item { font-weight: 500; }
.webix_tree_open,
.webix_tree_close { color: var(--text-muted) !important; }
/* ========================================================================
10. TABS / TABBAR
======================================================================== */
.webix_tab_more_icon,
.webix_all_tabs {
/* background: var(--bg-secondary) !important; */
border-color: var(--border-color) !important;
}
.webix_all_tabs .webix_tab_filler {
/* background: var(--bg-secondary) !important; */
}
.webix_all_tabs .webix_item_tab {
background-color: var(--bg-secondary) !important;
color: var(--tab-text-color) !important;
border: 0 !important;
border-radius: 16px 16px 0 0 !important;
}
.webix_all_tabs .webix_item_tab:first-child {
border-left: 0 !important;
}
.webix_all_tabs .webix_item_tab:hover {
background-color: var(--bg-input) !important;
box-shadow: inset 0 -4px var(--tab-hover-highlight-bottom);
}
.webix_all_tabs .webix_item_tab.webix_selected {
background-color: var(--bg-input) !important;
color: var(--tab-selected-color) !important;
box-shadow: inset 0 -4px var(--accent-primary);
font-weight: 500;
}
.webix_all_tabs .webix_item_tab.webix_selected:hover {
background-color: var(--bg-input) !important;
color: var(--tab-selected-color) !important;
box-shadow: inset 0 -4px var(--tab-hover-highlight-bottom);
}
.webix_all_tabs .webix_item_tab.webix_selected:focus {
background-color: var(--bg-input) !important;
color: var(--tab-selected-color) !important;
box-shadow: inset 0 -4px var(--accent-primary);
}
.webix_all_tabs .webix_item_tab.webix_selected .webix_icon {
color: var(--sc-accent-dark) !important;
}
/* ========================================================================
11. ACCORDION
======================================================================== */
.webix_accordionitem {
background-color: var(--bg-primary) !important;
border-color: var(--border-color) !important;
}
.webix_accordionitem_header {
background-color: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
border-bottom: 1px solid var(--border-color) !important;
font-weight: 600 !important;
transition: background-color 0.2s ease;
}
.webix_accordionitem_header:hover {
background-color: var(--hover-bg) !important;
color: var(--text-primary) !important;
}
.webix_accordionitem_body {
background-color: var(--bg-primary) !important;
border-color: var(--border-color) !important;
}
.webix_accordionitem_button { color: var(--text-secondary) !important; }
/* Expanded state - accent the header */
.webix_accordionitem:not(.collapsed) > .webix_accordionitem_header {
background-color: var(--sc-accent) !important;
color: var(--text-primary) !important;
}
/* Collapsed state - keep subtle (resume.css parity) */
.webix_accordionitem.collapsed .webix_accordionitem_header .webix_accordionitem_button,
.webix_accordionitem.collapsed .webix_accordionitem_header .webix_accordionitem_label .webix_icon,
.webix_accordionitem.horizontal.collapsed .webix_accordionitem_header .webix_accordionitem_button,
.webix_accordionitem.horizontal.collapsed .webix_accordionitem_header .webix_accordionitem_label .webix_icon {
color: var(--sc-accent-dark) !important;
}
/* ========================================================================
12. DATATABLE / TREETABLE - headers, cells, footer, scroll-fillers
★ FIXES the "Total records:" footer that was unstyled before merge.
======================================================================== */
.webix_dtable {
border-radius: 8px !important;
overflow: hidden !important;
/* Use inset box-shadow instead of border so the 2px accent ring is painted
inside the content box and does not consume layout space. Webix mini skin
calculates body/footer heights assuming borderWidth: 1 (2px total border);
a real 2px border (4px total) made footer.bottom overshoot the tree box. */
box-shadow: inset 0 0 0 0px var(--sc-accent) !important;
box-sizing: border-box !important;
width: calc(100% - 4px) !important;
margin: 0 auto !important;
}
.webix_dtable,
.webix_dtable .webix_ss_header,
.webix_dtable .webix_ss_footer,
.webix_dtable .webix_ss_body,
.webix_dtable .webix_ss_left,
.webix_dtable .webix_ss_right,
.webix_dtable .webix_ss_center,
.webix_dtable .webix_ss_center_scroll,
.webix_dtable .webix_ss_vscroll_header,
.webix_dtable .webix_ss_vscroll_footer {
background: var(--bg-primary) !important;
color: var(--text-primary) !important;
}
.webix_dtable .webix_ss_header { border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; }
.webix_dtable .webix_ss_footer { border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; }
.webix_dtable .webix_ss_header td {
background: var(--bg-secondary) !important;
color: var(--text-secondary) !important;
border: none !important;
border-bottom: 1px solid var(--border-color) !important;
font-family: 'PT Sans', Tahoma, Arial, Helvetica, Verdana, Roboto, sans-serif;
font-size: 9pt;
font-weight: 600;
}
.webix_dtable .webix_hcell,
.webix_dtable .webix_ss_header .webix_hcell {
background: var(--bg-secondary) !important;
color: var(--text-secondary) !important;
font-weight: 600 !important;
border-right: 1px solid var(--border-color) !important;
border-bottom: 1px solid var(--border-color) !important;
}
/* ── FOOTER ─────────────────────────────────────────────────────────
Grid footer - e.g. "Total records: 0". Was unstyled before merge.
Keep only cosmetic overrides; height is governed by Webix _footer_height. */
.webix_dtable .webix_ss_footer td,
.webix_dtable .webix_ss_vscroll_footer {
background: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
font-family: 'PT Sans', Tahoma, Arial, Helvetica, Verdana, Roboto, sans-serif;
font-size: 9pt;
font-weight: 500;
letter-spacing: 0;
border-color: transparent !important;
}
/* Footer row 2 is the content row. TR1 is a 1px separator Webix injects,
so TR2 must occupy _footer_height − 1 = 34px to keep the whole footer
within Webix's 35px allotment. */
.webix_dtable .webix_ss_footer tr:nth-child(2) {
height: 34px !important;
}
.webix_dtable .webix_ss_footer tr:nth-child(2) td {
border-top: 1px solid var(--sc-accent);
height: 34px !important;
line-height: 34px !important;
padding: 0 8px !important;
box-sizing: border-box !important;
}
.webix_dtable .webix_ss_footer tr:nth-child(2) .webix_hcell {
height: 33px !important;
line-height: 33px !important;
}
.webix_ss_footer td {
border-right: 1px solid var(--bg-tertiary);
}
.webix_dtable div.webix_ss_vscroll_footer {
border-left-color: var(--bg-tertiary) !important;
border-top-color: var(--sc-accent) !important;
}
.webix_dtable div.webix_ss_vscroll_header {
border-bottom-color: var(--sc-accent) !important;
}
/* ── Body cells ───────────────────────────────────────────────────── */
.webix_dtable .webix_ss_body { background-color: var(--bg-primary) !important; }
.webix_dtable .webix_ss_body .webix_column > div {
background-color: var(--bg-primary);
color: var(--text-primary);
border: none;
border-bottom: 1px solid var(--border-color);
}
.webix_dtable .webix_cell {
color: var(--text-primary) !important;
border-right: none !important;
}
/* Cell hover OFF - row-level hover instead */
.webix_dtable .webix_column > div:hover,
.webix_dtable .webix_column > div.webix_cell:hover,
.webix_dtable .webix_ss_body .webix_cell:hover,
.webix_dtable .webix_ss_body .webix_column > div:hover {
background-color: transparent !important;
}
/* Row hover - whole row highlighted */
.webix_dtable .webix_column > div.webix_row_hover,
.webix_dtable .webix_ss_body .webix_column > div.webix_row_hover,
.webix_dtable .webix_column > div.webix_row_hover.webix_cell,
.webix_table_row_hover,
.webix_dtable .webix_column > div.webix_table_row_hover {
background-color: var(--hover-bg) !important;
color: var(--text-primary) !important;
}
/* Selected row */
.webix_dtable .webix_column > div.webix_row_select,
.webix_dtable .webix_column > div.webix_selected,
.webix_dtable .webix_ss_body .webix_column > div.webix_row_select,
.webix_dtable .webix_ss_body .webix_column > div.webix_selected {
background-color: var(--selected-bg) !important;
color: var(--selected-text) !important;
}
.webix_dtable .webix_select_mark > div.webix_row_select {
box-shadow: inset 2px 0 var(--sc-secondary) !important;
}
/* Last column - no right border */
.webix_column.webix_last > div,
.webix_hs_center td.webix_last,
.webix_hs_right td.webix_last {
border-right: none !important;
}
.webix_dtable .webix_column.webix_last > .webix_cell,
.webix_dtable .webix_column.webix_last > .webix_hcell {
border-right: none !important;
}
.webix_hcell { font-weight: 600; }
.webix_block_selection,
.webix_cell, .webix_hcell,
.webix_ss_footer td, .webix_ss_header td,
.webix_table_cell,
.webix_view.webix_table_cell { box-sizing: border-box; }
/* Drag ghost column + ss header */
.webix_dd_drag_column,
.webix_ss_header,
.webix_ss_header td,
.webix_ss_vscroll_header {
background: var(--bg-primary) !important;
color: var(--text-primary) !important;
font-family: 'PT Sans', Tahoma, Arial, Helvetica, Verdana, Roboto, sans-serif;
font-size: 9pt;
font-weight: 500;
letter-spacing: 0;
}
.webix_ss_vscroll_header {
border-bottom: 1px solid var(--bg-tertiary);
border-left: 1px solid var(--bg-tertiary);
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* ========================================================================
13. SEGMENTED CONTROL
======================================================================== */
.webix_segment_0,
.webix_segment_1,
.webix_segment_N {
-webkit-appearance: none;
font-family: 'PT Sans', Tahoma, sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
outline: none;
background: rgba(188, 255, 180, 0.3);
color: var(--segment-text);
border: 1px solid var(--segment-border);
cursor: pointer;
padding: 0;
border-radius: 0;
}
.webix_segment_0 {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.webix_segment_N {
height: 100%;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.webix_segment_N:first-child {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.webix_segment_0:hover,
.webix_segment_1:hover,
.webix_segment_N:hover,
.webix_segment_0:focus,
.webix_segment_1:focus,
.webix_segment_N:focus {
background-color: rgba(188, 255, 180, 0.5);
color: var(--segment-hover-text);
}
.webix_segment_0:active,
.webix_segment_1:active,
.webix_segment_N:active {
background-color: rgba(188, 255, 180, 0.7);
color: var(--segment-active-text);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.webix_segment_0.webix_selected,
.webix_segment_1.webix_selected,
.webix_segment_N.webix_selected {
background: var(--segment-selected-bg);
border-color: var(--segment-selected-bg);
color: var(--segment-selected-text);
}
.webix_segment_0.webix_selected:hover,
.webix_segment_1.webix_selected:hover,
.webix_segment_N.webix_selected:hover,
.webix_segment_0.webix_selected:focus,
.webix_segment_1.webix_selected:focus,
.webix_segment_N.webix_selected:focus {
background-color: var(--segment-selected-hover-bg);
color: var(--segment-selected-hover-text);
}
.webix_segment_0.webix_selected:active,
.webix_segment_1.webix_selected:active,
.webix_segment_N.webix_selected:active {
background-color: var(--segment-selected-active-bg);
color: var(--segment-selected-active-text);
}
.webix_all_segments .webix_segment_1,
.webix_all_segments .webix_segment_N {
margin-left: 1px;
border-left: none;
}
/* Dark-mode variant - tinted green panels */
[data-theme="dark"] .webix_segment_0,
[data-theme="dark"] .webix_segment_1,
[data-theme="dark"] .webix_segment_N {
background-color: rgba(111, 212, 47, 0.2);
color: var(--dark-mode-text);
border-color: var(--dark-mode-border);
}
/* ========================================================================
14. SWITCH (boolean toggle)
======================================================================== */
.webix_switch_box {
background-color: #f4f5f9 !important;
color: var(--dark-color) !important;
}
.webix_switch_box.webix_switch_on {
background-color: var(--sc-accent) !important;
color: var(--dark-color) !important;
}
.webix_switch_box .webix_switch_text {
background-color: var(--sc-accent) !important;
color: var(--dark-color);
padding-top: 2px;
}
[data-theme="dark"] .webix_switch_box {
border: 2px solid var(--dark-mode-hover) !important;
border-radius: 60px;
box-sizing: border-box;
background-color: var(--dark-mode-hover) !important;
color: var(--dark-mode-text) !important;
}
[data-theme="dark"] .webix_switch_box.webix_switch_on {
background-color: var(--sc-primary) !important;
color: var(--dark-mode-bg) !important;
}
[data-theme="dark"] .webix_switch_box .webix_switch_text {
background-color: var(--dark-mode-hover) !important;
color: var(--dark-mode-text) !important;
}
/* ========================================================================
15. FORM ELEMENTS - text, textarea, search, combo, richselect, datepicker
======================================================================== */
.webix_el_text input,
.webix_el_textarea textarea,
.webix_el_search input,
.webix_el_combo input,
.webix_el_datepicker input,
.webix_el_colorpicker input {
background-color: var(--bg-input) !important;
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: 4px;
}
.webix_el_text input:focus,
.webix_el_textarea textarea:focus,
.webix_el_search input:focus,
.webix_el_combo input:focus,
.webix_el_datepicker input:focus,
.webix_el_colorpicker input:focus {
background-color: var(--bg-input) !important;
color: var(--text-primary);
border: 1px solid var(--sc-primary);
outline: none;
box-shadow: var(--focus-ring);
}
/* Labels (form + inline) */
label,
.webix_inp_label,
.webix_label_left,
.webix_label_right,
.webix_form .webix_inp_label,
.webix_form label,
.webix_el_box .webix_inp_label,
.webix_el_box .webix_inp_top_label,
.webix_view .webix_inp_label {
color: var(--form-label-text) !important;
font-weight: 500 !important;
vertical-align: -webkit-baseline-middle;
}
.webix_inp_label {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Static (readonly / richselect display) */
.webix_inp_static,
div.webix_inp_static,
.webix_el_select select {
background-color: var(--bg-input) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 4px !important;
}
/* Richselect / Combo boxes (.webix_el_box removes double border) */
.webix_el_colorpicker .webix_el_box,
.webix_el_combo .webix_el_box,
.webix_el_datepicker .webix_el_box,
.webix_el_richselect .webix_el_box,
.webix_el_search .webix_el_box {
border: 0 solid transparent;
}
.webix_view.webix_control.webix_el_richselect,
.webix_view.webix_control.webix_el_richselect input,
.webix_view.webix_control.webix_el_richselect .webix_inp_static,
.webix_view.webix_control.webix_el_richselect .webix_el_box {
/* background-color: var(--bg-input) !important; */
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
.webix_view.webix_control.webix_el_richselect input::placeholder {
color: var(--form-placeholder-text) !important;
}
/* Multicombo */
.webix_multicombo_tag,
.webix_multicombo_value {
background-color: rgb(255, 255, 157);
color: var(--dark-color);
font-size: 100%;
font-weight: 500;
border-radius: 3px;
}
.webix_multicombo_delete { color: var(--dark-color); }
[data-theme="dark"] .webix_multicombo_tag,
[data-theme="dark"] .webix_multicombo_value {
background-color: var(--dark-mode-hover) !important;
color: var(--dark-mode-text) !important;
}
[data-theme="dark"] .webix_multicombo_delete { color: var(--dark-mode-text) !important; }
.webix_view.webix_control.webix_multicombo,
.webix_view.webix_control.webix_multicombo input,
.webix_multicombo input {
background-color: var(--bg-input) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
.webix_view.webix_control.webix_multicombo input::placeholder,
.webix_view.webix_control.webix_el_text input::placeholder {
color: var(--form-placeholder-text) !important;
}
/* Textarea */
.webix_el_textarea textarea {
border: 1px solid var(--border-color);
height: 100%;
margin: 0;
padding: 5px 12px;
color: var(--text-primary);
resize: none;
font-size: 14px;
font-family: 'PT Sans', Tahoma, sans-serif;
background-color: var(--bg-input);
border-radius: 2px;
}
.webix_el_textarea textarea:focus {
border: 1px solid var(--sc-primary);
outline: none;
}
.webix_el_textarea .webix_inp_label {
padding-top: 10px;
color: var(--text-primary);
font-size: 14px;
}
/* Fieldset */
.webix_fieldset fieldset {
border: 1px solid var(--border-color);
margin: 0;
padding: 5px 8px;
}
.webix_fieldset legend {
color: var(--text-primary);
font-size: 12px;
padding: 0 8px;
text-transform: uppercase;
transform: translateY(5px);
}
[data-theme="dark"] .webix_fieldset legend { color: var(--dark-mode-text); }
/* Checkbox */
.webix_el_checkbox .webix_label_right { color: var(--text-primary) !important; }
.webix_el_checkbox .webix_custom_checkbox,
.webix_el_checkbox .webix_inp_checkbox_border {
background: var(--bg-input) !important;
border: 1px solid var(--border-color) !important;
}
.webix_el_checkbox .webix_custom_checkbox:before { color: var(--text-primary) !important; }
.webix_el_checkbox .webix_checkbox_1 .webix_inp_checkbox_border {
border-color: var(--sc-accent-dark) !important;
background: var(--sc-accent-dark) !important;
}
.webix_checkbox_1 .webix_custom_checkbox,
.webix_custom_checkbox:focus { color: var(--sc-accent-dark) !important; }
[data-theme="dark"] .webix_checkbox_1 .webix_custom_checkbox,
[data-theme="dark"] .webix_custom_checkbox:focus { color: var(--sc-primary) !important; }
/* Counter */
.webix_el_counter .webix_inp_counter_value {
background: var(--bg-input) !important;
color: var(--text-primary) !important;
border-top: 1px solid var(--border-color) !important;
border-bottom: 1px solid var(--border-color) !important;
}
.webix_el_counter .webix_inp_counter_next,
.webix_el_counter .webix_inp_counter_prev {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
}
.webix_el_counter .webix_inp_counter_next:hover,
.webix_el_counter .webix_inp_counter_prev:hover { background: var(--hover-bg) !important; }
/* Disabled / readonly */
.webix_disabled_view input,
.webix_disabled_view textarea,
input[readonly] {
background: var(--bg-tertiary) !important;
color: var(--text-muted) !important;
}
/* Form container */
.webix_form,
.webix_form .webix_view { background: var(--bg-primary) !important; }
.webix_form .webix_el_box { color: var(--text-primary) !important; }
/* Monaco editor label (inside ProtoUI Control 2016 toolbar) */
.webix_view.webix_control.webix_el_label,
.editor_label,
.webix_toolbar .webix_el_label { color: var(--text-primary) !important; }
.webix_el_box,
.webix_toolbar .webix_el_label .webix_el_box { color: var(--text-primary) !important; }
/* Tabbar control outer box */
.webix_view.webix_control.webix_el_tabbar {
background-color: var(--bg-primary) !important;
color: var(--text-primary) !important;
border-color: var(#ffffff00) !important;
}
/* ========================================================================
16. POPUP / SUGGEST / LIST / MENU
======================================================================== */
.webix_popup,
.webix_suggest {
background: var(--bg-secondary) !important;
border: 1px solid var(--border-color) !important;
box-shadow: var(--shadow-lg) !important;
}
.webix_list_item {
color: var(--text-primary) !important;
background: transparent !important;
border-bottom-color: var(--border-color) !important;
place-content: space-evenly;
}
.webix_list_item:hover {
background-color: var(--hover-bg) !important;
color: var(--text-primary) !important;
}
.webix_list .webix_selected,
.webix_list_item.webix_selected {
background-color: var(--selected-bg) !important;
color: var(--selected-text) !important;
}
.webix_menu,
.webix_menu-x {
background-color: var(--bg-primary) !important;
}
.webix_menu .webix_list_item,
.webix_menu-x .webix_list_item {
background-color: var(--bg-primary) !important;
color: var(--text-primary) !important;
}
.webix_menu .webix_list_item:hover,
.webix_menu-x .webix_list_item:hover,
.webix_menu .webix_list_item.webix_selected {
background-color: var(--hover-bg) !important;
color: var(--text-primary) !important;
}
.webix_ss_filter,
.webix_ss_filter td,
.webix_ss_filter input,
.webix_hcell input {
background-color: var(--bg-primary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
[data-theme="dark"] .webix_menu,
[data-theme="dark"] .webix_menu .webix_list_item {
background-color: var(--dark-mode-bg) !important;
color: var(--dark-mode-text) !important;
}
[data-theme="dark"] .webix_menu .webix_list_item:hover,
[data-theme="dark"] .webix_menu .webix_list_item.webix_selected {
background-color: var(--dark-mode-hover) !important;
color: var(--dark-mode-text) !important;
}
/* ========================================================================
17. WINDOW / MODAL
======================================================================== */
.webix_window,
.webix_modal_box {
background-color: var(--bg-primary) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
border-color: var(--border-color) !important;
box-shadow: var(--shadow-lg) !important;
}
.webix_win_head {
background-color: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border-bottom: 1px solid var(--border-color) !important;
}
.webix_win_body { background-color: var(--bg-primary) !important; }
.webix_modal_box .webix_popup_title,
.webix_window .webix_popup_title,
.webix_popup_title {
background: var(--bg-tertiary) !important;
color: var(--text-primary) !important;
border-bottom: 1px solid var(--border-color) !important;
}
.webix_popup_text { color: var(--text-primary) !important; }
.webix_window .webix_header {
background-color: var(--bg-primary);
color: var(--text-primary);
}
.webix_window .webix_header:hover {
background-color: var(--bg-primary);
color: var(--text-primary);
cursor: grab;
}
/* Grab generic section headers */
.webix_header {
background-color: var(--bg-secondary);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
}
.webix_header:hover {
background-color: var(--hover-bg);
color: var(--text-primary);
}
.webix_section {
background-color: var(--bg-secondary);
color: var(--text-primary);
}
/* ========================================================================
18. TOOLTIP - balloon with left-pointing arrow + pop animation
======================================================================== */
.webix_tooltip {
background-color: var(--tooltip-bg);
color: var(--tooltip-text);
border: 1px solid var(--tooltip-border);
border-radius: 10px;
padding: 8px 12px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
margin-left: 10px;
max-width: min(800px, 60vw);
width: fit-content;
animation: balloon-pop 0.2s ease-out;
transform-origin: left center;
}
.webix_tooltip:before {
content: "";
position: absolute;
top: 5px;
left: -10px;
border-width: 5px 10px 10px 0;
border-style: solid;
border-color: transparent var(--tooltip-border) transparent transparent;
}
.webix_tooltip:after {
content: "";
position: absolute;
top: 5px;
left: -8px;
border-width: 4px 9px 9px 0;
border-style: solid;
border-color: transparent var(--tooltip-bg) transparent transparent;
}
@keyframes balloon-pop {
0% { transform: scale(0.8); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* ========================================================================
19. MESSAGE / NOTIFICATIONS (webix.message + webix_message_area)
======================================================================== */
/* webix.message ignores the JS `width` option - width is set here, once. */
.webix_message_area {
width: auto !important;
min-width: 300px !important;
max-width: 600px !important;
}
.webix_message {
background-color: var(--info-color);
color: white;
border-radius: 12px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
animation: message-appear 0.3s ease-out;
width: auto !important;
min-width: 420px !important;
max-width: 600px !important;
padding: 12px 16px !important;
white-space: normal !important;
line-height: 1.4 !important;
word-wrap: break-word;
}
.webix_message.webix_error { background-color: var(--error-color); color: white; }
.webix_message.webix_success { background-color: var(--success-color); color: var(--dark-color); }
.webix_message.webix_warning { background-color: var(--warning-color); color: var(--dark-color); }
.webix_message_area .webix_info,
.webix_message_area .webix_success,
.webix_message_area .webix_warning,
.webix_message_area .webix_error,
.webix_message_area .webix_debug {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
box-shadow: var(--shadow) !important;
}
.webix_message_area .webix_success { border-left: 4px solid var(--sc-primary) !important; }
.webix_message_area .webix_error,
.webix_message_area .webix_warning { border-left: 4px solid var(--accent-danger) !important; }
@keyframes message-appear {
0% { transform: translateY(-20px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* ========================================================================
20. LOADING / OVERLAYS
======================================================================== */
.webix_loading {
background-color: rgba(44, 62, 46, 0.1);
color: var(--text-primary);
}
.webix_loading_overlay {
background-color: rgba(44, 62, 46, 0.1);
color: var(--text-primary);
}
.webix_modal {
background-color: rgba(44, 62, 46, 0.7);
color: var(--light-color);
}
[data-theme="dark"] .webix_loading,
[data-theme="dark"] .webix_loading_overlay {
background-color: rgba(245, 255, 242, 0.1);
color: var(--dark-mode-text);
}
[data-theme="dark"] .webix_modal {
background-color: rgba(245, 255, 242, 0.7);
color: var(--dark-mode-bg);
}
/* ========================================================================
21. RESIZER & SCROLLBAR (Webix internal)
======================================================================== */
.webix_resizer {
background: var(--border-color) !important;
width: 3px !important;
min-width: 3px !important;
max-width: 3px !important;
}
.webix_resizer.vertical { cursor: ew-resize; }
.webix_resizer.horizontal { cursor: ns-resize; }
.webix_resizer:hover { background: var(--sc-primary) !important; }
.webix_scroll_x,
.webix_scroll_y { background: var(--scrollbar-track) !important; }
.webix_scroll_x div,
.webix_scroll_y div {
background: var(--scrollbar-thumb) !important;
border-radius: 3px !important;
}
/* Dark-mode overrides for datatable header/footer - resume.css parity */
[data-theme="dark"] .webix_dtable .webix_ss_header,
[data-theme="dark"] .webix_dtable .webix_ss_header td,
[data-theme="dark"] .webix_dtable .webix_ss_footer,
[data-theme="dark"] .webix_dtable .webix_ss_footer td {
background: var(--dark-mode-hover) !important;
color: var(--dark-mode-text) !important;
border-color: var(--dark-mode-border) !important;
}
[data-theme="dark"] .webix_dtable .webix_ss_footer td,
[data-theme="dark"] .webix_dtable .webix_ss_vscroll_footer {
background: var(--dark-mode-bg) !important;
color: var(--dark-mode-text) !important;
border-color: var(--dark-mode-border) !important;
}
[data-theme="dark"] .webix_ss_footer td {
border-right: 1px solid var(--dark-mode-border);
border-top: 1px solid var(--dark-mode-border);
}
[data-theme="dark"] .webix_dtable div.webix_ss_vscroll_footer {
border-left-color: var(--dark-mode-border) !important;
border-top-color: var(--dark-mode-border) !important;
}
[data-theme="dark"] .webix_dd_drag_column,
[data-theme="dark"] .webix_ss_vscroll_header {
background: var(--dark-mode-bg) !important;
color: var(--dark-mode-text) !important;
border-color: var(--dark-mode-border) !important;
}
[data-theme="dark"] .webix_ss_vscroll_header {
border-bottom: 1px solid var(--dark-mode-border);
border-left: 1px solid var(--dark-mode-border);
}
[data-theme="dark"] .webix_sidebar_popup_title { background-color: var(--dark-mode-hover) !important; }
[data-theme="dark"] .webix_accordionitem_header {
border-bottom: 1px solid var(--dark-mode-border) !important;
}
[data-theme="dark"] .webix_ss_filter,
[data-theme="dark"] .webix_ss_filter td,
[data-theme="dark"] .webix_ss_filter input,
[data-theme="dark"] .webix_hcell,
[data-theme="dark"] .webix_hcell input {
background-color: var(--dark-mode-hover) !important;
color: var(--dark-mode-text) !important;
border-color: var(--dark-mode-border) !important;
}
[data-theme="dark"] .webix_last,
[data-theme="dark"] .webix_last_row,
[data-theme="dark"] .webix_column.webix_last > div,
[data-theme="dark"] .webix_hs_center td.webix_last,
[data-theme="dark"] .webix_hs_right td.webix_last {
background-color: var(--dark-mode-bg) !important;
color: var(--dark-mode-text) !important;
border-color: var(--dark-mode-border) !important;
}
[data-theme="dark"] .webix_all_tabs .webix_tab_filler {
background-color: var(--dark-mode-bg);
}
/* ========================================================================
22. LOGIN BACKGROUND WRAPPER - generic skeleton
Used by sc-login-skeleton.js; image path is extension-relative
(override --login-bg-image per-extension to customize the photo).
.background-login-wrapper - full-viewport variant (modal/standalone login
pages, height:100vh).
.sc-login-bg-cell - tab-scoped variant (fills the parent Webix cell
only; use when embedding SCLoginSkeleton.buildInline inside a multiview
cell such as the Corp tab).
======================================================================== */
.background-login-wrapper {
/* Stack the translucent wave PNG over the gradient so the waves read as
a soft highlight on top of the brand colours instead of as bright
strokes against a saturated solid. */
background-image:
var(--login-bg-image),
linear-gradient(135deg, var(--login-bg-gradient-start), var(--login-bg-gradient-end)) !important;
background-size: cover, auto !important;
background-position: center, center !important;
background-repeat: no-repeat, no-repeat !important;
height: 100vh !important;
background-color: var(--login-bg-color) !important;
}
/* `!important` on every background- property is required: the generic
.webix_view/.webix_layout/.webix_multiview rule above sets
`background: var(--bg-primary) !important` as shorthand, which would
otherwise reset background-image to none on the cell itself and make
every descendant layer opaque, covering the image. */
.sc-login-bg-cell {
background-image:
var(--login-bg-image),
linear-gradient(135deg, var(--login-bg-gradient-start), var(--login-bg-gradient-end)) !important;
background-size: cover, auto !important;
background-position: center, center !important;
background-repeat: no-repeat, no-repeat !important;
background-color: var(--login-bg-color) !important;
}
/* All inner layout/spacer/template layers must be transparent so the cell's
background-image shows through. The form card below gets its white bg
explicitly re-applied. */
.sc-login-bg-cell .webix_view,
.sc-login-bg-cell .webix_layout,
.sc-login-bg-cell .webix_abslayout,
.sc-login-bg-cell .webix_multiview {
background: transparent !important;
}
.sc-login-bg-cell .webix_form {
background-color: var(--bg-primary) !important;
}
/* Auxiliary classes used inside sc-login-skeleton.js */
.reset_password_label {
font-size: 14px;
color: var(--text-secondary);
padding: 8px 0;
}
/* ========================================================================
23. SC EXTENSION COMPONENT CLASSES (shared widgets beyond raw Webix)
======================================================================== */
/* ── Section labels inside forms ─── */
.form-section-label-wx {
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.5px;
}
/* ── Tree item custom classes ─── */
.wx-tree-icon {
display: inline-block;
width: 20px;
text-align: center;
margin-right: 4px;
font-size: 14px;
}
.wx-tree-label { font-size: 13px; }
.wx-tree-label-server { opacity: 0.75; }
.wx-tree-cloud {
font-size: 9px;
opacity: 0.4;
margin-right: 2px;
vertical-align: middle;
}
.wx-tree-desc {
font-size: 11px;
color: var(--text-muted);
margin-left: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Play button in tree rows */
.wx-tree-play {
display: none;
float: right;
padding: 0 4px;
margin-right: 4px;
font-size: 11px;
color: var(--accent-primary);
cursor: pointer;
opacity: 0.7;
line-height: inherit;
}
.webix_cell:hover .wx-tree-play,
.webix_row_select .wx-tree-play { display: inline-block; }
.wx-tree-play:hover { opacity: 1; transform: scale(1.2); }
/* ── Detail panel (header, info, readonly note) ─── */
.wx-detail-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
border-bottom: 1px solid var(--border-color);
}
.wx-detail-header .wx-detail-icon { font-size: 24px; }
.wx-detail-header .wx-detail-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.wx-detail-info {
padding: 8px 12px;
font-size: 12px;
color: var(--text-secondary);
}
.wx-readonly-note {
font-size: 11px;
color: var(--text-muted);
padding: 8px 12px;
font-style: italic;
}
/* Generic Webix toolbar + buttons */
.webix_toolbar {
display: flex;
gap: 6px;
/* padding: 8px 12px; */
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
box-sizing: border-box !important;
}
.wx-btn-use, .wx-btn-edit, .wx-btn-delete {
padding: 5px 14px;
font-size: 12px;
border-radius: 4px;
cursor: pointer;
}
.wx-btn-use {
font-weight: 600;
border: none;
background: var(--accent-primary);
color: var(--accent-button-text);
}
.wx-btn-use:hover { opacity: 0.9; }
.wx-btn-edit {
border: 1px solid var(--border-color);
background: var(--bg-primary);
color: var(--text-primary);
}
.wx-btn-edit:hover { background: var(--hover-bg); }
.wx-btn-delete {
border: none;
background: var(--accent-danger);
color: var(--accent-button-text);
}
.wx-btn-delete:hover { opacity: 0.9; }
/* ── Meta badges ─── */
.wx-badge {
font-size: 10px;
padding: 1px 6px;
border-radius: 3px;
display: inline-block;
}
.wx-badge-var { background: var(--bg-secondary); color: var(--accent-primary); }
.wx-badge-device { background: var(--bg-secondary); color: var(--text-secondary); }
.wx-badge-tag { background: var(--accent-primary); color: var(--accent-button-text); }
/* ── Sync status bar ─── */
.actions-sync-status-bar {
background: var(--bg-secondary) !important;
color: var(--text-muted) !important;
font-size: 11px !important;
padding: 2px 8px !important;
border-top: 1px solid var(--border-color) !important;
box-sizing: border-box !important;
}
.actions-sync-status-bar .webix_template {
padding: 0 !important;
line-height: 18px !important;
box-sizing: border-box !important;
}
/* ── Empty state ─── */
.webix-empty-state {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: var(--text-muted);
font-size: 13px;
}
/* ── Generic tree + resizer border cleanup ─── */
.sc-tree-col .webix_view { border-right: none !important; }
.sc-detail-col .webix_view { border-left: none !important; }
/* ── Info box (SSH Proxy, tips, etc.) ─── */
.sc-info-box {
padding: 10px 12px;
background: var(--info-bg);
border-radius: 6px;
font-size: 12px;
line-height: 1.5;
color: var(--text-primary);
}
.sc-info-box a {
color: var(--accent-primary);
text-decoration: underline;
}
.sc-info-box a:hover { color: var(--sc-accent-dark); }
/* ── Loading spinner ─── */
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-loading-spinner {
width: 24px;
height: 24px;
border: 3px solid var(--border-color);
border-top-color: var(--accent-primary);
border-radius: 50%;
animation: sc-spin 0.8s linear infinite;
margin: 0 auto;
}
/* ── scfieldset: collapsible variant ─── */
.sc-fieldset-collapsible > fieldset { padding-left: 0 !important; }
.sc-fieldset-legend-collapsible {
display: flex !important;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
padding-left: 0 !important;
}
.sc-fieldset-legend-right {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.sc-fieldset-chevron {
font-size: 10px;
color: var(--text-secondary);
margin-left: 8px;
flex-shrink: 0;
transition: color 0.15s ease;
}
.sc-fieldset-legend-collapsible:hover .sc-fieldset-chevron,
.sc-fieldset-legend-collapsible:hover .sc-fieldset-ellipsis {
color: var(--accent-primary);
}
.sc-fieldset-ellipsis {
display: none;
color: var(--text-muted);
letter-spacing: 2px;
font-size: 14px;
line-height: 1;
padding: 0 2px;
transition: color 0.15s ease;
}
.sc-fieldset-collapsed .sc-fieldset-ellipsis { display: inline-block; }
.sc-fieldset-collapsed > fieldset > *:not(legend) { display: none !important; }
.sc-fieldset-collapsed > fieldset { padding-bottom: 0 !important; }
/* ── Connection test status (inline panel next to Test Connection button) ─── */
.engine-test-row { height: auto !important; }
.connection-test-status-wrap { height: auto !important; }
.connection-test-status-wrap .webix_template { padding: 1px 9pt !important; }
.connection-test-status-inner.status-success { color: var(--accent-success); }
.connection-test-status-inner.status-error { color: var(--accent-danger); }
.connection-test-status-inner.status-testing { color: var(--text-muted); }
/* ── Chat-bubble classes (used by ChatSimulatorUI / Convai) ─── */
.chat-msg-user { background: rgba(37, 99, 235, 0.18) !important; }
.chat-msg-bot { background: rgba(75, 85, 99, 0.22) !important; }
/* ========================================================================
24. UTILITY
======================================================================== */
.sc-hidden { display: none !important; }