samehabouelsaad/sal-modular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance themes

Browse Source
This commit is contained in:
zaelgohary
2025-05-29 09:03:18 +03:00
parent 536c077fbf
commit b0b6359be1
1 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
crypto_vault_extension/styles/popup.css
View File

@@ -1,4 +1,4 @@
/* Enhanced CSS Variables for harmonious theming */
/* Balanced CSS Variables for harmonious theming */
:root {
/* Core color foundation - mathematically harmonious */
--primary-hue: 235;
@@ -6,27 +6,27 @@
--secondary-hue: 200;
--accent-hue: 160;
/* Light theme - clean and professional */
--bg-primary: linear-gradient(135deg, hsl(var(--primary-hue), 15%, 96%) 0%, hsl(var(--secondary-hue), 20%, 94%) 100%);
--bg-secondary: rgba(255, 255, 255, 0.98);
--bg-card: rgba(255, 255, 255, 0.95);
--bg-input: hsl(var(--primary-hue), 20%, 98%);
/* Light theme - softer, less stark */
--bg-primary: linear-gradient(135deg, hsl(var(--primary-hue), 12%, 92%) 0%, hsl(var(--secondary-hue), 15%, 90%) 100%);
--bg-secondary: rgba(255, 255, 255, 0.92);
--bg-card: rgba(255, 255, 255, 0.88);
--bg-input: hsl(var(--primary-hue), 15%, 94%);
--bg-button-primary: hsl(var(--primary-hue), var(--primary-saturation), 55%);
--bg-button-secondary: hsl(var(--primary-hue), 15%, 92%);
--bg-button-secondary: hsl(var(--primary-hue), 12%, 88%);
--bg-button-ghost: transparent;
--text-primary: hsl(var(--primary-hue), 25%, 15%);
--text-secondary: hsl(var(--primary-hue), 15%, 35%);
--text-muted: hsl(var(--primary-hue), 10%, 55%);
--text-primary: hsl(var(--primary-hue), 20%, 20%);
--text-secondary: hsl(var(--primary-hue), 12%, 40%);
--text-muted: hsl(var(--primary-hue), 8%, 58%);
--text-inverse: white;
--text-button-primary: white;
--text-button-secondary: hsl(var(--primary-hue), 25%, 25%);
--text-button-secondary: hsl(var(--primary-hue), 20%, 30%);
--border-color: hsl(var(--primary-hue), 20%, 88%);
--border-input: hsl(var(--primary-hue), 15%, 82%);
--border-color: hsl(var(--primary-hue), 15%, 82%);
--border-input: hsl(var(--primary-hue), 12%, 78%);
--border-focus: hsl(var(--primary-hue), var(--primary-saturation), 55%);
--shadow-card: 0 4px 20px hsla(var(--primary-hue), 30%, 20%, 0.08);
--shadow-card: 0 4px 20px hsla(var(--primary-hue), 25%, 25%, 0.12);
--shadow-button: 0 2px 8px hsla(var(--primary-hue), var(--primary-saturation), 55%, 0.25);
--shadow-button-hover: 0 4px 16px hsla(var(--primary-hue), var(--primary-saturation), 55%, 0.35);
@@ -46,36 +46,36 @@
--spacing-3xl: 32px;
}
/* Dark theme - harmonious complement to light theme */
/* Dark theme - balanced complement to light theme */
[data-theme="dark"] {
--bg-primary: linear-gradient(135deg, hsl(var(--primary-hue), 20%, 8%) 0%, hsl(var(--secondary-hue), 15%, 12%) 100%);
--bg-secondary: hsla(var(--primary-hue), 25%, 10%, 0.98);
--bg-card: hsla(var(--primary-hue), 20%, 14%, 0.95);
--bg-input: hsl(var(--primary-hue), 15%, 18%);
--bg-button-primary: hsl(var(--primary-hue), var(--primary-saturation), 60%);
--bg-button-secondary: hsl(var(--primary-hue), 15%, 22%);
--bg-primary: linear-gradient(135deg, hsl(var(--primary-hue), 15%, 18%) 0%, hsl(var(--secondary-hue), 12%, 22%) 100%);
--bg-secondary: hsla(var(--primary-hue), 18%, 20%, 0.92);
--bg-card: hsla(var(--primary-hue), 15%, 24%, 0.88);
--bg-input: hsl(var(--primary-hue), 12%, 28%);
--bg-button-primary: hsl(var(--primary-hue), var(--primary-saturation), 58%);
--bg-button-secondary: hsl(var(--primary-hue), 12%, 32%);
--bg-button-ghost: transparent;
--text-primary: hsl(var(--primary-hue), 15%, 92%);
--text-secondary: hsl(var(--primary-hue), 10%, 75%);
--text-muted: hsl(var(--primary-hue), 8%, 55%);
--text-inverse: hsl(var(--primary-hue), 20%, 8%);
--text-primary: hsl(var(--primary-hue), 12%, 85%);
--text-secondary: hsl(var(--primary-hue), 8%, 68%);
--text-muted: hsl(var(--primary-hue), 6%, 52%);
--text-inverse: hsl(var(--primary-hue), 15%, 18%);
--text-button-primary: white;
--text-button-secondary: hsl(var(--primary-hue), 15%, 85%);
--text-button-secondary: hsl(var(--primary-hue), 12%, 78%);
--border-color: hsl(var(--primary-hue), 15%, 25%);
--border-input: hsl(var(--primary-hue), 12%, 30%);
--border-focus: hsl(var(--primary-hue), var(--primary-saturation), 60%);
--border-color: hsl(var(--primary-hue), 12%, 38%);
--border-input: hsl(var(--primary-hue), 10%, 42%);
--border-focus: hsl(var(--primary-hue), var(--primary-saturation), 58%);
--shadow-card: 0 4px 20px hsla(var(--primary-hue), 30%, 5%, 0.4);
--shadow-button: 0 2px 8px hsla(var(--primary-hue), var(--primary-saturation), 60%, 0.3);
--shadow-button-hover: 0 4px 16px hsla(var(--primary-hue), var(--primary-saturation), 60%, 0.4);
--shadow-card: 0 4px 20px hsla(var(--primary-hue), 20%, 10%, 0.25);
--shadow-button: 0 2px 8px hsla(var(--primary-hue), var(--primary-saturation), 58%, 0.3);
--shadow-button-hover: 0 4px 16px hsla(var(--primary-hue), var(--primary-saturation), 58%, 0.4);
/* Enhanced accent colors for dark theme */
--accent-success: hsl(var(--accent-hue), 60%, 55%);
--accent-error: hsl(0, 65%, 60%);
--accent-warning: hsl(35, 80%, 60%);
--accent-info: hsl(var(--primary-hue), 30%, 70%);
/* Balanced accent colors for dark theme */
--accent-success: hsl(var(--accent-hue), 55%, 52%);
--accent-error: hsl(0, 60%, 58%);
--accent-warning: hsl(35, 75%, 58%);
--accent-info: hsl(var(--primary-hue), 28%, 68%);
}
/* Consolidated button styling system */
@@ -421,14 +421,14 @@ input:focus, select:focus, textarea:focus {
/* Placeholder styling */
input::placeholder, textarea::placeholder {
color: var(--text-muted);
opacity: 1;
opacity: 0.9;
}
/* Dark theme placeholder styling */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
color: #e2e8f0;
opacity: 0.8;
color: var(--text-muted);
opacity: 0.85;
}
.select {