/* ========================================================= SkyMedia Share Mode Version 1.5.0 Share Mode reuses the existing SkyMedia viewers while removing application chrome. The stage deliberately occupies only the safe area between the upper controls/title and the lower playback/status rows. IMPORTANT: These rules only apply to body.sky-share-mode. Normal Reader / Video / Slideshow operation is unchanged. ========================================================= */ /* ========================================================= SHARE PAGE ========================================================= */ body.sky-share-mode { margin: 0; padding: 0; width: 100vw; height: 100dvh; overflow: hidden; } /* ========================================================= SHARE SHELL ========================================================= */ .sky-share-shell { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 999999; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; /* * Share Mode used to rely on leaving this transparent so the * normal app's #viewerBackground (assets/background.jpg) would * show through from behind. That coupled Share Mode's look to * whatever the underlying app happened to be showing at the * time -- including sections that were never actually opened * (the stray video/slideshow landing-behind-item bug). * * The shell now paints assets/background.jpg itself, matching * the same center/cover treatment #viewerBackground uses. This * keeps the identical backdrop while letting the rest of the * normal application be hidden outright (see isolateApplication() * in shareViewer.js) with no visual loss. */ background-color: var(--panel2, #10161c); background-image: url("../assets/background.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; color: var(--text-color, var(--text, #fff)); } /* ========================================================= PREVENT SHARE TITLE FLASH DURING INITIAL LOAD ========================================================= */ .sky-share-title, .sky-share-subtitle { visibility: hidden; opacity: 0; } /* ========================================================= SHARE TOP STRIP ========================================================= */ .sky-share-header { flex: 0 0 auto; width: 100%; height: clamp(44px, 5.5vh, 68px); min-height: clamp(44px, 5.5vh, 68px); display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(10px, 1.5vw, 18px); box-sizing: border-box; background: var(--panel); backdrop-filter: blur(14px); position: relative; z-index: 200; } .sky-share-brand { min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sky-share-section { flex: 0 0 auto; font-size: 13px; opacity: .72; white-space: nowrap; } body.sky-share-mode .sky-share-section { display: none !important; } /* ========================================================= SHARE MAIN WORKSPACE ========================================================= */ .sky-share-main { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; width: 100%; height: auto; display: flex; flex-direction: column; padding: 0; box-sizing: border-box; overflow: hidden; /* * The viewer background is allowed to show through. */ background: transparent; } body.sky-share-mode #workspacePrimaryLogo { position: absolute; top: 45px; left: clamp(15px, 1.2vw, 25px); width: clamp(70px, 7vw, 120px); height: auto; opacity: 0.5; filter: drop-shadow(0 5px 18px rgba(0,0,0,.16)); display: block !important; visibility: visible !important; z-index: 1000001 !important; pointer-events: none !important; } /* ========================================================= SHARE HEADING — LOCKED TO HEADER ========================================================= */ body.sky-share-mode .sky-share-heading { position: fixed !important; top: clamp(44px, 5.5vh, 68px) !important; left: 0 !important; right: 0 !important; width: 100vw !important; height: clamp(42px, 7vh, 64px) !important; margin: 0 !important; padding: 7px 14px 5px !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; z-index: 100000 !important; pointer-events: none !important; overflow: hidden !important; } /* ========================================================= SHARE TITLE — VISIBLE ONLY AFTER SHARE MODE IS ACTIVE ========================================================= */ body.sky-share-mode .sky-share-title { visibility: visible !important; opacity: 1 !important; } body.sky-share-mode .sky-share-subtitle { visibility: visible !important; opacity: 1 !important; } /* ========================================================= SHARE TITLE — SIMPLE background.jpg IMAGE FILL ========================================================= */ body.sky-share-mode .sky-share-title, body.sky-share-mode .sky-share-subtitle { width: 100% !important; margin-left: auto !important; margin-right: auto !important; background-image: url("../assets/background.jpg") !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; text-align: center !important; text-shadow: none !important; box-shadow: none !important; outline: none !important; filter: none !important; -webkit-text-stroke: 0 transparent !important; transform: none !important; } /* ========================================================= SHARE TITLE ========================================================= */ body.sky-share-mode .sky-share-title { position: relative !important; display: block !important; width: 100% !important; max-width: 72vw !important; margin: 0 auto !important; font-size: clamp(25px, 3.5vw, 35px) !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; text-shadow: none !important; box-shadow: none !important; outline: none !important; filter: drop-shadow(0 1px 0 rgba(0,0,0,.65)) !important; -webkit-text-stroke: 0 transparent !important; transform: none !important; } /* ========================================================= SHARE SUBTITLE ========================================================= */ body.sky-share-mode .sky-share-subtitle { text-shadow: none !important; box-shadow: none !important; outline: none !important; filter: none !important; -webkit-text-stroke: 0 transparent !important; transform: none !important; }.sky-share-subtitle { display: none; margin-top: 2px; font-size: 12px; line-height: 1.2; } /* ========================================================= MEDIA HOST ========================================================= */ .sky-share-media-host { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: stretch; justify-content: stretch; background: transparent; } body.sky-share-mode .sky-share-media-host #viewerLibrary { display: none; } /* ========================================================= GENERIC MOUNTED VIEWER ========================================================= */ .sky-share-mounted-viewer { position: relative !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; border-radius: 10px; overflow: hidden !important; } /* ========================================================= REMOVE READER ARTIFACTS ========================================================= */ body.sky-share-mode #bookmarkFlag { display:none!important; } body.sky-share-mode #readerLibrary, body.sky-share-mode #library, body.sky-share-mode #libraryPanel, body.sky-share-mode #readerDrawer { display: none !important; } /* ========================================================= READER ARTIFACTS ========================================================= */ body.sky-share-mode #statusBar, body.sky-share-mode #bookmarkFlag { display: none !important; } body.sky-share-mode #readerLibrary, body.sky-share-mode #library, body.sky-share-mode #libraryPanel, body.sky-share-mode #readerDrawer { display: none !important; } body.sky-share-mode #topBar, body.sky-share-mode #topSearchGroup, body.sky-share-mode #topBarRightControls { display: none !important; } /* ========================================================= SHARE MODE — MOUNTED READER ========================================================= */ /* * ShareViewer physically moves #viewerArea into * .sky-share-media-host. * * The normal Reader CSS hides it when Share Mode starts, so * it MUST be explicitly restored here. */ body.sky-share-mode .sky-share-media-host #viewerArea { position: relative !important; display: flex !important; flex: 1 1 auto !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; z-index: 1 !important; } /* * Keep the actual Reader panel usable after it is mounted. */ body.sky-share-mode .sky-share-media-host #readerPanel { position: relative !important; display: flex !important; flex: 1 1 auto !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* ========================================================= SHARE MODE — READER TOOLBAR ========================================================= */ /* * IMPORTANT: * * Target the toolbar directly inside the mounted Reader. * Do NOT use: * * #readerPanel #toolbar * * as the primary selector because ShareViewer reparents the * Reader surface. * * The toolbar itself occupies only the small upper-right * control strip. */ body.sky-share-mode .sky-share-media-host #toolbar { position: fixed !important; top: clamp(44px, 5.5vh, 68px) !important; right: 8px !important; left: auto !important; bottom: auto !important; width: auto !important; height: 46px !important; min-width: 0 !important; min-height: 46px !important; max-width: calc(100vw - 90px) !important; margin: 0 !important; padding: 2px 4px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 5px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; z-index: 1000015 !important; pointer-events: none !important; } /* * All actual Reader buttons remain clickable. */ body.sky-share-mode .sky-share-media-host #toolbar .iconButton { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; transform: none !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 1000006 !important; } /* ========================================================= READER PREVIOUS — MIDDLE LEFT ========================================================= */ body.sky-share-mode .sky-share-media-host #toolbar #previousButton { position: fixed !important; top: 50% !important; left: clamp(8px, 2vw, 26px) !important; right: auto !important; bottom: auto !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; border: 1px solid color-mix(in srgb, var(--control-text) 22%, transparent); background: rgba(255, 255, 255, .30) !important; color: var(--control-text); backdrop-filter: blur(7px); box-shadow: 0 5px 18px rgba(0, 0, 0, .16); border-radius:50%; pointer-events: auto !important; z-index: 1000010 !important; } /* ========================================================= READER NEXT — MIDDLE RIGHT ========================================================= */ body.sky-share-mode .sky-share-media-host #toolbar #nextButton { position: fixed !important; top: 50% !important; right: clamp(8px, 2vw, 26px) !important; left: auto !important; bottom: auto !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; display: flex !important; border: 1px solid color-mix(in srgb, var(--control-text) 22%, transparent); background: rgba(255, 255, 255, .30) !important; color: var(--control-text); backdrop-filter: blur(7px); box-shadow: 0 5px 18px rgba(0, 0, 0, .16); border-radius:50%; align-items: center !important; justify-content: center !important; visibility: visible !important; pointer-events: auto !important; z-index: 1000010 !important; } /* ========================================================= READER — KEEP PAGE BELOW HEADER/CONTROLS ========================================================= */ body.sky-share-mode .sky-share-media-host #viewerBackground { position: relative !important; z-index: 1 !important; } body.sky-share-mode .sky-share-media-host #pageContainer { position: relative !important; z-index: 1 !important; } /* ========================================================= VIDEO / SLIDESHOW — NO READER CONTROLS ========================================================= */ /* * These selectors deliberately use :has() because #toolbar * belongs to the Reader DOM and may not be a child of the * currently mounted viewer in exactly the same way after * reparenting. * * Therefore, if the Share media host contains a Video or * Slideshow viewer, the Reader toolbar is completely removed. */ body.sky-share-mode:has( .sky-share-media-host #videoViewer ) #toolbar { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } body.sky-share-mode:has( .sky-share-media-host #slideshowViewer ) #toolbar { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* * Also suppress any individual Reader buttons if the * toolbar's parent/layout is unusual. */ body.sky-share-mode:has( .sky-share-media-host #videoViewer ) #previousButton, body.sky-share-mode:has( .sky-share-media-host #videoViewer ) #nextButton, body.sky-share-mode:has( .sky-share-media-host #slideshowViewer ) #previousButton, body.sky-share-mode:has( .sky-share-media-host #slideshowViewer ) #nextButton { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================= BOTTOM SAFE AREA ========================================================= */ /* * Reserve the physical device safe area. * * env(safe-area-inset-bottom) is important on mobile * browsers with a bottom browser/menu/home-indicator area. */ body.sky-share-mode { min-height: 100dvh !important; height: 100dvh !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; box-sizing: border-box !important; } body.sky-share-mode .sky-share-shell { height: 100dvh !important; min-height: 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; box-sizing: border-box !important; } body.sky-share-mode .sky-share-main { min-height: 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; box-sizing: border-box !important; } /* ========================================================= SLIDESHOW BOTTOM STACK — SAFE AREA ========================================================= */ /* * Welcome banner is the bottom-most row. */ .sky-share-media-host #slideshowViewer > .sr-welcome-banner { bottom: env(safe-area-inset-bottom, 0px) !important; } /* * Status bar sits directly above the welcome banner. */ .sky-share-media-host .slideshow-status-bar { bottom: calc( var(--sky-share-welcome-height, 22px) + env(safe-area-inset-bottom, 0px) ) !important; } /* * Main playback controls sit above both rows. */ .sky-share-media-host .slideshow-toolbar-main { bottom: calc( var(--sky-share-status-height, 28px) + var(--sky-share-welcome-height, 22px) + env(safe-area-inset-bottom, 0px) + var(--sky-share-stage-gap, 8px) ) !important; } /* ========================================================= VIDEO BOTTOM STACK — SAFE AREA ========================================================= */ /* * video.css already anchors the welcome banner to * env(safe-area-inset-bottom), so it correctly clears the * device's bottom chrome/home-indicator on its own. * * The status bar directly above it, however, is normally * anchored a fixed --video-welcome-height above the true * bottom edge (there's no safe area to dodge in the normal * app, since videoFocus mode hides the welcome banner and * only Share Mode shows both rows at once). Without adding * the same inset here, the status bar overlaps the welcome * banner by the height of the device safe area instead of * sitting cleanly above it. */ .sky-share-media-host #videoViewer > .video-status-bar { bottom: calc( var(--video-welcome-height, 22px) + env(safe-area-inset-bottom, 0px) ) !important; } /* ========================================================= MOBILE READER CONTROLS ========================================================= */ @media (max-width: 700px) { body.sky-share-mode .sky-share-heading { height: clamp(44px, 5.5vh, 60px) !important; padding-left: 62px !important; padding-right: 62px !important; } body.sky-share-mode .sky-share-title { max-width: 70vw !important; font-size: clamp(14px, 4vw, 18px) !important; } body.sky-share-mode .sky-share-media-host #toolbar { top: clamp(44px, 5.5vh, 60px) !important; right: 5px !important; height: 44px !important; min-height: 44px !important; padding: 2px !important; gap: 2px !important; } body.sky-share-mode .sky-share-media-host #toolbar .iconButton { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; flex-basis: 38px !important; } body.sky-share-mode .sky-share-media-host #toolbar #previousButton, body.sky-share-mode .sky-share-media-host #toolbar #nextButton { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } body.sky-share-mode .sky-share-media-host #toolbar #previousButton { left: 4px !important; } body.sky-share-mode .sky-share-media-host #toolbar #nextButton { right: 4px !important; } } body.sky-share-mode #topBar, body.sky-share-mode #topSearchGroup, body.sky-share-mode #topBarRightControls { display: none !important; } /* ========================================================= REMOVE OTHER APPLICATION SURFACES ========================================================= */ body.sky-share-mode #frontPage, body.sky-share-mode #frontSection { display: none !important; } /* Video application chrome */ body.sky-share-mode #videoTopBar, body.sky-share-mode #videoLibrary, body.sky-share-mode .video-top-bar, body.sky-share-mode .video-library, body.sky-share-mode #videoSearchGroup, body.sky-share-mode #videoTopBarRightControls { display: none !important; } /* Slideshow application chrome */ body.sky-share-mode #slideshowLibrary, body.sky-share-mode .slideshow-library, body.sky-share-mode .slideshow-top-bar { display: none !important; } /* Application navigation */ body.sky-share-mode .app-switcher, body.sky-share-mode .responsive-app-menu, body.sky-share-mode .responsive-app-menu-button { display: none !important; } /* Settings */ body.sky-share-mode #settingsPanel, body.sky-share-mode #settingsOverlay { display: none !important; } /* Other application navigation */ body.sky-share-mode [data-app-target], body.sky-share-mode .app-switch-button { display: none !important; } /* * IMPORTANT: * * Do not hide .sr-welcome-banner globally here. * * The slideshow viewer owns the welcome banner and we want * it at the bottom of the Share Mode screen. */ /* ========================================================= SLIDESHOW VIEWER ========================================================= */ .sky-share-media-host #slideshowViewer { position: relative !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: stretch !important; overflow: hidden !important; background: transparent; /* * Coordinate system for: * * title * stage * secondary controls * main controls * status * welcome banner */ box-sizing: border-box; /* * Responsive safe-area dimensions. * * The viewer begins below the Share top strip. */ --sky-share-upper-safe: clamp(58px, 9vh, 86px); /* * Main playback controls need enough room so they never * overlap the bottom of the slide. */ --sky-share-control-safe: clamp(54px, 7vh, 68px); /* * Existing status + welcome rows. */ --sky-share-welcome-height: 22px; --sky-share-status-height: clamp(22px, 3vh, 32px); /* * Small breathing room between stage and control rows. */ --sky-share-stage-gap: clamp(6px, 1vh, 12px); } /* Never show slideshow landing after the shared item opens */ .sky-share-media-host #slideshowLanding { display: none !important; } /* ========================================================= SLIDESHOW VIEWER BOTTOM SPACE ========================================================= */ /* * Reserve the lower rows inside the viewer itself. * * This guarantees the stage cannot occupy the status or * welcome-banner area. */ .sky-share-media-host #slideshowViewer { padding-bottom: calc( var(--sky-share-status-height) + var(--sky-share-welcome-height) ) !important; } /* ========================================================= SLIDESHOW STAGE ========================================================= */ /* * The stage deliberately does NOT fill the entire viewer. * * Its top edge is below: * * - the Share title * - the upper/secondary controls * * Its bottom edge is above: * * - the main playback controls * - the status bar * - the welcome banner * * Therefore the controls cannot sit over the actual slide. */ .sky-share-media-host #slideshowStage, .sky-share-media-host .slideshow-stage { position: absolute !important; /* * Leave a safe area at the top. */ top: calc( var(--sky-share-upper-safe) + var(--sky-share-stage-gap) ) !important; /* * Leave a safe area above the main controls and bottom * status/welcome rows. */ bottom: calc( var(--sky-share-control-safe) + var(--sky-share-stage-gap) + var(--sky-share-status-height) + var(--sky-share-welcome-height) ) !important; left: 8px !important; right: 8px !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important; margin: 0 auto !important; aspect-ratio: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; border-radius: 10px; background: transparent; /* * Slides stay beneath the controls. */ z-index: 1 !important; box-sizing: border-box !important; } /* ========================================================= ACTUAL SLIDE ========================================================= */ .sky-share-media-host .slideshow-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 1; border-radius: 10px; z-index: 1; } .sky-share-media-host .slideshow-slide img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; } .sky-share-media-host .slideshow-slide canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; user-select: none; } /* ========================================================= SLIDESHOW TITLE ========================================================= */ /* * The Share Mode heading already identifies the item. * * Keep the viewer's internal title below the upper control * area so it cannot sit directly on top of the slide. */ .sky-share-media-host .slideshow-viewer-title { position: absolute !important; left: 18px !important; right: auto !important; top: 4px !important; max-width: 55% !important; margin: 0 !important; z-index: 20 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(14px, 1.6vw, 20px); text-shadow: 0 1px 5px rgba(0,0,0,.8); pointer-events: none; } /* ========================================================= SLIDESHOW PLAYBACK STATUS ========================================================= */ .sky-share-media-host .slideshow-playback-status { position: absolute !important; display:none; top: calc( var(--sky-share-upper-safe) - 8px ) !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 30 !important; pointer-events: none !important; font-size: 12px; opacity: .72; white-space: nowrap; } /* ========================================================= MAIN SLIDESHOW CONTROLS ========================================================= */ .sky-share-media-host .slideshow-toolbar { position: absolute !important; left: 50% !important; right: auto !important; top: auto !important; /* * Place the controls directly above the reserved * status/welcome rows. */ bottom: calc( var(--sky-share-status-height) + var(--sky-share-welcome-height) + var(--sky-share-stage-gap) ) !important; transform: translateX(-50%) !important; width: max-content !important; max-width: calc(100% - 20px) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px; padding: 6px 8px; border-radius: 10px; background: transparent; color: var(--control-text); z-index: 100 !important; pointer-events: auto !important; } /* Main playback group */ .sky-share-media-host .slideshow-toolbar-main { position: absolute !important; left: 50% !important; right: auto !important; bottom: calc( var(--sky-share-status-height) + var(--sky-share-welcome-height) + var(--sky-share-stage-gap) ) !important; top: auto !important; transform: translateX(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 101 !important; pointer-events: auto !important; } /* * Secondary controls occupy the upper-right safe zone. */ .sky-share-media-host .slideshow-toolbar-secondary { position: absolute !important; top: 1px !important; right: 12px !important; left: auto !important; bottom: auto !important; transform: none !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px; z-index: 1000002 !important; pointer-events: auto !important; } /* ========================================================= SLIDESHOW BUTTONS ========================================================= */ .sky-share-media-host .slideshow-control { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; flex: 0 0 42px !important; display: flex !important; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--control-text); backdrop-filter: blur(7px); box-shadow: 0 5px 18px rgba(0,0,0,.16); cursor: pointer; pointer-events: auto !important; transition: background .25s, transform .25s, box-shadow .25s; } .sky-share-media-host .slideshow-control .icon { width: 20px; height: 20px; color: var(--control-text); stroke: currentColor; } .sky-share-media-host .slideshow-control:hover { background: rgba(255,255,255,.42) !important; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.18); } .sky-share-media-host .slideshow-control:active { transform: scale(.96); } /* ========================================================= AUDIO MODE ========================================================= */ .sky-share-media-host .slideshow-audio-mode { position: relative; height: 42px; display: flex !important; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid color-mix( in srgb, var(--control-text) 22%, transparent ); border-radius: 21px; background: color-mix( in srgb, var(--panel) 22%, transparent ); color: var(--control-text); backdrop-filter: blur(7px); box-shadow: 0 5px 18px rgba(0,0,0,.16); pointer-events: auto; } .sky-share-media-host .slideshow-audio-mode .icon { width: 19px; height: 19px; color: var(--control-text); } .sky-share-media-host .slideshow-audio-mode select { max-width: 118px; border: 0; outline: 0; background: transparent; color: var(--control-text); font-size: 11px; pointer-events: auto; } .sky-share-media-host .slideshow-audio-mode option { background: #20242a; color: #fff; } /* ========================================================= STATUS / INDICATOR BAR ========================================================= */ .sky-share-media-host .slideshow-status-bar { position: absolute !important; left: 0 !important; right: 0 !important; bottom: var(--sky-share-welcome-height) !important; width: 100% !important; height: var(--sky-share-status-height) !important; min-height: var(--sky-share-status-height) !important; max-height: var(--sky-share-status-height) !important; padding: 2px 8px !important; box-sizing: border-box !important; display: block !important; background: var(--panel); color: var(--text); font-size: 13px; line-height: 18px; letter-spacing: .02em; z-index: 150 !important; pointer-events: auto; } .sky-share-media-host .slideshow-status-bar center { width: 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13px; line-height: 18px; text-align: center; } .sky-share-media-host .slideshow-status-bar span { font-size: 13px; line-height: 18px; letter-spacing: .02em; } .sky-share-media-host .slideshow-status-bar #slideshowStatus { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; opacity: .85; } .sky-share-media-host .slideshow-status-indicator { min-width: 50px; text-align: center; opacity: .7; } .sky-share-media-host .slideshow-status-indicator:empty { display: none !important; } /* ========================================================= WELCOME MESSAGE BAR ========================================================= */ /* * The welcome banner remains visible in Share Mode. * * It is the final bottom row and is included in the stage's * reserved bottom geometry. */ .sky-share-media-host .sr-welcome-banner, .sky-share-media-host #slideshowViewer > .sr-welcome-banner { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: var(--sky-share-welcome-height) !important; min-height: var(--sky-share-welcome-height) !important; max-height: var(--sky-share-welcome-height) !important; padding: 2px 8px !important; box-sizing: border-box !important; display: flex !important; align-items: center; justify-content: center; overflow: hidden !important; background: var(--panel); color: var(--muted); border-top: none; font-size: 12px; line-height: 18px; letter-spacing: normal; z-index: 151 !important; } .sky-share-media-host .sr-welcome-banner center, .sky-share-media-host #slideshowViewer > .sr-welcome-banner center { display: block; width: 100%; margin: 0; padding: 0; line-height: 18px; text-align: center; } /* ========================================================= SHARE STATUS MESSAGE ========================================================= */ .sky-share-status { display: none !important; } /* ========================================================= SHARE ACTIONS ========================================================= */ /* * Share Mode now uses the existing Open button as the * Meditation Mornings logo. * * The Close button is hidden. */ .sky-share-actions { position: absolute !important; right: clamp(12px, 2vw, 24px) !important; /* * Keep the logo above the main playback controls and * above the status/welcome rows. */ bottom: calc( var(--sky-share-status-height, 28px) + var(--sky-share-welcome-height, 22px) + var(--sky-share-control-safe, 60px) + 8px ) !important; width: max-content; max-width: calc(100vw - 24px); display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 0; margin: 0; z-index: 300 !important; pointer-events: auto; } /* * Hide the old Close action completely. */ .sky-share-close-button { display: none !important; } /* * The existing Open button becomes the small clickable * Meditation Mornings logo. * * Its existing href remains: * * https://meditationmornings.glide.page/dl/media */ .sky-share-open-button { position: fixed; bottom: clamp(35px, 4vw, 40px); right: clamp(15px, 1.2vw, 25px); display: block !important; width: clamp(42px, 5vw, 64px) !important; height: clamp(42px, 5vw, 64px) !important; min-width: 42px !important; min-height: 42px !important; max-width: 64px !important; max-height: 64px !important; padding: 0 !important; border: 1px solid rgba(255,255,255,.55) !important; border-radius: clamp(8px, 1vw, 13px) !important; background-image: url("../assets/logo.png") !important; background-position: center !important; background-repeat: no-repeat !important; background-size: contain !important; background-color: rgba(216,239,238,.80) !important; box-sizing: border-box !important; overflow: hidden !important; font-size: 0 !important; line-height: 0 !important; text-indent: -9999px !important; text-decoration: none !important; cursor: pointer; backdrop-filter: blur(7px); animation: frontMenuGlow 4s ease-in-out infinite; transition: transform .25s ease, box-shadow .25s ease; } .sky-share-open-button::before, .sky-share-open-button::after { display: none !important; content: none !important; } .sky-share-open-button:hover { transform: translateY(-2px); animation-play-state: paused; box-shadow: 0 0 7px #ACE1AF, 0 0 14px #00FA9A, inset 0 0 10px #ACE1AF !important; } .sky-share-open-button:active { transform: scale(.95); } /* ========================================================= LOGO GLOW ========================================================= */ @keyframes frontMenuGlow { 0%, 100% { box-shadow: 0 0 4px #ACE1AF, 0 0 7px #ACE1AF, inset 0 0 5px #ACE1AF; } 45% { box-shadow: 0 0 6px #ACE1AF, 0 0 7px #ACE1AF, inset 0 0 10px #00FA9A; } 52% { box-shadow: 0 0 3px #ACE1AF, 0 0 5px #ACE1AF, inset 0 0 6px #ACE1AF; } 60% { box-shadow: 0 0 8px #ACE1AF, 0 0 20px #00FA9A, inset 0 0 8px #ACE1AF; } } /* ========================================================= VIDEO SHARE MODE ========================================================= */ .sky-share-media-host #videoViewer { position: relative !important; flex: 1 1 auto !important; min-width: 0 !important; min-height: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; overflow: hidden !important; } .sky-share-media-host #videoLanding { display: none !important; } .sky-share-media-host #videoPlayer { max-width: 100%; max-height: 100%; } /* ========================================================= SKY SHARE MODE — FINAL LAYOUT CONTROL Version 1.6.0 This block is intentionally LAST in share.css. BOOK: * Reader toolbar lives inside the mounted Reader area * toolbar is immediately below the Share header * Previous / Next remain at middle-left / middle-right * document has clearance below the toolbar * document has clearance above the bottom status/welcome area VIDEO / SLIDESHOW: * Reader controls are completely hidden * landing/library surfaces are completely hidden * existing playback controls are NOT repositioned here NORMAL READER / VIDEO / SLIDESHOW: * unaffected because every rule is scoped to Share Mode ========================================================= */ /* ========================================================= 1. SHARE CONTAINER — NO NORMAL READER PADDING ========================================================= */ body.sky-share-mode, body.sky-share-mode .sky-share-shell, body.sky-share-mode .sky-share-main, body.sky-share-mode .sky-share-media-host { box-sizing: border-box; } body.sky-share-mode .sky-share-main, body.sky-share-mode .sky-share-media-host { margin: 0 !important; padding: 0 !important; } /* ========================================================= 2. MOUNTED READER — RESTORE WITHOUT READER SECTION PADDING ========================================================= */ body.sky-share-mode .sky-share-media-host #viewerArea { position: relative !important; display: flex !important; flex: 1 1 auto !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; /* * IMPORTANT: * The padding here is Share Mode's own safe space. * It is NOT the normal Reader section padding. */ padding-top: 52px !important; padding-bottom: calc( 28px + 22px + env(safe-area-inset-bottom, 0px) + 6px ) !important; overflow: hidden !important; box-sizing: border-box !important; z-index: 1 !important; } /* * The Reader panel must not reintroduce its normal * Reader-section spacing. */ body.sky-share-mode .sky-share-media-host #readerPanel { position: relative !important; display: flex !important; flex: 1 1 auto !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; z-index: 1 !important; } /* ========================================================= 3. SHARE TITLE ========================================================= */ body.sky-share-mode .sky-share-heading { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; height: clamp(44px, 5.5vh, 68px) !important; margin: 0 !important; padding: 4px 90px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; text-align: center !important; pointer-events: none !important; z-index: 1000003 !important; } /* ========================================================= 4. BOOK — READER TOOLBAR ========================================================= */ /* * IMPORTANT CHANGE: * * The toolbar is now ABSOLUTE relative to #viewerArea, * not FIXED relative to the browser viewport. * * #viewerArea begins inside .sky-share-main, which itself * begins immediately below the Share header. * * Therefore top:4px places the toolbar directly below the * Share header and inside the actual available Reader area. */ body.sky-share-mode .sky-share-media-host #toolbar { position: absolute !important; top: 4px !important; right: 8px !important; left: auto !important; bottom: auto !important; width: auto !important; height: 44px !important; min-width: 0 !important; min-height: 44px !important; max-width: calc(100% - 90px) !important; margin: 0 !important; padding: 2px 4px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 4px !important; box-sizing: border-box !important; transform: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; z-index: 1000008 !important; pointer-events: none !important; } /* * Actual Reader controls remain clickable. */ body.sky-share-mode .sky-share-media-host #toolbar .iconButton { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; transform: none !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 1000009 !important; } /* ========================================================= 5. BOOK — PREVIOUS / NEXT ========================================================= */ /* * These are deliberately positioned relative to the mounted * Reader surface rather than the browser viewport. * * This keeps them inside the visible Reader area even when * the Share header or bottom browser safe area changes. */ body.sky-share-mode .sky-share-media-host #toolbar #previousButton, body.sky-share-mode .sky-share-media-host #toolbar #nextButton { position: absolute !important; top: 50% !important; bottom: auto !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 1000010 !important; } body.sky-share-mode .sky-share-media-host #toolbar #previousButton { left: 8px !important; right: auto !important; } body.sky-share-mode .sky-share-media-host #toolbar #nextButton { right: 8px !important; left: auto !important; } /* ========================================================= 6. IMPORTANT — KEEP PREVIOUS/NEXT FROM BEING TREATED AS NORMAL TOOLBAR BUTTONS ========================================================= */ /* * The two navigation buttons are still children of #toolbar * in the existing Reader DOM. * * Pulling them out visually is safe; their existing click * handlers remain intact. */ body.sky-share-mode .sky-share-media-host #toolbar #previousButton, body.sky-share-mode .sky-share-media-host #toolbar #nextButton { flex: 0 0 48px !important; } /* ========================================================= 7. READER DOCUMENT — PROTECTED MIDDLE AREA ========================================================= */ /* * The first 52px of #viewerArea are reserved for the Reader * toolbar. * * The bottom area is reserved for status/welcome space. * * Consequently the PDF/page surface cannot sit underneath * either the toolbar or bottom status area. */ body.sky-share-mode .sky-share-media-host #pageContainer { position: relative !important; z-index: 1 !important; } /* * Keep the actual Reader background/page surface underneath * the controls but inside the protected Reader rectangle. */ body.sky-share-mode .sky-share-media-host #viewerBackground { position: relative !important; z-index: 1 !important; } /* ========================================================= 8. BOOK — READER CONTROL VISIBILITY ========================================================= */ body.sky-share-mode .sky-share-media-host #rotateButton, body.sky-share-mode .sky-share-media-host #muteButton, body.sky-share-mode .sky-share-media-host #viewerFullscreenButton, body.sky-share-mode .sky-share-media-host #readerCloseButton, body.sky-share-mode .sky-share-media-host #readerShareButton { display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* * Bookmarks remain deliberately unavailable in Share Mode. */ body.sky-share-mode .sky-share-media-host #bookmarkAddButton { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================= 9. VIDEO SHARE — REMOVE READER CONTROLS ========================================================= */ body.sky-share-mode:has( .sky-share-media-host #videoViewer ) #toolbar, body.sky-share-mode:has( .sky-share-media-host #videoViewer ) #previousButton, body.sky-share-mode:has( .sky-share-media-host #videoViewer ) #nextButton, body.sky-share-mode:has( .sky-share-media-host #videoViewer ) #rotateButton, body.sky-share-mode:has( .sky-share-media-host #videoViewer ) #muteButton, body.sky-share-mode:has( .sky-share-media-host #videoViewer ) #viewerFullscreenButton, body.sky-share-mode:has( .sky-share-media-host #videoViewer ) #readerCloseButton, body.sky-share-mode:has( .sky-share-media-host #videoViewer ) #readerShareButton, body.sky-share-mode:has( .sky-share-media-host #videoViewer ) #bookmarkAddButton { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================= 10. SLIDESHOW SHARE — REMOVE READER CONTROLS ========================================================= */ body.sky-share-mode:has( .sky-share-media-host #slideshowViewer ) #toolbar, body.sky-share-mode:has( .sky-share-media-host #slideshowViewer ) #previousButton, body.sky-share-mode:has( .sky-share-media-host #slideshowViewer ) #nextButton, body.sky-share-mode:has( .sky-share-media-host #slideshowViewer ) #rotateButton, body.sky-share-mode:has( .sky-share-media-host #slideshowViewer ) #muteButton, body.sky-share-mode:has( .sky-share-media-host #slideshowViewer ) #viewerFullscreenButton, body.sky-share-mode:has( .sky-share-media-host #slideshowViewer ) #readerCloseButton, body.sky-share-mode:has( .sky-share-media-host #slideshowViewer ) #readerShareButton, body.sky-share-mode:has( .sky-share-media-host #slideshowViewer ) #bookmarkAddButton { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================= 11. VIDEO — REMOVE ALL LANDING/LIBRARY SURFACES ========================================================= */ /* * The actual shared video is already mounted in * .sky-share-media-host. * * Nothing inside Share Mode should display the video library * or its landing state. */ body.sky-share-mode .sky-share-media-host #videoLanding, body.sky-share-mode .sky-share-media-host .video-landing, body.sky-share-mode .sky-share-media-host .video-library, body.sky-share-mode .sky-share-media-host #videoLibrary, body.sky-share-mode .sky-share-media-host .video-library-panel, body.sky-share-mode .sky-share-media-host .video-landing-panel { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* * If the video viewer uses a generic landing child rather * than one of the named IDs/classes above, suppress elements * explicitly marked as landing surfaces. */ body.sky-share-mode .sky-share-media-host [data-video-landing], body.sky-share-mode .sky-share-media-host [data-landing="video"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================= 12. SLIDESHOW — REMOVE ALL LANDING/LIBRARY SURFACES ========================================================= */ body.sky-share-mode .sky-share-media-host #slideshowLanding, body.sky-share-mode .sky-share-media-host .slideshow-landing, body.sky-share-mode .sky-share-media-host .slideshow-library, body.sky-share-mode .sky-share-media-host #slideshowLibrary, body.sky-share-mode .sky-share-media-host .slideshow-library-panel, body.sky-share-mode .sky-share-media-host .slideshow-landing-panel { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } body.sky-share-mode .sky-share-media-host [data-slideshow-landing], body.sky-share-mode .sky-share-media-host [data-landing="slideshow"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================= 13. VIDEO / SLIDESHOW — NO READER SECTION PADDING ========================================================= */ body.sky-share-mode:has( .sky-share-media-host #videoViewer ) .sky-share-media-host, body.sky-share-mode:has( .sky-share-media-host #slideshowViewer ) .sky-share-media-host { padding: 0 !important; margin: 0 !important; } /* ========================================================= 14. PRESERVE EXISTING VIDEO / SLIDESHOW VIEWER SIZE ========================================================= */ body.sky-share-mode .sky-share-media-host #videoViewer, body.sky-share-mode .sky-share-media-host #slideshowViewer { margin: 0 !important; box-sizing: border-box !important; } /* ========================================================= 15. BOTTOM DEVICE SAFE AREA ========================================================= */ body.sky-share-mode { padding-bottom: env(safe-area-inset-bottom, 0px) !important; box-sizing: border-box !important; } body.sky-share-mode .sky-share-shell { padding-bottom: env(safe-area-inset-bottom, 0px) !important; box-sizing: border-box !important; } /* ========================================================= 16. SLIDESHOW — BOTTOM SAFE AREA ONLY ========================================================= */ /* * These rules do NOT change the existing slideshow control * design or placement except for accounting for the physical * device safe area. */ body.sky-share-mode .sky-share-media-host #slideshowViewer > .sr-welcome-banner { bottom: env(safe-area-inset-bottom, 0px) !important; } body.sky-share-mode .sky-share-media-host .slideshow-status-bar { bottom: calc( var(--sky-share-welcome-height, 22px) + env(safe-area-inset-bottom, 0px) ) !important; } /* ========================================================= 17. MOBILE BOOK TOOLBAR ========================================================= */ @media (max-width: 700px) { body.sky-share-mode .sky-share-media-host #viewerArea { padding-top: 50px !important; padding-bottom: calc( 28px + 22px + env(safe-area-inset-bottom, 0px) + 6px ) !important; } body.sky-share-mode .sky-share-media-host #toolbar { top: 3px !important; right: 4px !important; height: 42px !important; min-height: 42px !important; gap: 2px !important; } body.sky-share-mode .sky-share-media-host #toolbar .iconButton { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; flex-basis: 36px !important; } body.sky-share-mode .sky-share-media-host #toolbar #previousButton, body.sky-share-mode .sky-share-media-host #toolbar #nextButton { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } body.sky-share-mode .sky-share-media-host #toolbar #previousButton { left: 4px !important; } body.sky-share-mode .sky-share-media-host #toolbar #nextButton { right: 4px !important; } } /* ========================================================= 18. VERY SMALL SCREENS ========================================================= */ @media (max-width: 420px) { body.sky-share-mode .sky-share-media-host #toolbar { right: 2px !important; max-width: calc(100% - 80px) !important; } body.sky-share-mode .sky-share-media-host #toolbar .iconButton { width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; flex-basis: 34px !important; } } /* ========================================================= SHARE VIEWER — BOOK FINAL LAYOUT / TOUCH BEHAVIOR Added 2026-09-16 ========================================================= */ body.sky-share-mode.sky-share-book { --sky-share-book-edge-gap: clamp(42px, 6vh, 64px); --sky-share-book-toolbar-height: clamp(46px, 5.5vh, 58px); --sky-share-book-control-size: 42px; --sky-share-book-control-gap: 10px; --sky-share-book-status-height: 30px; --sky-share-book-welcome-height: 22px; } /* Share shell */ body.sky-share-mode.sky-share-book .sky-share-shell { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; overflow: hidden !important; background-image: url("../assets/background.jpg") !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; } /* Top-right controls */ body.sky-share-mode.sky-share-book .sky-share-header { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: var(--sky-share-book-toolbar-height) !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; z-index: 10000 !important; pointer-events: none !important; } /* * The header's own brand/section text is redundant for a book * share -- the title/subtitle are already shown prominently via * .sky-share-heading (see "READER TITLE — TRUE VIEWPORT CENTER" * above), fixed and centered independently of this header. Left * visible, .sky-share-section's text ("Book") would sit directly * underneath the absolutely-positioned toolbar buttons above, * since this header is pushed flex-end for the toolbar's sake. */ body.sky-share-mode.sky-share-book .sky-share-brand, body.sky-share-mode.sky-share-book .sky-share-section { display: none !important; } body.sky-share-mode.sky-share-book #toolbar { position: absolute !important; top: 45px !important; right: clamp(12px, 2vw, 28px) !important; height: var(--sky-share-book-toolbar-height) !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: var(--sky-share-book-control-gap) !important; margin: 0 !important; padding: 0 !important; z-index: 10001 !important; pointer-events: none !important; } body.sky-share-mode.sky-share-book #toolbar > button { width: var(--sky-share-book-control-size) !important; height: var(--sky-share-book-control-size) !important; min-width: var(--sky-share-book-control-size) !important; min-height: var(--sky-share-book-control-size) !important; margin: 0 !important; padding: 0 !important; flex: 0 0 var(--sky-share-book-control-size) !important; pointer-events: auto !important; border: 1px solid color-mix(in srgb, var(--control-text) 22%, transparent); background: rgba(255, 255, 255, .30) !important; color: var(--control-text); backdrop-filter: blur(7px); box-shadow: 0 5px 18px rgba(0, 0, 0, .16); } body.sky-share-mode.sky-share-book #toolbar #muteButton, body.sky-share-mode.sky-share-book #toolbar #readerShareButton, body.sky-share-mode.sky-share-book #toolbar #viewerFullscreenButton, body.sky-share-mode.sky-share-book #toolbar #readerCloseButton { display: flex !important; } body.sky-share-mode.sky-share-book #rotateButton, body.sky-share-mode.sky-share-book #bookmarkAddButton { display: none !important; } body.sky-share-mode.sky-share-book #toolbar #previousButton, body.sky-share-mode.sky-share-book #toolbar #nextButton { display: none !important; } /* Main/share media surface */ body.sky-share-mode.sky-share-book .sky-share-main { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } body.sky-share-mode.sky-share-book .sky-share-media-host { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; z-index: 20 !important; } /* * Equal breathing room above and below the book. * The page is centered horizontally and vertically inside * the actual viewing rectangle. */ body.sky-share-mode.sky-share-book .sky-share-media-host #viewerArea { position: absolute !important; top: var(--sky-share-book-toolbar-height) !important; bottom: calc( var(--sky-share-book-edge-gap) + var(--sky-share-book-status-height) + var(--sky-share-book-welcome-height) ) !important; left: 0 !important; right: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; padding: var(--sky-share-book-edge-gap) 0 !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; transform: none !important; /* * Permit horizontal swipe detection while retaining vertical * page containment. Pinch/zoom is handled by pointer/touch JS. */ touch-action: pan-y; overscroll-behavior: contain; } /* Center actual PageFlip surfaces */ body.sky-share-mode.sky-share-book .sky-share-media-host #viewerArea > * { margin-left: auto !important; margin-right: auto !important; } body.sky-share-mode.sky-share-book .sky-share-media-host #viewerArea .stf__parent { margin-left: auto !important; margin-right: auto !important; } /* Middle-left / middle-right page navigation */ body.sky-share-mode.sky-share-book .sky-share-media-host #previousButton, body.sky-share-mode.sky-share-book .sky-share-media-host #nextButton { position: absolute !important; top: 50% !important; width: var(--sky-share-book-control-size) !important; height: var(--sky-share-book-control-size) !important; min-width: var(--sky-share-book-control-size) !important; min-height: var(--sky-share-book-control-size) !important; margin: 0 !important; padding: 0 !important; transform: translateY(-50%) !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 9000 !important; pointer-events: auto !important; } body.sky-share-mode.sky-share-book .sky-share-media-host #previousButton { left: clamp(12px, 2vw, 28px) !important; right: auto !important; } body.sky-share-mode.sky-share-book .sky-share-media-host #nextButton { right: clamp(12px, 2vw, 28px) !important; left: auto !important; } body.sky-share-mode.sky-share-book .sky-share-media-host #previousButton[hidden], body.sky-share-mode.sky-share-book .sky-share-media-host #nextButton[hidden] { display: none !important; } /* Status bar directly above welcome banner */ body.sky-share-mode.sky-share-book #statusBar { position: absolute !important; left: 0 !important; right: 0 !important; bottom: var(--sky-share-book-welcome-height) !important; width: 100% !important; height: var(--sky-share-book-status-height) !important; min-height: var(--sky-share-book-status-height) !important; margin: 0 !important; padding: 0 12px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 8000 !important; } /* Welcome banner immediately below status */ body.sky-share-mode.sky-share-book .sr-welcome-banner { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: var(--sky-share-book-welcome-height) !important; min-height: var(--sky-share-book-welcome-height) !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; z-index: 8000 !important; } body.sky-share-mode.sky-share-book .sr-welcome-banner center { margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } /* Fullscreen retains the background but hides the top controls */ body.sky-share-mode.sky-share-book .sky-share-shell:fullscreen { background-image: url("../assets/background.jpg") !important; background-position: center !important; background-size: cover !important; } body.sky-share-mode.sky-share-book .sky-share-shell:fullscreen .sky-share-header, body.sky-share-mode.sky-share-book .sky-share-shell:fullscreen #toolbar { display: none !important; } /* 10-second control timeout * * The book toolbar (mute / share / fullscreen / X) is the persistent * "top bar" and must NEVER time out -- only Previous/Next, which sit * inside the viewer area on top of the page content, fade on idle. * #toolbar is deliberately excluded from the opacity/pointer-events * drop below. */ body.sky-share-mode.sky-share-book.sky-share-controls-hidden #previousButton, body.sky-share-mode.sky-share-book.sky-share-controls-hidden #nextButton { opacity: 0 !important; pointer-events: none !important; } body.sky-share-mode.sky-share-book #toolbar { /* Always visible -- explicitly reasserted so no earlier idle rule (or a future one) can silently start hiding it again. */ opacity: 1 !important; pointer-events: none !important; /* container itself; buttons re-enable below */ } body.sky-share-mode.sky-share-book #toolbar > button { pointer-events: auto !important; } body.sky-share-mode.sky-share-book #previousButton, body.sky-share-mode.sky-share-book #nextButton { transition: opacity .25s ease !important; } body.sky-share-mode .sky-share-header { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* * The 10-second timeout applies to every Share Mode type, not * just books: the slideshow's own toolbar * rows fade the same way. Video's transport controls are the * browser's native