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