banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(sidebar): retune user area to dark theme with pink accent

Browse Source 
Rebase the sidebar's user information area onto the project's
dark sidebar surface (--color-sidebar-background #0d0b14) and
pink accent (--color-accent #f84d96), replacing the previous
white-card / purple-gradient look that did not align with the
design.

- Shell, back link, profile card, guest panel: switch to dark
  surfaces (#1a1625) with white text.
- VIP badge: use --color-accent pink (was purple fallback).
- VIP CTA + Sign up primary link: use --color-button-gradient
  pink gradient (was purple fallback).
- Sign in secondary link: use dialog border on transparent.
- Override nested SettingsSection elements (list/row/button/svg)
  inside the sidebar's settingsArea so the dark theme carries
  through without modifying the shared core component.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
chenhang
2026-06-15 18:49:45 +08:00
parent 664ff67ee9
commit 7b347a5c30
1 changed files with 69 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/sidebar/components/sidebar-screen.module.css
+69 -42
View File
@@ -1,21 +1,21 @@
.shell { .shell {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--color-page-background, #ffffff); background: var(--color-sidebar-background, #0d0b14);
color: #000; color: var(--color-text-primary, #ffffff);
min-height: 100dvh; min-height: 100dvh;
padding: var(--spacing-xxl, 24px); padding: var(--spacing-xxl, 24px) var(--spacing-lg, 16px);
} }
.backRow { .backRow {
padding: var(--spacing-md, 12px); padding: var(--spacing-md, 12px) 0;
} }
.backLink { .backLink {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--spacing-xs, 4px); gap: var(--spacing-xs, 4px);
color: #000; color: var(--color-text-primary, #ffffff);
text-decoration: none; text-decoration: none;
font-size: var(--font-size-lg, 16px); font-size: var(--font-size-lg, 16px);
font-weight: 400; font-weight: 400;
@@ -30,34 +30,55 @@
} }
.backIcon { .backIcon {
color: #000; color: var(--color-text-primary, #ffffff);
flex-shrink: 0; flex-shrink: 0;
} }
.backText { .backText {
color: #000; color: var(--color-text-primary, #ffffff);
font-size: var(--font-size-lg, 16px); font-size: var(--font-size-lg, 16px);
font-weight: 400; font-weight: 400;
} }
.settingsArea { .settingsArea {
padding: 0 var(--spacing-md, 12px); padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: stretch;
gap: var(--spacing-lg, 16px); gap: var(--spacing-lg, 16px);
} }
/* 让 SettingsSection 适配深色侧边栏背景（覆盖 _components/core 里的硬编码浅色） */
.settingsArea :global(section) > h3 {
color: var(--color-text-secondary, #9e9e9e);
}
.settingsArea :global(ul) {
background: var(--color-bubble-background, #1a1625);
}
.settingsArea :global(li) {
background: transparent;
}
.settingsArea :global(button) {
color: var(--color-text-primary, #ffffff);
}
.settingsArea :global(button) span {
color: var(--color-text-primary, #ffffff);
}
.settingsArea :global(svg) {
color: var(--color-text-primary, #ffffff);
}
/* ============================================================ /* ============================================================
* 用户信息区 * 用户信息区
* ============================================================ */ * ============================================================ */
.profileArea { .profileArea {
padding: 0 var(--spacing-md, 12px); padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
gap: var(--spacing-lg, 16px); gap: var(--spacing-lg, 16px);
width: 100%; width: 100%;
margin-top: var(--spacing-md, 12px);
} }
.userInfoCard { .userInfoCard {
@@ -65,9 +86,9 @@
align-items: center; align-items: center;
gap: var(--spacing-md, 12px); gap: var(--spacing-md, 12px);
padding: var(--spacing-lg, 16px); padding: var(--spacing-lg, 16px);
background: var(--color-settings-card-background, #ffffff); background: var(--color-bubble-background, #1a1625);
border-radius: var(--radius-lg, 12px); border-radius: var(--radius-xl, 16px);
color: #000; color: var(--color-text-primary, #ffffff);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -82,8 +103,8 @@
width: 64px; width: 64px;
height: 64px; height: 64px;
border-radius: var(--radius-full, 999px); border-radius: var(--radius-full, 999px);
background: var(--color-settings-row-background, #f2f2f2); background: var(--color-dark-gray, #2a2a2a);
color: #000; color: var(--color-text-primary, #ffffff);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -110,7 +131,7 @@
.userInfoName { .userInfoName {
font-size: var(--font-size-lg, 16px); font-size: var(--font-size-lg, 16px);
font-weight: 600; font-weight: 600;
color: #000; color: var(--color-text-primary, #ffffff);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -118,8 +139,8 @@
} }
.userInfoEmail { .userInfoEmail {
font-size: var(--font-size-sm, 14px); font-size: var(--font-size-sm, 12px);
color: var(--color-text-secondary, #666); color: var(--color-text-secondary, #9e9e9e);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -129,8 +150,9 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--spacing-xs, 4px); gap: var(--spacing-xs, 4px);
font-size: var(--font-size-sm, 14px); font-size: var(--font-size-sm, 12px);
color: var(--color-text-secondary, #666); color: var(--color-text-secondary, #9e9e9e);
margin-top: 2px;
} }
.vipBadge { .vipBadge {
@@ -138,12 +160,13 @@
align-items: center; align-items: center;
padding: 2px var(--spacing-sm, 8px); padding: 2px var(--spacing-sm, 8px);
border-radius: var(--radius-full, 999px); border-radius: var(--radius-full, 999px);
background: var(--color-accent, #7c5cff); background: var(--color-accent, #f84d96);
color: var(--color-text-primary, #ffffff); color: var(--color-text-primary, #ffffff);
font-size: var(--font-size-xs, 12px); font-size: var(--font-size-xs, 10px);
font-weight: 600; font-weight: 700;
letter-spacing: 0.5px; letter-spacing: 0.5px;
flex-shrink: 0; flex-shrink: 0;
text-transform: uppercase;
} }
.vipCta { .vipCta {
@@ -154,8 +177,8 @@
border-radius: var(--radius-full, 999px); border-radius: var(--radius-full, 999px);
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
var(--color-button-gradient-start, #7c5cff), var(--color-button-gradient-start, #ff67e0),
var(--color-button-gradient-end, #b48bff) var(--color-button-gradient-end, #ff52a2)
); );
color: var(--color-text-primary, #ffffff); color: var(--color-text-primary, #ffffff);
font-size: var(--font-size-lg, 16px); font-size: var(--font-size-lg, 16px);
@@ -164,6 +187,7 @@
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
box-sizing: border-box;
} }
.vipCta:hover { .vipCta:hover {
@@ -171,7 +195,7 @@
} }
.vipCta:focus-visible { .vipCta:focus-visible {
outline: 2px solid var(--color-accent, #7c5cff); outline: 2px solid var(--color-accent, #f84d96);
outline-offset: 2px; outline-offset: 2px;
} }
@@ -181,33 +205,34 @@
.guestPanel { .guestPanel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-md, 12px); gap: var(--spacing-sm, 8px);
padding: var(--spacing-lg, 16px); padding: var(--spacing-xl, 20px);
background: var(--color-settings-card-background, #ffffff); background: var(--color-bubble-background, #1a1625);
border-radius: var(--radius-lg, 12px); border-radius: var(--radius-xl, 16px);
color: #000; color: var(--color-text-primary, #ffffff);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
.guestTitle { .guestTitle {
font-size: var(--font-size-xl, 20px); font-size: var(--font-size-xl, 18px);
font-weight: 600; font-weight: 600;
color: #000; color: var(--color-text-primary, #ffffff);
margin: 0; margin: 0;
} }
.guestSubtitle { .guestSubtitle {
font-size: var(--font-size-sm, 14px); font-size: var(--font-size-sm, 12px);
color: var(--color-text-secondary, #666); color: var(--color-text-secondary, #9e9e9e);
margin: 0; margin: 0;
line-height: 1.5;
} }
.guestActions { .guestActions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--spacing-sm, 8px); gap: var(--spacing-sm, 8px);
margin-top: var(--spacing-sm, 8px); margin-top: var(--spacing-md, 12px);
} }
.guestPrimaryLink { .guestPrimaryLink {
@@ -218,14 +243,15 @@
border-radius: var(--radius-full, 999px); border-radius: var(--radius-full, 999px);
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
var(--color-button-gradient-start, #7c5cff), var(--color-button-gradient-start, #ff67e0),
var(--color-button-gradient-end, #b48bff) var(--color-button-gradient-end, #ff52a2)
); );
color: var(--color-text-primary, #ffffff); color: var(--color-text-primary, #ffffff);
font-size: var(--font-size-lg, 16px); font-size: var(--font-size-lg, 16px);
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
border: 0; border: 0;
box-sizing: border-box;
} }
.guestPrimaryLink:hover { .guestPrimaryLink:hover {
@@ -239,15 +265,16 @@
padding: var(--spacing-md, 12px) var(--spacing-lg, 16px); padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
border-radius: var(--radius-full, 999px); border-radius: var(--radius-full, 999px);
background: transparent; background: transparent;
color: #000; color: var(--color-text-primary, #ffffff);
font-size: var(--font-size-lg, 16px); font-size: var(--font-size-lg, 16px);
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
border: 1px solid var(--color-auth-border, #d0d0d0); border: 1px solid var(--color-dialog-border, rgba(255, 255, 255, 0.1));
box-sizing: border-box;
} }
.guestSecondaryLink:hover { .guestSecondaryLink:hover {
background: var(--color-settings-row-background, #f2f2f2); background: var(--color-dark-gray, #2a2a2a);
} }
/* ============================================================ /* ============================================================
@@ -255,7 +282,7 @@
* ============================================================ */ * ============================================================ */
.skeleton { .skeleton {
display: block; display: block;
background: var(--color-settings-row-background, #e5e5e5); background: var(--color-dark-gray, #2a2a2a);
border-radius: var(--radius-md, 8px); border-radius: var(--radius-md, 8px);
} }