/* * Mjara Brand CSS * =============== * Loaded via app_include_css → injected in before first paint. * All styling here is zero-flicker. * * Sections: * 0. Arabic font (IBM Plex Sans Arabic) + font-stack override * 1. Hide anchors that point at Frappe / ERPNext domains * 2. Hide "Powered by / Built on Frappe" footer variants * 3. Replace navbar logo image with "Mjara" text (until logo is uploaded) */ /* ========================================================================= 0. Arabic font — IBM Plex Sans Arabic Place the woff2 files in: apps/mjara_brand/mjara_brand/public/fonts/ Until they land, Arabic glyphs fall back to system fonts (Tahoma / SF Arabic / Segoe UI Arabic depending on OS). ========================================================================= */ @font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/mjara_brand/fonts/IBMPlexSansArabic-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/mjara_brand/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/mjara_brand/fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/mjara_brand/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/mjara_brand/fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Override Frappe's --font-stack so Arabic glyphs render in IBM Plex Sans Arabic while Latin glyphs continue to use InterVariable. */ :root { --font-stack: "IBM Plex Sans Arabic", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } /* Press dashboard hardcodes Inter on its app root, bypassing --font-stack. Force a shaping-aware Arabic font in RTL pages so words like "مجرة" render as connected Arabic letters instead of isolated Latin-font glyphs. */ html[dir=rtl] body, html[dir=rtl] body *:not(svg):not(path):not(code):not(pre) { font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif !important; font-variant-ligatures: normal; text-rendering: optimizeLegibility; } @media (min-width: 768px) { html[dir=rtl] aside button .text-base.font-medium.leading-none.hidden { display: block !important; direction: rtl; unicode-bidi: isolate; white-space: nowrap; } } /* Billing overview uses fixed px-60 side padding, which leaves a very narrow content column on smaller dashboard widths and causes Arabic labels/buttons to collide. Keep the desktop spacing only on roomy viewports. */ @media (max-width: 1100px) { html[dir=rtl] .flex.flex-1.flex-col.gap-8.overflow-y-auto.px-60.pt-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } } @media (max-width: 640px) { html[dir=rtl] .flex.flex-1.flex-col.gap-8.overflow-y-auto.px-60.pt-6 { gap: 1.25rem !important; padding-left: 1rem !important; padding-right: 1rem !important; } html[dir=rtl] .flex.flex-1.flex-col.gap-8.overflow-y-auto.px-60.pt-6 .flex.items-center.justify-between { align-items: stretch !important; flex-direction: column !important; gap: 0.75rem !important; } html[dir=rtl] .flex.flex-1.flex-col.gap-8.overflow-y-auto.px-60.pt-6 .shrink-0, html[dir=rtl] .flex.flex-1.flex-col.gap-8.overflow-y-auto.px-60.pt-6 .shrink-0 > button { width: 100% !important; } html[dir=rtl] .flex.flex-1.flex-col.gap-8.overflow-y-auto.px-60.pt-6 button { justify-content: center !important; max-width: 100% !important; white-space: normal !important; } } /* ========================================================================= Brand palette tokens + Frappe Desk primary color overrides Twelve steps built from the Qriib Aamal logo: steps 7, 8 and 9 are the exact colours sampled out of its purple gradient, the rest keep the lightness and saturation relationships of the scale they replaced. Step 9 (#9D48E7) is the brand primary — buttons, links, active accents. The variables stay named --indigo-* because those are Frappe's own design tokens; renaming them would stop the override reaching the Desk. ========================================================================= */ :root { /* --- Indigo palette tokens --- */ --indigo-1: #FEFDFE; --indigo-2: #FBF7FF; --indigo-3: #F6EDFE; --indigo-4: #F1E1FF; --indigo-5: #EAD2FF; --indigo-6: #E2C1FF; --indigo-7: #B099F0; --indigo-8: #AA82ED; --indigo-9: #9D48E7; --indigo-10: #8933D4; --indigo-11: #853AC7; --indigo-12: #401F5C; /* --- Frappe Desk primary overrides --- */ --primary: var(--indigo-9); --primary-color: var(--indigo-9); --btn-primary: var(--indigo-9); --brand-color: var(--indigo-9); --border-primary: var(--indigo-9); /* Sidebar active item highlight */ --sidebar-select-color: var(--indigo-3); /* Input / control focus border */ --dark-border-color: var(--indigo-8); /* Hyperlinks */ --ink-blue-link: var(--indigo-9); /* ---- Frappe-UI / CRM blue scale → Indigo ---- CRM and other Vue SPAs use --blue-* and --dark-blue-* as their base palette, referenced via Tailwind utility classes compiled as var(--blue-500) etc. Remap the whole scale to Indigo shades. */ --blue-50: var(--indigo-1); /* #FEFDFE */ --blue-100: var(--indigo-3); /* #F6EDFE */ --blue-200: var(--indigo-4); /* #F1E1FF */ --blue-300: var(--indigo-5); /* #EAD2FF */ --blue-400: var(--indigo-7); /* #B099F0 */ --blue-500: var(--indigo-9); /* #9D48E7 — main interactive */ --blue-600: var(--indigo-10); /* #8933D4 */ --blue-700: var(--indigo-11); /* #853AC7 */ --blue-800: var(--indigo-12); /* #401F5C */ --blue-900: var(--indigo-12); /* #401F5C */ /* Frappe espresso semantic blue tokens — ink (text/icon) */ --ink-blue-1: var(--indigo-3); /* lightest tint */ --ink-blue-2: var(--indigo-9); /* main interactive = #9D48E7 */ --ink-blue-3: var(--indigo-10); /* darker interactive */ --ink-blue-link: var(--indigo-9); /* hyperlinks */ /* Frappe espresso semantic blue tokens — surface (backgrounds) */ --surface-blue-1: var(--indigo-2); /* lightest hover bg */ --surface-blue-2: var(--indigo-3); /* selected bg */ --surface-blue-3: var(--indigo-9); /* SOLID button bg = #9D48E7 */ /* Border */ --outline-blue-1: var(--indigo-6); /* #E2C1FF */ /* Vue SPA primary action buttons (frappe-ui solid gray theme = default) → Indigo Older frappe-ui renders gray solid as bg-surface-gray-7/6/5. Newer frappe-ui renders gray solid as bg-surface-gray-10/9/8. Override both token generations so every Vue app stays branded. */ --surface-gray-10: #9D48E7; /* current primary button bg */ --surface-gray-9: #8933D4; /* current hover state */ --surface-gray-8: #853AC7; /* current active/pressed state */ --surface-gray-7: #9D48E7; /* legacy primary button bg */ --surface-gray-6: #8933D4; /* legacy hover state */ --surface-gray-5: #853AC7; /* legacy active/pressed state */ } /* ========================================================================= Indigo accent — component-level overrides that use hard values ========================================================================= */ /* Indicator dots (small colored circles before a label) → solid Indigo */ .indicator.blue::before { background: var(--indigo-9) !important; } /* Indicator pills (list view status badges like "Submitted", "Draft") → light Indigo background with dark Indigo text, same pattern as Frappe's native blue pill but in our palette. Solid bg made text invisible. */ .indicator-pill.blue { background: var(--indigo-3, #F6EDFE) !important; color: var(--indigo-9, #9D48E7) !important; } [data-theme="dark"] .indicator-pill.blue { background: #401F5C !important; color: #B099F0 !important; } /* Checkbox checked state */ input[type="checkbox"]:checked, .checkbox-input:checked { accent-color: var(--indigo-9); } /* msgprint dialogs on the auth pages. The card itself is owned by qriib_auth.css (loaded only by mjara_brand/www/login.html), but a msgprint dialog is rendered by frappe-web.bundle.js outside that page and Bootstrap ships `.modal-content` with a hardcoded white background that no theme overrides, so the reset-password message came out near-white on white. Dress the dialog like the dark auth card it sits on rather than fighting the inherited colour. */ [data-theme="dark"] body:has(.for-login) .modal-content, [data-theme="dark"] body:has(.for-signup) .modal-content, [data-theme="dark"] body:has(.for-forgot) .modal-content { background-color: #17161a !important; border-color: rgba(255, 255, 255, 0.09) !important; color: #f4f4f6 !important; } [data-theme="dark"] body:has(.for-login) .modal-header, [data-theme="dark"] body:has(.for-signup) .modal-header, [data-theme="dark"] body:has(.for-forgot) .modal-header, [data-theme="dark"] body:has(.for-login) .modal-footer, [data-theme="dark"] body:has(.for-signup) .modal-footer, [data-theme="dark"] body:has(.for-forgot) .modal-footer { border-color: rgba(255, 255, 255, 0.07) !important; } [data-theme="dark"] body:has(.for-login) .modal-title, [data-theme="dark"] body:has(.for-signup) .modal-title, [data-theme="dark"] body:has(.for-forgot) .modal-title, [data-theme="dark"] body:has(.for-login) .modal-body, [data-theme="dark"] body:has(.for-signup) .modal-body, [data-theme="dark"] body:has(.for-forgot) .modal-body, [data-theme="dark"] body:has(.for-login) .modal-body p, [data-theme="dark"] body:has(.for-signup) .modal-body p, [data-theme="dark"] body:has(.for-forgot) .modal-body p, [data-theme="dark"] body:has(.for-login) .msgprint, [data-theme="dark"] body:has(.for-signup) .msgprint, [data-theme="dark"] body:has(.for-forgot) .msgprint { color: #f4f4f6 !important; } /* The dismiss control is a bare glyph; at the card's own contrast it reads as a smudge. */ [data-theme="dark"] body:has(.for-login) .modal-header .btn-modal-close, [data-theme="dark"] body:has(.for-signup) .modal-header .btn-modal-close, [data-theme="dark"] body:has(.for-forgot) .modal-header .btn-modal-close, [data-theme="dark"] body:has(.for-login) .modal-header .close, [data-theme="dark"] body:has(.for-signup) .modal-header .close, [data-theme="dark"] body:has(.for-forgot) .modal-header .close { color: #9c9ca8 !important; opacity: 1 !important; } [data-theme="dark"] body:has(.for-login) .modal-header .btn-modal-close svg, [data-theme="dark"] body:has(.for-signup) .modal-header .btn-modal-close svg, [data-theme="dark"] body:has(.for-forgot) .modal-header .btn-modal-close svg { stroke: #9c9ca8 !important; fill: none !important; } /* Primary button explicit background (some Frappe components bypass --primary) */ .btn-primary { background-color: var(--indigo-9) !important; border-color: var(--indigo-10) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--indigo-10) !important; border-color: var(--indigo-11) !important; } .btn-primary:active { background-color: var(--indigo-11) !important; } /* Hyperlinks across the Desk */ a.grey-link:hover, .form-links .badge-link:hover, .sidebar-item.selected .sidebar-item-label, .sidebar-item:hover .sidebar-item-label { color: var(--indigo-9) !important; } /* List / report row selection highlight */ .list-row-col.checkbox input:checked + span, .list-row.selected { background-color: var(--indigo-3) !important; } /* Active nav tabs (form tabs, report tabs) */ .nav-link.active, .nav-pills .nav-link.active { color: var(--indigo-9) !important; border-color: var(--indigo-9) !important; } /* Frappe-UI primary button (Vue SPAs — variant-solid with data-state attribute) */ .btn.variant-solid[data-state] { background-color: var(--indigo-9) !important; } /* Frappe Desk btn-primary-light (filter indicator when filters are active). Light mode: keep original light-gray bg, Indigo text — readable. Dark mode: solid Indigo bg with white text — matches primary button style. */ .btn-primary-light { background-color: #e2e2e2 !important; color: var(--indigo-9) !important; } .btn-primary-light:hover { background-color: #ededed !important; } [data-theme="dark"] .btn-primary-light { background-color: var(--indigo-9) !important; border-color: var(--indigo-10) !important; color: #ffffff !important; } [data-theme="dark"] .btn-primary-light:hover { background-color: var(--indigo-10) !important; } /* ========================================================================= Frappe-UI hardcoded blue utility overrides Frappe-UI's Tailwind config compiles bg-blue-* / text-blue-* to hardcoded RGB values (not CSS variables), so --blue-500 overrides alone do nothing. We target the generated classes directly. ========================================================================= */ /* Background fill utilities */ .bg-blue-500 { background-color: #9D48E7 !important; } .bg-blue-600 { background-color: #8933D4 !important; } .bg-blue-700 { background-color: #853AC7 !important; } .bg-blue-400 { background-color: #B099F0 !important; } .bg-blue-300 { background-color: #EAD2FF !important; } .bg-blue-200 { background-color: #F1E1FF !important; } .bg-blue-100 { background-color: #F6EDFE !important; } /* Hover state overrides */ .hover\:bg-blue-500:hover { background-color: #9D48E7 !important; } .hover\:bg-blue-600:hover { background-color: #8933D4 !important; } .hover\:bg-blue-400:hover { background-color: #B099F0 !important; } .hover\:bg-blue-300:hover { background-color: #EAD2FF !important; } /* Active state overrides */ .active\:bg-blue-700:active { background-color: #853AC7 !important; } .active\:bg-blue-600:active { background-color: #8933D4 !important; } /* Text color utilities */ .text-blue-500 { color: #9D48E7 !important; } .text-blue-600 { color: #8933D4 !important; } .text-blue-700 { color: #853AC7 !important; } .text-blue-400 { color: #B099F0 !important; } /* Focus ring */ .focus-visible\:ring-blue-400:focus-visible { --tw-ring-color: #B099F0 !important; } /* Dark mode — blue utilities use lighter shades */ [data-theme="dark"] .bg-blue-500, [data-theme="dark"] .hover\:bg-blue-500:hover { background-color: #AA82ED !important; } [data-theme="dark"] .bg-blue-600, [data-theme="dark"] .hover\:bg-blue-600:hover { background-color: #B099F0 !important; } [data-theme="dark"] .text-blue-500, [data-theme="dark"] .text-blue-600 { color: #B099F0 !important; } /* ========================================================================= Frappe-UI gray solid button → Indigo rebrand Belt-and-suspenders class overrides in addition to the CSS variable declarations above. Cover legacy bg-surface-gray-7/6/5 and current bg-surface-gray-10/9/8 class generations. ========================================================================= */ .bg-surface-gray-10, .bg-surface-gray-7 { background-color: #9D48E7 !important; } .hover\:bg-surface-gray-9:hover, .hover\:bg-surface-gray-6:hover { background-color: #8933D4 !important; } .active\:bg-surface-gray-8:active, .active\:bg-surface-gray-5:active { background-color: #853AC7 !important; } [data-theme="dark"] .bg-surface-gray-10, [data-theme="dark"] .bg-surface-gray-7 { background-color: #B099F0 !important; } [data-theme="dark"] .hover\:bg-surface-gray-9:hover, [data-theme="dark"] .hover\:bg-surface-gray-6:hover { background-color: #AA82ED !important; } [data-theme="dark"] .active\:bg-surface-gray-8:active, [data-theme="dark"] .active\:bg-surface-gray-5:active { background-color: #E2C1FF !important; } /* ========================================================================= Frappe-UI Date/TimePicker dropdown selected states → Indigo Newer frappe-ui TimePicker/DatePicker popovers use gray surface utilities for selected, nearest, hover, and keyboard-highlighted options. Keep this scoped to option/grid controls so normal panels using bg-surface-gray-2/3 do not turn blue. ========================================================================= */ [role="listbox"] button.bg-surface-gray-3, [role="listbox"] [role="option"].bg-surface-gray-3, [role="grid"] button.bg-surface-gray-6, [role="gridcell"].bg-surface-gray-6 { background-color: #9D48E7 !important; color: #ffffff !important; } [role="listbox"] button.bg-surface-gray-2, [role="listbox"] [role="option"].bg-surface-gray-2, [role="listbox"] button.hover\:bg-surface-gray-2:hover, [role="listbox"] [role="option"].hover\:bg-surface-gray-2:hover, [role="grid"] button.hover\:bg-surface-gray-2:hover, [role="gridcell"].hover\:bg-surface-gray-2:hover { background-color: #F6EDFE !important; color: #9D48E7 !important; } [role="listbox"] button[aria-selected="true"], [role="listbox"] [role="option"][aria-selected="true"], [role="grid"] button[aria-selected="true"], [role="gridcell"][aria-selected="true"] { background-color: #9D48E7 !important; color: #ffffff !important; } [data-theme="dark"] [role="listbox"] button.bg-surface-gray-3, [data-theme="dark"] [role="listbox"] [role="option"].bg-surface-gray-3, [data-theme="dark"] [role="grid"] button.bg-surface-gray-6, [data-theme="dark"] [role="gridcell"].bg-surface-gray-6, [data-theme="dark"] [role="listbox"] button[aria-selected="true"], [data-theme="dark"] [role="listbox"] [role="option"][aria-selected="true"], [data-theme="dark"] [role="grid"] button[aria-selected="true"], [data-theme="dark"] [role="gridcell"][aria-selected="true"] { background-color: #AA82ED !important; color: #111827 !important; } [data-theme="dark"] [role="listbox"] button.bg-surface-gray-2, [data-theme="dark"] [role="listbox"] [role="option"].bg-surface-gray-2, [data-theme="dark"] [role="listbox"] button.hover\:bg-surface-gray-2:hover, [data-theme="dark"] [role="listbox"] [role="option"].hover\:bg-surface-gray-2:hover, [data-theme="dark"] [role="grid"] button.hover\:bg-surface-gray-2:hover, [data-theme="dark"] [role="gridcell"].hover\:bg-surface-gray-2:hover { background-color: #401F5C !important; color: #B099F0 !important; } /* Dark mode — use lighter Indigo shades so they're visible on dark backgrounds */ [data-theme="dark"] { /* Frappe Desk */ --primary: var(--indigo-7); --primary-color: var(--indigo-7); /* Frappe-UI / CRM semantic tokens (dark theme redefines these) */ --ink-blue-1: #F6EDFE; /* near-white for subtle icon/text */ --ink-blue-2: var(--indigo-7); /* #B099F0 — main interactive on dark */ --ink-blue-3: var(--indigo-6); /* #E2C1FF — lighter variant */ --ink-blue-link: var(--indigo-7); /* #B099F0 — links on dark bg */ --surface-blue-1: #401F5C; /* dark indigo tint for hover bg */ --surface-blue-2: #162248; /* slightly darker hover */ --surface-blue-3: var(--indigo-9); /* #9D48E7 — solid button stays saturated */ --outline-blue-1: var(--indigo-12); /* #401F5C — dark border */ /* --blue-* scale for dark mode */ --blue-400: var(--indigo-7); /* #B099F0 */ --blue-500: var(--indigo-8); /* #AA82ED */ /* Restore original Frappe alert-bg-info so .alert.alert-info callout boxes don't appear as jarring deep-blue rectangles in dark mode. Our :root --blue-900 override (indigo-12 = #401F5C) would otherwise tint every info alert with our brand indigo; neutral gray is less distracting. */ --alert-bg-info: var(--gray-800); /* neutral dark gray, not indigo-blue */ /* Surface-gray → lighter Indigo in dark mode (dark bg needs lighter fg for contrast) */ --surface-gray-10: var(--indigo-7); /* current solid gray bg */ --surface-gray-9: var(--indigo-8); /* current hover */ --surface-gray-8: var(--indigo-6); /* current active */ --surface-gray-7: var(--indigo-7); /* legacy solid gray bg */ --surface-gray-6: var(--indigo-8); /* legacy hover */ --surface-gray-5: var(--indigo-6); /* legacy active */ } /* Primary button text — force white in dark mode. Frappe sets --neutral: var(--neutral-black) = #000000 in dark mode and .btn.btn-primary uses color: var(--neutral). Overriding --neutral and setting color directly ensures white text regardless of !important cascade. */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn.btn-primary { --neutral: #ffffff; --neutral-black: #ffffff; color: #ffffff !important; } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn.btn-primary:hover, [data-theme="dark"] .btn-primary:focus, [data-theme="dark"] .btn.btn-primary:focus { --neutral: #ffffff; --neutral-black: #ffffff; color: #ffffff !important; } /* Setup wizard primary buttons: requested inverted text by theme. */ body[data-route^="setup-wizard"] .slide-footer .btn.btn-primary, body[data-route^="setup-wizard"] .slide-footer .next-btn.btn-primary, body[data-route^="setup-wizard"] .btn.btn-primary.next-btn { --neutral: #ffffff; --neutral-black: #ffffff; color: #ffffff !important; } [data-theme="dark"] body[data-route^="setup-wizard"] .slide-footer .btn.btn-primary, [data-theme="dark"] body[data-route^="setup-wizard"] .slide-footer .next-btn.btn-primary, [data-theme="dark"] body[data-route^="setup-wizard"] .btn.btn-primary.next-btn { --neutral: #000000; --neutral-black: #000000; color: #000000 !important; } /* ========================================================================= Beam SPA — RTL sidebar position Raven hard-codes position:fixed;left:0 on the sidebar and margin-left on the main content. These physical properties don't auto-flip with direction inheritance — we override them explicitly for html[dir="rtl"]. ========================================================================= */ /* Move the fixed sidebar from the left edge to the right edge */ html[dir="rtl"] .radix-themes .rt-r-position-fixed.rt-r-left-0 { left: auto !important; right: 0 !important; border-right: 0 !important; border-left: 1px solid var(--gray-a3) !important; } /* Flip the inner workspace-icon column divider border */ html[dir="rtl"] .radix-themes .rt-r-fd-column.w-20.border-r { border-right: 0 !important; border-left: 1px solid var(--gray-a3) !important; } /* Push main content away from the right (where the sidebar now lives) */ html[dir="rtl"] .radix-themes [class*="ml-[var(--sidebar-width)]"] { margin-left: 0 !important; margin-right: var(--sidebar-width) !important; } /* Radix primitives (Tabs, Select, Dialog, ScrollArea…) each render dir="ltr" as a DOM attribute, which cuts off RTL inheritance for their entire subtree — form grids, tab panels, etc. Reset them all to RTL in one rule. */ html[dir="rtl"] .radix-themes [dir="ltr"] { direction: rtl !important; } /* Settings page: nav sidebar border flips (sidebar is on right in RTL) */ html[dir="rtl"] .radix-themes .fixed.w-64.border-r { border-right: 0 !important; border-left: 1px solid var(--gray-a4) !important; } /* Settings page: content area has sm:ml-64 — flip to margin-right */ html[dir="rtl"] .radix-themes [class*="sm:ml-64"] { margin-left: 0 !important; margin-right: 16rem !important; } /* ========================================================================= 1. Hide Frappe / ERPNext external links (docs, telegram, github, discuss…) Covers anything that slipped past the server-side navbar filter. ========================================================================= */ a[href*="frappe.io"], a[href*="frappeframework.com"], a[href*="frappecloud.com"], a[href*="erpnext.com"], a[href*="erpnext.org"], a[href*="discuss.frappe.io"], a[href*="discuss.erpnext.com"], a[href*="t.me/frappe"], a[href*="t.me/erpnext"], a[href*="github.com/frappe"], a[href*="github.com/erpnext"], a[href*="twitter.com/frappetech"], a[href*="twitter.com/erpnext"], a[href*="youtube.com/@frappetech"], a[href*="youtube.com/c/FrappeTech"], a[href*="linkedin.com/company/frappe"] { display: none !important; } /* ========================================================================= 2. Suppress "Powered by Frappe" / "Built on Frappe" footer variants Belt-and-suspenders — Website Settings.footer_powered="" does it server-side. ========================================================================= */ .footer-powered, .powered-by-frappe, .built-on-frappe { display: none !important; } /* ========================================================================= 3. Navbar logo — Mjara SVG icon app_logo_url is set server-side in extend_bootinfo so the Desk img src is already correct. We just size it and remove any text fallback. ========================================================================= */ /* The desk navbar is 48px tall (--navbar-height). A logo pinned to a fixed *width* grows as tall as its aspect ratio demands — the full wordmark at 120px wide stands 62px high and overflows the bar. Pin the height instead and let the width follow, which keeps any future logo in proportion. */ .navbar .navbar-brand img, .navbar-home img { display: block !important; height: 26px !important; width: auto !important; max-width: 170px !important; max-height: 26px !important; object-fit: contain; } /* Remove the old text fallback */ .navbar .navbar-brand::before, .navbar-home::before { content: none !important; } /* Splash logo on boot screen */ .splash img { display: block !important; width: 56px !important; height: 56px !important; object-fit: contain; content: url("/assets/mjara_brand/images/qriib-wave-icon-default.png?v=qriib-aamal-rebrand-v3"); } .splash::before { content: none !important; } /* Drive share dialog: prevent long email chips from overflowing the member row and pushing "Can view" off-screen. Keep this scoped to rows that actually contain chip buttons so setup-domain suffixes do not get clipped. */ .bg-surface-gray-2:has(button) { min-width: 0; overflow: hidden; } .bg-surface-gray-2:has(button) > div { min-width: 0; } .bg-surface-gray-2:has(button) > div > div:first-child { width: 100% !important; min-width: 0; overflow: hidden; } .bg-surface-gray-2:has(button) > div > div:empty { display: none !important; } /* Truncate the email label inside each chip button */ .bg-surface-gray-2:has(button) button { max-width: 100%; overflow: hidden; } .bg-surface-gray-2:has(button) button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18ch; } /* ========================================================================= RTL — Vue SPA sidebar icon-text gap fix Vue SPAs (Drive, CRM, Helpdesk …) use Tailwind's ml-2 / mr-2 utilities to space the label after the icon in sidebar nav items. In RTL flex these margins end up on the wrong side, making icons appear flush against text. Swap the margin direction for every element that carries these classes inside an RTL page. ========================================================================= */ html[dir=rtl] .flex > span.ml-2, html[dir=rtl] .flex > span.ml-1, html[dir=rtl] .flex.items-center > span.ml-2, html[dir=rtl] .flex.items-center > span.ml-1, html[dir=rtl] .flex.items-center span.flex-1.ml-2, html[dir=rtl] .flex.items-center span.flex-shrink-0.ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } html[dir=rtl] .flex > span.ml-1, html[dir=rtl] .flex.items-center > span.ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } html[dir=rtl] .flex.items-center > .icon.mr-2, html[dir=rtl] .flex > .mr-2:first-child, html[dir=rtl] .flex.items-center > .mr-2.flex-shrink-0, html[dir=rtl] .flex.items-center > .mr-2.h-4, html[dir=rtl] .flex.items-center > .mr-1\.5.flex-shrink-0, html[dir=rtl] .flex.items-center > .mr-1.flex-shrink-0 { margin-right: 0 !important; margin-left: 0.5rem !important; } /* Press dashboard sidebar uses physical text-left classes in Vue. Flip only the dashboard navigation rows when the page is Arabic. */ html[dir=rtl] aside nav a, html[dir=rtl] aside nav button, html[dir=rtl] aside nav summary { text-align: right !important; } html[dir=rtl] aside nav a > span.flex-1, html[dir=rtl] aside nav button > span.flex-1, html[dir=rtl] aside nav summary > span.flex-1 { text-align: right !important; } html[dir=rtl] aside nav .ml-5 { margin-left: 0 !important; margin-right: 1.25rem !important; } /* Arabic shaping breaks when Latin-oriented tracking is applied. */ html[dir=rtl], html[dir=rtl] body, html[dir=rtl] body * { letter-spacing: 0 !important; } /* ========================================================================= RTL — Dropdown / menu popup direction fix Reka UI (used by frappe-ui Dropdown) renders popup content via a portal and internally defaults to dir="ltr", overriding the page-level RTL. Force RTL on all menu role elements so icons and text flow correctly. ========================================================================= */ html[dir=rtl] [role="menu"], html[dir=rtl] [role="menuitem"], html[dir=rtl] [role="option"], html[dir=rtl] .dropdown-content { direction: rtl !important; } /* Reka UI popper wrapper (teleported to ) also needs direction */ html[dir=rtl] [data-reka-popper-content-wrapper], html[dir=rtl] [data-radix-popper-content-wrapper] { direction: rtl !important; } /* ========================================================================= RTL — Drive file list row spacing fix frappe-ui ListRow uses `space-x-4` on the row grid and `pr-2` on the checkbox cell. In RTL these are on the wrong side, making the file icon flush against the select checkbox. ========================================================================= */ html[dir=rtl] .space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1 !important; } html[dir=rtl] .space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1 !important; } html[dir=rtl] .space-x-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1 !important; } /* Checkbox column: swap pr-2 → pl-2 in RTL */ html[dir=rtl] .grid.items-center > div.pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; } /* Press dashboard marketplace list: the upstream column widths are `0.3fr 0.3fr 40rem`, which makes Arabic app names nearly invisible. */ html[dir=rtl] body:has(a.router-link-exact-active[href="/dashboard/apps"]) .relative.flex.w-full.flex-1.flex-col.overflow-x-auto > .flex.w-max.min-w-full.flex-col.overflow-y-hidden { width: 100% !important; min-width: 100% !important; } html[dir=rtl] body:has(a.router-link-exact-active[href="/dashboard/apps"]) .relative.flex.w-full.flex-1.flex-col.overflow-x-auto .grid.items-center.gap-4 { grid-template-columns: 12rem 6rem minmax(16rem, 1fr) !important; } /* The mobile sidebar appears below 768px, while the notification popover uses a 640px mobile check. In the 640-767px band it is positioned as a desktop right-side popover, which pushes the full-screen drawer off-canvas. */ @media (max-width: 767px) { [data-reka-popper-content-wrapper]:has(.h-screen.w-screen), [data-radix-popper-content-wrapper]:has(.h-screen.w-screen) { height: 100vh !important; inset: 0 !important; min-width: 0 !important; position: fixed !important; transform: none !important; width: 100vw !important; } [data-reka-popper-content-wrapper]:has(.h-screen.w-screen) .PopoverContent, [data-radix-popper-content-wrapper]:has(.h-screen.w-screen) .PopoverContent, [data-reka-popper-content-wrapper]:has(.h-screen.w-screen) .body-container, [data-radix-popper-content-wrapper]:has(.h-screen.w-screen) .body-container, [data-reka-popper-content-wrapper]:has(.h-screen.w-screen) .h-screen.w-screen, [data-radix-popper-content-wrapper]:has(.h-screen.w-screen) .h-screen.w-screen { height: 100vh !important; margin: 0 !important; max-width: 100vw !important; width: 100vw !important; } } /* Hide the small Getting Started/info icon in the Desk sidebar footer. */ .body-sidebar-bottom .onboarding-sidebar { display: none !important; } /* Desk home: the trial notice belongs between the top bar and the app grid. */ .qriib-free-trial-banner { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 30px; padding: 6px 16px; background: #fff4c2; color: #3f3200; font-size: 13px; line-height: 1.35; text-align: center; } .qriib-free-trial-banner-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 16px; height: 16px; color: #e76f00; } .qriib-free-trial-banner-icon svg { width: 15px; height: 15px; } .qriib-free-trial-banner-message { display: inline-block; } .qriib-free-trial-banner-message strong { font-weight: 700; } .qriib-free-trial-banner-link { color: #1261a0; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .qriib-free-trial-banner-link:hover, .qriib-free-trial-banner-link:focus { color: #0b4778; } .qriib-free-trial-banner--danger { background: #ffe1e1; color: #a61b1b; } .qriib-free-trial-banner--danger .qriib-free-trial-banner-icon { color: #d92d20; } .qriib-free-trial-banner--danger .qriib-free-trial-banner-link { color: #b42318; } @media (max-width: 640px) { .qriib-free-trial-banner { padding-right: 10px; padding-left: 10px; font-size: 12px; } } /* Frappe core sets an inline `padding-right: 5px` on every required-field label to reserve space for its ::after "*" indicator. That padding is a physical property and never flips for RTL, so it needs !important here to win over the inline style. */ html[dir="rtl"] .control-label.reqd { padding-right: 0 !important; padding-left: 5px; } /* Frappe core ships a correctly-mirrored RTL build (public/dist/css-rtl/), but the desk/setup-wizard route only ever loads the LTR bundle, so these physical-direction rules from common/global.scss, element/checkbox.scss, common/controls.scss, and desk/slides.scss never flip for dir="rtl". Reproducing the equivalent mirrors here fixes Select/checkbox/password controls and the wizard's slide chrome everywhere they're used. */ /* Bootstrap's reboot hardcodes `body { text-align: left }`, and since the unused RTL bundle is the only place that gets flipped to `right`, every label/heading/paragraph that doesn't set its own text-align (i.e. almost all of them) inherits `left` and hugs the wrong edge under dir="rtl". */ html[dir="rtl"] body { text-align: right; } /* Belt-and-suspenders: the wizard card (.slides-wrapper, frappe core desk/slides.scss) has no text-align of its own, so it should already inherit `right` from the body rule above -- but pin it explicitly here too in case a rebuild/cache lag ever leaves the body rule stale. */ html[dir="rtl"] .slides-wrapper { text-align: right; } html[dir="rtl"] .frappe-control[data-fieldtype="Select"] select { padding-right: 12px; padding-left: 28px; } html[dir="rtl"] .frappe-control[data-fieldtype="Select"] .select-icon { right: auto; left: 12px; } html[dir="rtl"] .frappe-control[data-fieldtype="Select"] .select-icon.xs { right: auto; left: 10px; } html[dir="rtl"] .frappe-control[data-fieldtype="Select"] .placeholder { left: auto; right: 12px; } html[dir="rtl"] input[type="checkbox"] { margin-right: 0 !important; margin-left: var(--checkbox-right-margin) !important; } html[dir="rtl"] .checkbox .help-box { padding-left: 0; padding-right: 22px; } @media (max-width: 992px) { html[dir="rtl"] .checkbox .help-box { padding-right: 26px; } } html[dir="rtl"] .password-strength-indicator { right: auto; left: 0px; } html[dir="rtl"] .toggle-password { right: auto; left: 8px; } html[dir="rtl"] .toggle-theme-btn { right: auto; left: var(--margin-lg); } html[dir="rtl"] .prev-div.text-left { text-align: right !important; } html[dir="rtl"] .next-div.text-right { text-align: left !important; } /* ========================================================================= Desktop grid — solid icon for the Accounting folder ------------------------------------------------------------------------- The Accounting desktop icon is a Folder, and desktop.js renders every Folder as a 2x2 thumbnail of its children: DesktopIcon.render_folder_thumbnail() empties .icon-container and rebuilds a mini grid inside it, so neither logo_url nor an icons/desktop_icons/