/* The stock WHMCS theme (theme.css/theme.min.css, unmodified core files) colors every ".status-*"/".label-*" badge (invoice/ticket/domain/order status pills) using ITS OWN token names — "--error", "--neutral", "--neutral-accented", "--yellow-300", "--bg-inverted", "--grayscale", "--notice" — which this site's own design system (nivahost-design-system.css) never defines. With no value, the "background-color: var(--error)" (etc.) declarations resolve to nothing, so the badge keeps its default transparent background — this is why the "پرداخت نشده" (Unpaid) invoice-status badge looked washed out with no fill color. Rather than overriding every individual ".status-unpaid" etc. rule one at a time, aliasing the missing stock-theme tokens to this site's real brand tokens here fixes every badge in this family at once. */ :root { --error: var(--danger); --yellow-300: #ffe066; --neutral: var(--black-40); --neutral-accented: var(--black-30); --neutral-lifted: var(--black-70); --bg-inverted: var(--black); --grayscale: var(--black-40); --notice: #6f42c1; } /* Same missing-token bug, much bigger blast radius: theme.css/theme.min.css round practically everything (alerts, cards, inputs, buttons, modals, dropdowns, tables, ...) via "--rounding-sm"/"--rounding-md"/"--rounding-lg" — used 140+ times across the stock stylesheet — but this site's design system never defines any of the three, so every one of those elements silently renders with square corners. This is the actual root cause behind several individual alert/card corner fixes made earlier in this project one element at a time (e.g. ".niva-serverstatus-alert"); defining the tokens here fixes the whole family at once, including elements not explicitly touched yet (domain-contact-info error/success alerts, etc.). Values match this project's established radius scale (0.625rem is the size used everywhere else for cards/buttons/alerts). */ :root { --rounding-sm: 0.375rem; --rounding-md: 0.625rem; --rounding-lg: 1rem; } /* "--bg-inverted" above is correct for the many buttons/footer rules that already used it intentionally (checkout button, .btn-primary, footer, etc. — all were themselves invisible/broken before this file defined the variable). But theme.min.css also has a bare "body,html{background-color: var(--bg-inverted)}" rule; something else already overrides body back to white, but nothing overrides html, so defining the variable turned the element solid black — visible as a stray black bar wherever page content is shorter than the box (e.g. the "خلاصه وضعیت مالی" card on clientareaproductdetails). Pinning it back to white here, same specificity as the offending rule but later in the cascade so it wins. */ html { background-color: #fff; } /* WHMCS core's "Pay All"/"Add Funds" card-footer buttons (outstanding- invoices sidebar widget) use Bootstrap 3's ".col-xs-6" grid class, which doesn't exist in this Bootstrap 4 build — with no width/float rule actually applying, both buttons just render at their natural shrink-to-fit block width and stack instead of sitting side by side. Also shrinking them (smaller padding, tighter icon gap) per request. */ body [menuitemname="My Invoices Summary"] .card-footer.clearfix { display: flex; justify-content: center; gap: 1rem; } body [menuitemname="My Invoices Summary"] .col-button-left, body [menuitemname="My Invoices Summary"] .col-button-right { float: none; width: auto; padding: 0; } /* "#main-body .btn" (niva-clientarea.css) outranks the plain-class selector above on specificity alone — matching its "#main-body" prefix here so these overrides actually win instead of losing silently. */ #main-body [menuitemname="My Invoices Summary"] .col-button-left .btn, #main-body [menuitemname="My Invoices Summary"] .col-button-right .btn { padding: 0.375rem 0.5rem; font-size: 0.8125rem; white-space: nowrap; } #main-body [menuitemname="My Invoices Summary"] .col-button-left .btn i, #main-body [menuitemname="My Invoices Summary"] .col-button-right .btn i { margin-left: 0.3125rem; } /* Several of Bootstrap's stock ".row" elements in the cart flow (the featured-TLD cards row, the two promo-card columns, individual pricing- table rows) use the standard "-12px" gutter margin that's meant to be canceled out by a ".container" ancestor's matching padding — but these rows sit directly under plain divs with no such padding, so the row quietly extends ~12px past the actual page edge on both sides. Invisible on desktop (there's slack space around the content), but on narrow mobile viewports that overflow becomes real, page-wide horizontal scroll. Clipping it here is the standard fix for this exact Bootstrap gutter-bleed pattern, rather than chasing down every individual row. */ /* NOTE: this is deliberately "body" only, not "html" — adding overflow-x to "html" as well briefly moved the page's main vertical scrollbar to the left edge (this document's RTL direction governs scrollbar side for whichever element the browser treats as the actual viewport scroller, and explicitly declared overflow on "html" made it take over that role instead of "body"). Clipping on "body" alone still fully contains the Bootstrap gutter-bleed described below, without changing which element scrolls the page or which side its scrollbar lands on. */ body { overflow-x: hidden; max-width: 100%; } /* Main header nav items ("اخبار", "فروشگاه", etc.) use uneven top/bottom padding (6px/8px) on the hover/active highlight box — the link text inside fills that box exactly with no room left to self-center, so it sits 2px closer to the top than the bottom of its own hover background. */ .app-header-main-list-item { padding-top: 0.4375rem; padding-bottom: 0.4375rem; } /* ========================================================================== Nivahost — WHMCS client-area theme Base look/feel (colors, fonts, header, footer, mega-menu) comes from nivahost-design-system.css and nivahost-components.css, copied verbatim from the Nivahost marketing site so the client area matches it exactly. This file only adds the small set of things WHMCS itself needs that the marketing site never had (cart badge, WHMCS's own buttons/links, etc). ========================================================================== */ /* The browser's default focus ring (that thick blue box on inputs/buttons) fights with our own focus styling (border-color highlight, etc.) and looks out of place next to the rest of the design. Site-wide removal. */ input:focus, textarea:focus, select:focus, button:focus, .form-control:focus, .btn:focus { outline: none !important; box-shadow: none !important; } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Nexus/Bootstrap's default page-content links (submitticket department list, knowledgebase, invoices, etc.) render underlined with the browser's default blue-ish link color. Scoped to #main-body so it only touches actual page content, never the header/footer nav components — those already have their own correct no-underline + hover-color rules with higher specificity, so this never overrides them. */ #main-body a { text-decoration: none; } /* ":not(.btn)" here is the actual fix for a bug that kept resurfacing: any -style button is also just an "a" to this selector, and #main-body's ID makes it outrank a plain ".btn-primary:hover"/".btn-warning:hover" class rule — so without this exclusion, EVERY anchor-tag button on any #main-body page loses its real hover color to this brownish-gold link color instead, no matter how many individual buttons get patched one at a time. */ #main-body a:not(.btn):hover { color: #B8860B; text-decoration: none; } .btn-primary, .btn.btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--black); font-weight: 700; } .btn-primary:hover, .btn.btn-primary:hover { background-color: var(--primary-30) !important; border-color: var(--primary-30) !important; color: var(--black) !important; } /* Same broken-variable bug as ".btn-primary:hover" above, on the sibling ".btn-default" class this time: theme.min.css's own hover rule sets "background-color: var(--grayscale-lifted)" — a token that isn't defined anywhere in this theme, so the whole background/border declaration is invalid and drops out, leaving just its "color: white" half in effect. Result: white text on a now-transparent background, invisible on any white card (markdown editor toolbar buttons, and any other plain ".btn-default" that isn't already covered by one of this file's own more specific hover rules elsewhere). A real, valid color pair here acts as the sane fallback for all of them. */ .btn-default:hover, .btn.btn-default:hover { background-color: var(--black-95, #f0f0f0) !important; border-color: var(--black-90, #ccc) !important; color: #08111b !important; } /* Same broken "--grayscale-lifted" token, this time on ".btn-success" specifically inside ".sidebar" widgets (e.g. the ticket-info panel's "پاسخ" quick-action) — background/border drop out on hover, leaving just "color: white" in effect, so the label vanished against the (now effectively transparent, i.e. white-card) background. */ .sidebar .btn-success:hover { background-color: #218838 !important; border-color: #1e7e34 !important; color: #fff !important; } /* Bootstrap's own ".btn-primary:not(:disabled):not(.disabled):active" (its "pressed" state, which is what actually shows during/right after a click, not just :hover) is more specific than the plain rules above and falls back to Bootstrap's stock blue — never overridden until now. */ .btn-primary:active, .btn-primary:focus, .btn-primary.active, .btn.btn-primary:active, .btn.btn-primary:focus, .btn.btn-primary.active, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background-color: var(--primary-30) !important; border-color: var(--primary-30) !important; color: var(--black) !important; box-shadow: none !important; } /* ".btn-warning" (used for the hosting promo card's own CTA) never had a brand override at all — same treatment as .btn-primary above, so it matches instead of falling back to Bootstrap's stock warning yellow. */ .btn-warning, .btn.btn-warning { background-color: var(--primary); border-color: var(--primary); color: var(--black); font-weight: 700; } .btn-warning:hover, .btn.btn-warning:hover, .btn-warning:active, .btn-warning:focus, .btn.btn-warning:active, .btn.btn-warning:focus, .btn-warning:not(:disabled):not(.disabled):active { background-color: var(--primary-30) !important; border-color: var(--primary-30) !important; color: var(--black) !important; box-shadow: none !important; } /* theme.css has a one-off "#btnDomainContinue { background: rgb(0,0,0) }" rule for this exact button (the "ادامه" step-submit on the configure- domain page) — an ID beats every ".btn-primary" class rule above, which is why it rendered as our dark navy text on a literally black button (i.e. invisible) instead of picking up the yellow everywhere else uses. */ #btnDomainContinue { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--black) !important; } /* Cart icon badge — WHMCS-only addition, the marketing header has no cart */ .app-header-cart-badge { position: absolute; top: 0.125rem; left: 0.125rem; background: var(--danger); color: var(--white); font-size: 0.625rem; font-weight: 700; min-width: 1.125rem; height: 1.125rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 0.25rem; line-height: 1; } html[dir="rtl"] .app-header-cart-badge { left: auto; right: 0.125rem; } /* Notification bell — WHMCS-only addition (real $clientAlerts), matching Nexus's own topbar behavior: the button is always shown when logged in, only the dot badge and panel contents depend on whether there are any alerts. */ .app-header-button-login-holder { position: relative; } .app-header-notification-badge { min-width: 0.5rem; width: 0.5rem; height: 0.5rem; padding: 0; } html[dir="rtl"] .app-header-notification-badge { left: auto; right: 0.125rem; } .app-header-notification-panel { display: none; position: absolute; top: calc(100% + 0.75rem); left: 0; width: 18rem; max-width: 80vw; background: #fff; border-radius: 0.75rem; box-shadow: 0 0.5rem 1.5rem rgba(8, 17, 27, 0.16); z-index: 20; direction: rtl; } .app-header-notification-panel.is-open { display: block; } .app-header-notification-list { list-style: none; margin: 0; padding: 0.5rem 0; max-height: 20rem; overflow-y: auto; } .app-header-notification-list li a { display: block; padding: 0.625rem 1rem; font-size: 0.8125rem; color: var(--black); text-decoration: none; } .app-header-notification-list li a:hover { background: var(--gray); } .app-header-notification-empty { padding: 0.75rem 1rem; font-size: 0.8125rem; color: var(--black-30); } /* Nexus's own Bootstrap base (all.min.css/theme.min.css — still loaded for the WHMCS pages we haven't redesigned yet) gives every