mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-18 10:40:50 +08:00
Refactor color variables and styles across components for a cohesive design update
- Updated active state colors in ToastSelect component for better visibility. - Adjusted box-shadow and border colors in ModelMappingDiagram styles. - Changed provider colors in ModelMappingDiagram for improved aesthetics. - Modified background and border styles in ProviderNav for a more modern look. - Updated accent colors in StatCards to align with new color scheme. - Refined token colors in TokenBreakdownChart for consistency. - Adjusted sparkline colors in useSparklines hook to match new design. - Changed error icon color in AiProvidersOpenAIEditPage for better contrast. - Updated failure badge styles in AiProvidersPage for a cleaner appearance. - Refined various status styles in AuthFilesPage for improved clarity. - Updated colors in ConfigPage to use new variable definitions. - Refined error and warning styles in LoginPage for better user feedback. - Adjusted log status colors in LogsPage for consistency with new theme. - Updated OAuthPage styles to reflect new color variables. - Refined quota styles in QuotaPage for better visual hierarchy. - Updated system page styles for improved user experience. - Adjusted usage page styles to align with new design language. - Refactored component styles to use new color variables in components.scss. - Updated layout styles to reflect new primary color definitions. - Refined theme colors in themes.scss for a more cohesive look. - Updated color variables in variables.scss to reflect new design choices. - Adjusted chart colors in usage.ts for consistency with new color scheme.
This commit is contained in:
Supra4E8C
@@ -59,7 +59,7 @@ function StatusSuccessIcon() {
|
||||
function StatusErrorIcon() {
|
||||
return (
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
|
||||
<circle cx="8" cy="8" r="8" fill="var(--danger-color, #ef4444)" />
|
||||
<circle cx="8" cy="8" r="8" fill="var(--danger-color, #c65746)" />
|
||||
<path
|
||||
d="M5 5L11 11M11 5L5 11"
|
||||
stroke="white"
|
||||
|
||||
@@ -93,9 +93,9 @@
|
||||
}
|
||||
|
||||
.statFailure {
|
||||
background-color: var(--failure-badge-bg, #fee2e2);
|
||||
color: var(--failure-badge-text, #991b1b);
|
||||
border-color: var(--failure-badge-border, #fca5a5);
|
||||
background-color: var(--failure-badge-bg);
|
||||
color: var(--failure-badge-text);
|
||||
border-color: var(--failure-badge-border);
|
||||
}
|
||||
|
||||
// 字段行样式：标签 + 值
|
||||
@@ -311,8 +311,8 @@
|
||||
}
|
||||
|
||||
.apiKeyEntryStatFailure {
|
||||
background: var(--failure-badge-bg, #fee2e2);
|
||||
color: var(--failure-badge-text, #991b1b);
|
||||
background: var(--failure-badge-bg);
|
||||
color: var(--failure-badge-text);
|
||||
}
|
||||
|
||||
// OpenAI 模型发现（二级界面）
|
||||
@@ -422,11 +422,11 @@
|
||||
}
|
||||
|
||||
.statusBlockFailure {
|
||||
background-color: var(--danger-color, #ef4444);
|
||||
background-color: var(--danger-color);
|
||||
}
|
||||
|
||||
.statusBlockMixed {
|
||||
background-color: var(--warning-color, #f59e0b);
|
||||
background-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.statusBlockIdle {
|
||||
@@ -456,8 +456,8 @@
|
||||
}
|
||||
|
||||
.statusRateLow {
|
||||
color: var(--failure-badge-text, #991b1b);
|
||||
background: var(--failure-badge-bg, #fee2e2);
|
||||
color: var(--failure-badge-text);
|
||||
background: var(--failure-badge-bg);
|
||||
}
|
||||
|
||||
// ============================================
|
||||
@@ -775,8 +775,8 @@
|
||||
// 暗色主题适配
|
||||
:global([data-theme='dark']) {
|
||||
.headerBadge {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
background: rgba($primary-color, 0.14);
|
||||
border-color: rgba($primary-color, 0.35);
|
||||
color: var(--text-secondary);
|
||||
|
||||
strong {
|
||||
@@ -785,22 +785,22 @@
|
||||
}
|
||||
|
||||
.modelTag {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
background: rgba($primary-color, 0.1);
|
||||
border-color: var(--border-secondary);
|
||||
}
|
||||
|
||||
.excludedModelTag {
|
||||
background: rgba(251, 191, 36, 0.22);
|
||||
border-color: rgba(251, 191, 36, 0.55);
|
||||
color: #fde68a;
|
||||
background: rgba($warning-color, 0.22);
|
||||
border-color: rgba($warning-color, 0.55);
|
||||
color: var(--warning-color);
|
||||
|
||||
.modelName {
|
||||
color: #fde68a;
|
||||
color: var(--warning-color);
|
||||
}
|
||||
}
|
||||
|
||||
.excludedModelsLabel {
|
||||
color: #fde68a;
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.apiKeyEntryCard {
|
||||
@@ -827,7 +827,7 @@
|
||||
}
|
||||
|
||||
.statusRateLow {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: #fca5a5;
|
||||
background: rgba($error-color, 0.24);
|
||||
color: #f1b0a6;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
|
||||
.errorBox {
|
||||
padding: $spacing-md;
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
background-color: rgba($error-color, 0.1);
|
||||
border: 1px solid var(--danger-color);
|
||||
border-radius: $radius-md;
|
||||
color: var(--danger-color);
|
||||
@@ -382,11 +382,11 @@
|
||||
}
|
||||
|
||||
.quotaBarFillMedium {
|
||||
background-color: var(--warning-color, #f59e0b);
|
||||
background-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.quotaBarFillLow {
|
||||
background-color: var(--danger-color, #ef4444);
|
||||
background-color: var(--danger-color);
|
||||
}
|
||||
|
||||
.quotaMeta {
|
||||
@@ -443,7 +443,7 @@
|
||||
.quotaError {
|
||||
font-size: 12px;
|
||||
color: var(--danger-color);
|
||||
background-color: rgba(239, 68, 68, 0.08);
|
||||
background-color: rgba($error-color, 0.08);
|
||||
border: 1px solid var(--danger-color);
|
||||
border-radius: $radius-sm;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
@@ -451,9 +451,9 @@
|
||||
|
||||
.quotaWarning {
|
||||
font-size: 12px;
|
||||
color: var(--warning-color, #f59e0b);
|
||||
background-color: rgba(245, 158, 11, 0.12);
|
||||
border: 1px solid var(--warning-color, #f59e0b);
|
||||
color: var(--warning-text);
|
||||
background-color: var(--warning-bg);
|
||||
border: 1px solid var(--warning-border);
|
||||
border-radius: $radius-sm;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
}
|
||||
@@ -586,9 +586,9 @@
|
||||
}
|
||||
|
||||
.statFailure {
|
||||
background-color: var(--failure-badge-bg, #fee2e2);
|
||||
color: var(--failure-badge-text, #991b1b);
|
||||
border-color: var(--failure-badge-border, #fca5a5);
|
||||
background-color: var(--failure-badge-bg);
|
||||
color: var(--failure-badge-text);
|
||||
border-color: var(--failure-badge-border);
|
||||
}
|
||||
|
||||
// 状态监测栏
|
||||
@@ -627,11 +627,11 @@
|
||||
}
|
||||
|
||||
.statusBlockFailure {
|
||||
background-color: var(--danger-color, #ef4444);
|
||||
background-color: var(--danger-color);
|
||||
}
|
||||
|
||||
.statusBlockMixed {
|
||||
background-color: var(--warning-color, #f59e0b);
|
||||
background-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.statusBlockIdle {
|
||||
@@ -661,8 +661,8 @@
|
||||
}
|
||||
|
||||
.statusRateLow {
|
||||
color: var(--failure-badge-text, #991b1b);
|
||||
background: var(--failure-badge-bg, #fee2e2);
|
||||
color: var(--failure-badge-text);
|
||||
background: var(--failure-badge-bg);
|
||||
}
|
||||
|
||||
.prefixProxyEditor {
|
||||
@@ -687,7 +687,7 @@
|
||||
padding: $spacing-sm $spacing-md;
|
||||
border-radius: $radius-md;
|
||||
border: 1px solid var(--danger-color);
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
background-color: rgba($error-color, 0.1);
|
||||
color: var(--danger-color);
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -1097,7 +1097,7 @@
|
||||
.modelExcludedBadge {
|
||||
font-size: 10px;
|
||||
color: var(--danger-color);
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
background-color: rgba($error-color, 0.1);
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--danger-color);
|
||||
|
||||
@@ -192,15 +192,15 @@
|
||||
color: var(--text-secondary);
|
||||
|
||||
&.modified {
|
||||
color: #f59e0b;
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
&.saved {
|
||||
color: #16a34a;
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
&.error {
|
||||
color: #dc2626;
|
||||
color: var(--danger-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -395,8 +395,8 @@
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 999px;
|
||||
background: #f59e0b;
|
||||
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
|
||||
background: var(--warning-color);
|
||||
box-shadow: 0 0 0 2px rgba($warning-color, 0.25);
|
||||
}
|
||||
|
||||
:global([data-theme='dark']) {
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
background: var(--bg-primary);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
// 左侧品牌展示区
|
||||
@@ -88,7 +88,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $spacing-2xl;
|
||||
background: var(--bg-primary);
|
||||
background: var(--bg-secondary);
|
||||
position: relative;
|
||||
|
||||
@media (max-width: $breakpoint-mobile) {
|
||||
@@ -183,7 +183,7 @@
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
|
||||
box-shadow: 0 0 0 3px rgba($primary-color, 0.18);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -235,8 +235,8 @@
|
||||
|
||||
// 错误提示框
|
||||
.errorBox {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.4);
|
||||
background: rgba($error-color, 0.1);
|
||||
border: 1px solid rgba($error-color, 0.4);
|
||||
border-radius: $radius-md;
|
||||
padding: $spacing-sm $spacing-md;
|
||||
color: $error-color;
|
||||
|
||||
@@ -308,7 +308,7 @@
|
||||
color: var(--text-primary);
|
||||
|
||||
&:hover {
|
||||
background: rgba(59, 130, 246, 0.06);
|
||||
background: rgba($primary-color, 0.06);
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
@@ -409,14 +409,14 @@
|
||||
|
||||
.statusInfo {
|
||||
color: var(--info-color);
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
border-color: rgba(59, 130, 246, 0.25);
|
||||
background: rgba($primary-color, 0.12);
|
||||
border-color: rgba($primary-color, 0.25);
|
||||
}
|
||||
|
||||
.statusWarn {
|
||||
color: var(--warning-color);
|
||||
background: rgba(245, 158, 11, 0.14);
|
||||
border-color: rgba(245, 158, 11, 0.25);
|
||||
color: var(--warning-text);
|
||||
background: var(--warning-bg);
|
||||
border-color: var(--warning-border);
|
||||
}
|
||||
|
||||
.statusError {
|
||||
@@ -427,20 +427,20 @@
|
||||
|
||||
.levelInfo {
|
||||
color: var(--info-color);
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
border-color: rgba(59, 130, 246, 0.25);
|
||||
background: rgba($primary-color, 0.12);
|
||||
border-color: rgba($primary-color, 0.25);
|
||||
}
|
||||
|
||||
.levelWarn {
|
||||
color: var(--warning-color);
|
||||
background: rgba(245, 158, 11, 0.14);
|
||||
border-color: rgba(245, 158, 11, 0.25);
|
||||
color: var(--warning-text);
|
||||
background: var(--warning-bg);
|
||||
border-color: var(--warning-border);
|
||||
}
|
||||
|
||||
.levelError {
|
||||
color: var(--error-color);
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
border-color: rgba(239, 68, 68, 0.25);
|
||||
background: rgba($error-color, 0.12);
|
||||
border-color: rgba($error-color, 0.25);
|
||||
}
|
||||
|
||||
.levelDebug,
|
||||
@@ -452,8 +452,8 @@
|
||||
|
||||
.methodBadge {
|
||||
color: var(--text-primary);
|
||||
background: rgba(59, 130, 246, 0.08);
|
||||
border-color: rgba(59, 130, 246, 0.22);
|
||||
background: rgba($primary-color, 0.08);
|
||||
border-color: rgba($primary-color, 0.22);
|
||||
}
|
||||
|
||||
.path {
|
||||
|
||||
@@ -61,13 +61,13 @@
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
color: #dc2626;
|
||||
background-color: rgba($error-color, 0.12);
|
||||
color: $error-color;
|
||||
}
|
||||
|
||||
&.waiting {
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
color: #3b82f6;
|
||||
background-color: rgba($primary-color, 0.12);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -65,7 +65,7 @@
|
||||
|
||||
.errorBox {
|
||||
padding: $spacing-md;
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
background-color: rgba($error-color, 0.1);
|
||||
border: 1px solid var(--danger-color);
|
||||
border-radius: $radius-md;
|
||||
color: var(--danger-color);
|
||||
@@ -233,11 +233,11 @@
|
||||
}
|
||||
|
||||
.quotaBarFillMedium {
|
||||
background-color: var(--warning-color, #f59e0b);
|
||||
background-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.quotaBarFillLow {
|
||||
background-color: var(--danger-color, #ef4444);
|
||||
background-color: var(--danger-color);
|
||||
}
|
||||
|
||||
.quotaMeta {
|
||||
@@ -276,7 +276,7 @@
|
||||
.quotaError {
|
||||
font-size: 12px;
|
||||
color: var(--danger-color);
|
||||
background-color: rgba(239, 68, 68, 0.08);
|
||||
background-color: rgba($error-color, 0.08);
|
||||
border: 1px solid var(--danger-color);
|
||||
border-radius: $radius-sm;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
@@ -284,9 +284,9 @@
|
||||
|
||||
.quotaWarning {
|
||||
font-size: 12px;
|
||||
color: var(--warning-color, #f59e0b);
|
||||
background-color: rgba(245, 158, 11, 0.12);
|
||||
border: 1px solid var(--warning-color, #f59e0b);
|
||||
color: var(--warning-text);
|
||||
background-color: var(--warning-bg);
|
||||
border: 1px solid var(--warning-border);
|
||||
border-radius: $radius-sm;
|
||||
padding: $spacing-xs $spacing-sm;
|
||||
}
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 8px 18px rgba(59, 130, 246, 0.15);
|
||||
box-shadow: 0 8px 18px rgba($primary-color, 0.18);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
||||
@@ -75,12 +75,12 @@
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--shadow), 0 0 0 3px rgba(59, 130, 246, 0.15);
|
||||
box-shadow: var(--shadow), 0 0 0 3px rgba($primary-color, 0.18);
|
||||
}
|
||||
|
||||
&[aria-expanded='true'] {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: var(--shadow), 0 0 0 3px rgba(59, 130, 246, 0.15);
|
||||
box-shadow: var(--shadow), 0 0 0 3px rgba($primary-color, 0.18);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -135,8 +135,8 @@
|
||||
}
|
||||
|
||||
.timeRangeOptionActive {
|
||||
border-color: rgba(59, 130, 246, 0.5);
|
||||
background: rgba(59, 130, 246, 0.10);
|
||||
border-color: rgba($primary-color, 0.5);
|
||||
background: rgba($primary-color, 0.1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
|
||||
.errorBox {
|
||||
padding: 10px;
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
background-color: rgba($error-color, 0.1);
|
||||
border: 1px solid var(--error-color);
|
||||
border-radius: $radius-sm;
|
||||
color: var(--error-color);
|
||||
@@ -170,7 +170,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(243, 244, 246, 0.75);
|
||||
background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
@@ -191,9 +191,9 @@
|
||||
}
|
||||
|
||||
.loadingOverlaySpinner {
|
||||
border-color: rgba(59, 130, 246, 0.25);
|
||||
border-color: rgba($primary-color, 0.25);
|
||||
border-top-color: var(--primary-color);
|
||||
box-shadow: 0 0 10px rgba(59, 130, 246, 0.25);
|
||||
box-shadow: 0 0 10px rgba($primary-color, 0.25);
|
||||
}
|
||||
|
||||
.loadingOverlayText {
|
||||
@@ -214,9 +214,9 @@
|
||||
}
|
||||
|
||||
.statCard {
|
||||
--accent: #3b82f6;
|
||||
--accent-soft: rgba(59, 130, 246, 0.18);
|
||||
--accent-border: rgba(59, 130, 246, 0.35);
|
||||
--accent: var(--primary-color);
|
||||
--accent-soft: rgba($primary-color, 0.18);
|
||||
--accent-border: rgba($primary-color, 0.35);
|
||||
|
||||
grid-column: span 4;
|
||||
position: relative;
|
||||
@@ -366,11 +366,11 @@
|
||||
}
|
||||
|
||||
.statSuccess {
|
||||
color: var(--success-color, #22c55e);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.statFailure {
|
||||
color: var(--danger-color, #ef4444);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.statNeutral {
|
||||
@@ -459,8 +459,8 @@
|
||||
}
|
||||
|
||||
.apiSortBtnActive {
|
||||
border-color: rgba(59, 130, 246, 0.5);
|
||||
background: rgba(59, 130, 246, 0.10);
|
||||
border-color: rgba($primary-color, 0.5);
|
||||
background: rgba($primary-color, 0.1);
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -759,7 +759,7 @@
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
|
||||
box-shadow: 0 0 0 3px rgba($primary-color, 0.18);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user