diff --git a/packages/backend/src/server/pug-filters.ts b/packages/backend/src/server/pug-filters.ts index eea8ffc3ad..ce51f48df9 100644 --- a/packages/backend/src/server/pug-filters.ts +++ b/packages/backend/src/server/pug-filters.ts @@ -7,6 +7,6 @@ export const commonPugFilters = { throw new Error('Invalid mimeType'); } const dataURI = `data:${options.mimeType};base64,${Buffer.from(data).toString('base64')}`; - return `<${options.tagName} data="${dataURI}"></${options.tagName}>`; + return `<${options.tagName} src="${dataURI}"></${options.tagName}>`; } } as const; diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css index 5d81f2bed0..81f1838a4a 100644 --- a/packages/backend/src/server/web/style.css +++ b/packages/backend/src/server/web/style.css @@ -42,7 +42,7 @@ html { left: 0; margin: auto; display: inline-block; - width: 28px; + width: 60px; height: 28px; transform: translateY(70px); color: var(--MI_THEME-accent); @@ -60,6 +60,16 @@ html { stroke-linejoin: round; stroke-miterlimit: 1.5; } +#splashSpinner > .spinner.bg circle { + fill:none; + stroke:currentColor; + stroke-width:24px; +} +#splashSpinner > .spinner.fg path { + fill:none; + stroke:currentColor; + stroke-width:24px; +} #splashSpinner > .spinner.bg { opacity: 0.275; } diff --git a/packages/backend/src/server/web/style.embed.css b/packages/backend/src/server/web/style.embed.css index 5e8786cc4e..8c4bf89102 100644 --- a/packages/backend/src/server/web/style.embed.css +++ b/packages/backend/src/server/web/style.embed.css @@ -64,7 +64,7 @@ html.embed.noborder #splash { left: 0; margin: auto; display: inline-block; - width: 28px; + width: 60px; height: 28px; transform: translateY(70px); color: var(--MI_THEME-accent); @@ -82,6 +82,16 @@ html.embed.noborder #splash { stroke-linejoin: round; stroke-miterlimit: 1.5; } +#splashSpinner > .spinner.bg circle { + fill:none; + stroke:currentColor; + stroke-width:24px; +} +#splashSpinner > .spinner.fg path { + fill:none; + stroke:currentColor; + stroke-width:24px; +} #splashSpinner > .spinner.bg { opacity: 0.275; } diff --git a/packages/backend/src/server/web/views/base-embed.pug b/packages/backend/src/server/web/views/base-embed.pug index 99c4dbc7f9..bc1352ace4 100644 --- a/packages/backend/src/server/web/views/base-embed.pug +++ b/packages/backend/src/server/web/views/base-embed.pug @@ -58,16 +58,5 @@ html(class='embed') div#splash img#splashIcon(src= icon || '/static-assets/splash.png') div#splashSpinner - :dataTag(tagName='img' mimeType='image/svg+xml') - <svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg"> - <g transform="matrix(1,0,0,1,12,12)"> - <circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/> - </g> - </svg> - :dataTag(tagName='img' mimeType='image/svg+xml') - <svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg"> - <g transform="matrix(1,0,0,1,12,12)"> - <path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/> - </g> - </svg> + <span>Loading...</span> block content diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug index 339c9510f4..8fbfdacabd 100644 --- a/packages/backend/src/server/web/views/base.pug +++ b/packages/backend/src/server/web/views/base.pug @@ -75,16 +75,5 @@ html div#splash img#splashIcon(src= icon || '/static-assets/splash.png') div#splashSpinner - :dataTag(tagName='img' mimeType='image/svg+xml') - <svg class="spinner bg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg"> - <g transform="matrix(1,0,0,1,12,12)"> - <circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:24px;"/> - </g> - </svg> - :dataTag(tagName='img' mimeType='image/svg+xml') - <svg class="spinner fg" viewBox="0 0 152 152" xmlns="http://www.w3.org/2000/svg"> - <g transform="matrix(1,0,0,1,12,12)"> - <path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:24px;"/> - </g> - </svg> + <span>Loading...</span> block content diff --git a/packages/frontend/src/components/global/MkLoading.vue b/packages/frontend/src/components/global/MkLoading.vue index 47d797606b..dbdc2a2ecd 100644 --- a/packages/frontend/src/components/global/MkLoading.vue +++ b/packages/frontend/src/components/global/MkLoading.vue @@ -8,12 +8,12 @@ SPDX-License-Identifier: AGPL-3.0-only <div :class="$style.container"> <svg :class="[$style.spinner, $style.bg]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg"> <g transform="matrix(1.125,0,0,1.125,12,12)"> - <circle cx="64" cy="64" r="64" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/> + <circle cx="64" cy="64" r="64" :class="[$style.bgcircle]"/> </g> </svg> <svg :class="[$style.spinner, $style.fg, { [$style.static]: static }]" viewBox="0 0 168 168" xmlns="http://www.w3.org/2000/svg"> <g transform="matrix(1.125,0,0,1.125,12,12)"> - <path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" style="fill:none;stroke:currentColor;stroke-width:21.33px;"/> + <path d="M128,64C128,28.654 99.346,0 64,0C99.346,0 128,28.654 128,64Z" :class="[$style.fgpath]"/> </g> </svg> </div> @@ -109,4 +109,16 @@ const props = withDefaults(defineProps<{ animation-play-state: paused; } } + +.bgcircle { + fill:none; + stroke:currentColor; + stroke-width:21.33px; +} + +.fgpath { + fill:none; + stroke:currentColor; + stroke-width:21.33px; +} </style>