salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: sync timeline highlight with scroll

Browse Source
This commit is contained in:
Shantur Rathore
2025-12-07 21:59:57 +00:00
parent e3489b22e6
commit a2e5034c20
3 changed files with 116 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
packages/ui/src/styles/messaging/message-timeline.css
View File

@@ -1,7 +1,7 @@
.message-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.5rem;
gap: 0rem;
width: 100%;
min-height: 0;
flex: 1 1 auto;
@@ -77,7 +77,15 @@
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-primary);
transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease;
transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.message-timeline-segment-active {
border-color: transparent;
background-color: #0f5b44;
color: #fff;
font-weight: 700;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.message-timeline-segment:hover,
@@ -88,6 +96,15 @@
transform: translateY(-1px);
}
.message-timeline-segment-active,
.message-timeline-segment-active:hover,
.message-timeline-segment-active:focus-visible {
background-color: #0f5b44;
color: #fff;
transform: none;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.message-timeline-segment:focus-visible {
box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--accent-primary);
}
@@ -107,6 +124,14 @@
background-color: var(--surface-secondary);
}
.message-timeline-segment-active {
background-color: #0f5b44 !important;
border-color: transparent !important;
color: #fff !important;
font-weight: 700;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.message-timeline-label {
pointer-events: none;
}