Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #393 from lujakob/fix/skeleton-dark-theme-styles

Browse Source 
fix(skeleton): dark theme styles
This commit is contained in:
Kieran 2023-03-07 12:30:05 +00:00 committed by GitHub
commit df0362b9ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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; height: 1em;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background-color: #dddbdd; background-color: var(--note-bg);
border-radius: 16px; border-radius: 16px;
} }
html.light .skeleton {
background-color: var(--gray-secondary);
}
.skeleton::after { .skeleton::after {
position: absolute; position: absolute;
top: 0; top: 0;
@ -17,26 +21,26 @@
background-image: linear-gradient( background-image: linear-gradient(
90deg, 90deg,
rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.02) 20%,
rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.05) 60%,
rgba(255, 255, 255, 0) rgba(255, 255, 255, 0)
); );
animation: shimmer 2s infinite; animation: shimmer 2s infinite;
content: ""; 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 { @keyframes shimmer {
100% { 100% {
transform: translateX(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%);
}
}