Antoni Nuñez Romeu
8b9b7e8444
- Dark mode: gray background instead of pure black - Dark mode: improved notification card visibility (SavedNotifications) - Dark mode: improved alerts view badge contrast (AlertsView) - Dark mode: custom pharmacy-themed background image - Rebranding: replace all logos with FarmaClic branding - Update PWA icons, favicon, apple-touch-icon, and mobile app icons
236 lines
6.1 KiB
CSS
236 lines
6.1 KiB
CSS
:root {
|
|
/* Pastel, softer palette */
|
|
--primary: #7fbf8f; /* soft green */
|
|
--on-primary: #09310a; /* dark accent for contrast */
|
|
--primary-container: #cfead0;
|
|
--on-primary-container: #0d2b12;
|
|
--secondary: #a3b8ff; /* soft blue */
|
|
--on-secondary: #06204a;
|
|
--secondary-container: #dbe7ff;
|
|
--on-secondary-container: #0b2a66;
|
|
--tertiary: #c9b3ff; /* soft lavender */
|
|
--on-tertiary: #241342;
|
|
--tertiary-container: #efe7ff;
|
|
--on-tertiary-container: #3b2a5a;
|
|
--surface: #fbfbfb;
|
|
--on-surface: #111417;
|
|
--on-surface-variant: #41493e;
|
|
--surface-container-lowest: #ffffff;
|
|
--surface-container-low: #f2f4f5;
|
|
--surface-container: #eceeef;
|
|
--surface-container-high: #e6e8e9;
|
|
--surface-container-highest: #e1e3e4;
|
|
--error: #b91c1c;
|
|
--on-error: #ffffff;
|
|
--error-container: #feecec;
|
|
--on-error-container: #610909;
|
|
--outline: #717a6d;
|
|
--outline-variant: #c0c9bb;
|
|
--on-background: #191c1d;
|
|
--inverse-surface: #2e3132;
|
|
--inverse-on-surface: #eff1f2;
|
|
--inverse-primary: #91d78a;
|
|
--surface-tint: #8ccb8e;
|
|
--surface-dim: #d8dadb;
|
|
--surface-bright: #f8fafb;
|
|
--surface-variant: #e1e3e4;
|
|
--primary-fixed: #acf4a4;
|
|
--primary-fixed-dim: #91d78a;
|
|
--secondary-fixed: #d9e2ff;
|
|
--secondary-fixed-dim: #b0c6ff;
|
|
--tertiary-fixed: #e9ddff;
|
|
--tertiary-fixed-dim: #cfbcff;
|
|
|
|
--radius-sm: 0.25rem;
|
|
--radius: 0.5rem;
|
|
--radius-md: 0.75rem;
|
|
--radius-lg: 1rem;
|
|
--radius-xl: 1.5rem;
|
|
--radius-full: 9999px;
|
|
|
|
--margin-main: 1.5rem;
|
|
--card-padding: 1.25rem;
|
|
--gutter: 1rem;
|
|
--touch-target-min: 3rem;
|
|
|
|
--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
|
|
--text-main: var(--on-surface);
|
|
--text-muted: var(--on-surface-variant);
|
|
--surface-muted: var(--surface-container-low);
|
|
--surface-card: var(--surface-container-lowest);
|
|
--border: var(--outline-variant);
|
|
--border-strong: var(--outline);
|
|
--glass-bg: var(--surface-container-lowest);
|
|
--glass-border: var(--outline-variant);
|
|
--glass-shadow: var(--shadow-soft);
|
|
--accent: var(--primary);
|
|
--accent-warm: #f5a97a;
|
|
--primary-hover: #6fb47f; /* slightly darker than primary */
|
|
--primary-ring: rgba(127, 191, 143, 0.22);
|
|
--primary-shadow: rgba(127, 191, 143, 0.12);
|
|
--primary-light: #eaf7ec;
|
|
--primary-faint: rgba(127, 191, 143, 0.06);
|
|
--fab-bg: #2b5bb5;
|
|
--fab-text: #ffffff;
|
|
--fab-shadow: rgba(43, 91, 181, 0.32);
|
|
--warning: #b45309;
|
|
--warning-container: rgba(180, 83, 9, 0.12);
|
|
--suggestion-1: #ffffff;
|
|
--suggestion-2: #f0f7ff;
|
|
--suggestion-3: #e0f0ff;
|
|
--suggestion-4: #d4ebff;
|
|
--suggestion-border-1: #e2e8f0;
|
|
--suggestion-border-2: #dbeafe;
|
|
--suggestion-border-3: #bfdbfe;
|
|
--suggestion-border-4: #93c5fd;
|
|
--suggestion-text: #1e293b;
|
|
--suggestion-icon-bg: rgba(59, 130, 246, 0.08);
|
|
--suggestion-icon-color: #3b82f6;
|
|
}
|
|
|
|
/* ── Dark mode ── */
|
|
[data-theme="dark"] {
|
|
--primary: #8ed4a0;
|
|
--on-primary: #003912;
|
|
--primary-container: #1a5c2a;
|
|
--on-primary-container: #c2ecd0;
|
|
--secondary: #b8c9ff;
|
|
--on-secondary: #1a3066;
|
|
--secondary-container: #2a4080;
|
|
--on-secondary-container: #d9e2ff;
|
|
--tertiary: #dac4ff;
|
|
--on-tertiary: #3b2a5a;
|
|
--tertiary-container: #524070;
|
|
--on-tertiary-container: #efe7ff;
|
|
--surface: #1e2024;
|
|
--on-surface: #e1e3e4;
|
|
--on-surface-variant: #c0c9bb;
|
|
--surface-container-lowest: #171a1d;
|
|
--surface-container-low: #252830;
|
|
--surface-container: #2c3038;
|
|
--surface-container-high: #383c44;
|
|
--surface-container-highest: #444850;
|
|
--error: #ffb4ab;
|
|
--on-error: #690005;
|
|
--error-container: #93000a;
|
|
--on-error-container: #ffdad6;
|
|
--outline: #8a9486;
|
|
--outline-variant: #41493e;
|
|
--on-background: #e1e3e4;
|
|
--inverse-surface: #e1e3e4;
|
|
--inverse-on-surface: #2e3132;
|
|
--inverse-primary: #2e7d32;
|
|
--surface-tint: #8ed4a0;
|
|
--surface-dim: #1e2024;
|
|
--surface-bright: #4a4e56;
|
|
--surface-variant: #41493e;
|
|
--primary-fixed: #acf4a4;
|
|
--primary-fixed-dim: #91d78a;
|
|
--secondary-fixed: #d9e2ff;
|
|
--secondary-fixed-dim: #b0c6ff;
|
|
--tertiary-fixed: #e9ddff;
|
|
--tertiary-fixed-dim: #cfbcff;
|
|
|
|
--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.32);
|
|
|
|
--text-main: var(--on-surface);
|
|
--text-muted: var(--on-surface-variant);
|
|
--surface-muted: var(--surface-container-low);
|
|
--surface-card: var(--surface-container-lowest);
|
|
--border: var(--outline-variant);
|
|
--border-strong: var(--outline);
|
|
--glass-bg: var(--surface-container);
|
|
--glass-border: var(--outline-variant);
|
|
--glass-shadow: var(--shadow-soft);
|
|
--accent: var(--primary);
|
|
--accent-warm: #f5a97a;
|
|
--primary-hover: #a0dfb0;
|
|
--primary-ring: rgba(142, 212, 160, 0.25);
|
|
--primary-shadow: rgba(142, 212, 160, 0.15);
|
|
--primary-light: #0d2b12;
|
|
--primary-faint: rgba(142, 212, 160, 0.08);
|
|
--fab-bg: #5b8bd5;
|
|
--fab-text: #ffffff;
|
|
--fab-shadow: rgba(91, 139, 213, 0.35);
|
|
--warning: #f59e0b;
|
|
--warning-container: rgba(245, 158, 11, 0.15);
|
|
--suggestion-1: #2c3038;
|
|
--suggestion-2: #252d40;
|
|
--suggestion-3: #25334a;
|
|
--suggestion-4: #253a55;
|
|
--suggestion-border-1: #333637;
|
|
--suggestion-border-2: #2a4080;
|
|
--suggestion-border-3: #2a4a8a;
|
|
--suggestion-border-4: #3060a0;
|
|
--suggestion-text: #e1e3e4;
|
|
--suggestion-icon-bg: rgba(96, 165, 250, 0.12);
|
|
--suggestion-icon-color: #60a5fa;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
color-scheme: light;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
html {
|
|
overflow-x: clip;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
|
|
color: var(--on-surface);
|
|
background-color: var(--surface-container-lowest);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image: url('./assets/bg-SHmHDvQz.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
opacity: 0.5;
|
|
z-index: -1;
|
|
}
|
|
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: rgba(255, 252, 245, 0.48);
|
|
z-index: -1;
|
|
}
|
|
|
|
[data-theme="dark"] body::before {
|
|
background-image: url('./assets/bg_dark.png');
|
|
opacity: 0.55;
|
|
}
|
|
|
|
[data-theme="dark"] body::after {
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
#root {
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
}
|