marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-09 21:13:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: centralize skeleton primitives

Browse source
This commit is contained in:
Marco Allegretti 2026-01-29 17:39:03 +01:00
parent d4cf53075a
commit 6f7050775d
4 changed files with 43 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
frontend/src/components/ui/DesignSystemStyles.astro
View file

@ -289,6 +289,47 @@
flex: 1;
}
.list-skeleton {
display: grid;
gap: 1rem;
}
.skeleton-card {
height: var(--ui-skeleton-card-h, 120px);
border-radius: 14px;
border: 1px solid var(--color-border);
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.06) 50%,
rgba(255, 255, 255, 0.03) 100%
);
background-size: 200% 100%;
animation: ui-shimmer 1.2s ease-in-out infinite;
}
.is-skeleton {
border-color: rgba(255, 255, 255, 0.08);
box-shadow: none;
}
.skel {
border-radius: 10px;
background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.09) 35%, rgba(255,255,255,0.05) 70%);
background-size: 200% 100%;
animation: ui-shimmer-reverse 1.1s ease-in-out infinite;
}
@keyframes ui-shimmer {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
@keyframes ui-shimmer-reverse {
0% { background-position: 0% 0%; }
100% { background-position: -200% 0%; }
}
.ui-page-title h1 {
font-size: 2rem;
font-weight: 700;

17
frontend/src/pages/communities.astro
View file

@ -363,25 +363,8 @@ import { API_BASE as apiBase } from '../lib/api';
margin: 0;
}
.is-skeleton {
border-color: rgba(255, 255, 255, 0.08);
box-shadow: none;
}
.skel {
border-radius: 10px;
background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.09) 35%, rgba(255,255,255,0.05) 70%);
background-size: 200% 100%;
animation: shimmer 1.1s ease-in-out infinite;
}
.skel-title { height: 18px; width: 68%; }
.skel-slug { height: 12px; width: 36%; }
.skel-desc { height: 12px; width: 100%; margin-top: 0.75rem; }
.skel-desc.short { width: 78%; margin-top: 0.5rem; }
@keyframes shimmer {
0% { background-position: 0% 0%; }
100% { background-position: -200% 0%; }
}
</style>

24
frontend/src/pages/communities/[slug]/proposals/index.astro
View file

@ -363,27 +363,7 @@ const { slug } = Astro.params;
color: var(--color-text-muted);
}
.list-skeleton {
display: grid;
gap: 1rem;
}
.skeleton-card {
height: 92px;
border-radius: 14px;
border: 1px solid var(--color-border);
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.06) 50%,
rgba(255, 255, 255, 0.03) 100%
);
background-size: 200% 100%;
animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
.list-skeleton .skeleton-card {
--ui-skeleton-card-h: 92px;
}
</style>

24
frontend/src/pages/dashboard.astro
View file

@ -379,28 +379,4 @@ import { API_BASE as apiBase } from '../lib/api';
.status-discussion { background: var(--color-info); color: var(--color-on-primary); }
.status-voting { background: var(--color-success); color: var(--color-on-primary); }
.status-closed { background: var(--color-neutral); color: var(--color-on-primary); }
.list-skeleton {
display: grid;
gap: 1rem;
}
.skeleton-card {
height: 120px;
border-radius: 14px;
border: 1px solid var(--color-border);
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.06) 50%,
rgba(255, 255, 255, 0.03) 100%
);
background-size: 200% 100%;
animation: shimmer 1.2s ease-in-out infinite;
}
@keyframes shimmer {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
</style>