* without its own color class (headings, labels, page titles, etc.) * near-invisible. Match it broadly too, but exclude common * color/semantic-carrying class patterns so status badges, alerts and * brand-colored buttons keep their own intentional colors. */ [data-theme="light"] div:not([class*="label"]):not([class*="badge"]):not([class*="alert"]):not([class*="btn"]):not([class*="text-"]):not([class*="bg-primary"]):not([class*="bg-danger"]):not([class*="bg-success"]):not([class*="bg-warning"]):not([class*="bg-info"]):not([class*="progress"]):not([class*="circle"]) { color: #031169 !important; } /* * :not(#frame a) below matches a very broad, high-specificity rule from one * of the installed theme addons (theme_styles.css: `a:not(#frame a) { color: * rgba(225,235,245,.9) !important }`) that forces near-white text onto * virtually every plain site-wide, assuming a permanently dark page. * That's invisible against light-mode's light backgrounds (e.g. the client * profile page's left nav and tab links). Match its selector shape so ours * carries at least the same specificity and reliably wins in light mode. */ [data-theme="light"] a:not(#frame a) { color: #031169 !important; } [data-theme="light"] .content a:not(.btn):not(#frame a) { color: #b78e3b !important; } /* * The broad rule above (ID-level specificity via :not(#frame a)) also beats * the sidebar's own link-color rule, which has no ID and so always loses. * That made sidebar text render navy-on-navy (invisible). Re-scope to * .sidebar with the same ID-trick so this wins back over the rule above. */ [data-theme="light"] .sidebar a:not(#frame a) { color: #8b95c4 !important; } [data-theme="light"] .sidebar ul.nav li.active > a:not(#frame a), [data-theme="light"] .sidebar ul.nav li.active > a:not(#frame a) span, [data-theme="light"] .sidebar ul.nav li a:not(#frame a):hover { color: #b78e3b !important; } /* ------------------------------------------------------------------ */ /* 12. Employee chat widget (prchat addon) */ /* Its own stylesheet hardcodes a generic periwinkle blue (#546bf2) */ /* for the floating widget's header/footer bars - bring it onto brand. */ /* ------------------------------------------------------------------ */ #pusherChat .topInfo, #pusherChat .chat-footer { background: var(--pf-gold-gradient) !important; color: #031169 !important; } #pusherChat .topInfo *, #pusherChat .chat-footer * { color: #031169 !important; } #pusherChat .dropdown-menu { background: #ffffff !important; color: #031169 !important; } /* ------------------------------------------------------------------ */ /* 13. Arabic font */ /* IBM Plex Sans Arabic (Google Fonts) - free, professionally designed */ /* for UI text; stand-in for Bahij (paid foundry, no license held). */ /* Applied whenever the page is RTL, independent of the light/dark */ /* toggle. Form controls get it explicitly since browsers don't */ /* inherit font-family onto inputs/buttons/selects by default. */ /* ------------------------------------------------------------------ */ html[dir="rtl"] body, html[dir="rtl"] .btn, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select, html[dir="rtl"] button, html[dir="rtl"] .selectpicker, html[dir="rtl"] .dropdown-menu, html[dir="rtl"] .form-control { font-family: 'IBM Plex Sans Arabic', 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif !important; } /* Arabic numerals/latin text (invoice totals, dates, code) read better in the Latin font even inside an RTL page - excluded from the swap above. */ html[dir="rtl"] .tw-font-mono, html[dir="rtl"] code, html[dir="rtl"] pre { font-family: 'Inter', Menlo, Consolas, monospace !important; } /* ------------------------------------------------------------------ */ /* 14. RTL layout fixes */ /* Perfex's own core CSS + bootstrap-arabic.min.css (loaded by core */ /* when is_rtl() is true) already mirror most of the base layout. These*/ /* patch the pieces this custom theme layer added on top, which are */ /* LTR-only by default: the topbar dashboard-options button, dropdown */ /* caret/menu alignment some addons hardcode, and modal close buttons. */ /* ------------------------------------------------------------------ */ /* Dropdown menus anchored to a right-aligned trigger should open */ /* growing to the left in RTL, not clip off-screen to the right. */ html[dir="rtl"] .dropdown-menu-right, html[dir="rtl"] .dropdown-menu.pull-right { right: auto !important; left: 0 !important; } html[dir="rtl"] .dropdown-menu-left { left: auto !important; right: 0 !important; } /* Bootstrap 3 modal close "x" defaults to float:right (correct in LTR, wrong in RTL where the close control reads better on the visual left only if the whole header is mirrored - Bootstrap-arabic already mirrors .modal-header, this just keeps our custom panel headers and third-party addon modals that don't use .modal-header consistent). */ html[dir="rtl"] .panel-heading .close, html[dir="rtl"] .panel-actions { float: left !important; } /* Icons that sit before label text (buttons, sidebar, nav pills) need their margin flipped so the gap lands between icon and text either way, instead of pushing the icon further from the text. */ html[dir="rtl"] .btn i.fa, html[dir="rtl"] .btn i[class*="fa-"], html[dir="rtl"] .dt-buttons .btn i { margin-right: 0; margin-left: 0.4em; } /* Notification/quick-action badges positioned via absolute left/right on icons (topbar bell, chat unread count) - mirror to the icon's new visual corner. */ html[dir="rtl"] .icon .label-count, html[dir="rtl"] .icon .badge { right: auto !important; left: -6px !important; } /* Chat widget floats bottom-right in LTR; keep it reachable at bottom-left in RTL so it doesn't collide with the mirrored sidebar. */ html[dir="rtl"] #pusherChat { right: auto !important; left: 20px !important; } /* Theme toggle + notification bell in the topbar already reorder via Tailwind's rtl: variants in the markup (see my_hooks.php); this just corrects the icon-to-label gap on the "Dashboard Options" button and similar inline-icon buttons injected by dashboard widgets. */ html[dir="rtl"] .btn .fa + span, html[dir="rtl"] .btn span + .fa { margin-right: 0.35em; }