/* ========================================================================== Apex UI Refresh — apex-refresh.css April 2026 Single stylesheet for all UI modernization overrides. Loaded AFTER existing CSS so these rules take priority. Strategy: - CSS custom properties in :root define the design tokens - Override ProUI/Bootstrap selectors to modernize in place - Page-specific overrides use scoped selectors - Tailwind utility classes handle layout/spacing in HTML ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design Tokens (CSS Custom Properties) -------------------------------------------------------------------------- */ :root { /* Semantic theme tokens */ --apex-accent: #1f6feb; --apex-accent-strong: #1558c0; --apex-accent-soft: #dbeafe; --apex-bg-app: #eef3f8; --apex-bg-surface-1: #ffffff; --apex-bg-surface-2: #f7f9fc; --apex-bg-elevated: #ffffff; --apex-border-subtle: #d7dee7; --apex-border-strong: #b7c3d4; --apex-text-primary: #142033; --apex-text-secondary: #5c6c82; --apex-text-light: #8c9ab0; --apex-text-inverse: #ffffff; --apex-nav-bg: #122033; --apex-nav-text: #ffffff; --apex-brand-bar-bg: #122033; --apex-brand-bar-text: #d9e4f4; --apex-sidebar-bg: #122033; --apex-sidebar-text: #d9e4f4; --apex-shadow-color: rgba(15, 23, 42, 0.16); /* Existing token aliases, now driven by semantic theme tokens */ --apex-primary: var(--apex-accent); --apex-primary-light: var(--apex-accent-strong); --apex-primary-dark: var(--apex-nav-bg); --apex-primary-subtle: var(--apex-accent-soft); --apex-accent-dark: var(--apex-accent-strong); --apex-secondary: #5C99CF; /* Neutrals */ --apex-text: var(--apex-text-primary); --apex-text-muted: var(--apex-text-secondary); --apex-bg: var(--apex-bg-app); --apex-bg-card: var(--apex-bg-surface-1); --apex-border: var(--apex-border-subtle); /* Feedback */ --apex-success: #16a34a; --apex-warning: #eab308; --apex-danger: #dc2626; --apex-info: #0ea5e9; /* Shape */ --apex-radius-sm: 4px; --apex-radius: 8px; --apex-radius-lg: 12px; --apex-radius-xl: 16px; --apex-radius-full: 9999px; /* Shadows — modern, subtle, layered */ --apex-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --apex-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); --apex-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06); --apex-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); /* Typography */ --apex-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --apex-font-size-xs: 0.75rem; /* 12px */ --apex-font-size-sm: 0.8125rem; /* 13px */ --apex-font-size-base: 0.875rem; /* 14px */ --apex-font-size-lg: 1rem; /* 16px */ --apex-font-size-xl: 1.25rem; /* 20px */ --apex-font-size-2xl: 1.5rem; /* 24px */ /* Transitions */ --apex-transition: 150ms ease; } /* -------------------------------------------------------------------------- 1a. Per-Theme Token Overrides These [data-apex-theme] attribute selectors override the :root defaults for each named theme. The attribute is set on by TriSysProUI.ApplyThemeSelection() in js/app.js. Every theme provides the same token set as :root, so any rule using a CSS custom property automatically reflects the active theme without needing any JavaScript to rewrite inline styles. -------------------------------------------------------------------------- */ /* Light (default) — clean blue-on-white, professional tone */ html[data-apex-theme="apex-light"] { --apex-accent: #1f6feb; --apex-accent-strong: #1558c0; --apex-accent-soft: #dbeafe; --apex-bg-app: #eef3f8; --apex-bg-surface-1: #ffffff; --apex-bg-surface-2: #f7f9fc; --apex-bg-elevated: #ffffff; --apex-border-subtle: #d7dee7; --apex-border-strong: #b7c3d4; --apex-text-primary: #142033; --apex-text-secondary: #5c6c82; --apex-text-light: #8c9ab0; --apex-text-inverse: #ffffff; --apex-nav-bg: #122033; --apex-nav-text: #ffffff; --apex-sidebar-bg: #122033; --apex-sidebar-text: #d9e4f4; } /* Cupcake — warm stone/tan tones, light sidebar */ html[data-apex-theme="apex-cupcake"] { --apex-accent: #946b43; --apex-accent-strong: #7b5533; --apex-accent-soft: #e9ddd0; --apex-bg-app: #f4efe8; --apex-bg-surface-1: #fffdf9; --apex-bg-surface-2: #ede4da; --apex-bg-elevated: #fffaf3; --apex-border-subtle: #ddcdbd; --apex-border-strong: #c8b29c; --apex-text-primary: #34291f; --apex-text-secondary: #6e5b4b; --apex-text-light: #9f8b78; --apex-text-inverse: #fffaf4; --apex-nav-bg: #4c3929; --apex-nav-text: #fff7ef; --apex-sidebar-bg: #5b4431; --apex-sidebar-text: #f0e3d3; } /* Dark — deep navy background, sky-blue accent, the standard dark-mode theme */ html[data-apex-theme="apex-dark"] { --apex-accent: #64d2ff; --apex-accent-strong: #1fb7f2; --apex-accent-soft: #123447; --apex-bg-app: #08111b; --apex-bg-surface-1: #101a27; --apex-bg-surface-2: #172333; --apex-bg-elevated: #132031; --apex-border-subtle: #27384d; --apex-border-strong: #39526f; --apex-text-primary: #eef6ff; --apex-text-secondary: #b3c5da; --apex-text-light: #7e97b2; --apex-text-inverse: #07111b; --apex-nav-bg: #091523; --apex-nav-text: #eef6ff; --apex-sidebar-bg: #0d1724; --apex-sidebar-text: #d6e5f7; } /* Bumblebee — vivid amber/yellow accent, dark sidebar */ html[data-apex-theme="apex-bumblebee"] { --apex-accent: #ffb703; --apex-accent-strong: #e09a00; --apex-accent-soft: #fff1bf; --apex-bg-app: #fffaf0; --apex-bg-surface-1: #ffffff; --apex-bg-surface-2: #fff4d4; --apex-bg-elevated: #ffffff; --apex-border-subtle: #f0d487; --apex-border-strong: #d8b458; --apex-text-primary: #2b2112; --apex-text-secondary: #645335; --apex-text-light: #987f53; --apex-text-inverse: #1d160b; --apex-nav-bg: #2c2414; --apex-nav-text: #fff6de; --apex-sidebar-bg: #332814; --apex-sidebar-text: #f7e9b8; } /* Emerald — fresh green accent, deep forest sidebar */ html[data-apex-theme="apex-emerald"] { --apex-accent: #3bb273; --apex-accent-strong: #258f58; --apex-accent-soft: #d7f1e2; --apex-bg-app: #f3fbf6; --apex-bg-surface-1: #ffffff; --apex-bg-surface-2: #e6f6ed; --apex-bg-elevated: #ffffff; --apex-border-subtle: #bfe3cd; --apex-border-strong: #91c3a5; --apex-text-primary: #173127; --apex-text-secondary: #4e6f62; --apex-text-light: #7e9d90; --apex-text-inverse: #f7fff9; --apex-nav-bg: #20463b; --apex-nav-text: #effcf4; --apex-sidebar-bg: #275244; --apex-sidebar-text: #dff5e8; } /* Corporate — mid-blue accent, steel-blue sidebar — business-neutral */ html[data-apex-theme="apex-corporate"] { --apex-accent: #2286c9; --apex-accent-strong: #176ea7; --apex-accent-soft: #d6eaf7; --apex-bg-app: #f4f7fb; --apex-bg-surface-1: #ffffff; --apex-bg-surface-2: #eaf0f6; --apex-bg-elevated: #ffffff; --apex-border-subtle: #c9d5e1; --apex-border-strong: #9fb3c7; --apex-text-primary: #1c2a3b; --apex-text-secondary: #5d7187; --apex-text-light: #8b9daf; --apex-text-inverse: #f8fbff; --apex-nav-bg: #324055; --apex-nav-text: #f5f8fc; --apex-sidebar-bg: #3a4b62; --apex-sidebar-text: #dbe4ef; } /* Disable pull-to-refresh and overscroll bounce on mobile. Must be on BOTH html and body for Android Chrome compatibility. */ html, body { overscroll-behavior: none; } body { color: var(--apex-text-primary); background-color: var(--apex-bg-app); } /* Global thin scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--apex-border-strong) transparent; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-thumb { background: var(--apex-border-strong); border-radius: 3px; } *::-webkit-scrollbar-track { background: transparent; } /* -------------------------------------------------------------------------- 1a. Global — Montserrat on key chrome elements -------------------------------------------------------------------------- */ #sidebar .sidebar-content, #sidebar .sidebar-content a, header.navbar .navbar-brand, header.navbar .nav > li > a { font-family: var(--apex-font-family); } /* -------------------------------------------------------------------------- 1b. Top Navigation Bar (header.navbar) -------------------------------------------------------------------------- */ /* Bar background — clean white with subtle bottom border */ header.navbar.navbar-default { background-color: var(--apex-bg-elevated); border-bottom: 1px solid var(--apex-border-subtle); box-shadow: var(--apex-shadow-sm); } header.navbar.navbar-inverse { background-color: var(--apex-brand-bar-bg); border-bottom: 1px solid var(--apex-brand-bar-bg); box-shadow: none; } /* Nav items — white text always, lighter blue hover */ header.navbar .nav.navbar-nav-custom > li > a { color: var(--apex-brand-bar-text) !important; font-size: 1.1875rem; transition: background-color var(--apex-transition), color var(--apex-transition); border-radius: var(--apex-radius-sm); margin: 0 2px; padding: 5px 7px; line-height: 40px; min-width: 44px; text-align: center; } /* Hamburger icon — larger */ header.navbar #show-hide-nav-bar i.fa-bars { font-size: 1.25rem; } header.navbar .nav.navbar-nav-custom > li > a *, header.navbar .nav.navbar-nav-custom > li > a .gi, header.navbar .nav.navbar-nav-custom > li > a .hi, header.navbar .nav.navbar-nav-custom > li > a .si, header.navbar .nav.navbar-nav-custom > li > a .fi, header.navbar .nav.navbar-nav-custom > li > a .fa, header.navbar .nav.navbar-nav-custom > li > a span { color: var(--apex-brand-bar-text) !important; opacity: 1 !important; } header.navbar .nav.navbar-nav-custom > li > a:hover, header.navbar .nav.navbar-nav-custom > li > a:focus, header.navbar .nav.navbar-nav-custom > li > a:hover *, header.navbar .nav.navbar-nav-custom > li > a:focus * { background-color: var(--apex-accent-strong); color: var(--apex-text-inverse) !important; } header.navbar .nav.navbar-nav-custom > li.open > a, header.navbar .nav.navbar-nav-custom > li.open > a * { background-color: var(--apex-accent); color: var(--apex-text-inverse) !important; } /* Nav icons — slightly larger for clarity */ header.navbar .nav.navbar-nav-custom > li > a > i { font-size: 1.125rem; } /* Search box in navbar */ header.navbar #trisys-search { font-family: var(--apex-font-family); font-size: 1.1875rem; border: 1px solid var(--apex-border); border-radius: var(--apex-radius) !important; padding: 6px 12px; transition: border-color var(--apex-transition), box-shadow var(--apex-transition); } header.navbar #trisys-search:focus { border-color: var(--apex-primary); box-shadow: 0 0 0 3px rgba(38, 79, 162, 0.15); outline: none; } /* Dropdown menus from navbar */ header.navbar .dropdown-menu { font-family: var(--apex-font-family); background-color: var(--apex-bg-elevated); border: 1px solid var(--apex-border-subtle); border-radius: var(--apex-radius); box-shadow: var(--apex-shadow-lg); padding: 6px 0; } header.navbar .dropdown-menu > li > a { font-size: 1.1875rem; padding: 8px 16px; color: var(--apex-text-primary); transition: background-color var(--apex-transition); } header.navbar .dropdown-menu.dropdown-custom > li { font-size: 1.1875rem; } /* History dropdown — Back / Forward navigation buttons */ #history-drop-down-menu-block { width: 350px !important; } #history-drop-down-menu-block .btn-group-justified { display: flex !important; justify-content: space-between; padding: 4px 10px; } #history-drop-down-menu-block .btn-group-justified .btn { display: flex !important; align-items: center; justify-content: center; flex: 0 0 37.5%; font-family: var(--apex-font-family); font-size: 1rem; font-weight: 600; padding: 8px 14px; border-radius: var(--apex-radius) !important; line-height: 1.4; } /* Icon inside Forward button — move to end (after text) */ #history-menu-go-forward .fa { float: none !important; order: 2; margin-left: 6px; margin-right: 0; } /* Icon inside Back button — keep before text */ #history-menu-go-back .fa { float: none !important; margin-right: 6px; } /* Intro.js tour — space between Back and Next buttons, Close left-aligned */ .introjs-tooltipbuttons { display: flex !important; align-items: center; } .introjs-tooltipbuttons .introjs-skipbutton { margin-right: auto; } .introjs-tooltipbuttons .introjs-prevbutton { margin-right: 5px; } header.navbar .dropdown-menu > li > a:hover { background-color: var(--apex-accent); color: var(--apex-text-inverse); } /* -------------------------------------------------------------------------- 1c. Sidebar (#sidebar) -------------------------------------------------------------------------- */ /* Sidebar background — deeper, richer navy */ #page-container, #sidebar, #sidebar-alt { background-color: var(--apex-sidebar-bg); } /* Brand bar at top of sidebar — matches toolbar */ #sidebar .sidebar-brand { background: var(--apex-brand-bar-bg); color: var(--apex-brand-bar-text); font-family: var(--apex-font-family); font-weight: 600; letter-spacing: 0.02em; } #sidebar .sidebar-title { /* color-mix: semi-transparent tint of the sidebar text for a subtle divider background */ background: color-mix(in srgb, var(--apex-sidebar-text) 25%, transparent); } /* Sidebar divider titles — collapsed to 1px hairlines */ #sidebar .sidebar-title { height: 1px !important; line-height: 1px !important; padding: 0 !important; overflow: hidden; } /* User section */ #sidebar .sidebar-user { background: color-mix(in srgb, var(--apex-sidebar-bg) 94%, var(--apex-text-primary) 6%); border-bottom: 1px solid color-mix(in srgb, var(--apex-sidebar-text) 25%, transparent); } #sidebar .sidebar-user-name { color: var(--apex-sidebar-text); font-family: var(--apex-font-family); font-weight: 600; } #sidebar .sidebar-user-links { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; margin-top: 4px; white-space: nowrap; } #sidebar .sidebar-user-links a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; margin-right: 0; border-radius: var(--apex-radius-full); background: var(--apex-brand-bar-bg); color: var(--apex-brand-bar-text) !important; opacity: 1; filter: none; transition: background-color var(--apex-transition), color var(--apex-transition), transform var(--apex-transition); } #sidebar .sidebar-user-links a:hover, #sidebar .sidebar-user-links a:focus { background: var(--apex-accent); color: var(--apex-text-inverse) !important; text-decoration: none; opacity: 1; filter: none; transform: translateY(-1px); } #sidebar .sidebar-user-links a > i { font-size: 12px; color: inherit !important; } /* Nav menu items */ #sidebar .sidebar-nav a { color: var(--apex-sidebar-text) !important; font-size: 1.1875rem !important; font-weight: 500; cursor: pointer; transition: background-color var(--apex-transition), color var(--apex-transition), border-color var(--apex-transition); border-left: 4px solid transparent !important; padding: 0 10px 0 6px !important; } #sidebar .sidebar-nav a:hover { background: var(--apex-accent-soft); color: var(--apex-text-primary); border-left: 4px solid var(--apex-accent) !important; padding: 0 10px 0 6px !important; } #sidebar .sidebar-nav a.open { background: transparent; color: var(--apex-sidebar-text); border-left: 4px solid var(--apex-accent) !important; padding: 0 10px 0 6px !important; } #sidebar .sidebar-nav a.active, #sidebar .sidebar-nav li.active > a { background: transparent; color: var(--apex-sidebar-text); border-left: 4px solid var(--apex-accent) !important; padding: 0 10px 0 6px !important; font-weight: 600; } /* Sub-menu items — slightly indented, smaller */ #sidebar .sidebar-nav ul a { font-size: 0.9375rem; font-weight: 400; color: var(--apex-text-secondary); padding-left: 20px; } #sidebar .sidebar-nav ul a:hover { color: var(--apex-text-primary); background: var(--apex-accent-soft); } #sidebar .sidebar-nav ul, #sidebar .sidebar-nav ul ul, #sidebar .sidebar-nav .sidebar-nav-menu.open + ul { background: transparent; } /* Nav icons — consistent sizing */ #sidebar .sidebar-nav .sidebar-nav-icon { font-size: 1.0625rem; width: 24px; text-align: center; margin-right: 8px; color: var(--apex-sidebar-text); transition: color var(--apex-transition); } #sidebar .sidebar-nav a:hover .sidebar-nav-icon, #sidebar .sidebar-nav a.active .sidebar-nav-icon { color: var(--apex-accent); } #sidebar .sidebar-nav li.active > ul, #sidebar .sidebar-nav li.active > ul a.active { background: transparent; } /* Section headers in sidebar */ #sidebar .sidebar-header { font-family: var(--apex-font-family); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--apex-text-light); padding: 16px 15px 6px; } /* Activity counts section */ #sidebar #nav-bar-activities { border-top: none; } #sidebar #nav-bar-activities a { font-size: 0.875rem; } /* Scrollbar in sidebar — thin, subtle */ #sidebar .sidebar-content::-webkit-scrollbar { width: 4px; } #sidebar .sidebar-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 2px; } /* -------------------------------------------------------------------------- 1d. Content Area Background -------------------------------------------------------------------------- */ #divFormContentRow { background-color: var(--apex-bg-app) !important; } /* content-top bar — search criteria header etc. */ html[data-apex-theme] .content-top { background-color: var(--apex-bg-surface-2); border-bottom-color: var(--apex-border-subtle); } /* -------------------------------------------------------------------------- 1e. Footer -------------------------------------------------------------------------- */ #footer-block { font-family: var(--apex-font-family); font-size: 0.8125rem; color: var(--apex-text-muted); background-color: var(--apex-bg-elevated); border-top: 1px solid var(--apex-border-subtle); } /* Scroll-to-top button — use theme accent instead of hardcoded #1bbae1 */ html[data-apex-theme] #to-top:hover { background-color: var(--apex-accent) !important; color: var(--apex-text-inverse) !important; } /* -------------------------------------------------------------------------- 1f. UserOptions Theme Gallery -------------------------------------------------------------------------- */ #user-options-themes-block .apex-theme-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; background: transparent; } #user-options-themes-block .apex-theme-gallery { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 16px; } #user-options-themes-block .apex-theme-grid-featured { grid-template-columns: repeat(2, minmax(150px, 180px)); justify-content: center; } #user-options-themes-block .apex-theme-grid-library { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } #user-options-themes-block .apex-theme-option { margin: 0; } #user-options-themes-block .apex-theme-card { display: block; min-height: 100%; border: 1px solid var(--apex-border-subtle); border-radius: 12px; background: color-mix(in srgb, var(--apex-bg-elevated) 92%, var(--apex-bg-app) 8%); box-shadow: none; overflow: hidden; text-decoration: none !important; transition: transform var(--apex-transition), box-shadow var(--apex-transition), border-color var(--apex-transition); } #user-options-themes-block .apex-theme-card:hover, #user-options-themes-block .apex-theme-card:focus { transform: translateY(-1px); box-shadow: var(--apex-shadow-sm); border-color: var(--apex-accent); } #user-options-themes-block .apex-theme-option.active .apex-theme-card { border-color: var(--apex-accent); box-shadow: 0 0 0 2px var(--apex-accent-soft); } #user-options-themes-block .apex-theme-card-preview { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 10px 10px 4px; } #user-options-themes-block .apex-theme-card-preview-light { background: transparent; } #user-options-themes-block .apex-theme-card-preview-stone { background: transparent; } #user-options-themes-block .apex-theme-card-preview-midnight { background: transparent; } #user-options-themes-block .apex-theme-card-preview-bumblebee, #user-options-themes-block .apex-theme-card-preview-emerald, #user-options-themes-block .apex-theme-card-preview-corporate, #user-options-themes-block .apex-theme-card-preview-cupcake, #user-options-themes-block .apex-theme-card-preview-dark { background: transparent; } #user-options-themes-block .apex-theme-preview-strip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; background: #ffffff; border: 1px solid #d7dee7; } #user-options-themes-block .apex-theme-preview-dot { width: 13px; height: 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } #user-options-themes-block .apex-theme-preview-dot-light-1 { background: #4f46e5; } #user-options-themes-block .apex-theme-preview-dot-light-2 { background: #ec4899; } #user-options-themes-block .apex-theme-preview-dot-light-3 { background: #14b8a6; } #user-options-themes-block .apex-theme-preview-dot-light-4 { background: #111111; } #user-options-themes-block .apex-theme-preview-dot-stone-1 { background: #4c3929; } #user-options-themes-block .apex-theme-preview-dot-stone-2 { background: #946b43; } #user-options-themes-block .apex-theme-preview-dot-stone-3 { background: #e9ddd0; } #user-options-themes-block .apex-theme-preview-dot-stone-4 { background: #34291f; } #user-options-themes-block .apex-theme-preview-dot-cupcake-1 { background: #65e6d8; } #user-options-themes-block .apex-theme-preview-dot-cupcake-2 { background: #f5c5e0; } #user-options-themes-block .apex-theme-preview-dot-cupcake-3 { background: #ffd7a8; } #user-options-themes-block .apex-theme-preview-dot-cupcake-4 { background: #3b3340; } #user-options-themes-block .apex-theme-preview-dot-bumblebee-1 { background: #ffb703; } #user-options-themes-block .apex-theme-preview-dot-bumblebee-2 { background: #ffcf33; } #user-options-themes-block .apex-theme-preview-dot-bumblebee-3 { background: #111111; } #user-options-themes-block .apex-theme-preview-dot-bumblebee-4 { background: #605547; } #user-options-themes-block .apex-theme-preview-dot-emerald-1 { background: #63c77b; } #user-options-themes-block .apex-theme-preview-dot-emerald-2 { background: #4e8df5; } #user-options-themes-block .apex-theme-preview-dot-emerald-3 { background: #ff8e6b; } #user-options-themes-block .apex-theme-preview-dot-emerald-4 { background: #445268; } #user-options-themes-block .apex-theme-preview-dot-corporate-1 { background: #2286c9; } #user-options-themes-block .apex-theme-preview-dot-corporate-2 { background: #667f9b; } #user-options-themes-block .apex-theme-preview-dot-corporate-3 { background: #0e7c66; } #user-options-themes-block .apex-theme-preview-dot-corporate-4 { background: #111111; } #user-options-themes-block .apex-theme-preview-dot-midnight-1 { background: #64d2ff; } #user-options-themes-block .apex-theme-preview-dot-midnight-2 { background: #8b5cf6; } #user-options-themes-block .apex-theme-preview-dot-midnight-3 { background: #14b8a6; } #user-options-themes-block .apex-theme-preview-dot-midnight-4 { background: #0b1220; } #user-options-themes-block .apex-theme-card-preview-midnight .apex-theme-preview-strip, #user-options-themes-block .apex-theme-card-preview-dark .apex-theme-preview-strip { background: #1a2332; border-color: #253246; } #user-options-themes-block .apex-theme-card-body { display: block !important; padding: 0 10px 10px; text-align: center; } #user-options-themes-block .apex-theme-card-name { display: block !important; font-family: var(--apex-font-family); font-size: 0.9375rem; font-weight: 700; color: var(--apex-text-primary); line-height: 1.2; min-height: 1.2em; visibility: visible !important; opacity: 1 !important; } #user-options-current-theme-family { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; padding: 4px 10px; border-radius: 999px; background: var(--apex-accent-soft); color: var(--apex-accent-strong); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } #user-options-themes-block .apex-theme-status { margin-top: 8px; } #user-options-themes-block .apex-theme-status > p:first-child { margin-top: 2px; } #user-options-themes-block .apex-theme-status p { margin-bottom: 8px; } /* -------------------------------------------------------------------------- 2. Form Styles — applies to ALL forms loaded into #divFormContentRow -------------------------------------------------------------------------- */ /* Page header — cleaner, lighter, aligned with card panels */ #divFormContentRow .content-header { background: var(--apex-bg); border: none; padding: 0 15px; margin: 0 0 10px; border-radius: var(--apex-radius-lg); } #divFormContentRow .content-header .header-section { padding: 16px 10px; text-align: center; } #divFormContentRow .content-header .header-section h1 { font-family: var(--apex-font-family); font-size: 2.25rem; font-weight: 700; color: var(--apex-primary); letter-spacing: -0.025em; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } #divFormContentRow .content-header .header-section h1 i { font-size: 36px; color: var(--apex-primary-light); float: none; display: inline; margin: 0 16px 0 0; line-height: inherit; } #divFormContentRow .content-header .header-section h1 small { flex-basis: 100%; font-size: 1.1875rem; color: var(--apex-text-muted); font-weight: 400; margin-top: 10px; } /* Prices button inside Registration content-header */ #trisys-registration-form-prices-button-header { margin-top: 10px; } #trisys-registration-form-prices-button-header .btn { font-family: var(--apex-font-family); font-size: 1.125rem; font-weight: 600; padding: 8px 20px; border-radius: var(--apex-radius); } /* Outer block container — must use theme token so dark themes don't show white */ html[data-apex-theme] .block { background-color: var(--apex-bg-card); } /* Card blocks — rounded, shadow */ /* NOTE: Viewport-fill for small forms (e.g. Forgotten Password) NOT solved. :only-child works for single-card forms but breaks multi-card (Login). min-height through Bootstrap 3 float grid doesn't propagate. Parked. */ #divFormContentRow .block .block { background: var(--apex-bg-card); border: 1px solid var(--apex-border); border-radius: var(--apex-radius-lg); box-shadow: var(--apex-shadow-md); padding: 24px 20px 1px; margin-bottom: 20px; } /* Block title — subtle divider, flex for vertical centering */ #divFormContentRow .block .block-title { background: transparent; border-bottom: 1px solid var(--apex-border); padding: 0; display: flex; flex-wrap: wrap; align-items: center; min-height: 44px; } /* Form caption: block.full has padding 20px 15px (main.css) */ #divFormContentRow .block.full > .block-title { margin: -20px -15px 12px; } /* Tab panel caption: .block .block has padding 24px 20px */ #divFormContentRow .block .block > .block-title { margin: -24px -20px 12px; } /* Neutralise all floats inside flex block-title */ #divFormContentRow .block .block-title > * { float: none !important; } /* Bordered shaded panel — ContactUs */ #ContactUsBlock { background: var(--apex-bg-card); border: 1px solid var(--apex-border); border-radius: var(--apex-radius-lg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } /* Bordered shaded panels — PlugIns form */ div[id^="plugins-"].block { background: var(--apex-bg-card); border: 1px solid var(--apex-border); border-radius: var(--apex-radius-lg); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } #divFormContentRow .block .block-title h2 { font-family: var(--apex-font-family); font-size: 14px !important; font-weight: bolder; padding: 0 15px; margin: 0; flex: 1 1 auto; line-height: 48px; } #divFormContentRow .block .block-title h3 { font-family: var(--apex-font-family); font-size: 14px !important; padding: 0 15px; margin: 0; flex: 1 1 auto; line-height: 48px; } #divFormContentRow .block .block-title h2 strong { font-weight: 700; } /* Block-options — flex child, pushed right */ #divFormContentRow .block .block-title .block-options { display: flex; align-items: center; gap: 4px; padding: 0 6px; min-height: 0; line-height: normal; margin: 0; margin-left: auto; order: 99; } #divFormContentRow .block .block-title .block-options .btn, #divFormContentRow .block .block-title .block-options .btn-group > .btn { margin-top: 0; margin-bottom: 0; } /* Form caption icon */ #divFormContentRow .block .block-title > i { padding: 0 0 0 15px !important; line-height: 48px; } /* Form bordered — cleaner separators, contained */ #divFormContentRow .block .form-bordered { margin: 0; } #divFormContentRow .block .form-horizontal { padding-bottom: 10px; } #divFormContentRow .block .form-bordered .form-group { border-bottom: 1px solid var(--apex-border); border-radius: 0; padding: 16px 20px; } #divFormContentRow .block .form-bordered .form-group:last-child { border-bottom: none; } /* Form actions row — clean background, contained within card */ #divFormContentRow .block .form-bordered .form-group.form-actions { background: var(--apex-bg); border-radius: 0; margin: 0; padding: 16px 20px; } #divFormContentRow .block .form-bordered .form-group.form-actions:last-child { border-radius: 0 0 var(--apex-radius-lg) var(--apex-radius-lg); } /* Labels — top-aligned with padding to match input text baseline */ #divFormContentRow .block .form-group { display: flex; flex-wrap: wrap; align-items: flex-start; } #divFormContentRow .block .control-label { font-family: var(--apex-font-family); font-size: 1.125rem; font-weight: 600; color: var(--apex-text); padding-top: 4px !important; float: none; white-space: nowrap; } /* Toggle/checkbox rows — label aligns with centre of shorter control */ #login-form-remember-me-block .control-label { padding-top: 8px !important; position: static; top: auto; } /* Input fields — height matched to KendoUI combos (12px / 5px padding / 1.4286 line-height ≈ 27px) */ #divFormContentRow .block .form-control, #divFormContentRow .block input[type="text"].form-control, #divFormContentRow .block input[type="password"].form-control, #divFormContentRow .block input[type="email"].form-control { font-family: var(--apex-font-family); font-size: 12px; color: var(--apex-text); background-color: var(--apex-bg-surface-1); border: 1px solid var(--apex-border-strong); border-radius: var(--apex-radius); padding: 7px 8px !important; height: auto !important; margin: 0; line-height: 1.4285714286 !important; transition: border-color var(--apex-transition), box-shadow var(--apex-transition); } /* Textareas — same padding but auto height for multi-line */ #divFormContentRow .block textarea.form-control { background-color: var(--apex-bg-surface-1); height: auto !important; } /* Textarea rows — label aligns to top, not centre */ #divFormContentRow .block .form-group:has(textarea) { align-items: flex-start; } #divFormContentRow .block .form-group:has(textarea) .control-label { padding-top: 8px !important; } #divFormContentRow .block .form-control:focus { border-color: var(--apex-primary); box-shadow: 0 0 0 3px rgba(38, 79, 162, 0.15); outline: none; } #divFormContentRow .block .form-control::placeholder { color: var(--apex-text-light); } /* Input groups — gap between field and button */ #divFormContentRow .block .input-group .input-group-btn { padding-left: 8px; } /* KendoUI widgets — match form-control appearance */ #divFormContentRow .block .k-widget, #divFormContentRow .block .k-dropdown, #divFormContentRow .block .k-combobox { font-family: var(--apex-font-family); font-size: 12px; border: 1px solid var(--apex-border-strong); border-radius: var(--apex-radius); } #divFormContentRow .block .k-dropdown-wrap, #divFormContentRow .block .k-picker-wrap { border-radius: var(--apex-radius); padding: 4px 8px; box-sizing: border-box; } /* Hide caret in KendoUI dropdown/combobox inputs */ #divFormContentRow .block .k-dropdown .k-input, #divFormContentRow .block .k-combobox .k-input { caret-color: transparent; } /* Help text */ #divFormContentRow .block .help-block { font-size: 1.0625rem; color: var(--apex-text-light); margin-top: 6px; } /* Modal forms use the same legacy block/form markup, but render outside #divFormContentRow, so they need their own token-driven surface rules. */ html[data-apex-theme] .modal-content { background: var(--apex-bg-card); border: 1px solid var(--apex-accent) !important; color: var(--apex-text-primary); } html[data-apex-theme] .modal-header { background: var(--apex-accent) !important; border-bottom: 1px solid var(--apex-accent-strong); color: var(--apex-text-inverse) !important; } html[data-apex-theme] .modal-title, html[data-apex-theme] .modal-header .close, html[data-apex-theme] .modal-header i { color: var(--apex-text-inverse) !important; } html[data-apex-theme] .modal-body, html[data-apex-theme] .modal-footer { color: var(--apex-text-primary); } /* Images inside modal bodies must never overflow the modal width */ html[data-apex-theme] .modal-body img { max-width: 100%; height: auto; } #trisys-modal-close-button, #trisys-modal-close-button:hover, #trisys-modal-close-button:focus, html[data-apex-theme] #trisys-modal-close-button, html[data-apex-theme] #trisys-modal-close-button:hover, html[data-apex-theme] #trisys-modal-close-button:focus { color: var(--apex-text-inverse) !important; opacity: 1 !important; text-shadow: none !important; } html[data-apex-theme] .modal-footer { background: var(--apex-bg-surface-2); border-top: 1px solid var(--apex-border-subtle); } html[data-apex-theme] .modal-content .block { background: var(--apex-bg-card); border: 1px solid var(--apex-border); border-radius: var(--apex-radius-lg); box-shadow: var(--apex-shadow-md); color: var(--apex-text-primary); } html[data-apex-theme] .modal-content .block-title { background: transparent; border-bottom: 1px solid var(--apex-border); } html[data-apex-theme] .modal-content .block-title h1, html[data-apex-theme] .modal-content .block-title h2, html[data-apex-theme] .modal-content .block-title h3, html[data-apex-theme] .modal-content .block-title h4, html[data-apex-theme] .modal-content .block-title h5, html[data-apex-theme] .modal-content .block-title h6, html[data-apex-theme] .modal-content .block-title h1 small, html[data-apex-theme] .modal-content .block-title h2 small, html[data-apex-theme] .modal-content .block-title h3 small, html[data-apex-theme] .modal-content .block-title h4 small, html[data-apex-theme] .modal-content .block-title h5 small, html[data-apex-theme] .modal-content .block-title h6 small, html[data-apex-theme] .modal-content label, html[data-apex-theme] .modal-content .control-label, html[data-apex-theme] .modal-content .help-block, html[data-apex-theme] .modal-content .tab-content, html[data-apex-theme] .modal-content p, html[data-apex-theme] .modal-content span:not(.btn):not(.label):not(.badge) { color: var(--apex-text-primary) !important; } html[data-apex-theme] .modal-content a:not(.btn):not(.badge) { color: var(--apex-accent) !important; } html[data-apex-theme] .modal-content a:not(.btn):not(.badge):hover { color: var(--apex-accent) !important; opacity: 0.8; } html[data-apex-theme] .modal-content .dropdown-menu { background: var(--apex-bg-elevated) !important; border-color: var(--apex-border) !important; } html[data-apex-theme] .modal-content .dropdown-menu > li > a { color: var(--apex-text-primary) !important; } html[data-apex-theme] .modal-content .dropdown-menu > li > a:hover, html[data-apex-theme] .modal-content .dropdown-menu > li > a:focus { background: var(--apex-bg-surface-2) !important; color: var(--apex-text-primary) !important; } html[data-apex-theme] .modal-content .form-bordered .form-group { border-bottom: 1px solid var(--apex-border); } html[data-apex-theme] .modal-content .form-bordered .form-group.form-actions { background: var(--apex-bg); } html[data-apex-theme] .modal-content .form-control, html[data-apex-theme] .modal-content input.form-control, html[data-apex-theme] .modal-content textarea.form-control, html[data-apex-theme] .modal-content select.form-control, html[data-apex-theme] .modal-content select { background: var(--apex-bg-surface-1); border-color: var(--apex-border-strong); color: var(--apex-text-primary) !important; } /* KendoUI dropdowns/pickers inside modals — ensure visible text in resting state */ html[data-apex-theme] .modal-content .k-picker, html[data-apex-theme] .modal-content .k-picker-solid, html[data-apex-theme] .modal-content .k-dropdownlist, html[data-apex-theme] .modal-content .k-dropdown, html[data-apex-theme] .modal-content .k-dropdown-wrap, html[data-apex-theme] .modal-content .k-combobox { background: var(--apex-bg-surface-1) !important; border-color: var(--apex-border-strong) !important; color: var(--apex-text-primary) !important; background-image: none !important; } html[data-apex-theme] .modal-content .k-picker .k-input-value-text, html[data-apex-theme] .modal-content .k-dropdown .k-input, html[data-apex-theme] .modal-content .k-dropdownlist .k-input-value-text { color: var(--apex-text-primary) !important; } html[data-apex-theme] .modal-content .form-control::placeholder { color: var(--apex-text-light); } html[data-apex-theme] .modal-content .nav-tabs > li > a { background: var(--apex-bg-surface-2); border-color: var(--apex-border-subtle); color: var(--apex-text-secondary) !important; cursor: pointer; } html[data-apex-theme] .modal-content .nav-tabs > li.active > a, html[data-apex-theme] .modal-content .nav-tabs > li.active > a:hover, html[data-apex-theme] .modal-content .nav-tabs > li.active > a:focus, html[data-apex-theme] .modal-content .block-title .nav-tabs > li.active > a, html[data-apex-theme] .modal-content .block-title .nav-tabs > li.active > a:hover, html[data-apex-theme] .modal-content .block-title .nav-tabs > li.active > a:focus { background: var(--apex-bg-surface-1); border-color: var(--apex-border-subtle); border-bottom-color: var(--apex-bg-surface-1); color: var(--apex-text-primary) !important; } /* FileReference field in modal task attachment tab — stretch full width */ html[data-apex-theme] .modal-content #taskForm-attachments-container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; border: none !important; box-shadow: none !important; margin: 0 !important; } html[data-apex-theme] .modal-content #taskForm-Attachment-File-Reference { width: 100% !important; max-width: 100% !important; } /* Modal KendoUI hover/selected — the span colour rule html[data-apex-theme] .modal-content span:not(.btn):not(.label):not(.badge) has specificity 0,5,2. Every override below must match or exceed that. We replicate all three :not() pseudo-classes on span selectors. */ /* KendoUI select/button hover — date pickers, combo arrows, etc. */ html[data-apex-theme] .modal-content .k-select:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-select:hover i, html[data-apex-theme] .modal-content .k-input-button:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-input-button:hover i, html[data-apex-theme] .modal-content .k-button:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-button:hover i, html[data-apex-theme] .modal-content .k-button.k-state-hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-button.k-state-hover i, html[data-apex-theme] .modal-content .k-state-hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-state-hover i, html[data-apex-theme] .modal-content .k-state-selected span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-state-selected i, html[data-apex-theme] .modal-content .k-state-selected .k-in, html[data-apex-theme] .modal-content .k-pager-wrap .k-link:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-pager-wrap .k-link:hover i { color: var(--apex-text-inverse) !important; } /* KendoUI picker (k-dropdownlist / k-picker-solid) — value text on hover/focus. Pickers do NOT get a dark background on hover, so text must stay readable (primary, not inverse). */ html[data-apex-theme] .modal-content .k-picker:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-picker.k-hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-picker.k-state-hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-picker.k-focus span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-picker.k-state-focused span:not(.btn):not(.label):not(.badge) { color: var(--apex-text-primary) !important; } html[data-apex-theme] .modal-content .k-picker:hover i, html[data-apex-theme] .modal-content .k-picker.k-hover i, html[data-apex-theme] .modal-content .k-picker.k-state-hover i { color: var(--apex-text-primary) !important; } /* Bootstrap button hover — child spans/icons inside modals. btn-default has a light hover background, so text stays primary. Colored buttons (primary/success/danger/warning/info) have dark hover backgrounds, so text goes inverse. */ html[data-apex-theme] .modal-content .btn-default:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .btn-default:hover i { color: var(--apex-text-primary) !important; } html[data-apex-theme] .modal-content .btn-primary:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .btn-primary:hover i, html[data-apex-theme] .modal-content .btn-success:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .btn-success:hover i, html[data-apex-theme] .modal-content .btn-danger:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .btn-danger:hover i, html[data-apex-theme] .modal-content .btn-warning:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .btn-warning:hover i, html[data-apex-theme] .modal-content .btn-info:hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .btn-info:hover i { color: var(--apex-text-inverse) !important; } /* KendoUI TreeView (Attributes) — selected/hover items inside modals */ html[data-apex-theme] .modal-content .k-treeview .k-state-selected span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-treeview .k-state-selected span.k-in, html[data-apex-theme] .modal-content .k-treeview .k-state-hover span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-treeview .k-state-hover span.k-in, html[data-apex-theme] .modal-content .k-treeview span.k-in:hover, html[data-apex-theme] .modal-content .k-treeview .k-treeview-leaf:hover .k-treeview-leaf-text, html[data-apex-theme] .modal-content .k-treeview .k-treeview-leaf.k-hover .k-treeview-leaf-text, html[data-apex-theme] .modal-content .k-treeview .k-treeview-leaf.k-selected .k-treeview-leaf-text { color: var(--apex-text-inverse) !important; } /* KendoUI dropdown list items — popups may render inside modal */ html[data-apex-theme] .modal-content .k-list > .k-state-selected span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-list > .k-state-highlight span:not(.btn):not(.label):not(.badge), html[data-apex-theme] .modal-content .k-list > .k-state-hover span:not(.btn):not(.label):not(.badge) { color: var(--apex-text-inverse) !important; } /* KendoUI checkboxes — use theme accent instead of default blue */ html[data-apex-theme] .k-checkbox:checked, html[data-apex-theme] .k-checkbox:indeterminate { background-color: var(--apex-accent) !important; border-color: var(--apex-accent) !important; color: var(--apex-text-inverse) !important; } /* ProUI switch-primary toggle — use theme accent in modals and globally */ html[data-apex-theme] .switch-primary input:checked + span { background-color: var(--apex-accent) !important; border-color: var(--apex-accent) !important; } html[data-apex-theme] .switch-primary span { border-color: var(--apex-accent) !important; } /* KendoUI switch (toggle) — use theme accent */ html[data-apex-theme] .k-switch-on .k-switch-container { background-color: var(--apex-accent) !important; border-color: var(--apex-accent) !important; } /* ========================================================================== 3. Global Button Styles (Phase 3.1) ========================================================================== Applied app-wide. ProUI uses pastel base + darker border; we flatten to solid colours, remove gradients, add subtle hover lift. ========================================================================== */ .btn { font-family: var(--apex-font-family); font-size: 1.125rem; font-weight: 600; border-radius: var(--apex-radius); padding: 8px 20px; border: none; cursor: pointer; transition: background-color var(--apex-transition), box-shadow var(--apex-transition), transform var(--apex-transition); letter-spacing: 0.01em; } .btn:hover { transform: translateY(-1px); box-shadow: var(--apex-shadow); } .modal-content .btn:hover { transform: none; box-shadow: none; } .btn:active { transform: translateY(0); box-shadow: none; } /* Size variants */ .btn.btn-sm { font-size: 1rem; padding: 6px 14px; } .btn.btn-lg { font-size: 1.25rem; padding: 12px 28px; } .btn.btn-xs { font-size: 0.875rem; padding: 3px 10px; } /* --- Colour variants (solid flat, no pastel/gradient) --- */ .btn-default { background-color: var(--apex-bg-surface-2); border: 1px solid var(--apex-border-strong); color: var(--apex-text-primary); } .btn-default:hover { background-color: var(--apex-accent-soft); border-color: var(--apex-accent); color: var(--apex-text-primary); } html[data-apex-theme] .btn-default:hover, html[data-apex-theme] .btn-default:focus, html[data-apex-theme] .btn-default:active, html[data-apex-theme] .btn-default.active, html[data-apex-theme] .open > .dropdown-toggle.btn-default { background-color: var(--apex-accent-soft) !important; border-color: var(--apex-accent) !important; color: var(--apex-text-primary) !important; } .btn-primary { background: var(--apex-primary); border-color: var(--apex-primary); color: #ffffff; } .btn-primary:hover, .btn-primary:focus { background: var(--apex-primary-dark); border-color: var(--apex-primary-dark); color: #ffffff; } .btn-success { background: var(--apex-success); border-color: var(--apex-success); color: #ffffff; } .btn-success:hover, .btn-success:focus { background: #15803d; border-color: #15803d; color: #ffffff; } .btn-danger { background: var(--apex-danger); border-color: var(--apex-danger); color: #ffffff; } .btn-danger:hover, .btn-danger:focus { background: #b91c1c; border-color: #b91c1c; color: #ffffff; } .btn-warning { background: #f59e0b; border-color: #f59e0b; color: #ffffff; } .btn-warning:hover, .btn-warning:focus { background: #d97706; border-color: #d97706; color: #ffffff; } .btn-info { background: #3b82f6; border-color: #3b82f6; color: #ffffff; } .btn-info:hover, .btn-info:focus { background: #2563eb; border-color: #2563eb; color: #ffffff; } html[data-apex-theme] button[id^="trisys-modal-default"].btn { background-color: var(--apex-bg-surface-2) !important; border: 1px solid var(--apex-border-strong) !important; color: var(--apex-text-primary) !important; } html[data-apex-theme] button[id^="trisys-modal-default"].btn:hover, html[data-apex-theme] button[id^="trisys-modal-default"].btn:focus, html[data-apex-theme] button[id^="trisys-modal-default"].btn:active { background-color: var(--apex-accent-soft) !important; border-color: var(--apex-accent) !important; color: var(--apex-text-primary) !important; } html[data-apex-theme] button[id^="trisys-modal-info"].btn { background-color: #3b82f6 !important; border-color: #3b82f6 !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-info"].btn:hover, html[data-apex-theme] button[id^="trisys-modal-info"].btn:focus, html[data-apex-theme] button[id^="trisys-modal-info"].btn:active { background-color: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-success"].btn { background-color: var(--apex-success) !important; border-color: var(--apex-success) !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-success"].btn:hover, html[data-apex-theme] button[id^="trisys-modal-success"].btn:focus, html[data-apex-theme] button[id^="trisys-modal-success"].btn:active { background-color: #15803d !important; border-color: #15803d !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-warning"].btn { background-color: #f59e0b !important; border-color: #f59e0b !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-warning"].btn:hover, html[data-apex-theme] button[id^="trisys-modal-warning"].btn:focus, html[data-apex-theme] button[id^="trisys-modal-warning"].btn:active { background-color: #d97706 !important; border-color: #d97706 !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-danger"].btn { background-color: var(--apex-danger) !important; border-color: var(--apex-danger) !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-danger"].btn:hover, html[data-apex-theme] button[id^="trisys-modal-danger"].btn:focus, html[data-apex-theme] button[id^="trisys-modal-danger"].btn:active { background-color: #b91c1c !important; border-color: #b91c1c !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-primary"].btn { background-color: var(--apex-primary) !important; border-color: var(--apex-primary) !important; color: #ffffff !important; } html[data-apex-theme] button[id^="trisys-modal-primary"].btn:hover, html[data-apex-theme] button[id^="trisys-modal-primary"].btn:focus, html[data-apex-theme] button[id^="trisys-modal-primary"].btn:active { background-color: var(--apex-primary-dark) !important; border-color: var(--apex-primary-dark) !important; color: #ffffff !important; } /* Alt variant — white bg, coloured text/border */ .btn-alt.btn-primary { background: #ffffff; color: var(--apex-primary); border: 1px solid var(--apex-primary); } .btn-alt.btn-primary:hover { background: var(--apex-primary); color: #ffffff; } .btn-alt.btn-success { background: #ffffff; color: var(--apex-success); border: 1px solid var(--apex-success); } .btn-alt.btn-success:hover { background: var(--apex-success); color: #ffffff; } .btn-alt.btn-danger { background: #ffffff; color: var(--apex-danger); border: 1px solid var(--apex-danger); } .btn-alt.btn-danger:hover { background: var(--apex-danger); color: #ffffff; } /* Button icons */ .btn i, .btn .fa, .btn .gi { vertical-align: middle; } /* Form-area buttons — slightly more generous padding */ #divFormContentRow .block .btn { padding: 11px 24px; } #divFormContentRow .block .btn.btn-sm { padding: 6px 14px; } #contactForm-DaxtraMenu > .btn, #requirementForm-DaxtraMenu > .btn { background: var(--apex-bg-surface-1); border: 1px solid var(--apex-border-strong); color: var(--apex-accent) !important; } #contactForm-DaxtraMenu > .btn:hover, #contactForm-DaxtraMenu > .btn:focus, #contactForm-DaxtraMenu.open > .btn, #requirementForm-DaxtraMenu > .btn:hover, #requirementForm-DaxtraMenu > .btn:focus, #requirementForm-DaxtraMenu.open > .btn { background: var(--apex-accent) !important; border-color: var(--apex-accent) !important; color: var(--apex-text-inverse) !important; } /* Button icons in forms — slightly larger */ #divFormContentRow .block .btn i, #divFormContentRow .block .btn .fa { font-size: 1.25rem; vertical-align: middle; } /* Query Builder / Search Criteria buttons — promote btn-xs to btn-sm sizing */ #divFormContentRow .query-builder .btn.btn-xs { font-size: 1rem; padding: 6px 14px !important; border-radius: var(--apex-radius); margin-right: 5px; } /* AND/OR radio label buttons — consistent with the action buttons */ #divFormContentRow .query-builder .group-conditions .btn.btn-xs { padding: 6px 12px !important; margin-right: 5px; } /* Search/Lookup & Clear Search buttons below the query builder */ #divFormContentRow div[id^="search-criteria"] > .block > div > .btn { font-size: 1.125rem; padding: 8px 20px !important; border-radius: var(--apex-radius); margin-right: 6px; } /* Saved Searches dropdown & minimize button in block-options */ #divFormContentRow .block-options .btn.btn-sm { font-size: 1rem; padding: 6px 14px !important; border-radius: var(--apex-radius); } /* Dropdown-custom — use available viewport height instead of fixed 250px */ #divFormContentRow .dropdown-menu.dropdown-custom > li { max-height: calc(100vh - 200px); } /* Switch / Toggle — modern pill */ #divFormContentRow .block .switch { border-radius: var(--apex-radius-full); } #divFormContentRow .block .switch-primary span { border-color: var(--apex-border-strong); } #divFormContentRow .block .switch-primary input:checked + span { background: var(--apex-primary); border-color: var(--apex-primary); } /* Links */ #divFormContentRow .block a:not(.btn) { color: var(--apex-primary); text-decoration: none; font-size: 1.125rem; transition: color var(--apex-transition); } #divFormContentRow .block a:not(.btn):hover, #divFormContentRow .block a:not(.btn):focus { color: var(--apex-primary-dark); text-decoration: none; font-weight: 700; } /* Legacy theme helper classes mapped onto semantic tokens */ html[data-apex-theme] .themed-color { color: var(--apex-accent) !important; border-color: var(--apex-accent) !important; } html[data-apex-theme] .themed-border, html[data-apex-theme] .themed-border[class], html[data-apex-theme] [class*="themed-border"] { border-color: var(--apex-accent) !important; } html[data-apex-theme] .themed-background, html[data-apex-theme] .themed-background[class] { background-color: var(--apex-accent) !important; border-color: var(--apex-accent) !important; color: var(--apex-text-inverse) !important; } html[data-apex-theme] .themed-background-dark, html[data-apex-theme] .themed-background-dark[class], html[data-apex-theme] [class*="themed-background-dark"] { background-color: var(--apex-sidebar-bg) !important; border-color: var(--apex-sidebar-bg) !important; color: var(--apex-sidebar-text) !important; } html[data-apex-theme] .themed-background-muted-light, html[data-apex-theme] .themed-background-muted-light[class] { background-color: var(--apex-bg-surface-2) !important; border-color: var(--apex-border-subtle) !important; color: var(--apex-text-primary) !important; } /* Training form — hero course widget headers need dark bg + light text */ html[data-apex-theme] #trainingBlock .widget-advanced > .widget-header { background-color: var(--apex-sidebar-bg) !important; border-color: var(--apex-sidebar-bg) !important; color: var(--apex-sidebar-text) !important; } html[data-apex-theme] #trainingBlock .widget-advanced > .widget-header h3, html[data-apex-theme] #trainingBlock .widget-advanced > .widget-header h3 small, html[data-apex-theme] #trainingBlock .widget-advanced > .widget-header h3 strong { color: inherit !important; } /* Lock form — user name and company name need dark text on light background */ html[data-apex-theme] #login-container .login-title h1 { color: var(--apex-text-primary) !important; } /* -------------------------------------------------------------------------- KendoUI menu popups — prevent border clipping by animation container -------------------------------------------------------------------------- */ html[data-apex-theme] .k-menu .k-animation-container { overflow: visible !important; } html[data-apex-theme] .k-menu .k-animation-container .k-group, html[data-apex-theme] .k-menu .k-animation-container .k-popup { border: 1px solid var(--apex-border) !important; border-radius: var(--apex-radius) !important; background: var(--apex-bg-elevated) !important; box-shadow: var(--apex-shadow-md) !important; } /* -------------------------------------------------------------------------- File Reference control — 4-column flex: textbox (grows) + 3 fixed buttons -------------------------------------------------------------------------- */ .apex-file-ref-row { display: flex !important; align-items: center !important; gap: 4px !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } .apex-file-ref-row input.k-textbox { flex: 1 1 auto !important; min-width: 0 !important; } .apex-file-ref-row .btn { flex: 0 0 28px !important; width: 28px !important; height: 28px !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Button icons — slightly larger than text */ #divFormContentRow .block .btn i, #divFormContentRow .block .btn .fa { font-size: 1.25rem; vertical-align: middle; } /* -------------------------------------------------------------------------- 2a. Login-specific overrides -------------------------------------------------------------------------- */ /* Social login row — fix alignment and background */ #social-login-buttons { margin-top: 0 !important; background: var(--apex-bg-card) !important; } #social-login-buttons .control-label { padding-top: 0 !important; position: relative; top: -3px; display: flex; align-items: center; justify-content: flex-end; } #loginPage-SocialNetworkButtons { margin-top: 0 !important; margin-left: 0 !important; left: 0 !important; display: flex; align-items: center; min-height: 40px; } #social-login-buttons .col-md-offset-3 { margin-left: 25%; } /* Social button icons — spaced evenly, centered */ #loginPage-SocialNetworkButtons .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto !important; padding: 10px 18px; } /* -------------------------------------------------------------------------- 2b. Tabs, Tables, Alerts, Kendo Harmony -------------------------------------------------------------------------- */ /* ========================================================================== Apex Tab Scroller Replaces the legacy mCustomScrollbar and inline-style tab approach with a fully CSS-native scrollable tab strip, injected chevron buttons, and smooth scroll-into-view behaviour. DOM structure injected by TriSysSDK.EntityFormTabs.EnhanceScrollableTabNav(): .block-title.apex-tab-scroller-host ← flex host, positioned