Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/crutchcorn/sync-skeleton. Vanilla CSS Synchronized Skeleton Loaders sync-skeleton.dev
Something went wrong. Try again.
971 B · 66 lines
CSS
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667:root { color-scheme: light dark; background-color: light-dark(white, hsl(0 0% 10%)); color: light-dark(black, white); --skeleton-radius: 4px;}
.orangePurpleLoader { --skeleton-base-color: tomato; --skeleton-highlight-color: darkred; --skeleton-base-color-dark: darkslateblue; --skeleton-highlight-color-dark: indigo;}
.container { display: inline-flex; flex-direction: row; gap: 1rem; padding: 1rem; &.dark { color-scheme: dark; background-color: hsl(0 0% 10% / 100%); }}
.image { height: 104px; width: 152px;}
.content { display: flex; flex-direction: column; justify-content: space-between; gap: 0.5rem;}
.lineHeight { flex-basis: 25%;}
.lineOne { width: auto;}
.lineTwo { width: 48px;}
.circle { width: 18px; height: 18px; border-radius: 50%;}
.lineFour { flex-basis: 75%;}
.footer { display: flex; flex-direction: row; width: 120px; gap: 0.5rem; margin-block-start: auto;}