diff --git a/examples/html-eject-frosted/index.html b/examples/html-eject-frosted/index.html index 72d8b6fa..72a559ac 100644 --- a/examples/html-eject-frosted/index.html +++ b/examples/html-eject-frosted/index.html @@ -51,50 +51,50 @@
- - - - - - - - - - - Play - Pause - - - + + + + + + Play + Pause
- - - - - - - - - - - - - - - - - + + + + + + + + +
- + @@ -102,7 +102,7 @@ - + - - - - - - - - - - - Enter Fullscreen - Exit Fullscreen - - - + + + + + + Enter Fullscreen + Exit Fullscreen
diff --git a/examples/html-eject-frosted/src/frosted.css b/examples/html-eject-frosted/src/frosted.css index 0f60fbc0..6de40b6d 100644 --- a/examples/html-eject-frosted/src/frosted.css +++ b/examples/html-eject-frosted/src/frosted.css @@ -337,7 +337,11 @@ media-popover { } /* Tooltip Component Styles */ -media-tooltip-popup { +media-tooltip { + margin: 0; + border: none; + box-shadow: none; + background: transparent; color: oklab(1 0 0); padding: 0.25rem 0.625rem; border-radius: calc(infinity * 1px); @@ -349,12 +353,12 @@ media-tooltip-popup { white-space: nowrap; } -media-tooltip-popup[data-paused] .play-tooltip, -media-tooltip-popup:not([data-paused]) .pause-tooltip { +[data-paused] + media-tooltip .play-tooltip, +:not([data-paused]) + media-tooltip .pause-tooltip { display: block; } -media-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip, -media-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip { +[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip, +:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip { display: block; } diff --git a/examples/html-eject-minimal/index.html b/examples/html-eject-minimal/index.html index 219de32e..4f737bb3 100644 --- a/examples/html-eject-minimal/index.html +++ b/examples/html-eject-minimal/index.html @@ -52,21 +52,22 @@
- - - - - - - - - - - Play - Pause - - - + + + + + + + Play + Pause
@@ -79,27 +80,27 @@
- - - - - - - - - - - - - - - - - + + + + + + + + +
- + @@ -107,7 +108,7 @@ - + - - - - - - - - - - - Enter Fullscreen - Exit Fullscreen - - - + + + + + + Enter Fullscreen + Exit Fullscreen
diff --git a/examples/html-eject-minimal/src/minimal.css b/examples/html-eject-minimal/src/minimal.css index 2d774ff2..2bf66d50 100644 --- a/examples/html-eject-minimal/src/minimal.css +++ b/examples/html-eject-minimal/src/minimal.css @@ -314,7 +314,11 @@ media-popover { } /* Tooltip Component Styles */ -media-tooltip-popup { +media-tooltip { + margin: 0; + border: none; + box-shadow: none; + background: transparent; color: oklab(1 0 0); padding: 0.25rem 0.5rem; border-radius: 0.25rem; @@ -326,12 +330,12 @@ media-tooltip-popup { 0 2px 4px -2px oklab(0 0 0 / 0.1); } @media (prefers-reduced-transparency: reduce) { - media-tooltip-popup { + media-tooltip { background-color: oklab(0 0 0 / 0.7); } } @media (prefers-contrast: more) { - media-tooltip-popup { + media-tooltip { background-color: oklab(0 0 0 / 0.9); } } @@ -341,12 +345,12 @@ media-tooltip-popup { white-space: nowrap; } -media-tooltip-popup[data-paused] .play-tooltip, -media-tooltip-popup:not([data-paused]) .pause-tooltip { +[data-paused] + media-tooltip .play-tooltip, +:not([data-paused]) + media-tooltip .pause-tooltip { display: block; } -media-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip, -media-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip { +[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip, +:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip { display: block; } diff --git a/packages/html/src/define/media-tooltip.ts b/packages/html/src/define/media-tooltip.ts index d8232f42..253c3b8a 100644 --- a/packages/html/src/define/media-tooltip.ts +++ b/packages/html/src/define/media-tooltip.ts @@ -1,10 +1,4 @@ -import { TooltipArrowElement, TooltipPopupElement, TooltipPortalElement, TooltipPositionerElement, TooltipRootElement, TooltipTriggerElement } from '@/elements/tooltip'; +import { TooltipElement } from '@/elements/tooltip'; import { defineCustomElement } from '@/utils/custom-element'; -defineCustomElement('media-tooltip', TooltipRootElement); -defineCustomElement('media-tooltip-trigger', TooltipTriggerElement); -defineCustomElement('media-tooltip-portal', TooltipPortalElement); -defineCustomElement('media-tooltip-positioner', TooltipPositionerElement); -defineCustomElement('media-tooltip-portal', TooltipPortalElement); -defineCustomElement('media-tooltip-popup', TooltipPopupElement); -defineCustomElement('media-tooltip-arrow', TooltipArrowElement); +defineCustomElement('media-tooltip', TooltipElement); diff --git a/packages/html/src/elements/popover.ts b/packages/html/src/elements/popover.ts index 2d483c96..c47c82b1 100644 --- a/packages/html/src/elements/popover.ts +++ b/packages/html/src/elements/popover.ts @@ -96,7 +96,7 @@ export class PopoverElement extends HTMLElement { } get #triggerElement(): HTMLElement | null { - return getDocumentOrShadowRoot(this)?.querySelector(`[popovertarget="${this.id}"]`) as HTMLElement | null; + return getDocumentOrShadowRoot(this)?.querySelector(`[commandfor="${this.id}"]`) as HTMLElement | null; } #setOpen(open: boolean): void { @@ -128,6 +128,9 @@ export class PopoverElement extends HTMLElement { } else { this.hidePopover(); } + + this.#cleanup?.(); + this.#cleanup = null; } } diff --git a/packages/html/src/elements/tooltip.ts b/packages/html/src/elements/tooltip.ts index 8fc7c1aa..a79965f6 100644 --- a/packages/html/src/elements/tooltip.ts +++ b/packages/html/src/elements/tooltip.ts @@ -2,50 +2,63 @@ import type { Placement } from '@floating-ui/dom'; import type { MediaContainerElement } from '@/media/media-container'; import { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'; -import { uniqueId } from '@videojs/utils'; +import { getDocumentOrShadowRoot } from '@videojs/utils/dom'; -export class TooltipRootElement extends HTMLElement { +export class TooltipElement extends HTMLElement { #open = false; #hoverTimeout: ReturnType | null = null; #cleanup: (() => void) | null = null; #arrowElement: HTMLElement | null = null; #pointerPosition = { x: 0, y: 0 }; #transitionStatus: 'initial' | 'open' | 'close' | 'unmounted' = 'initial'; - - constructor() { - super(); - - if (globalThis.matchMedia?.('(hover: hover)')?.matches) { - this.addEventListener('pointerenter', this); - this.addEventListener('pointerleave', this); - this.addEventListener('pointermove', this); - } - } - - handleEvent(event: Event): void { - if (event.type === 'pointerenter') { - this.#handlePointerEnter(); - } else if (event.type === 'pointerleave') { - this.#handlePointerLeave(event as PointerEvent); - } else if (event.type === 'pointermove') { - this.#handlePointerMove(event as PointerEvent); - } - } + #abortController: AbortController | null = null; connectedCallback(): void { + this.setAttribute('role', 'tooltip'); + + this.#abortController ??= new AbortController(); + const { signal } = this.#abortController; + + const trigger = this.#triggerElement as HTMLElement; + if (trigger) { + if (globalThis.matchMedia?.('(hover: hover)')?.matches) { + trigger.addEventListener('pointerenter', this, { signal }); + trigger.addEventListener('pointerleave', this, { signal }); + trigger.addEventListener('pointermove', this, { signal }); + } + } + this.#updateVisibility(); } disconnectedCallback(): void { this.#clearHoverTimeout(); this.#cleanup?.(); + this.#abortController?.abort(); + this.#abortController = null; this.#transitionStatus = 'unmounted'; this.#updateVisibility(); } + handleEvent(event: Event): void { + switch (event.type) { + case 'pointerenter': + this.#handlePointerEnter(); + break; + case 'pointerleave': + this.#handlePointerLeave(event as PointerEvent); + break; + case 'pointermove': + this.#handlePointerMove(event as PointerEvent); + break; + default: + break; + } + } + static get observedAttributes(): string[] { - return ['delay', 'close-delay', 'track-cursor-axis']; + return ['delay', 'close-delay', 'track-cursor-axis', 'side', 'side-offset', 'collision-padding']; } get delay(): number { @@ -61,20 +74,20 @@ export class TooltipRootElement extends HTMLElement { return value === 'x' || value === 'y' || value === 'both' ? value : undefined; } - get #triggerElement(): TooltipTriggerElement | null { - return this.querySelector('media-tooltip-trigger') as TooltipTriggerElement | null; + get side(): Placement { + return (this.getAttribute('side') as Placement) ?? 'top'; } - get #portalElement(): TooltipPortalElement | null { - return this.querySelector('media-tooltip-portal') as TooltipPortalElement | null; + get sideOffset(): number { + return Number.parseInt(this.getAttribute('side-offset') ?? '0', 10); } - get #positionerElement(): TooltipPositionerElement | null { - return this.#portalElement?.querySelector('media-tooltip-positioner') as TooltipPositionerElement | null; + get collisionPadding(): number { + return Number.parseInt(this.getAttribute('collision-padding') ?? '0', 10); } - get #popupElement(): TooltipPopupElement | null { - return this.#portalElement?.querySelector('media-tooltip-popup') as TooltipPopupElement | null; + get #triggerElement(): HTMLElement | null { + return getDocumentOrShadowRoot(this)?.querySelector(`[commandfor="${this.id}"]`) as HTMLElement | null; } #setOpen(open: boolean): void { @@ -83,58 +96,57 @@ export class TooltipRootElement extends HTMLElement { this.#open = open; if (open) { + this.#setupFloating(); + this.#transitionStatus = 'initial'; + this.#updateVisibility(); + + this.showPopover(); + requestAnimationFrame(() => { this.#transitionStatus = 'open'; this.#updateVisibility(); }); } else { this.#transitionStatus = 'close'; - } + this.#updateVisibility(); - this.#updateVisibility(); + const transitions = this.getAnimations().filter(anim => anim instanceof CSSTransition); + if (transitions.length > 0) { + Promise.all(transitions.map(t => t.finished)) + .then(() => this.hidePopover()) + .catch(() => this.hidePopover()); + } else { + this.hidePopover(); + } - if (open) { - this.#setupFloating(); - } else { this.#cleanup?.(); this.#cleanup = null; } } #updateVisibility(): void { - this.style.display = 'contents'; + this.toggleAttribute('data-starting-style', this.#transitionStatus === 'initial'); + this.toggleAttribute('data-open', this.#transitionStatus === 'initial' || this.#transitionStatus === 'open'); + this.toggleAttribute('data-ending-style', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted'); + this.toggleAttribute('data-closed', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted'); - if (this.#popupElement) { - const placement = this.#positionerElement?.side ?? 'top'; - this.#popupElement.setAttribute('data-side', placement); - - this.#popupElement.toggleAttribute('data-starting-style', this.#transitionStatus === 'initial'); - this.#popupElement.toggleAttribute('data-open', this.#transitionStatus === 'initial' || this.#transitionStatus === 'open'); - this.#popupElement.toggleAttribute('data-ending-style', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted'); - this.#popupElement.toggleAttribute('data-closed', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted'); - } - - const triggerElement = this.#triggerElement?.firstElementChild as HTMLElement; + const triggerElement = this.#triggerElement as HTMLElement; if (triggerElement) { triggerElement.toggleAttribute('data-popup-open', this.#open); } } #setupFloating(): void { - if (!this.#triggerElement || !this.#popupElement) return; + const trigger = this.#triggerElement as HTMLElement; + if (!trigger) return; - const trigger = this.#triggerElement.firstElementChild as HTMLElement; - const popup = this.#popupElement; - - if (!trigger || !popup) return; - - const placement = this.#positionerElement?.side ?? 'top'; - const sideOffset = this.#positionerElement?.sideOffset ?? 0; - const collisionPadding = this.#positionerElement?.collisionPadding ?? 0; + const placement = this.side; + const sideOffset = this.sideOffset; + const collisionPadding = this.collisionPadding; const mediaContainer = this.closest('media-container') as MediaContainerElement; - this.#arrowElement = popup.querySelector('media-tooltip-arrow') as HTMLElement; + this.#arrowElement = this.querySelector('media-tooltip-arrow') as HTMLElement; const updatePosition = () => { const middleware = [ @@ -194,17 +206,16 @@ export class TooltipRootElement extends HTMLElement { } : trigger; - computePosition(referenceElement, popup, { + computePosition(referenceElement, this, { placement, middleware, - }).then(({ x, y, middlewareData, placement: computedPlacement }: { x: number; y: number; middlewareData: any; placement: Placement }) => { - Object.assign(popup.style, { + strategy: 'fixed', + }).then(({ x, y, middlewareData }: { x: number; y: number; middlewareData: any }) => { + Object.assign(this.style, { left: `${x}px`, top: `${y}px`, }); - popup.setAttribute('data-side', computedPlacement); - if (this.#arrowElement && middlewareData.arrow) { const { x: arrowX, y: arrowY } = middlewareData.arrow; Object.assign(this.#arrowElement.style, { @@ -218,7 +229,7 @@ export class TooltipRootElement extends HTMLElement { updatePosition(); if (!this.trackCursorAxis) { - this.#cleanup = autoUpdate(trigger, popup, updatePosition); + this.#cleanup = autoUpdate(trigger, this, updatePosition); } } @@ -230,7 +241,7 @@ export class TooltipRootElement extends HTMLElement { #clearHoverTimeout(): void { if (this.#hoverTimeout) { - clearTimeout(this.#hoverTimeout); + globalThis.clearTimeout(this.#hoverTimeout); this.#hoverTimeout = null; } } @@ -259,154 +270,3 @@ export class TooltipRootElement extends HTMLElement { } } } - -export class TooltipTriggerElement extends HTMLElement { - connectedCallback(): void { - this.style.display = 'contents'; - - const triggerElement = this.firstElementChild as HTMLElement; - if (triggerElement) { - const mutationObserver = new MutationObserver((mutations) => { - mutations.forEach((mutation) => { - if (mutation.type === 'attributes') { - const rootElement = this.closest('media-tooltip') as TooltipRootElement; - let popupElement = rootElement.querySelector('media-tooltip-popup') as TooltipPopupElement; - - if (!popupElement) { - const portalElement = rootElement.querySelector('media-tooltip-portal') as TooltipPortalElement; - if (!portalElement) { - return; - } - - popupElement = portalElement.querySelector('media-tooltip-popup') as TooltipPopupElement; - if (!popupElement) { - return; - } - } - - const attributeName = mutation.attributeName; - if (!attributeName || !attributeName.startsWith('data-')) { - return; - } - - const attributeValue = triggerElement.getAttribute(attributeName); - if (attributeValue !== null) { - popupElement.setAttribute(attributeName, attributeValue); - } else { - popupElement.removeAttribute(attributeName); - } - } - }); - }); - - mutationObserver.observe(triggerElement, { - attributes: true, - }); - } - } -} - -export class TooltipPortalElement extends HTMLElement { - #portal: HTMLElement | null = null; - - connectedCallback(): void { - this.style.display = 'contents'; - this.#setupPortal(); - } - - disconnectedCallback(): void { - this.#cleanupPortal(); - } - - querySelector(selector: string): HTMLElement | null { - return this.#portal?.querySelector(selector) ?? null; - } - - #setupPortal(): void { - const portalId = this.getAttribute('root-id') ?? '@default_portal_id'; - if (!portalId) return; - - /* @TODO We need to make sure portal logic is non-brittle longer term (CJP) */ - // NOTE: Hacky solution in part to ensure styling propogates from skin to container's baked in portal (TL;DR - Shadow DOM vs. Light DOM CSS) (CJP) - const portalContainer - = ((this.getRootNode() as ShadowRoot | Document).getElementById(portalId) - ?? (this.getRootNode() as ShadowRoot | Document) - .querySelector('media-container') - ?.shadowRoot - ?.getElementById(portalId)) - ? (this.getRootNode() as ShadowRoot | Document).querySelector('media-container') - : undefined; - if (!portalContainer) return; - - this.#portal = document.createElement('div'); - this.#portal.slot = 'portal'; - this.#portal.id = uniqueId(); - portalContainer.append(this.#portal); - - this.#portal.append(...this.children); - } - - #cleanupPortal(): void { - if (!this.#portal) return; - - // Move children back to the portal element - this.append(...this.#portal.children); - this.#portal.remove(); - this.#portal = null; - } -} - -export class TooltipPositionerElement extends HTMLElement { - connectedCallback(): void { - this.style.display = 'contents'; - - const popup = this.firstElementChild as HTMLElement; - if (popup) { - Object.assign(popup.style, { - position: 'absolute', - top: '0', - left: '0', - }); - } - } - - get side(): Placement { - return (this.getAttribute('side') as Placement) ?? 'top'; - } - - get sideOffset(): number { - return Number.parseInt(this.getAttribute('side-offset') ?? '0', 10); - } - - get collisionPadding(): number { - return Number.parseInt(this.getAttribute('collision-padding') ?? '0', 10); - } -} - -export class TooltipPopupElement extends HTMLElement { - connectedCallback(): void { - this.setAttribute('role', 'tooltip'); - } -} - -export class TooltipArrowElement extends HTMLElement { - connectedCallback(): void { - this.setAttribute('aria-hidden', 'true'); - } -} - -export const TooltipElement: { - Root: typeof TooltipRootElement; - Trigger: typeof TooltipTriggerElement; - Portal: typeof TooltipPortalElement; - Positioner: typeof TooltipPositionerElement; - Popup: typeof TooltipPopupElement; - Arrow: typeof TooltipArrowElement; -} = { - Root: TooltipRootElement, - Trigger: TooltipTriggerElement, - Portal: TooltipPortalElement, - Positioner: TooltipPositionerElement, - Popup: TooltipPopupElement, - Arrow: TooltipArrowElement, -}; diff --git a/packages/html/src/skins/frosted/index.ts b/packages/html/src/skins/frosted/index.ts index 591f51d6..f970bc7f 100644 --- a/packages/html/src/skins/frosted/index.ts +++ b/packages/html/src/skins/frosted/index.ts @@ -27,50 +27,51 @@ export function getTemplateHTML() {
- - - - - - - - - - - Play - Pause - - - + + + + + + + Play + Pause
- - - - - - - - - - - - - - - - - + + + + + + + + +
- + @@ -78,7 +79,7 @@ export function getTemplateHTML() { - - - - - - - - - - - Enter Fullscreen - Exit Fullscreen - - - + + + + + + Enter Fullscreen + Exit Fullscreen
diff --git a/packages/html/src/skins/frosted/styles.css b/packages/html/src/skins/frosted/styles.css index f3707baf..3ac262c5 100644 --- a/packages/html/src/skins/frosted/styles.css +++ b/packages/html/src/skins/frosted/styles.css @@ -335,7 +335,11 @@ media-popover { } /* Tooltip Component Styles */ -media-tooltip-popup { +media-tooltip { + margin: 0; + border: none; + box-shadow: none; + background: transparent; color: oklab(1 0 0); padding: 0.25rem 0.625rem; border-radius: calc(infinity * 1px); @@ -347,12 +351,12 @@ media-tooltip-popup { white-space: nowrap; } -media-tooltip-popup[data-paused] .play-tooltip, -media-tooltip-popup:not([data-paused]) .pause-tooltip { +[data-paused] + media-tooltip .play-tooltip, +:not([data-paused]) + media-tooltip .pause-tooltip { display: block; } -media-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip, -media-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip { +[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip, +:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip { display: block; } diff --git a/packages/html/src/skins/minimal/index.ts b/packages/html/src/skins/minimal/index.ts index 6e9db60f..bdb6f085 100644 --- a/packages/html/src/skins/minimal/index.ts +++ b/packages/html/src/skins/minimal/index.ts @@ -28,21 +28,22 @@ export function getTemplateHTML() {
- - - - - - - - - - - Play - Pause - - - + + + + + + + Play + Pause
@@ -55,27 +56,27 @@ export function getTemplateHTML() {
- - - - - - - - - - - - - - - - - + + + + + + + + +
- + @@ -83,7 +84,7 @@ export function getTemplateHTML() { - - - - - - - - - - - Enter Fullscreen - Exit Fullscreen - - - + + + + + + Enter Fullscreen + Exit Fullscreen
diff --git a/packages/html/src/skins/minimal/styles.css b/packages/html/src/skins/minimal/styles.css index 082499be..9668ffd7 100644 --- a/packages/html/src/skins/minimal/styles.css +++ b/packages/html/src/skins/minimal/styles.css @@ -312,7 +312,11 @@ media-popover { } /* Tooltip Component Styles */ -media-tooltip-popup { +media-tooltip { + margin: 0; + border: none; + box-shadow: none; + background: transparent; color: oklab(1 0 0); padding: 0.25rem 0.5rem; border-radius: 0.25rem; @@ -324,12 +328,12 @@ media-tooltip-popup { 0 2px 4px -2px oklab(0 0 0 / 0.1); } @media (prefers-reduced-transparency: reduce) { - media-tooltip-popup { + media-tooltip { background-color: oklab(0 0 0 / 0.7); } } @media (prefers-contrast: more) { - media-tooltip-popup { + media-tooltip { background-color: oklab(0 0 0 / 0.9); } } @@ -339,12 +343,12 @@ media-tooltip-popup { white-space: nowrap; } -media-tooltip-popup[data-paused] .play-tooltip, -media-tooltip-popup:not([data-paused]) .pause-tooltip { +[data-paused] + media-tooltip .play-tooltip, +:not([data-paused]) + media-tooltip .pause-tooltip { display: block; } -media-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip, -media-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip { +[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip, +:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip { display: block; } diff --git a/site/src/utils/ejectCodeGenerator.ts b/site/src/utils/ejectCodeGenerator.ts index c3d3d873..e5537b7e 100644 --- a/site/src/utils/ejectCodeGenerator.ts +++ b/site/src/utils/ejectCodeGenerator.ts @@ -983,58 +983,58 @@ export function generateHTMLMarkup(skin: Skin): string {
- - - - - - - - - - - Play - Pause - - - + + + + + + Play + Pause
- - - - - - - - - - - - - - - - - + + + + + + + + +
- + - - + - - - - - - - - - - - Enter Fullscreen - Exit Fullscreen - - - + + + + + + Enter Fullscreen + Exit Fullscreen
@@ -1082,21 +1082,21 @@ export function generateHTMLMarkup(skin: Skin): string {
- - - - - - - - - - - Play - Pause - - - + + + + + + Play + Pause
@@ -1109,35 +1109,35 @@ export function generateHTMLMarkup(skin: Skin): string {
- - - - - - - - - - - - - - - - - + + + + + + + + +
- + - - + - - - - - - - - - - - Enter Fullscreen - Exit Fullscreen - - - + + + + + + Enter Fullscreen + Exit Fullscreen
@@ -1523,7 +1521,11 @@ media-popover { } /* Tooltip Component Styles */ -media-tooltip-popup { +media-tooltip { + margin: 0; + border: none; + box-shadow: none; + background: transparent; color: oklab(1 0 0); padding: 0.25rem 0.625rem; border-radius: calc(infinity * 1px); @@ -1535,13 +1537,13 @@ media-tooltip-popup { white-space: nowrap; } -media-tooltip-popup[data-paused] .play-tooltip, -media-tooltip-popup:not([data-paused]) .pause-tooltip { +[data-paused] + media-tooltip .play-tooltip, +:not([data-paused]) + media-tooltip .pause-tooltip { display: block; } -media-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip, -media-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip { +[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip, +:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip { display: block; }`; } else { @@ -1861,7 +1863,11 @@ media-popover { } /* Tooltip Component Styles */ -media-tooltip-popup { +media-tooltip { + margin: 0; + border: none; + box-shadow: none; + background: transparent; color: oklab(1 0 0); padding: 0.25rem 0.5rem; border-radius: 0.25rem; @@ -1873,12 +1879,12 @@ media-tooltip-popup { 0 2px 4px -2px oklab(0 0 0 / 0.1); } @media (prefers-reduced-transparency: reduce) { - media-tooltip-popup { + media-tooltip { background-color: oklab(0 0 0 / 0.7); } } @media (prefers-contrast: more) { - media-tooltip-popup { + media-tooltip { background-color: oklab(0 0 0 / 0.9); } } @@ -1888,13 +1894,13 @@ media-tooltip-popup { white-space: nowrap; } -media-tooltip-popup[data-paused] .play-tooltip, -media-tooltip-popup:not([data-paused]) .pause-tooltip { +[data-paused] + media-tooltip .play-tooltip, +:not([data-paused]) + media-tooltip .pause-tooltip { display: block; } -media-tooltip-popup[data-fullscreen] .fullscreen-exit-tooltip, -media-tooltip-popup:not([data-fullscreen]) .fullscreen-enter-tooltip { +[data-fullscreen] + media-tooltip .fullscreen-exit-tooltip, +:not([data-fullscreen]) + media-tooltip .fullscreen-enter-tooltip { display: block; }`; }