Kieran
/
snort
5
14
Fork 14
Code Issues 52 Pull Requests 1 Packages Projects Releases 24 Wiki Activity

fix(skeleton): dark theme styles

This commit is contained in:
Lukas Jakob 2023-03-04 11:33:57 -06:00
parent d3fe3a897c
commit bad6f08d8f
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/app/src/Element/Skeleton.css
View File

@ -3,10 +3,14 @@
height: 1em;
position: relative;
overflow: hidden;
background-color: #dddbdd;
background-color: var(--note-bg);
border-radius: 16px;
}
html.light .skeleton {
background-color: var(--gray-secondary);
}
.skeleton::after {
position: absolute;
top: 0;
@ -17,26 +21,26 @@
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.2) 20%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0.02) 20%,
rgba(255, 255, 255, 0.05) 60%,
rgba(255, 255, 255, 0)
);
animation: shimmer 2s infinite;
content: "";
}
html.light .skeleton::after {
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.2) 20%,
rgba(255, 255, 255, 0.5) 60%,
rgba(255, 255, 255, 0)
);
}
@keyframes shimmer {
100% {
transform: translateX(100%);
}
}
@media screen and (prefers-color-scheme: dark) {
.skeleton {
background-color: #50535a;
}
.skeleton::after {
background-image: linear-gradient(90deg, #50535a 0%, #656871 20%, #50535a 40%, #50535a 100%);
}
}