/* --q-ui-scale - multiplies every UI text font-size across every .q-popover/menu in the app (button labels, dialog titles, status line, sliders...), never the actual Quran text itself (its own separate --q-arabic-scale/--q-mushaf-fit-scale). Used to be redeclared at 1.15 separately in .q-mushaf-frame (mushaf.css) and .q-surah-reading-frame (surah-player.css) only - own report: "renomme le en quelque chose pourque ca marche pour tout... a utiliser dans popover.css par exemple en commun" (also explains the name drop of its old "mushaf" prefix: nothing mushaf-specific about it, every page loading this file - home included - benefits the same way those 2 already did). One :root default here instead, so base.html's own #q-panel-plus/.q-plus-menu (previously stuck at the un-scaled fallback, own report: "la font size... n'est pas comme /ar/s/X") gets it for free too, no frame class of its own needed. */ :root { --q-ui-scale: 1.15; /* Shared "..." menu shell width - /ar/s/X's own .q-surah-popover (surah-player.css) and home's own desktop html.q-open-plus .q-plus-menu (input.css) both reference this instead of each hardcoding the same 15rem literal (own report: "pourquoi c'est pas commun" - same reasoning as --q-ui-scale just above). */ --q-menu-shell-width: 15rem; /* Own report: "l'espace entre les submenu et leur bouton declencheur n'est pas parfaitement egale a l'espace entre #q-panel-plus et son propre bouton, de meme pour le popover Durée" - 3 popovers, 3 valeurs différentes (-1px, 2.5rem, 0.5rem) posées séparément au fil des sessions. Un seul chiffre ici, référencé par les 3 (own comment sur chacun) plutôt que 3 littéraux à garder synchronisés à la main. */ --q-popover-trigger-gap: 0.5rem; } /* Generic popover chrome shared across pages (mushaf.css/surah-player.css both load this) - title + "✕" close button sharing one row. Not scoped to any one popover on purpose: every popover across the app that follows this same title+close pattern reuses these classes as-is rather than each page redeclaring its own near-identical copy (own report: surah-player.css used to duplicate this under a q-surah- prefix, same values by hand instead of guaranteed identical by definition - moved here, both pages load this file now). */ /* Own report: "il faut definir les variables comme --app-popover-border pour la home page ... ces themes ne sont applicables que dans leur pages ... la front page doit avoir des valeurs constantes" - surah-player.css/mushaf.css only ever set --app-popover-* under their own reading-frame theme attributes ([data-q-mushaf-theme][data-q- mushaf-mode], scoped to /ar/s/X/ and /ar/c/ only), so any OTHER page loading this file (home, search, downloads...) had these custom properties fully undefined - invalid at computed-value time, so every rule below using them silently dropped that one declaration instead of erroring. Real light/dark constants here, same "original" theme preset's own measured values as the reading pages' own default - this is the fallback every non-reading page actually uses; a reading page's own attribute selector still wins on its own page (higher specificity than this plain :root), so nothing here ever fights that theme system, it only fills the gap outside it. Same :root/prefers- color-scheme/[data-theme] structure as --app-bg & co (input.css). */ :root { --app-popover-bg: #eaeaea; --app-popover-text: #696969; --app-popover-divider: #d0d0d1; --app-popover-border: #d5d5d5; --app-popover-btn-text: #010102; --app-popover-btn-bg: #d9d9da; } @media (prefers-color-scheme: dark) { :root { --app-popover-bg: #202020; --app-popover-text: #9a9a9a; --app-popover-divider: #2f2f30; --app-popover-border: #4c4c4c; --app-popover-btn-text: #ffffff; --app-popover-btn-bg: #3c3c3f; } } :root[data-theme="light"] { --app-popover-bg: #eaeaea; --app-popover-text: #696969; --app-popover-divider: #d0d0d1; --app-popover-border: #d5d5d5; --app-popover-btn-text: #010102; --app-popover-btn-bg: #d9d9da; } :root[data-theme="dark"] { --app-popover-bg: #202020; --app-popover-text: #9a9a9a; --app-popover-divider: #2f2f30; --app-popover-border: #4c4c4c; --app-popover-btn-text: #ffffff; --app-popover-btn-bg: #3c3c3f; } /* --app-link reset for every popover/menu box - .q-mushaf-frame/.q- surah-reading-frame's own rule further below re-derives --app-link from --app-text (content links follow the reading palette, own comment there), but every .q-popover on /ar/s/X and /ar/c is nested *inside* that same scope in the DOM, so it inherited that content value too instead of the plain accent every popover elsewhere uses (own report: "le checkmark n'a pas la meme couleur que la home page"). .q-popover resets it back here, same literal values/4-tier structure as --app-link itself (input.css) - can't reference that token's own "outer" value once shadowed, so this duplicates the 2 constants rather than being a genuine bug on non-reading pages too (a no-op override there, already the same value). */ .q-popover { --app-link: #1a0dab; } @media (prefers-color-scheme: dark) { .q-popover { --app-link: #99c3ff; } } :root[data-theme="light"] .q-popover { --app-link: #1a0dab; } :root[data-theme="dark"] .q-popover { --app-link: #99c3ff; } /* Même reset, mais seulement pour le thème de lecture "Neutre" (data-q-mushaf-theme="neutral") - own report: le bleu générique jure avec la palette des autres thèmes (Calme/warm notamment), "on fait pas un [bleu] pour chaque theme et on laisse ce bleu que pour le neutre" - chaque autre thème garde son --app-link recyclé depuis --app-text (déjà assorti à sa propre palette). Couvre .q-popover ET .q-surah-menu-submenu (pas de classe .q-popover commune aux deux pages - /ar/c scope sur .q-mushaf-frame, /ar/s/X sur html.q-surah-reading-frame, mêmes 4 valeurs littérales que le reset générique ci-dessus). */ .q-mushaf-frame[data-q-mushaf-theme="neutral"] .q-popover, html.q-surah-reading-frame[data-q-mushaf-theme="neutral"] .q-popover, html.q-surah-reading-frame[data-q-mushaf-theme="neutral"] .q-surah-menu-submenu { --app-link: #1a0dab; } @media (prefers-color-scheme: dark) { .q-mushaf-frame[data-q-mushaf-theme="neutral"] .q-popover, html.q-surah-reading-frame[data-q-mushaf-theme="neutral"] .q-popover, html.q-surah-reading-frame[data-q-mushaf-theme="neutral"] .q-surah-menu-submenu { --app-link: #99c3ff; } } :root[data-theme="light"] .q-mushaf-frame[data-q-mushaf-theme="neutral"] .q-popover, html:root[data-theme="light"].q-surah-reading-frame[data-q-mushaf-theme="neutral"] .q-popover, html:root[data-theme="light"].q-surah-reading-frame[data-q-mushaf-theme="neutral"] .q-surah-menu-submenu { --app-link: #1a0dab; } :root[data-theme="dark"] .q-mushaf-frame[data-q-mushaf-theme="neutral"] .q-popover, html:root[data-theme="dark"].q-surah-reading-frame[data-q-mushaf-theme="neutral"] .q-popover, html:root[data-theme="dark"].q-surah-reading-frame[data-q-mushaf-theme="neutral"] .q-surah-menu-submenu { --app-link: #99c3ff; } /* Même exception Neutre, mais sur lui-même cette fois - own report ("l'icone ne devient pas active/pas la meme couleur que data-q-toggle=plus, au moins pour le theme neutre"): le reset générique plus bas (html:root.q-surah-reading-frame, own comment là-bas) retombe --app-link sur --app-text pour TOUT thème de lecture y compris Neutre - l'exception ci-dessus ne le corrige que dans un .q-popover déjà ouvert, jamais pour les boutons du
partagé eux-mêmes (sibling de .q-mushaf-frame, jamais un de ses descendants, depuis que ces boutons en sont sortis cette session) - donc leur état actif tombait sur un gris/--app-text au lieu du bleu attendu même en Neutre. Spécificité (html+:root+classe+attribut) bat déjà le reset générique (html+:root+classe seule) peu importe l'ordre des règles, pas besoin de :not() ici. */ html:root.q-surah-reading-frame[data-q-mushaf-theme="neutral"] { --app-link: #1a0dab; } @media (prefers-color-scheme: dark) { html:root.q-surah-reading-frame[data-q-mushaf-theme="neutral"] { --app-link: #99c3ff; } } html:root[data-theme="light"].q-surah-reading-frame[data-q-mushaf-theme="neutral"] { --app-link: #1a0dab; } html:root[data-theme="dark"].q-surah-reading-frame[data-q-mushaf-theme="neutral"] { --app-link: #99c3ff; } /* Inverse - tout thème de lecture *autre* que Neutre doit suivre sa propre palette (own report: "il faut que ca suit le theme"), pas le bleu générique ci-dessus. .q-popover a plus de poids que le reset générique (.q-popover seul, en haut) grâce à :not() ajoutant une classe d'ancêtre réelle à la spécificité - sans ça le reset générique gagnerait toujours (déjà posé sur .q-popover lui-même). */ .q-mushaf-frame:not([data-q-mushaf-theme="neutral"]) .q-popover, html.q-surah-reading-frame:not([data-q-mushaf-theme="neutral"]) .q-popover, html.q-surah-reading-frame:not([data-q-mushaf-theme="neutral"]) .q-surah-menu-submenu { --app-link: var(--app-text); } /* Exception - "Tranquille" (data-q-mushaf-theme="dark") en mode clair : son --app-text clair (#ebebf5, quasi blanc) est pensé pour SON propre fond sombre (#4a4a4d), pas pour le fond fixe du popover (#eaeaea) - quasi invisible une fois recyclé là (own report: "presque du blanc donc on le voit pas", contraste ~1:1, viole la règle AA de CLAUDE.md). --app-bg de ce même thème/mode (#4a4a4d, déjà posé par la règle plus haut) sert de repli foncé à la place - "le check ... doit etre un peu foncé" (own report), et déjà mesuré à bon contraste contre #eaeaea. Plus spécifique que la règle générale ci-dessus (attribut de mode en plus), donc gagne pour ce cas précis. */ .q-mushaf-frame[data-q-mushaf-theme="dark"][data-q-mushaf-mode="light"] .q-popover, html.q-surah-reading-frame[data-q-mushaf-theme="dark"][data-q-mushaf-mode="light"] .q-popover, html.q-surah-reading-frame[data-q-mushaf-theme="dark"][data-q-mushaf-mode="light"] .q-surah-menu-submenu { --app-link: #4a4a4d; } /* "Contraste élevé" (input.css's own :root[data-contrast="high"], same --app-border escalation) never reached this token - own report: menu/ submenu borders (Réglages/#q-panel-plus and its Langue/Affichage flyouts on every page, own report: "meme dans front page") stayed flat regardless of the toggle, since .q-popover's own border (below) reads --app-popover-border, a fully separate token from --app-border, untouched by input.css's own rule. Same escalated grays input.css already picked for --app-border (#5c5c5c/#9a9a9a) - one consistent "this is what high contrast looks like" colour across every border token in the app instead of a 2nd pair invented here. Same 4-tier structure as every other contrast/theme rule in this file. */ :root[data-contrast="high"] { --app-popover-border: #5c5c5c; --app-popover-divider: #5c5c5c; } @media (prefers-color-scheme: dark) { :root[data-contrast="high"] { --app-popover-border: #9a9a9a; --app-popover-divider: #9a9a9a; } } :root[data-contrast="high"][data-theme="light"] { --app-popover-border: #5c5c5c; --app-popover-divider: #5c5c5c; } :root[data-contrast="high"][data-theme="dark"] { --app-popover-border: #9a9a9a; --app-popover-divider: #9a9a9a; } /* Rounded-card look (reference screenshot - iOS-style context menu). --app-popover-bg/-text (own real measured sRGB values per theme) - a separate palette from the reading page's own --app-bg/-text, not color-mix'd off --app-surface/--app-sub. Shared chrome for every popover/menu across the app - one consistent padding/radius/border/ background/shadow, moved here (own report: "un composant popup... utilisé là où des popup vont être utilisé") instead of mushaf.css defining it for itself with surah_detail.html just along for the ride via its own . */ .q-popover { padding: 0.375rem; border-radius: 16px; border: 1px solid var(--app-popover-border); background: var(--app-popover-bg); box-shadow: 0 8px 28px rgb(0 0 0 / 20%); font-size: calc(0.8125rem * var(--q-ui-scale, 1)); color: var(--app-popover-text); } .q-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.5rem; /* Same horizontal inset as .q-popover-item's own 0.5rem padding (mushaf.css) on the title's side only - the close button's own circular hit target stays flush against the popover's own base 0.375rem padding instead (asked for explicitly), rather than pushed in by an extra 0.5rem it doesn't need. */ padding-inline-start: 0.5rem; } .q-popover-title { margin: 0; font-size: calc(0.75rem * var(--q-ui-scale, 1)); font-weight: 600; color: var(--app-popover-text); } /* Explicit close button next to every popover's own title - not just relying on Escape/outside-click. Small enough it doesn't compete with the title, but still a real >=24px hit target via padding, not just the visible icon's own size. One of the "Bouton" chip-chrome elements (--app-popover-btn-bg/-text). Also reused, unstyled, as the small round icon-button look for other per-row delete buttons (bookmarks/ notes/recent searches, mushaf.js) elsewhere in the app. */ .q-popover-close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0.25rem; border-radius: 999px; background: var(--app-popover-btn-bg); color: var(--app-popover-btn-text); } .q-popover-close:hover:not(:disabled), .q-popover-close:focus-visible { background: color-mix(in srgb, var(--app-popover-btn-text) 12%, var(--app-popover-btn-bg)); } .q-popover-close:focus-visible { outline: 2px solid var(--app-link); outline-offset: 1px; } /* Own report: hx-disabled-elt joins a close button on some pages (e.g. surah_detail.html's #surah-reading-script) - same opacity/pointer- events convention as every other disabled control in the app. */ /* Shared scrolling-body piece of the same header/body pattern as .q-popover-head above (own report: "il y a un style en commun pour les popup avec header, body et footer, comme q-mushaf-surah-popover" - that popover's own mobile layout already splits its title from its scrolling list this way, own comment in surah-player.css; this is that same split promoted to a real shared class instead of a 2nd, id-scoped copy of the same flex-child rules per popover). Marks whichever element is the actual scrolling region of a popover (a list, a tile grid...) so its own head/search stay outside the scroll and only this part moves - parent needs display:flex;flex-direction: column;overflow:hidden for this flex-sizing to take effect, inert otherwise (e.g. a popover whose outer box scrolls as a whole, no flex column split). */ .q-popover-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .q-popover-close:disabled { opacity: 0.5; pointer-events: none; } /* Moved here from mushaf.css (own report: "meme structure et meme class css" - #q-mushaf-surah-popover's own mobile bottom-sheet reuses this exact class now too, not a 2nd copy under a q-surah- prefix). Dims the page behind whichever mobile sheet is open - :not([hidden]) rather than a plain unconditional rule, same reasoning as mushaf.css's own comment on its sibling .q-mushaf-mobile-menu-logo/-menu rules (this file loads after tailwind.css's own preflight [hidden] reset, an unconditional display could otherwise win the cascade on source order alone and never actually hide). */ .q-mushaf-mobile-menu-backdrop:not([hidden]) { position: fixed; inset: 0; background: rgb(0 0 0 / 45%); z-index: 40; } @media (min-width: 1024px) { .q-mushaf-mobile-menu-backdrop { display: none !important; } } /* Moved here from mushaf.css too, same report - the mobile bottom-sheet shell itself. mushaf.html's own trigger only ever shows this below 1024px (desktop keeps the separate hover-corner icons instead), so the original rule never needed its own max-width gate, just the :not([hidden]) attribute selector for specificity (0,2,0) plus a min-width:1024px !important backstop against a resize-while-open edge case. surah_detail.html's own shell (data-q-mushaf-surah-shell) reuses this exact class too, same reasoning: its own trigger stays visible at every width (unlike mushaf.html's, hidden outright at desktop), so this box needs a real max-width gate of its own rather than relying on the trigger already being gone above 1024px. */ @media (max-width: 1023px) { .q-mushaf-mobile-menu:focus { outline: none; } /* Own report ("des elements ne s'affichent que si il y a des données, le menu doit grandir, pas scroller") - Notes/Signets pills (updateMobileListVisibility, mushaf.js) apparaissent/ disparaissent selon le contenu réel, donc ce menu est plus court la plupart du temps que son ancien max-height:70vh fixe - [data-q-mushaf-mobile-list]'s own overflow-y:auto (plus bas) créait un scroll interne dès que le contenu dépassait cette hauteur fixe au lieu de simplement grandir avec lui. max-height remonté à une limite haute (garde-fou réel seulement, jamais atteint par les ~9 pills possibles) - overflow:hidden -> auto ici à la place, un seul scroll de secours sur la boîte entière plutôt qu'un 2e cadre interne. */ .q-mushaf-mobile-menu:not([hidden]) { position: fixed; left: 0.75rem; right: 0.75rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem); z-index: 41; display: flex; flex-direction: column; gap: 0.5rem; max-height: calc(100dvh - 1.5rem); overflow-y: auto; padding: 0.75rem; border-radius: 20px; border: 1px solid var(--app-popover-border); background: var(--app-popover-bg); box-shadow: 0 8px 28px rgb(0 0 0 / 20%); } } @media (min-width: 1024px) { .q-mushaf-mobile-menu { display: none !important; } } /* Own report: "il reste un léger delta" - .q-mushaf-mobile-menu's own gap:0.5rem above already spaces every direct child; its own head (_popover_head.html, shared with surah_detail.html's own shell too) also carries its own margin-bottom:0.5rem (used elsewhere without a flex gap to double up against) - zeroed here so the flex gap stays the single source of that spacing, not stacked on top of it. */ .q-mushaf-mobile-menu > .q-popover-head { margin-bottom: 0; } /* ===== Moved from mushaf.css (own report: "on créer un fichier popup qui va avoir les trucs en commun") - every popup/panel row, list, and Thèmes-panel control shared between mushaf.html and surah_detail.html now lives here, not duplicated or borrowed cross-file. ===== */ /* "Intensité" dimming scrim (mushaf.html/mushaf.js applyMushafBrightness) - plain opacity, not filter:brightness() on .q-mushaf-frame (see mushaf.html's own comment on why - clipped popover colours to white at low Intensité). Opacity set inline per value by JS, 0 by default (no-op before that first call). -1px inset (not 0) so it also dims the frame's own 1px --app-border, not just its padding-box content. Border-radius matches .q-mushaf-frame's own 12px (below) - this box isn't clipped by the frame (no overflow:hidden there), so it needs its own rounded corners to not paint square over the frame's rounded ones. */ .q-mushaf-dim-scrim { position: absolute; inset: -1px; border-radius: 12px; background: #000; opacity: 0; pointer-events: none; } /* surah_detail.html's own copy of this scrim (own comment there) has no positioned ancestor to size against (neither
nor set `position` here) - it falls back to the initial containing block (the viewport itself), so the -1px inset above (meant to bleed over .q-mushaf-frame's 1px border on /ar/c) instead made it 2px wider/ taller than the viewport there, a static overflow real enough to survive `overflow-x:hidden` on html/body (iOS Safari still lets the rubber-band gesture reveal it) - own bug found live on an iPhone 13 Pro (Safari Web Inspector, scrollWidth 391-392 vs clientWidth 390). No frame border to bleed over in this context, inset:0 is exactly right here. */ body:has(#q-karaoke-root) .q-mushaf-dim-scrim { inset: 0; } /* opacity:0 (own comment, mushaf.html) - forces a real layout+paint pass (unlike display:none/[hidden], which skips font shaping/rendering entirely) so each font's bold file (input.css @font-face) gets requested/cached once at page load, not the first time a reader actually toggles "Gras". */ .q-mushaf-bold-preload { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; font-weight: 900; pointer-events: none; } /* Small corner menu (page-jump + Affichage shortcut) instead of a centered toolbar - same muted-icon/hover-fill treatment .q-header-menu-btn already uses elsewhere on the site, so it reads as "app chrome" rather than book content. Lives inside .q-mushaf-frame now, same top row as .q-mushaf-title, always on the frame's physical right - direction:ltr (not relying on inset-inline-end) so it never flips to the left for Arabic (dir=rtl) visitors, the site's own default language. Hidden until the frame is hovered, or one of these buttons themselves gets keyboard focus (:focus-within - so it's still reachable via Tab without a mouse, not hover-only chrome). */ /* Cancels frameEl's own filter:brightness() ("Intensité", mushaf.js) on every toolbar control - same brightness(100/pct) trick as .q-mushaf-jump-popover's own comment explains (nested filters multiply, so this exactly undoes the parent's dimming). Only actually live above 100% now (mushaf.js only sets frameEl's own filter for the single brighten step past default, --q-mushaf-brightness-pct pinned to 100/no-op below that) - dimming below 100% is .q-mushaf-dim-scrim above instead (own comment on why), which never touches these controls in the first place, so there's nothing here left to cancel for that direction. Kept for the brighten side: these icon buttons (currentColor stroke, no filled background of their own) lost contrast fast without it - WCAG contrast ratio isn't linear in a uniform brightness scale, it collapses toward 1 as both foreground and background luminance shrink toward 0 together. Only the actual reading surface (frameEl's own --app-surface paper fill + slotEl's text) is meant to change with this setting - every *control* stays at full contrast, same reasoning as the popovers below. */ /* Scoped to .q-mushaf-brightened (mushaf.js applyMushafBrightness toggles it, only above 100%) rather than always-on - an unconditional `filter` here forced these 3 elements onto their own compositing layer on every visit regardless of the Intensité setting (even at the default 100%, where the computed value is a no-op brightness(1)), which is WebKit/Safari's own trigger for noticeably delayed :hover repaints on filtered elements - reported as the page-turn buttons' hover state lagging on Safari specifically. Below/at 100% now carries no filter at all, matching frameEl's own filter (mushaf.js) which was already gated the same way. */ .q-mushaf-frame.q-mushaf-brightened .q-mushaf-topleft, .q-mushaf-frame.q-mushaf-brightened .q-mushaf-topright, .q-mushaf-frame.q-mushaf-brightened .q-mushaf-edge-btn { filter: brightness(calc(100 / var(--q-mushaf-brightness-pct, 100))); } .q-mushaf-jump-popover { position: absolute; top: 3rem; /* Physical right (not inset-inline-end, which flips with dir) - its own trigger button (.q-mushaf-topright) is forced to the physical right the same way, for Arabic visitors. No direction:ltr here unlike that button row - `right` isn't direction-dependent to begin with, and this popover holds real text content (the search input, its placeholder) that needs to follow the page's actual direction, not be forced ltr like a row of icon buttons. */ right: 3.5rem; z-index: 10; display: flex; flex-direction: column; width: 20rem; max-width: calc(100vw - 2rem); } /* Cancels frameEl's own filter:brightness() (mushaf.js applyMushafBrightness, "Intensité") - nested CSS filters multiply, so brightness(pct/100) on frameEl * brightness(100/pct) here == 1. Only actually live above 100% now: mushaf.js only ever sets frameEl's own filter for the single brighten step past default, pinning --q-mushaf-brightness-pct back to 100/no-op below that instead. Used to also run below 100% (dimming) - removed, because the compensating >1 factor that direction needs (100/70 = 1.43 at minimum) clips any popover colour already close to white *before* frameEl's own filter scales it back down, so near-white --app-popover-bg and --app-popover-btn-bg both clipped to the same pure white then dimmed identically - the popover's own "chip" buttons lost their background/ border against it ("les boutons des popup ne sont plus clairs... leur bordure et background prennent la même couleur que le background du popup"). .q-mushaf-dim-scrim (top of this file) now handles dimming instead, structurally outside any filter these popovers sit under, so there's nothing left to compensate for that direction. Scoped to *direct* children of frameEl specifically, not just .q-mushaf-jump-popover alone - .q-mushaf-transition-popover/ .q-mushaf-theme-mode-popover both carry that same class too but are nested *inside* the theme popover, not frameEl directly; that popover's own filter above already un-dims everything painted through it, nested popovers included, so giving them this same filter a second time would compound into a real over-brightening. */ .q-mushaf-frame.q-mushaf-brightened > .q-mushaf-jump-popover { filter: brightness(calc(100 / var(--q-mushaf-brightness-pct, 100))); } /* Same shared-border wrapper pattern as the header's own .q-header-search (base.html/tailwind.css) - input and submit button both borderless inside one rounded/bordered row, not each styled separately, so the focus ring reads as "this whole field", not just the text part. */ /* #q-mushaf-jump-popover specifically (own report) - not the shared .q-mushaf-jump-popover class (also carried by #q-mushaf-surah-popover for its own positioning/sizing), that one's own search field now reuses .q-surah-popover-search instead (canonical block further above) so it's styled 100% identically to surah_detail.html's own #q-mushaf-surah-popover, not a 2nd near-duplicate of this rule. */ #q-mushaf-jump-popover form { display: flex; align-items: center; border: 1px solid var(--app-border); border-radius: 6px; background: var(--app-bg); } #q-mushaf-jump-popover form:focus-within { border-color: var(--app-link); } #q-mushaf-jump-popover input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0.5rem 0.625rem; color: var(--app-text); font-size: calc(0.875rem * var(--q-ui-scale, 1)); } #q-mushaf-jump-popover input:focus-visible { outline: none; } /* type="search" draws its own native "x" clear button in WebKit/Blink once there's text - redundant next to this popover's own search icon and not present at all on the plain type="text" jump-input this same rule already styles, so it read as an inconsistent extra control rather than a deliberate one. */ #q-mushaf-jump-popover input::-webkit-search-cancel-button { display: none; } /* Mirror of the jump popover above, physical left (its own trigger, .q-mushaf-topleft, is on that side) - same base look (.q-mushaf-jump-popover), just the opposite corner. */ .q-mushaf-surah-popover { left: 3.5rem; right: auto; width: 15rem; } /* Right-anchored, same default as .q-mushaf-jump-popover (its own trigger lives in .q-mushaf-topright, not topleft) - just narrower, 2 short rows is all it ever holds. */ .q-mushaf-share-popover { width: 13rem; } /* Canonical popover list-row/menu-item look - a real class, meant to be added directly to markup anywhere a popover/menu needs a row (this page or elsewhere in the app), not just aliased in a growing list of selectors alongside whatever page-specific class happened to exist already. Every row on this page (Sourates, Signets, Notes, recherches récentes, résultats de recherche, Partager, Police, Animation, Apparence, the selection menu) uses this one class now - own comment in mushaf.html/.js on each. Base is block/full-width/ start-aligned (a plain text row); .q-popover-item-icon (below) is the flex/gap modifier for icon+label rows or a 2-part row (content + its own delete button) - added alongside, not a different class family. */ .q-popover-item { display: block; width: 100%; text-align: start; padding: 0.5rem; border-radius: 0; color: var(--app-popover-text); font-size: calc(0.875rem * var(--q-ui-scale, 1)); line-height: 1.5; } /* Own report: "redrend les elements apres le separateur desactivé jusqu'a ce que je choisi trier par quoi" (#q-plus-surah-sortby-submenu, own report) - même valeur que le groupe [disabled] de surah_list.html (pointer-events:none, opacity:0.5), scopé ici (popover.css, global) car ce menu vit dans base.html. */ .q-popover-item[disabled] { pointer-events: none; opacity: 0.5; } .q-popover-item:hover { /* color-mix against --app-popover-text, not the reading page's own --app-text - this is the popover chrome's own separate palette (mushaf.css [data-q-mushaf-theme][data-q-mushaf-mode] blocks). */ background: color-mix(in srgb, var(--app-popover-text) 12%, transparent); } /* Own report: "on dirait un hover" - sleep-timer.js's own open() (and every other roving-tabindex radiogroup here) calls .focus() on the already-checked item as soon as the popover opens, no mouse involved - sharing :hover's own background wash made that look like a stuck hover state instead of "here's your keyboard focus". Outline alone still satisfies the a11y need (focus must stay visible), just doesn't read as a hover the user never triggered. */ .q-popover-item:focus-visible { outline: 2px solid var(--app-link); outline-offset: -2px; } .q-popover-item-icon { display: flex; align-items: center; gap: 0.5rem; } .q-popover-item-icon svg { flex-shrink: 0; color: var(--app-popover-text); } /* Moved here from surah-player.css (own report: "meme structure, meme code html et class, meme css et meme js" - every "row with its own flyout submenu" widget uses these same classes now, not just surah_detail.html's own Récitant/Thèmes/Lecture/Partager rows - base.html's own Langue-inside-Réglages row too). */ .q-surah-menu-item { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; width: 100%; padding: 0.5rem; border: none; background: transparent; color: var(--app-popover-text); font-size: calc(0.875rem * var(--q-ui-scale, 1)); line-height: 1.5; text-align: start; } /* Own report: trigger row should stay in its own "hovered" look while its flyout is open, not just for the literal duration the pointer sits over it - aria-expanded (kept in sync by open()/close()) is the real "this row's submenu is showing" signal. */ .q-surah-menu-item:hover, .q-surah-menu-item[aria-expanded="true"] { background: color-mix(in srgb, var(--app-popover-text) 12%, transparent); border-radius: 8px; } /* Own report: "en mobile les popover sont trop étroit... en desktop il y a un peu d'espace après le wording" - .q-surah-popover a une largeur shrink-to-fit sur ce type de menu (data-q-card-menu-wrap/initRowMenu, popover.js - JS pose left/right:auto en inline, jamais de width, donc la boîte prend juste la largeur de son contenu). Un min-width et un peu plus de padding sur mobile seulement donnent la même respiration qu'en desktop, sans toucher au desktop (déjà correct là). */ @media (max-width: 1023px) { .q-surah-popover { min-width: 13rem; } .q-surah-menu-item { padding: 0.625rem 0.875rem; } } /* Header disclosure button (Langue/Affichage/Récitant/Lecture, base.html) for whichever panel is currently open - aria-expanded is already kept in sync by __qSetPanelOpen (base.html JS) for every toggle, purely CSS from there. Same background/border/color/bold combo as the selected-choice states above (input.css), for one consistent "this is the active one" language across the whole app instead of a one-off style just for this. Lives here rather than input.css/ tailwind.css - own report: "il ne faut pas que le style hover l'emporte" - .q-icon-btn:hover (tailwind.css) needs to lose that tie, and this file already loads after tailwind.css on every page (base.html's own order), so being here is enough on its own, no specificity trick or !important needed. */ [data-q-toggle][aria-expanded="true"] { background: var(--app-link-soft); border-color: var(--app-link); color: var(--app-link); font-weight: 600; } /* Même "état actif" - own report ("les boutons doivent devenir actifs comme data-q-toggle=plus"): data-q-surah-menu-toggle (/ar/s/1, "...") et data-q-mushaf-surah-toggle (/ar/c, Sourates) mettent déjà à jour aria-expanded eux-mêmes (bindPopover, surah-player.js/mushaf.js) mais n'avaient encore aucune règle CSS dessus - juste deux attributs de plus sur le même sélecteur plutôt qu'une règle dupliquée. own report ("le hover l'emporte, et les couleurs sont differentes"): 2 bugs, pas 1. 1) Couleurs: --app-link/--app-link-soft ne sont en fait JAMAIS redéfinis par thème de lecture à ce niveau - les resets par thème (plus haut dans ce fichier) ne portent que sur .q-popover/ .q-surah-menu-submenu (contenu d'un panneau déjà ouvert), pas sur le
partagé, qui est un sibling de .q-mushaf-frame depuis que ces boutons en sont sortis cette session (own report "ils doivent vivre dans le header partagé") - jamais un descendant. Même valeurs globales que /ar/s dans tous les thèmes de lecture ici, color-mix (essayé un instant) aurait justement introduit un écart qui n'existait pas (16% fixe vs le 10%/16% réel de --app-link-soft selon clair/sombre, input.css). 2) Hover: .q-icon-btn:hover/.q-mushaf-icon-btn:hover (surah- player.css/mushaf.css) chargent APRES ce fichier (extra_head) et ont la même spécificité (0,2,0) qu'un simple [attr][attr] (0,2,0) - égalité tranchée par l'ordre de chargement, donc le hover gagnait toujours. Combiné avec la classe .q-icon-btn/.q-mushaf-icon-btn ici (0,3,0) pour battre le hover peu importe l'ordre des fichiers. Own report ("chaque bouton dont le popover s'ouvre doit devenir actif, pas juste Sourates") - générique sur [aria-expanded="true"] plutôt que listé par data-attribut : couvre Notes/Sourates/Aller à la page/Signets/Partager/Thèmes/Langue/Lecture (data-q-mushaf-*-toggle) et "..." (data-q-surah-menu-toggle) d'un coup, tous de vrais boutons disclosure aria-expanded (bindPopover). Le bookmark-btn (aria-pressed, pas aria-expanded, icône on/off séparée) n'est pas concerné, aucun [aria-expanded] dessus. */ .q-icon-btn[aria-expanded="true"]:not(:disabled):not([hidden]), .q-mushaf-icon-btn[aria-expanded="true"]:not(:disabled):not([hidden]) { background: var(--app-link-soft); border-color: var(--app-link); color: var(--app-link); font-weight: 600; } /* Same "this is the active one" look as [data-q-toggle] above, reused as plain CSS rather than the data-q-toggle attribute itself - these two don't go through base.html's own generic panel-open delegation (data-q-panel counterpart, __qSetPanelOpen), own click handlers in _surah_list_section.html instead - own report: "le bouton doit avoir l'etat active quand son popover est ouvert ... comme data-q-toggle= plus". Was [data-q-sleep-timer-toggle] (ex-minuterie de veille, retirée) - même règle reprise ici plutôt que dupliquée. Shared here (not surah-player.css) since surah_list.html only loads this sheet. */ #q-surah-duration-toggle[aria-expanded="true"] { background: var(--app-link-soft); border-color: var(--app-link); color: var(--app-link); font-weight: 600; } /* Own report: "le premier reste comme hover meme si je survole un autre élément" - open()'s own firstItem.focus() keeps the outline's own row focus-visible for as long as it holds keyboard focus, real and correct for a keyboard user tabbing through, but that used to *also* paint the same background fill as :hover above - with the pointer now hovering a *different* row, 2 rows read as "active" at once. Outline alone still marks focus (never just colour, CLAUDE.md), without also claiming the same fill hovering itself uses. */ .q-surah-menu-item:focus-visible { outline: 2px solid var(--app-link); outline-offset: -2px; } .q-surah-menu-item:disabled { opacity: 0.5; pointer-events: none; } /* Partager's own row (q-surah-menu-item-sub) - icon+label cluster on one side (q-surah-menu-item-content, same gap/order as every other menu item), chevron pinned to the far edge as the submenu affordance - this one button needs space-between (unlike the plain flex-start items above) precisely so the chevron reaches that far edge. */ .q-surah-menu-item-sub { justify-content: space-between; } .q-surah-menu-item-content { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .q-surah-menu-item-chevron { flex-shrink: 0; color: var(--app-sub); } /* Points toward inline-end at rest (icon itself drawn LTR/pointing right) - mirrored under RTL, same scaleX(-1) convention as every other directional glyph in this codebase. Static either way, not a live open/close indicator - aria-expanded/aria-haspopup already carry the live state for screen readers. */ [dir="rtl"] .q-surah-menu-item-chevron { transform: scaleX(-1); } /* Flyout shell - position context for it is each caller's own [data-q-*-wrap] { position: relative } rule (base.html/surah-player.css respectively) - own report: "il faut faire pareil que Thèmes", nothing lives here for that half, it's per-widget. Copies .q-popover's own base chrome exactly - fully opaque, no blur, same as every other top-level popover. */ /* Moved from surah-player.css (own report: "ne duplique pas le code") - base.html's own #q-panel-plus carries this same class too now, needed loaded site-wide, not just on /ar/s/X. */ .q-surah-popover { position: absolute; /* 2.25rem = hauteur de .q-icon-btn (le bouton déclencheur, même classe ici et sur data-q-toggle="plus") + --q-popover-trigger- gap - own report sur l'égalité des 3 espaces, voir sa définition. */ top: calc(2.25rem + var(--q-popover-trigger-gap)); /* inset-inline-start (pas right) - own report ("en LTR mal positionné, mobile ET desktop") : #q-panel-plus/data-q-toggle= "plus" vit dans #q-header-col-start (justify-self:start, base.html), qui suit dir - bascule au bord physique gauche en LTR. right:0 (physique, jamais réévalué) restait collé à droite dans les deux langues, décollé du bouton en LTR. inset-inline- start:0 vaut right:0 en RTL (identique à avant, rien ne change côté arabe) et left:0 en LTR - suit le bouton dans les deux cas. */ inset-inline-start: 0; /* z-index:60 (own report: "une partie en bas est cachée par #q-mini-player-mobile-bar" sur /ar/s mobile) - au-dessus de .q-bottombar (z-index:55, input.css) et #q-mini-player-mobile-bar (z-index:30, surah_list.html), pas seulement du backdrop (.q-mushaf-mobile-menu-backdrop, z-index:40) : ce panneau est une vraie superposition modale quand ouvert, rien d'autre du chrome fixe ne doit rester au-dessus. */ z-index: 60; width: var(--q-menu-shell-width); max-height: calc(100dvh - 1rem); overflow-y: auto; overscroll-behavior: contain; padding: 0.375rem; border-radius: 16px; border: 1px solid var(--app-popover-border); background: var(--app-popover-bg); box-shadow: 0 8px 28px rgb(0 0 0 / 20%); font-size: calc(0.8125rem * var(--q-ui-scale, 1)); color: var(--app-popover-text); } /* Own report: right:0 above assumes a trigger at the far edge of its own row (#q-panel-plus, .q-surah-menu-toggle - nothing past them, endless room to open toward) - surah_list.html's sleep-timer trigger sits mid-row instead, packed into a 16rem-wide column alongside shuffle/ prev/play/next, narrower than this popover's own 15rem width, so anchoring to either edge risks spilling out one side depending on viewport width. Centered under the button instead - splits any overflow evenly on both sides rather than gambling on one. Sibling selector (not a class on #q-sleep-timer-popover itself) - the attribute lives on the trigger, not the popover, same split as data-q-sleep-timer-anchor-default itself (sleep-timer.js). Scoped to min-height:551px - a plain ID selector's own #q-sleep-timer-popover bottom-sheet rule just below (max-height:550px) would otherwise lose the specificity fight against this one (attribute + id beats id alone) and get its own left/transform silently overridden on a short viewport, breaking the full-width sheet instead of centering anything meaningful. */ @media (min-height: 551px) { [data-q-sleep-timer-anchor-default] ~ #q-sleep-timer-popover { left: 50%; right: auto; transform: translateX(-50%); } } /* Moved from surah-player.css (own report: "meme chose pour /ar/s/ ... sans dupliquer le code") - #q-sleep-timer-popover is now shared between surah_detail.html and surah_list.html (staticfiles/js/sleep-timer.js), and only surah_list.html loads popover.css, not surah-player.css. #q-mushaf-surah-popover kept alongside it, same reasoning as its own earlier migration just above (own report: "ne duplique pas le code"). The row-anchored clamp (sleep-timer.js's own open()) keeps these popovers inside a *short* browser window, but "clamped to a 550px-tall sliver with its own internal scrollbar" still reads as broken, not fixed - a real bottom-sheet reads as intentional instead. Height- based, not a width-based mobile breakpoint (own report: a wide desktop window dragged short hits this exact same problem, nothing to do with narrow/mobile). JS skips its own top/left/right inline positioning under this same threshold so these rules aren't fought by leftover inline styles from a previous open() at a taller size. #q-mushaf-surah-popover removed from this list (own report) - it's a real .q-surah-menu-submenu row-item now (surah_detail.html, moved out of #q-surah-menu-popover), not the old standalone top-level popover this rule was written for. A short-viewport fixed-bottom-sheet here fought that family's own shared width-based mobile handling instead of matching it (own report: "je n'arrive jamais a aller avec la souris [vers] popover, il se cache" - rendered far from its own trigger row on a short window, nothing continuous for the pointer to follow between them). */ @media (max-height: 550px) { #q-sleep-timer-popover { position: fixed; inset-inline: 0; top: auto; bottom: 0; margin-inline: auto; width: 100%; max-width: 22rem; max-height: min(80vh, calc(100dvh - 1rem)); border-radius: 16px 16px 0 0; padding-bottom: calc(0.375rem + env(safe-area-inset-bottom, 0px)); } } .q-surah-menu-submenu { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 100%; width: 12rem; max-height: none; padding: 0.25rem; border-radius: 16px; border: 1px solid var(--app-popover-border); background: var(--app-popover-bg); box-shadow: 0 8px 28px rgb(0 0 0 / 20%); z-index: 42; font-size: calc(0.8125rem * var(--q-ui-scale, 1)); color: var(--app-popover-text); text-align: start; } /* Mobile bottom-sheet for the whole .q-surah-menu-submenu family - was surah-player.css-only (/ar/s/X), moved here (loaded site-wide, base.html) so #q-panel-plus's own Langue/Traduction/Lecture/Récitant flyouts get the exact same treatment instead of a 2nd copy (own report: "meme chose... ne duplique pas le code"). The row-anchored flyout (base rule above, width:12rem/20rem, inset-inline-end:100% off the trigger row) has nowhere to grow on a narrow viewport - a fixed, edge-margined, fully-rounded card instead, same shape as mushaf's own .q-mushaf-mobile-menu. */ .q-surah-submenu-mobile-head { display: none; } @media (max-width: 1023px) { .q-surah-menu-submenu { position: fixed; inset-inline-end: auto; margin-inline-end: 0; left: 0.75rem; right: 0.75rem; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem); width: auto; max-height: 70vh; overflow-y: auto; border-radius: 20px; padding: 0.375rem; display: flex; flex-direction: column; gap: 0.5rem; /* Cancels the desktop base rule's own translateY(-50%) vertical centering above - without it a leftover -50% shift still applies on top of position:fixed;bottom, pushing the sheet up by half its own height. */ transform: none; } .q-surah-submenu-mobile-head { display: flex; } /* #q-mushaf-surah-popover only - own report: "l'input change de position a chaque fois qu'on filtre" (fewer visible rows shrank the *whole sheet*, floating the search row up/down with it) then "collé au bord bas comme les autres" (reverting the sheet itself to the shared bottom-anchored rule above brings that back). Fixed height on the *list* alone instead of the whole sheet - own reserved viewport that never shrinks with the filtered count, so the search row above it never moves, while the sheet itself still hugs the bottom edge exactly like every other submenu. */ #q-mushaf-surah-popover .q-popover-list { height: 50vh; overflow-y: auto; } } /* Shared 20rem submenu width + 0.5rem padding - own report: "pourquoi c'est pas le meme code d'ailleurs" (home's own #q-plus-display-submenu/ #q-plus-accessibility-submenu/#q-plus-reading-submenu vs /ar/s/X's own .q-surah-reading-submenu/-theme-submenu/-reciter-submenu/ -accessibility-submenu) - used to be a literal width:20rem duplicated in each of those own id/class rules (input.css/surah-player.css), padding drifted apart the same way (0.5rem in some, 0.375rem in others - own report: "le padding n'est pas pareil", no real reason for the difference). One shared class for both now, each submenu's own remaining overrides (height/max-height/overflow-y/flex layout) stay separate on purpose - those still genuinely differ. Placed *after* the base .q-surah-menu-submenu rule above on purpose - own report: "t'as cassé le width" - equal specificity (single class each), so source order alone decides which value wins; before this move the base rule's own width:12rem/padding:0.25rem (later in the file back then) silently beat this one regardless of which elements carried it. */ .q-menu-submenu-lg { width: 20rem; padding: 0.5rem; } /* Own report ("un peu large") - Accessibilité (/ar/s/1 et /ar/s) n'a qu'une liste de switches empilés (_accessibility_switches.html), pas besoin des 20rem pensés pour la grille 2 colonnes du Récitant (.q-menu-submenu-lg, own comment ci-dessus, toujours utile ailleurs) - override scopé aux 2 ids seulement, id+class même spécificité que .q-menu-submenu-lg, l'id gagne peu importe l'ordre. Desktop only (>=1024px, own report "meme largeur que les autres popover sur mobile") - sans ça cet id (plus spécifique) battait aussi la règle mobile juste en dessous (width:auto, le même sheet edge-margined que tous les autres q-menu-submenu-lg), gardant ce seul submenu étroit à 16rem au lieu du plein sheet mobile partagé. */ @media (min-width: 1024px) { #q-surah-accessibility-submenu, #q-plus-accessibility-submenu { width: 16rem; } } /* Own report: "la largeur n'est pas bonne" - this rule's own unconditional width:20rem otherwise beats the mobile bottom-sheet's width:auto above (equal specificity, source order - this rule comes later in the file), pinning Lecture/Récitant/Thèmes/Accessibilité (all q-menu-submenu-lg) to a narrow floating box instead of the shared edge-margined sheet every other submenu already gets on mobile. */ @media (max-width: 1023px) { .q-menu-submenu-lg { width: auto; padding: 0.375rem; } } /* .q-reciter-list's own base grid-template-columns:repeat(3,1fr) (input.css) was sized for the old, wider index-page reciter panel - too cramped at this 20rem family's own width. Scoped to the shared class both /ar/s/X's own #q-surah-reciter-submenu and home's own #q-plus-reciter-submenu carry (own report: "2 colonnes comme /ar/s/X") instead of one id-scoped copy per page. */ .q-menu-submenu-lg .q-reciter-list { grid-template-columns: repeat(2, 1fr); } /* No fixed/max height (own report: remove it) - now that the search box (former own report: it moved down as filtered results shrank the grid) is gone, the submenu just sizes to however many reciter tiles there actually are, however many that grows to. Flex column + overflow:hidden - .q-reciter-list carries the shared .q-popover-body class, kept in case a future taller list needs its own scroll again. Shared by /ar/s/X's own #q-surah-reciter-submenu and home's own #q-plus-reciter-submenu (own report: "la hauteur n'est pas comme /ar/s/X") instead of one id-scoped copy per page. */ .q-reciter-submenu { display: flex; flex-direction: column; overflow: hidden; } /* Explicit divider between menu rows (own report: "après Récitant, avant Partager" on /ar/s/X, generic name now - moved here from surah-player.css since base.html/home page needs it too and only loads this file, not that one) - the rows around it don't have their own border-top, so this is its own dedicated element rather than reusing that hidden li+li border. */ .q-menu-divider { height: 1px; margin: 0.25rem 0.625rem; background: var(--app-popover-divider); } /* Bigger gap before "Signaler un problème" (own report, IMG_7589.jpg) - a full section break, not the plain hairline the divider above draws between 2 related rows - same background colour as that one (own report), just thicker/full-width instead of the 1px inset line. */ .q-menu-divider-lg { height: 4px; margin: 0.375rem 0; } /* "Langue de traduction" (base.html, home page only) - translation names vary too much in length (own report: some wrapped to 2 lines at a fixed rem width) for one guessed width to fit every one on a single line - size to content instead, clamped so it never overflows the viewport on a narrow desktop window. */ @media (min-width: 1024px) { #q-plus-translation-submenu { width: max-content; max-width: min(90vw, 26rem); } } #q-plus-translation-submenu .q-popover-item { white-space: nowrap; } /* "Lecture" (base.html, home page only) - same #mark-toggles/.q-mark-desc negative-margin compensation as surah_detail.html's own #q-surah-reading-submenu copy (surah-player.css), needed here too since this submenu isn't loaded on the same page (that CSS file is surah_detail.html-only, own there) and popover.css is the file actually shared with base.html. */ #q-plus-reading-submenu #mark-toggles { margin-bottom: 0.75rem; } #q-plus-reading-submenu #mark-toggles-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-width: 0; } /* Divider/inset/rounding between rows aren't here - a row is a
  • wrapping a .q-popover-item button in most lists but a flat .q-popover-item with no
  • at all in the selection menu, so those rules need 2 different selectors per concern rather than one; kept together further down this file instead of splitting that logic across 2 places. */ .q-mushaf-theme-popover { /* 19->20rem (back to the shared .q-mushaf-jump-popover default just above, no longer a slimmer override) - this popover now also carries the Texte/Accessibilité controls folded in from the old "Personnaliser le thème" dialog (own comment further below), which need a bit more breathing room than the swatch grid/quickrow alone ever did. */ width: 20rem; /* Can grow past the viewport now on a short screen once "Personnaliser" reveals its own extra sliders - same max-height + overflow-y treatment as .q-mushaf-selection-popover elsewhere in this file (own comment there), simpler than trying to keep .q-popover-head's own close button pinned above a separate scrolling zone the way the old dialog's fixed header/footer did (own comment further below on why that dialog is gone) - Escape/ outside-click/scrolling back up all still reach it fine. */ max-height: calc(100vh - 2rem); overflow-y: auto; } /* 4 columns - size-toggle spans 2, the transition-picker and quick theme buttons each take 1, matching the reference screenshot's own proportions (stepper roughly the width of the 2 icon buttons combined). Was 3 columns/no transition button before that moved out of this popover's own inline flow into its own quick popover (mushaf.html) - .q-mushaf-arabic-size-dots below still only spans the first 2 (under the size-toggle specifically), unaffected by the extra column. */ .q-mushaf-theme-quickrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; } /* Taille du texte arabe + Intensité, own row above the quickrow (mushaf.html, own comment there) - both use the same .q-mushaf-theme- size-toggle chip, own 2-column grid so they always pair together regardless of what the quickrow below still has free. Each column is a plain flex column (stepper on top, its own dots row under it) - .q-mushaf-theme-arabic-size and .q-mushaf-theme-brightness both rely on this same child rule instead of repeating it twice. */ .q-mushaf-theme-quickrow-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; } /* Reported: tapping these controls in quick succession (bumping the Arabic size stepper or brightness slider dots repeatedly) triggered the mobile browser's own double-tap-to-zoom instead of registering as 2 separate taps - no CSS here was telling it these are discrete controls, not page content to zoom into. manipulation keeps pinch- zoom/pan working everywhere else on the page, just drops the double-tap-zoom gesture specifically over these 4. */ .q-mushaf-theme-brightness, .q-mushaf-theme-arabic-size, .q-mushaf-theme-size-toggle, .q-mushaf-arabic-size-dots { touch-action: manipulation; } .q-mushaf-theme-quickrow-row > div { display: flex; flex-direction: column; } /* Own report: each column's own .q-mushaf-arabic-size-dots stretches edge-to-edge (space-between, own rule further below) - flush against both columns' shared inner edge, the 2 dot rows read as one continuous strip instead of 2 separate ones. Insets both sides so neither row reaches that shared boundary, same gap on the outer edges too rather than a direction-specific one-sided fix. */ .q-mushaf-theme-quickrow-row .q-mushaf-arabic-size-dots { padding-inline: 0.5rem; } /* Segmented "A A" pair (small/large) - .q-mushaf-arabic-size-step (1/-1) steps the *same* petit/normal/grand/tres-grand radios the site-wide panel already has (mushaf.js), not a separate scale. Same border/ radius/padding/height as .q-mushaf-personalize-reset further below - one consistent "control" look across this popover, not a pill here and a rectangle there. */ /* "Bouton" chrome (--app-popover-btn-bg/-text) - the popover's own real measured "chip control" palette, a filled background distinct from the popover's own body (--app-popover-bg) rather than a plain bordered/transparent control - same elements throughout this popover use it: this stepper, .q-mushaf-theme-quick-btn, .q-mushaf-personalize-reset, .q-popover-close. */ .q-mushaf-theme-size-toggle { grid-column: span 2; display: flex; border-radius: 8px; background: var(--app-popover-btn-bg); overflow: hidden; } .q-mushaf-theme-size-toggle button { flex: 1; /* display:flex + centering, not text-align/line-height alone - those 2 centered the "A"/"A" text fine (own report: no complaint there) but left the newer svg icon buttons (espacement lignes/mots, own comment further below) visibly off-center - vertical-align:middle on a lone inline svg with no sibling text to align against isn't reliable the way it is for a text baseline. Flex centers either kind of content the same way. */ display: flex; align-items: center; justify-content: center; padding: 0.5rem 0; color: var(--app-popover-btn-text); font-weight: 600; line-height: 1; /* Own report: same size on both buttons here - matches .q-mushaf-personalize-reset's own font-size, same as every icon- only stepper in this family (espacement lignes/mots, Intensité). Only .q-mushaf-arabic-size-toggle's own "A"/"A" pair overrides this asymmetrically further below - a real small/big size *difference* is the whole point there, not something every other stepper reusing this same class should inherit too. */ font-size: calc(0.8125rem * var(--q-ui-scale, 1)); } .q-mushaf-theme-size-toggle button:first-child { border-inline-end: 1px solid var(--app-popover-divider); } .q-mushaf-arabic-size-toggle button:first-child { /* Smaller than the "big A" (below) - was 0.6875rem (matching .q-mushaf-personalize-reset's own text), nudged down further so the size gap between the two reads clearer at a glance. */ font-size: calc(0.625rem * var(--q-ui-scale, 1)); } .q-mushaf-theme-size-toggle button:hover, .q-mushaf-theme-size-toggle button:focus-visible { /* color-mix against --app-popover-btn-text, layered on top of this control's own --app-popover-btn-bg (a hover mixed against --app-popover-text/-bg instead, like the plain list rows just below, would barely show up against this already-different "chip" background). */ background: color-mix(in srgb, var(--app-popover-btn-text) 12%, var(--app-popover-btn-bg)); } .q-mushaf-theme-quick-btn { grid-column: span 1; display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0.5rem; border-radius: 8px; background: var(--app-popover-btn-bg); color: var(--app-popover-btn-text); } .q-mushaf-theme-quick-btn:hover, .q-mushaf-theme-quick-btn:focus-visible, /* Own report: stays in its own hovered look while its own popover is open (data-q-mushaf-theme-mode-toggle, the only user of this class with aria-expanded at all - harmless no-op selector for every other plain .q-mushaf-theme-quick-btn, own comment above on who else uses this class). */ .q-mushaf-theme-quick-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--app-popover-btn-text) 12%, var(--app-popover-btn-bg)); } /* Widget rapide Apparence (#q-panel-plus, juste avant "Thèmes et réglages", base.html data-q-quick-theme-pill) - même famille visuelle que .q-mushaf-theme-size-toggle (steppers "Thèmes et réglages") au lieu d'une pilule flottante à hauteur fixe: 3 boutons flex:1 pleine largeur, même hauteur de ligne que les autres items du menu. Le
  • n'a pas la classe .q-popover-item-row (pas de bouton unique à surligner sur toute la ligne ici, own report: "hover d'un element du menu qui se declenche... c'est moche" - ce groupe gère son propre état visuel par bouton). */ .q-quick-theme-pill-row { padding: 0.25rem; } .q-quick-theme-pill { display: flex; border-radius: 8px; background: var(--app-popover-btn-bg); overflow: hidden; } .q-quick-theme-pill-btn { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0.3125rem 0; color: var(--app-popover-btn-text); background: none; } .q-quick-theme-pill-btn:not(:last-child) { border-inline-end: 1px solid var(--app-popover-divider); } .q-quick-theme-pill-btn:hover, .q-quick-theme-pill-btn:focus-visible { background: color-mix(in srgb, var(--app-popover-btn-text) 12%, var(--app-popover-btn-bg)); } .q-quick-theme-pill-btn[aria-checked="true"] { background: color-mix(in srgb, var(--app-popover-btn-text) 18%, var(--app-popover-btn-bg)); } .q-quick-theme-pill-btn:focus-visible { outline: 2px solid var(--app-link); outline-offset: -2px; } /* Sits under .q-mushaf-theme-size-toggle only, not the sun button next to it - starts a new row in the quickrow's own 3-column grid but explicitly spans just the first 2 columns (grid-column), same box width as the stepper above it. space-between (no fixed gap) spreads the 15 dots edge-to-edge across that full width, matching the toggle's own two flex:1 buttons visually filling their box - a fixed gap left them bunched on one side instead. No horizontal padding either, so the first/last dot land flush with the toggle's border, same as its buttons. */ .q-mushaf-arabic-size-dots { grid-column: 1 / span 2; display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0 0; } /* Own report: missed by the earlier mushaf.css->popover.css move (name didn't match that pass's own prefix list) - the actual dot itself, .q-mushaf-arabic-size-dots above is just the row container. */ .q-mushaf-arabic-dot { width: 0.375rem; height: 0.375rem; border-radius: 999px; /* --app-border (own report: "pas bien visible") is too low-contrast for a state indicator this small (CLAUDE.md ≥3:1 non-text). Neither that nor --app-sub/--app-text is actually a page-independent value though (own report: "une couleur pour les dots sur la home, une autre sur /ar/s/X") - html:root.q-surah-reading-frame (surah-player.css) and [data-q-mushaf-theme] (mushaf.css) both re-derive --app-text/-sub/-border per active Mushaf reading theme (Original/Tranquille/Papier/...), an axis this popover's other pages (Affichage, here) don't have at all. --app-popover-divider/ -text instead - this dot lives inside a popover (.q-surah-menu-submenu), so it uses that same self-contained palette every other divider/text in this exact popover system already does (own comment further up: "the popover chrome's own separate palette... not the reading page's --app-bg/--app-text above") - same code, not a hardcoded guess, correctly following whichever Mushaf theme is active exactly like its neighbours instead of drifting from it. */ background: var(--app-popover-divider); flex-shrink: 0; } .q-mushaf-arabic-dot-filled { background: var(--app-popover-text); } /* "Intensité" (reference screenshot) - same stepper+dots chip as the Arabic size control above (.q-mushaf-theme-size-toggle/ .q-mushaf-arabic-size-dots, own comment on the markup) rather than the native this replaces, so it reads like every other control on this page instead of being the one native slider among them. mushaf.js applies filter:brightness() on .q-mushaf-frame itself, Mushaf-scoped same as the 6 theme presets. Paired with the Arabic size stepper on their own .q-mushaf-theme-quickrow-row (own comment there) - flex-column layout comes from that row's own ">div" rule, nothing needed on this class itself. */ .q-mushaf-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.75rem; } /* Bigger card, closer to the reference screenshot's own tiles - was a thin 0.75rem/0.25rem pad with a 1.25rem "Aa", read cramped/plain next to it. */ /* Own report: "tout ce qui est bouton ne marche pas" (Thèmes et réglages panel, surah_detail.html) - every real control in here is a plain