/* Custom player for surah_detail.html (#q-surah-player) - progress bar with elapsed/remaining time, prev/play-pause/next controls, volume bar. Reuses --app-* tokens (staticsrc/input.css :root), same as karaoke.css/player.css, so it matches both light and dark themes without its own color values. */ /* tailwind.css reserves body { padding-bottom: 60px + safe-area } site- wide below 1024px for .q-bottombar - which isn't actually rendered anywhere in the codebase currently (no template uses that class at all), so this page was inheriting dead reserved space it can't use:
itself is already a hard h-[100dvh] (own main_class block), plus this padding pushed taller than one viewport, making the whole page scroll that little bit on mobile (own report: "la page est tjs scrollable verticalement" - iPhone 13 Pro) even though #q-karaoke-lines is the only thing actually meant to scroll. Same fix mushaf.css already applies for its own immersive layout (body:has(.q-mushaf-immersive)), scoped here off #q-karaoke-root instead since this page has no equivalent wrapper class of its own. */ body:has(#q-karaoke-root) { padding-bottom: 0; } /* Own report ("il y a de l'espace en bas... faire descendre") - mobile only, desktop jamais évoqué/touché.
's own py-6 (main_class) reserved 24px below the mobile share row for real content (own report found: #q-surah-footer, empty spacer div now removed) - 16px matches /ar/s's own #q-mini-player-mobile-bar bottom padding (surah_list.html), same reasoning. */ @media (max-width: 1023px) { body:has(#q-karaoke-root) #main-content { padding-bottom: 2rem; } } /* Own report ("elargir le header de sorte que le titre s'aligne avec le texte du Coran") - la ligne du header (base.html) est bornée à max-w-4xl/px-3/px-6 par défaut (pensée pour les pages au contenu centré classique) -
ici est max-w-7xl px-6 (own main_class), même largeur/padding repris ici pour que le titre (colonne de départ de la grille, header_start/surah_detail.html) tombe exactement au même bord que le texte de la sourate en dessous. Desktop only (>=1024px, own report "home pas aligné avec la home page sur mobile") - base.html est en px-3 (0.75rem) sous 1024px (lg:px-6 seulement à partir de là) ; forcer 1.5rem ici aussi décalait Accueil (#q-header-col-start) de ce même écart vs. les autres pages en mobile, et le titre a de toute façon quitté cette ligne large sur mobile (colonne centrale, surah-player.js) - l'alignement avec le texte ci-dessus ne concerne donc plus que le desktop. */ @media (min-width: 1024px) { body:has(#q-karaoke-root) > header > div { max-width: 80rem; padding-inline: 1.5rem; } /* own bug trouvé sur /fr/s/1 (UI non-ar) : le titre (colonne de départ, justify-self-start) suivait le `direction` du document (ltr hors arabe) et tombait à gauche au lieu de droite - cette grille place ses colonnes par `direction`, pas par langue du texte qu'elle affiche (CSS Grid, comme #q-karaoke-root plus bas, own comment "afficher le LTR comme le RTL"). Le texte du Coran est toujours à droite quelle que soit la langue de l'interface - même correctif ici : direction:rtl forcé sur CETTE grille précisément (.grid, pas juste "header > div"), col-start (le titre) atterrit physiquement à droite dans tous les cas. own erreur vécue juste avant : "header > div" sans le .grid matchait aussi #q-settings-header (sibling direct de
, le menu Lecture/traduction) et lui renversait sa direction par erreur - .grid cible uniquement la ligne de titre, jamais ce menu. */ body:has(#q-karaoke-root) > header > div.grid { direction: rtl; } } /* Own report ("la premiere lettre du titre doit etre au meme niveau que la premiere lettre d'une ligne du texte") - #q-karaoke-lines a son propre px-6 (24px, template) qui insète le texte depuis SON bord à lui, en plus du padding de la ligne du header ci-dessus - sans ce même écart ici, le titre (aligné sur le bord de la ligne, own report précédent) tombait 24px trop loin par rapport au vrai début du texte. margin (pas padding) - un padding à l'intérieur du h1 aurait faussé son propre max-w-[10rem]/truncate (template). Desktop only (>=1024px, own report "le titre doit etre parfaitement centré ... sur mobile") - le h1 vit maintenant dans la colonne centrale sur mobile (surah-player.js, #q-header-col-title), un item flex centré par justify-content:center (base.html) : cette marge y aurait juste recassé le centrage en le poussant d'un côté, sans plus aucun bord de ligne de texte à aligner dessus vu qu'il n'est plus dans la colonne de départ à cette largeur. */ @media (min-width: 1024px) { body:has(#q-karaoke-root) #q-surah-header { /* margin-inline-START (pas -end) - en RTL, inline-start = bord physique droit (own erreur vécue : -end poussait le côté gauche de la boîte, sans effet sur le bord droit qu'il fallait rentrer). */ margin-inline-start: 1.5rem; } } /* #q-karaoke-root's own layout (surah_detail.html) - named grid areas instead of the old plain 2-col Tailwind grid (grid-cols-1 lg:grid-cols-[2fr_1fr]). Just 3 areas now - #q-surah-header-actions (own report: Accueil/Favoris/"..." row, used to live inside #q-surah-player itself) isn't one of them: surah-player.js physically moves that element between #q-surah-header (mobile, own CSS below floats it beside the h1) and #q-surah-player-col (desktop, where it becomes the top of the same centered flex-column as the rest of the player) depending on viewport - no clean way to get one CSS-only layout to both "beside the title" (mobile) and "grouped with the player, centered as a unit" (desktop) without either duplicating the element or moving it, and duplicating it re-opens the exact querySelector-first-match bug already hit and fixed once this session (see surah-player.js's own comment there). */ #q-karaoke-root { display: grid; grid-template-columns: 1fr; /* 1fr on the text row (not auto) - #q-karaoke-lines's own h-full/ overflow-y-auto (own scrollable reading column,
itself is h-[100dvh] overflow-hidden, base.html) needs a *definite* row height to resolve against, not "auto" (percentage height against an auto-sized track computes as auto - own report: text silently stopped scrolling without this). */ grid-template-rows: 1fr auto; grid-template-areas: "text" "player"; row-gap: 1rem; /* No overflow-x here anymore (own report, real re-check after the Sourates/sleep-timer popovers turned out to still be clipped despite the old overflow-x:hidden/overflow-y:visible pair below) - that pairing does NOT work the way the previous comment here claimed: per the CSS Overflow spec, whenever one axis is anything but visible, the *other* axis's used value is forced to auto too, regardless of what's actually authored on it - "overflow-y: visible" next to "overflow-x: hidden" still computes to overflow-y:auto (verified live, getComputedStyle), silently turning this grid row into a real clipping/scroll container at its own (content-sized "player" track) height. That's what was eating the bottom of both popovers - not
's own h-[100dvh] overflow-hidden (surah_detail.html main_class), which sits well below them. Moved the actual horizontal guard onto #q-karaoke-lines instead (below) - the only track that can ever be forced wider by an unbreakable Arabic run - where it pairs with that element's own already-non-visible overflow-y:auto, so there's no "one visible / one not" mismatch left to coerce. */ } #q-karaoke-lines { grid-area: text; min-width: 0; /* overflow-x:hidden moved here from #q-karaoke-root (own report, comment above) - safe here specifically because overflow-y is already non-visible (Tailwind's own overflow-y-auto, template), so both axes agree and neither gets silently coerced. */ overflow-x: hidden; } #q-surah-player-col { grid-area: player; min-width: 0; /* Own report: #q-surah-header-actions (desktop: moved here, first child, by surah-player.js) + the rest of the player centered as one group within this area's own full (grid-stretched) height, not stuck at its own top. */ justify-content: center; opacity: 1; /* Own report: the Sourates/sleep-timer popovers (.q-surah-popover, position:absolute) had no positioned ancestor anywhere inside
- their containing block fell all the way back to , so opening one could grow 's own scrollable height (a real page scroll) even though
's h-[100dvh] overflow-hidden (surah_detail.html main_class) was clipping them visually at the same time - clipped AND still creating a scroll past it. Anchoring them here instead keeps their box inside
's own clipped bounds, so there's nothing left outside it to scroll to. */ position: relative; } /* Ex-règle mobile (#q-surah-header-actions "rejoint le h1") retirée - own report ("le titre doit etre parfaitement centré ... sur la meme ligne que les icons") : le h1 (colonne centrale, #q-header-col-title) et Accueil/"..." (colonnes #q-header-col-start/-col-end) sont maintenant 3 vrais enfants séparés de la même grille (base.html, surah-player.js) - plus de "rejoindre le h1", ce dernier ne les contient plus du tout sur mobile, rien à styler ici en plus. */ @media (min-width: 1024px) { #q-karaoke-root { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr; grid-template-areas: "text player"; /* Own report: "afficher le LTR comme le RTL" - CSS Grid places columns per the container's own `direction` (unlike flexbox's default), so this 2-col split used to flip between languages (text/player swapping sides with html[dir]) even though the Quran text itself is always Arabic/RTL regardless of UI language. Forced rtl here keeps text on the right / player on the left for every language - the per-element dir="rtl" on the actual Arabic runs (verse

, h1...) already handles their own script direction independently of this. */ direction: rtl; } /* own bug trouvé: direction:rtl juste au-dessus est HÉRITÉ par tout #q-surah-player-col en dessous (`direction` est une propriété héritée, CSS Writing Modes) - ça rendait #q-surah-menu-popover et #q-mushaf-surah-popover (tous deux .q-surah-popover ici - mushaf.html a sa propre copie de #q-mushaf-surah-popover SANS cette classe, jamais concernée par ce sélecteur) ainsi que tous leurs sous-menus (surah-reciter-menu, q-surah-reading-submenu, q-surah-accessibility-submenu, q-surah-share-submenu) RTL même en langue non-arabe, alors que ce sont de vrais menus d'UI (pas du texte coranique) qui doivent suivre la langue de l'interface. own erreur juste avant: reset sur #q-surah-player-col en entier cassait aussi la mise en page du lecteur (barre de progression, prev/play/ next) - CE lecteur-là garde volontairement le même agencement physique quelle que soit la langue (même logique que le texte), seuls ces popovers/sous-menus (vraie UI/wording) ont besoin de suivre le dir réel du document. */ html[dir="ltr"] .q-surah-popover { direction: ltr; } /* Own bug (suite immédiate du reset ci-dessus): .q-surah-menu-submenu (popover.css) s'ouvre avec `inset-inline-end: 100%` - une propriété LOGIQUE qui, une fois `direction` remis à ltr juste au-dessus, s'ouvrait à gauche au lieu de droite. Contrairement au texte/ wording (qui doit suivre la vraie langue), le CÔTÉ D'OUVERTURE du sous-menu fait partie de l'agencement physique volontairement identique quelle que soit la langue (own report: "doivent s'ouvrir à droite comme dans l'arabe") - valeur physique figée ici plutôt que logique, insensible au reset de direction ci-dessus. */ html[dir="ltr"] .q-surah-popover .q-surah-menu-submenu { inset-inline-end: auto; left: 100%; right: auto; } /* Own report: same width as #q-surah-player (max-w-xs, Tailwind's 20rem) so it starts/ends at the exact same edges as the player card below it, not the wider column's own edges - #q-surah- player-col's own items-center would otherwise center this at its own (narrower) natural width, landing it somewhere else entirely. justify-content:right, not flex-end/justify-end - a *physical* value (CSS Box Alignment, unlike flex-end/end which follow direction) so this lands on the right regardless of the RTL/LTR swap between languages (LANGUAGE_BIDI, base.html). */ #q-surah-header-actions { width: 100%; justify-content: right; } } /* Own report: "tu affiches #q-surah-header-actions sur mobile... il n'est pas affiché là-bas, il est déjà dans le header" - mobile moves its own children (Accueil/"...") out into the real site header (placeHeaderActions, surah-player.js), leaving this container empty, but nothing told it to actually disappear there in the meantime - whatever briefly showed through it before that JS ran (page paint racing the deferred script, a toast's own absolute box sitting near it) had a real, if empty, flex box to render into. Hidden outright on mobile instead of trusting JS timing to always empty it first. */ @media (max-width: 1023px) { #q-surah-header-actions { display: none; } } /* Mobile reading mode (surah-player.js) - fades out rather than snapping straight to [hidden], own class instead of relying on [hidden] alone since display:none can't be transitioned; JS actually sets [hidden] itself only after this finishes (or immediately when reduced motion applies, own report - CLAUDE.md, no motion at all there, not just a shorter one). */ .q-surah-player-col-fading { opacity: 0; /* Own report: "c'est sec" - plain opacity alone read as an abrupt cut even with the transition below. A slight downward slide on the way out (reversed on the way back in) reads as a real slide+fade instead. */ transform: translateY(0.5rem); } @media (prefers-reduced-motion: no-preference) { #q-surah-player-col { transition: opacity 0.3s ease, transform 0.3s ease; } } .q-surah-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 9999px; border: none; background: color-mix(in srgb, var(--app-text) 20%, transparent); color: var(--app-text); } .q-surah-btn:hover, .q-surah-btn:focus-visible { background: color-mix(in srgb, var(--app-text) 28%, transparent); } #q-play-btn { border-radius: 0; background: none; color: var(--app-sub); } #q-play-btn:hover, #q-play-btn:focus-visible { background: none; color: var(--app-text); } /* Prev/next: text (surah name) alongside the icon, not a plain circle - drop the pill background so the name below can read on its own line instead of getting boxed in. */ .q-surah-nav-btn { background: transparent; color: var(--app-sub); } /* Sourates/prev/play/next/minuterie, 5 columns x 2 rows (own report: "tableau sur deux lignes et 5 colonnes... deuxieme ligne colonne 2 et 4 sont les textes") - row 1 is icon-only in every column, row 2 only has content in prev/next's own columns (their surah-name label). A lone centered icon (Sourates/Play/Minuterie) and prev/ next's icon used to disagree on where "centered" means (prev/next's own label stacked underneath pushed its icon up, own report: "leurs icons ne sont pas alignes") - subgrid on the prev/next anchors below inherits this row's own row-1 track exactly, so their icon lands in the same slot every other column's icon centers in, by construction rather than by matched offsets. */ .q-surah-transport-row { display: grid; /* Cols 2/4 (next/prev) fixed at 4rem - same cap as their own name span's max-w-[4rem] (surah_detail.html) - own report: "quand je shuffle parfois le play, next et prev change de position": auto sizing shrinks each column to its *current* content's real width, not the 4rem cap, so a short shuffled name (vs a long one) moved col3/5 sideways every time. Fixed width holds them in place regardless of which name is showing. */ grid-template-columns: auto 4rem auto 4rem auto; grid-template-rows: auto auto; align-items: center; justify-content: space-between; } /* Own report ("/ar/s/1 desktop: le bouton mobile Partager/Sourates s'affiche et le clic ne fait rien") - .q-surah-transport-row's own unconditional display:grid above (no media query - it's ALSO used unconditionally, line 764 surah_detail.html) has the exact same specificity as Tailwind's lg:hidden utility (one class each) - surah-player.css loads *after* tailwind.css (base.html's own extra_head block sits below its own tailwind.css ), so this rule's display:grid always won the cascade regardless of viewport width, silently defeating lg:hidden on the *2nd* .q-surah-transport-row (line 834, the Partager/Sourates mobile-only copy) - visible AND clickable on real desktop widths, where the click then opened its submenu using __qSurahIsMobile()'s own (correctly desktop) code path - positioned relative to the "..." menu's own toggle, never actually opened, so the submenu rendered at zero size. Two classes here (0,2,0) beats the single-class rule above regardless of source order - scoped to the exact lg:hidden pairing so the *other* .q-surah-transport-row (no lg:hidden, meant to show at every width) is untouched. */ @media (min-width: 1024px) { .q-surah-transport-row.lg\:hidden { display: none; } } .q-surah-transport-col1 { grid-column: 1; grid-row: 1; } .q-surah-transport-col2 { grid-column: 2; } .q-surah-transport-col3 { grid-column: 3; grid-row: 1; } .q-surah-transport-col4 { grid-column: 4; } .q-surah-transport-col5 { grid-column: 5; grid-row: 1; } .q-surah-transport-row .q-surah-nav-btn { grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; justify-items: center; align-items: start; width: auto; height: auto; gap: 0; } .q-surah-transport-row .q-surah-nav-btn .q-surah-icon { grid-row: 1; align-self: center; } .q-surah-transport-row .q-surah-nav-btn span { grid-row: 2; align-self: start; margin-top: 0.25rem; /* Own report: descenders/diacritics of some Arabic surah names (التكوير, الحجر...) got clipped at the bottom - text-xs's own line-height (Tailwind, 1rem) left no room under the baseline for them. */ line-height: 1.3rem; } .q-surah-nav-btn:hover, .q-surah-nav-btn:focus-visible { background: transparent; color: var(--app-text); } .q-surah-icon { width: 1.75rem; height: 1.75rem; fill: currentColor; } .q-surah-nav-btn .q-surah-icon { width: 1.25rem; height: 1.25rem; } /* hx-disabled-elt (surah_detail.html) sets/clears this attribute on every player control (nav/popover/share/bookmark/play/seek/volume) while a prev/next/popover surah nav request is in flight. Real