congsh/gamegroup2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: switch to light green + deep purple theme, fix input colors

Browse Source 
- Primary: emerald green (#059669), accent: deep purple (#7c3aed)
- Light backgrounds: #f0fdf4 page, #ffffff cards
- Login/Register: light gradient bg, white card, Element Plus inputs
- NotFound: matching light theme
- All pages follow via CSS variables

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
congsh
2026-04-17 18:07:14 +08:00
parent 6895fd05be
commit c5d5484f9e
5 changed files with 100 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/design.css
+65 -60
View File
@@ -1,28 +1,30 @@
:root {
/* 主色调 */
--gg-primary: #6366f1;
--gg-primary-light: #818cf8;
--gg-primary-dark: #4f46e5;
--gg-accent: #a855f7;
--gg-accent-light: #c084fc;
/* 主色调：微绿 */
--gg-primary: #059669;
--gg-primary-light: #10b981;
--gg-primary-dark: #047857;
/* 背景色 */
--gg-bg: #0f172a;
--gg-bg-card: #1e293b;
--gg-bg-elevated: #334155;
--gg-bg-hover: #334155;
/* 辅助色：深紫 */
--gg-accent: #7c3aed;
--gg-accent-light: #8b5cf6;
/* 背景色（亮色） */
--gg-bg: #f0fdf4;
--gg-bg-card: #ffffff;
--gg-bg-elevated: #f1f5f9;
--gg-bg-hover: #e2e8f0;
/* 文字色 */
--gg-text: #f1f5f9;
--gg-text-secondary: #94a3b8;
--gg-text-muted: #64748b;
--gg-text: #1e293b;
--gg-text-secondary: #475569;
--gg-text-muted: #94a3b8;
/* 边框 */
--gg-border: #334155;
--gg-border-light: #475569;
--gg-border: #e2e8f0;
--gg-border-light: #cbd5e1;
/* 状态色 */
--gg-success: #22c55e;
--gg-success: #10b981;
--gg-danger: #ef4444;
--gg-warning: #f59e0b;
--gg-info: #3b82f6;
@@ -34,50 +36,51 @@
--gg-radius-xl: 20px;
/* 阴影 */
--gg-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
--gg-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
--gg-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
--gg-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
/* 渐变 */
--gg-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
--gg-gradient-success: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
--gg-gradient: linear-gradient(135deg, #059669 0%, #7c3aed 100%);
--gg-gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
--gg-gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
--gg-gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
/* ── Element Plus 覆盖 ── */
--el-color-primary: #6366f1;
--el-color-primary-light-3: #818cf8;
--el-color-primary-light-5: #a5b4fc;
--el-color-primary-light-7: #c7d2fe;
--el-color-primary-light-9: #312e81;
--el-color-primary-dark-2: #4f46e5;
--el-color-primary: #059669;
--el-color-primary-light-3: #10b981;
--el-color-primary-light-5: #34d399;
--el-color-primary-light-7: #6ee7b7;
--el-color-primary-light-9: #ecfdf5;
--el-color-primary-dark-2: #047857;
--el-color-success: #22c55e;
--el-color-success: #10b981;
--el-color-warning: #f59e0b;
--el-color-danger: #ef4444;
--el-color-info: #64748b;
--el-bg-color: #1e293b;
--el-bg-color-page: #0f172a;
--el-bg-color-overlay: #1e293b;
--el-bg-color: #ffffff;
--el-bg-color-page: #f0fdf4;
--el-bg-color-overlay: #ffffff;
--el-text-color-primary: #f1f5f9;
--el-text-color-regular: #e2e8f0;
--el-text-color-secondary: #94a3b8;
--el-text-color-placeholder: #64748b;
--el-text-color-primary: #1e293b;
--el-text-color-regular: #334155;
--el-text-color-secondary: #64748b;
--el-text-color-placeholder: #94a3b8;
--el-border-color: #334155;
--el-border-color-light: #475569;
--el-border-color-lighter: #334155;
--el-border-color-extra-light: #1e293b;
--el-border-color: #e2e8f0;
--el-border-color-light: #f1f5f9;
--el-border-color-lighter: #f8fafc;
--el-border-color-extra-light: #f0fdf4;
--el-fill-color: #334155;
--el-fill-color-light: #1e293b;
--el-fill-color-lighter: #0f172a;
--el-fill-color-extra-light: #1e293b;
--el-fill-color-blank: #1e293b;
--el-fill-color-dark: #475569;
--el-fill-color: #f1f5f9;
--el-fill-color-light: #f8fafc;
--el-fill-color-lighter: #ffffff;
--el-fill-color-extra-light: #f0fdf4;
--el-fill-color-blank: #ffffff;
--el-fill-color-dark: #e2e8f0;
--el-mask-color: rgba(0, 0, 0, 0.6);
--el-box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
--el-mask-color: rgba(0, 0, 0, 0.4);
--el-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
/* ── 全局基础 ── */
@@ -95,7 +98,7 @@ body {
}
a {
color: var(--gg-primary-light);
color: var(--gg-primary);
text-decoration: none;
}
@@ -132,7 +135,7 @@ a:hover {
/* Input */
.el-input__wrapper {
background: var(--gg-bg) !important;
background: #ffffff !important;
box-shadow: 0 0 0 1px var(--gg-border) inset !important;
border-radius: var(--gg-radius-sm) !important;
}
@@ -149,7 +152,7 @@ a:hover {
color: var(--gg-text-muted) !important;
}
.el-textarea__inner {
background: var(--gg-bg) !important;
background: #ffffff !important;
color: var(--gg-text) !important;
border-color: var(--gg-border) !important;
}
@@ -160,6 +163,7 @@ a:hover {
border-color: var(--gg-border) !important;
border-radius: var(--gg-radius-md) !important;
padding: 6px !important;
box-shadow: var(--gg-shadow-lg) !important;
}
.el-dropdown-menu__item {
color: var(--gg-text) !important;
@@ -168,7 +172,7 @@ a:hover {
}
.el-dropdown-menu__item:hover {
background: var(--gg-bg-hover) !important;
color: var(--gg-primary-light) !important;
color: var(--gg-primary) !important;
}
.el-dropdown-menu__item--divided::before {
background: var(--gg-border) !important;
@@ -190,7 +194,7 @@ a:hover {
/* Button */
.el-button--primary {
background: var(--gg-gradient) !important;
background: var(--gg-gradient-green) !important;
border: none !important;
border-radius: var(--gg-radius-sm) !important;
}
@@ -198,14 +202,14 @@ a:hover {
opacity: 0.9;
}
.el-button--default {
background: var(--gg-bg-elevated) !important;
background: var(--gg-bg-card) !important;
border-color: var(--gg-border) !important;
color: var(--gg-text) !important;
border-radius: var(--gg-radius-sm) !important;
}
.el-button--default:hover {
border-color: var(--gg-primary) !important;
color: var(--gg-primary-light) !important;
color: var(--gg-primary) !important;
}
/* Badge */
@@ -224,6 +228,7 @@ a:hover {
background: var(--gg-bg-card) !important;
border-color: var(--gg-border) !important;
border-radius: var(--gg-radius-md) !important;
box-shadow: var(--gg-shadow-lg) !important;
}
.el-message__content {
color: var(--gg-text) !important;
@@ -232,14 +237,14 @@ a:hover {
/* Pagination */
.el-pagination {
--el-pagination-button-bg-color: var(--gg-bg-elevated);
--el-pagination-hover-color: var(--gg-primary-light);
--el-pagination-hover-color: var(--gg-primary);
}
.el-pager li {
background: var(--gg-bg-elevated) !important;
color: var(--gg-text-secondary) !important;
}
.el-pager li.is-active {
background: var(--gg-gradient) !important;
background: var(--gg-gradient-green) !important;
color: white !important;
}
@@ -256,7 +261,7 @@ a:hover {
background: var(--gg-bg-hover) !important;
}
.el-select-dropdown__item.selected {
color: var(--gg-primary-light) !important;
color: var(--gg-primary) !important;
}
/* Checkbox */
@@ -287,7 +292,7 @@ a:hover {
/* Loading */
.el-loading-mask {
background: rgba(15, 23, 42, 0.8) !important;
background: rgba(240, 253, 244, 0.8) !important;
}
/* ── 工具类 ── */
@@ -296,7 +301,7 @@ a:hover {
}
.gg-glow {
box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
box-shadow: 0 0 20px rgba(5, 150, 105, 0.2);
}
.gg-card {
@@ -309,7 +314,7 @@ a:hover {
.gg-card:hover {
border-color: var(--gg-primary);
box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
box-shadow: 0 0 20px rgba(5, 150, 105, 0.1);
}
.gg-text-gradient {