/* ========================================================================== Application themes - Theme Slider "Theme 1" to "Theme 4" -------------------------------------------------------------------------- Each theme is registered in assets/js/config.js as a Template Customizer colour swatch. Selecting it sets the template's primary colour (buttons, focus rings, charts) and config.js marks ; the rules below then apply the rest of that theme's colour combination: sidebar background, text, icons, hover, active item, dividers, brand header, page background, links, highlight labels login pages (assets/MyCss/login.css reads --app-login-*) the swatch previews and "Theme N" labels in the Theme Slider Light-mode surfaces (header, page, links, highlights) only apply to the light theme, so Dark mode keeps the template's dark surfaces. ========================================================================== */ /* ---- Theme 1 - Royal charcoal and gold ----------------------------------- */ :root[data-app-theme="theme1"] { --app-menu-bg: #1C1815; --app-menu-bg-rgb: 28, 24, 21; --app-menu-text: #D8CEC1; --app-menu-text-rgb: 216, 206, 193; --app-menu-hover-bg: #2A231D; --app-menu-hover-text: #F3EADB; --app-menu-active-bg: #9A7433; --app-menu-active-text: #FFFFFF; --app-menu-icon: #B59C74; --app-menu-accent: #C9A45C; --app-menu-divider: #2E2721; --app-header-bg: #FFFFFF; --app-header-text: #2B2A2E; --app-page-bg: #F8F5EF; --app-page-bg-rgb: 248, 245, 239; --app-link: #9A7433; --app-link-rgb: 154, 116, 51; --app-link-hover: #7A5A24; --app-link-hover-rgb: 122, 90, 36; --app-link-dark: #D8B978; --app-link-dark-rgb: 216, 185, 120; --app-link-dark-hover: #E6CC96; --app-link-dark-hover-rgb: 230, 204, 150; --app-highlight: #F5EDDC; --app-highlight-text: #7A5A24; --app-accent: #C9A45C; --app-login-panel: #1B1614; --app-login-accent: #C4A974; } /* ---- Theme 2 - Wine heritage --------------------------------------------- */ :root[data-app-theme="theme2"] { --app-menu-bg: #2B1219; --app-menu-bg-rgb: 43, 18, 25; --app-menu-text: #EADCD6; --app-menu-text-rgb: 234, 220, 214; --app-menu-hover-bg: #3A1C24; --app-menu-hover-text: #FFF4EE; --app-menu-active-bg: #C9A45C; --app-menu-active-text: #2B1219; --app-menu-icon: #D4B48C; --app-menu-accent: #C9A45C; --app-menu-divider: #3F2129; --app-header-bg: #FFFFFF; --app-header-text: #3A2A2E; --app-page-bg: #FAF6F5; --app-page-bg-rgb: 250, 246, 245; --app-link: #7A1E2C; --app-link-rgb: 122, 30, 44; --app-link-hover: #5A1321; --app-link-hover-rgb: 90, 19, 33; --app-link-dark: #E3A0AB; --app-link-dark-rgb: 227, 160, 171; --app-link-dark-hover: #EDBCC4; --app-link-dark-hover-rgb: 237, 188, 196; --app-highlight: #F7E9EC; --app-highlight-text: #7A1E2C; --app-accent: #C9A45C; --app-login-panel: #230E14; --app-login-accent: #D9B877; } /* ---- Theme 3 - Emerald court --------------------------------------------- */ :root[data-app-theme="theme3"] { --app-menu-bg: #0F2723; --app-menu-bg-rgb: 15, 39, 35; --app-menu-text: #D3E2DC; --app-menu-text-rgb: 211, 226, 220; --app-menu-hover-bg: #183631; --app-menu-hover-text: #EEF6F2; --app-menu-active-bg: #C9A45C; --app-menu-active-text: #0F2723; --app-menu-icon: #C9A45C; --app-menu-accent: #E2C98D; --app-menu-divider: #1E3A34; --app-header-bg: #FFFFFF; --app-header-text: #1F2D2A; --app-page-bg: #F4F8F6; --app-page-bg-rgb: 244, 248, 246; --app-link: #0F6B5C; --app-link-rgb: 15, 107, 92; --app-link-hover: #0A4F44; --app-link-hover-rgb: 10, 79, 68; --app-link-dark: #6FD1BA; --app-link-dark-rgb: 111, 209, 186; --app-link-dark-hover: #97DECD; --app-link-dark-hover-rgb: 151, 222, 205; --app-highlight: #E4F1EC; --app-highlight-text: #0F6B5C; --app-accent: #C9A45C; --app-login-panel: #0B1F1C; --app-login-accent: #E2C98D; } /* ---- Theme 4 - Ivory silk (light sidebar) -------------------------------- */ :root[data-app-theme="theme4"] { --app-menu-bg: #FBF7EF; --app-menu-bg-rgb: 251, 247, 239; --app-menu-text: #4A4036; --app-menu-text-rgb: 74, 64, 54; --app-menu-hover-bg: #F2E8D5; --app-menu-hover-text: #2E261E; --app-menu-active-bg: #8C6A2E; --app-menu-active-text: #FFFFFF; --app-menu-icon: #8C6A2E; --app-menu-accent: #7A5A24; --app-menu-divider: #E8DDC8; --app-header-bg: #FFFDF8; --app-header-text: #2E261E; --app-page-bg: #F6F1E7; --app-page-bg-rgb: 246, 241, 231; --app-link: #7A5A24; --app-link-rgb: 122, 90, 36; --app-link-hover: #5E4419; --app-link-hover-rgb: 94, 68, 25; --app-link-dark: #D8BD84; --app-link-dark-rgb: 216, 189, 132; --app-link-dark-hover: #E6D2A6; --app-link-dark-hover-rgb: 230, 210, 166; --app-highlight: #F4EAD6; --app-highlight-text: #7A5A24; --app-accent: #C9A45C; --app-login-panel: #2E241A; --app-login-accent: #D8BD84; } /* Theme 4 in Dark mode: a dark sandalwood sidebar instead of ivory. */ :root[data-app-theme="theme4"][data-bs-theme="dark"] { --app-menu-bg: #221B14; --app-menu-bg-rgb: 34, 27, 20; --app-menu-text: #E8DCC8; --app-menu-text-rgb: 232, 220, 200; --app-menu-hover-bg: #2F261C; --app-menu-hover-text: #FBF3E4; --app-menu-icon: #C9A45C; --app-menu-accent: #D8BD84; --app-menu-divider: #3A2F24; } /* ========================================================================== Applying the tokens ========================================================================== */ /* ---- Sidebar / menu ------------------------------------------------------ */ :root[data-app-theme] .layout-menu { --bs-menu-bg: var(--app-menu-bg); --bs-menu-bg-rgb: var(--app-menu-bg-rgb); --bs-menu-color: var(--app-menu-text); --bs-menu-color-rgb: var(--app-menu-text-rgb); --bs-menu-hover-bg: var(--app-menu-hover-bg); --bs-menu-hover-color: var(--app-menu-hover-text); --bs-menu-sub-active-bg: var(--app-menu-hover-bg); --bs-menu-sub-active-color: var(--app-menu-hover-text); --bs-menu-active-bg: var(--app-menu-active-bg); --bs-menu-active-color: var(--app-menu-active-text); --bs-menu-divider-color: var(--app-menu-divider); --bs-menu-header-color: var(--app-menu-accent); /* Nested content (submenus, badges, headings) reads these; setting them here keeps it readable on dark and light sidebars alike, so the theme - not Semi Dark - decides. */ --bs-paper-bg: var(--app-menu-bg); --bs-paper-bg-rgb: var(--app-menu-bg-rgb); --bs-body-color: var(--app-menu-text); --bs-body-color-rgb: var(--app-menu-text-rgb); --bs-heading-color: var(--app-menu-hover-text); --bs-secondary-color: color-mix(in srgb, var(--app-menu-text) 70%, var(--app-menu-bg)); --bs-border-color: var(--app-menu-divider); background-color: var(--app-menu-bg); color: var(--app-menu-text); } /* Active item: a solid theme colour instead of the template's primary gradient. */ :root[data-app-theme] .layout-menu .menu-item.active > .menu-link:not(.menu-toggle) { background: var(--app-menu-active-bg); box-shadow: 0 .125rem .375rem 0 color-mix(in srgb, var(--app-menu-active-bg) 35%, transparent); color: var(--app-menu-active-text); } /* Icons */ :root[data-app-theme] .layout-menu .menu-item:not(.active) > .menu-link .menu-icon { color: var(--app-menu-icon); } :root[data-app-theme] .layout-menu .menu-item:not(.active) > .menu-link:hover .menu-icon, :root[data-app-theme] .layout-menu .menu-item.active > .menu-toggle .menu-icon, :root[data-app-theme] .layout-menu .menu-item.open > .menu-toggle .menu-icon { color: var(--app-menu-accent); } :root[data-app-theme] .layout-menu .menu-item.active > .menu-link:not(.menu-toggle) .menu-icon { color: var(--app-menu-active-text); } /* Brand, collapse toggle, section headers, dividers */ :root[data-app-theme] .layout-menu .app-brand-text { color: var(--app-menu-hover-text); } :root[data-app-theme] .layout-menu .app-brand-logo .text-primary { color: var(--app-menu-accent) !important; } :root[data-app-theme] .layout-menu .layout-menu-toggle { color: var(--app-menu-text); } :root[data-app-theme] .layout-menu .menu-header, :root[data-app-theme] .layout-menu .menu-header-text { color: var(--app-menu-accent); } :root[data-app-theme] .layout-menu .menu-divider { border-color: var(--app-menu-divider); } /* ---- Light-mode surfaces: page, links, highlights ------------------------ */ :root[data-app-theme][data-bs-theme="light"] { --bs-body-bg: var(--app-page-bg); --bs-body-bg-rgb: var(--app-page-bg-rgb); --bs-link-color: var(--app-link); --bs-link-color-rgb: var(--app-link-rgb); --bs-link-hover-color: var(--app-link-hover); --bs-link-hover-color-rgb: var(--app-link-hover-rgb); --bs-primary-bg-subtle: var(--app-highlight); } :root[data-app-theme][data-bs-theme="dark"] { --bs-link-color: var(--app-link-dark); --bs-link-color-rgb: var(--app-link-dark-rgb); --bs-link-hover-color: var(--app-link-dark-hover); --bs-link-hover-color-rgb: var(--app-link-dark-hover-rgb); } :root[data-app-theme][data-bs-theme="light"] .bg-label-primary { background-color: var(--app-highlight) !important; color: var(--app-highlight-text) !important; } /* ---- Header -------------------------------------------------------------- */ :root[data-app-theme][data-bs-theme="light"] .layout-navbar.bg-navbar-theme { --bs-navbar-bg: var(--app-header-bg); --bs-navbar-color: var(--app-header-text); background-color: color-mix(in srgb, var(--app-header-bg) 92%, transparent); color: var(--app-header-text); } /* ---- DevExpress grid headers ---------------------------------------------- Grids style their header row with CssClass gridBgColor (main grids), gridBgColor2 (detail / child grids) or gridBgColor3 (secondary grids); the base rules live in assets/MyCss/DevGridCss.css. Main header: theme tint, deep theme text, theme-coloured underline. Secondary headers: a lighter tint of the same colours. -------------------------------------------------------------------------- */ :root[data-app-theme="theme1"] { --app-grid-header-bg: #EFE3CB; --app-grid-header-text: #4E3A16; --app-grid-header-line: #C9A45C; --app-grid-subheader-bg: #F7F0E2; --app-grid-subheader-text: #6B5021; } :root[data-app-theme="theme2"] { --app-grid-header-bg: #F2DDE2; --app-grid-header-text: #5A1321; --app-grid-header-line: #7A1E2C; --app-grid-subheader-bg: #F9EEF1; --app-grid-subheader-text: #6E2533; } :root[data-app-theme="theme3"] { --app-grid-header-bg: #D9ECE5; --app-grid-header-text: #0A4F44; --app-grid-header-line: #0F6B5C; --app-grid-subheader-bg: #EAF4F0; --app-grid-subheader-text: #135C4F; } :root[data-app-theme="theme4"] { --app-grid-header-bg: #EBDFC6; --app-grid-header-text: #4E3A16; --app-grid-header-line: #8C6A2E; --app-grid-subheader-bg: #F5EDDD; --app-grid-subheader-text: #6B5021; } /* Dark mode: headers tinted from the theme colour over the dark card surface. */ :root[data-app-theme][data-bs-theme="dark"] { --app-grid-header-bg: color-mix(in srgb, var(--bs-primary) 30%, var(--bs-paper-bg)); --app-grid-header-text: var(--app-link-dark); --app-grid-header-line: var(--app-link-dark); --app-grid-subheader-bg: color-mix(in srgb, var(--bs-primary) 16%, var(--bs-paper-bg)); --app-grid-subheader-text: var(--bs-heading-color); } :root[data-app-theme] .gridBgColor { background-color: var(--app-grid-header-bg); color: var(--app-grid-header-text); box-shadow: inset 0 -2px 0 var(--app-grid-header-line); } :root[data-app-theme] .gridBgColor2, :root[data-app-theme] .gridBgColor3 { background-color: var(--app-grid-subheader-bg); color: var(--app-grid-subheader-text); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--app-grid-header-line) 55%, transparent); } /* gridBgColor4: the dark header variant, drawn in the theme's sidebar colours. */ :root[data-app-theme] .gridBgColor4 { background-color: var(--app-menu-bg); color: var(--app-menu-hover-text); box-shadow: inset 0 -2px 0 var(--app-menu-accent); } :root[data-app-theme] .gridBgColor4 td, :root[data-app-theme] .gridBgColor4 a, :root[data-app-theme] .gridBgColor4 span { color: var(--app-menu-hover-text); } /* Header captions can sit in nested cells, sort links or spans. */ :root[data-app-theme] .gridBgColor td, :root[data-app-theme] .gridBgColor a, :root[data-app-theme] .gridBgColor span { color: var(--app-grid-header-text); } :root[data-app-theme] .gridBgColor2 td, :root[data-app-theme] .gridBgColor2 a, :root[data-app-theme] .gridBgColor2 span, :root[data-app-theme] .gridBgColor3 td, :root[data-app-theme] .gridBgColor3 a, :root[data-app-theme] .gridBgColor3 span { color: var(--app-grid-subheader-text); } /* ---- DevExpress grid filter row and pager --------------------------------- Class names are DevExpress 20.2 Office365 ones (dxgvFilterRow_*, dxpLite_*, dxp-*); matched by prefix so the theme suffix does not matter. The Office365 theme paints filter cells #f4f4f4 and borders with !important, hence the !important here. -------------------------------------------------------------------------- */ :root[data-app-theme="theme1"] { --app-grid-filter-bg: #FBF6EC; --app-grid-filter-border: #E6D6B5; } :root[data-app-theme="theme2"] { --app-grid-filter-bg: #FCF5F7; --app-grid-filter-border: #EBCFD6; } :root[data-app-theme="theme3"] { --app-grid-filter-bg: #F2F8F5; --app-grid-filter-border: #CDE3DA; } :root[data-app-theme="theme4"] { --app-grid-filter-bg: #FAF4E8; --app-grid-filter-border: #E3D4B6; } :root[data-app-theme][data-bs-theme="dark"] { --app-grid-filter-bg: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-paper-bg)); --app-grid-filter-border: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color)); } /* Filter row */ :root[data-app-theme] tr[class*="dxgvFilterRow"], :root[data-app-theme] tr[class*="dxgvFilterRow"] > td.dxgv, :root[data-app-theme] tr[class*="dxgvFilterRow"] > td { background-color: var(--app-grid-filter-bg) !important; border-bottom-color: var(--app-grid-filter-border) !important; } :root[data-app-theme] tr[class*="dxgvFilterRow"] [class*="dxeTextBox_"], :root[data-app-theme] tr[class*="dxgvFilterRow"] [class*="dxeButtonEdit_"] { background-color: var(--bs-paper-bg) !important; border-color: var(--app-grid-filter-border) !important; transition: border-color .15s ease, box-shadow .15s ease; } :root[data-app-theme] tr[class*="dxgvFilterRow"] [class*="dxeFocused_"] { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .18); } :root[data-app-theme] tr[class*="dxgvFilterRow"] input[class*="dxeEditArea"] { color: var(--bs-heading-color) !important; background-color: transparent !important; } :root[data-app-theme] tr[class*="dxgvFilterRow"] [class*="dxeButtonEditButton_"] { color: var(--bs-primary) !important; } /* Pager */ :root[data-app-theme] [class*="dxpLite_"] .dxp-summary, :root[data-app-theme] [class*="dxpLite_"] .dxp-comboBoxCaption, :root[data-app-theme] [class*="dxpLite_"] .dxp-ellip { color: var(--bs-body-color) !important; } :root[data-app-theme] [class*="dxpLite_"] a.dxp-num, :root[data-app-theme] [class*="dxpLite_"] .dxp-button:not(.dxp-disabledButton) { color: var(--bs-link-color) !important; border-radius: .375rem; transition: background-color .15s ease, color .15s ease; } :root[data-app-theme] [class*="dxpLite_"] a.dxp-num:hover, :root[data-app-theme] [class*="dxpLite_"] .dxp-button:not(.dxp-disabledButton):hover { background-color: var(--bs-primary-bg-subtle) !important; color: var(--bs-link-hover-color) !important; } :root[data-app-theme] [class*="dxpLite_"] .dxp-current { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: var(--bs-primary-contrast, #fff) !important; border-radius: .375rem; } :root[data-app-theme] [class*="dxpLite_"] .dxp-disabledButton { color: var(--bs-secondary-color) !important; } :root[data-app-theme] [class*="dxpLite_"] .dxp-pageSizeItem [class*="dxeButtonEdit_"], :root[data-app-theme] [class*="dxpLite_"] .dxp-comboBox { border-color: var(--app-grid-filter-border) !important; } :root[data-app-theme] [class*="dxpLite_"] .dxp-pageSizeItem [class*="dxeFocused_"] { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .18); } /* ---- DevExpress grid focused row ------------------------------------------ Grids mark the focused row with CssClass gridFocusedRow (DevGridCss.css); DevExpress also adds dxgvFocusedRow_*, which Office365 paints orange (#F87C1D) with white text, hover included. Both are themed here: a theme tint, deep theme text and a theme-coloured bar on the leading edge. -------------------------------------------------------------------------- */ :root[data-app-theme="theme1"] { --app-grid-focus-bg: #F3E8D2; --app-grid-focus-text: #3B2C12; --app-grid-focus-bar: #9A7433; } :root[data-app-theme="theme2"] { --app-grid-focus-bg: #F5E3E8; --app-grid-focus-text: #4A101B; --app-grid-focus-bar: #7A1E2C; } :root[data-app-theme="theme3"] { --app-grid-focus-bg: #DDEFE8; --app-grid-focus-text: #083F36; --app-grid-focus-bar: #0F6B5C; } :root[data-app-theme="theme4"] { --app-grid-focus-bg: #F0E5CF; --app-grid-focus-text: #3B2C12; --app-grid-focus-bar: #8C6A2E; } :root[data-app-theme][data-bs-theme="dark"] { --app-grid-focus-bg: color-mix(in srgb, var(--bs-primary) 24%, var(--bs-paper-bg)); --app-grid-focus-text: var(--bs-heading-color); --app-grid-focus-bar: var(--app-link-dark); } :root[data-app-theme] tr.gridFocusedRow, :root[data-app-theme] tr[class*="dxgvFocusedRow_"], :root[data-app-theme] tr[class*="dxgvFocusedRow_"][class*="dxgvDataRowHover_"] { background-color: var(--app-grid-focus-bg) !important; color: var(--app-grid-focus-text) !important; } :root[data-app-theme] tr.gridFocusedRow > td, :root[data-app-theme] tr[class*="dxgvFocusedRow_"] > td { color: var(--app-grid-focus-text) !important; } /* Bar on the leading edge of the focused row. */ :root[data-app-theme] tr.gridFocusedRow > td:first-child, :root[data-app-theme] tr[class*="dxgvFocusedRow_"] > td:first-child { box-shadow: inset 3px 0 0 var(--app-grid-focus-bar); } /* Detail grids: Office365 paints the focused indent cell orange. */ :root[data-app-theme] tr[class*="dxgvFocusedRow_"] > td[class*="dxgvIndentCell"] { background-color: var(--app-grid-focus-bg) !important; } /* Links and command icons in the focused row (DevGridCss.css makes them primary). */ :root[data-app-theme] tr.gridFocusedRow a, :root[data-app-theme] tr[class*="dxgvFocusedRow_"] a, :root[data-app-theme] tr.gridFocusedRow .ti, :root[data-app-theme] tr.gridFocusedRow .icon-base, :root[data-app-theme] tr[class*="dxgvFocusedRow_"] .ti, :root[data-app-theme] tr[class*="dxgvFocusedRow_"] .icon-base { color: var(--app-grid-focus-bar) !important; } /* ========================================================================== Theme Slider presentation ========================================================================== */ /* "Theme 1" ... "Theme 4" under each option. */ #template-customizer .template-customizer-colors-options { counter-reset: app-theme; } #template-customizer .template-customizer-colors-options .custom-option:not(:has(input[value="picker"])) { counter-increment: app-theme; position: relative; /* The template clips options (overflow: hidden) and zeroes their margin (mb-0 !important); both are undone here so the caption can sit below the box like the other options. */ overflow: visible !important; margin-bottom: 1.4rem !important; } /* The label sits just below the bordered swatch box, not inside it. */ #template-customizer .template-customizer-colors-options .custom-option:not(:has(input[value="picker"]))::after { content: "Theme " counter(app-theme); position: absolute; top: calc(100% + .3rem); left: 50%; transform: translateX(-50%); font-size: .72rem; line-height: 1.2; white-space: nowrap; color: var(--bs-body-color); pointer-events: none; } #template-customizer .template-customizer-colors-options .custom-option:has(input:checked)::after { color: var(--bs-primary); font-weight: 500; } /* Each swatch previews its theme: sidebar, primary and active colours. */ #template-customizer .custom-option:has(input[data-color="#9A7433" i]) .custom-option-body { background-image: linear-gradient(135deg, #1C1815 0 50%, #9A7433 50% 80%, #C9A45C 80% 100%); } #template-customizer .custom-option:has(input[data-color="#7A1E2C" i]) .custom-option-body { background-image: linear-gradient(135deg, #2B1219 0 50%, #7A1E2C 50% 80%, #C9A45C 80% 100%); } #template-customizer .custom-option:has(input[data-color="#0F6B5C" i]) .custom-option-body { background-image: linear-gradient(135deg, #0F2723 0 50%, #0F6B5C 50% 80%, #C9A45C 80% 100%); } #template-customizer .custom-option:has(input[data-color="#8C6A2E" i]) .custom-option-body { background-image: linear-gradient(135deg, #FBF7EF 0 50%, #8C6A2E 50% 80%, #C9A45C 80% 100%); box-shadow: inset 0 0 0 1px #E8DDC8; }