Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-01-23 19:26:26 +01:00
Code Issues Projects Releases Packages Wiki Activity

web: add fade-in animation

Browse source
This commit is contained in:
dumbmoron 2024-09-02 14:16:21 +00:00
parent 7227a4ad6e
commit 2deb8aa53b
No known key found for this signature in database
2 changed files with 41 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
web/src/app.html
View file

@ -17,17 +17,46 @@
<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/icons/apple-touch-icon.png">
<link crossorigin="use-credentials" rel="manifest" href="%sveltekit.assets%/manifest.json">
</head>
<style>
body {
background-color: black;
}
@media (prefers-color-scheme: light) {
body {
<noscript>
<style>
#cobalt { opacity: 1 !important }
</style>
</noscript>
<style>
body, #body-dark {
background-color: black;
}
#body-light {
background-color: white;
}
}
</style>
@media (prefers-color-scheme: light) {
body {
background-color: white;
}
}
#cobalt {
opacity: 0;
}
#cobalt.loaded {
opacity: 1;
transition: opacity .2s ease-out;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
let settings = localStorage.getItem('settings'), theme;
if (settings && ({ theme } = JSON.parse(settings)?.appearance)) {
document.body.id = `body-${theme}`;
}
});
</script>
</head>
<body data-sveltekit-preload-data="hover" data-sveltekit-preload-code="eager">
<div style="display: contents">
%sveltekit.body%

4
web/src/routes/+layout.svelte
View file

@ -1,6 +1,7 @@
<script lang="ts">
import { afterNavigate } from "$app/navigation";
import { updated } from "$app/stores";
import { browser } from "$app/environment";
import env from "$lib/env";
import settings from "$lib/state/settings";
@ -46,9 +47,10 @@
{/if}
</svelte:head>
<div style="display: contents" data-theme={$currentTheme} lang={$locale}>
<div style="display: contents" data-theme={browser ? $currentTheme : undefined} lang={$locale}>
<div
id="cobalt"
class:loaded={browser}
data-iphone={device.is.iPhone}
data-reduce-motion={reduceMotion}
data-reduce-transparency={reduceTransparency}