From ff5ca1c454884cbec5b74c2893783dc015453994 Mon Sep 17 00:00:00 2001 From: admin <1297598740@qq.com> Date: Thu, 29 Jan 2026 10:01:41 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=20DailyInsightCard=20?= =?UTF-8?q?=E5=92=8C=20ContributionHeatmap=20=E7=BB=84=E4=BB=B6=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E6=A0=B7=E5=BC=8F=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ContributionHeatmap.css | 29 +++-- .../DailyInsightCard/DailyInsightCard.css | 104 ++++++++++-------- 2 files changed, 77 insertions(+), 56 deletions(-) diff --git a/src/components/home/ContributionHeatmap/ContributionHeatmap.css b/src/components/home/ContributionHeatmap/ContributionHeatmap.css index dec5705..d83f5d2 100644 --- a/src/components/home/ContributionHeatmap/ContributionHeatmap.css +++ b/src/components/home/ContributionHeatmap/ContributionHeatmap.css @@ -55,29 +55,38 @@ .graph-scroll-container { overflow-x: auto; padding-bottom: 0.5rem; - /* Custom scrollbar styling if needed */ - scrollbar-width: thin; - scrollbar-color: rgba(0, 0, 0, 0.1) transparent; + scrollbar-width: none; + /* Hide scrollbar for cleaner look */ + -ms-overflow-style: none; +} + +.graph-scroll-container::-webkit-scrollbar { + display: none; } .contribution-graph-compact { display: flex; - gap: 3px; + gap: 4px; + /* Slightly increased gap */ min-width: fit-content; + padding: 2px; + /* Prevent hover clipping */ } .week-column-compact { display: flex; flex-direction: column; - gap: 3px; + gap: 4px; } .day-cell-compact { - width: 10px; - height: 10px; - border-radius: 2px; - background-color: rgba(0, 0, 0, 0.05); - transition: all 0.2s ease; + width: 11px; + /* Slightly larger */ + height: 11px; + border-radius: 3px; + /* More rounded */ + background-color: rgba(0, 0, 0, 0.04); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .day-cell-compact:hover { diff --git a/src/components/home/DailyInsightCard/DailyInsightCard.css b/src/components/home/DailyInsightCard/DailyInsightCard.css index 96279c8..e6d9fb0 100644 --- a/src/components/home/DailyInsightCard/DailyInsightCard.css +++ b/src/components/home/DailyInsightCard/DailyInsightCard.css @@ -1,15 +1,16 @@ .daily-insight-card { - background: rgba(255, 255, 255, 0.7); - backdrop-filter: blur(20px); - -webkit-backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.5); + background: rgba(255, 255, 255, 0.75); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius-xl); - padding: 1.25rem; + padding: 1.5rem; + /* More padding */ margin-bottom: 2rem; box-shadow: - 0 10px 30px -5px rgba(245, 158, 11, 0.1), - 0 4px 6px -2px rgba(245, 158, 11, 0.05), - inset 0 0 0 1px rgba(255, 255, 255, 0.6); + 0 15px 35px -5px rgba(0, 0, 0, 0.05), + 0 5px 15px -5px rgba(0, 0, 0, 0.02), + inset 0 0 0 1px rgba(255, 255, 255, 0.8); animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; @@ -17,17 +18,17 @@ /* Let internal content handle gaps */ position: relative; overflow: hidden; - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; } .daily-insight-card:hover { - transform: translateY(-2px); + transform: translateY(-4px); box-shadow: - 0 20px 40px -5px rgba(245, 158, 11, 0.15), - 0 8px 10px -2px rgba(245, 158, 11, 0.05); + 0 25px 45px -5px rgba(0, 0, 0, 0.08), + 0 10px 15px -3px rgba(0, 0, 0, 0.03); } -/* AI Glowing Border Effect */ +/* AI Glowing Border Effect - Subtler */ .daily-insight-card--ai::before { content: ''; position: absolute; @@ -35,20 +36,21 @@ left: 0; right: 0; height: 3px; - background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b); - opacity: 0.8; + background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24); + opacity: 0.9; } .daily-insight-card--ai::after { + /* Kept the scan effect but maybe lighter? */ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; - background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.8), transparent); + background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.6), transparent); animation: scan 4s infinite ease-in-out; - filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5)); + filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4)); } @keyframes scan { @@ -67,13 +69,15 @@ align-items: center; gap: 0.75rem; color: #d97706; - /* Amber-600 */ - font-weight: 800; - font-size: 0.85rem; - text-transform: uppercase; - letter-spacing: 1px; - padding-bottom: 0.75rem; - border-bottom: 1px dashed rgba(245, 158, 11, 0.2); + font-weight: 700; + /* Reduced from 800 */ + font-size: 0.9rem; + /* Slightly bigger */ + text-transform: none; + /* Remove uppercase */ + letter-spacing: 0.02em; + padding-bottom: 1rem; + border-bottom: 1px solid rgba(245, 158, 11, 0.15); } /* ... */ @@ -81,15 +85,16 @@ .daily-insight__content { display: grid; grid-template-columns: 1fr 1px 1fr; - gap: 1.5rem; + gap: 2rem; + /* Wider gap */ align-items: stretch; - /* Stretch to make divider same height */ + padding-top: 1.25rem; } .daily-insight__divider { width: 1px; - height: auto; - background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent); + height: 100%; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02)); } .daily-insight__section { @@ -99,11 +104,10 @@ } .daily-insight__title { - font-size: 0.75rem; - color: var(--color-text-secondary); - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; + font-size: 0.8rem; + color: var(--color-text-tertiary); + font-weight: 600; + letter-spacing: 0.02em; display: flex; align-items: center; gap: 0.5rem; @@ -115,15 +119,17 @@ width: 6px; height: 6px; border-radius: 50%; - background: #fbbf24; + background: #fcd34d; + /* Lighter amber */ + box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2); } .daily-insight__text { font-family: 'Outfit', sans-serif; - /* Fallback for numbers, Chinese font handles text */ font-size: 1rem; color: var(--color-text); - line-height: 1.6; + line-height: 1.7; + /* More breathing room */ letter-spacing: 0.01em; } @@ -234,24 +240,30 @@ /* Tip section at bottom */ .daily-insight__footer { - margin-top: 1rem; + margin-top: 0; + /* Remove margin relative to content, let padding handle it */ position: relative; - padding-top: 1rem; - border-top: 1px dashed rgba(245, 158, 11, 0.2); + padding-top: 1.5rem; + border-top: none; + /* Remove dashed line */ } .daily-insight__tip { display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.85rem; + align-items: flex-start; + /* Align top for multi-line */ + gap: 0.75rem; + font-size: 0.9rem; color: #92400e; - /* Amber 800 */ font-weight: 500; - padding: 0.5rem 0.75rem; - background: rgba(254, 243, 199, 0.5); + padding: 1rem 1.25rem; + background: linear-gradient(135deg, rgba(255, 251, 235, 0.8), rgba(254, 243, 199, 0.4)); + border: 1px solid rgba(251, 191, 36, 0.2); border-radius: var(--radius-lg); - width: fit-content; + width: 100%; + /* Full width */ + line-height: 1.6; + box-shadow: 0 2px 6px -2px rgba(245, 158, 11, 0.05); } .daily-insight__tip svg {