/* ═══════════════ vlereader/css/reader.css ═══════════════ Aljam3-inspired layout — clean, minimal, RTL-first. Chalk & Ink / Slate & Ash / Warm Parchment themes via data-theme attribute. */ /* Urdu chrome font — self-hosted Noto Nastaliq Urdu. This file used to register Jameel Noori Nastaleeq (5.55 MB) and hand it to the [lang="ur"] chrome below. Nothing in this reader renders long-form Urdu: the book itself is PDF.js painting to canvas with the PDF's own embedded fonts, so those 5.55 MB bought a toolbar title, some sidebar rows and a settings panel. Jameel stays reserved for the article reader/writer in style.css, where there is actual prose. Self-hosted rather than pulled from fonts.googleapis.com on purpose: this reader serves OPFS-cached books offline, and a cross-origin font would fail in exactly the situation the offline reader exists for. It is also why this page loads no webfont stylesheet at all — which is the reason the 'Cairo', 'Amiri' and 'Noto Naskh Arabic' names in --font-arabic below have never resolved to anything and silently fall through to system-ui. 239 KB, variable (wght 400-700 in one file), and it covers what this chrome needs: Urdu letterforms, all ten Arabic-Indic digits U+0660-0669, and the Bismillah ligature — so the Kasheeda subset that used to be registered here for the digits is no longer needed either. Licensed under SIL OFL 1.1 — see OFL-NotoNastaliqUrdu.txt alongside the woff2. Downloaded from the Google Fonts arabic subset of Noto Nastaliq Urdu v23. */ @font-face { font-family: 'Noto Nastaliq Urdu'; src: url('/fonts/NotoNastaliqUrdu-arabic.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* Arabic chrome font — self-hosted Noto Naskh Arabic. This reader's default UI language is Arabic (), but its --font-arabic below named 'Cairo', 'Amiri' and 'Noto Naskh Arabic' while this page loads no webfont stylesheet at all — so none of the three ever resolved and every Arabic label in the toolbar, info panel, library sidebar and settings has silently rendered in system-ui since this file was written. 'Cairo' was doubly dead: the main site removed it long ago as unreferenced. Registering the face locally is what makes the declared stack real. Same reasoning as the Nastaliq face above — self-hosted, not fetched from fonts.googleapis.com, because this reader serves OPFS-cached books offline. 84 KB, variable (wght 400-700 in one file), 1,099 codepoints. The reader asks for 600 on .vl-book-title / .vl-info-value and 700 on the Urdu title, so the axis covers every weight actually used instead of synthesising them. Licensed under SIL OFL 1.1 — see OFL-NotoNaskhArabic.txt alongside the woff2 (a different Noto repo from the Nastaliq one, hence the second license file). Downloaded from the Google Fonts arabic subset of Noto Naskh Arabic v33. */ @font-face { font-family: 'Noto Naskh Arabic'; src: url('/fonts/NotoNaskhArabic-arabic.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* ── CSS Variables ── */ :root { /* Light mode — "Chalk & Ink" */ --bg: #F6F4EF; --bg-surface: #FFFFFF; --bg-elevated: #ECE8DC; --text: #232019; --text-secondary: #4B4740; --text-muted: #736F64; --border: #E1DDD1; --accent: #26251F; --accent-hover: #3D3C35; /* Stacking Context Tokens */ --z-index-base: 10; --z-index-tabs: 90; --z-index-topbar: 100; --z-index-navbar: 150; --z-index-dropdown: 200; --z-index-overlay: 1000; --z-index-toast: 3000; --z-index-tooltip: 4000; --progress-color: #16a34a; /* Vibrant emerald green for light mode */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --radius: 8px; --font: 'Segoe UI', system-ui, -apple-system, sans-serif; /* Noto Naskh Arabic first, and now actually registered above so it resolves. 'Cairo' dropped — never loaded here, and removed from the main site as unreferenced. 'Amiri' kept only as a local-install courtesy; it is not self-hosted, so it resolves only for readers who have it on their system. Matches the main site's --font-arabic ordering in style.css. */ --font-arabic: 'Tajawal', 'Noto Naskh Arabic', sans-serif; --topbar-h: 44px; --tabbar-h: 34px; --toolbar-h: 40px; --navbar-h: 60px; /* reserved clearance above the floating page-nav pill (pill height + its floating offset) */ --sidebar-w: 260px; } [lang="ur"] { --font-arabic: 'Noto Nastaliq Urdu', serif; --font: 'Noto Nastaliq Urdu', serif; --topbar-h: 48px; --navbar-h: 64px; line-height: 2.65; } [lang="ur"] .vl-book-title { font-family: var(--font) !important; font-size: 20px !important; line-height: 2.1 !important; font-weight: 700 !important; padding: 2px 0 4px 0; } [lang="ur"] .vl-lib-row-title { font-family: var(--font) !important; font-size: 20px !important; line-height: 2.1 !important; font-weight: 700 !important; padding: 2px 0 4px 0; } [lang="ur"] .vl-lib-row-sub, [lang="ur"] .vl-info-value, [lang="ur"] .vl-info-label { font-family: var(--font) !important; color: var(--text) !important; font-weight: 600 !important; font-size: 18px !important; line-height: 2.2 !important; padding: 2px 0; } /* Secondary reading-relevant text (modal headers, search, chips, settings, dialogs, tooltips) — left at the Latin-tuned 11-14px base before this, which is especially hard to read in Nastaliq's diagonal, connected script. All of these sit in auto-height containers (modal, sheet, floating tooltip/dialog), not the fixed-height toolbar bars, so growing them doesn't clip anything. */ [lang="ur"] .vl-lib-head h3, [lang="ur"] .vl-dialog h3 { font-family: var(--font) !important; font-size: 20px !important; } [lang="ur"] .vl-lib-search input, [lang="ur"] .vl-lib-chip, [lang="ur"] .vl-lib-crumb, [lang="ur"] .vl-settings-btn, [lang="ur"] .vl-share-btn, [lang="ur"] .vl-annot-tool-name, [lang="ur"] .vl-tip-main { font-family: var(--font) !important; font-size: 16px !important; } [lang="ur"] .vl-settings-h, [lang="ur"] .vl-more-header, [lang="ur"] .vl-lib-loading, [lang="ur"] .vl-lib-empty, [lang="ur"] .vl-outline-empty, [lang="ur"] .vl-dp-label, [lang="ur"] .vl-dp-val, [lang="ur"] .vl-tip-sub { font-family: var(--font) !important; font-size: 14px !important; } [data-theme="dark"] { /* Dark mode — "Slate & Ash" */ --bg: #1C1B19; --bg-surface: #242220; --bg-elevated: #2A2825; --text: #E8E4DA; --text-secondary: #BBB7AC; --text-muted: #8E897D; --border: #39362F; --accent: #B8B3A8; --accent-hover: #C8C3B8; --progress-color: #22c55e; /* Bright green for dark mode */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.25); --shadow-md: 0 4px 12px rgba(0,0,0,0.35); } [data-theme="sepia"] { /* Reading mode — "Warm Parchment" */ --bg: #DDD4C0; --bg-surface: #E8E0CC; --bg-elevated: #D2C7AC; --text: #2B2A27; --text-secondary: #46423C; --text-muted: #615B51; --border: #C7BC9F; --accent: #4A4844; --accent-hover: #3A3834; --progress-color: #15803d; /* Rich green for sepia mode */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.07); --shadow-md: 0 4px 12px rgba(0,0,0,0.09); } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.5; } button { font-family: inherit; cursor: pointer; } input { font-family: inherit; } a { color: var(--accent); text-decoration: none; } .hidden { display: none !important; } /* ── Aljam3-style Progress Bar ── */ .vl-progress-bar { position: absolute; top: calc(var(--topbar-h) + var(--tabbar-h)); left: 0; height: 3px; background: var(--progress-color); z-index: 200; transition: width 0.3s ease-out; border-radius: 0 2px 2px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 6px var(--progress-color); } /* ── Top Bar ── */ .vl-topbar { height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border); z-index: 100; position: relative; } .vl-topbar-left, .vl-topbar-right { display: flex; align-items: center; gap: 8px; } /* Let the title shrink so the (now larger) right button cluster — ⚙ bookmark ⋮ ⬇ ✕ — always stays on-screen instead of pushing the topbar wider. */ .vl-topbar-left { flex: 1 1 auto; min-width: 0; } .vl-topbar-right { flex: 0 0 auto; } .vl-topbar-left .vl-book-title { max-width: 100%; min-width: 0; } .vl-book-title { font-family: var(--font-arabic); font-size: 14px; font-weight: 600; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vl-page-indicator { font-size: 12px; color: var(--text-secondary); font-weight: 600; white-space: nowrap; } /* ── Main Layout ── */ /* dvh so the bottom nav isn't hidden under a mobile browser's URL bar (vh includes the retracting chrome). vh kept as a fallback for old browsers. */ .vl-main-layout { display: flex; height: calc(100vh - var(--topbar-h) - var(--tabbar-h) - 3px); height: calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 3px); position: relative; } /* ── Sidebar ── */ .vl-sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--bg-surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; transition: margin 0.25s ease, width 0.25s ease; } .vl-sidebar.closed { margin-right: calc(var(--sidebar-w) * -1); } .vl-sidebar-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg-elevated); } .vl-sidebar-tab { flex: 1; padding: 10px 1px; text-align: center; font-size: 11px; font-weight: 600; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); cursor: pointer; font-family: var(--font-arabic); transition: all 0.15s ease; white-space: nowrap; overflow: hidden; text-overflow: clip; } .vl-sidebar-tab:hover { background: rgba(0, 0, 0, 0.04); color: var(--text); } [data-theme="dark"] .vl-sidebar-tab:hover { background: rgba(255, 255, 255, 0.06); } .vl-sidebar-tab.active { color: var(--accent); background: var(--bg-surface); border-bottom-color: var(--accent); font-weight: 700; } .vl-sidebar-content { flex: 1; overflow-y: auto; padding: 8px; } .vl-sidebar-content.hidden { display: none; } /* Thumbnails */ .vl-thumbnail-grid { display: flex; flex-direction: column; gap: 8px; } .vl-thumb-item { cursor: pointer; border: 2px solid transparent; border-radius: 4px; overflow: hidden; transition: border-color 0.15s; background: var(--bg); } .vl-thumb-item:hover, .vl-thumb-item.active { border-color: var(--accent); } .vl-thumb-item canvas { display: block; width: 100%; height: auto; } .vl-thumb-label { font-size: 11px; text-align: center; padding: 4px; color: var(--text-secondary); font-weight: 600; } /* Info tab */ .vl-info-row { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px; } .vl-info-label { color: var(--text-muted); font-family: var(--font-arabic); } .vl-info-value { color: var(--text); font-weight: 600; font-family: var(--font-arabic); max-width: 55%; text-align: left; overflow: hidden; text-overflow: ellipsis; } /* ── Viewer Wrapper ── */ .vl-viewer-wrapper { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; } /* ── Primary Toolbar ── */ .vl-toolbar { height: var(--toolbar-h); min-height: var(--toolbar-h); display: flex; align-items: center; padding: 0 8px; gap: 2px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .vl-toolbar::-webkit-scrollbar { display: none; } .vl-toolbar-group { display: flex; align-items: center; gap: 2px; } .vl-toolbar-sep { width: 1px; height: 20px; background: var(--border); margin: 0 6px; flex-shrink: 0; } .vl-toolbar-spacer { flex: 1; } .vl-zoom-label { font-size: 13px; font-weight: 700; color: var(--text); min-width: 44px; text-align: center; user-select: none; } /* ── Page Image Toolbar ── */ .vl-page-toolbar { display: flex; align-items: center; padding: 4px 12px; gap: 4px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); font-size: 12px; overflow-x: auto; } /* ── Buttons ── */ .vl-btn-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 6px; color: var(--text-secondary); transition: all 0.15s; flex-shrink: 0; position: relative; } .vl-btn-icon:hover { background: rgba(0,0,0,0.06); color: var(--text); } .vl-btn-icon:active { background: rgba(0,0,0,0.1); } [data-theme="dark"] .vl-btn-icon:hover { background: rgba(255,255,255,0.08); } [data-theme="dark"] .vl-btn-icon:active { background: rgba(255,255,255,0.12); } .vl-btn-text { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); font-size: 12px; font-family: var(--font-arabic); transition: all 0.15s; white-space: nowrap; position: relative; } .vl-btn-text:hover { background: rgba(0,0,0,0.04); color: var(--text); } /* Button done-status (checkmark after copy/download) */ .vl-btn-done { color: #27ae60 !important; border-color: #27ae60 !important; transition: all 0.3s ease; } /* ── Main Viewer ── */ .vl-viewer { flex: 1; overflow: auto; background: #525659; display: flex; flex-direction: column; align-items: center; padding: 16px 16px calc(var(--navbar-h) + 16px); gap: 8px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; } .vl-viewer::-webkit-scrollbar { width: 8px; } .vl-viewer::-webkit-scrollbar-track { background: transparent; } .vl-viewer::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; } /* Welcome / empty state */ .vl-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: rgba(255,255,255,0.5); font-family: var(--font-arabic); text-align: center; gap: 8px; } .vl-welcome-icon { opacity: 0.5; } .vl-welcome-sub { font-size: 12px; opacity: 0.6; font-family: monospace; direction: ltr; } /* Page containers */ .vl-page-wrap { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.35); flex-shrink: 0; position: relative; margin: 0 auto; } .vl-page-wrap canvas { display: block; } /* ── Skeleton Loading (Aljam3-style animate-pulse) ── */ .vl-skeleton { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; width: 100%; } .vl-skeleton-page { width: min(100%, 600px); height: 800px; background: rgba(255,255,255,0.08); border-radius: 4px; animation: vl-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .vl-skeleton-page:nth-child(2) { animation-delay: 0.15s; } .vl-skeleton-page:nth-child(3) { animation-delay: 0.3s; width: min(98%, 590px); } @keyframes vl-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } /* Loading spinner */ .vl-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; color: rgba(255,255,255,0.7); gap: 12px; } .vl-spinner { width: 36px; height: 36px; border: 3px solid rgba(255,255,255,0.2); border-top-color: rgba(255,255,255,0.8); border-radius: 50%; animation: vl-spin 0.8s linear infinite; } @keyframes vl-spin { to { transform: rotate(360deg); } } /* ── Text Layer for PDF.js ── */ .textLayer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; opacity: 1; line-height: 1; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 2; } .textLayer > span { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; } .textLayer ::selection { background: rgba(0, 0, 255, 0.25); color: transparent; } /* ── Bottom Navigation Bar ── Floats as a self-contained pill over the page instead of a full-width strip with a border line — the reserved 100%-wide row (and the line across it) was unwanted screen space. Absolutely positioned within .vl-viewer-wrapper (position:relative) so it overlaps the viewer instead of pushing it up; the viewer's own bottom padding (calc(var(--navbar-h) + Npx), above) keeps the last page from disappearing under it. */ .vl-navbar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; box-shadow: var(--shadow-md); z-index: 150; /* The reading bar only holds page navigation now. Prevent it from wrapping to a second row on narrow mobile screens (320px). */ flex-wrap: nowrap; max-width: 95vw; border-radius: 999px; /* The icons here follow the universal back/forward convention (<< < is "backward", > >> is "forward") regardless of what language the book or the UI is in, and the page pill must always read "current / total" in that left-to-right order. Pin ltr unconditionally so (which l10n.js flips per UI language) can't reverse either one. */ direction: ltr; } /* Groups the reading bar into zoom | navigation | marks. Hidden under 480px, where the bar wraps and the rule would just eat width. */ .vl-navbar-sep { width: 1px; align-self: stretch; margin: 2px 2px; background: var(--border); flex-shrink: 0; } .vl-navbar .vl-toolbar-group { display: flex; align-items: center; gap: 2px; } /* Bookmarked / annotated page — same affordance the sidebar buttons use. */ .vl-navbar .vl-btn-icon.active { color: var(--accent); } /* ─── Immersive reading: auto-hide chrome ─── After a few idle seconds (or a tap on the page) most of the reader chrome — top bar, tab strip, toolbar, page-image toolbar — slides away so the PDF page fills the screen. Same pattern as the main site's reader (app.js hideReaderChrome/showReaderChrome). Driven by body.vl-chrome-hidden (Features.showChrome/hideChrome/toggleChrome in features.js); a clean tap on the page restores everything, another tap hides it again. Each element is anchored to its own normal-flow position (not just top:0/bottom:0) so switching to position:absolute doesn't make it jump before sliding away. The floating page-nav pill (.vl-navbar) is deliberately NOT part of this list — page navigation should stay reachable at all times (auto-hide or manual tap alike), so it keeps floating regardless of chrome-hidden state. */ .vl-topbar, .vl-tabstrip, .vl-toolbar, .vl-page-toolbar { transition: transform 0.25s ease, opacity 0.25s ease; } body.vl-chrome-hidden .vl-topbar { position: absolute; top: 0; left: 0; right: 0; transform: translateY(-100%); opacity: 0; pointer-events: none; } body.vl-chrome-hidden .vl-tabstrip { position: absolute; top: var(--topbar-h); left: 0; right: 0; transform: translateY(-100%); opacity: 0; pointer-events: none; } body.vl-chrome-hidden .vl-toolbar { position: absolute; top: 0; left: 0; right: 0; transform: translateY(-100%); opacity: 0; pointer-events: none; } body.vl-chrome-hidden .vl-page-toolbar { position: absolute; top: var(--toolbar-h); left: 0; right: 0; transform: translateY(-100%); opacity: 0; pointer-events: none; } body.vl-chrome-hidden .vl-progress-bar { opacity: 0; } /* Floating rotate button — hidden normally (rotate lives in the toolbar), shown only in full-display/immersive mode so the page can still be rotated while it fills the screen. Sits in the trailing bottom corner, translucent. */ .vl-fab-rotate { position: fixed; inset-inline-end: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); width: 46px; height: 46px; border-radius: 50%; z-index: 560; border: none; display: none; align-items: center; justify-content: center; background: rgba(20,20,30,0.5); color: #fff; backdrop-filter: blur(4px); box-shadow: 0 2px 10px rgba(0,0,0,0.3); opacity: 0.62; transition: opacity 0.2s ease, background 0.2s ease; } .vl-fab-rotate:hover, .vl-fab-rotate:active { opacity: 1; background: rgba(20,20,30,0.72); } /* Phones only — on desktop the toolbar's rotate button is enough and the FAB would just clutter the page. */ @media (max-width: 768px) { body.vl-chrome-hidden .vl-fab-rotate { display: flex; } } body.vl-annot-on .vl-fab-rotate { display: none !important; } /* Floating sidebar toggle (full-display) — brings back the auto-hidden sidebar */ .vl-fab-sidebar { position: fixed; inset-inline-end: 14px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); width: 46px; height: 46px; border-radius: 50%; z-index: 560; border: none; display: none; align-items: center; justify-content: center; background: rgba(20,20,30,0.5); color: #fff; backdrop-filter: blur(4px); box-shadow: 0 2px 10px rgba(0,0,0,0.3); opacity: 0.62; transition: opacity 0.2s ease, background 0.2s ease; } .vl-fab-sidebar:hover, .vl-fab-sidebar:active { opacity: 1; background: rgba(20,20,30,0.72); } body.vl-chrome-hidden .vl-fab-sidebar { display: flex; } body.vl-annot-on .vl-fab-sidebar { display: none !important; } /* On phones the rotate FAB also sits at the bottom — stack the sidebar one above it. */ @media (max-width: 768px) { body.vl-chrome-hidden .vl-fab-sidebar { bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); } } /* ── Public library browser modal ── */ .vl-lib-modal { background: var(--bg-surface); border-radius: 14px; width: min(560px, 94vw); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-md); direction: rtl; } .vl-lib-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); } .vl-lib-head h3 { font-size: 16px; font-family: var(--font-arabic); } .vl-lib-search { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); } .vl-lib-search input { flex: 1; border: none; background: transparent; font-size: 14px; color: var(--text); outline: none; font-family: var(--font-arabic); } .vl-lib-chips { display: flex; gap: 8px; padding: 10px 16px 6px; } .vl-lib-chip { flex: 1; padding: 8px 4px; border: 1px solid var(--border); border-radius: 20px; background: var(--bg); color: var(--text-secondary); font-size: 13px; font-family: var(--font-arabic); font-weight: 600; transition: all 0.15s; } .vl-lib-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); } .vl-lib-crumb { padding: 4px 18px; font-size: 13px; color: var(--accent); font-family: var(--font-arabic); font-weight: 600; } .vl-lib-list { flex: 1; overflow-y: auto; padding: 6px 8px 10px; } .vl-lib-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; cursor: pointer; font-family: var(--font-arabic); } .vl-lib-row:hover { background: rgba(0,0,0,0.05); } [data-theme="dark"] .vl-lib-row:hover { background: rgba(255,255,255,0.06); } .vl-lib-row-main { flex: 1; min-width: 0; } .vl-lib-row-title { font-size: 14px; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vl-lib-row-sub { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } .vl-lib-count { font-size: 12px; font-weight: 700; color: var(--text-secondary); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 2px 9px; flex-shrink: 0; } .vl-lib-open { color: var(--text-muted); flex-shrink: 0; } .vl-lib-book:hover .vl-lib-open { color: var(--accent); } .vl-lib-loading, .vl-lib-empty { text-align: center; color: var(--text-muted); padding: 28px; font-family: var(--font-arabic); } /* Offline shelf: per-row delete button */ .vl-shelf-del { color: var(--text-muted); flex-shrink: 0; } .vl-shelf-del:hover { color: #dc2626; } .vl-lib-more { padding: 8px 16px 14px; } .vl-lib-more .vl-btn-text { width: 100%; justify-content: center; } @media (max-width: 480px) { .vl-lib-modal { width: 96vw; max-height: 92vh; } } /* ── Sidebar "Settings" tab (info + all reading controls + feature actions) ── */ .vl-settings-sec { padding: 2px 2px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .vl-settings-sec:last-child { border-bottom: none; } .vl-settings-h { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.03em; margin: 10px 2px 6px; font-family: var(--font-arabic); } .vl-settings-btnrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .vl-settings-btn { flex: 1 1 auto; min-width: 66px; padding: 8px 6px; font-size: 12px; font-family: var(--font-arabic); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-align: center; transition: background 0.15s, color 0.15s, border-color 0.15s; } .vl-settings-btn:hover { background: var(--bg-elevated); border-color: var(--accent); color: var(--accent); } .vl-settings-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } #tab-settings .vl-rc-row { margin-top: 10px; } /* (The .vl-rc-zoom row that lived in the Settings tab is gone — zoom moved to the bottom reading bar, where .vl-zoom-label above already styles it.) */ /* .vl-main-layout normally reserves space above it for the topbar/tabstrip/ progress bar (see its height calc() below); once those slide out of flow, let it reclaim the full viewport instead of leaving a blank gap. */ body.vl-chrome-hidden .vl-main-layout { height: 100vh; height: 100dvh; } .vl-page-nav-pill { display: flex; align-items: center; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; } .vl-page-input { width: 44px; border: none; background: transparent; text-align: center; font-size: 14px; font-weight: 700; color: var(--text); outline: none; -moz-appearance: textfield; } .vl-page-input::-webkit-outer-spin-button, .vl-page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .vl-page-total { font-size: 13px; color: var(--text-muted); font-weight: 600; white-space: nowrap; } /* ── Overlays ── */ .vl-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; } .vl-overlay.hidden { display: none; } /* The crop overlay sits over the live page while the user drags a selection — blurring it (like the share/doc-props dialogs do) would make precise selection impossible, so keep it a plain dim with no backdrop-filter. */ #crop-overlay { background: rgba(0,0,0,0.15); backdrop-filter: none; cursor: crosshair; } .vl-crop-toolbar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px 16px; display: flex; gap: 8px; box-shadow: var(--shadow-md); z-index: 1001; } .vl-dialog { background: var(--bg-surface); border-radius: 12px; padding: 24px; max-width: 400px; width: 90%; box-shadow: var(--shadow-md); text-align: center; font-family: var(--font-arabic); } .vl-dialog h3 { margin-bottom: 16px; font-size: 18px; } .vl-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .vl-share-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 12px; font-family: var(--font-arabic); transition: all 0.15s; } .vl-share-btn:hover { background: var(--bg-elevated); border-color: var(--accent); } /* ── Mozilla PDF.js Style Outline / TOC Tree ── */ .vl-outline-tree { padding: 6px 4px; } .vl-outline-empty { text-align: center; color: var(--text-muted); padding: 20px; font-size: 13px; } .treeWithDeepNesting { display: flex; flex-direction: column; gap: 1px; } .treeItem { position: relative; display: flex; flex-wrap: wrap; align-items: center; margin-top: 1px; } .treeItemTogglerSpacer { width: 18px; height: 18px; flex-shrink: 0; } .treeItemToggler { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; user-select: none; opacity: 0.7; transition: opacity 0.15s; color: var(--text-muted); } .treeItemToggler:hover { opacity: 1; color: var(--text); } .treeItemToggler::before { content: ''; display: inline-block; width: 5px; height: 5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); /* Points down when expanded */ transition: transform 0.15s ease; } /* Collapsed state (Mozilla PDF.js behavior) */ .treeItemToggler.treeItemsHidden::before { transform: rotate(135deg); /* Points left in RTL (Arabic) when collapsed */ } html[dir="ltr"] .treeItemToggler.treeItemsHidden::before { transform: rotate(-45deg); /* Points right in LTR when collapsed */ } .treeItemToggler.treeItemsHidden ~ .treeItems { display: none; } .treeItemLink { flex: 1; min-width: 0; display: block; padding: 5px 8px; color: var(--text); text-decoration: none; font-size: 13px; font-family: var(--font-arabic); border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s, color 0.15s; cursor: pointer; } .treeItemLink:hover { background: rgba(0, 0, 0, 0.05); } [data-theme="dark"] .treeItemLink:hover { background: rgba(255, 255, 255, 0.08); } .treeItemLink.selected { background: var(--accent); color: #ffffff !important; font-weight: 600; } .treeItems { width: 100%; padding-inline-start: 16px; /* Mozilla PDF.js logical padding for LTR/RTL */ margin-top: 1px; } /* ── More Menu Dropdown ── */ .vl-more-menu-container { position: relative; } .vl-more-dropdown { position: absolute; left: 0; top: 100%; margin-top: 4px; z-index: 200; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md); min-width: 240px; padding: 6px 0; direction: rtl; text-align: right; } .vl-more-dropdown.hidden { display: none; } .vl-more-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px; font-family: var(--font-arabic); color: var(--text); cursor: pointer; transition: background 0.1s; } .vl-more-item:hover { background: rgba(0,0,0,0.04); } [data-theme="dark"] .vl-more-item:hover { background: rgba(255,255,255,0.05); } .vl-more-item.active { color: var(--accent); font-weight: 600; } .vl-more-divider { height: 1px; background: var(--border); margin: 4px 0; } /* Book-files menu lives in the bottom nav, so it has to open upward instead of the standard downward .vl-more-dropdown (which would render off-screen). */ .vl-files-dropdown { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 4px; max-height: 240px; overflow-y: auto; } .vl-more-header { padding: 6px 14px 2px; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--font); } /* ── Document Properties Grid ── */ .vl-docprops-grid { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; } /* ── Sidebar backdrop (mobile drawer) ── */ .vl-sidebar-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0.45); backdrop-filter: blur(1px); } .vl-sidebar-backdrop.hidden { display: none; } /* ── Responsive ── */ @media (max-width: 768px) { :root { --sidebar-w: 82vw; } /* Sidebar becomes an overlay drawer that slides in from the side. */ .vl-sidebar { position: absolute; right: 0; top: 0; bottom: 0; z-index: 50; width: var(--sidebar-w); min-width: var(--sidebar-w); max-width: 320px; box-shadow: var(--shadow-md); transform: translateX(0); transition: transform 0.3s ease; } .vl-sidebar.closed { transform: translateX(105%); margin-right: 0; box-shadow: none; } .vl-book-title { max-width: 180px; font-size: 12px; } .vl-toolbar { padding: 0 4px; } /* Page-image tools (download / copy / crop) are desktop power features and the crop is mouse-only — hide them on phones to keep reading uncluttered. */ .vl-page-toolbar { display: none !important; } /* Roomier page padding so pages aren't glued to the edges */ .vl-viewer { padding: 10px 6px calc(var(--navbar-h) + 10px); } /* Opt-in helper for anything that should drop off a phone toolbar. Nothing carries it at the moment — fit/rotate now live only in the Settings tab. */ .vl-hide-mobile { display: none !important; } } @media (min-width: 769px) { .vl-show-mobile-only { display: none !important; } } @media (max-width: 480px) { .vl-toolbar { gap: 0; } .vl-toolbar-sep { margin: 0 2px; } .vl-btn-icon { width: 30px; height: 30px; } .vl-navbar { gap: 6px; padding: 5px 8px; } /* The reading bar has to fit −, +, ◀, ▶, the page pill, 🔖 and 📝. The percentage read-out is the one thing there that isn't a tap target, so it goes first — the − / + buttons still do the job without it. */ .vl-navbar #zoom-label { display: none; } .vl-navbar-sep { display: none; } } /* Larger touch targets on any touch device. NOTE: this block comes AFTER the 480px one above and both have specificity 0,1,0 — so on a phone these 40px win over the 30px there. That is deliberate (thumbs need the target), and it is exactly why .vl-navbar must wrap. */ @media (pointer: coarse) { .vl-btn-icon { width: 40px; height: 40px; } .vl-sidebar-tab { padding: 14px 10px; } .vl-outline-item { padding: 12px 10px; } } /* On mobile, let them span the screen/drawer width using the same flex layout */ @media (max-width: 768px) { .vl-sidebar-tab { padding: 12px 1px; font-size: 11px; } } /* ═══════════════ PREMIUM FEATURES (v70) ═══════════════ */ /* ── Page display modes: day / night / sepia + brightness + contrast ── */ #viewer-container { --vl-bright: 1; --vl-contrast: 1; } .vl-page-wrap canvas { filter: brightness(var(--vl-bright)) contrast(var(--vl-contrast)); } #viewer-container[data-page-mode="night"] { background: #0e0e12; } #viewer-container[data-page-mode="night"] .vl-page-wrap { background: #000; box-shadow: 0 2px 14px rgba(0,0,0,0.6); } #viewer-container[data-page-mode="night"] .vl-page-wrap canvas { filter: invert(1) hue-rotate(180deg) brightness(var(--vl-bright)) contrast(var(--vl-contrast)); } #viewer-container[data-page-mode="sepia"] { background: #bcae8e; } #viewer-container[data-page-mode="sepia"] .vl-page-wrap { background: #f4ecd8; } #viewer-container[data-page-mode="sepia"] .vl-page-wrap canvas { filter: sepia(0.5) brightness(calc(var(--vl-bright) * 0.98)) contrast(var(--vl-contrast)); } /* ── Display / reading-settings panel ── */ .vl-display-panel { position: absolute; top: 100%; inset-inline-end: 0; margin-top: 6px; z-index: 300; width: min(250px, 86vw); padding: 12px 14px; direction: rtl; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); } .vl-display-panel.hidden { display: none; } .vl-dp-label { font-size: 12px; color: var(--text-secondary); font-family: var(--font-arabic); white-space: nowrap; } .vl-dp-modes { display: flex; gap: 6px; margin: 8px 0 4px; } .vl-mode-btn { flex: 1; padding: 9px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text-secondary); font-family: var(--font-arabic); font-size: 12px; font-weight: 600; transition: all 0.15s; } .vl-mode-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } .vl-dp-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; } .vl-dp-row input[type=range] { flex: 1; accent-color: var(--accent); height: 22px; } .vl-dp-val { font-size: 11px; color: var(--text-muted); min-width: 52px; text-align: left; } .vl-dp-toggle { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; font-family: var(--font-arabic); color: var(--text); } .vl-dp-toggle input { accent-color: var(--accent); width: 20px; height: 20px; } /* ── Auto-scroll button (play/pause) ── */ #btn-autoscroll .as-ico-pause { display: none; } #btn-autoscroll.active .as-ico-play { display: none; } #btn-autoscroll.active .as-ico-pause { display: inline; } #btn-autoscroll.active { color: var(--accent); } /* ── Bookmark button + list ── */ #btn-bookmark.active { color: var(--accent); } #btn-bookmark.active svg { fill: var(--accent); } .vl-bm-add-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 24px); margin: 12px auto 4px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 8px; background: none; color: var(--accent); font-size: 13px; font-family: var(--font-arabic); cursor: pointer; } .vl-bm-add-btn:hover { background: rgba(0,0,0,0.05); } [data-theme="dark"] .vl-bm-add-btn:hover { background: rgba(255,255,255,0.06); } .vl-bm-add-btn.active { background: var(--accent); color: #fff; } .vl-bm-list { padding: 4px 0; } .vl-bm-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: var(--font-arabic); color: var(--text); } .vl-bm-item:hover { background: rgba(0,0,0,0.05); } [data-theme="dark"] .vl-bm-item:hover { background: rgba(255,255,255,0.06); } .vl-bm-item > span { flex: 1; } .vl-bm-del { border: none; background: none; color: var(--text-muted); font-size: 18px; line-height: 1; width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; } .vl-bm-del:hover { background: #fef2f2; color: #ef4444; } /* ── Toast ── */ .vl-toast { position: fixed; bottom: calc(var(--navbar-h) + 16px); left: 50%; transform: translateX(-50%) translateY(12px); background: rgba(20,20,30,0.92); color: #fff; padding: 10px 20px; border-radius: 22px; font-size: 13px; font-family: var(--font-arabic); z-index: 3000; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; max-width: 88vw; text-align: center; } .vl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Responsive: keep the panel on-screen on small phones ── */ @media (max-width: 480px) { .vl-display-panel { position: fixed; inset-inline: 8px auto; inset-inline-end: 8px; top: calc(var(--topbar-h) + var(--toolbar-h) + 6px); width: auto; max-width: 320px; } } /* ── Reading controls ── The .vl-reading-controls bottom sheet that used to be styled here is gone — #vl-reading-controls has not existed in index.html for a long time, so every rule was dead. These .vl-rc-* classes are still used: the Settings tab's rows reuse them. */ .vl-rc-modes { display: flex; gap: 8px; } .vl-rc-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .vl-rc-row input[type=range] { flex: 1; accent-color: var(--accent); height: 24px; } .vl-rc-as #btn-autoscroll { flex-shrink: 0; border: 1px solid var(--border); border-radius: 8px; } /* ── Pinch zoom ── pan-x pan-y lets one finger scroll but hands two-finger gestures to us; the browser only reads this at gesture start, which is why toolbar.js ALSO preventDefault()s on a non-passive touchmove. While the fingers are down we scale the page wrappers with a transform (no layout, no pdf.js work, 60fps). toolbar.js then commits the real zoom and re-renders once on release, so the final result is crisp rather than a stretched bitmap. */ .vl-viewer { touch-action: pan-x pan-y; } .vl-viewer.vl-pinching { overflow: hidden; } .vl-viewer.vl-pinching .vl-page-wrap { transform: scale(var(--vl-pinch, 1)); transform-origin: var(--vl-pinch-ox, center) var(--vl-pinch-oy, top); will-change: transform; } /* ── Page notes ── */ .vl-note-item { display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; border-radius: 8px; cursor: pointer; border-bottom: 1px solid var(--border); } .vl-note-item:hover { background: rgba(0,0,0,0.04); } [data-theme="dark"] .vl-note-item:hover { background: rgba(255,255,255,0.06); } .vl-note-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .vl-note-page { font-size: 12px; font-weight: 700; color: var(--accent); } /* Notes are free text and can be long — clamp the preview to keep the list scannable; the full text is in the edit dialog. */ .vl-note-text { font-size: 13px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .vl-note-actions { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; } /* .vl-dialog is built for short confirmations (max-width 400px, centred text). A note editor needs to be wider and its text must follow the reading direction, so both are overridden here rather than only setting width — a width alone would still be clamped by that max-width. */ .vl-note-dialog { width: min(520px, 92vw); max-width: none; text-align: start; } .vl-note-input { width: 100%; box-sizing: border-box; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font-family: var(--font-arabic); font-size: 14px; line-height: 1.7; resize: vertical; min-height: 120px; } .vl-note-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; } .vl-note-btns { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .vl-note-spacer { flex: 1; } .vl-note-primary { background: var(--accent); color: #fff; } .vl-note-danger { color: #e03131; } /* ═══════════════ v72 FEATURES ═══════════════ */ /* ── Close (exit) button ── */ .vl-btn-close:hover { background: #fdecec !important; color: #e03131 !important; } [data-theme="dark"] .vl-btn-close:hover { background: rgba(224,49,49,0.18) !important; color: #ff8787 !important; } /* ── Browser-style tab strip ── */ .vl-tabstrip { height: var(--tabbar-h); display: flex; align-items: stretch; background: var(--bg-elevated); border-bottom: 1px solid var(--border); padding: 4px 6px 0; gap: 4px; overflow: hidden; position: relative; z-index: 90; } .vl-tabs { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; } .vl-tabs::-webkit-scrollbar { display: none; } .vl-tab { display: flex; align-items: center; gap: 6px; max-width: 200px; min-width: 96px; padding: 0 6px 0 10px; background: var(--bg); border: 1px solid var(--border); border-bottom: none; border-radius: 8px 8px 0 0; cursor: pointer; color: var(--text-secondary); font-size: 12px; font-family: var(--font-arabic); white-space: nowrap; flex-shrink: 0; transition: background 0.15s, color 0.15s; } .vl-tab:hover { background: var(--bg-elevated); } .vl-tab.active { background: var(--bg-surface); color: var(--text); font-weight: 600; border-color: var(--border); box-shadow: 0 -2px 0 var(--accent) inset; } .vl-tab-title { overflow: hidden; text-overflow: ellipsis; max-width: 150px; } .vl-tab-close { border: none; background: none; color: var(--text-muted); font-size: 16px; line-height: 1; width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .vl-tab-close:hover { background: rgba(0,0,0,0.1); color: var(--text); } [data-theme="dark"] .vl-tab-close:hover { background: rgba(255,255,255,0.12); } .vl-tab-add { align-self: center; width: 28px; height: 28px; flex-shrink: 0; border: none; background: none; border-radius: 6px; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .vl-tab-add:hover { background: rgba(0,0,0,0.08); color: var(--text); } [data-theme="dark"] .vl-tab-add:hover { background: rgba(255,255,255,0.1); } /* ── Annotation layers over each page ── */ .vl-annot-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; touch-action: auto; } .vl-annot-textlayer { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .vl-annot-note { position: absolute; transform: translate(-2px, -2px); max-width: 45%; font-family: var(--font-arabic); font-size: 14px; font-weight: 600; line-height: 1.3; background: rgba(255,255,255,0.82); padding: 2px 6px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.25); white-space: pre-wrap; word-break: break-word; } /* When a tool is active the page's SVG captures the pointer for drawing. */ body.vl-annot-on .vl-annot-svg { pointer-events: auto; touch-action: none; cursor: crosshair; } body.vl-annot-on .vl-viewer { cursor: crosshair; } /* ── Floating annotation toolbar ── */ .vl-annot-bar { position: fixed; left: 50%; bottom: calc(var(--navbar-h) + 12px); transform: translateX(-50%) translateY(160%); display: flex; align-items: center; gap: 12px; z-index: 600; direction: rtl; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-md); padding: 8px 14px; opacity: 0; pointer-events: none; transition: transform 0.26s ease, opacity 0.26s ease; } .vl-annot-bar.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .vl-annot-tool-name { font-size: 13px; font-weight: 700; font-family: var(--font-arabic); color: var(--text); white-space: nowrap; } .vl-annot-colors { display: flex; gap: 6px; } .vl-annot-color { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; } .vl-annot-color.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent); } @media (max-width: 480px) { .vl-annot-bar { width: 94vw; justify-content: space-between; bottom: calc(var(--navbar-h) + 8px); } } /* ── Multi-language hover tooltip ── */ .vl-tip { position: fixed; z-index: 4000; pointer-events: none; direction: rtl; text-align: center; background: rgba(20,20,30,0.95); color: #fff; padding: 7px 12px; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.3); max-width: 280px; opacity: 0; transform: translateY(-4px); transition: opacity 0.14s ease, transform 0.14s ease; } .vl-tip.show { opacity: 1; transform: translateY(0); } .vl-tip-main { font-size: 12.5px; font-weight: 700; font-family: var(--font-arabic); } .vl-tip-sub { font-size: 11px; opacity: 0.72; margin-top: 1px; } .vl-tip-sub:last-child { font-family: var(--font); direction: ltr; } /* ── Welcome 3-language description ── */ .vl-welcome-desc { font-size: 13px; opacity: 0.75; font-family: var(--font-arabic); } .vl-welcome-desc:last-of-type { font-family: var(--font); direction: ltr; } /* On phones the tab strip stays but shrinks a touch. */ @media (max-width: 768px) { :root { --tabbar-h: 34px; } .vl-tab { min-width: 84px; max-width: 150px; } } /* ── RTL: flip the back-button chevron to point right (>) ────────────── In LTR (English) the left-pointing "‹" is correct. In RTL (Arabic / Urdu) "back" means forward visually, so the arrow must point the other way. scaleX(-1) mirrors the SVG without any layout shift or duplicate markup. */ [dir="rtl"] #btn-back-library svg { transform: scaleX(-1); }