/* Classic public skin retained on the shared, security-hardened auth shell. */ :root { --Hdr: url("/assets/default/img/vip/header-rtl.png?v=bc90ffb6bcf6"); } html, body.auth-shell { min-height: 100%; margin: 0; } body.auth-shell { background: #fff; } /* نفس شريط الرأس المبرنَز في `06-artwork-and-sprites.css` — يُكرَّر هنا لأن هذا مدخلٌ مستقل لا تصله حزمة اللعبة. */ body.auth-shell .wrapper { min-height: 100vh; background: linear-gradient(to bottom, #d5f2ff 0%, #f8fdff 80%, #cbb98a 85%, #cbb98a 100%) repeat-x top; background-size: 1px 100px; } body.auth-shell div#dynamic_header { height: 100px; background: transparent var(--Hdr) center top no-repeat; background-size: cover; } /* 71px + the 1px border makes the nav strip 72px, so #mid lands at 172 — the same y the reference puts it at, with no padding needed to make up the difference. */ body.auth-shell div#header { height: 71px; border-bottom: 1px solid #aaa; background: linear-gradient(to bottom, #fff 0, #f9f9f9 45%, #dedede 100%); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); text-align: center; } /* Full width, so centring the row inside it centres it on the page. * * `Qs.css` centres this box with the old `right: 50%; margin-right: -241px` * trick, whose −241 is half of the 630 it assumed. Widening the box without * undoing the offsets moved it further off, not less: the pair has to go * together with the width they were calculated for. */ body.auth-shell #mtop { position: relative; right: auto; top: 10px; z-index: 2; width: 100%; margin-right: 0; font-size: 0; text-align: center; } /* One centred row that never breaks. * * It was `display: table` with 75px of margin either side, which on a phone * left too little room for four items and dropped «تعليمات» onto a second * line. A centred flex row with `nowrap` keeps the four together and lets the * gap — not the item widths — absorb a narrow screen. */ body.auth-shell #mtop .InBar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; width: 100%; height: 30px; /* `margin: 0 67px` survived from the old table layout and pushed the row off centre even after `justify-content` was doing the centring. */ margin: 0; padding: 0 8px; } /* `min-width: 62px` padded every item out to a uniform 76px; the reference lets each one size to its own label (75/64/76/69). */ body.auth-shell #mtop .InBar a { display: inline-block; flex: 0 0 auto; white-space: nowrap; min-width: 10px; /* Qs.css pins these to 10px; the reference raises them to 16px in a page style block, which is what makes each item 24px tall rather than 18px. */ height: 16px; margin: 0; padding: 3px 8px; border: 1px solid transparent; border-radius: 10px; color: #111; font-size: 14px; font-weight: 900; line-height: normal; text-decoration: none; text-shadow: 1px 1px 1px #fff; } body.auth-shell #mtop .InBar a:first-child { color: #a20327; } body.auth-shell #mtop .InBar a:hover, body.auth-shell #mtop .InBar a:focus-visible { border-color: #cfcfcf; background: rgba(255, 255, 255, 0.72); } body.auth-shell #mid { padding-top: 0; } body.auth-shell #content.login, body.auth-shell #content.signup { /* The reference carries a 1px top pad here; without it the heading and everything under it sit one pixel high. */ padding-top: 1px; min-height: 550px; } body.auth-register-page #content.signup { padding-top: 23px; } /* The reference leaves the banner on the text baseline. Switching it to `middle` collapsed the heading from 72px to 60px and lifted the whole form 19px, so the baseline is kept deliberately. */ /* Plain inline sharing the banner's baseline, exactly as the reference has it. Floating it and adding a top margin shortened the heading to 69px and shifted everything below by 4px. */ body.auth-shell #content h1 b { color: #666; } body.auth-shell #content :where(input.text, input[type="email"], input[type="number"]) { border-color: var(--swd-bronze); } /* The public forms take their metrics from the classic gpack sheets, which already produce the reference geometry: `width:200px` content-box plus 3px padding and a 1px border render a 208×26 field. Do not re-declare width/height/box-sizing here. An earlier `box-sizing: border-box` made the inherited `Cs.css → input { max-width: 200px }` clamp the whole box instead of the content, shrinking each field to 200px and knocking every row below it 19–28px out of alignment. */ /* The password cell holds the eye-toggle button, so pad the input so text does not slide under it at the wider size. */ body.auth-shell #content .auth-password-cell { display: inline-block; width: 208px; } /* The shell's own controls follow its type scale. The classic gpack widgets are excluded: `.trav_buttons` is bold Arial in the reference (116px wide for "تسجيل الدخول"), and inheriting Tahoma instead stretched it to 142px. Text inputs are likewise left alone so they keep the gpack's 17px field type. */ body.auth-shell #content :where(button, select):not(.trav_buttons, .auth-forgot-toggle) { font: inherit; } body.auth-shell .auth-password-cell { position: relative; } /* The reference spaces this row with two empty elements — a

above and a