diff --git a/src/css/injected.scss b/src/css/injected.scss index e31230a0..62a56537 100644 --- a/src/css/injected.scss +++ b/src/css/injected.scss @@ -3692,6 +3692,93 @@ div.day-empty { object-position: center; } +.popup-media-fullscreenable { + cursor: pointer; + transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; +} +.popup-media-fullscreenable:hover { + opacity: 0.95; +} +.popup-media-fullscreenable:focus { + outline: none; +} +.popup-media-fullscreenable:focus-visible { + outline: 2px solid color-mix(in srgb, var(--text-primary) 70%, transparent); + outline-offset: 4px; +} + +.bsplus-popup-media-overlay-backdrop { + position: fixed; + inset: 0; + z-index: 2147483646; + display: flex; + align-items: center; + justify-content: center; + padding: clamp(20px, 4vw, 48px); + box-sizing: border-box; + background: rgba(0, 0, 0, 0.55); + backdrop-filter: blur(6px); + opacity: 0; + transition: opacity 0.28s cubic-bezier(0.22, 0.03, 0.26, 1); +} + +.bsplus-popup-media-overlay-backdrop.bsplus-popup-media-overlay-backdrop--visible { + opacity: 1; +} + +.bsplus-popup-media-overlay-backdrop.bsplus-popup-media-overlay--instant { + transition: none; +} + +.bsplus-popup-media-overlay-inner { + position: relative; + display: flex; + flex-direction: column; + align-items: stretch; + width: 100%; + max-width: min(96vw, 1320px); + max-height: calc(100vh - clamp(40px, 10vw, 96px)); + border-radius: 20px; + overflow: hidden; + background: var(--background-primary); + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); + opacity: 0; + transform: scale(0.94) translateY(12px); + transition: + opacity 0.28s cubic-bezier(0.22, 0.03, 0.26, 1), + transform 0.28s cubic-bezier(0.22, 0.03, 0.26, 1); +} + +.bsplus-popup-media-overlay-backdrop.bsplus-popup-media-overlay-backdrop--visible + .bsplus-popup-media-overlay-inner { + opacity: 1; + transform: scale(1) translateY(0); +} + +.bsplus-popup-media-overlay-backdrop.bsplus-popup-media-overlay--instant + .bsplus-popup-media-overlay-inner { + transition: none; +} + +.bsplus-popup-media-overlay-slot { + width: 100%; + max-height: inherit; + display: flex; + align-items: center; + justify-content: center; + padding: clamp(16px, 3vw, 28px); + box-sizing: border-box; +} + +.bsplus-popup-media-overlay-media { + max-width: 100%; + max-height: calc(100vh - clamp(120px, 22vh, 200px)); + width: auto; + height: auto; + object-fit: contain; + border-radius: 12px; +} + @keyframes shimmer { 0% { background-position: -1000px 0; diff --git a/src/seqta/utils/Openers/OpenEngageParentsAnnouncement.ts b/src/seqta/utils/Openers/OpenEngageParentsAnnouncement.ts index ca8b4747..0bb08fb5 100644 --- a/src/seqta/utils/Openers/OpenEngageParentsAnnouncement.ts +++ b/src/seqta/utils/Openers/OpenEngageParentsAnnouncement.ts @@ -1,6 +1,7 @@ import stringToHTML from "../stringToHTML"; import { settingsState } from "../listeners/SettingsState"; import { openPopup } from "./PopupManager"; +import { attachPopupMediaFullscreenIfPresent } from "./attachPopupMediaFullscreen"; /** Same hosting pattern as the privacy statement branding images (avoids page-relative extension URLs on Engage). */ const ENGAGE_PROMO_IMG_URL = @@ -49,6 +50,8 @@ export function showEngageParentsAnnouncement(onDismissed?: () => void) { `).firstChild as HTMLElement; + attachPopupMediaFullscreenIfPresent(text, ".engageParentsPromoImg"); + settingsState.engageParentsAnnouncementShown = true; openPopup({ diff --git a/src/seqta/utils/Openers/OpenPrivacyNotification.ts b/src/seqta/utils/Openers/OpenPrivacyNotification.ts index b205c641..b42268f5 100644 --- a/src/seqta/utils/Openers/OpenPrivacyNotification.ts +++ b/src/seqta/utils/Openers/OpenPrivacyNotification.ts @@ -1,6 +1,7 @@ import stringToHTML from "../stringToHTML"; import { settingsState } from "../listeners/SettingsState"; import { openPopup } from "./PopupManager"; +import { attachPopupMediaFullscreenIfPresent } from "./attachPopupMediaFullscreen"; const PRIVACY_STATEMENT_VERSION = "2025-12-19"; @@ -59,6 +60,8 @@ export function showPrivacyNotification(onDismissed?: () => void) { `).firstChild as HTMLElement; + attachPopupMediaFullscreenIfPresent(text, "img.aboutImg"); + settingsState.privacyStatementLastUpdated = "2025-12-20"; settingsState.privacyStatementShown = true; diff --git a/src/seqta/utils/Openers/OpenWhatsNewPopup.ts b/src/seqta/utils/Openers/OpenWhatsNewPopup.ts index fe5a8028..09ed6c26 100644 --- a/src/seqta/utils/Openers/OpenWhatsNewPopup.ts +++ b/src/seqta/utils/Openers/OpenWhatsNewPopup.ts @@ -2,6 +2,7 @@ import stringToHTML from "../stringToHTML"; import browser from "webextension-polyfill"; import kofi from "@/resources/kofi.png?base64"; import { openPopup } from "./PopupManager"; +import { attachPopupMediaFullscreen } from "./attachPopupMediaFullscreen"; export function OpenWhatsNewPopup(onDismissed?: () => void) { const header = stringToHTML( @@ -28,6 +29,7 @@ export function OpenWhatsNewPopup(onDismissed?: () => void) { video.appendChild(source); video.classList.add("whatsnewImg"); imageContainer.appendChild(video); + attachPopupMediaFullscreen(video); const text = stringToHTML(/* html */ `