danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(doclist): enhance preview background with color-mix and radial mask

Browse source 
Update DocumentPreview text preview to use a CSS color-mix radial pattern
with increased opacity and a masked vignette effect. Improves visual
clarity and consistency with design tokens.
This commit is contained in:
Richard R 2026-06-10 13:44:08 -06:00
parent 08b8b06f27
commit 7814517b35
1 changed files with 12 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/doclist/DocumentPreview.tsx
View file

@ -286,7 +286,18 @@ export function DocumentPreview({ doc }: DocumentPreviewProps) {
) : textPreview ? (
<>
<div className="absolute inset-0 bg-gradient-to-br from-surface-solid to-surface-sunken" />
<div className="absolute inset-0 opacity-[0.06] bg-[radial-gradient(circle_at_1px_1px,rgba(0,0,0,1)_1px,transparent_0)] [background-size:12px_12px]" />
<div
aria-hidden
className="pointer-events-none absolute inset-0"
style={{
backgroundImage:
'radial-gradient(color-mix(in srgb, var(--foreground) 14%, transparent) 1px, transparent 1px)',
backgroundSize: '12px 12px',
opacity: 0.35,
WebkitMaskImage: 'radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%)',
maskImage: 'radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%)',
}}
/>
<div className="relative z-10 h-full w-full p-2 flex flex-col">
<div className="mb-auto rounded-md bg-surface-solid backdrop-blur-[1px] shadow-elev-1 ring-1 ring-line-soft p-2.5 max-h-[85%] overflow-hidden">
{isTxtFile ? (