mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 9 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix(ui): implement shimmer animation for GroundednessBadge #17

Merged
mjasin merged 1 commits from fix/issue-2-shimmer-animation into develop 2026-05-07 17:17:52 +00:00
Conversation 0 Commits 1 Files Changed 2
+49 -32
2 changed files with 49 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/NexusReader.UI.Shared/Components/Molecules/GroundednessBadge.razor
-32
View File
@@ -18,39 +18,7 @@
} }
</div> </div>
<style>
.groundedness-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.groundedness-badge.status-high {
color: var(--nexus-neon);
border-color: var(--nexus-neon);
}
.groundedness-badge.status-medium {
color: #ffaa00;
border-color: #ffaa00;
}
.groundedness-badge.status-low {
color: #ff4444;
border-color: #ff4444;
}
.shimmer {
opacity: 0.6;
}
</style>
@code { @code {
[Parameter] public string Answer { get; set; } = string.Empty; [Parameter] public string Answer { get; set; } = string.Empty;
src/NexusReader.UI.Shared/Components/Molecules/GroundednessBadge.razor.css
+49
View File
@@ -0,0 +1,49 @@
.groundedness-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.groundedness-badge.status-high {
color: var(--nexus-neon);
border-color: var(--nexus-neon);
}
.groundedness-badge.status-medium {
color: #ffaa00;
border-color: #ffaa00;
}
.groundedness-badge.status-low {
color: #ff4444;
border-color: #ff4444;
}
.shimmer {
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 70%
);
background-size: 200% 100%;
animation: shimmer-move 2s infinite linear;
display: inline-block;
color: rgba(255, 255, 255, 0.6);
}
@keyframes shimmer-move {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}