/* ====== Theme Tokens (Dark) ====== */ /* Put this on or body[data-theme="dark"] */ :root[data-theme="dark"] { /* Neutral palette (HSL components, easy to tweak) */ --bg: 222 20% 8%; --surface-1: 222 20% 11%; --surface-2: 222 22% 14%; --surface-3: 222 24% 18%; --border: 220 18% 20%; --text: 220 15% 88%; --text-muted: 220 10% 65%; /* Accents */ --accent: 210 90% 60%; /* brand/primary */ --accent-hover: 210 90% 66%; /* Status */ --success: 160 75% 45%; --warning: 38 100% 60%; --danger: 0 80% 62%; /* Radii, spacing, shadows */ --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 0.875rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --shadow-1: 0 1px 2px hsl(0 0% 0% / 0.35); --shadow-2: 0 6px 18px hsl(0 0% 0% / 0.35); --shadow-3: 0 12px 28px hsl(0 0% 0% / 0.45); --ring: hsl(var(--accent) / 0.9); } /* ====== Global Base ====== */ html { color-scheme: dark; } body { margin: 0 10px; font: 400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif; background: hsl(var(--bg)); color: hsl(var(--text)); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: hsl(var(--accent)); text-decoration: none; } a:hover { color: hsl(var(--accent-hover)); text-decoration: underline; } hr { border: 0; height: 1px; background: hsl(var(--border)); margin: var(--space-6) 0; } img, video { max-width: 100%; height: auto; } /* Focus visibility */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* Scrollbars (supported engines) */ * { scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; } *::-webkit-scrollbar { height: 10px; width: 10px; } *::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; } /* ====== Layout Helpers ====== */ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); } .stack > * + * { margin-top: var(--space-4); } /* vertical rhythm */ .cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* horizontal gap */ .center { margin-inline: auto; } /* ====== Generic Surfaces (for your
s) ====== */ .surface, .card, .panel { background: hsl(var(--surface-1)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); box-shadow: var(--shadow-1); } /* Elevation ladder (apply to any div) */ .elev-1 { background: hsl(var(--surface-1)); box-shadow: var(--shadow-1); } .elev-2 { background: hsl(var(--surface-2)); box-shadow: var(--shadow-2); } .elev-3 { background: hsl(var(--surface-3)); box-shadow: var(--shadow-3); } /* Card defaults */ .el-calc-selected-food-list .food-entry { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); background: #f4304355; padding: 5px; margin: 10px 0; } .el-calc-selected-food-list .food-entry .title-row .title { font-weight: 600; } /*.card { padding: var(--space-6); transition: transform .12s ease, box-shadow .12s ease; } .card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }*/ /* Panel (slimmer padding) */ .panel { padding: var(--space-4); } /* Soft/Glass variant */ .surface--soft { background: hsl(var(--surface-2) / 0.75); backdrop-filter: blur(6px); } /* Headings & muted text inside surfaces */ .surface h1, .surface h2, .surface h3, .card h1, .card h2, .card h3, .panel h1, .panel h2, .panel h3 { margin-top: 0; line-height: 1.25; } .muted { color: hsl(var(--text-muted)); } /* Dividers inside surfaces */ .divider { height: 1px; background: hsl(var(--border)); margin: var(--space-4) 0; } /* ====== Buttons (generic) ====== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5ch; padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); border: 1px solid hsl(var(--border)); background: hsl(var(--surface-2)); color: hsl(var(--text)); cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease; } .btn:hover { background: hsl(var(--surface-3)); } .btn:active { transform: translateY(1px); } .btn.primary { background: hsl(var(--accent)); border-color: hsl(var(--accent)); color: black; /* keeps contrast on saturated blues */ } .btn.primary:hover { background: hsl(var(--accent-hover)); } /* ====== Forms ====== */ .input, input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select { width: 100%; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); border: 1px solid hsl(var(--border)); background: hsl(var(--surface-2)); color: hsl(var(--text)); } .input::placeholder, textarea::placeholder { color: hsl(var(--text-muted)); } /* ====== Tables ====== */ .table { width: 100%; border-collapse: separate; border-spacing: 0; background: hsl(var(--surface-1)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); overflow: hidden; } .table th, .table td { padding: 0.75rem 1rem; text-align: left; } .table thead th { background: hsl(var(--surface-2)); color: hsl(var(--text)); } .table tbody tr + tr td { border-top: 1px solid hsl(var(--border)); } .table tbody tr:hover { background: hsl(var(--surface-2)); } /* Calendar */ /* body flash when the calendar (re)renders */ @keyframes bg-flash-body { 0% { background: #222; } 100% { background: #000000; } } @keyframes bg-unflash-body { 0% { background: #000000; } 100% { background: var(--page-bg, #fff); } } .blink-flash.blink-flash-active { animation: bg-flash-body 0.35s ease-in forwards, bg-unflash-body 0.35s ease-out 0.35s forwards; } /* SEARCH BOX in sheet page */ /* Container (optional, if you wrap with .el-calc-food-list) */ .el-calc-food-list .row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; } /* Search input */ .inp-q { flex: 1; font-size: 1.1rem; line-height: 1.2; padding: 0.8rem 1rem; border: 1px solid var(--edge, #ccc); border-radius: 0.6rem; width: 100%; box-sizing: border-box; } /* Spinner next to input */ .spinner { font-size: 1.2rem; min-width: 1.5rem; text-align: center; } /* Results container */ .results { display: grid; grid-template-columns: 1fr; /* one per row */ gap: 0.5rem; } /* Each result as big, full-width button */ .results .list-item { display: block; width: 100%; text-align: left; padding: 0.9rem 1rem; font-size: 1.05rem; border: 1px solid var(--edge, #ddd); border-radius: 0.6rem; background: #010101; box-sizing: border-box; } /* Touch feedback */ .results .list-item:active { filter: brightness(0.92); } /* Hover for desktop */ @media (hover: hover) { .results .list-item:hover { filter: brightness(0.98); } } /* Mobile-up sizing tweaks */ @media (max-width: 720px) { .inp-q { font-size: 1.25rem; padding: 1rem 1.1rem; border-radius: 0.75rem; } .spinner { font-size: 1.4rem; min-width: 1.75rem; } .results .list-item { font-size: 1.15rem; padding: 1rem 1.1rem; border-radius: 0.75rem; } } /* Optional: make row stack nicely on narrow screens */ @media (max-width: 480px) { .el-calc-food-list .row { gap: 0.5rem; } } /* General buttons */ /* Base style */ .btn-cancel, .btn-add { font-size: 1rem; padding: 0.6rem 1.2rem; border-radius: 0.5rem; border: 1px solid var(--edge, #ccc); background: var(--panel, #8f8f8f); cursor: pointer; transition: background 0.15s, filter 0.15s; } /* Primary Add button */ .btn-add.primary { background: var(--accent, #007bff); color: #fff; border-color: var(--accent, #007bff); } /* Hover/active feedback */ .btn-cancel:hover, .btn-add.primary:hover { filter: brightness(1.05); } .btn-cancel:active, .btn-add.primary:active { filter: brightness(0.9); } /* Bigger on mobile */ @media (max-width: 720px) { .btn-cancel, .btn-add { font-size: 1.2rem; padding: 1rem 1.4rem; border-radius: 0.65rem; width: 100%; /* full width for easy tap */ display: block; margin-bottom: 0.6rem; /* stack vertically with spacing */ } } /* dynamic stats on fcp kcal when adding food */ /* Live macro bar */ .page-food-list .nut-live { background: #141414; border: 1px solid #2a2a2a; border-radius: 0.5rem; padding: 0.6rem 0.75rem; color: #ddd; display: flex; align-items: center; gap: 0.45rem; } .page-food-list .nut-live .badge { font-size: 0.85em; padding: 0.05rem 0.35rem; border: 1px solid #333; border-radius: 0.35rem; text-transform: uppercase; letter-spacing: 0.03em; color: #aaa; } /* Bigger inputs for the 3 macro fields */ #nut_p, #nut_f, #nut_c { font-size: 1rem; } /* Mobile: bigger tap targets & full-width grid */ @media (max-width: 720px) { .page-food-list .grid { grid-template-columns: 1fr; /* stack */ } #nut_p, #nut_f, #nut_c { font-size: 1.2rem; padding: 0.9rem 1rem; border-radius: 0.6rem; } .page-food-list .nut-live { padding: 0.9rem 1rem; font-size: 1.1rem; } } /* GUIDE BOX */ .guide { position: relative; color: #e0e0e0; padding: 1rem 1.25rem 1rem 1.5rem; margin: 1rem 0; border-radius: 2px; line-height: 1.5; font-size: 0.95rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); overflow: hidden; /* background gradient (dark theme with depth) */ background: #1c1f26; } /* accent strip on left */ .guide::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #3ddc9755, #5cc8ffee); } /* Connection status dots */ #conn-dot { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; vertical-align: middle; margin-left: 0.4rem; background: gray; /* default/fallback */ box-shadow: 0 0 6px 2px rgba(128, 128, 128, 0.3); /* soft gray glow */ } #conn-dot[data-state="0"] { background: #28a745; box-shadow: 0 0 10px 3px rgba(40, 167, 69, 0.35); /* pastel green */ } #conn-dot[data-state="1"] { background: #ffc107; box-shadow: 0 0 10px 3px rgba(255, 193, 7, 0.4); /* pastel yellow */ } #conn-dot[data-state="2"] { background: #dc3545; box-shadow: 0 0 10px 3px rgba(220, 53, 69, 0.35); /* pastel red */ } /* Plugin loader */ #plugin-loader { font: 13px/1.5 system-ui, sans-serif; padding: 0.5rem; } #plugin-loader .muted { opacity: 0.7; } #plugin-loader .warn { color: #d8b045; } #plugin-loader .error { color: #e05a5a; }