Simon/Scriberr
1
0
Fork 0
mirror of https://github.com/rishikanthc/Scriberr.git synced 2026-06-29 15:26:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update UI fonts and implement karaoke highlight

Browse Source 
- Switch transcript font to Literata with improved typography
- Fix audio icon hover visibility in file list
- Implement CSS Highlight API for high-performance karaoke word highlighting
- Update text colors for better contrast
This commit is contained in:
rishikanthc
2025-12-12 14:26:50 -08:00
parent 13f3bee1f5
commit f948857d60
4 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/frontend/index.html
View File

@@ -10,7 +10,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap"
rel="stylesheet">
</head>

2
web/frontend/src/components/transcript/TranscriptView.tsx
View File

@@ -270,7 +270,7 @@ export const TranscriptView = forwardRef<HTMLDivElement, TranscriptViewProps>(({
ref={(el) => { segmentRefs.current[i] = el; }}
onClick={(e) => handleExpandedClick(e, i)}
className={cn(
"flex-grow text-base text-carbon-700 dark:text-carbon-300 leading-relaxed whitespace-pre-wrap font-reading transition-colors duration-200",
"flex-grow text-base text-primary leading-relaxed whitespace-pre-wrap font-reading transition-colors duration-200",
isModifierPressed ? 'cursor-pointer hover:text-carbon-900 dark:hover:text-carbon-100' : 'cursor-text'
)}
>

5
web/frontend/src/features/transcription/components/AudioFilesTable.tsx
View File

@@ -689,16 +689,15 @@ export const AudioFilesTable = memo(function AudioFilesTable({
onTouchStart={() => startLongPress(file.id)}
onTouchEnd={clearLongPress}
>
{/* Left: Identification */}
<div className="flex items-center gap-4 min-w-0 transition-[padding] duration-200">
{/* Icon (Tinted Pastel Square) - Lighter Shade */}
<div className="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-xl bg-[#FFFAF0] text-[#FF6D20] group-hover:opacity-0 transition-opacity duration-200">
<div className="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-xl bg-[#FFFAF0] text-[#FF6D20] transition-opacity duration-200">
<FileAudio className="h-6 w-6" strokeWidth={2} />
</div>
{/* Text */}
<div className="min-w-0">
<h4 className="font-semibold text-gray-900 dark:text-gray-100 truncate text-lg leading-tight group-hover:text-[#FF6D20] transition-colors">
<h4 className="font-normal text-gray-900 dark:text-gray-100 truncate text-lg leading-tight group-hover:text-[#FF6D20] transition-colors">
{file.title || getFileName(file.audio_path)}
</h4>
<div className="flex items-center gap-1.5 mt-1 text-sm text-gray-500">

13
web/frontend/src/index.css
View File

@@ -77,7 +77,7 @@
--font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-inter: 'Inter', sans-serif;
--font-lora: 'Lora', serif;
--font-reading: 'Literata', serif;
/* For Transcripts */
/* UI Token Mappings for Tailwind v4 */
@@ -136,7 +136,7 @@
/* Card is also white */
/* Text: Never use pure black #000000. It causes eye strain on white. */
--text-primary: #171717;
--text-primary: #161616;
/* Neutral Charcoal */
--text-secondary: #737373;
/* Neutral Grey */
@@ -330,15 +330,18 @@
/* Transcript Font Utility */
.font-transcript {
font-family: var(--font-lora);
font-family: var(--font-reading);
font-size: 1.125rem;
/* 18px */
line-height: 1.7;
line-height: 1.5;
}
/* Applied to TranscriptView for Lora support */
.font-reading {
font-family: var(--font-lora);
font-family: var(--font-reading);
font-size: 1.125rem;
/* 18px */
line-height: 1.5;
}
}