Novault/Novault-Frontend-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 为 DailyInsightCard 和 ContributionHeatmap 组件新增样式。

Browse Source
This commit is contained in:
admin
2026-01-29 10:01:41 +08:00
parent f1651147a4
commit ff5ca1c454
2 changed files with 77 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/home/ContributionHeatmap/ContributionHeatmap.css
View File

@@ -55,29 +55,38 @@
.graph-scroll-container { .graph-scroll-container {
overflow-x: auto; overflow-x: auto;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
/* Custom scrollbar styling if needed */ scrollbar-width: none;
scrollbar-width: thin; /* Hide scrollbar for cleaner look */
scrollbar-color: rgba(0, 0, 0, 0.1) transparent; -ms-overflow-style: none;
}
.graph-scroll-container::-webkit-scrollbar {
display: none;
} }
.contribution-graph-compact { .contribution-graph-compact {
display: flex; display: flex;
gap: 3px; gap: 4px;
/* Slightly increased gap */
min-width: fit-content; min-width: fit-content;
padding: 2px;
/* Prevent hover clipping */
} }
.week-column-compact { .week-column-compact {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3px; gap: 4px;
} }
.day-cell-compact { .day-cell-compact {
width: 10px; width: 11px;
height: 10px; /* Slightly larger */
border-radius: 2px; height: 11px;
background-color: rgba(0, 0, 0, 0.05); border-radius: 3px;
transition: all 0.2s ease; /* 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 { .day-cell-compact:hover {

104
src/components/home/DailyInsightCard/DailyInsightCard.css
View File

@@ -1,15 +1,16 @@
.daily-insight-card { .daily-insight-card {
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.75);
backdrop-filter: blur(20px); backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 1.25rem; padding: 1.5rem;
/* More padding */
margin-bottom: 2rem; margin-bottom: 2rem;
box-shadow: box-shadow:
0 10px 30px -5px rgba(245, 158, 11, 0.1), 0 15px 35px -5px rgba(0, 0, 0, 0.05),
0 4px 6px -2px rgba(245, 158, 11, 0.05), 0 5px 15px -5px rgba(0, 0, 0, 0.02),
inset 0 0 0 1px rgba(255, 255, 255, 0.6); inset 0 0 0 1px rgba(255, 255, 255, 0.8);
animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -17,17 +18,17 @@
/* Let internal content handle gaps */ /* Let internal content handle gaps */
position: relative; position: relative;
overflow: hidden; 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 { .daily-insight-card:hover {
transform: translateY(-2px); transform: translateY(-4px);
box-shadow: box-shadow:
0 20px 40px -5px rgba(245, 158, 11, 0.15), 0 25px 45px -5px rgba(0, 0, 0, 0.08),
0 8px 10px -2px rgba(245, 158, 11, 0.05); 0 10px 15px -3px rgba(0, 0, 0, 0.03);
} }
/* AI Glowing Border Effect */ /* AI Glowing Border Effect - Subtler */
.daily-insight-card--ai::before { .daily-insight-card--ai::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -35,20 +36,21 @@
left: 0; left: 0;
right: 0; right: 0;
height: 3px; height: 3px;
background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b); background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24);
opacity: 0.8; opacity: 0.9;
} }
.daily-insight-card--ai::after { .daily-insight-card--ai::after {
/* Kept the scan effect but maybe lighter? */
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 1px; 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; 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 { @keyframes scan {
@@ -67,13 +69,15 @@
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
color: #d97706; color: #d97706;
/* Amber-600 */ font-weight: 700;
font-weight: 800; /* Reduced from 800 */
font-size: 0.85rem; font-size: 0.9rem;
text-transform: uppercase; /* Slightly bigger */
letter-spacing: 1px; text-transform: none;
padding-bottom: 0.75rem; /* Remove uppercase */
border-bottom: 1px dashed rgba(245, 158, 11, 0.2); letter-spacing: 0.02em;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(245, 158, 11, 0.15);
} }
/* ... */ /* ... */
@@ -81,15 +85,16 @@
.daily-insight__content { .daily-insight__content {
display: grid; display: grid;
grid-template-columns: 1fr 1px 1fr; grid-template-columns: 1fr 1px 1fr;
gap: 1.5rem; gap: 2rem;
/* Wider gap */
align-items: stretch; align-items: stretch;
/* Stretch to make divider same height */ padding-top: 1.25rem;
} }
.daily-insight__divider { .daily-insight__divider {
width: 1px; width: 1px;
height: auto; height: 100%;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent); 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 { .daily-insight__section {
@@ -99,11 +104,10 @@
} }
.daily-insight__title { .daily-insight__title {
font-size: 0.75rem; font-size: 0.8rem;
color: var(--color-text-secondary); color: var(--color-text-tertiary);
font-weight: 700; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.02em;
letter-spacing: 0.05em;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
@@ -115,15 +119,17 @@
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 50%; border-radius: 50%;
background: #fbbf24; background: #fcd34d;
/* Lighter amber */
box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
} }
.daily-insight__text { .daily-insight__text {
font-family: 'Outfit', sans-serif; font-family: 'Outfit', sans-serif;
/* Fallback for numbers, Chinese font handles text */
font-size: 1rem; font-size: 1rem;
color: var(--color-text); color: var(--color-text);
line-height: 1.6; line-height: 1.7;
/* More breathing room */
letter-spacing: 0.01em; letter-spacing: 0.01em;
} }
@@ -234,24 +240,30 @@
/* Tip section at bottom */ /* Tip section at bottom */
.daily-insight__footer { .daily-insight__footer {
margin-top: 1rem; margin-top: 0;
/* Remove margin relative to content, let padding handle it */
position: relative; position: relative;
padding-top: 1rem; padding-top: 1.5rem;
border-top: 1px dashed rgba(245, 158, 11, 0.2); border-top: none;
/* Remove dashed line */
} }
.daily-insight__tip { .daily-insight__tip {
display: flex; display: flex;
align-items: center; align-items: flex-start;
gap: 0.5rem; /* Align top for multi-line */
font-size: 0.85rem; gap: 0.75rem;
font-size: 0.9rem;
color: #92400e; color: #92400e;
/* Amber 800 */
font-weight: 500; font-weight: 500;
padding: 0.5rem 0.75rem; padding: 1rem 1.25rem;
background: rgba(254, 243, 199, 0.5); 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); 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 { .daily-insight__tip svg {