zer0interrupt/recipe-manager
1
0
Fork 0
mirror of https://gitlab.com/Zer0interrupt/recipe-manager.git synced 2026-11-01 23:24:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Apply Midnight Gastro-Bar theme with Savory Olive accent

Browse source
This commit is contained in:
Chris 2026-11-01 00:25:57 -04:00
parent c7fb78a139
commit a1a6637577
1 changed files with 42 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
public/style.css
View file

@ -18,51 +18,63 @@
--shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.2);
/* HSL Colors (Orange/Amber Culinary Theme) */
--hue-primary: 28;
--hue-secondary: 14;
--hue-neutral: 215;
/* HSL Colors (Midnight Gastro-Bar with Savory Olive & Golden Yolk) */
--hue-primary: 14; /* Electric Blood Orange (#FF5722) */
--hue-secondary: 43; /* Golden Yolk (#FFB703) */
--hue-neutral: 220; /* Midnight Truffle & Slate Slate */
/* Theme Dependent Variables (Defined for Light Theme first, toggled to Dark below) */
--primary: hsl(var(--hue-primary), 95%, 52%);
--primary-hover: hsl(var(--hue-primary), 95%, 44%);
--primary-glow: hsla(var(--hue-primary), 95%, 52%, 0.15);
--primary: hsl(var(--hue-primary), 88%, 50%);
--primary-hover: hsl(var(--hue-primary), 92%, 44%);
--primary-glow: hsla(var(--hue-primary), 100%, 57%, 0.16);
--secondary: hsl(var(--hue-secondary), 88%, 56%);
--secondary: hsl(var(--hue-secondary), 95%, 48%);
--accent: hsl(142, 70%, 45%); /* Cook mode green */
--accent: #588157; /* Savory Olive / Rosemary herb */
--accent-hover: #476a46;
--accent-glow: rgba(88, 129, 87, 0.22);
--danger: hsl(0, 84%, 60%);
--danger-hover: hsl(0, 84%, 50%);
--bg-app: hsl(var(--hue-neutral), 30%, 96%);
--bg-app: hsl(var(--hue-neutral), 20%, 97%);
--bg-card: hsl(0, 0%, 100%);
--bg-nav: rgba(255, 255, 255, 0.8);
--border-color: hsl(var(--hue-neutral), 20%, 88%);
--bg-nav: rgba(255, 255, 255, 0.85);
--border-color: hsl(var(--hue-neutral), 15%, 88%);
--text-main: hsl(var(--hue-neutral), 40%, 16%);
--text-muted: hsl(var(--hue-neutral), 20%, 45%);
--text-main: hsl(var(--hue-neutral), 25%, 12%);
--text-muted: hsl(var(--hue-neutral), 15%, 45%);
--text-white: #ffffff;
--glass-bg: rgba(255, 255, 255, 0.6);
--glass-border: rgba(255, 255, 255, 0.4);
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: rgba(255, 255, 255, 0.5);
--glass-blur: blur(12px);
}
/* Dark Theme Overrides */
/* Dark Theme Overrides (Midnight Gastro-Bar) */
.dark-theme,
body.dark-theme {
--bg-app: hsl(var(--hue-neutral), 38%, 7%);
--bg-card: hsl(var(--hue-neutral), 30%, 11%);
--bg-nav: rgba(15, 23, 42, 0.8);
--border-color: hsl(var(--hue-neutral), 25%, 18%);
--primary: hsl(var(--hue-primary), 100%, 57%);
--primary-hover: hsl(var(--hue-primary), 100%, 50%);
--primary-glow: hsla(var(--hue-primary), 100%, 57%, 0.22);
--secondary: hsl(var(--hue-secondary), 100%, 51%);
--accent: #588157;
--accent-hover: #6a9b69;
--accent-glow: rgba(88, 129, 87, 0.3);
--bg-app: #0B0D11;
--bg-card: #151821;
--bg-nav: rgba(11, 13, 17, 0.85);
--border-color: rgba(255, 255, 255, 0.08);
--text-main: hsl(var(--hue-neutral), 15%, 92%);
--text-muted: hsl(var(--hue-neutral), 15%, 65%);
--text-main: #F3F4F6;
--text-muted: #94A3B8;
--glass-bg: rgba(15, 23, 42, 0.55);
--glass-border: rgba(255, 255, 255, 0.06);
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
--glass-bg: rgba(21, 24, 33, 0.65);
--glass-border: rgba(255, 255, 255, 0.08);
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.65);
}
/* Base Resets */
@ -141,13 +153,13 @@ h1, h2, h3, h4, h5, h6 {
.btn-accent {
background-color: var(--accent);
color: var(--text-white);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
box-shadow: 0 4px 14px var(--accent-glow);
}
.btn-accent:hover {
background-color: hsl(142, 70%, 38%);
background-color: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
box-shadow: 0 6px 20px var(--accent-glow);
}
.btn-icon-round {