/* * dark-theme.css — Travel dark overrides for buttons, print, and tg-btn. * Applied via .theme-dark on / (Travel.Theme cookie). * Loaded last so 23px sizes and dark colors beat site/output CSS. */ /* -------------------------------------------------------------------------- 0. Size lock (light + dark) — last-loaded so Tailwind p-0 / h-8 cannot win -------------------------------------------------------------------------- */ .tg-btn, ul.tg-btn { display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; height: var(--btn-height, 23px); min-height: var(--btn-height, 23px); padding: 2px; border-radius: 999px; } .tg-btn li a { box-sizing: border-box; height: 17px; min-height: 17px; min-width: 56px; padding: 0 10px; font-size: 12px; font-weight: 500; line-height: 1.2; } .btn-print, .btn.btn-print, button.btn-print, a.btn-print, .pv-btn { box-sizing: border-box; height: var(--btn-height, 23px); min-height: var(--btn-height, 23px); padding: 1px 9px; font-size: 12px; font-weight: 500; line-height: 1.2; } .pv-btn.h-8, .pv-btn.w-8, .pv-btn.min-w-8 { width: var(--btn-height, 23px); height: var(--btn-height, 23px); min-width: var(--btn-height, 23px); min-height: var(--btn-height, 23px); padding: 0; } .theme-dark { color-scheme: dark; } /* -------------------------------------------------------------------------- 1. Shared 23px action buttons (matches HRMetricS Site.css / btn-system) -------------------------------------------------------------------------- */ .theme-dark .btn, .theme-dark a.btn, .theme-dark button.btn, .theme-dark .pv-btn, .theme-dark .btn-print, .theme-dark .toggle-btn, .theme-dark a.toggle-btn { box-sizing: border-box; height: var(--btn-height, 23px); min-height: var(--btn-height, 23px); padding: 1px 9px; font-size: 12px; font-weight: 500; line-height: 1.2; border-radius: var(--btn-border-radius, 7px); } .theme-dark .login-page .btn-custom, .theme-dark .login-page .btn-otp, .theme-dark .login-page .btn-signup { height: 40px; min-height: 40px; padding: 0 16px; font-size: 14px; } /* Print */ .theme-dark .btn-print, .theme-dark .btn.btn-print, .theme-dark button.btn-print, .theme-dark a.btn-print { background-color: var(--btn-print-bg, #38bdf8); border-color: var(--btn-print-bg, #38bdf8); color: #ffffff; } .theme-dark .btn-print:hover, .theme-dark .btn.btn-print:hover, .theme-dark button.btn-print:hover, .theme-dark a.btn-print:hover { background-color: var(--btn-primary-hover-color, #2563eb); border-color: var(--btn-primary-hover-color, #2563eb); color: #ffffff; } .theme-dark .btn-print i, .theme-dark .btn.btn-print i, .theme-dark .pv-btn .fa-print { color: inherit; } .theme-dark .pv-btn-primary { background-color: var(--btn-primary-color, #3b82f6); border-color: var(--btn-primary-color, #3b82f6); color: #ffffff; } .theme-dark .pv-btn-primary:hover { background-color: var(--btn-primary-hover-color, #2563eb); border-color: var(--btn-primary-hover-color, #2563eb); color: #ffffff; } .theme-dark .pv-btn-secondary { background-color: var(--surface-muted-bg, #212e45); border-color: var(--surface-border, #3a4d6a); color: var(--font-color, #f8fafc); } .theme-dark .pv-btn.h-8, .theme-dark .pv-btn.w-8, .theme-dark .pv-btn.min-w-8 { width: var(--btn-height, 23px); height: var(--btn-height, 23px); min-width: var(--btn-height, 23px); min-height: var(--btn-height, 23px); padding: 0; } .theme-dark .export-icon.excel { width: var(--btn-height, 23px); height: var(--btn-height, 23px); min-width: var(--btn-height, 23px); min-height: var(--btn-height, 23px); border-color: var(--surface-border, #3a4d6a); background-color: var(--surface-bg, #1a2438); color: #34d399; } /* -------------------------------------------------------------------------- 2. Segmented tabs (.tg-btn) — 23px track, readable dark contrast -------------------------------------------------------------------------- */ .theme-dark .tg-btn, .theme-dark ul.tg-btn, html.theme-dark .tg-btn, html.theme-dark ul.tg-btn { display: inline-flex; align-items: center; gap: 2px; box-sizing: border-box; height: var(--btn-height, 23px); min-height: var(--btn-height, 23px); padding: 2px; background: var(--toggle-track-bg, #1c283c); border: 1px solid var(--toggle-track-border, #3a4d6a); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .theme-dark .tg-btn li, html.theme-dark .tg-btn li { background: transparent; border: none; } .theme-dark .tg-btn li a, html.theme-dark .tg-btn li a { height: 17px; min-height: 17px; min-width: 56px; padding: 0 10px; font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--toggle-view-color, #e2e8f0); background: transparent; opacity: 1; } .theme-dark .tg-btn li:not(.tg-active) a:hover, .theme-dark .tg-btn li:not(.tg-active) a:focus, html.theme-dark .tg-btn li:not(.tg-active) a:hover, html.theme-dark .tg-btn li:not(.tg-active) a:focus { color: var(--toggle-view-hover-color, #93c5fd); background: var(--toggle-view-hover-bg, rgba(59, 130, 246, 0.22)); text-decoration: none; } .theme-dark .tg-btn li.tg-active, html.theme-dark .tg-btn li.tg-active { background: var(--toggle-view-active-bg, #3b82f6); box-shadow: var(--toggle-view-active-shadow, 0 1px 4px rgba(59, 130, 246, 0.45)); } .theme-dark .tg-btn li.tg-active a, .theme-dark .tg-btn .tg-active > a, html.theme-dark .tg-btn li.tg-active a, .theme-dark .tg-btn li.tg-active a:hover, .theme-dark .tg-btn li.tg-active a:focus { color: var(--toggle-view-active-color, #ffffff); background: var(--toggle-view-active-bg, #3b82f6); } .theme-dark .booking-page .booking-toolbar { background-color: var(--surface-bg, #1a2438) !important; border-color: var(--surface-border, #3a4d6a) !important; color: var(--font-color, #f8fafc) !important; } .theme-dark .booking-page .booking-page-title, .theme-dark .booking-page .booking-toolbar h4 { color: var(--font-color, #f8fafc) !important; } .theme-dark .booking-page .booking-print-menu, .theme-dark .booking-page .dropdown-menu { background-color: var(--surface-bg, #1a2438) !important; border-color: var(--surface-border, #3a4d6a) !important; } .theme-dark .booking-page .booking-print-menu a, .theme-dark .booking-page .dropdown-menu a { color: var(--font-color, #f8fafc) !important; } .theme-dark .booking-page .booking-print-menu a:hover, .theme-dark .booking-page .dropdown-menu a:hover { background-color: var(--menu-hover-bg, #2a3c57) !important; color: var(--font-color, #f8fafc) !important; } /* -------------------------------------------------------------------------- Rights tabs (#userRightsTab) -------------------------------------------------------------------------- */ html.theme-dark #userRightsTab.tab, html.theme-dark ul.tab#userRightsTab, html.theme-dark .main-content > ul.tab, .theme-dark #userRightsTab, .theme-dark ul.tab { background-color: var(--title-bar-bg, #212e45) !important; border-bottom-color: var(--surface-border, #3a4d6a) !important; } html.theme-dark #userRightsTab.tab a, html.theme-dark ul.tab a, .theme-dark #userRightsTab a, .theme-dark ul.tab a { color: var(--menu-muted-color, #cbd5e1) !important; } html.theme-dark #userRightsTab.tab li:hover a, html.theme-dark ul.tab li:hover a, .theme-dark #userRightsTab li:hover a { color: var(--breadcrumb-hover-color, #93c5fd) !important; } html.theme-dark #userRightsTab.tab li.active, html.theme-dark ul.tab li.active, .theme-dark #userRightsTab li.active { border-bottom-color: var(--tab-active-bg, #3b82f6) !important; } html.theme-dark #userRightsTab.tab li.active a, html.theme-dark #userRightsTab.tab a.active, html.theme-dark ul.tab li.active a, .theme-dark #userRightsTab li.active a { color: var(--breadcrumb-active-color, #93c5fd) !important; } /* -------------------------------------------------------------------------- 3. Grid page toolbar (.g-title / .g-text / .g-left / .g-right) -------------------------------------------------------------------------- */ html.theme-dark .g-title, .theme-dark .g-title { background-color: var(--title-bar-bg, #212e45) !important; border-bottom-color: var(--surface-border, #3a4d6a) !important; color: var(--title-bar-color, #f8fafc) !important; } html.theme-dark .g-title .g-text, html.theme-dark .g-title .gt-icon, html.theme-dark .g-title h4, html.theme-dark .g-title .g-center h4, .theme-dark .g-text, .theme-dark .gt-icon, .theme-dark .g-title .g-left, .theme-dark .g-title .g-right, .theme-dark .g-title .g-center { color: var(--title-bar-color, #f8fafc) !important; } html.theme-dark .g-cnt, .theme-dark .g-cnt { background-color: var(--surface-bg, #1a2438) !important; color: var(--font-color, #f8fafc) !important; } html.theme-dark .g-title .tg-btn, html.theme-dark .g-left .tg-btn, html.theme-dark .g-title ul.tg-btn { background: var(--toggle-track-bg, #1c283c) !important; border-color: var(--toggle-track-border, #3a4d6a) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } html.theme-dark .g-title .tg-btn li.tg-active, html.theme-dark .g-title .tg-btn li.tg-active a { background: var(--toggle-view-active-bg, #3b82f6) !important; color: #ffffff !important; } /* -------------------------------------------------------------------------- 4. Kendo Grid — beat Fiori #fff on every grid (locked/virtual/pager) -------------------------------------------------------------------------- */ html.theme-dark .k-grid, html.theme-dark .k-grid.k-widget, html.theme-dark .k-treelist, html.theme-dark .main-content .k-grid, html.theme-dark .booking-grid-card .k-grid { background-color: var(--kendo-grid-bg, #172033) !important; border-color: var(--kendo-grid-border-color, #334155) !important; color: var(--kendo-grid-color, #e5e7eb) !important; } html.theme-dark .k-grid-header, html.theme-dark .k-grid-header-wrap, html.theme-dark .k-grid-header-locked, html.theme-dark .k-grid-header .k-header, html.theme-dark .k-grid th.k-header, html.theme-dark .k-grid .k-table-th, html.theme-dark .k-grouping-header, html.theme-dark .k-grid-footer { background-color: var(--kendo-grid-header-bg, #1f2a3d) !important; background-image: none !important; border-color: var(--kendo-grid-border-color, #334155) !important; color: var(--kendo-grid-header-color, #e5e7eb) !important; } html.theme-dark .k-grid-header .k-link, html.theme-dark .k-grid-header .k-header .k-link, html.theme-dark .k-grid .k-column-title { color: var(--kendo-grid-header-color, #e5e7eb) !important; } html.theme-dark .k-grid-content, html.theme-dark .k-grid-content-locked, html.theme-dark .k-grid-container, html.theme-dark .k-virtual-scrollable-wrap, html.theme-dark .k-grid table, html.theme-dark .k-grid .k-table, html.theme-dark .k-grid-header table, html.theme-dark .k-grid-content table, html.theme-dark .k-grid-content-locked table { background-color: var(--kendo-grid-bg, #172033) !important; color: var(--kendo-grid-color, #e5e7eb) !important; } html.theme-dark .k-grid td, html.theme-dark .k-grid .k-table-td, html.theme-dark .k-grid .k-master-row > td, html.theme-dark .k-grid tbody > tr > td { background-color: var(--kendo-grid-bg, #172033) !important; border-color: var(--kendo-grid-border-color, #334155) !important; color: var(--kendo-grid-color, #e5e7eb) !important; } html.theme-dark .k-grid tr.k-alt, html.theme-dark .k-grid tr.k-alt > td, html.theme-dark .k-grid tr.k-table-alt-row, html.theme-dark .k-grid tr.k-table-alt-row > td { background-color: var(--kendo-grid-alt-bg, #1a2438) !important; } html.theme-dark .k-grid tbody > tr:not(.k-detail-row):hover > td, html.theme-dark .k-grid tr:hover td, html.theme-dark .k-grid .k-table-row:hover > td, html.theme-dark .k-grid .k-hover > td { background-color: var(--kendo-grid-row-hover-bg, #25324a) !important; } html.theme-dark .k-grid tr.k-selected > td, html.theme-dark .k-grid tr.k-state-selected > td { background-color: var(--kendo-grid-selected-bg, rgba(59, 130, 246, 0.28)) !important; color: var(--kendo-grid-color, #e5e7eb) !important; } html.theme-dark .k-filter-row, html.theme-dark .k-filter-row > th, html.theme-dark .k-filter-row > td { background-color: var(--kendo-filter-row-bg, #1f2a3d) !important; border-color: var(--kendo-grid-border-color, #334155) !important; color: var(--kendo-grid-header-color, #e5e7eb) !important; } html.theme-dark .k-grid-pager, html.theme-dark .k-pager, html.theme-dark .k-pager-wrap, html.theme-dark .k-grid .k-pager-wrap, html.theme-dark .booking-grid-card .k-grid-pager { background-color: var(--kendo-grid-toolbar-bg, #1f2a3d) !important; border-color: var(--kendo-grid-toolbar-border, #334155) !important; color: var(--kendo-grid-footer-color, #e5e7eb) !important; } html.theme-dark .k-pager-numbers .k-link, html.theme-dark .k-pager-nav.k-link, html.theme-dark .k-pager-info { color: var(--kendo-grid-color, #e5e7eb) !important; background-color: transparent !important; } html.theme-dark .k-pager-numbers .k-link.k-selected, html.theme-dark .k-pager-numbers .k-state-selected { background-color: var(--kendo-color-primary, #3b82f6) !important; color: #ffffff !important; } html.theme-dark .k-grid-norecords, html.theme-dark .k-grid-norecords-template, html.theme-dark .k-grid .k-no-data { background-color: var(--kendo-grid-norecords-bg, #172033) !important; color: var(--kendo-grid-norecords-color, #a8b3c5) !important; } html.theme-dark .k-grid-toolbar, html.theme-dark #TransferDetails .k-grid-toolbar { background-color: var(--kendo-grid-toolbar-bg, #1f2a3d) !important; border-color: var(--kendo-grid-toolbar-border, #334155) !important; color: var(--kendo-grid-color, #e5e7eb) !important; } html.theme-dark .k-grid .btn-grid, html.theme-dark .k-grid .k-grid-filter, html.theme-dark .k-grid .k-header-column-menu, html.theme-dark .k-grid .k-icon, html.theme-dark .k-grid .k-svg-icon { color: var(--kendo-gird-filter-color, #93c5fd) !important; } html.theme-dark .k-grouping-row td, html.theme-dark .k-group-footer td, html.theme-dark .k-grid-footer td { background-color: var(--kendo-grid-header-bg, #1f2a3d) !important; color: var(--kendo-grid-header-color, #e5e7eb) !important; } html.theme-dark .offcanvas tbody, html.theme-dark .table-custom td { background-color: var(--kendo-grid-bg, #172033) !important; color: var(--kendo-grid-color, #e5e7eb) !important; } .k-grid .dropdown-btn .fa, .k-grid .dropdown-btn [class*="text-slate-"] { color: inherit !important; } html.theme-dark .k-grid .dropdown-btn, html.theme-dark .grp-btn.dropdown-btn { color: var(--kendo-grid-color, #e5e7eb) !important; } html.theme-dark .k-grid .dropdown-btn:hover, html.theme-dark .k-grid .dropdown-btn.active { background: var(--kendo-grid-row-hover-bg, #25324a) !important; border-color: var(--kendo-grid-border-color, #334155) !important; color: #f1f5f9 !important; } html.theme-dark #kendo-grid-kebab-float.dropdown-btn-content, html.theme-dark .k-column-menu, html.theme-dark .k-popup.k-column-menu, html.theme-dark .k-grid-columnmenu-popup { background: var(--kendo-popup-bg, #1e293b) !important; border-color: var(--kendo-grid-border-color, #3f536e) !important; color: var(--kendo-popup-color, #e2e8f0) !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } html.theme-dark #kendo-grid-kebab-float a { color: #e2e8f0 !important; } html.theme-dark #kendo-grid-kebab-float a:hover, html.theme-dark #kendo-grid-kebab-float a:focus { background: rgba(59, 130, 246, 0.16) !important; color: #f8fafc !important; } html.theme-dark .k-column-menu .k-menu-item:hover, html.theme-dark .k-column-menu .k-item:hover, html.theme-dark .k-column-menu .k-column-list-item:hover { background: rgba(59, 130, 246, 0.16) !important; color: #f8fafc !important; } /* -------------------------------------------------------------------------- Edit Booking — no gray text; white on dark surfaces -------------------------------------------------------------------------- */ html.theme-dark .edit-booking-page .edit-booking-search .k-dropdownlist, html.theme-dark .edit-booking-page .edit-booking-search .k-picker, html.theme-dark .edit-booking-page .edit-booking-search .k-datepicker, html.theme-dark .edit-booking-page .edit-booking-search .k-dateinput { background: var(--input-bg, #243247) !important; border-color: var(--input-border, #4b6284) !important; color: #ffffff !important; } html.theme-dark .edit-booking-page .edit-booking-search .k-input-inner, html.theme-dark .edit-booking-page .edit-booking-search .k-input-value-text, html.theme-dark .edit-booking-page .edit-booking-search .k-input-button { color: #ffffff !important; } html.theme-dark .edit-booking-page .property-price, html.theme-dark .edit-booking-page .text-white { color: #ffffff !important; }