Michael/FlowReader
1
0 Fork 0
mirror of https://github.com/R0m1k3/FlowReader.git synced 2026-10-11 17:28:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

style(ui): improve masonry alignment, darken button borders, and enhance hover shadows

Browse Source
This commit is contained in:
Antigravity Agent committed 2026-02-04 21:20:43 +01:00
1 parent f0a08ea0af
commit a2e485f15e
3 files changed
+6 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/components/ArticleCard.tsx
+2 -2
View File
@@ -11,7 +11,7 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
const timeToRead = Math.ceil((article.content?.length || 500) / 1000) + 1; const timeToRead = Math.ceil((article.content?.length || 500) / 1000) + 1;
return ( return (
<article className="magazine-card group cursor-pointer break-inside-avoid mb-8 hover:shadow-2xl hover:shadow-gold/10 transition-shadow duration-500 rounded-xl" onClick={() => onClick(article)}> <article className="magazine-card group cursor-pointer break-inside-avoid-column inline-block w-full mb-8 hover:shadow-2xl hover:shadow-gold/20 transition-all duration-500 rounded-xl border border-transparent hover:border-gold/10" onClick={() => onClick(article)}>
{/* Image Placeholder with Gold Overlay */} {/* Image Placeholder with Gold Overlay */}
<div className="aspect-[16/10] overflow-hidden rounded-xl bg-carbon-light relative mb-6"> <div className="aspect-[16/10] overflow-hidden rounded-xl bg-carbon-light relative mb-6">
<div className="absolute inset-0 bg-gradient-to-t from-carbon-dark/80 via-transparent to-transparent opacity-60 z-10"></div> <div className="absolute inset-0 bg-gradient-to-t from-carbon-dark/80 via-transparent to-transparent opacity-60 z-10"></div>
@@ -64,7 +64,7 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
e.stopPropagation(); e.stopPropagation();
onToggleRead(article.id, !article.is_read); onToggleRead(article.id, !article.is_read);
}} }}
className={`p-1.5 rounded-full transition-all duration-300 border ${article.is_read ? 'text-gold/40 border-gold/10' : 'text-gold bg-gold/10 border-carbon/20 hover:bg-gold/20'}`} className={`p-1.5 rounded-full transition-all duration-300 border ${article.is_read ? 'text-gold/40 border-gold/10' : 'text-gold bg-gold/5 border-paper-white/40 hover:bg-gold/20 hover:border-paper-white'}`}
title={article.is_read ? "Marquer comme non lu" : "Marquer comme lu"} title={article.is_read ? "Marquer comme non lu" : "Marquer comme lu"}
> >
<svg className="w-4 h-4" fill={article.is_read ? "none" : "currentColor"} viewBox="0 0 24 24" stroke="currentColor"> <svg className="w-4 h-4" fill={article.is_read ? "none" : "currentColor"} viewBox="0 0 24 24" stroke="currentColor">
web/src/components/ReaderView.tsx
+2 -2
View File
@@ -77,8 +77,8 @@ export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewPro
<button <button
onClick={() => onToggleFavorite(article.id)} onClick={() => onToggleFavorite(article.id)}
className={`flex items-center space-x-3 px-6 py-2.5 rounded-full border transition-all duration-500 ${article.is_favorite className={`flex items-center space-x-3 px-6 py-2.5 rounded-full border transition-all duration-500 ${article.is_favorite
? 'bg-gold text-carbon border-carbon/20 shadow-lg' ? 'bg-gold text-carbon border-paper-white/20 shadow-lg'
: 'border-gold/20 text-gold hover:bg-gold/5' : 'border-paper-white/20 text-gold hover:bg-gold/5'
}`} }`}
> >
<svg className="w-4 h-4" fill={article.is_favorite ? "currentColor" : "none"} viewBox="0 0 24 24" stroke="currentColor"> <svg className="w-4 h-4" fill={article.is_favorite ? "currentColor" : "none"} viewBox="0 0 24 24" stroke="currentColor">
web/src/index.css
+2 -1
View File
@@ -73,8 +73,9 @@
column-count: 1; column-count: 1;
column-gap: 2rem; column-gap: 2rem;
padding: 2rem 0; padding: 2rem 0;
column-fill: balance;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.magazine-grid { .magazine-grid {
column-count: 2; column-count: 2;