nuxt-prawo-jazdy/app/spa-loading-template.html
NetMan 625c1013da Nuxt3=>4, spa-loader, css shenanigans...:
...css shenanigans: daisyui may have had a breaking change at 5.3.0, it wrecks the ui here, as tailwind forces its own styles over daisyuis overrides, for now staying at ~5.2.5, for good measure also @nuxtjs/tailwindcss stays at ^6.13.2 (6.13.2 in pnpmlock) - this may be, because (but i'm not sure) @nuxtjs/tailwind is tailwind3 and not tailwind4?

Nuxt3=>4 migration:
also changed nuxtimage settings, as the docs have been fixed, path changes, etc
2025-12-17 21:33:36 +01:00

60 lines
1.6 KiB
HTML

<!doctype html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>nuxt-prawo-jazdy</title>
<style>
.spa-loader-flex {
display: flex;
flex-direction: column;
min-height: 100dvh;
width: 100%;
justify-content: center;
align-items: center;
gap: 16px;
}
.spa-loader-circle {
display: block;
width: 36px;
height: 36px;
box-sizing: border-box;
border: solid 4px transparent;
border-top-color: #000;
border-left-color: #000;
border-bottom-color: #efefef;
border-right-color: #efefef;
border-radius: 50%;
animation: spaLoaderAnimation 400ms linear infinite;
}
@keyframes spaLoaderAnimation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script>
const colorMode = localStorage.getItem('themeStore');
const json = JSON.parse(colorMode);
if (
(window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) ||
Object.hasOwn(colorMode, 'theme') == 'dark'
) {
const sheet = window.document.styleSheets[0];
sheet.insertRule(
'.spa-flex { background: #0f172b !important; color: #fff !important; }',
sheet.cssRules.length,
);
}
</script>
</head>
<body>
<div class="spa-loader-flex">
<div class="spa-loader-circle"></div>
</div>
</body>
</html>