/* Book view (/c/, quran/templates/quran/mushaf.html + mushaf.js) - a fixed-height frame showing one Ayah.page_number-grouped page at a time (mushaf.js swaps its content), turned via edge-mounted prev/next buttons - reading the text is the point, controls stay out of the way (page-turn corners on the frame itself, a small icon menu in the corner instead of a always-visible toolbar). Own file (not input.css/tailwind.css), loaded only from mushaf.html's own extra_head - same "plain static CSS, page-specific" pattern karaoke.css/player.css already follow, rather than growing the shared stylesheet with rules only this one page ever uses. Uses the same var(--app-*) theme tokens input.css's own :root defines - those load first on every page (tailwind.css, base.html ), same established assumption karaoke.css/player.css already rely on. */ /* Full-immersion layout (base.html's own main_class block, overridden here to this instead of the site-wide "max-w-4xl mx-auto px-4 py-6") - site header/footer are gone entirely on this page (own blocks, overridden empty), so #main-content itself shouldn't keep reserving the same centered/padded column they used to justify; the reading frame gets the full viewport instead, own padding (.q-mushaf-frame, below) providing the only breathing room from here on. */ .q-mushaf-immersive { max-width: none; width: 100%; margin: 0; padding: 0; } /* tailwind.css reserves body { padding-bottom: 60px + safe-area } on mobile (<1024px) site-wide, to keep page content clear of the fixed .q-bottombar nav - but that nav is hidden entirely on this page (base.html, q_url == 'mushaf'), so the reserved space is now just empty scrollable padding under the frame: the page looked like it still scrolled vertically after the frame itself became a real 100dvh/edge-to-edge fit, "scrolling into nothing". No matching nav to compensate for here, so the reservation itself is dropped. */ body:has(.q-mushaf-immersive) { padding-bottom: 0; /* Browser-chrome-level horizontal scrollbar (reported during a page-turn slide) - the mushaf.js carousel's own translateX targets nested elements (.q-mushaf-body/.q-mushaf-drag-layer, both already overflow:hidden, own rules further below), but the *document's* own scrollable width is what an actual browser scrollbar reflects, not a nested div's - clipping only at the nested level left this still reachable if any of that transform math ever overshoots. overflow-y explicit (not left to default alongside overflow-x) - the CSS Overflow spec forces the *other* axis to auto the moment only one of x/y is set to something other than visible, which would turn the whole document into its own accidental vertical scroll container instead of the normal one (own past incident: reader vertical scroll needing 2 gestures to "escape" it, stuck unable to scroll back up on a page tall enough to hit that inner scrollbar - never repeat overflow-x alone here without pairing it). */ overflow-x: hidden; overflow-y: visible; /* Nothing on this page scrolls vertically anymore, mobile included (own fixed-height/paginated screens work, mushaf.js) - without this, a vertical-leaning touch drag still triggered the browser's own elastic rubber-band bounce at the document edge with nothing behind it to actually scroll into (reported: "il y a rien mais ça le fait"), since nothing here told it there was nothing left to scroll. */ overscroll-behavior-y: none; } /* Own report ("header partagé, même template partout, avec des exceptions dedans", mushaf.html): le
du site (base.html, Accueil/Réglages, header_start réactivé là-bas) est repris tel quel - mais #marks-scope (juste au-dessus) est un cadre 100dvh edge-to-edge : un header en flux normal le pousserait vers le bas et romprait l'immersion. Overlay fixe/transparent à la place, caché par défaut - même mécanique data-q-controls-visible que .q-mushaf-topleft/-topright (mushaf.js, hover desktop/tap-menu mobile), posée ici sur plutôt que .q-mushaf-frame seul (mushaf.js: l'attribut est maintenant posé sur les deux, ce header vit hors du cadre). */ body:has(.q-mushaf-immersive) > header { position: fixed; inset-inline: 0; top: 0; z-index: 40; /* Own report ("le background du header doit suivre le theme choisi") - var(--app-bg), plus transparent : mushaf.js pose maintenant .q-surah-reading-frame + les mêmes data-q-mushaf-theme/ -mode sur (own report là-bas), --app-bg (popover.css) cascade donc jusqu'ici. */ background: var(--app-bg); /* Own report ("la luminosité aussi") - même combo que .q-mushaf- scroll-fade un peu plus bas (déjà ce calcul pour le même problème : DOM-order laissait ce genre d'élément passer à côté du dim-scrim) : --q-mushaf-dim-amount et -brightness-pct sont mutuellement exclusifs (mushaf.js applyMushafBrightness, jamais les deux à la fois) donc les multiplier ensemble donne le bon résultat dans les deux sens (assombri OU éclairci) en une seule règle. Hérité de (own report là-bas) - le header vit hors du sous-arbre de frameEl, ne peut pas lire ses styles inline directement. */ filter: brightness(calc((1 - var(--q-mushaf-dim-amount, 0)) * var(--q-mushaf-brightness-pct, 100) / 100)); } /* Own report ("elargir le header, prendre plus de largeur") - la ligne du header (base.html) est bornée à max-w-4xl (56rem) partout par défaut, pensée pour les pages au contenu centré classique. #marks-scope (own règle plus bas) est lui edge-to-edge (pas de max-width, own report "true edge-to-edge") - même largeur ici, plus le padding-inline 1.5rem qui matche celui du cadre (.q-mushaf-frame, own règle plus bas) pour que les icônes tombent visuellement à la même distance du bord que le texte du Coran en dessous. */ body:has(.q-mushaf-immersive) > header > div { max-width: none; /* Own report ("le titre doit etre aligné avec /ar/s/1"): padding symétrique (1.5rem des 2 côtés), partagée par les 3 colonnes de la grille (1fr auto 1fr) - la retoucher déplace aussi le centrage de la colonne titre (own report précédent : essai à 1rem/1.5rem avait décalé le titre de ~4px). */ padding-inline: 1.5rem; } /* Own report ("aligner Accueil avec la flèche sans toucher au centrage du titre"): marge négative sur le lien lui-même plutôt que sur le padding de la ligne - Accueil est déjà le dernier de la ligne côté bord (RTL, own comment plus haut sur ce flux naturel), rien d'autre ne dépend de sa position pour se caler ; ni le padding de la ligne (donc le calcul 1fr/auto/1fr du titre) ni la position des autres icônes du groupe (elles restent groupées entre elles à sa gauche) ne bougent. -0.5rem = 1.5rem (padding réel) - 1rem ([data-q-mushaf-prev], mesuré en direct comme le premier essai). Desktop only (>=1024px) - own report ("home mal aligné avec la home page sur mobile") : [data-q-mushaf-prev] est display:none sous 1024px (own rule plus bas), plus rien à aligner dessus - cette marge négative décalait le lien sans raison sur mobile, désaligné vs. le même Accueil sur /ar/s et /ar/s/1. */ @media (min-width: 1024px) { body:has(.q-mushaf-immersive) > header a[href="/ar/"] { margin-inline-start: -0.5rem; } } /* Own report ("je vois bien le deplacement horizontale"): le vrai décalage venait du padding de la ligne (own règle plus haut, padding-inline: 1.5rem, forcé sans media query pour matcher le cadre de lecture) - base.html lui-même est en px-3 (0.75rem) sous 1024px (lg:px-6 seulement à partir de là), donc Accueil tombait 0.75rem plus loin du bord ici que sur /ar/, /ar/s, /ar/s/1 en mobile. Même technique que la règle desktop ci-dessus (marge négative sur le lien seul, jamais le padding de la ligne - le titre resterait décentré sinon) mais mobile: -0.75rem = 1.5rem - 0.75rem. */ @media (max-width: 1023.98px) { body:has(.q-mushaf-immersive) > header a[href="/ar/"] { margin-inline-start: -0.75rem; } } /* Own report ("les ids doivent etre generiques, meme nommage partout"): plus de #q-mushaf-header-right-icons/-left-icons (id page-spécifique redondant, mushaf.html) - #q-header-col-start/-col-end (base.html, mêmes ids que /ar/s et /ar/s/1) ciblés directement. Own report ("le titre doit rester toujours affiché comme avant, seules les icones suivent le hover") - opacity posée sur ces 2 colonnes seulement, pas sur le
entier : la colonne centrale (header_title, base.html) n'est jamais ciblée, reste donc toujours opacity:1 - même comportement que l'ancien .q-mushaf-title "toujours visible", juste repositionné. Accueil (#q-header-col-start) suit maintenant le même hover que les icônes Notes/Sourates/Aller à la page/Signets à côté de lui - même groupe, même colonne, own report ("a la place du reglage..."). */ body:has(.q-mushaf-immersive) > header #q-header-col-start, body:has(.q-mushaf-immersive) > header #q-header-col-end { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } html[data-q-controls-visible] body:has(.q-mushaf-immersive) > header #q-header-col-start, html[data-q-controls-visible] body:has(.q-mushaf-immersive) > header #q-header-col-end, body:has(.q-mushaf-immersive) > header #q-header-col-start:focus-within, body:has(.q-mushaf-immersive) > header #q-header-col-end:focus-within { opacity: 1; pointer-events: auto; } /* Own report ("il faut respecter l'ordre comme c'etait"): Partager/ Thèmes/Lecture/Signet (ex-.q-mushaf-topright) forçaient déjà direction:ltr sur leur conteneur pour garder cet ordre visuel exact quelle que soit la langue - #q-header-col-end (base.html, partagé avec les autres pages) reprend ce même forçage, mais scopé à /ar/c seulement (body:has(.q-mushaf-immersive)) pour ne pas affecter les autres pages qui utilisent aussi cet id. #q-header-col-start (Accueil + Notes/Sourates/Aller à la page/Signets, ex-.q-mushaf-topleft) n'avait lui aucun forçage - reste sur le flux RTL naturel, déjà correct par défaut, comme sur toutes les autres pages. */ body:has(.q-mushaf-immersive) > header #q-header-col-end { direction: ltr; } /* Own report ("sur mobile ça affiche les icônes du Desktop au lieu du menu, juste l'icône home"): le hover ci-dessus (opacity/pointer-events) ne masque rien sur tactile - un 1er tap sur le
déclenche le mouseenter synthétique iOS/Android (élément avec listener hover mais pas de vrai :hover), qui affichait tout le groupe desktop au lieu du menu tap habituel (Sourates/Notes/Aller à la page/Signets/Partager/ Thèmes/Lecture/Langue/Signet - déjà tous couverts par [data-q-mushaf-mobile-menu], own comment plus bas). Accueil reste seul visible en permanence (pas de popover, pas de doublon dans le menu tap) - même sort que .q-mushaf-topleft/-topright avant lui (own comment plus bas, display:none mobile). */ @media (max-width: 1023.98px) { body:has(.q-mushaf-immersive) > header #q-header-col-start { opacity: 1; pointer-events: auto; } body:has(.q-mushaf-immersive) > header #q-header-col-start button, body:has(.q-mushaf-immersive) > header #q-header-col-end { display: none; } } /* .q-mushaf's own max-width: 60rem (below, desktop) still capped the reading column even with #main-content's own constraint gone above - same override, one level deeper. */ .q-mushaf-immersive .q-mushaf { max-width: none; } /* The frame itself still looked like a card floating on the page (rounded corners/border/shadow, 80-95vh leaving a visible strip of page background top/bottom) even once #main-content/.q-mushaf stopped constraining its width - defeats the actual point of dropping the header/footer. True edge-to-edge here: no border/radius/shadow left to read as "a box sitting on a page", full 100vh so nothing of the site shows around it at all. #marks-scope (.q-mushaf-frame's own id), not just the class - several later theme/dark-mode rules below restyle border/box-shadow on ".q-mushaf-frame" combined with just one other class/attribute each, tying this rule's own specificity and then winning on source order alone; anchoring on the id here beats all of those regardless of where they sit in the file. */ .q-mushaf-immersive #marks-scope { border: 0; border-radius: 0; box-shadow: none; /* height (not min-height) + overflow:hidden, mobile and desktop alike now - a page too tall for one screen paginates internally (mushaf.js goToMushafScreen) instead of growing this box past the viewport, own ID specificity otherwise silently overriding .q-mushaf-frame's plain-class height further below. 100dvh, not 100vh - the static unit sizes against the browser chrome's largest possible state (address bar collapsed), taller than the actually-visible area whenever it's showing on mobile - the exact shape of the "petit scroll vertical" reported here. */ height: calc(100dvh - 3.625rem); margin-top: 3.625rem; overflow: hidden; } @media (min-width: 1024px) { .q-mushaf-immersive #marks-scope { height: calc(100dvh - 4.375rem); margin-top: 4.375rem; } } /* Verse-number badge, copied from karaoke.css's own .q-verse-number rule (that file no longer loads here - see mushaf.html's extra_head comment) - same small-font/faded/baseline-shifted look every other verse-number badge on the site uses. */ .q-verse-number { font-size: 0.78em; opacity: 0.65; position: relative; top: -0.1641em; margin-inline-start: 0.2em; margin-inline-end: 0.2em; } .q-mushaf { position: relative; /* anchors .q-mushaf-jump-popover below */ margin: 0 auto; /* mushaf.js scrolls here (__qScrollIntoView, block:'start') on every page turn - without this, the frame's own top edge lands flush against the viewport's top edge, no breathing room above the title/topright menu. No sticky header on this site to clear, just cosmetic space. */ scroll-margin-top: 1.5rem; } /* Fade mask at .q-mushaf-body's own top inner edge (mushaf.html) - that box's overflow:hidden (own comment further below) is what actually clips [data-q-mushaf-slot]/.q-mushaf-drag-layer during a page turn, so a screen too tall or a drag mid-flight shows its first row sliced clean by that edge instead of fading out. This gradient (--app-bg, the same themed paper colour as the reading surface - re-declared per- theme on .q-mushaf-frame further below, same trick as --app-surface/--app-text there) softens it. Positioned against .q-mushaf-body itself (own position:relative further below, already there for .q-mushaf-drag-layer) so it's clipped by the same overflow:hidden box rather than needing its own. pointer-events:none so it never blocks the edge buttons/slot under it; last in source order (mushaf.html) is what puts it visually above the slot/drag-layer siblings, no z-index needed on top of that. */ .q-mushaf-scroll-fade { position: absolute; top: 0; inset-inline: 0; height: 1.35rem; /* .q-mushaf-dim-scrim ("Intensité" below 100%, mushaf.js) never actually darkens this gradient - same DOM-order stacking that deliberately keeps topleft/topright/edge buttons above the scrim (own comment there) applies to this element too, purely by accident (own report: read wrong/mismatched against the dimmed page around it once lowered, in every theme). --q-mushaf-dim- amount (mushaf.js applyMushafBrightness) mirrors the scrim's own opacity value, applied here directly instead of fighting that stacking order. */ filter: brightness(calc(1 - var(--q-mushaf-dim-amount, 0))); /* Full opacity right at the clip edge (0%) - a translucent edge still let the sliced sliver show through, same hard line just dimmed. 3 stops, not 2 - a plain 2-stop fade read as its own visible band (linear opacity drop-off isn't how the eye perceives fade), the extra 55% mid-stop eases it out instead. */ background: linear-gradient(to bottom, var(--app-bg) 0%, color-mix(in srgb, var(--app-bg) 45%, transparent) 55%, transparent 100%); pointer-events: none; } .q-mushaf-scroll-fade-bottom { top: auto; bottom: 0; background: linear-gradient(to top, var(--app-bg) 0%, color-mix(in srgb, var(--app-bg) 45%, transparent) 55%, transparent 100%); } /* Desktop only for now (1024px, same lg breakpoint the rest of the site uses) - mobile/tablet sizing still undecided, left at its plain full-width default rather than guessing a value here too. Wider than the single-column width used to be: room for the two-column spread below (.q-mushaf-frame's own column-count), not just one block of text. */ @media (min-width: 1024px) { .q-mushaf { max-width: 60rem; } } .q-mushaf-topright { /* Real grid child of .q-mushaf-header now (own rule further below), not an absolute offset guessing where the frame's padding put the title. grid-row explicit too - the 3 items' auto-placement cursor didn't keep them on one shared implicit row on its own (confirmed empirically: title landed on row 1, this + topleft both landed on row 2 instead), so all 3 pin grid-row:1 outright. */ grid-column: 3; grid-row: 1; justify-self: end; direction: ltr; display: flex; justify-content: flex-end; gap: 0.125rem; } /* Opacity lives on each button, not the row itself (unlike .q-mushaf-topleft below) - a group-level opacity:0 would flatten every child to invisible regardless of its own opacity, no way for the bookmarked-page override right after this to ever win. */ .q-mushaf-topright .q-mushaf-icon-btn { opacity: 0; transition: opacity 0.15s ease; } /* data-q-controls-visible, not :hover - mushaf.js toggles this on mousemove/mouseenter and clears it after a short idle timeout even while still hovering the frame (plain :hover can't express "idle", only "pointer is/isn't over the element"). :focus-visible (per button, not :focus-within on the row) is a separate, permanent trigger for reaching these by keyboard - deliberately *not* :focus-within: a plain mouse click also focuses a