@import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); @import url('./icons.css'); /* ========================================================= SAB THEME BRIDGE Three base colours come from the active DevExpress theme and are written onto by js/sabtheme.js after every theme change (so Fluent light/dark AND Classic themes all work): --sab-bg page background (computed body background) --sab-text page text colour (computed body color) --sab-primary theme accent (DevExpress primary colour) Everything below is derived with color-mix(). Surfaces are tinted with the theme's primary colour, so every theme gets its own look (blue Fluent, pink Berry, purple Purple ...). Never hardcode #eef3f8 / #333 etc. in component CSS - use these variables. ========================================================= */ :root { /* ---- base (CSS fallback chain; overridden by sabtheme.js) ---- */ --sab-bg: var(--dxds-color-surface-neutral-default-rest, var(--bs-body-bg, #ffffff)); --sab-text: var(--dxds-color-content-neutral-default-rest, var(--bs-body-color, #333333)); --sab-primary: var(--dxds-color-surface-primary-default-rest, var(--bs-primary, #1976d2)); /* ---- neutral helpers ---- */ --sab-neutral-6: color-mix(in srgb, var(--sab-text) 6%, var(--sab-bg)); --sab-neutral-12: color-mix(in srgb, var(--sab-text) 12%, var(--sab-bg)); --sab-neutral-20: color-mix(in srgb, var(--sab-text) 20%, var(--sab-bg)); /* ---- surfaces: header, drawer, panels, grid headers, cards ---- tinted with the theme primary so each theme looks different */ --sab-surface: color-mix(in srgb, var(--sab-primary) 10%, var(--sab-neutral-6)); --sab-surface-hover: color-mix(in srgb, var(--sab-primary) 20%, var(--sab-neutral-6)); --sab-surface-active: color-mix(in srgb, var(--sab-primary) 30%, var(--sab-neutral-6)); /* ---- borders ---- */ --sab-border: color-mix(in srgb, var(--sab-primary) 25%, var(--sab-neutral-20)); --sab-border-strong: color-mix(in srgb, var(--sab-text) 45%, var(--sab-bg)); /* ---- text ---- */ --sab-text-muted: color-mix(in srgb, var(--sab-text) 65%, var(--sab-bg)); --sab-primary-text: color-mix(in srgb, var(--sab-primary) 85%, var(--sab-text)); /* ---- accent surfaces (ribbon buttons, active menu, selection) ---- */ --sab-primary-soft: color-mix(in srgb, var(--sab-primary) 16%, var(--sab-bg)); --sab-primary-soft-hover: color-mix(in srgb, var(--sab-primary) 28%, var(--sab-bg)); --sab-primary-border: color-mix(in srgb, var(--sab-primary) 45%, var(--sab-bg)); --sab-on-primary: #ffffff; --sab-danger: #d32f2f; /* ---- misc ---- */ --sab-overlay: color-mix(in srgb, var(--sab-bg) 80%, transparent); --sab-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); --sab-shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.25); } /* ========================================================= WHITE THEME (key "White") Pure white background, black text, neutral grey surfaces. The Fluent light stylesheet is still loaded for the DevExpress widgets; these overrides win on top of it. ========================================================= */ html[data-sab-theme="White"] { --sab-bg: #ffffff !important; --sab-text: #000000 !important; --sab-surface: #ffffff; --sab-surface-hover: #f2f2f2; --sab-surface-active: #e6e6e6; --sab-border: #d9d9d9; --sab-border-strong: #9e9e9e; --sab-text-muted: #444444; --sab-primary-text: #0b57d0; --sab-primary-soft: #eef4ff; --sab-primary-soft-hover: #dce8ff; --sab-primary-border: #b7ccf5; --sab-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); --sab-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.16); /* DevExpress + bootstrap base tokens */ --dxds-color-surface-neutral-default-rest: #ffffff; --dxds-color-surface-neutral-subdued-rest: #ffffff; --dxds-color-content-neutral-default-rest: #000000; --dxds-color-content-neutral-subdued-rest: #333333; --bs-body-bg: #ffffff; --bs-body-color: #000000; --bs-tertiary-bg: #ffffff; --bs-secondary-bg: #f5f5f5; } html[data-sab-theme="White"] body, html[data-sab-theme="White"] .page, html[data-sab-theme="White"] .dxbl-popup, html[data-sab-theme="White"] .dxbl-grid, html[data-sab-theme="White"] .dxbl-text-editor, html[data-sab-theme="White"] .dxbl-memo, html[data-sab-theme="White"] .dxbl-combobox, html[data-sab-theme="White"] .dxbl-date-edit { background-color: #ffffff; color: #000000; } html[data-sab-theme="White"] .dxbl-grid-header, html[data-sab-theme="White"] .dxbl-grid-header-content { background-color: #f5f5f5; color: #000000; } /* native controls / scrollbars follow the theme */ html.sab-dark { color-scheme: dark; } html.sab-light { color-scheme: light; } html, body { display: flex; flex-direction: column; height: 100%; overflow: hidden; margin: 0; } .w-100 { width: 100% !important; } .h-100 { height: 100% !important; } .h-auto { height: auto !important; } .overflow-hidden { overflow: hidden !important; } .text-danger { color: var(--dxds-color-content-danger-default-rest); } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--dxds-color-border-success-default-rest); } .invalid { outline: 1px solid var(--dxds-color-border-danger-default-rest); } .validation-message { color: var(--dxds-color-content-danger-default-rest); } .button-link { text-decoration: unset; } .title { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 0; } .title.title-secondary { padding: 0.313rem 0 0; color: var(--dxds-color-content-secondary-default-rest); } .title-header-text { font-size: var(--dxds-font-size-headline-lg); font-weight: var(--dxds-font-weight-headline-default); letter-spacing: var(--dxds-letter-spacing-headline-lg); line-height: var(--dxds-line-height-headline-lg); } .title-content-text { font-size: var(--dxds-font-size-base-lg); font-weight: var(--dxds-font-weight-base-default); letter-spacing: var(--dxds-letter-spacing-base-lg); line-height: var(--dxds-line-height-base-lg); } .main-content { align-items: center; display: flex; height: 100%; justify-content: center; width: 100%; } /* ---------------- report grid drill-down links / popups ---------------- */ .sab-drill-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--sab-primary-border); cursor: pointer; } .sab-drill-link:hover { color: var(--sab-primary-text); border-bottom: 1px solid var(--sab-primary); } .sab-drill-sabid { color: var(--sab-primary-text); font-weight: 600; } .sab-drill-body { display: flex; flex-direction: column; height: 100%; gap: 6px; } .sab-drill-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; padding: 2px 4px; } .sab-drill-crumb { background: var(--sab-primary-soft); border: 1px solid var(--sab-primary-border); border-radius: 12px; padding: 2px 10px; } .sab-drill-sep { color: var(--sab-text-muted); } .sab-drill-count { margin-left: auto; color: var(--sab-text-muted); } .sab-back-report { margin-right: 10px; } /* ---------------- footer summary chooser ---------------- */ .sab-sum-list { display: flex; flex-direction: column; gap: 4px; height: 100%; overflow-y: auto; padding: 4px 2px; } .sab-sum-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; } .sab-sum-item:hover { background: var(--sab-surface-hover); } /* ---------------- report popup: grid + bottom send bar ---------------- */ .sab-report-grid { flex: 1; min-height: 0; } .sab-report-bottombar { flex: 0 0 auto; display: flex; align-items: center; padding: 2px 4px; border-top: 1px solid var(--sab-border); background: var(--sab-surface); border-radius: 0 0 8px 8px; } .sab-gridai-lang { min-width: 150px; } /* ========================================================= POPUP OPEN ANIMATION - like a page turning in a diary Applies to every DevExpress popup / modal in the app. ========================================================= */ @keyframes sabPageTurn { 0% { opacity: 0; transform: perspective(1800px) rotateY(-72deg) translateX(-22px) scale(.985); } 55% { opacity: 1; transform: perspective(1800px) rotateY(-14deg) translateX(-4px) scale(.997); } 100% { opacity: 1; transform: perspective(1800px) rotateY(0deg) translateX(0) scale(1); } } @keyframes sabPageTurnShadow { 0% { box-shadow: -26px 0 34px -18px rgba(0, 0, 0, .55); } 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .22); } } @keyframes sabBackdropIn { from { opacity: 0; } to { opacity: 1; } } .dxbl-popup { transform-origin: left center; backface-visibility: hidden; animation: sabPageTurn .38s cubic-bezier(.22, .78, .3, 1), sabPageTurnShadow .38s ease-out; } .dxbl-modal-backdrop, .dxbl-popup-backdrop { animation: sabBackdropIn .28s ease-out; } /* nested drill-down popups open a little faster, so a chain does not feel slow */ .sab-drill-popup.dxbl-popup { animation-duration: .28s; } @media (prefers-reduced-motion: reduce) { .dxbl-popup, .dxbl-modal-backdrop, .dxbl-popup-backdrop, .sab-drill-popup.dxbl-popup { animation: none; } } /* ========================================================================= SAB CHILD GRID ("grid ke andar grid") - the clickable field in SabGridPopup that opens the child grid - the child grid popup itself ========================================================================= */ .sab-childgrid-trigger { position: relative; cursor: pointer; } /* the textbox is read-only here; the whole box is the button */ .sab-childgrid-trigger .dxbl-text-edit, .sab-childgrid-trigger input { cursor: pointer !important; } .sab-childgrid-trigger-icon { position: absolute; top: 50%; right: 9px; transform: translateY(-50%); font-size: 12px; color: var(--sab-primary-text); opacity: .65; pointer-events: none; transition: opacity .18s ease; } .sab-childgrid-trigger:hover .sab-childgrid-trigger-icon { opacity: 1; } .sab-childgrid-msg { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--sab-text-muted); } .sab-childgrid-popup .dxbl-popup-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; /* body khud scroll na kare - scroll sirf grid ke andar */ } .sab-childgrid { flex: 1 1 auto; min-height: 0; } /* child grid popup: the small bar above the grid (table name + edit-mode switch) */ .sab-childgrid-bar { display: flex; align-items: center; gap: 10px; padding: 6px 2px 10px 2px; } .sab-childgrid-table { font-size: 12px; font-weight: 600; letter-spacing: .3px; color: var(--sab-text-muted); } .sab-childgrid-spacer { flex: 1 1 auto; } .sab-childgrid-err { color: var(--sab-danger); font-weight: 600; white-space: pre-wrap; text-align: left; padding: 8px 10px; } /* child grid popup: parent values under the title + fixed-height grid area */ .sab-childgrid-head { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 12px; margin: 0 0 8px 0; border: 1px solid var(--sab-border); border-radius: 8px; background: var(--sab-surface); } .sab-childgrid-head-item { display: flex; align-items: baseline; gap: 6px; font-size: 12px; } .sab-childgrid-head-label { color: var(--sab-text-muted); font-weight: 600; text-transform: capitalize; } .sab-childgrid-head-label::after { content: ":"; } .sab-childgrid-head-value { color: var(--sab-text); font-weight: 600; font-variant-numeric: tabular-nums; } /* the grid needs a DEFINITE height, otherwise DxGrid never shows its own scrollbars (horizontal one included) and just grows into the popup */ .sab-childgrid-wrap { flex: 1 1 auto; /* popup body (flex column) ki bachi hui poori height */ min-height: 260px; position: relative; /* grid absolute se isko poora bharta hai -> definite height */ overflow: hidden; } .sab-childgrid-wrap .sab-childgrid { position: absolute; inset: 0; /* top/right/bottom/left = 0 -> grid wrap jitna hi bada */ height: 100%; } /* child grid - CELL edit mode: koi row highlight nahi, sirf active cell blue */ .sab-childgrid .dxbl-grid-focused-row > td, .sab-childgrid tr.dxbl-grid-focused-row, .sab-childgrid tr.dxbl-grid-selected-row > td { background: transparent !important; color: inherit !important; } .sab-childgrid td.dxbl-grid-edit-cell, .sab-childgrid td.dxbl-grid-focused-cell, .sab-childgrid td:has(> .dxbl-grid-edit-cell), .sab-childgrid td:focus-within { box-shadow: inset 0 0 0 2px var(--sab-primary) !important; background: var(--sab-primary-soft) !important; } .sab-childgrid td:focus-within input { font-weight: 600; } /* SabGridPopup: cannotempty wale field - baayi taraf laal patti */ .sab-required.dxbl-text-edit, .sab-required.dxbl-date-edit, .sab-required.dxbl-spin-edit, .dxbl-fl-item-content > .sab-required { border-left: 3px solid #d9534f !important; } /* SabGridPopup: number fields right aligned */ .sab-num input { text-align: right; } /* ================= SabUserChat : internal user to user chat ================= */ /* Popup ki body ki height DevExpress ke andar se nahi lete (usse kabhi layout bigad jata tha) - wrap ki apni fix height rakhi hai: popup 500px, header/padding nikal kar body ~390px. */ .sab-chat-popup .sab-chat-wrap, .sab-chat-wrap { display: flex; /* left : user list, right : conversation */ gap: 10px; height: 390px; max-height: 390px; min-height: 390px; overflow: hidden; } .sab-chat-users { width: 190px; flex: 0 0 190px; display: flex; flex-direction: column; gap: 6px; min-height: 0; border-right: 1px solid var(--sab-border, #e0e0e0); padding-right: 8px; } /* user list : baaki jagah le kar scroll */ .sab-chat-userlist { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; } .sab-chat-user { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; } .sab-chat-user:hover { background: var(--sab-primary-soft, #eef3ff); } .sab-chat-user.active { background: var(--sab-primary-soft, #dce8ff); font-weight: 600; } .sab-chat-uname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sab-chat-badge { background: #d9534f; color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; line-height: 16px; } .sab-chat-main { flex: 1; display: flex; flex-direction: column; min-height: 0; } .sab-chat-head { font-weight: 600; font-size: 13px; padding: 2px 2px 4px 2px; border-bottom: 1px solid var(--sab-border, #e0e0e0); } .sab-chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 4px; display: flex; flex-direction: column; gap: 5px; } .sab-chat-msg { max-width: 78%; padding: 4px 9px; border-radius: 10px; font-size: 13px; word-wrap: break-word; } .sab-chat-msg.mine { align-self: flex-end; background: var(--sab-primary-soft, #dcf8c6); } .sab-chat-msg.other { align-self: flex-start; background: #f1f1f1; } .sab-chat-time { font-size: 10px; color: gray; text-align: right; margin-top: 1px; } .sab-chat-send { display: flex; gap: 6px; padding-top: 6px; border-top: 1px solid var(--sab-border, #e0e0e0); } .sab-chat-send .sab-chat-input { flex: 1; } .sab-chat-empty { color: gray; font-size: 12px; padding: 8px; text-align: center; } /* chat icon ka unread badge (page heading me) */ .sab-chat-icon { position: relative; } .sab-chat-count { background: #d9534f; color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; line-height: 16px; margin-left: 4px; } /* login page : refresh ke baad session restore hone ka message */ .login-restoring { position: fixed; top: 0; left: 0; right: 0; padding: 8px 12px; text-align: center; font-weight: 600; background: var(--sab-primary-soft, #dce8ff); color: var(--sab-primary-text, #1c3faa); z-index: 3000; } /* NavMenu : voice search status line */ .nav-mic-status { font-size: 11px; color: var(--sab-primary-text, #3b5bdb); padding: 2px 4px; } /* login : remember me */ .sab-remember { display: flex; justify-content: flex-start; font-size: 13px; margin: 2px 0 6px 0; } /* MstEntryV2 : is menu par koi right nahi */ .mst-v2-norights { color: #d9534f; font-weight: 600; font-size: 13px; margin-right: 10px; } /* MstEntryV2 : mask = password wala control (textbox + eye button) */ .sab-psw-box { flex: 1; min-width: 0; } .sab-psw-eye { flex: 0 0 auto; padding: 2px 8px; }