diff options
11 files changed, 251 insertions, 56 deletions
diff --git a/.changeset/rude-eggs-hunt.md b/.changeset/rude-eggs-hunt.md new file mode 100644 index 000000000..4bbe7c9c9 --- /dev/null +++ b/.changeset/rude-eggs-hunt.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Add animations, shadows and general styling tweaks to the Dev Overlay to better match the intended design. diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index 4ae5e7138..dfeb7ee80 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -2318,6 +2318,7 @@ export interface DevOverlayPlugin { name: string; icon: Icon; init?(canvas: ShadowRoot, eventTarget: EventTarget): void | Promise<void>; + beforeTogglingOff?(canvas: ShadowRoot): boolean | Promise<boolean>; } export type DevOverlayMetadata = Window & diff --git a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts index 61c5e779b..7336f9d06 100644 --- a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts +++ b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts @@ -63,13 +63,13 @@ document.addEventListener('DOMContentLoaded', async () => { target.querySelector('.notification')?.toggleAttribute('data-active', newState); }); - eventTarget.addEventListener('toggle-plugin', (evt) => { + eventTarget.addEventListener('toggle-plugin', async (evt) => { let newState = undefined; if (evt instanceof CustomEvent) { newState = evt.detail.state ?? true; } - overlay.togglePluginStatus(plugin, newState); + await overlay.togglePluginStatus(plugin, newState); }); return plugin; diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts index 50b015ca1..e0ab02e48 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts @@ -51,7 +51,7 @@ export class AstroDevOverlay extends HTMLElement { display: flex; gap: 8px; align-items: center; - transition: bottom 0.2s ease-in-out; + transition: bottom 0.35s cubic-bezier(0.485, -0.050, 0.285, 1.505); pointer-events: none; } @@ -72,11 +72,10 @@ export class AstroDevOverlay extends HTMLElement { height: 56px; overflow: hidden; pointer-events: auto; - background: linear-gradient(180deg, #13151A 0%, rgba(19, 21, 26, 0.88) 100%); - box-shadow: 0px 0px 0px 0px #13151A4D; border: 1px solid #343841; border-radius: 9999px; + box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01); } #dev-bar .item { @@ -187,16 +186,6 @@ export class AstroDevOverlay extends HTMLElement { width: 1px; } - astro-dev-overlay-plugin-canvas { - position: absolute; - top: 0; - left: 0; - } - - astro-dev-overlay-plugin-canvas:not([data-active]) { - display: none; - } - #minimize-button { width: 32px; height: 32px; @@ -263,7 +252,7 @@ export class AstroDevOverlay extends HTMLElement { } // Create plugin canvases - this.plugins.forEach((plugin) => { + this.plugins.forEach(async (plugin) => { if (!this.hasBeenInitialized) { console.log(`Creating plugin canvas for ${plugin.id}`); const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas'); @@ -271,7 +260,7 @@ export class AstroDevOverlay extends HTMLElement { this.shadowRoot?.append(pluginCanvas); } - this.togglePluginStatus(plugin, plugin.active); + await this.togglePluginStatus(plugin, plugin.active); }); // Init plugin lazily - This is safe to do here because only plugins that are not initialized yet will be affected @@ -306,7 +295,7 @@ export class AstroDevOverlay extends HTMLElement { await this.initPlugin(plugin); } - this.togglePluginStatus(plugin); + await this.togglePluginStatus(plugin); }); }); @@ -418,30 +407,52 @@ export class AstroDevOverlay extends HTMLElement { } getPluginCanvasById(id: string) { - return this.shadowRoot.querySelector(`astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]`); + return this.shadowRoot.querySelector<HTMLElement>( + `astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]` + ); } - togglePluginStatus(plugin: DevOverlayPlugin, status?: boolean) { - plugin.active = status ?? !plugin.active; + /** + * @param plugin The plugin to toggle the status of + * @param newStatus Optionally, force the plugin into a specific state + */ + async togglePluginStatus(plugin: DevOverlayPlugin, newStatus?: boolean) { + const pluginCanvas = this.getPluginCanvasById(plugin.id); + if (!pluginCanvas) return; + + if (plugin.active && !newStatus && plugin.beforeTogglingOff) { + const shouldToggleOff = await plugin.beforeTogglingOff(pluginCanvas.shadowRoot!); + + // If the plugin returned false, don't toggle it off, maybe the plugin showed a confirmation dialog or similar + if (!shouldToggleOff) return; + } + + plugin.active = newStatus ?? !plugin.active; const target = this.shadowRoot.querySelector(`[data-plugin-id="${plugin.id}"]`); if (!target) return; target.classList.toggle('active', plugin.active); - this.getPluginCanvasById(plugin.id)?.toggleAttribute('data-active', plugin.active); - - plugin.eventTarget.dispatchEvent( - new CustomEvent('plugin-toggled', { - detail: { - state: plugin.active, - plugin, - }, - }) - ); + pluginCanvas.style.display = plugin.active ? 'block' : 'none'; + + window.requestAnimationFrame(() => { + pluginCanvas.toggleAttribute('data-active', plugin.active); + plugin.eventTarget.dispatchEvent( + new CustomEvent('plugin-toggled', { + detail: { + state: plugin.active, + plugin, + }, + }) + ); + }); if (import.meta.hot) { import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:toggled`, { state: plugin.active }); } } + /** + * @param newStatus Optionally, force the minimize button into a specific state + */ toggleMinimizeButton(newStatus?: boolean) { const minimizeButton = this.shadowRoot.querySelector<HTMLDivElement>('#minimize-button'); if (!minimizeButton) return; @@ -493,4 +504,15 @@ export class DevOverlayCanvas extends HTMLElement { super(); this.shadowRoot = this.attachShadow({ mode: 'open' }); } + + connectedCallback() { + this.shadowRoot.innerHTML = ` + <style> + :host { + position: absolute; + top: 0; + left: 0; + } + </style>`; + } } diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts index cc83cbe83..ea3b7f26f 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts @@ -5,12 +5,42 @@ export default { name: 'Astro', icon: 'astro:logo', init(canvas) { - const astroWindow = document.createElement('astro-dev-overlay-window'); + createWindow(); - astroWindow.windowTitle = 'Astro'; - astroWindow.windowIcon = 'astro:logo'; + document.addEventListener('astro:after-swap', createWindow); - astroWindow.innerHTML = ` + function createWindow() { + const style = document.createElement('style'); + style.textContent = ` + :host { + opacity: 0; + transition: opacity 0.15s ease-in-out; + } + + :host([data-active]) { + opacity: 1; + } + + @media screen and (prefers-reduced-motion: no-preference) { + :host astro-dev-overlay-window { + transform: translateY(55px) translate(-50%, -50%); + transition: transform 0.15s ease-in-out; + transform-origin: center bottom; + } + + :host([data-active]) astro-dev-overlay-window { + transform: translateY(0) translate(-50%, -50%); + } + } + `; + canvas.append(style); + + const astroWindow = document.createElement('astro-dev-overlay-window'); + + astroWindow.windowTitle = 'Astro'; + astroWindow.windowIcon = 'astro:logo'; + + astroWindow.innerHTML = ` <style> #buttons-container { display: flex; @@ -52,17 +82,27 @@ export default { <div> <p>Welcome to Astro!</p> <div id="buttons-container"> - <astro-dev-overlay-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-dev-overlay-card> - <astro-dev-overlay-card icon="astro:logo" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-dev-overlay-card> + <astro-dev-overlay-card icon="bug" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-dev-overlay-card> + <astro-dev-overlay-card icon="file-search" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-dev-overlay-card> </div> </div> <footer> - <a href="https://discord.gg/astro" target="_blank">Join the Astro Discord</a> - <a href="https://astro.build" target="_blank">Visit Astro.build</a> + <a href="https://astro.build/chat" target="_blank">Join us on Discord</a> + <a href="https://astro.build" target="_blank">Visit the Astro website</a> </footer> </div> `; - canvas.append(astroWindow); + canvas.append(astroWindow); + } + }, + async beforeTogglingOff(canvas) { + canvas.host?.removeAttribute('data-active'); + + await new Promise((resolve) => { + canvas.host.addEventListener('transitionend', resolve); + }); + + return true; }, } satisfies DevOverlayPlugin; diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts index 46ed88da0..6d5779fac 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts @@ -1,5 +1,6 @@ import type { DevOverlayPlugin } from '../../../../@types/astro.js'; import type { DevOverlayHighlight } from '../ui-library/highlight.js'; +import { getIconElement } from '../ui-library/icons.js'; import { attachTooltipToHighlight, createHighlight, positionHighlight } from './utils/highlight.js'; const icon = @@ -22,45 +23,89 @@ export default { id: 'astro:audit', name: 'Audit', icon: icon, - init(canvas, eventTarget) { + async init(canvas, eventTarget) { let audits: { highlightElement: DevOverlayHighlight; auditedElement: HTMLElement }[] = []; - lint(); + await lint(); - document.addEventListener('astro:after-swap', lint); - document.addEventListener('astro:page-load', refreshLintPositions); + document.addEventListener('astro:after-swap', async () => lint()); + document.addEventListener('astro:page-load', async () => refreshLintPositions); + + async function lint() { + initStyle(); - function lint() { audits.forEach(({ highlightElement }) => { highlightElement.remove(); }); audits = []; + canvas.getElementById('no-audit')?.remove(); - selectorBasedRules.forEach((rule) => { - document.querySelectorAll(rule.selector).forEach((el) => { - createAuditProblem(rule, el); - }); - }); + for (const rule of selectorBasedRules) { + const elements = document.querySelectorAll(rule.selector); + + for (const element of elements) { + await createAuditProblem(rule, element); + } + } if (audits.length > 0) { eventTarget.dispatchEvent( - new CustomEvent('plugin-notification', { + new CustomEvent('toggle-notification', { detail: { state: true, }, }) ); + } else { + eventTarget.dispatchEvent( + new CustomEvent('toggle-notification', { + detail: { + state: false, + }, + }) + ); + + const noAuditBlock = document.createElement('div'); + noAuditBlock.id = 'no-audit'; + + const noAuditIcon = getIconElement('check-circle'); + const text = document.createElement('div'); + text.textContent = 'No issues found!'; + + if (noAuditIcon) { + noAuditIcon.style.width = '24px'; + noAuditBlock.append(noAuditIcon); + } + noAuditBlock.append(text); + + canvas.append(noAuditBlock); } + + (['scroll', 'resize'] as const).forEach((event) => { + window.addEventListener(event, refreshLintPositions); + }); } function refreshLintPositions() { + const noAuditBlock = canvas.getElementById('no-audit'); + if (noAuditBlock) { + const devOverlayRect = document + .querySelector('astro-dev-overlay') + ?.shadowRoot.querySelector('#dev-overlay') + ?.getBoundingClientRect(); + + noAuditBlock.style.top = `${ + (devOverlayRect?.top ?? 0) - (devOverlayRect?.height ?? 0) - 16 + }px`; + } + audits.forEach(({ highlightElement, auditedElement }) => { const rect = auditedElement.getBoundingClientRect(); positionHighlight(highlightElement, rect); }); } - function createAuditProblem(rule: AuditRule, originalElement: Element) { + async function createAuditProblem(rule: AuditRule, originalElement: Element) { const computedStyle = window.getComputedStyle(originalElement); const targetedElement = (originalElement.children[0] as HTMLElement) || originalElement; @@ -69,6 +114,11 @@ export default { return; } + // If the element is an image, wait for it to load + if (originalElement.nodeName === 'IMG' && !(originalElement as HTMLImageElement).complete) { + await (originalElement as HTMLImageElement).decode(); + } + const rect = originalElement.getBoundingClientRect(); const highlight = createHighlight(rect, 'warning'); const tooltip = buildAuditTooltip(rule); @@ -76,10 +126,6 @@ export default { canvas.append(highlight); audits.push({ highlightElement: highlight, auditedElement: originalElement as HTMLElement }); - - (['scroll', 'resize'] as const).forEach((event) => { - window.addEventListener(event, refreshLintPositions); - }); } function buildAuditTooltip(rule: AuditRule) { @@ -103,5 +149,51 @@ export default { return tooltip; } + + function initStyle() { + const devOverlayRect = document + .querySelector('astro-dev-overlay') + ?.shadowRoot.querySelector('#dev-overlay') + ?.getBoundingClientRect(); + + const style = document.createElement('style'); + style.textContent = ` + :host { + opacity: 0; + transition: opacity 0.1s ease-in-out; + } + + :host([data-active]) { + opacity: 1; + } + + #no-audit { + border: 1px solid rgba(113, 24, 226, 1); + background-color: #310A65; + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.30), 0px 1px 2px 0px rgba(0, 0, 0, 0.29), 0px 4px 4px 0px rgba(0, 0, 0, 0.26), 0px 10px 6px 0px rgba(0, 0, 0, 0.15), 0px 17px 7px 0px rgba(0, 0, 0, 0.04), 0px 26px 7px 0px rgba(0, 0, 0, 0.01); + color: white; + text-align: center; + border-radius: 4px; + padding: 8px; + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + position: fixed; + transform: translate(-50%, 0); + top: ${(devOverlayRect?.top ?? 0) - (devOverlayRect?.height ?? 0) - 16}px; + left: calc(50% + 12px); + width: 200px; + } + `; + + canvas.append(style); + } + }, + async beforeTogglingOff(canvas) { + canvas.host?.removeAttribute('data-active'); + + await new Promise((resolve) => { + canvas.host.addEventListener('transitionend', resolve); + }); + + return true; }, } satisfies DevOverlayPlugin; diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts index 7b5f3539c..ab927bacc 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts @@ -18,6 +18,7 @@ export default { document.addEventListener('astro:page-load', refreshIslandsOverlayPositions); function addIslandsOverlay() { + initStyle(); islandsOverlays.forEach(({ highlightElement }) => { highlightElement.remove(); }); @@ -110,5 +111,30 @@ export default { const [_, value] = prop; return JSON.stringify(value, null, 2); } + + function initStyle() { + const style = document.createElement('style'); + style.textContent = ` + :host { + opacity: 0; + transition: opacity 0.1s ease-in-out; + } + + :host([data-active]) { + opacity: 1; + } + `; + + canvas.append(style); + } + }, + async beforeTogglingOff(canvas) { + canvas.host?.removeAttribute('data-active'); + + await new Promise((resolve) => { + canvas.host.addEventListener('transitionend', resolve); + }); + + return true; }, } satisfies DevOverlayPlugin; diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/card.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/card.ts index debba9786..9d7062f8b 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/card.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/card.ts @@ -28,6 +28,8 @@ export class DevOverlayCard extends HTMLElement { font-weight: 600; line-height: 19px; text-decoration: none; + background-color: #13151A; + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.09), 0px 10px 6px 0px rgba(0, 0, 0, 0.05), 0px 17px 7px 0px rgba(0, 0, 0, 0.01), 0px 26px 7px 0px rgba(0, 0, 0, 0.00); } a:hover, button:hover { diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts index a471249b3..10f33cad1 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts @@ -25,4 +25,9 @@ const icons = { warning: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#fff" d="M8 .40625c-1.5019 0-2.97007.445366-4.21886 1.27978C2.53236 2.52044 1.55905 3.70642.984293 5.094.40954 6.48157.259159 8.00842.552165 9.48147.845172 10.9545 1.56841 12.3076 2.63041 13.3696c1.06201 1.062 2.41508 1.7852 3.88813 2.0782 1.47304.293 2.99989.1427 4.38746-.4321 1.3876-.5747 2.5736-1.5481 3.408-2.7968.8344-1.2488 1.2798-2.717 1.2798-4.2189-.0023-2.0133-.8031-3.9435-2.2267-5.36713C11.9435 1.20925 10.0133.408483 8 .40625ZM8 13.9062c-1.16814 0-2.31006-.3463-3.28133-.9953-.97128-.649-1.7283-1.5715-2.17533-2.6507-.44703-1.0792-.56399-2.26675-.3361-3.41245.22789-1.1457.79041-2.1981 1.61641-3.0241.82601-.826 1.8784-1.38852 3.0241-1.61641 1.1457-.2279 2.33325-.11093 3.41245.3361 1.0793.44703 2.0017 1.20405 2.6507 2.17532.649.97128.9954 2.11319.9954 3.28134-.0017 1.56592-.6245 3.0672-1.7318 4.1745S9.56592 13.9046 8 13.9062Zm-.84375-5.62495V4.625c0-.22378.0889-.43839.24713-.59662.15824-.15824.37285-.24713.59662-.24713.22378 0 .43839.08889.59662.24713.15824.15823.24713.37284.24713.59662v3.65625c0 .22378-.08889.43839-.24713.59662C8.43839 9.03611 8.22378 9.125 8 9.125c-.22377 0-.43838-.08889-.59662-.24713-.15823-.15823-.24713-.37284-.24713-.59662ZM9.125 11.0938c0 .2225-.06598.44-.18959.625-.12362.185-.29932.3292-.50489.4143-.20556.0852-.43176.1074-.64999.064-.21823-.0434-.41869-.1505-.57602-.3079-.15734-.1573-.26448-.3577-.30789-.576-.04341-.2182-.02113-.4444.06402-.65.08515-.2055.22934-.3812.41435-.5049.185-.1236.40251-.18955.62501-.18955.29837 0 .58452.11855.7955.32955.21098.2109.3295.4971.3295.7955Z"/></svg>`, 'arrow-down': '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 12 14"><path fill="#13151A" d="m11.0306 8.53063-4.5 4.49997c-.06968.0699-.15247.1254-.24364.1633-.09116.0378-.1889.0573-.28761.0573-.09871 0-.19645-.0195-.28762-.0573-.09116-.0379-.17395-.0934-.24363-.1633L.968098 8.53063c-.140896-.1409-.220051-.332-.220051-.53125 0-.19926.079155-.39036.220051-.53125.140892-.1409.331992-.22006.531252-.22006.19926 0 .39035.07916.53125.22006l3.21937 3.21937V1.5c0-.19891.07902-.38968.21967-.53033C5.61029.829018 5.80106.75 5.99997.75c.19891 0 .38968.079018.53033.21967.14065.14065.21967.33142.21967.53033v9.1875l3.21938-3.22c.14085-.1409.33195-.22005.53125-.22005.1993 0 .3904.07915.5312.22005.1409.1409.2201.33199.2201.53125s-.0792.39035-.2201.53125l-.0012.00063Z"/></svg>', + bug: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24"><path fill="#CCCED8" d="M13.7916 8.25006c0-.29667.088-.58668.2528-.83335.1648-.24668.3991-.43893.6732-.55247.2741-.11353.5757-.14323.8667-.08536.2909.05788.5582.20074.768.41052s.3526.47706.4105.76803c.0579.29097.0282.59257-.0854.86666-.1135.27409-.3057.50836-.5524.67318-.2467.16482-.5367.25279-.8334.25279-.3978 0-.7793-.15803-1.0606-.43934-.2813-.2813-.4394-.66283-.4394-1.06066Zm-3.75-1.5c-.29665 0-.58666.08798-.83333.2528-.24667.16482-.43893.39909-.55246.67318-.11354.27409-.14324.57569-.08536.86666.05788.29097.20074.55824.41052.76802.20977.20978.47705.35264.76802.41052.29101.05788.59261.02817.86671-.08536.274-.11353.5083-.30579.6731-.55246.1649-.24668.2528-.53668.2528-.83336 0-.39782-.158-.77935-.4393-1.06066-.2813-.2813-.6628-.43934-1.0607-.43934Zm11.25 6.75004c.0003.6512-.0733 1.3003-.2193 1.935l1.7953.7837c.1354.0592.2578.1445.3603.2511.1024.1065.1829.2322.2368.3698.0539.1377.0801.2846.0772.4323-.0028.1478-.0348.2936-.094.429-.0592.1354-.1446.2579-.2511.3603-.1065.1025-.2322.1829-.3698.2368-.1377.0539-.2846.0802-.4323.0773-.1478-.0029-.2936-.0349-.429-.0941l-1.6875-.7359c-.7348 1.3818-1.8317 2.5377-3.1732 3.3437s-2.8771 1.2319-4.4421 1.2319c-1.5651 0-3.10061-.4259-4.44213-1.2319-1.34151-.806-2.43843-1.9619-3.17321-3.3437l-1.6875.7359c-.13542.0592-.28119.0912-.42896.0941-.14778.0029-.29468-.0234-.43232-.0773-.13763-.0539-.2633-.1343-.36984-.2368-.10653-.1024-.19185-.2249-.25106-.3603-.05922-.1354-.09119-.2812-.09407-.429-.00289-.1477.02336-.2946.07725-.4323.05389-.1376.13436-.2633.23681-.3698.10246-.1066.22489-.1919.36032-.2511l1.79531-.7837c-.14354-.635-.21462-1.2841-.21187-1.935v-.375h-1.875c-.29837 0-.58452-.1186-.7955-.3295-.21098-.211-.3295-.4972-.3295-.7955 0-.2984.11852-.5846.3295-.7955.21098-.211.49713-.3295.7955-.3295h1.875v-.375c-.00029-.65126.0733-1.30041.21937-1.93504l-1.79531-.78375c-.27351-.11959-.4883-.34294-.59713-.6209-.10883-.27797-.10278-.58778.01682-.86128.11959-.27351.34294-.4883.6209-.59713.27797-.10883.58778-.10278.86128.01681l1.6875.73594c.73478-1.38183 1.8317-2.53769 3.17321-3.34373 1.34152-.80604 2.87703-1.23187 4.44213-1.23187 1.565 0 3.1006.42583 4.4421 1.23187 1.3415.80604 2.4384 1.9619 3.1732 3.34373l1.6875-.73594c.1354-.05921.2812-.09118.429-.09406.1477-.00289.2946.02336.4323.07725.1376.05389.2633.13435.3698.23681.1065.10245.1919.22489.2511.36032.0592.13542.0912.28118.094.42896.0029.14778-.0233.29468-.0772.43232-.0539.13763-.1344.2633-.2368.36984-.1025.10653-.2249.19185-.3603.25106l-1.7953.78375c.1435.63492.2146 1.28407.2118 1.93504v.375h1.875c.2984 0 .5845.1185.7955.3295.211.2109.3295.4971.3295.7955 0 .2983-.1185.5845-.3295.7955-.211.2109-.4971.3295-.7955.3295h-1.875v.375Zm-14.99997-2.625H19.0416v-.375c0-1.69079-.6716-3.3123-1.8672-4.50784-1.1955-1.19555-2.817-1.8672-4.5078-1.8672-1.6907 0-3.31224.67165-4.50778 1.8672C6.96328 7.1878 6.29163 8.80931 6.29163 10.5001v.375Zm5.24997 8.8987v-6.6487H6.29163v.375c.00211 1.4949.52876 2.9417 1.48816 4.0882.95939 1.1464 2.29071 1.9199 3.76181 2.1855Zm7.5-6.2737v-.375h-5.25v6.6487c1.4712-.2656 2.8025-1.0391 3.7619-2.1855.9594-1.1465 1.486-2.5933 1.4881-4.0882Z"/></svg>', + 'file-search': + '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 25 24"><path fill="#CCCED8" d="m20.6293 7.455-5.25-5.25c-.1045-.10461-.2285-.1876-.3651-.24422-.1366-.05662-.283-.08577-.4308-.08578H5.58337c-.49728 0-.97419.19754-1.32582.54917-.35163.35164-.54918.82855-.54918 1.32583v16.5c0 .4973.19755.9742.54918 1.3258.35163.3517.82854.5492 1.32582.5492H19.0834c.4973 0 .9742-.1975 1.3258-.5492.3516-.3516.5492-.8285.5492-1.3258v-12c0-.29813-.1184-.58407-.3291-.795Zm-3.1397.045h-2.1562V5.34375L17.4896 7.5ZM5.95837 19.875V4.125h7.12503v4.5c0 .29837.1185.58452.3295.7955.211.21097.4971.3295.7955.3295h4.5v10.125H5.95837Zm9.04503-4.5459c.3426-.7185.4202-1.5349.2192-2.3051-.2011-.7702-.6679-1.4445-1.3179-1.9038-.65-.4594-1.4415-.6742-2.2346-.6066-.7931.0677-1.5368.4135-2.0996.9763-.56283.5629-.90863 1.3065-.9763 2.0996-.06766.7931.14716 1.5846.60651 2.2346.45936.6501 1.13369 1.1169 1.90389 1.3179.7701.201 1.5866.1234 2.305-.2192l1.125 1.125c.2114.2114.498.3301.7969.3301.2989 0 .5855-.1187.7969-.3301.2113-.2113.3301-.498.3301-.7969 0-.2988-.1188-.5855-.3301-.7968l-1.125-1.125Zm-4.17-1.4541c0-.2225.066-.44.1896-.625.1236-.185.2993-.3292.5049-.4144.2055-.0851.4317-.1074.65-.064.2182.0434.4186.1506.576.3079.1573.1573.2644.3578.3079.576.0434.2183.0211.4445-.0641.65-.0851.2056-.2293.3813-.4143.5049-.185.1236-.4025.1896-.625.1896-.2984 0-.5845-.1185-.7955-.3295-.211-.211-.3295-.4971-.3295-.7955Z"/></svg>', + 'check-circle': + '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="#fff" d="M10.0306 4.96938c.0699.06967.1254.15247.1633.24363.0378.09116.0573.1889.0573.28762 0 .09871-.0195.19645-.0573.28761-.0379.09116-.0934.17396-.1633.24364L6.53063 9.53187c-.06968.06992-.15247.1254-.24364.16326-.09116.03785-.1889.05734-.28761.05734-.09871 0-.19645-.01949-.28762-.05734-.09116-.03786-.17395-.09334-.24363-.16326l-1.5-1.5c-.06977-.06976-.12511-.15258-.16286-.24373-.03776-.09116-.05719-.18885-.05719-.28752 0-.09866.01943-.19635.05719-.28751.03775-.09115.09309-.17397.16286-.24373.06976-.06977.15259-.12511.24374-.16287.09115-.03775.18885-.05719.28751-.05719s.19636.01944.28751.05719c.09115.03776.17397.0931.24374.16287L6 7.9375l2.96938-2.97c.06978-.06961.15259-.12478.24371-.16237.09111-.03758.18874-.05683.2873-.05666.09856.00018.19612.01978.28711.05768.09098.0379.1736.09337.2431.16323ZM13.75 7c0 1.33502-.3959 2.64007-1.1376 3.7501-.7417 1.11-1.7959 1.9752-3.02928 2.4861-1.23341.5109-2.5906.6446-3.89998.3841-1.30937-.2605-2.5121-.9033-3.45611-1.8473-.944-.944-1.586877-2.14677-1.847328-3.45614-.26045-1.30937-.126777-2.66657.384114-3.89997C1.27471 3.18349 2.13987 2.12928 3.2499 1.38758 4.35994.645881 5.66498.25 7 .25c1.78961.001985 3.5053.713781 4.7708 1.97922C13.0362 3.49466 13.748 5.2104 13.75 7Zm-1.5 0c0-1.03835-.3079-2.05339-.8848-2.91674-.5769-.86336-1.3968-1.53627-2.35611-1.93363-.95931-.39736-2.01491-.50133-3.03331-.29875-1.0184.20257-1.95386.70258-2.68809 1.43681-.73422.73422-1.23424 1.66969-1.43681 2.68809-.20257 1.0184-.0986 2.074.29876 3.03331.39736.95931 1.07026 1.77921 1.93362 2.35611.86336.5769 1.87839.8848 2.91674.8848 1.39193-.0015 2.72643-.5551 3.7107-1.5393C11.6949 9.72642 12.2485 8.39193 12.25 7Z"/></svg>', } as const; diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts index 0ff67750f..dbd7add5d 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts @@ -36,6 +36,7 @@ export class DevOverlayTooltip extends HTMLElement { max-width: 45ch; width: fit-content; min-width: 27ch; + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.30), 0px 1px 2px 0px rgba(0, 0, 0, 0.29), 0px 4px 4px 0px rgba(0, 0, 0, 0.26), 0px 10px 6px 0px rgba(0, 0, 0, 0.15), 0px 17px 7px 0px rgba(0, 0, 0, 0.04), 0px 26px 7px 0px rgba(0, 0, 0, 0.01); } :host([data-show="true"]) { diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts index 11c7b06f9..64bf58076 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts @@ -34,6 +34,7 @@ export class DevOverlayWindow extends HTMLElement { top: 55%; left: 50%; transform: translate(-50%, -50%); + box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01); } h1 { |