Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-06-12 13:17:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

web/Skeleton: add elevated skeleton and use it for picker item

Browse Source 
- fixed bg not being visible when shimmer is not on the element in dark theme
- fixed stuck gradient when motion is reduced
- fixed big skeleton
- skeleton is no longer focusable
This commit is contained in:
wukko
2024-07-23 09:55:55 +06:00
parent 718dc4cf0a
commit 7ee99ad30f
3 changed files with 36 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/misc/Skeleton.svelte
View File

@ -36,15 +36,25 @@
line-height: 1;
font-size: 1em;
text-align: center;
pointer-events: none;
}
:global([data-theme=light]) .skeleton {
background-color: var(--button-hover);
}
.skeleton.elevated {
background-image: var(--skeleton-gradient-elevated);
background-color: var(--button-elevated);
}
:global([data-reduce-motion="true"]) .skeleton {
background-image: none;
}
.skeleton.big {
border-radius: var(--border-radius);
background-size: 700px 100%;
background-size: 400px 100%;
animation: skeleton-big 1.2s ease-in-out infinite;
}
@ -59,10 +69,10 @@
@keyframes skeleton-big {
0% {
background-position: -700px 0;
background-position: -400px 0;
}
100% {
background-position: calc(700px + 100%) 0;
background-position: calc(400px + 100%) 0;
}
}
</style>