/* PromXAI 1.4.0 — consolidated prompt media gallery. */ /* * PromXAI Theme 1.4.0 consolidated * Canonical prompt-detail gallery. * * This component owns every desktop gallery layer. The historical desktop * gallery selectors were removed from prompt-detail-content-1-3-117.css. * Mobile gallery behavior remains owned by the existing mobile component. */ /* Approved prompt language active underline. */ .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs button { position: relative !important; overflow: hidden !important; isolation: isolate !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs button.is-active { color: var(--px-text-primary) !important; border-color: rgb(var(--px-accent-purple-rgb, 124 58 237) / .22) !important; background: var(--px-surface-3) !important; box-shadow: var(--px-shadow-soft) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-prompt-tabs button.is-active::after { content: "" !important; position: absolute !important; z-index: 3 !important; inset-inline: 16% !important; bottom: 0 !important; display: block !important; height: 3px !important; border-radius: 999px 999px 0 0 !important; background: linear-gradient(90deg, #2f8cff 0%, #7b3ff2 52%, #ff2ed1 100%) !important; box-shadow: 0 -1px 10px rgb(123 63 242 / .24) !important; opacity: 1 !important; } @media (min-width: 761px) { .promxai-prompt-focus .px-prompt-detail-140 { --px-gallery-height: clamp( 500px, calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 128px), 690px ); --px-gallery-thumb-width: 100px; --px-gallery-layout-gap: clamp(16px, 1.35vw, 22px); --px-gallery-arrow-size: 46px; --px-gallery-arrow-gap: clamp(16px, 1.45vw, 24px); --px-gallery-control-height: 42px; --px-gallery-control-icon: 38px; } /* Desktop gallery container. */ .promxai-prompt-focus .px-prompt-detail-140 .px-media35 { position: sticky !important; top: calc(var(--wp-admin--admin-bar--height, 0px) + 14px) !important; z-index: 2 !important; align-self: start !important; min-width: 0 !important; direction: ltr !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-shell { position: relative !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-mobile-gallery { display: none !important; } /* --------------------------------------------------------------------- Top row --------------------------------------------------------------------- */ .promxai-prompt-focus .px-prompt-detail-140 .px-media117-topbar { position: relative !important; z-index: 80 !important; display: grid !important; grid-template-columns: max-content minmax(20px, 1fr) max-content !important; align-items: center !important; width: 100% !important; min-height: var(--px-gallery-control-height) !important; margin: 0 0 14px !important; padding: 0 2px !important; direction: ltr !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor { grid-column: 1 !important; position: static !important; inset: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: auto !important; min-width: 76px !important; height: var(--px-gallery-control-height) !important; min-height: var(--px-gallery-control-height) !important; margin: 0 !important; padding: 0 14px !important; border: 1px solid rgb(255 255 255 / .09) !important; border-radius: 14px !important; color: var(--px-text-control) !important; background: linear-gradient(180deg, rgb(21 29 46 / .58), rgb(10 16 29 / .43)) !important; box-shadow: 0 10px 24px rgb(0 0 0 / .14), inset 0 1px 0 rgb(255 255 255 / .045) !important; transform: none !important; -webkit-backdrop-filter: blur(16px) saturate(130%) !important; backdrop-filter: blur(16px) saturate(130%) !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor { border-color: rgb(91 113 157 / .15) !important; color: #33415c !important; background: linear-gradient(180deg, rgb(255 255 255 / .82), rgb(247 250 255 / .64)) !important; box-shadow: 0 9px 20px rgb(67 85 123 / .08), inset 0 1px 0 rgb(255 255 255 / .94) !important; } /* One organized glass capsule. Inner controls are not separate bubbles. */ .promxai-prompt-focus .px-prompt-detail-140 .px-media117-tool-group { grid-column: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; height: var(--px-gallery-control-height) !important; min-height: var(--px-gallery-control-height) !important; margin: 0 !important; padding: 3px 5px !important; border: 1px solid rgb(255 255 255 / .09) !important; border-radius: 15px !important; background: linear-gradient(180deg, rgb(21 29 46 / .58), rgb(10 16 29 / .43)) !important; box-shadow: 0 10px 24px rgb(0 0 0 / .14), inset 0 1px 0 rgb(255 255 255 / .045) !important; transform: none !important; -webkit-backdrop-filter: blur(17px) saturate(135%) !important; backdrop-filter: blur(17px) saturate(135%) !important; direction: ltr !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-tool-group { border-color: rgb(91 113 157 / .15) !important; background: linear-gradient(180deg, rgb(255 255 255 / .82), rgb(247 250 255 / .64)) !important; box-shadow: 0 9px 20px rgb(67 85 123 / .08), inset 0 1px 0 rgb(255 255 255 / .94) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-toolbar { position: static !important; inset: auto !important; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: 1px !important; width: auto !important; height: calc(var(--px-gallery-control-height) - 6px) !important; min-height: calc(var(--px-gallery-control-height) - 6px) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-ratio-badge, .promxai-prompt-focus .px-prompt-detail-140 .px-media35-counter, .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool { position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; margin: 0 !important; border: 0 !important; border-radius: 10px !important; outline: 0 !important; color: var(--px-text-control) !important; background: transparent !important; box-shadow: none !important; transform: none !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-ratio-badge, html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-counter, html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool { color: #33415c !important; background: transparent !important; box-shadow: none !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-ratio-badge { min-width: 48px !important; height: 34px !important; padding: 0 9px !important; direction: ltr !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1 !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-ratio-badge::after { content: "" !important; position: absolute !important; inset-inline-end: -1px !important; top: 8px !important; bottom: 8px !important; width: 1px !important; background: rgb(255 255 255 / .10) !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-ratio-badge::after { background: rgb(91 113 157 / .15) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-counter { width: auto !important; min-width: 52px !important; height: 34px !important; padding: 0 9px !important; gap: 3px !important; direction: ltr !important; font-size: 12px !important; font-weight: 900 !important; line-height: 1 !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool { width: var(--px-gallery-control-icon) !important; min-width: var(--px-gallery-control-icon) !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; cursor: pointer !important; transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool:hover, .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool:focus-visible { color: #fff !important; background: rgb(255 255 255 / .09) !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .06) !important; transform: translateY(-1px) !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool:hover, html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool:focus-visible { color: #27344e !important; background: rgb(91 113 157 / .08) !important; box-shadow: none !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool[data-favorite-id].is-saved { color: #fff !important; background: linear-gradient(145deg, #7b3ff2, #ff2ed1) !important; box-shadow: 0 7px 18px rgb(123 63 242 / .25), inset 0 1px 0 rgb(255 255 255 / .18) !important; } /* The theme button contains two SVG spans in the markup. Show one only. */ .promxai-prompt-focus .px-prompt-detail-140 .px-detail-theme-toggle .px-theme-icon { display: none !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; color: inherit !important; background: transparent !important; box-shadow: none !important; } html[data-theme="dark"] .promxai-prompt-focus .px-prompt-detail-140 .px-detail-theme-toggle .px-theme-icon--moon, html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-detail-theme-toggle .px-theme-icon--sun { display: inline-grid !important; place-items: center !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-detail-lang-toggle { width: 57px !important; min-width: 57px !important; gap: 5px !important; padding-inline: 6px !important; font-size: 11px !important; font-weight: 900 !important; direction: ltr !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-tool .px-icon, .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor .px-icon { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; transform: none !important; } /* --------------------------------------------------------------------- Main stage and arrows --------------------------------------------------------------------- */ .promxai-prompt-focus .px-prompt-detail-140 .px-media35-layout { --px-media35-visual-height: var(--px-gallery-height) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) var(--px-gallery-thumb-width) !important; gap: var(--px-gallery-layout-gap) !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; min-height: var(--px-gallery-height) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; direction: ltr !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-stage { position: relative !important; display: grid !important; grid-template-columns: var(--px-gallery-arrow-size) minmax(0, 1fr) var(--px-gallery-arrow-size) !important; grid-template-rows: var(--px-gallery-height) !important; column-gap: var(--px-gallery-arrow-gap) !important; align-items: center !important; justify-items: center !important; width: 100% !important; min-width: 0 !important; height: var(--px-gallery-height) !important; min-height: var(--px-gallery-height) !important; max-height: var(--px-gallery-height) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-arrow { position: static !important; inset: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; justify-self: center !important; width: var(--px-gallery-arrow-size) !important; min-width: var(--px-gallery-arrow-size) !important; height: var(--px-gallery-arrow-size) !important; min-height: var(--px-gallery-arrow-size) !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgb(255 255 255 / .09) !important; border-radius: 50% !important; color: var(--px-text-control) !important; background: linear-gradient(180deg, rgb(21 29 46 / .54), rgb(10 16 29 / .40)) !important; box-shadow: 0 10px 22px rgb(0 0 0 / .14), inset 0 1px 0 rgb(255 255 255 / .045) !important; transform: none !important; -webkit-backdrop-filter: blur(15px) saturate(130%) !important; backdrop-filter: blur(15px) saturate(130%) !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-arrow { border-color: rgb(91 113 157 / .15) !important; color: #33415c !important; background: linear-gradient(180deg, rgb(255 255 255 / .80), rgb(247 250 255 / .62)) !important; box-shadow: 0 8px 18px rgb(67 85 123 / .08), inset 0 1px 0 rgb(255 255 255 / .94) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-arrow--prev { grid-column: 1 !important; grid-row: 1 !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-arrow--next { grid-column: 3 !important; grid-row: 1 !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-visual { --px-active-media-ratio: .5625; position: relative !important; grid-column: 2 !important; grid-row: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: var(--px-gallery-height) !important; min-height: var(--px-gallery-height) !important; max-height: var(--px-gallery-height) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; transform: none !important; isolation: isolate !important; } /* --------------------------------------------------------------------- Visible shrink-wrapped media frame --------------------------------------------------------------------- */ .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame { position: relative !important; z-index: 1 !important; display: grid !important; place-items: center !important; box-sizing: border-box !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 4px !important; border: 1px solid transparent !important; border-radius: 28px !important; background: linear-gradient(145deg, rgb(255 255 255 / .045), rgb(255 255 255 / .010)) padding-box, linear-gradient(135deg, rgb(47 140 255 / .48), rgb(123 63 242 / .42) 52%, rgb(255 46 209 / .27)) border-box !important; box-shadow: 0 20px 48px rgb(0 0 0 / .22), 0 0 0 1px rgb(var(--px-media-rgb, 123 63 242) / .08), 0 0 34px rgb(var(--px-media-rgb, 123 63 242) / .20) !important; overflow: visible !important; transform: none !important; isolation: isolate !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::before { content: "" !important; position: absolute !important; z-index: -1 !important; inset: -12px !important; display: block !important; border-radius: 38px !important; background: radial-gradient( ellipse at center, rgb(var(--px-media-rgb, 123 63 242) / .24) 0%, rgb(47 140 255 / .10) 43%, transparent 72% ) !important; filter: blur(18px) !important; opacity: .78 !important; pointer-events: none !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame { background: linear-gradient(145deg, rgb(255 255 255 / .12), rgb(255 255 255 / .025)) padding-box, linear-gradient(135deg, rgb(62 132 225 / .36), rgb(123 63 242 / .29) 52%, rgb(144 110 181 / .20)) border-box !important; box-shadow: 0 16px 36px rgb(67 85 123 / .10), 0 0 0 1px rgb(var(--px-media-rgb, 123 63 242) / .07), 0 0 27px rgb(var(--px-media-rgb, 123 63 242) / .14) !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::before { background: radial-gradient( ellipse at center, rgb(var(--px-media-rgb, 123 63 242) / .16) 0%, rgb(62 132 225 / .07) 45%, transparent 74% ) !important; opacity: .66 !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-visual.is-media-portrait .px-media117-frame { width: auto !important; height: calc(100% - 4px) !important; aspect-ratio: var(--px-active-media-ratio) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-visual.is-media-landscape .px-media117-frame { width: calc(100% - 4px) !important; height: auto !important; aspect-ratio: var(--px-active-media-ratio) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-visual.is-media-square .px-media117-frame { width: auto !important; height: min(calc(100% - 4px), 620px) !important; aspect-ratio: 1 / 1 !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame > :where(.px-media61-main-image, .px-media61-main-video):not([hidden]) { grid-area: 1 / 1 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 23px !important; background: transparent !important; box-shadow: none !important; object-fit: contain !important; object-position: center center !important; clip-path: inset(0 round 23px) !important; transform: none !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame > .px-media61-main-video:not([hidden]) { background: #05070b !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame > :where(.px-media61-main-image, .px-media61-main-video)[hidden], .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame > :where(.px-media61-main-image, .px-media61-main-video)[aria-hidden="true"] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame .px-media-hero-control { position: absolute !important; z-index: 8 !important; inset: 50% auto auto 50% !important; width: 100px !important; min-width: 100px !important; height: 100px !important; min-height: 100px !important; transform: translate(-50%, -50%) !important; } /* --------------------------------------------------------------------- Five thumbnails and guaranteed active glow --------------------------------------------------------------------- */ .promxai-prompt-focus .px-prompt-detail-140 .px-media35-side { --px-media35-visual-height: var(--px-gallery-height) !important; position: relative !important; display: block !important; align-self: stretch !important; width: var(--px-gallery-thumb-width) !important; min-width: var(--px-gallery-thumb-width) !important; max-width: var(--px-gallery-thumb-width) !important; height: var(--px-gallery-height) !important; min-height: var(--px-gallery-height) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumbs { position: relative !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: repeat(5, minmax(78px, 106px)) !important; align-content: space-between !important; gap: 8px !important; width: 100% !important; height: var(--px-gallery-height) !important; max-height: var(--px-gallery-height) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumbs.is-centered { grid-template-rows: none !important; grid-auto-rows: 102px !important; align-content: center !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb { position: relative !important; z-index: 1 !important; display: block !important; width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgb(130 149 187 / .16) !important; border-radius: 17px !important; outline: 0 !important; background: transparent !important; box-shadow: 0 8px 18px rgb(0 0 0 / .09) !important; clip-path: none !important; overflow: visible !important; opacity: .70 !important; filter: saturate(.78) brightness(.91) contrast(.98) !important; transform: none !important; isolation: isolate !important; transition: opacity .18s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb::before { content: "" !important; position: absolute !important; z-index: -1 !important; inset: -9px !important; display: block !important; border-radius: 24px !important; background: radial-gradient( ellipse at center, rgb(var(--px-media-rgb, 123 63 242) / .42) 0%, rgb(47 140 255 / .23) 35%, rgb(255 46 209 / .13) 58%, transparent 78% ) !important; filter: blur(13px) !important; opacity: 0 !important; transform: scale(.86) !important; pointer-events: none !important; transition: opacity .20s ease, transform .20s ease !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb::after { content: "" !important; position: absolute !important; z-index: 5 !important; inset: 5px !important; display: block !important; border: 1px solid transparent !important; border-radius: 13px !important; background: linear-gradient(135deg, rgb(47 140 255 / .72), rgb(123 63 242 / .66), rgb(255 46 209 / .48)) border-box !important; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .18s ease !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb img { position: relative !important; z-index: 1 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; border-radius: 16px !important; object-fit: cover !important; object-position: center center !important; clip-path: inset(0 round 16px) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active, .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"] { z-index: 3 !important; opacity: 1 !important; filter: none !important; border-color: rgb(var(--px-media-rgb, 123 63 242) / .66) !important; background: rgb(255 255 255 / .045) !important; box-shadow: 0 0 0 2px rgb(var(--px-media-rgb, 123 63 242) / .20), 0 0 0 6px rgb(var(--px-media-rgb, 123 63 242) / .08), 0 0 30px rgb(var(--px-media-rgb, 123 63 242) / .34), 0 14px 28px rgb(0 0 0 / .14) !important; transform: translateY(-1px) scale(1.025) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active::before, .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"]::before { opacity: 1 !important; transform: scale(1) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active::after, .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"]::after { opacity: 1 !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb { border-color: rgb(80 103 147 / .14) !important; box-shadow: 0 8px 18px rgb(67 85 123 / .07) !important; opacity: .76 !important; filter: saturate(.80) brightness(.98) contrast(.98) !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active, html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"] { opacity: 1 !important; filter: none !important; border-color: rgb(var(--px-media-rgb, 123 63 242) / .54) !important; background: rgb(255 255 255 / .34) !important; box-shadow: 0 0 0 2px rgb(var(--px-media-rgb, 123 63 242) / .16), 0 0 0 6px rgb(var(--px-media-rgb, 123 63 242) / .055), 0 0 26px rgb(var(--px-media-rgb, 123 63 242) / .23), 0 12px 24px rgb(67 85 123 / .10) !important; } } @media (min-width: 761px) and (max-width: 1180px) { .promxai-prompt-focus .px-prompt-detail-140 { --px-gallery-height: clamp( 460px, calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 118px), 580px ); --px-gallery-thumb-width: 92px; --px-gallery-layout-gap: 14px; --px-gallery-arrow-size: 42px; --px-gallery-arrow-gap: 11px; --px-gallery-control-height: 40px; --px-gallery-control-icon: 35px; } .promxai-prompt-focus .px-prompt-detail-140 .px-media61-back-anchor { min-width: 68px !important; padding-inline: 11px !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media117-tool-group { padding-inline: 4px !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-ratio-badge { min-width: 43px !important; padding-inline: 7px !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-counter { min-width: 47px !important; padding-inline: 7px !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-detail-lang-toggle { width: 52px !important; min-width: 52px !important; } } /* ======================================================================== PromXAI Theme 1.4.0 consolidated — gallery window + active-thumb cleanup - ensure thumbnails hidden by JS are really hidden - keep a rolling five-item window only ======================================================================== */ @media (min-width: 761px) { .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[hidden], .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-hidden="true"][hidden] { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumbs { grid-template-rows: repeat(5, minmax(78px, 106px)) !important; grid-auto-rows: 0 !important; overflow: visible !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumbs.is-centered { grid-template-rows: none !important; grid-auto-rows: 102px !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active, .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"] { box-shadow: 0 0 0 2px rgb(var(--px-media-rgb, 123 63 242) / .22), 0 0 0 7px rgb(var(--px-media-rgb, 123 63 242) / .08), 0 0 34px rgb(var(--px-media-rgb, 123 63 242) / .34), 0 16px 30px rgb(0 0 0 / .16) !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active, html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"] { box-shadow: 0 0 0 2px rgb(var(--px-media-rgb, 123 63 242) / .16), 0 0 0 7px rgb(var(--px-media-rgb, 123 63 242) / .055), 0 0 26px rgb(var(--px-media-rgb, 123 63 242) / .22), 0 12px 24px rgb(67 85 123 / .11) !important; } } /* ======================================================================== PromXAI Theme 1.4.0 consolidated — main media softness + stronger thumbnail focus ======================================================================== */ @media (min-width: 761px) { .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame { padding: 7px !important; border-radius: 34px !important; overflow: hidden !important; background: linear-gradient(150deg, rgb(255 255 255 / .050), rgb(255 255 255 / .014)) padding-box, linear-gradient(135deg, rgb(64 140 255 / .42), rgb(123 63 242 / .36) 54%, rgb(255 46 209 / .18)) border-box !important; box-shadow: 0 18px 42px rgb(0 0 0 / .18), 0 0 0 1px rgb(var(--px-media-rgb, 123 63 242) / .07), 0 0 28px rgb(var(--px-media-rgb, 123 63 242) / .15) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::before { inset: -10px !important; border-radius: 42px !important; filter: blur(16px) !important; opacity: .58 !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::after { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; pointer-events: none !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 0 0 1px rgb(255 255 255 / .06) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame > :where(.px-media61-main-image, .px-media61-main-video):not([hidden]) { border-radius: 27px !important; clip-path: inset(0 round 27px) !important; overflow: hidden !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame { background: linear-gradient(150deg, rgb(255 255 255 / .16), rgb(255 255 255 / .04)) padding-box, linear-gradient(135deg, rgb(62 132 225 / .28), rgb(123 63 242 / .22) 56%, rgb(144 110 181 / .14)) border-box !important; box-shadow: 0 16px 36px rgb(67 85 123 / .08), 0 0 0 1px rgb(var(--px-media-rgb, 123 63 242) / .05), 0 0 24px rgb(var(--px-media-rgb, 123 63 242) / .09) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb { border-radius: 24px !important; overflow: hidden !important; background: color-mix(in srgb, var(--px-canvas) 22%, transparent) !important; box-shadow: 0 8px 20px rgb(0 0 0 / .08) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb img { transform: scale(1.03) !important; filter: blur(2.6px) saturate(.62) brightness(.93) contrast(.94) !important; opacity: .66 !important; transition: filter .22s ease, opacity .22s ease, transform .22s ease !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active img, .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"] img { transform: scale(1) !important; filter: none !important; opacity: 1 !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active, .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"] { background: linear-gradient(180deg, rgb(255 255 255 / .10), rgb(255 255 255 / .04)) !important; box-shadow: 0 0 0 2px rgb(var(--px-media-rgb, 123 63 242) / .18), 0 0 0 7px rgb(var(--px-media-rgb, 123 63 242) / .06), 0 0 28px rgb(var(--px-media-rgb, 123 63 242) / .22), 0 14px 28px rgb(0 0 0 / .14) !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb img { filter: blur(2.3px) saturate(.66) brightness(.95) contrast(.95) !important; opacity: .62 !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active, html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"] { box-shadow: 0 0 0 2px rgb(var(--px-media-rgb, 123 63 242) / .13), 0 0 0 7px rgb(var(--px-media-rgb, 123 63 242) / .045), 0 0 22px rgb(var(--px-media-rgb, 123 63 242) / .14), 0 12px 24px rgb(67 85 123 / .10) !important; } } /* ======================================================================== PromXAI Theme 1.4.0 consolidated — balanced thumbnail de-emphasis ======================================================================== */ @media (min-width: 761px) { .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb:not(.is-active):not([aria-current="true"]) { opacity: .90 !important; filter: none !important; background: color-mix(in srgb, var(--px-canvas) 12%, transparent) !important; box-shadow: 0 7px 16px rgb(0 0 0 / .065) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb:not(.is-active):not([aria-current="true"]) img { transform: scale(1.012) !important; filter: blur(1.05px) saturate(.84) brightness(.98) contrast(.98) !important; opacity: .88 !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active, .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"] { opacity: 1 !important; filter: none !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active img, .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"] img { transform: scale(1) !important; filter: none !important; opacity: 1 !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb:not(.is-active):not([aria-current="true"]) { opacity: .92 !important; filter: none !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb:not(.is-active):not([aria-current="true"]) img { filter: blur(.9px) saturate(.87) brightness(.99) contrast(.985) !important; opacity: .90 !important; } } /* ======================================================================== PromXAI Theme 1.4.0 consolidated — unify light thumbnail clarity with dark mode ======================================================================== */ @media (min-width: 981px) { html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb:not(.is-active):not([aria-current="true"]) { opacity: .95 !important; filter: none !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb:not(.is-active):not([aria-current="true"]) img { filter: blur(.6px) saturate(.92) brightness(.995) contrast(.99) !important; opacity: .93 !important; transform: scale(1.006) !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active, html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"] { opacity: 1 !important; filter: none !important; background: linear-gradient(180deg, #ffffff, #f7f9ff) !important; box-shadow: 0 0 0 3px rgb(124 58 237 / .12), 0 0 22px rgb(124 58 237 / .10), 0 14px 26px rgba(96, 110, 144, .15) !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb.is-active img, html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media35-thumb[aria-current="true"] img { filter: none !important; opacity: 1 !important; transform: none !important; } } /* ======================================================================== PromXAI Theme 1.4.0 consolidated — prevent browser selection tint on gallery media ======================================================================== */ .promxai-prompt-focus .px-prompt-detail-140 :where( [data-media-stage], [data-main-visual], [data-media-frame], .px-media61-main-image, .px-media61-main-video, .px-media35-arrow, .px-media35-thumb ) { -webkit-user-select: none !important; user-select: none !important; -webkit-user-drag: none !important; -webkit-touch-callout: none !important; -webkit-tap-highlight-color: transparent !important; } .promxai-prompt-focus .px-prompt-detail-140 [data-media-stage]::selection, .promxai-prompt-focus .px-prompt-detail-140 [data-main-visual]::selection, .promxai-prompt-focus .px-prompt-detail-140 [data-media-frame]::selection, .promxai-prompt-focus .px-prompt-detail-140 .px-media61-main-image::selection { background: transparent !important; color: inherit !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media61-main-image { outline: 0 !important; caret-color: transparent !important; } /* ======================================================================== PromXAI Theme 1.4.0 consolidated — explicit previous/next arrow directions ======================================================================== */ @media (min-width: 761px) { .promxai-prompt-focus .px-prompt-detail-140 .px-media35-arrow--prev svg { transform: rotate(180deg) !important; transform-origin: center !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media35-arrow--next svg { transform: rotate(0deg) !important; transform-origin: center !important; } } /* ======================================================================== PromXAI Theme 1.4.0 consolidated — smoother main media crop + cleaner primary frame ======================================================================== */ @media (min-width: 761px) { .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame { padding: 6px !important; border-radius: 32px !important; overflow: hidden !important; background: linear-gradient(145deg, rgb(255 255 255 / .040), rgb(255 255 255 / .010)) padding-box, linear-gradient(135deg, rgb(64 140 255 / .46), rgb(123 63 242 / .40) 54%, rgb(255 46 209 / .22)) border-box !important; box-shadow: 0 18px 42px rgb(0 0 0 / .22), 0 0 0 1px rgb(var(--px-media-rgb, 123 63 242) / .08), 0 0 24px rgb(var(--px-media-rgb, 123 63 242) / .12) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::before { display: none !important; content: none !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::after { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; pointer-events: none !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 1px rgb(255 255 255 / .05) !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame > :where(.px-media61-main-image, .px-media61-main-video):not([hidden]) { border-radius: 26px !important; clip-path: none !important; overflow: hidden !important; object-fit: contain !important; object-position: center center !important; } html[data-theme="light"] .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame { background: linear-gradient(145deg, rgb(255 255 255 / .12), rgb(255 255 255 / .04)) padding-box, linear-gradient(135deg, rgb(62 132 225 / .24), rgb(123 63 242 / .20) 54%, rgb(144 110 181 / .12)) border-box !important; box-shadow: 0 16px 32px rgb(67 85 123 / .10), 0 0 0 1px rgb(var(--px-media-rgb, 123 63 242) / .05), 0 0 18px rgb(var(--px-media-rgb, 123 63 242) / .07) !important; } } @media (max-width: 760px) { .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame { padding: 5px !important; border-radius: 26px !important; overflow: hidden !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame::before { display: none !important; content: none !important; } .promxai-prompt-focus .px-prompt-detail-140 .px-media117-frame > :where(.px-media61-main-image, .px-media61-main-video):not([hidden]) { border-radius: 20px !important; clip-path: none !important; overflow: hidden !important; } } /* RC76 — sanctioned image download action. The toolbar's historical `display:inline-flex!important` must not override the semantic hidden state while the active medium is a video or has no downloadable attachment. */ .promxai-prompt-focus .px-prompt-detail-140 [data-prompt-download-active][hidden] { display: none !important; } .promxai-prompt-focus .px-prompt-detail-140 a.px-media35-tool[data-prompt-download-active] { text-decoration: none !important; }