Greg/Paris
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update color scheme to French-inspired palette with navy and blue tones

Browse Source
This commit is contained in:
Greg 2025-06-27 13:47:36 +02:00
parent a69e011fe9
commit 222ed0408d
1 changed files with 43 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
style.css
View File

@ -1,26 +1,26 @@
:root {
/* Colors */
--color-background: rgba(252, 252, 249, 1);
--color-surface: rgba(255, 255, 253, 1);
--color-text: rgba(19, 52, 59, 1);
--color-text-secondary: rgba(98, 108, 113, 1);
--color-primary: rgba(33, 128, 141, 1);
--color-primary-hover: rgba(29, 116, 128, 1);
--color-primary-active: rgba(26, 104, 115, 1);
--color-secondary: rgba(94, 82, 64, 0.12);
--color-secondary-hover: rgba(94, 82, 64, 0.2);
--color-secondary-active: rgba(94, 82, 64, 0.25);
--color-border: rgba(94, 82, 64, 0.2);
--color-btn-primary-text: rgba(252, 252, 249, 1);
--color-card-border: rgba(94, 82, 64, 0.12);
--color-card-border-inner: rgba(94, 82, 64, 0.12);
--color-error: rgba(192, 21, 47, 1);
--color-success: rgba(33, 128, 141, 1);
--color-warning: rgba(168, 75, 47, 1);
--color-info: rgba(98, 108, 113, 1);
--color-focus-ring: rgba(33, 128, 141, 0.4);
--color-select-caret: rgba(19, 52, 59, 0.8);
/* French-inspired Colors */
--color-background: rgba(242, 242, 242, 1); /* Light Gray */
--color-surface: rgba(255, 255, 255, 1); /* White */
--color-text: rgba(0, 40, 85, 1); /* Dark Blue */
--color-text-secondary: rgba(87, 113, 138, 1); /* Grayish Blue */
--color-primary: rgba(0, 85, 164, 1); /* French Blue */
--color-primary-hover: rgba(0, 68, 131, 1);
--color-primary-active: rgba(0, 51, 98, 1);
--color-secondary: rgba(224, 231, 238, 1); /* Light Blue Gray */
--color-secondary-hover: rgba(207, 218, 228, 1);
--color-secondary-active: rgba(190, 205, 218, 1);
--color-border: rgba(207, 218, 228, 1);
--color-btn-primary-text: rgba(255, 255, 255, 1); /* White */
--color-card-border: rgba(207, 218, 228, 1);
--color-card-border-inner: rgba(224, 231, 238, 1);
--color-error: rgba(239, 65, 53, 1); /* French Red */
--color-success: rgba(0, 85, 164, 1); /* French Blue */
--color-warning: rgba(247, 181, 0, 1); /* A complementary gold/yellow */
--color-info: rgba(87, 113, 138, 1);
--color-focus-ring: rgba(0, 85, 164, 0.4);
--color-select-caret: rgba(0, 40, 85, 0.8);
/* Common style patterns */
--focus-ring: 0 0 0 3px var(--color-focus-ring);
@ -104,30 +104,30 @@
/* Dark mode colors */
@media (prefers-color-scheme: dark) {
:root {
--color-background: rgba(31, 33, 33, 1);
--color-surface: rgba(38, 40, 40, 1);
--color-text: rgba(245, 245, 245, 1);
--color-text-secondary: rgba(167, 169, 169, 0.7);
--color-primary: rgba(50, 184, 198, 1);
--color-primary-hover: rgba(45, 166, 178, 1);
--color-primary-active: rgba(41, 150, 161, 1);
--color-secondary: rgba(119, 124, 124, 0.15);
--color-secondary-hover: rgba(119, 124, 124, 0.25);
--color-secondary-active: rgba(119, 124, 124, 0.3);
--color-border: rgba(119, 124, 124, 0.3);
--color-error: rgba(255, 84, 89, 1);
--color-success: rgba(50, 184, 198, 1);
--color-warning: rgba(230, 129, 97, 1);
--color-info: rgba(167, 169, 169, 1);
--color-focus-ring: rgba(50, 184, 198, 0.4);
--color-btn-primary-text: rgba(19, 52, 59, 1);
--color-card-border: rgba(119, 124, 124, 0.2);
--color-card-border-inner: rgba(119, 124, 124, 0.15);
--color-background: rgba(13, 27, 42, 1); /* Dark Navy Blue */
--color-surface: rgba(20, 40, 65, 1); /* Lighter Navy */
--color-text: rgba(239, 246, 255, 1); /* Light Blue/White */
--color-text-secondary: rgba(160, 174, 192, 0.7); /* Light Grayish Blue */
--color-primary: rgba(42, 128, 213, 1); /* Brighter Blue */
--color-primary-hover: rgba(33, 114, 191, 1);
--color-primary-active: rgba(25, 100, 168, 1);
--color-secondary: rgba(45, 66, 92, 0.25); /* Dark Blue-Gray */
--color-secondary-hover: rgba(60, 83, 113, 0.35);
--color-secondary-active: rgba(75, 100, 134, 0.4);
--color-border: rgba(45, 66, 92, 1);
--color-error: rgba(255, 107, 99, 1); /* Lighter Red */
--color-success: rgba(42, 128, 213, 1); /* Brighter Blue */
--color-warning: rgba(255, 204, 0, 1); /* Gold/Yellow */
--color-info: rgba(160, 174, 192, 1);
--color-focus-ring: rgba(42, 128, 213, 0.4);
--color-btn-primary-text: rgba(255, 255, 255, 1);
--color-card-border: rgba(45, 66, 92, 0.8);
--color-card-border-inner: rgba(45, 66, 92, 0.4);
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
--button-border-secondary: rgba(119, 124, 124, 0.2);
--color-border-secondary: rgba(119, 124, 124, 0.2);
--color-select-caret: rgba(245, 245, 245, 0.8);
--button-border-secondary: rgba(45, 66, 92, 1);
--color-border-secondary: rgba(45, 66, 92, 1);
--color-select-caret: rgba(239, 246, 255, 0.8);
/* Common style patterns - updated for dark mode */
--focus-ring: 0 0 0 3px var(--color-focus-ring);