Rework calendar
This commit is contained in:
437
index.html
437
index.html
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="theme-color" content="#0d0d0d">
|
||||
<meta name="theme-color" content="#2d2e2b">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title" content="Recipe">
|
||||
@@ -11,173 +11,334 @@
|
||||
<link rel="manifest" href="./manifest.webmanifest">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="./icons/icon-192.png">
|
||||
<link rel="apple-touch-icon" href="./icons/apple-touch-icon.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<style>
|
||||
* { touch-action: manipulation; }
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--app-font: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
|
||||
--app-bg-rgb: 243, 239, 233;
|
||||
--surface-rgb: 255, 255, 255;
|
||||
--surface-soft-rgb: 247, 242, 236;
|
||||
--surface-strong-rgb: 235, 229, 221;
|
||||
--line-rgb: 69, 58, 48;
|
||||
--text-primary-rgb: 28, 24, 21;
|
||||
--text-secondary-rgb: 102, 92, 83;
|
||||
--text-tertiary-rgb: 156, 146, 137;
|
||||
--accent-rgb: 111, 149, 255;
|
||||
--warm-rgb: 183, 142, 88;
|
||||
--success-rgb: 98, 171, 132;
|
||||
--danger-rgb: 210, 116, 116;
|
||||
--panel-shadow: 0 18px 40px rgba(24, 17, 11, 0.08);
|
||||
--panel-shadow-strong: 0 24px 60px rgba(24, 17, 11, 0.16);
|
||||
--dock-shadow: 0 24px 56px rgba(24, 17, 11, 0.18);
|
||||
--highlight-top: rgba(111, 149, 255, 0.14);
|
||||
--highlight-bottom: rgba(97, 184, 180, 0.12);
|
||||
}
|
||||
|
||||
.dark {
|
||||
color-scheme: dark;
|
||||
--app-bg-rgb: 45, 46, 43;
|
||||
--surface-rgb: 37, 35, 33;
|
||||
--surface-soft-rgb: 46, 43, 40;
|
||||
--surface-strong-rgb: 58, 55, 51;
|
||||
--line-rgb: 255, 249, 239;
|
||||
--text-primary-rgb: 246, 241, 232;
|
||||
--text-secondary-rgb: 183, 173, 161;
|
||||
--text-tertiary-rgb: 129, 121, 112;
|
||||
--accent-rgb: 134, 171, 255;
|
||||
--warm-rgb: 198, 156, 101;
|
||||
--success-rgb: 109, 194, 144;
|
||||
--danger-rgb: 220, 127, 127;
|
||||
--panel-shadow: 0 22px 56px rgba(0, 0, 0, 0.24);
|
||||
--panel-shadow-strong: 0 30px 82px rgba(0, 0, 0, 0.42);
|
||||
--dock-shadow: 0 30px 84px rgba(0, 0, 0, 0.42);
|
||||
--highlight-top: transparent;
|
||||
--highlight-bottom: transparent;
|
||||
}
|
||||
|
||||
* { touch-action: manipulation; }
|
||||
html, body { min-height: 100%; }
|
||||
body {
|
||||
font-family: var(--app-font);
|
||||
background: rgb(var(--app-bg-rgb));
|
||||
color: rgb(var(--text-primary-rgb));
|
||||
}
|
||||
button, input, select, textarea { font-family: inherit; }
|
||||
button { -webkit-tap-highlight-color: transparent; }
|
||||
#app-container {
|
||||
background: transparent !important;
|
||||
isolation: isolate;
|
||||
}
|
||||
#app-container::before,
|
||||
#app-container::after { display: none; }
|
||||
/* Slider styling */
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%;
|
||||
background: #111827; cursor: pointer; margin-top: -8px;
|
||||
-webkit-appearance: none;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgb(var(--accent-rgb));
|
||||
border: 2px solid rgba(var(--surface-rgb), 0.9);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
|
||||
cursor: pointer;
|
||||
margin-top: -8px;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%; height: 4px; cursor: pointer; background: #e5e7eb; border-radius: 2px;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
cursor: pointer;
|
||||
background: rgba(var(--line-rgb), 0.16);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.dark input[type=range]::-webkit-slider-thumb { background: #e8e8e8; }
|
||||
.dark input[type=range]::-webkit-slider-runnable-track { background: #333333; }
|
||||
|
||||
/* Ingredient Active States */
|
||||
.ingredient-active .check-box,
|
||||
.ingredient-active .rd-check-box { background-color: #111827; border-color: #111827; }
|
||||
.ingredient-active .rd-check-box { background-color: rgba(var(--surface-strong-rgb), 1); border-color: rgba(var(--surface-strong-rgb), 1); }
|
||||
.ingredient-active .check-icon,
|
||||
.ingredient-active .rd-check-icon { display: block; }
|
||||
.ingredient-active .ingredient-text,
|
||||
.ingredient-active .rd-ing-text { text-decoration: line-through; color: #9ca3af; }
|
||||
.dark .ingredient-active .check-box,
|
||||
.dark .ingredient-active .rd-check-box { background-color: #f0f0f0; border-color: #f0f0f0; }
|
||||
.ingredient-active .rd-ing-text { text-decoration: line-through; color: rgba(var(--text-tertiary-rgb), 0.94); }
|
||||
|
||||
/* Utilities */
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
|
||||
|
||||
/* ===== Dark Mode Overrides ===== */
|
||||
.dark { color-scheme: dark; }
|
||||
|
||||
/* --- Gray backgrounds --- */
|
||||
.dark .bg-white { background-color: #1a1a1a !important; }
|
||||
.dark .bg-gray-50 { background-color: #0d0d0d !important; }
|
||||
.dark .bg-gray-100 { background-color: #242424 !important; }
|
||||
.dark .bg-gray-200 { background-color: #2e2e2e !important; }
|
||||
.dark .bg-gray-900 { background-color: #f0f0f0 !important; }
|
||||
.dark .bg-gray-900.text-white,
|
||||
.dark .bg-gray-900 .text-white { color: #0d0d0d !important; }
|
||||
.dark .border-gray-900 { border-color: #f0f0f0 !important; }
|
||||
|
||||
/* Semi-transparent backgrounds */
|
||||
.dark .bg-white\/90 { background-color: rgba(26, 26, 26, 0.92) !important; }
|
||||
.dark .bg-white\/80 { background-color: rgba(26, 26, 26, 0.85) !important; }
|
||||
.dark .bg-gray-50\/80 { background-color: rgba(20, 20, 20, 0.85) !important; }
|
||||
.dark .bg-gray-50\/90 { background-color: rgba(20, 20, 20, 0.92) !important; }
|
||||
|
||||
/* --- Gray text --- */
|
||||
.dark .text-gray-900 { color: #f5f5f5 !important; }
|
||||
.dark .text-gray-800 { color: #e8e8e8 !important; }
|
||||
.dark .text-gray-700 { color: #d4d4d4 !important; }
|
||||
.dark .text-gray-600 { color: #a0a0a0 !important; }
|
||||
.dark .text-gray-500 { color: #888888 !important; }
|
||||
.dark .text-gray-400 { color: #666666 !important; }
|
||||
.dark .text-gray-300 { color: #444444 !important; }
|
||||
.dark .text-black { color: #ffffff !important; }
|
||||
|
||||
/* --- Gray borders --- */
|
||||
.dark .border-gray-200 { border-color: #2a2a2a !important; }
|
||||
.dark .border-gray-100 { border-color: #1f1f1f !important; }
|
||||
.dark .border-gray-300 { border-color: #333333 !important; }
|
||||
|
||||
/* --- Dividers --- */
|
||||
.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: #1a1a1a !important; }
|
||||
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1f1f1f !important; }
|
||||
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #2a2a2a !important; }
|
||||
.dark .divide-red-50 > :not([hidden]) ~ :not([hidden]) { border-color: #2a1a1a !important; }
|
||||
|
||||
/* --- Ring utilities --- */
|
||||
.dark .ring-gray-200 { --tw-ring-color: #2a2a2a !important; }
|
||||
.dark .ring-gray-900 { --tw-ring-color: #f0f0f0 !important; }
|
||||
|
||||
/* --- Hover states --- */
|
||||
.dark .hover\:bg-gray-50:hover { background-color: #1f1f1f !important; }
|
||||
.dark .hover\:bg-gray-100:hover { background-color: #2e2e2e !important; }
|
||||
.dark .hover\:bg-white:hover { background-color: #242424 !important; }
|
||||
.dark .hover\:text-gray-700:hover { color: #e8e8e8 !important; }
|
||||
.dark .hover\:text-gray-900:hover { color: #f5f5f5 !important; }
|
||||
.dark .hover\:text-black:hover { color: #ffffff !important; }
|
||||
.dark .hover\:bg-black:hover { background-color: #e0e0e0 !important; color: #0d0d0d !important; }
|
||||
.dark .hover\:bg-red-50:hover { background-color: #2a1a1a !important; }
|
||||
.dark .hover\:border-gray-300:hover { border-color: #444444 !important; }
|
||||
.dark .hover\:border-gray-400:hover { border-color: #555555 !important; }
|
||||
.dark .hover\:border-gray-900:hover { border-color: #f0f0f0 !important; }
|
||||
.dark .hover\:border-red-200:hover { border-color: #5c2020 !important; }
|
||||
|
||||
/* --- Focus --- */
|
||||
.dark .focus\:border-gray-400:focus { border-color: #555555 !important; }
|
||||
.dark .focus\:border-gray-300:focus { border-color: #444444 !important; }
|
||||
|
||||
/* --- Shadows --- */
|
||||
.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4) !important; }
|
||||
.dark .shadow-sm { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4) !important; }
|
||||
.dark .border-dashed { border-color: #333333 !important; }
|
||||
|
||||
/* --- Inputs --- */
|
||||
.dark input, .dark select, .dark textarea {
|
||||
background-color: #1a1a1a !important;
|
||||
color: #e8e8e8 !important;
|
||||
border-color: #2a2a2a !important;
|
||||
/* Shared palette overrides */
|
||||
.bg-white { background-color: rgba(var(--surface-rgb), 0.9) !important; }
|
||||
.bg-gray-50 { background-color: rgb(var(--app-bg-rgb)) !important; }
|
||||
.bg-gray-100 { background-color: rgba(var(--surface-soft-rgb), 0.92) !important; }
|
||||
.bg-gray-200 { background-color: rgba(var(--surface-strong-rgb), 0.94) !important; }
|
||||
.bg-gray-900 {
|
||||
background: linear-gradient(180deg, rgba(var(--surface-strong-rgb), 1) 0%, rgba(var(--surface-soft-rgb), 1) 100%) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.18) !important;
|
||||
}
|
||||
.dark input::placeholder, .dark textarea::placeholder {
|
||||
color: #666666 !important;
|
||||
.border-gray-900 { border-color: rgba(var(--accent-rgb), 0.42) !important; }
|
||||
.bg-white\/90 { background-color: rgba(var(--surface-rgb), 0.9) !important; }
|
||||
.bg-white\/80 { background-color: rgba(var(--surface-rgb), 0.78) !important; }
|
||||
.bg-gray-50\/80 { background-color: rgba(var(--surface-soft-rgb), 0.72) !important; }
|
||||
.bg-gray-50\/90 { background-color: rgba(var(--surface-soft-rgb), 0.84) !important; }
|
||||
|
||||
.text-gray-900 { color: rgb(var(--text-primary-rgb)) !important; }
|
||||
.text-gray-800 { color: rgba(var(--text-primary-rgb), 0.94) !important; }
|
||||
.text-gray-700 { color: rgba(var(--text-primary-rgb), 0.82) !important; }
|
||||
.text-gray-600 { color: rgba(var(--text-secondary-rgb), 0.96) !important; }
|
||||
.text-gray-500 { color: rgba(var(--text-secondary-rgb), 0.78) !important; }
|
||||
.text-gray-400 { color: rgba(var(--text-tertiary-rgb), 0.94) !important; }
|
||||
.text-gray-300 { color: rgba(var(--text-tertiary-rgb), 0.62) !important; }
|
||||
.text-black { color: rgb(var(--text-primary-rgb)) !important; }
|
||||
|
||||
.border-gray-200 { border-color: rgba(var(--line-rgb), 0.14) !important; }
|
||||
.border-gray-100 { border-color: rgba(var(--line-rgb), 0.08) !important; }
|
||||
.border-gray-300 { border-color: rgba(var(--line-rgb), 0.22) !important; }
|
||||
.border-dashed { border-color: rgba(var(--line-rgb), 0.2) !important; }
|
||||
|
||||
.divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--line-rgb), 0.06) !important; }
|
||||
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--line-rgb), 0.08) !important; }
|
||||
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--line-rgb), 0.14) !important; }
|
||||
.divide-red-50 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--danger-rgb), 0.1) !important; }
|
||||
|
||||
.ring-gray-200 { --tw-ring-color: rgba(var(--line-rgb), 0.16) !important; }
|
||||
.ring-gray-900 { --tw-ring-color: rgba(var(--accent-rgb), 0.52) !important; }
|
||||
|
||||
.hover\:bg-gray-50:hover { background-color: rgba(var(--surface-soft-rgb), 0.94) !important; }
|
||||
.hover\:bg-gray-100:hover { background-color: rgba(var(--surface-strong-rgb), 0.94) !important; }
|
||||
.hover\:bg-white:hover { background-color: rgba(var(--surface-rgb), 0.98) !important; }
|
||||
.hover\:bg-black:hover { background-color: rgba(var(--surface-strong-rgb), 1) !important; }
|
||||
.hover\:bg-red-50:hover { background-color: rgba(var(--danger-rgb), 0.12) !important; }
|
||||
.hover\:text-gray-700:hover,
|
||||
.hover\:text-gray-900:hover,
|
||||
.hover\:text-black:hover { color: rgb(var(--text-primary-rgb)) !important; }
|
||||
.hover\:text-red-600:hover { color: rgba(var(--danger-rgb), 1) !important; }
|
||||
.hover\:border-gray-300:hover { border-color: rgba(var(--line-rgb), 0.28) !important; }
|
||||
.hover\:border-gray-400:hover { border-color: rgba(var(--line-rgb), 0.34) !important; }
|
||||
.hover\:border-gray-900:hover { border-color: rgba(var(--accent-rgb), 0.54) !important; }
|
||||
.hover\:border-red-200:hover { border-color: rgba(var(--danger-rgb), 0.34) !important; }
|
||||
|
||||
.focus\:border-gray-400:focus { border-color: rgba(var(--accent-rgb), 0.54) !important; }
|
||||
.focus\:border-gray-300:focus { border-color: rgba(var(--accent-rgb), 0.44) !important; }
|
||||
|
||||
.shadow-lg { box-shadow: var(--panel-shadow-strong) !important; }
|
||||
.shadow-sm { box-shadow: var(--panel-shadow) !important; }
|
||||
|
||||
input, select, textarea {
|
||||
background-color: rgba(var(--surface-soft-rgb), 0.88) !important;
|
||||
color: rgb(var(--text-primary-rgb)) !important;
|
||||
border-color: rgba(var(--line-rgb), 0.16) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
input::placeholder, textarea::placeholder { color: rgba(var(--text-tertiary-rgb), 0.9) !important; }
|
||||
|
||||
#app-toast .rounded-xl,
|
||||
#planner-toast .rounded-xl {
|
||||
background: linear-gradient(180deg, rgba(var(--surface-strong-rgb), 1), rgba(var(--surface-soft-rgb), 1)) !important;
|
||||
color: rgb(var(--text-primary-rgb)) !important;
|
||||
border: 1px solid rgba(var(--line-rgb), 0.14);
|
||||
box-shadow: var(--panel-shadow);
|
||||
}
|
||||
|
||||
/* --- Toast --- */
|
||||
.dark #app-toast .rounded-xl,
|
||||
.dark #planner-toast .rounded-xl {
|
||||
background-color: #f0f0f0 !important;
|
||||
color: #0d0d0d !important;
|
||||
#planner-summary-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(145deg, rgba(var(--surface-rgb), 0.98) 0%, rgba(var(--surface-soft-rgb), 0.98) 100%) !important;
|
||||
border-color: rgba(var(--warm-rgb), 0.26) !important;
|
||||
box-shadow: var(--panel-shadow) !important;
|
||||
}
|
||||
#planner-summary-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -20% auto auto -8%;
|
||||
width: 9rem;
|
||||
height: 9rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(var(--warm-rgb), 0.14);
|
||||
filter: blur(44px);
|
||||
pointer-events: none;
|
||||
}
|
||||
.bg-amber-50 { background-color: rgba(var(--warm-rgb), 0.12) !important; }
|
||||
.bg-amber-50\/30 { background-color: rgba(var(--warm-rgb), 0.09) !important; }
|
||||
.bg-amber-50\/50 { background-color: rgba(var(--warm-rgb), 0.14) !important; }
|
||||
.bg-amber-100\/50 { background-color: rgba(var(--warm-rgb), 0.18) !important; }
|
||||
.hover\:bg-amber-100\/50:hover { background-color: rgba(var(--warm-rgb), 0.22) !important; }
|
||||
.border-amber-200 { border-color: rgba(var(--warm-rgb), 0.28) !important; }
|
||||
.border-amber-200\/80 { border-color: rgba(var(--warm-rgb), 0.26) !important; }
|
||||
.border-amber-200\/60 { border-color: rgba(var(--warm-rgb), 0.2) !important; }
|
||||
.border-amber-100 { border-color: rgba(var(--warm-rgb), 0.14) !important; }
|
||||
.text-amber-900\/70 { color: rgba(var(--warm-rgb), 0.78) !important; }
|
||||
.text-amber-900\/80 { color: rgba(var(--warm-rgb), 0.84) !important; }
|
||||
.text-amber-900 { color: rgb(var(--warm-rgb)) !important; }
|
||||
.text-amber-600 { color: rgba(var(--warm-rgb), 0.96) !important; }
|
||||
.text-amber-500 { color: rgba(var(--warm-rgb), 0.9) !important; }
|
||||
.bg-amber-500 { background-color: rgba(var(--warm-rgb), 0.92) !important; }
|
||||
.divide-amber-100\/80 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--warm-rgb), 0.14) !important; }
|
||||
|
||||
.bg-emerald-50 { background-color: rgba(var(--success-rgb), 0.12) !important; }
|
||||
.bg-emerald-100 { background-color: rgba(var(--success-rgb), 0.2) !important; }
|
||||
.bg-emerald-500 { background-color: rgba(var(--success-rgb), 0.92) !important; }
|
||||
.bg-emerald-600 { background-color: rgba(var(--success-rgb), 0.96) !important; }
|
||||
.hover\:bg-emerald-700:hover { background-color: rgba(var(--success-rgb), 1) !important; }
|
||||
.hover\:bg-emerald-100\/80:hover { background-color: rgba(var(--success-rgb), 0.2) !important; }
|
||||
.border-emerald-200\/80 { border-color: rgba(var(--success-rgb), 0.26) !important; }
|
||||
.text-emerald-800 { color: rgba(var(--success-rgb), 1) !important; }
|
||||
.text-emerald-600 { color: rgba(var(--success-rgb), 0.94) !important; }
|
||||
.text-emerald-600\/80 { color: rgba(var(--success-rgb), 0.82) !important; }
|
||||
.text-emerald-500 { color: rgba(var(--success-rgb), 0.9) !important; }
|
||||
|
||||
.bg-red-50 { background-color: rgba(var(--danger-rgb), 0.12) !important; }
|
||||
.bg-red-100 { background-color: rgba(var(--danger-rgb), 0.2) !important; }
|
||||
.bg-red-500 { background-color: rgba(var(--danger-rgb), 0.94) !important; }
|
||||
.border-red-200\/80 { border-color: rgba(var(--danger-rgb), 0.26) !important; }
|
||||
.border-red-100\/80 { border-color: rgba(var(--danger-rgb), 0.16) !important; }
|
||||
.text-red-800 { color: rgba(var(--danger-rgb), 1) !important; }
|
||||
.text-red-600 { color: rgba(var(--danger-rgb), 0.96) !important; }
|
||||
.text-red-600\/80 { color: rgba(var(--danger-rgb), 0.82) !important; }
|
||||
.text-red-500 { color: rgba(var(--danger-rgb), 0.9) !important; }
|
||||
.text-red-400 { color: rgba(var(--danger-rgb), 0.78) !important; }
|
||||
|
||||
/* App shell */
|
||||
#main-view,
|
||||
#planner-view,
|
||||
#pantry-view {
|
||||
background: rgb(var(--app-bg-rgb)) !important;
|
||||
}
|
||||
#main-view > div:first-child,
|
||||
#planner-view > div:first-child,
|
||||
#pantry-view > div:first-child,
|
||||
#filter-view > div:first-child,
|
||||
#filter-view > div:last-child {
|
||||
background: rgb(var(--app-bg-rgb)) !important;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
/* --- Amber / Summary card --- */
|
||||
.dark #planner-summary-card {
|
||||
background: #1e1a10 !important;
|
||||
border-color: #4a3800 !important;
|
||||
/* Cards and sheets */
|
||||
#recipe-grid > div {
|
||||
background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.94), rgba(var(--surface-soft-rgb), 0.97)) !important;
|
||||
border-color: rgba(var(--line-rgb), 0.14) !important;
|
||||
border-radius: 1.75rem !important;
|
||||
box-shadow: var(--panel-shadow) !important;
|
||||
transition: transform 180ms ease, box-shadow 180ms ease !important;
|
||||
}
|
||||
#recipe-grid > div:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--panel-shadow-strong) !important;
|
||||
}
|
||||
#recipe-grid > div img {
|
||||
transition: transform 240ms ease;
|
||||
}
|
||||
#recipe-grid > div:hover img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
#recipe-grid > div > div:first-child::after,
|
||||
#rd-hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(var(--app-bg-rgb), 0.5) 92%);
|
||||
pointer-events: none;
|
||||
}
|
||||
#planner-picker-sheet,
|
||||
#planner-ing-sheet,
|
||||
#planner-copy-sheet,
|
||||
#pv2-edit-sheet,
|
||||
#mpe-sheet,
|
||||
#recipe-detail-view > div:last-child {
|
||||
background: linear-gradient(180deg, rgba(var(--surface-rgb), 0.98) 0%, rgba(var(--surface-soft-rgb), 1) 100%) !important;
|
||||
border: 1px solid rgba(var(--line-rgb), 0.14);
|
||||
border-bottom: 0;
|
||||
backdrop-filter: blur(34px);
|
||||
box-shadow: var(--panel-shadow-strong) !important;
|
||||
}
|
||||
#recipe-detail-view {
|
||||
background: rgba(var(--app-bg-rgb), 0.92) !important;
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
#filter-view {
|
||||
background: rgb(var(--app-bg-rgb)) !important;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
#planner-picker-backdrop,
|
||||
#planner-ing-backdrop,
|
||||
#planner-copy-backdrop,
|
||||
#pv2-edit-bg,
|
||||
#mpe-overlay {
|
||||
background: rgba(7, 6, 5, 0.42) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.dark .bg-amber-50 { background-color: #1e1a10 !important; }
|
||||
.dark .bg-amber-50\/30 { background-color: rgba(60, 45, 0, 0.25) !important; }
|
||||
.dark .bg-amber-50\/50 { background-color: rgba(80, 60, 0, 0.2) !important; }
|
||||
.dark .bg-amber-100\/50 { background-color: rgba(80, 60, 0, 0.2) !important; }
|
||||
.dark .hover\:bg-amber-100\/50:hover { background-color: rgba(80, 60, 0, 0.35) !important; }
|
||||
.dark .border-amber-200 { border-color: #4a3800 !important; }
|
||||
.dark .border-amber-200\/80 { border-color: #4a3800 !important; }
|
||||
.dark .border-amber-200\/60 { border-color: #3d2e00 !important; }
|
||||
.dark .border-amber-100 { border-color: #332600 !important; }
|
||||
.dark .text-amber-900\/70 { color: #fbbf24 !important; }
|
||||
.dark .text-amber-900\/80 { color: #fbbf24 !important; }
|
||||
.dark .text-amber-900 { color: #fcd34d !important; }
|
||||
.dark .text-amber-600 { color: #f59e0b !important; }
|
||||
.dark .text-amber-500 { color: #f59e0b !important; }
|
||||
.dark .divide-amber-100\/80 > :not([hidden]) ~ :not([hidden]) { border-color: #332600 !important; }
|
||||
|
||||
/* --- Emerald accents --- */
|
||||
.dark .bg-emerald-50 { background-color: #0a1f15 !important; }
|
||||
.dark .bg-emerald-100 { background-color: #064e3b !important; }
|
||||
.dark .bg-emerald-500 { background-color: #10b981 !important; }
|
||||
.dark .bg-emerald-600 { background-color: #059669 !important; }
|
||||
.dark .hover\:bg-emerald-700:hover { background-color: #047857 !important; }
|
||||
.dark .hover\:bg-emerald-100\/80:hover { background-color: rgba(6, 78, 59, 0.5) !important; }
|
||||
.dark .border-emerald-200\/80 { border-color: #065f46 !important; }
|
||||
.dark .text-emerald-800 { color: #6ee7b7 !important; }
|
||||
.dark .text-emerald-600 { color: #34d399 !important; }
|
||||
.dark .text-emerald-600\/80 { color: rgba(52, 211, 153, 0.85) !important; }
|
||||
.dark .text-emerald-500 { color: #34d399 !important; }
|
||||
|
||||
/* --- Red accents --- */
|
||||
.dark .bg-red-50 { background-color: #1f0a0a !important; }
|
||||
.dark .bg-red-100 { background-color: #450a0a !important; }
|
||||
.dark .bg-red-500 { background-color: #ef4444 !important; }
|
||||
.dark .border-red-200\/80 { border-color: #5c2020 !important; }
|
||||
.dark .border-red-100\/80 { border-color: #3b1010 !important; }
|
||||
.dark .text-red-800 { color: #fca5a5 !important; }
|
||||
.dark .text-red-600 { color: #f87171 !important; }
|
||||
.dark .text-red-600\/80 { color: rgba(248, 113, 113, 0.85) !important; }
|
||||
.dark .text-red-500 { color: #f87171 !important; }
|
||||
.dark .text-red-400 { color: #fb7185 !important; }
|
||||
.dark .hover\:text-red-600:hover { color: #f87171 !important; }
|
||||
.dark .bg-amber-500 { background-color: #f59e0b !important; }
|
||||
/* Planner and common interactive surfaces */
|
||||
#planner-open-ingredients,
|
||||
.planner-pick-recipe,
|
||||
.planner-copy-target,
|
||||
#mpe-nutrition-section > div,
|
||||
#mpe-add-area > div,
|
||||
#pv2-edit-nutrition ul {
|
||||
box-shadow: var(--panel-shadow) !important;
|
||||
}
|
||||
.planner-copy-target,
|
||||
.planner-pick-recipe,
|
||||
.pv2-chip,
|
||||
.pv2-cat-chip,
|
||||
.mpe-slot-btn,
|
||||
#filter-slot-chips button,
|
||||
#filter-tag-chips button,
|
||||
#rd-tags span {
|
||||
transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
.planner-pick-recipe:hover,
|
||||
.planner-copy-target:hover { transform: translateY(-1px); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="m-0 min-h-dvh bg-white font-sans text-gray-800">
|
||||
<body class="m-0 min-h-dvh bg-white text-gray-800 antialiased">
|
||||
<script>
|
||||
if (localStorage.getItem('theme') === 'dark') document.documentElement.classList.add('dark');
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
const useDarkTheme = savedTheme ? savedTheme === 'dark' : true;
|
||||
if (useDarkTheme) document.documentElement.classList.add('dark');
|
||||
document.querySelector('meta[name="theme-color"]')?.setAttribute('content', useDarkTheme ? '#2d2e2b' : '#f3efe9');
|
||||
</script>
|
||||
|
||||
<div id="app-container" class="relative flex h-dvh min-h-0 w-full flex-col overflow-hidden bg-white">
|
||||
@@ -190,4 +351,4 @@
|
||||
</script>
|
||||
<script type="module" src="js/app.js?v=2"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user