admin/cobalt
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases 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
2 changed files with 41 additions and 10 deletions
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%