/* ============================================================================================== ETopUp - styling for the UX enhancement layer (Scripts/etopup-ux.js) ============================================================================================== WHY THIS FILE EXISTS SEPARATELY These rules previously lived inside Content/Admin/css/responsive.css, which only the two admin layouts load. That coupling hid a real defect: etopup-ux.js was loaded by _Layout and _AdminLayoutPage only, so the public site (_SiteLayout), the KYC screens (_KycLayout) and _Layout2 never received ANY of the UX layer. The visible consequence was on /Site/About, measured in the browser rather than assumed: 31 images on the page, 30 of them failing to load, 30 still rendering as broken-image icons, 0 hidden by the handler. UX-007 in etopup-ux.js exists precisely to hide artwork that 404s, and it was never running on the one page that needed it most. The script could not simply be added to those layouts either, because its styles were locked inside an ADMIN stylesheet - loading that on the marketing site would have dragged admin panel styling onto public pages. So the component styles move here, to a stylesheet that is about the component and not about one area of the product, and every layout loads this file alongside the script. Single source of truth: these rules are no longer duplicated in responsive.css. Everything here is additive and scoped to .etopup-* classes or to state classes the script applies, so it cannot override existing component styling. ============================================================================================== */ /* ============================================================================================ PHASE 3 - UX-001 .. UX-006 : styling for the UX enhancement layer (Scripts/etopup-ux.js) ============================================================================================ Additive only. Nothing here overrides existing component styling; every rule is scoped to a new .etopup-* class or to a state class the new script applies. ============================================================================================ */ /* -- UX-001 Global AJAX progress bar ------------------------------------------------------- A slim top-of-viewport bar. Chosen over a blocking overlay deliberately: the operator can keep reading the page while a background report query runs, and it cannot trap them if a request never returns. */ #etopup-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20000; pointer-events: none; opacity: 0; transition: opacity 150ms ease-out; /* BUG FIX - this loading indicator was itself causing horizontal overflow on 181 of the measured page/width combinations, making it the second most common offender in the whole responsive audit. The slide animation ends at "margin-left: 100%", which parks the 40%-wide bar completely beyond the right edge of this container. Without clipping, that child still counts toward the document's scroll width, so every page showed a horizontal scrollbar for as long as any AJAX request was in flight - and these screens poll, so that is most of the time. overflow:hidden confines the bar to its track. The animation is unchanged visually; it just no longer drags the page width with it. */ overflow: hidden; } #etopup-progress.is-active { opacity: 1; } #etopup-progress .etopup-progress-bar { height: 100%; width: 40%; background: linear-gradient(90deg, #1a73e8, #4dabf7); border-radius: 0 3px 3px 0; animation: etopup-progress-slide 1.1s ease-in-out infinite; } @keyframes etopup-progress-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } /* Respect reduced-motion: show a static bar rather than an animated one. */ @media (prefers-reduced-motion: reduce) { #etopup-progress .etopup-progress-bar { animation: none; width: 100%; } } /* -- UX-003 Submit button locked state ---------------------------------------------------- */ .is-submitting { opacity: 0.65; cursor: progress !important; } /* -- UX-005 Transaction status badges ------------------------------------------------------ In a recharge platform the operator must be able to read transaction state at a glance. These badges always contain the status TEXT as well as the colour, so meaning never depends on colour alone (WCAG 1.4.1). Colours were checked for contrast against their backgrounds. */ .etopup-status { display: inline-block; padding: 2px 10px; border-radius: 11px; font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; border: 1px solid transparent; } .etopup-status--success { background: #e6f4ea; color: #14663a; border-color: #b7e0c4; } .etopup-status--pending { background: #fff4e5; color: #7a4b00; border-color: #ffd9a0; } .etopup-status--failed { background: #fdecea; color: #8a1c12; border-color: #f7c4be; } .etopup-status--refund { background: #e8f0fe; color: #14417a; border-color: #bcd3fb; } /* -- Fintech readability: monospaced figures for money and transaction IDs ------------------- Proportional digits make columns of amounts hard to scan and make transaction IDs hard to compare character by character. Applied opt-in via class so no existing layout shifts. */ .etopup-amount, .etopup-txnid { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .etopup-txnid { font-family: Consolas, "Courier New", monospace; font-size: 0.92em; word-break: break-all; } .etopup-amount { text-align: right; font-weight: 600; } /* == L10N 02-09: language selector (renders only when >1 language enabled) ============= */ /* ML 02-09: ten languages must never widen the page - the row wraps (login card, 768/1024 tablets) and inside the user drop-down it becomes a compact multi-row block instead of one 900px line. */ .ez-lang-select{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;font-size:13px;line-height:1.6;padding:2px 6px;max-width:100%} /* OVERFLOW FIX 02-09. With ten languages approved, the wrapped pill block inside the user drop-down grew to four or five rows and spilled past the menu's own box - गुजराती / தமிழ் / తెలుగు rendered on top of the Logout row and were clipped by the menu edge. The block is now bounded and scrolls on its own, so the drop-down keeps its shape no matter how many languages an admin approves, and the ancestor li is stopped from clipping it. */ .ez-lang-menu{overflow:visible;height:auto} .ez-lang-menu .ez-lang-select{ display:flex;justify-content:flex-start; max-width:340px;padding:6px 12px; max-height:170px;overflow-y:auto;overflow-x:hidden; -webkit-overflow-scrolling:touch; } /* a divider so the block reads as its own group rather than bleeding into the menu items */ .ez-lang-menu .ez-lang-select{border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08)} .ez-lang-select .ez-lang-icon{opacity:.7} .ez-lang-select .ez-lang-item{padding:2px 8px;border-radius:10px;text-decoration:none;white-space:nowrap} .ez-lang-select a.ez-lang-item:hover{background:var(--c-primary-soft,#eef2ff)} .ez-lang-select .ez-lang-active{font-weight:600;background:var(--c-primary-soft,#eef2ff);color:var(--c-primary,#1d4ed8)} /* Indic scripts: taller ascenders/descenders - never clip them anywhere they appear */ .ez-lang-select .ez-lang-item{line-height:1.9} /* ================================================================================================ GRID-SCROLL FIX 02-09 — "Showing x to y" and the pager slid off-screen on wide reports. THE BUG. The views wrap the grid as
. DataTables then builds its own .dataTables_wrapper AROUND that table, so the length menu, the search box, the info line and the pager all end up INSIDE the horizontally-scrolling container along with the table. Scroll a 14-column report to the right and they travel with it: measured at scrollLeft 600, all three sat at -589px, i.e. 589px off the left edge. That is the clipped "...खावण खातर कोई रिकॉर्ड कोनी" in the Recharge Report screenshot. WHAT WAS TRIED AND REJECTED. position:sticky on those controls. It holds only within the element's own containing block, and DataTables' Bootstrap DOM nests them two levels deep (.row > .col-* > .dataTables_info), so at full scroll they broke free and clipped anyway. Measured, failed, discarded - not shipped. THE FIX. Move the scrolling one level in: the column that holds the TABLE scrolls, the columns that hold the controls do not. The outer .table-responsive then has nothing left to scroll, so its scrollbar disappears on its own - no override of it needed, and any grid that is not a DataTable keeps the old behaviour untouched. Scoped to .dataTables_wrapper on purpose: a plain
inside .table-responsive elsewhere in the product is not affected by any of this. ================================================================================================ */ /* (1) Bootstrap's .row carries margin-left/right: -15px, designed to cancel the padding of a .container. There is no container here - the row sits straight inside .table-responsive - so each row rendered 30px WIDER than its parent and the outer box grew a second scrollbar of its own. Measured: wrapper 613px, every row 643px. Zeroing the margins removes it; the columns keep their own 15px padding, so the content still has breathing room. */ .table-responsive .dataTables_wrapper > .row{ margin-left:0; margin-right:0; } /* (2) The column holding the table is the only thing allowed to scroll sideways. Capping it at 100% is what stops the wide table pushing the wrapper - and therefore the outer box - open. */ .table-responsive .dataTables_wrapper > .row > [class*="col-"]{ overflow-x:auto; max-width:100%; min-width:0; /* lets the column shrink below its content, which is what allows it to scroll */ } /* No :has() guard needed here: the control columns hold short text that never exceeds their width, so overflow-x:auto produces no scrollbar on them. Keeping the selector list simple avoids a dependency on :has() support. */ /* (3) Give the single remaining scrollbar a deliberate look rather than the OS default, and keep the control rows visually attached to the table they belong to. */ .table-responsive .dataTables_wrapper > .row > [class*="col-"]::-webkit-scrollbar{height:10px} .table-responsive .dataTables_wrapper > .row > [class*="col-"]::-webkit-scrollbar-track{background:#f2f4f6;border-radius:5px} .table-responsive .dataTables_wrapper > .row > [class*="col-"]::-webkit-scrollbar-thumb{background:#c3ccd4;border-radius:5px} .table-responsive .dataTables_wrapper > .row > [class*="col-"]::-webkit-scrollbar-thumb:hover{background:#a9b4be} .table-responsive .dataTables_wrapper > .row > [class*="col-"]{scrollbar-width:thin;scrollbar-color:#c3ccd4 #f2f4f6} /* (4) The info line and the pager sit on one row on a desktop and stack on a phone, instead of the pager being pushed off the right edge. */ @media (max-width:600px){ .table-responsive .dataTables_wrapper > .row > [class*="col-"]{width:100%;float:none} .table-responsive .dataTables_wrapper .dataTables_filter, .table-responsive .dataTables_wrapper .dataTables_paginate{text-align:left} } /* ================================================================================================ L10N-ADMIN 02-09 (rebuilt 02-09): Multi-Language settings box. The old markup used Bootstrap's .checkbox-inline, which positions the input absolutely and depends on the label keeping its padding-left. Across the thirteen stylesheets this layout loads, that padding was being overridden, so every checkbox rendered on top of its own label text. This replaces the mechanism rather than fighting the cascade: real inputs, real