From 9ae28444533c2064ffe5da12e324d0a4895f3f6d Mon Sep 17 00:00:00 2001 From: James Clifford Spratt Date: Thu, 10 Jul 2025 17:47:58 +0100 Subject: [PATCH] Add zh-CN translation, update I18nManager, and refine formatting for localized UI and serving units --- src/lang/I18nManager.ts | 33 +- src/managers/ChartManager.ts | 2 +- .../macros/components/RowRenderer.ts | 3 +- src/processors/macros/dashboard.ts | 58 +- src/ui/modals/ManualFoodEntryModal.ts | 8 +- src/utils/formatters.ts | 205 +- styles.css | 2073 +++++++++-------- 7 files changed, 1318 insertions(+), 1064 deletions(-) diff --git a/src/lang/I18nManager.ts b/src/lang/I18nManager.ts index 1b57c04..f250ea4 100644 --- a/src/lang/I18nManager.ts +++ b/src/lang/I18nManager.ts @@ -211,39 +211,44 @@ export class I18nManager { */ private detectUserLocale(): string { try { - // Get locale from Obsidian's native settings + // Get locale from Obsidian's native settings using safe methods const obsidianLocale = + this.getMomentLocale() || // Use existing safe method + document.documentElement.lang || (this.app as any).vault?.config?.userInterfaceMode || - this.getMomentLocale() || (this.app as any).locale; - if (obsidianLocale && this.isLocaleSupported(obsidianLocale)) { - this.plugin.logger.debug(`Detected Obsidian locale: ${obsidianLocale}`); - return obsidianLocale; - } + this.plugin.logger.debug(`Detected Obsidian locale: ${obsidianLocale}`); - // If Obsidian locale isn't supported, try language code only if (obsidianLocale) { - const languageCode = obsidianLocale.split('-')[0]; + // Handle Chinese locale variants - map both to zh-CN + if (obsidianLocale.toLowerCase().startsWith('zh')) { + this.plugin.logger.debug(`Mapping Chinese variant ${obsidianLocale} to zh-CN`); + return 'zh-CN'; + } + + // Check if exactly supported + if (this.isLocaleSupported(obsidianLocale)) { + return obsidianLocale; + } + + // Try language code only (e.g., en-GB -> en) + const languageCode = obsidianLocale.split('-')[0].toLowerCase(); if (this.isLocaleSupported(languageCode)) { - this.plugin.logger.debug(`Using language code from Obsidian locale: ${languageCode}`); + this.plugin.logger.debug(`Using language code: ${languageCode}`); return languageCode; } } - // Fall back to browser locale as last resort + // Fallback to browser locale const browserLocale = navigator.language || navigator.languages?.[0]; if (browserLocale) { - // Try exact match first if (this.isLocaleSupported(browserLocale)) { - this.plugin.logger.debug(`Using browser locale: ${browserLocale}`); return browserLocale; } - // Try language code only (e.g., 'en' from 'en-US') const languageCode = browserLocale.split('-')[0]; if (this.isLocaleSupported(languageCode)) { - this.plugin.logger.debug(`Using language code from browser: ${languageCode}`); return languageCode; } } diff --git a/src/managers/ChartManager.ts b/src/managers/ChartManager.ts index 9f66575..b28ad8f 100644 --- a/src/managers/ChartManager.ts +++ b/src/managers/ChartManager.ts @@ -1,4 +1,4 @@ -import MacrosPlugin from './../../main'; +import MacrosPlugin from '../main'; import { Chart, ChartConfiguration, ChartDataset, TooltipItem, registerables } from 'chart.js'; import { ChartLoader, MacrosState, DOMUtils } from '../utils'; import { diff --git a/src/processors/macros/components/RowRenderer.ts b/src/processors/macros/components/RowRenderer.ts index bb43e08..680cfb2 100644 --- a/src/processors/macros/components/RowRenderer.ts +++ b/src/processors/macros/components/RowRenderer.ts @@ -13,6 +13,7 @@ import { ProgressBarFactory, } from '../../../utils'; import { parseGrams } from '../../../utils/parsingUtils'; +import { formatServing } from '../../../utils/formatters'; import { Notice, Modal, ButtonComponent } from 'obsidian'; import { t } from '../../../lang/I18nManager'; @@ -585,7 +586,7 @@ export class RowRenderer { const quantityCell = r.insertCell(); quantityCell.classList.add('editable-quantity'); safeAttachTooltip(quantityCell, t('table.actions.clickToEdit'), this.plugin); - quantityCell.textContent = row.serving; + quantityCell.textContent = formatServing(row.serving); const servingValue = parseGrams(row.serving); diff --git a/src/processors/macros/dashboard.ts b/src/processors/macros/dashboard.ts index 49f6493..659dc89 100644 --- a/src/processors/macros/dashboard.ts +++ b/src/processors/macros/dashboard.ts @@ -179,8 +179,9 @@ export class MacrosDashboard { text: value, }); - // Create custom tooltip with proper energy unit handling + // Create custom tooltip with proper energy unit handling and Chinese word order let tooltipMessage: string; + const currentLocale = this.plugin.i18nManager.getCurrentLocale(); if (label === t('table.headers.calories')) { const currentUnit = this.plugin.settings.energyUnit; @@ -193,12 +194,20 @@ export class MacrosDashboard { const remainingKj = targetKj - consumedKj; const percentage = targetKj > 0 ? (consumedKj / targetKj) * 100 : 0; - tooltipMessage = `${consumedKj.toFixed(1)} kJ • ${Math.round(percentage)}% ${t('table.summary.dailyTarget')}`; - - if (remainingKj > 0) { - tooltipMessage += ` • ${remainingKj.toFixed(1)} kJ ${t('general.remaining')}`; - } else if (remainingKj < 0) { - tooltipMessage += ` • ${Math.abs(remainingKj).toFixed(1)} kJ ${t('table.summary.over')}`; + if (currentLocale === 'zh-CN') { + tooltipMessage = `${consumedKj.toFixed(1)} kJ • 占 ${Math.round(percentage)}%`; + if (remainingKj > 0) { + tooltipMessage += ` • 剩余 ${remainingKj.toFixed(1)} kJ`; + } else if (remainingKj < 0) { + tooltipMessage += ` • 超出 ${Math.abs(remainingKj).toFixed(1)} kJ`; + } + } else { + tooltipMessage = `${consumedKj.toFixed(1)} kJ • ${Math.round(percentage)}% ${t('table.summary.dailyTarget')}`; + if (remainingKj > 0) { + tooltipMessage += ` • ${remainingKj.toFixed(1)} kJ ${t('general.remaining')}`; + } else if (remainingKj < 0) { + tooltipMessage += ` • ${Math.abs(remainingKj).toFixed(1)} kJ ${t('table.summary.over')}`; + } } } else { // Use original kcal values for kcal display @@ -207,18 +216,39 @@ export class MacrosDashboard { const remainingKcal = targetKcal - consumedKcal; const percentage = targetKcal > 0 ? (consumedKcal / targetKcal) * 100 : 0; - tooltipMessage = `${consumedKcal.toFixed(1)} kcal • ${Math.round(percentage)}% ${t('table.summary.dailyTarget')}`; - - if (remainingKcal > 0) { - tooltipMessage += ` • ${remainingKcal.toFixed(1)} kcal ${t('general.remaining')}`; - } else if (remainingKcal < 0) { - tooltipMessage += ` • ${Math.abs(remainingKcal).toFixed(1)} kcal ${t('table.summary.over')}`; + if (currentLocale === 'zh-CN') { + tooltipMessage = `${consumedKcal.toFixed(1)} kcal • 占 ${Math.round(percentage)}%`; + if (remainingKcal > 0) { + tooltipMessage += ` • 剩余 ${remainingKcal.toFixed(1)} kcal`; + } else if (remainingKcal < 0) { + tooltipMessage += ` • 超出 ${Math.abs(remainingKcal).toFixed(1)} kcal`; + } + } else { + tooltipMessage = `${consumedKcal.toFixed(1)} kcal • ${Math.round(percentage)}% ${t('table.summary.dailyTarget')}`; + if (remainingKcal > 0) { + tooltipMessage += ` • ${remainingKcal.toFixed(1)} kcal ${t('general.remaining')}`; + } else if (remainingKcal < 0) { + tooltipMessage += ` • ${Math.abs(remainingKcal).toFixed(1)} kcal ${t('table.summary.over')}`; + } } } } else { // Use the standard formatDashboardTooltip for non-calorie metrics const numericValue = parseFloat(value.replace('g', '')); - tooltipMessage = formatDashboardTooltip(numericValue, target, label); + + if (currentLocale === 'zh-CN') { + const percentage = target > 0 ? (numericValue / target) * 100 : 0; + const remaining = target - numericValue; + + tooltipMessage = `${numericValue.toFixed(1)} g ${label.toLowerCase()} • 占 ${Math.round(percentage)}%`; + if (remaining > 0) { + tooltipMessage += ` • 剩余 ${remaining.toFixed(1)} g`; + } else if (remaining < 0) { + tooltipMessage += ` • 超出 ${Math.abs(remaining).toFixed(1)} g`; + } + } else { + tooltipMessage = formatDashboardTooltip(numericValue, target, label); + } } safeAttachTooltip(card, tooltipMessage, this.plugin); diff --git a/src/ui/modals/ManualFoodEntryModal.ts b/src/ui/modals/ManualFoodEntryModal.ts index d972df4..a5f99bb 100644 --- a/src/ui/modals/ManualFoodEntryModal.ts +++ b/src/ui/modals/ManualFoodEntryModal.ts @@ -83,11 +83,11 @@ export class ManualFoodEntryModal extends Modal { // Energy Fields Container (kcal and kJ side by side) const energyContainer = nutritionContainer.createDiv({ cls: 'energy-fields-container' }); - // Calories Field + // Calories Field with bold label const caloriesGroup = energyContainer.createDiv({ cls: 'form-group energy-field' }); caloriesGroup.createEl('label', { text: t('food.manual.calories'), - cls: 'form-label required', + cls: 'form-label required energy-label-bold', }); this.caloriesInput = caloriesGroup.createEl('input', { type: 'number', @@ -100,11 +100,11 @@ export class ManualFoodEntryModal extends Modal { }, }); - // kJ Field + // kJ Field with bold label const kjGroup = energyContainer.createDiv({ cls: 'form-group energy-field' }); kjGroup.createEl('label', { text: t('food.manual.energy') + ' (kJ)', - cls: 'form-label', + cls: 'form-label energy-label-bold', }); this.kjInput = kjGroup.createEl('input', { type: 'number', diff --git a/src/utils/formatters.ts b/src/utils/formatters.ts index f587ff0..3377ea2 100644 --- a/src/utils/formatters.ts +++ b/src/utils/formatters.ts @@ -20,14 +20,25 @@ function getCurrentEnergyUnit(): 'kcal' | 'kJ' { return formatterPlugin?.settings?.energyUnit || 'kcal'; } +/** + * Get the current locale from the plugin + */ +function getCurrentLocale(): string { + try { + return formatterPlugin?.i18nManager?.getCurrentLocale() || 'en'; + } catch { + return 'en'; + } +} + /** * Format calories with proper unit conversion based on settings * @param calories Calorie value in kcal - * @returns Formatted string with appropriate unit + * @returns Formatted string with appropriate unit (with proper spacing) */ export function formatCalories(calories: number): string { if (!formatterPlugin) { - // Fallback if plugin not set + // Fallback if plugin not set - with proper spacing return `${calories.toFixed(1)} kcal`; } @@ -35,19 +46,38 @@ export function formatCalories(calories: number): string { if (currentUnit === 'kJ') { const kj = convertEnergyUnit(calories, 'kcal', 'kJ'); - return `${kj.toFixed(1)} kJ`; + return `${kj.toFixed(1)} kJ`; // Proper spacing (already correct) } else { - return `${calories.toFixed(1)} kcal`; + return `${calories.toFixed(1)} kcal`; // Proper spacing (already correct) } } /** - * Format grams with one decimal place + * Format grams with one decimal place and proper spacing * @param grams Gram value - * @returns Formatted string + * @returns Formatted string with space between value and unit */ export function formatGrams(grams: number): string { - return `${grams.toFixed(1)}g`; + return `${grams.toFixed(1)} g`; // Added space for consistency with energy units +} + +/** + * Format weight with proper spacing (following NIST standards) + * @param weight Weight value in grams + * @returns Formatted string with space between value and unit + */ +export function formatWeight(weight: number): string { + return `${weight.toFixed(1)} g`; // Added space between number and unit +} + +/** + * Format macronutrient values with proper spacing + * @param value Numeric value + * @param unit Unit string (default: 'g') + * @returns Formatted string with space between value and unit + */ +export function formatMacro(value: number, unit: string = 'g'): string { + return `${value.toFixed(1)} ${unit}`; // Added space between number and unit } /** @@ -59,12 +89,34 @@ export function formatPercentage(percentage: number): string { return Math.round(percentage).toString(); } +/** + * Format tooltip text with locale-specific word order and proper spacing + * Chinese: 占 7% · 剩余 95.2 g + * Others: 7% of target · 95.2 g remaining + */ +export function formatTooltipText( + percentage: number, + remaining: number, + unit: string, + locale?: string +): string { + const currentLocale = locale || getCurrentLocale(); + + if (currentLocale === 'zh-CN') { + // Chinese word order with proper spacing: 占 7% · 剩余 95.2 g + return `占 ${Math.round(percentage)}% · 剩余 ${remaining.toFixed(1)} ${unit}`; + } else { + // Default word order with proper spacing: 7% of target · 95.2 g remaining + return `${Math.round(percentage)}% ${t('tooltips.dailyTarget')} · ${remaining.toFixed(1)} ${unit} ${t('tooltips.remaining')}`; + } +} + /** * Generate tooltip text for dashboard metric cards * @param currentValue Current consumed value * @param targetValue Target value * @param macroName Name of the macro (for translation) - * @returns Formatted tooltip string + * @returns Formatted tooltip string with proper spacing */ export function formatDashboardTooltip( currentValue: number, @@ -73,16 +125,31 @@ export function formatDashboardTooltip( ): string { const percentage = targetValue > 0 ? (currentValue / targetValue) * 100 : 0; const remaining = targetValue - currentValue; + const currentLocale = getCurrentLocale(); - let tooltipText = `${currentValue.toFixed(1)}g ${macroName.toLowerCase()} • ${Math.round(percentage)}% ${t('table.summary.dailyTarget')}`; + if (currentLocale === 'zh-CN') { + // Chinese word order: 占 7% · 剩余 95.2 g + let tooltipText = `${currentValue.toFixed(1)} g ${macroName.toLowerCase()} • 占 ${Math.round(percentage)}%`; - if (remaining > 0) { - tooltipText += ` • ${remaining.toFixed(1)}g ${t('general.remaining')}`; - } else if (remaining < 0) { - tooltipText += ` • ${Math.abs(remaining).toFixed(1)}g ${t('table.summary.over')}`; + if (remaining > 0) { + tooltipText += ` • 剩余 ${remaining.toFixed(1)} g`; + } else if (remaining < 0) { + tooltipText += ` • 超出 ${Math.abs(remaining).toFixed(1)} g`; + } + + return tooltipText; + } else { + // English word order + let tooltipText = `${currentValue.toFixed(1)} g ${macroName.toLowerCase()} • ${Math.round(percentage)}% ${t('table.summary.dailyTarget')}`; + + if (remaining > 0) { + tooltipText += ` • ${remaining.toFixed(1)} g ${t('general.remaining')}`; + } else if (remaining < 0) { + tooltipText += ` • ${Math.abs(remaining).toFixed(1)} g ${t('table.summary.over')}`; + } + + return tooltipText; } - - return tooltipText; } /** @@ -163,15 +230,15 @@ export function getSummaryHeader(id: string): string { } /** - * Format calories for tooltips with proper unit handling + * Format calories for tooltips with proper unit handling and spacing * @param calories Calorie value in kcal * @param target Target calorie value in kcal * @param percentage Percentage of target - * @returns Formatted tooltip string + * @returns Formatted tooltip string with proper spacing */ export function formatCalorieTooltip(calories: number, target: number, percentage: number): string { if (!formatterPlugin) { - // Fallback if plugin not set + // Fallback if plugin not set - with proper spacing const remaining = target - calories; if (remaining > 0) { return `${calories.toFixed(1)} kcal • ${Math.round(percentage)}% ${t('table.summary.dailyTarget')} • ${remaining.toFixed(1)} kcal ${t('general.remaining')}`; @@ -181,33 +248,50 @@ export function formatCalorieTooltip(calories: number, target: number, percentag } const currentUnit = getCurrentEnergyUnit(); + const currentLocale = getCurrentLocale(); if (currentUnit === 'kJ') { const consumedKj = convertEnergyUnit(calories, 'kcal', 'kJ'); const targetKj = convertEnergyUnit(target, 'kcal', 'kJ'); const remainingKj = targetKj - consumedKj; - let tooltipText = `${consumedKj.toFixed(1)} kJ • ${Math.round(percentage)}% ${t('table.summary.dailyTarget')}`; - - if (remainingKj > 0) { - tooltipText += ` • ${remainingKj.toFixed(1)} kJ ${t('general.remaining')}`; - } else if (remainingKj < 0) { - tooltipText += ` • ${Math.abs(remainingKj).toFixed(1)} kJ ${t('table.summary.over')}`; + if (currentLocale === 'zh-CN') { + let tooltipText = `${consumedKj.toFixed(1)} kJ • 占 ${Math.round(percentage)}%`; + if (remainingKj > 0) { + tooltipText += ` • 剩余 ${remainingKj.toFixed(1)} kJ`; + } else if (remainingKj < 0) { + tooltipText += ` • 超出 ${Math.abs(remainingKj).toFixed(1)} kJ`; + } + return tooltipText; + } else { + let tooltipText = `${consumedKj.toFixed(1)} kJ • ${Math.round(percentage)}% ${t('table.summary.dailyTarget')}`; + if (remainingKj > 0) { + tooltipText += ` • ${remainingKj.toFixed(1)} kJ ${t('general.remaining')}`; + } else if (remainingKj < 0) { + tooltipText += ` • ${Math.abs(remainingKj).toFixed(1)} kJ ${t('table.summary.over')}`; + } + return tooltipText; } - - return tooltipText; } else { const remaining = target - calories; - let tooltipText = `${calories.toFixed(1)} kcal • ${Math.round(percentage)}% ${t('table.summary.dailyTarget')}`; - - if (remaining > 0) { - tooltipText += ` • ${remaining.toFixed(1)} kcal ${t('general.remaining')}`; - } else if (remaining < 0) { - tooltipText += ` • ${Math.abs(remaining).toFixed(1)} kcal ${t('table.summary.over')}`; + if (currentLocale === 'zh-CN') { + let tooltipText = `${calories.toFixed(1)} kcal • 占 ${Math.round(percentage)}%`; + if (remaining > 0) { + tooltipText += ` • 剩余 ${remaining.toFixed(1)} kcal`; + } else if (remaining < 0) { + tooltipText += ` • 超出 ${Math.abs(remaining).toFixed(1)} kcal`; + } + return tooltipText; + } else { + let tooltipText = `${calories.toFixed(1)} kcal • ${Math.round(percentage)}% ${t('table.summary.dailyTarget')}`; + if (remaining > 0) { + tooltipText += ` • ${remaining.toFixed(1)} kcal ${t('general.remaining')}`; + } else if (remaining < 0) { + tooltipText += ` • ${Math.abs(remaining).toFixed(1)} kcal ${t('table.summary.over')}`; + } + return tooltipText; } - - return tooltipText; } } @@ -216,7 +300,7 @@ export function formatCalorieTooltip(calories: number, target: number, percentag * @param macro Macro name * @param value Macro value in grams * @param percentage Percentage of total macros - * @returns Formatted tooltip string + * @returns Formatted tooltip string with proper spacing */ export function formatMacroCompositionTooltip( macro: string, @@ -234,7 +318,7 @@ export function formatMacroCompositionTooltip( * Format target tooltip * @param target Target value * @param unit Unit (g, kcal, kJ) - * @returns Formatted tooltip string + * @returns Formatted tooltip string with proper spacing */ export function formatTargetTooltip(target: number, unit: string): string { return t('tooltips.target', { @@ -244,12 +328,12 @@ export function formatTargetTooltip(target: number, unit: string): string { } /** - * Format percentage tooltip for macro cells + * Format percentage tooltip for macro cells with proper spacing * @param value Macro value in grams * @param macro Macro name * @param percentage Percentage of daily target * @param target Daily target value - * @returns Formatted tooltip string + * @returns Formatted tooltip string with proper spacing */ export function formatMacroPercentageTooltip( value: number, @@ -258,6 +342,7 @@ export function formatMacroPercentageTooltip( target: number ): string { const remaining = target - value; + const currentLocale = getCurrentLocale(); let tooltipText = t('tooltips.percentage', { value: value.toFixed(1), @@ -266,19 +351,27 @@ export function formatMacroPercentageTooltip( }); if (remaining > 0) { - tooltipText += ` • ${remaining.toFixed(1)}g ${t('general.remaining')}`; + if (currentLocale === 'zh-CN') { + tooltipText += ` • 剩余 ${remaining.toFixed(1)} g`; + } else { + tooltipText += ` • ${remaining.toFixed(1)} g ${t('general.remaining')}`; + } } else if (remaining < 0) { - tooltipText += ` • ${t('tooltips.over', { over: Math.abs(remaining).toFixed(1) })}`; + if (currentLocale === 'zh-CN') { + tooltipText += ` • 超出 ${Math.abs(remaining).toFixed(1)} g`; + } else { + tooltipText += ` • ${t('tooltips.over', { over: Math.abs(remaining).toFixed(1) })}`; + } } return tooltipText; } /** - * Format energy value with automatic unit conversion + * Format energy value with automatic unit conversion and proper spacing * @param valueInKcal Energy value in kcal * @param showUnit Whether to include the unit in the output - * @returns Formatted energy string + * @returns Formatted energy string with proper spacing */ export function formatEnergy(valueInKcal: number, showUnit: boolean = true): string { if (!formatterPlugin) { @@ -289,12 +382,22 @@ export function formatEnergy(valueInKcal: number, showUnit: boolean = true): str if (currentUnit === 'kJ') { const kj = convertEnergyUnit(valueInKcal, 'kcal', 'kJ'); - return showUnit ? `${kj.toFixed(1)} kJ` : kj.toFixed(1); + return showUnit ? `${kj.toFixed(1)} kJ` : kj.toFixed(1); // Proper spacing } else { - return showUnit ? `${valueInKcal.toFixed(1)} kcal` : valueInKcal.toFixed(1); + return showUnit ? `${valueInKcal.toFixed(1)} kcal` : valueInKcal.toFixed(1); // Proper spacing } } +/** + * Format serving size with proper spacing + * @param serving Serving size string + * @returns Formatted serving size with space between number and unit + */ +export function formatServing(serving: string): string { + // Handle various serving size formats and ensure proper spacing + return serving.replace(/(\d+(?:\.\d+)?)\s*g/i, '$1 g'); +} + /** * Get the current energy unit as a string * @returns Current energy unit setting @@ -315,11 +418,11 @@ export function formatNumber(value: number, decimals: number = 1): string { } /** - * Format meal summary text + * Format meal summary text with proper spacing * @param mealName Name of the meal * @param itemCount Number of items in the meal * @param calories Total calories - * @returns Formatted meal summary + * @returns Formatted meal summary with proper spacing */ export function formatMealSummary(mealName: string, itemCount: number, calories: number): string { const calorieText = formatCalories(calories); @@ -328,18 +431,18 @@ export function formatMealSummary(mealName: string, itemCount: number, calories: } /** - * Format remaining/over values for summary rows + * Format remaining/over values for summary rows with proper spacing * @param remaining Remaining value (negative if over target) * @param unit Unit string - * @returns Formatted remaining/over string + * @returns Formatted remaining/over string with proper spacing */ export function formatRemaining(remaining: number, unit: string): string { if (remaining < 0) { - return `${formatNumber(Math.abs(remaining))}${unit} (${t('table.summary.over')})`; + return `${formatNumber(Math.abs(remaining))} ${unit} (${t('table.summary.over')})`; } else if (remaining === 0) { - return `0${unit}`; + return `0 ${unit}`; } else { - return `${formatNumber(remaining)}${unit}`; + return `${formatNumber(remaining)} ${unit}`; } } diff --git a/styles.css b/styles.css index 546f7e1..c06b712 100644 --- a/styles.css +++ b/styles.css @@ -3,73 +3,73 @@ * ============================== */ .macros-container { - width: 100%; - margin-top: 1.5rem; + width: 100%; + margin-top: 1.5rem; } .macros-row { - display: flex; - align-items: center; - gap: var(--size-4-2); - margin-bottom: var(--size-4-4); + display: flex; + align-items: center; + gap: var(--size-4-2); + margin-bottom: var(--size-4-4); } .macros-summary { - margin-bottom: var(--size-4-4); + margin-bottom: var(--size-4-4); } .label-cell { - font-weight: bold; - text-align: center; + font-weight: bold; + text-align: center; } .is-hidden { - display: none !important; + display: none !important; } .is-visible { - display: inline-flex !important; + display: inline-flex !important; } .control-hidden { - display: none !important; + display: none !important; } .control-visible { - display: block !important; + display: block !important; } .control-inline-flex { - display: inline-flex !important; + display: inline-flex !important; } .macro-flex-row { - display: flex; - align-items: center; - gap: 10px; + display: flex; + align-items: center; + gap: 10px; } .macro-space-between { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; } .macro-inline-calories { - margin-left: 0; - position: static; + margin-left: 0; + position: static; } .meal-header-left-content { - display: flex; - align-items: center; - gap: 10px; + display: flex; + align-items: center; + gap: 10px; } .meal-calorie-inline { - margin-left: 0; - position: static; + margin-left: 0; + position: static; } /* ============================== @@ -77,202 +77,202 @@ * ============================== */ .macros-table { - table-layout: fixed; - width: 100%; - border-collapse: collapse; - margin: 1rem 0; - position: relative; - z-index: 1; + table-layout: fixed; + width: 100%; + border-collapse: collapse; + margin: 1rem 0; + position: relative; + z-index: 1; } .macros-table tbody { - position: relative; - z-index: 2; + position: relative; + z-index: 2; } .macros-table td, .macros-table th, .macros-table .column-header { - vertical-align: middle; - text-align: center; - padding: 8px 15px; + vertical-align: middle; + text-align: center; + padding: 8px 15px; } .macros-table th, .macros-table .column-header { - background-color: var(--background-primary); - color: var(--text-normal); - font-weight: 600; - border-bottom: 1px solid var(--background-modifier-border); + background-color: var(--background-primary); + color: var(--text-normal); + font-weight: 600; + border-bottom: 1px solid var(--background-modifier-border); } .macro-bold-cell { - font-weight: bold; + font-weight: bold; } .macros-table tr:nth-child(even) { - background-color: var(--background-secondary); + background-color: var(--background-secondary); } .macros-table tr:nth-child(odd) { - background-color: var(--background-primary); + background-color: var(--background-primary); } .macros-table tr:not(.meal-header):not(.combined-totals-header):hover { - background-color: var(--background-modifier-hover); + background-color: var(--background-modifier-hover); } .macros-table tr { - position: relative; - transition: background-color 0.2s ease; + position: relative; + transition: background-color 0.2s ease; } .macros-table tr:focus-within { - outline: 2px solid var(--interactive-accent) !important; - outline-offset: 2px !important; - z-index: 15; + outline: 2px solid var(--interactive-accent) !important; + outline-offset: 2px !important; + z-index: 15; } .macros-table td[colspan='2'] { - text-align: center; - font-weight: 600; - position: relative; + text-align: center; + font-weight: 600; + position: relative; } .macros-table td:first-child { - text-align: left; - padding-right: 15px; - max-width: 200px; - min-width: 120px; - width: auto; - padding: 8px 12px; + text-align: left; + padding-right: 15px; + max-width: 200px; + min-width: 120px; + width: auto; + padding: 8px 12px; } .macros-table td:first-child > div { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; } .macros-table td:first-child .remove-icon { - position: static; - margin-left: 10px; - flex-shrink: 0; + position: static; + margin-left: 10px; + flex-shrink: 0; } .macro-percentage { - font-size: 0.75rem !important; - opacity: 0.7 !important; - font-weight: normal !important; - margin-left: 2px !important; + font-size: 0.75rem !important; + opacity: 0.7 !important; + font-weight: normal !important; + margin-left: 2px !important; } .macro-percentage::before { - content: ''; + content: ''; } .macro-food-name-container { - display: flex !important; - justify-content: space-between !important; - align-items: center !important; - width: 100% !important; - min-height: 24px !important; - gap: 8px !important; + display: flex !important; + justify-content: space-between !important; + align-items: center !important; + width: 100% !important; + min-height: 24px !important; + gap: 8px !important; } .macro-food-name { - flex: 1 1 auto !important; - min-width: 0 !important; - overflow: hidden !important; - text-overflow: ellipsis !important; - white-space: nowrap !important; - margin-right: 4px !important; - cursor: default !important; + flex: 1 1 auto !important; + min-width: 0 !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + margin-right: 4px !important; + cursor: default !important; } .macro-food-remove-btn { - flex: 0 0 auto !important; - min-width: 20px !important; - width: 20px !important; - height: 20px !important; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - margin-left: auto !important; - opacity: 0.7 !important; - transition: all 0.2s ease !important; - cursor: pointer !important; - border-radius: 3px !important; - font-size: 14px !important; - font-weight: bold !important; - color: var(--text-muted) !important; + flex: 0 0 auto !important; + min-width: 20px !important; + width: 20px !important; + height: 20px !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + margin-left: auto !important; + opacity: 0.7 !important; + transition: all 0.2s ease !important; + cursor: pointer !important; + border-radius: 3px !important; + font-size: 14px !important; + font-weight: bold !important; + color: var(--text-muted) !important; } .macro-food-remove-btn:hover { - opacity: 1 !important; - background-color: var(--background-modifier-hover) !important; - color: var(--text-error) !important; - transform: scale(1.1) !important; + opacity: 1 !important; + background-color: var(--background-modifier-hover) !important; + color: var(--text-error) !important; + transform: scale(1.1) !important; } .expanded-row { - display: table-row; + display: table-row; } .collapsed-row { - display: none; + display: none; } .expandable-section-hidden tr { - display: none; + display: none; } .expandable-section-visible tr { - display: table-row; + display: table-row; } .macros-table-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 12px; - padding: 8px 12px; - background-color: var(--background-secondary-alt); - border-radius: 4px; - border: 1px solid var(--background-modifier-border); + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; + padding: 8px 12px; + background-color: var(--background-secondary-alt); + border-radius: 4px; + border: 1px solid var(--background-modifier-border); } .macros-table-info { - font-weight: 500; - color: var(--text-normal); - font-size: 0.9rem; - display: flex; - align-items: center; - gap: 4px; + font-weight: 500; + color: var(--text-normal); + font-size: 0.9rem; + display: flex; + align-items: center; + gap: 4px; } .macros-table-id-label { - color: var(--text-muted); - font-weight: normal; + color: var(--text-muted); + font-weight: normal; } .macros-table-id { - opacity: 0.85; + opacity: 0.85; } .macros-table-controls { - display: flex; - gap: 10px; - align-items: center; + display: flex; + gap: 10px; + align-items: center; } .table-row-visible { - display: table-row !important; + display: table-row !important; } .table-row-hidden { - display: none !important; + display: none !important; } /* ============================== @@ -280,201 +280,201 @@ * ============================== */ .collapsible-header { - display: flex; - justify-content: space-between; - align-items: center; - cursor: pointer; - padding: 8px 12px; - background-color: var(--background-secondary-alt); - border-radius: 4px; - user-select: none; - transition: background-color 0.2s ease; - margin-bottom: 1px; - box-sizing: border-box; - width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + padding: 8px 12px; + background-color: var(--background-secondary-alt); + border-radius: 4px; + user-select: none; + transition: background-color 0.2s ease; + margin-bottom: 1px; + box-sizing: border-box; + width: 100%; } .collapsible-header:hover { - background-color: var(--background-modifier-hover); + background-color: var(--background-modifier-hover); } .meal-header-cell.collapsible-header { - display: table-cell; - width: 100%; + display: table-cell; + width: 100%; } -.macros-table .meal-header-cell[colspan="6"] { - width: 100%; +.macros-table .meal-header-cell[colspan='6'] { + width: 100%; } .header-content { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; } .header-left { - display: flex; - align-items: center; - gap: 10px; + display: flex; + align-items: center; + gap: 10px; } .header-label { - font-weight: 600; - color: var(--text-normal); + font-weight: 600; + color: var(--text-normal); } .header-calorie-summary { - color: var(--text-muted); - margin-left: 10px; - font-size: 0.9em; - font-weight: normal; + color: var(--text-muted); + margin-left: 10px; + font-size: 0.9em; + font-weight: normal; } .meal-header, .combined-totals-header { - background-color: var(--background-modifier-form-field); - color: var(--text-normal); - font-weight: 700; - text-align: center; - position: relative; - width: 100%; - display: table-row; - border: none; - margin-bottom: 2px; + background-color: var(--background-modifier-form-field); + color: var(--text-normal); + font-weight: 700; + text-align: center; + position: relative; + width: 100%; + display: table-row; + border: none; + margin-bottom: 2px; } .meal-header { - font-size: 1.1rem; - padding: 0.7rem 1rem; - border-bottom: none; - border-top: none; + font-size: 1.1rem; + padding: 0.7rem 1rem; + border-bottom: none; + border-top: none; } .meal-header-cell { - padding: 0; + padding: 0; } .meal-calorie-summary { - font-size: 0.95rem; - font-weight: 600; - color: var(--text-normal); - opacity: 0.9; - margin-left: 10px; - position: static; - right: auto; - top: auto; - transform: none; + font-size: 0.95rem; + font-weight: 600; + color: var(--text-normal); + opacity: 0.9; + margin-left: 10px; + position: static; + right: auto; + top: auto; + transform: none; } .combined-totals-header { - padding: 0.7rem 1rem; - border-top: none; + padding: 0.7rem 1rem; + border-top: none; } .meal-header-content { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; } .meal-header-content > div:first-child { - display: flex; - align-items: center; - gap: 10px; + display: flex; + align-items: center; + gap: 10px; } .meal-name { - font-weight: 700; + font-weight: 700; } .totals-row, .targets-row, .remaining-row { - width: 100%; - display: table-row; + width: 100%; + display: table-row; } .totals-row td:first-child, .targets-row td:first-child, .remaining-row td:first-child { - text-align: center; - font-weight: 600; + text-align: center; + font-weight: 600; } .remaining-row { - border-top: 1px dotted var(--background-modifier-border); - border-bottom: 1px solid var(--background-modifier-border); + border-top: 1px dotted var(--background-modifier-border); + border-bottom: 1px solid var(--background-modifier-border); } .remaining-row td.exceeded { - color: var(--text-error); - font-weight: 600; + color: var(--text-error); + font-weight: 600; } .remaining-row td.exceeded div { - display: flex; - align-items: center; - justify-content: flex-start; - gap: 4px; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 4px; } .editable-quantity { - cursor: pointer; - position: relative; - transition: background-color 0.2s ease; - padding: 6px 8px !important; - border-radius: 4px; - border: 1px dashed transparent; + cursor: pointer; + position: relative; + transition: background-color 0.2s ease; + padding: 6px 8px !important; + border-radius: 4px; + border: 1px dashed transparent; } .editable-quantity:hover { - background-color: var(--background-modifier-hover); - border-color: var(--background-modifier-border); + background-color: var(--background-modifier-hover); + border-color: var(--background-modifier-border); } .editable-quantity:after { - content: '✎'; - position: absolute; - right: 4px; - top: 50%; - transform: translateY(-50%); - font-size: 0.8rem; - opacity: 0; - color: var(--text-accent); - transition: opacity 0.2s ease; + content: '✎'; + position: absolute; + right: 4px; + top: 50%; + transform: translateY(-50%); + font-size: 0.8rem; + opacity: 0; + color: var(--text-accent); + transition: opacity 0.2s ease; } .editable-quantity:hover:after { - opacity: 0.8; + opacity: 0.8; } .editable-quantity input { - font-family: var(--font-interface); - background-color: var(--background-primary); - color: var(--text-normal); - border: 1px solid var(--interactive-accent); - border-radius: 3px; - width: 70px !important; - padding: 4px 8px !important; - font-size: 1em; + font-family: var(--font-interface); + background-color: var(--background-primary); + color: var(--text-normal); + border: 1px solid var(--interactive-accent); + border-radius: 3px; + width: 70px !important; + padding: 4px 8px !important; + font-size: 1em; } .editable-quantity input:focus { - outline: none; - box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2); + outline: none; + box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.2); } .quantity-updating { - color: var(--text-accent); - font-style: italic; + color: var(--text-accent); + font-style: italic; } .quantity-error { - color: var(--text-error); - font-style: italic; + color: var(--text-error); + font-style: italic; } /* ============================== @@ -489,55 +489,55 @@ .fat-cell, .carbs-cell, .calories-cell { - position: relative; + position: relative; } .protein-cell::before, .fat-cell::before, .carbs-cell::before, .calories-cell::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 4px; + content: ''; + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 4px; } .protein-cell::before { - background-color: var(--protein-color, #4caf50); + background-color: var(--protein-color, #4caf50); } .fat-cell::before { - background-color: var(--fat-color, #f44336); + background-color: var(--fat-color, #f44336); } .carbs-cell::before { - background-color: var(--carbs-color, #2196f3); + background-color: var(--carbs-color, #2196f3); } .calories-cell::before { - background-color: var(--calories-color, #e8962b); + background-color: var(--calories-color, #e8962b); } .macros-table th.protein-cell::before, .macros-table .column-header.protein-cell::before { - background-color: var(--protein-color, #4caf50); + background-color: var(--protein-color, #4caf50); } .macros-table th.fat-cell::before, .macros-table .column-header.fat-cell::before { - background-color: var(--fat-color, #f44336); + background-color: var(--fat-color, #f44336); } .macros-table th.carbs-cell::before, .macros-table .column-header.carbs-cell::before { - background-color: var(--carbs-color, #2196f3); + background-color: var(--carbs-color, #2196f3); } .macros-table th.calories-cell::before, .macros-table .column-header.calories-cell::before { - background-color: var(--calories-color, #e8962b); + background-color: var(--calories-color, #e8962b); } .macro-color-indicator { @@ -553,115 +553,157 @@ .target-progress-container, .daily-target-indicator, .macro-metric-progress-container { - width: 100%; - height: 8px; - overflow: hidden; - background-color: var(--background-modifier-border); - border-radius: 4px; - margin-top: 4px; - margin-bottom: 2px; - box-sizing: border-box; - position: relative; + width: 100%; + height: 8px; + overflow: hidden; + background-color: var(--background-modifier-border); + border-radius: 4px; + margin-top: 4px; + margin-bottom: 2px; + box-sizing: border-box; + position: relative; } .target-progress-container { - position: relative; + position: relative; } .macro-progress-bar, .target-bar, .target-progress, .macro-metric-progress-bar { - height: 100%; - border-radius: inherit; - transition: - width 0.3s ease, - background-color 0.3s ease, - box-shadow 0.3s ease; + height: 100%; + border-radius: inherit; + transition: + width 0.3s ease, + background-color 0.3s ease, + box-shadow 0.3s ease; } .macro-progress-bar[data-min-width='true'], .progress-bar-with-width[data-min-width='true'], .micro-value { - min-width: 5px; + min-width: 5px; } .progress-width-5px { - width: 5px; + width: 5px; } -.progress-width-0 { width: 0%; } -.progress-width-5 { width: 5%; } -.progress-width-10 { width: 10%; } -.progress-width-15 { width: 15%; } -.progress-width-20 { width: 20%; } -.progress-width-25 { width: 25%; } -.progress-width-30 { width: 30%; } -.progress-width-35 { width: 35%; } -.progress-width-40 { width: 40%; } -.progress-width-45 { width: 45%; } -.progress-width-50 { width: 50%; } -.progress-width-55 { width: 55%; } -.progress-width-60 { width: 60%; } -.progress-width-65 { width: 65%; } -.progress-width-70 { width: 70%; } -.progress-width-75 { width: 75%; } -.progress-width-80 { width: 80%; } -.progress-width-85 { width: 85%; } -.progress-width-90 { width: 90%; } -.progress-width-95 { width: 95%; } -.progress-width-100 { width: 100%; } +.progress-width-0 { + width: 0%; +} +.progress-width-5 { + width: 5%; +} +.progress-width-10 { + width: 10%; +} +.progress-width-15 { + width: 15%; +} +.progress-width-20 { + width: 20%; +} +.progress-width-25 { + width: 25%; +} +.progress-width-30 { + width: 30%; +} +.progress-width-35 { + width: 35%; +} +.progress-width-40 { + width: 40%; +} +.progress-width-45 { + width: 45%; +} +.progress-width-50 { + width: 50%; +} +.progress-width-55 { + width: 55%; +} +.progress-width-60 { + width: 60%; +} +.progress-width-65 { + width: 65%; +} +.progress-width-70 { + width: 70%; +} +.progress-width-75 { + width: 75%; +} +.progress-width-80 { + width: 80%; +} +.progress-width-85 { + width: 85%; +} +.progress-width-90 { + width: 90%; +} +.progress-width-95 { + width: 95%; +} +.progress-width-100 { + width: 100%; +} .protein-progress, .protein-target { - background-color: var(--protein-color, #4caf50); - opacity: 0.7; + background-color: var(--protein-color, #4caf50); + opacity: 0.7; } .fat-progress, .fat-target { - background-color: var(--fat-color, #f44336); - opacity: 0.7; + background-color: var(--fat-color, #f44336); + opacity: 0.7; } .carbs-progress, .carbs-target { - background-color: var(--carbs-color, #2196f3); - opacity: 0.7; + background-color: var(--carbs-color, #2196f3); + opacity: 0.7; } .calories-progress, .calories-target { - background-color: var(--calories-color, #e8962b); - opacity: 0.7; + background-color: var(--calories-color, #e8962b); + opacity: 0.7; } .protein-progress.near-target, .protein-target.near-target { - background-color: var(--protein-color, #4caf50); - opacity: 0.9; - box-shadow: 0 0 8px rgba(76, 175, 80, 0.4); + background-color: var(--protein-color, #4caf50); + opacity: 0.9; + box-shadow: 0 0 8px rgba(76, 175, 80, 0.4); } .fat-progress.near-target, .fat-target.near-target { - background-color: var(--fat-color, #f44336); - opacity: 0.9; - box-shadow: 0 0 8px rgba(244, 67, 54, 0.4); + background-color: var(--fat-color, #f44336); + opacity: 0.9; + box-shadow: 0 0 8px rgba(244, 67, 54, 0.4); } .carbs-progress.near-target, .carbs-target.near-target { - background-color: var(--carbs-color, #2196f3); - opacity: 0.9; - box-shadow: 0 0 8px rgba(33, 150, 243, 0.4); + background-color: var(--carbs-color, #2196f3); + opacity: 0.9; + box-shadow: 0 0 8px rgba(33, 150, 243, 0.4); } .calories-progress.near-target, .calories-target.near-target { - background-color: var(--calories-color, #e8962b); - opacity: 0.9; - box-shadow: 0 0 8px rgba(255, 152, 0, 0.4); + background-color: var(--calories-color, #e8962b); + opacity: 0.9; + box-shadow: 0 0 8px rgba(255, 152, 0, 0.4); } .protein-progress.over-target, @@ -672,64 +714,64 @@ .carbs-target.over-target, .calories-progress.over-target, .calories-target.over-target { - background-image: linear-gradient( - 45deg, - rgba(255, 255, 255, 0.2) 25%, - transparent 25%, - transparent 50%, - rgba(255, 255, 255, 0.2) 50%, - rgba(255, 255, 255, 0.2) 75%, - transparent 75%, - transparent - ); - background-size: 20px 20px; - opacity: 1; + background-image: linear-gradient( + 45deg, + rgba(255, 255, 255, 0.2) 25%, + transparent 25%, + transparent 50%, + rgba(255, 255, 255, 0.2) 50%, + rgba(255, 255, 255, 0.2) 75%, + transparent 75%, + transparent + ); + background-size: 20px 20px; + opacity: 1; } .protein-progress.over-target, .protein-target.over-target { - background-color: var(--protein-color, #4caf50); + background-color: var(--protein-color, #4caf50); } .fat-progress.over-target, .fat-target.over-target { - background-color: var(--fat-color, #f44336); + background-color: var(--fat-color, #f44336); } .carbs-progress.over-target, .carbs-target.over-target { - background-color: var(--carbs-color, #2196f3); + background-color: var(--carbs-color, #2196f3); } .calories-progress.over-target, .calories-target.over-target { - background-color: var(--calories-color, #e8962b); + background-color: var(--calories-color, #e8962b); } .macro-metric-target-indicator { - position: absolute; - height: 10px; - width: 2px; - background-color: var(--text-muted); - top: -1px; - transform: translateX(-50%); + position: absolute; + height: 10px; + width: 2px; + background-color: var(--text-muted); + top: -1px; + transform: translateX(-50%); } .target-indicator-full { - left: 100%; + left: 100%; } .overflow-indicator { - position: absolute; - right: -35px; - top: 50%; - transform: translateY(-50%); - color: var(--text-normal); - background-color: var(--background-secondary-alt); - padding: 2px 5px; - border-radius: 4px; - font-size: 0.7rem; - font-weight: bold; + position: absolute; + right: -35px; + top: 50%; + transform: translateY(-50%); + color: var(--text-normal); + background-color: var(--background-secondary-alt); + padding: 2px 5px; + border-radius: 4px; + font-size: 0.7rem; + font-weight: bold; } .macro-pie-progress-bar { @@ -739,78 +781,122 @@ width: var(--progress-width) !important; } -.pie-progress-width-0 { --progress-width: 0%; } -.pie-progress-width-1 { --progress-width: 1%; } -.pie-progress-width-5 { --progress-width: 5%; } -.pie-progress-width-10 { --progress-width: 10%; } -.pie-progress-width-15 { --progress-width: 15%; } -.pie-progress-width-20 { --progress-width: 20%; } -.pie-progress-width-25 { --progress-width: 25%; } -.pie-progress-width-30 { --progress-width: 30%; } -.pie-progress-width-35 { --progress-width: 35%; } -.pie-progress-width-40 { --progress-width: 40%; } -.pie-progress-width-45 { --progress-width: 45%; } -.pie-progress-width-50 { --progress-width: 50%; } -.pie-progress-width-55 { --progress-width: 55%; } -.pie-progress-width-60 { --progress-width: 60%; } -.pie-progress-width-65 { --progress-width: 65%; } -.pie-progress-width-70 { --progress-width: 70%; } -.pie-progress-width-75 { --progress-width: 75%; } -.pie-progress-width-80 { --progress-width: 80%; } -.pie-progress-width-85 { --progress-width: 85%; } -.pie-progress-width-90 { --progress-width: 90%; } -.pie-progress-width-95 { --progress-width: 95%; } -.pie-progress-width-100 { --progress-width: 100%; } +.pie-progress-width-0 { + --progress-width: 0%; +} +.pie-progress-width-1 { + --progress-width: 1%; +} +.pie-progress-width-5 { + --progress-width: 5%; +} +.pie-progress-width-10 { + --progress-width: 10%; +} +.pie-progress-width-15 { + --progress-width: 15%; +} +.pie-progress-width-20 { + --progress-width: 20%; +} +.pie-progress-width-25 { + --progress-width: 25%; +} +.pie-progress-width-30 { + --progress-width: 30%; +} +.pie-progress-width-35 { + --progress-width: 35%; +} +.pie-progress-width-40 { + --progress-width: 40%; +} +.pie-progress-width-45 { + --progress-width: 45%; +} +.pie-progress-width-50 { + --progress-width: 50%; +} +.pie-progress-width-55 { + --progress-width: 55%; +} +.pie-progress-width-60 { + --progress-width: 60%; +} +.pie-progress-width-65 { + --progress-width: 65%; +} +.pie-progress-width-70 { + --progress-width: 70%; +} +.pie-progress-width-75 { + --progress-width: 75%; +} +.pie-progress-width-80 { + --progress-width: 80%; +} +.pie-progress-width-85 { + --progress-width: 85%; +} +.pie-progress-width-90 { + --progress-width: 90%; +} +.pie-progress-width-95 { + --progress-width: 95%; +} +.pie-progress-width-100 { + --progress-width: 100%; +} /* ============================== * 6. DATA LABELS & TOOLTIPS * ============================== */ .macro-tooltip { - position: fixed; - left: var(--x, -9999px); - top: var(--y, -9999px); - transform: translateX(-50%) translateY(0px) scale(0.95); - z-index: 9999; - background-color: var(--background-modifier-border-hover); - color: var(--text-normal); - padding: 6px 12px; - border-radius: 8px; - pointer-events: none; - font-size: var(--font-small); - font-weight: 500; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); - max-width: 250px; - opacity: 0; - visibility: hidden; - transition: - opacity 150ms ease, - transform 150ms ease, - visibility 0ms linear 150ms; + position: fixed; + left: var(--x, -9999px); + top: var(--y, -9999px); + transform: translateX(-50%) translateY(0px) scale(0.95); + z-index: 9999; + background-color: var(--background-modifier-border-hover); + color: var(--text-normal); + padding: 6px 12px; + border-radius: 8px; + pointer-events: none; + font-size: var(--font-small); + font-weight: 500; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); + max-width: 250px; + opacity: 0; + visibility: hidden; + transition: + opacity 150ms ease, + transform 150ms ease, + visibility 0ms linear 150ms; } .tooltip-visible { - opacity: 1; - visibility: visible; - transform: translateX(-50%) translateY(6px) scale(1); - transition-delay: 0ms; + opacity: 1; + visibility: visible; + transform: translateX(-50%) translateY(6px) scale(1); + transition-delay: 0ms; } .macro-tooltip-hidden { - display: none; - pointer-events: none; + display: none; + pointer-events: none; } .macro-tooltip-positioned { - display: block; + display: block; } .macro-tooltip-mobile { - background-color: rgba(0, 0, 0, 0.9) !important; - border: 1px solid rgba(255, 255, 255, 0.2) !important; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; - z-index: 10000 !important; - transition: all 0.2s ease !important; + background-color: rgba(0, 0, 0, 0.9) !important; + border: 1px solid rgba(255, 255, 255, 0.2) !important; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; + z-index: 10000 !important; + transition: all 0.2s ease !important; } /* ============================== @@ -821,88 +907,88 @@ .macros-plus-button, .remove-item-button, .macros-control-icon { - cursor: pointer; + cursor: pointer; } .macros-control-icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 30px; - height: 30px; - border-radius: 4px; - color: var(--text-muted); - transition: - background-color 0.2s ease, - color 0.2s ease; - font-size: 1.2rem; + display: inline-flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + border-radius: 4px; + color: var(--text-muted); + transition: + background-color 0.2s ease, + color 0.2s ease; + font-size: 1.2rem; } .macros-control-icon:hover { - background-color: var(--background-modifier-hover); - color: var(--text-normal); + background-color: var(--background-modifier-hover); + color: var(--text-normal); } .add-icon { - font-weight: bold; + font-weight: bold; } .collapse-all-icon, .remove-icon { - opacity: 0.8; + opacity: 0.8; } .remove-item-button { - font-size: 1.2rem; - padding: 0.1rem 0.4rem; - margin-left: 0.5rem; - background-color: transparent; - color: var(--text-muted); - border-radius: 4px; - border: none; - transition: - background-color 0.2s ease, - color 0.2s ease; - width: 28px; - height: 28px; - display: inline-flex; - align-items: center; - justify-content: center; + font-size: 1.2rem; + padding: 0.1rem 0.4rem; + margin-left: 0.5rem; + background-color: transparent; + color: var(--text-muted); + border-radius: 4px; + border: none; + transition: + background-color 0.2s ease, + color 0.2s ease; + width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; } .remove-item-button:hover { - background-color: var(--background-modifier-hover); - color: var(--text-normal); + background-color: var(--background-modifier-hover); + color: var(--text-normal); } .meal-header .remove-item-button { - font-size: 0.9rem; - background-color: var(--background-modifier-error); - color: var(--text-on-accent); + font-size: 0.9rem; + background-color: var(--background-modifier-error); + color: var(--text-on-accent); } .macros-btn-plus { - font-size: 1.2em; + font-size: 1.2em; } .macros-btn-remove { - margin-left: var(--size-4-2); + margin-left: var(--size-4-2); } .macros-btn-small-remove { - margin-left: var(--size-4-1); + margin-left: var(--size-4-1); } .macros-btn-action { - margin-top: 0.5rem; + margin-top: 0.5rem; } .macros-plus-button { - font-size: 1.2em; - border: none; - background: transparent; - color: var(--text-normal); - padding: var(--size-2-1) var(--size-4-2); + font-size: 1.2em; + border: none; + background: transparent; + color: var(--text-normal); + padding: var(--size-2-1) var(--size-4-2); } /* ============================== @@ -943,203 +1029,203 @@ } .macrospc-container .macro-dashboard-header { - display: flex; - justify-content: space-between; - cursor: pointer; - padding: 8px 12px; - background-color: var(--background-secondary-alt); - border-radius: 4px; - border: 1px solid var(--background-modifier-border); - margin-bottom: 0px; + display: flex; + justify-content: space-between; + cursor: pointer; + padding: 8px 12px; + background-color: var(--background-secondary-alt); + border-radius: 4px; + border: 1px solid var(--background-modifier-border); + margin-bottom: 0px; } .macrospc-container .macroscalc-header-content { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; } .macrospc-container .macroscalc-header-title { - font-weight: 600; + font-weight: 600; } .macrospc-container .macroscalc-toggle-button { - width: 24px; - height: 24px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - position: relative; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + position: relative; } .macrospc-container .macro-space-between { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - padding: 0 10px; + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 10px; } .macrospc-container .macro-pie-chart-container { - flex: 0 0 auto; - width: 300px; - height: 300px; - display: flex; - justify-content: center; - align-items: center; - margin: 0; - padding: 12px 16px; - position: relative; - box-sizing: border-box; - margin-left: 18px; + flex: 0 0 auto; + width: 300px; + height: 300px; + display: flex; + justify-content: center; + align-items: center; + margin: 0; + padding: 12px 16px; + position: relative; + box-sizing: border-box; + margin-left: 18px; } .macro-pie-chart-container:not(.macrospc-container .macro-pie-chart-container) { - flex: 0 0 auto; - min-width: 200px; - max-width: 300px; - display: flex; - justify-content: center; - align-items: center; - padding: 10px 0; - position: relative; + flex: 0 0 auto; + min-width: 200px; + max-width: 300px; + display: flex; + justify-content: center; + align-items: center; + padding: 10px 0; + position: relative; } .macrospc-container .macro-pie-chart-summary-container { - flex: 1; - min-width: 200px; - max-width: 400px; - min-height: 300px; - display: flex; - flex-direction: column; - gap: 5px; - background-color: var(--background-secondary); - border-radius: 8px; - padding: 12px 16px; - box-sizing: border-box; - justify-content: center; + flex: 1; + min-width: 200px; + max-width: 400px; + min-height: 300px; + display: flex; + flex-direction: column; + gap: 5px; + background-color: var(--background-secondary); + border-radius: 8px; + padding: 12px 16px; + box-sizing: border-box; + justify-content: center; } .macro-pie-chart-summary-container:not(.macrospc-container .macro-pie-chart-summary-container) { - flex: 1; - min-width: 200px; - display: flex; - flex-direction: column; - gap: 5px; - background-color: var(--background-secondary); - border-radius: 8px; - padding: 12px 16px; + flex: 1; + min-width: 200px; + display: flex; + flex-direction: column; + gap: 5px; + background-color: var(--background-secondary); + border-radius: 8px; + padding: 12px 16px; } .macro-summary-total-calories { - margin-bottom: 10px; - font-size: 1.1em; - font-weight: bold; + margin-bottom: 10px; + font-size: 1.1em; + font-weight: bold; } .macro-summary-item { - display: flex; - align-items: center; - margin-bottom: 8px; - padding: 4px 0; + display: flex; + align-items: center; + margin-bottom: 8px; + padding: 4px 0; } .macro-summary-label { - font-weight: bold; - min-width: 70px; - margin-right: 10px; + font-weight: bold; + min-width: 70px; + margin-right: 10px; } .macro-pie-progress-container { - flex: 1; - position: relative; - height: 22px; - background-color: var(--background-primary); - border-radius: 4px; - overflow: hidden; + flex: 1; + position: relative; + height: 22px; + background-color: var(--background-primary); + border-radius: 4px; + overflow: hidden; } .macro-pie-progress-bar { - position: absolute; - left: 0; - top: 0; - height: 100%; - opacity: 0.2; + position: absolute; + left: 0; + top: 0; + height: 100%; + opacity: 0.2; } .macro-pie-progress-text { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - align-items: center; - padding-left: 10px; - font-size: 0.9em; - color: var(--text-normal); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + padding-left: 10px; + font-size: 0.9em; + color: var(--text-normal); } .macrospc-label { - font-size: 0.95em; - font-weight: 500; - color: var(--text-muted); - margin-bottom: 6px; - margin-left: 8px; + font-size: 0.95em; + font-weight: 500; + color: var(--text-muted); + margin-bottom: 6px; + margin-left: 8px; } .macrospc-loading { - display: flex; - align-items: center; - justify-content: center; - padding: 20px; - color: var(--text-muted); - font-style: italic; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + color: var(--text-muted); + font-style: italic; } .macrospc-error { - color: var(--text-error); - padding: 10px; - border-left: 3px solid var(--text-error); - background: var(--background-secondary); + color: var(--text-error); + padding: 10px; + border-left: 3px solid var(--text-error); + background: var(--background-secondary); } .macrospc-legend-container { - margin-top: 10px; - padding: 8px; - border-top: 1px solid var(--background-modifier-border); + margin-top: 10px; + padding: 8px; + border-top: 1px solid var(--background-modifier-border); } .macrospc-legend-item { - display: flex; - align-items: center; - gap: 8px; + display: flex; + align-items: center; + gap: 8px; } .macrospc-legend-color-box { - width: 12px; - height: 12px; - border-radius: 2px; - display: inline-block; + width: 12px; + height: 12px; + border-radius: 2px; + display: inline-block; } .macrospc-legend-color-box[data-color] { - background-color: var(--box-color, #cccccc); + background-color: var(--box-color, #cccccc); } [data-color='#4caf50'] { - --box-color: #4caf50; + --box-color: #4caf50; } [data-color='#f44336'] { - --box-color: #f44336; + --box-color: #f44336; } [data-color='#2196f3'] { - --box-color: #2196f3; + --box-color: #2196f3; } [data-color='#ff9800'] { - --box-color: #ff9800; + --box-color: #ff9800; } /* ============================== @@ -1147,32 +1233,32 @@ * ============================== */ .meal-item-list { - list-style-type: none; - padding-left: 0; + list-style-type: none; + padding-left: 0; } .meal-item-label { - margin-right: 0.5rem; + margin-right: 0.5rem; } .remove-meal-item-button, .remove-meal-button { - margin-left: 0.5rem; + margin-left: 0.5rem; } .macros-list { - list-style-type: none; - padding-left: 0; + list-style-type: none; + padding-left: 0; } .macros-list-item { - display: flex; - align-items: center; - margin-bottom: var(--size-4-1); + display: flex; + align-items: center; + margin-bottom: var(--size-4-1); } .macros-list-item-label { - margin-right: var(--size-4-2); + margin-right: var(--size-4-2); } /* ============================== @@ -1182,136 +1268,136 @@ .edit-meal-row, .add-food-row, .add-to-macros-row { - display: flex; - align-items: center; - gap: 0.5rem; - margin-bottom: 1rem; + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 1rem; } .finish-meal-edit-button, .confirm-changes-button { - margin-top: 0.5rem; + margin-top: 0.5rem; } .macros-settings-section { - margin-bottom: 2rem; + margin-bottom: 2rem; } .setting-item { - border-top: 1px solid var(--background-modifier-border); - padding: 12px 0; + border-top: 1px solid var(--background-modifier-border); + padding: 12px 0; } .setting-item:first-of-type { - border-top: none; + border-top: none; } .NutritionalSettingTab h3 { - margin-top: 1.5rem; - margin-bottom: 0.8rem; - padding-bottom: 0.3rem; - border-bottom: 1px solid var(--background-modifier-border); - color: var(--text-accent); + margin-top: 1.5rem; + margin-bottom: 0.8rem; + padding-bottom: 0.3rem; + border-bottom: 1px solid var(--background-modifier-border); + color: var(--text-accent); } .setting-item-description { - color: var(--text-muted); - margin-bottom: 1rem; - font-style: italic; + color: var(--text-muted); + margin-bottom: 1rem; + font-style: italic; } .macrospc-color-picker { - width: 32px; - height: 32px; - border: none; - border-radius: 4px; - cursor: pointer; - margin-left: 10px; - vertical-align: middle; - padding: 0; - background-color: transparent; + width: 32px; + height: 32px; + border: none; + border-radius: 4px; + cursor: pointer; + margin-left: 10px; + vertical-align: middle; + padding: 0; + background-color: transparent; } .macrospc-preview-container { - background-color: var(--background-secondary); - border-radius: 8px; - padding: 1rem; - margin: 1rem 0; - display: flex; - flex-direction: column; - align-items: center; + background-color: var(--background-secondary); + border-radius: 8px; + padding: 1rem; + margin: 1rem 0; + display: flex; + flex-direction: column; + align-items: center; } .macrospc-preview-container canvas { - width: 300px !important; - height: 300px !important; - max-width: 100%; - display: block; + width: 300px !important; + height: 300px !important; + max-width: 100%; + display: block; } .macrospc-preview-container h4 { - margin-top: 0; - margin-bottom: 0.8rem; + margin-top: 0; + margin-bottom: 0.8rem; } .macrospc-api-notice { - background-color: var(--background-secondary); - border-left: 4px solid var(--text-accent); - padding: 10px 15px; - margin: 1rem 0; - border-radius: 4px; + background-color: var(--background-secondary); + border-left: 4px solid var(--text-accent); + padding: 10px 15px; + margin: 1rem 0; + border-radius: 4px; } .macrospc-api-notice p { - margin: 0.5rem 0; + margin: 0.5rem 0; } .macrospc-api-notice a { - color: var(--text-accent); - text-decoration: none; + color: var(--text-accent); + text-decoration: none; } .macrospc-api-notice a:hover { - text-decoration: underline; + text-decoration: underline; } .note-text { - font-style: italic; - opacity: 0.8; + font-style: italic; + opacity: 0.8; } .meal-templates-container { - margin-top: 0.5rem; + margin-top: 0.5rem; } .no-templates-message { - color: var(--text-muted); - font-style: italic; - padding: 0.8rem; - text-align: center; - background-color: var(--background-secondary); - border-radius: 4px; - margin: 1rem 0; + color: var(--text-muted); + font-style: italic; + padding: 0.8rem; + text-align: center; + background-color: var(--background-secondary); + border-radius: 4px; + margin: 1rem 0; } .api-credentials-warning { - color: var(--text-error); - font-weight: var(--font-weight-medium); - background-color: var(--background-modifier-error-hover); - border: 1px solid var(--background-modifier-error); - border-radius: var(--radius-s); - padding: var(--size-4-2); - margin: var(--size-4-2) 0; + color: var(--text-error); + font-weight: var(--font-weight-medium); + background-color: var(--background-modifier-error-hover); + border: 1px solid var(--background-modifier-error); + border-radius: var(--radius-s); + padding: var(--size-4-2); + margin: var(--size-4-2) 0; } .api-credentials-success { - color: var(--text-success); - font-weight: var(--font-weight-medium); - background-color: var(--background-modifier-success-hover); - border: 1px solid var(--background-modifier-success); - border-radius: var(--radius-s); - padding: var(--size-4-2); - margin: var(--size-4-2) 0; + color: var(--text-success); + font-weight: var(--font-weight-medium); + background-color: var(--background-modifier-success-hover); + border: 1px solid var(--background-modifier-success); + border-radius: var(--radius-s); + padding: var(--size-4-2); + margin: var(--size-4-2) 0; } /* ============================== @@ -1319,62 +1405,62 @@ * ============================== */ .macro-dashboard { - margin-top: 1rem; - margin-bottom: 20px; - border: 1px solid var(--background-modifier-border); - border-radius: 6px; - overflow: hidden; - background-color: var(--background-primary); + margin-top: 1rem; + margin-bottom: 20px; + border: 1px solid var(--background-modifier-border); + border-radius: 6px; + overflow: hidden; + background-color: var(--background-primary); } .macro-dashboard-header { - background-color: var(--background-secondary-alt); - padding: 6px 10px; - font-weight: 700; - font-size: 1.1rem; - border-bottom: none; - color: var(--text-normal); + background-color: var(--background-secondary-alt); + padding: 6px 10px; + font-weight: 700; + font-size: 1.1rem; + border-bottom: none; + color: var(--text-normal); } .macro-dashboard-content { - display: flex; - flex-wrap: wrap; - padding: 10px; - gap: 12px; + display: flex; + flex-wrap: wrap; + padding: 10px; + gap: 12px; } .macro-metric-card { - flex: 1; - min-width: 100px; - padding: 10px; - border-radius: 5px; - background-color: var(--background-secondary); - display: flex; - flex-direction: column; - gap: 5px; + flex: 1; + min-width: 100px; + padding: 10px; + border-radius: 5px; + background-color: var(--background-secondary); + display: flex; + flex-direction: column; + gap: 5px; } .macro-metric-label { - font-size: 0.85rem; - color: var(--text-muted); - font-weight: 500; + font-size: 0.85rem; + color: var(--text-muted); + font-weight: 500; } .macro-metric-value-container { - display: flex; - justify-content: space-between; - align-items: baseline; + display: flex; + justify-content: space-between; + align-items: baseline; } .macro-metric-value { - font-size: 1.1rem; - font-weight: 600; - color: var(--text-normal); + font-size: 1.1rem; + font-weight: 600; + color: var(--text-normal); } .macro-metric-percentage { - font-size: 0.85rem; - color: var(--text-muted); + font-size: 0.85rem; + color: var(--text-muted); } /* ============================== @@ -1382,34 +1468,36 @@ * ============================== */ .collapsible { - cursor: pointer; - position: relative; - transition: background-color 0.2s ease; + cursor: pointer; + position: relative; + transition: background-color 0.2s ease; } .macros-hidden { - display: none; + display: none; } .macros-collapsed { - display: none; + display: none; } .meal-header .collapsible:hover, .combined-totals-header:hover { - background-color: var(--background-modifier-hover); + background-color: var(--background-modifier-hover); } .collapsible-content { - transition: max-height 0.3s ease, opacity 0.3s ease; - overflow: hidden; - opacity: 1; - max-height: 1000px; + transition: + max-height 0.3s ease, + opacity 0.3s ease; + overflow: hidden; + opacity: 1; + max-height: 1000px; } .collapsed + .collapsible-content { - opacity: 0; - max-height: 0; + opacity: 0; + max-height: 0; } /* ============================== @@ -1417,118 +1505,118 @@ * ============================== */ .live-food-search-modal { - max-width: 550px; - width: 100%; + max-width: 550px; + width: 100%; } .search-container { - margin-bottom: 1rem; + margin-bottom: 1rem; } .live-search-input { - width: 100%; - padding: 0.75rem; - font-size: 1rem; - border: 1px solid var(--background-modifier-border); - border-radius: 6px; - background-color: var(--background-primary); - color: var(--text-normal); - transition: - border-color 0.2s ease, - box-shadow 0.2s ease; + width: 100%; + padding: 0.75rem; + font-size: 1rem; + border: 1px solid var(--background-modifier-border); + border-radius: 6px; + background-color: var(--background-primary); + color: var(--text-normal); + transition: + border-color 0.2s ease, + box-shadow 0.2s ease; } .live-search-input:focus { - outline: none; - border-color: var(--interactive-accent); - box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.25); + outline: none; + border-color: var(--interactive-accent); + box-shadow: 0 0 0 2px rgba(var(--interactive-accent-rgb), 0.25); } .loading-indicator, .no-results-message { - color: var(--text-muted); - font-style: italic; - text-align: center; - margin-bottom: 0.5rem; + color: var(--text-muted); + font-style: italic; + text-align: center; + margin-bottom: 0.5rem; } .loading-indicator { - padding: 0.5rem; + padding: 0.5rem; } .no-results-message { - padding: 1.5rem; - border: 1px dashed var(--background-modifier-border); - border-radius: 6px; + padding: 1.5rem; + border: 1px dashed var(--background-modifier-border); + border-radius: 6px; } .results-container { - max-height: 500px; - overflow-y: auto; - margin-bottom: 1rem; - border-radius: 6px; - border: 1px solid var(--background-modifier-border); - background-color: var(--background-primary); - scrollbar-width: thin; - scrollbar-color: var(--background-modifier-border) transparent; + max-height: 500px; + overflow-y: auto; + margin-bottom: 1rem; + border-radius: 6px; + border: 1px solid var(--background-modifier-border); + background-color: var(--background-primary); + scrollbar-width: thin; + scrollbar-color: var(--background-modifier-border) transparent; } .results-container:empty { - border: none; + border: none; } .results-container::-webkit-scrollbar { - width: 6px; + width: 6px; } .results-container::-webkit-scrollbar-track { - background: transparent; + background: transparent; } .results-container::-webkit-scrollbar-thumb { - background-color: var(--background-modifier-border); - border-radius: 6px; + background-color: var(--background-modifier-border); + border-radius: 6px; } .food-result-item { - padding: 0.8rem 1rem; - margin: 0; - border-bottom: 1px solid var(--background-modifier-border); - background-color: var(--background-primary); - color: var(--text-normal); - font-size: 0.95rem; - line-height: 1.5; - cursor: pointer; - white-space: normal; - overflow-wrap: break-word; - word-break: break-word; - transition: background-color 0.15s ease; + padding: 0.8rem 1rem; + margin: 0; + border-bottom: 1px solid var(--background-modifier-border); + background-color: var(--background-primary); + color: var(--text-normal); + font-size: 0.95rem; + line-height: 1.5; + cursor: pointer; + white-space: normal; + overflow-wrap: break-word; + word-break: break-word; + transition: background-color 0.15s ease; } .food-result-item:last-child { - border-bottom: none; + border-bottom: none; } .food-result-item:hover { - background-color: var(--background-modifier-hover); + background-color: var(--background-modifier-hover); } .food-result-item strong { - color: var(--text-accent); - font-weight: 600; + color: var(--text-accent); + font-weight: 600; } .highlighted-result { - background-color: var(--interactive-accent); - color: var(--text-on-accent); + background-color: var(--interactive-accent); + color: var(--text-on-accent); } .highlighted-result strong { - color: var(--text-on-accent); + color: var(--text-on-accent); } .food-nav { - margin-top: var(--size-4-4); + margin-top: var(--size-4-4); } /* ============================== @@ -1536,226 +1624,230 @@ * ============================== */ .macroscalc-container { - margin-bottom: 1rem; - border-radius: 6px; - overflow: hidden; - transition: opacity 0.3s ease, max-height 0.3s ease; + margin-bottom: 1rem; + border-radius: 6px; + overflow: hidden; + transition: + opacity 0.3s ease, + max-height 0.3s ease; } .macroscalc-header-container { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } .macroscalc-dashboard-header { - display: flex; - justify-content: space-between; - cursor: pointer; - padding: 8px 12px; - background-color: var(--background-secondary-alt); - border-radius: 4px; - border: 1px solid var(--background-modifier-border); - margin-bottom: 10px; - transition: background-color 0.2s ease; - user-select: none; + display: flex; + justify-content: space-between; + cursor: pointer; + padding: 8px 12px; + background-color: var(--background-secondary-alt); + border-radius: 4px; + border: 1px solid var(--background-modifier-border); + margin-bottom: 10px; + transition: background-color 0.2s ease; + user-select: none; } .macroscalc-dashboard-header:hover { - background-color: var(--background-modifier-hover); + background-color: var(--background-modifier-hover); } .macroscalc-header-content { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; } .macroscalc-header-title { - font-weight: 600; + font-weight: 600; } .macroscalc-dashboard-content { - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - margin-top: 10px; - opacity: 1; - max-height: 1000px; - overflow: visible; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + margin-top: 10px; + opacity: 1; + max-height: 1000px; + overflow: visible; } .macroscalc-dashboard-content.collapsed { - opacity: 0; - max-height: 0; - overflow: hidden; - margin: 0; - padding: 0; - border: none; + opacity: 0; + max-height: 0; + overflow: hidden; + margin: 0; + padding: 0; + border: none; } .macroscalc-hidden { - opacity: 0 !important; - max-height: 0 !important; - margin: 0 !important; - padding: 0 !important; - overflow: hidden !important; - border: none !important; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; + opacity: 0 !important; + max-height: 0 !important; + margin: 0 !important; + padding: 0 !important; + overflow: hidden !important; + border: none !important; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .macroscalc-sort-icon { - margin-left: 4px; - font-size: 0.8rem; - opacity: 0.6; - cursor: pointer; + margin-left: 4px; + font-size: 0.8rem; + opacity: 0.6; + cursor: pointer; } .macroscalc-sort-icon:hover { - opacity: 1; + opacity: 1; } .macroscalc-sort-icon.active { - opacity: 1; + opacity: 1; } .macroscalc-id-cell { - display: flex; - align-items: center; - padding-left: 4px; + display: flex; + align-items: center; + padding-left: 4px; } .macroscalc-id-text { - margin-left: 4px; + margin-left: 4px; } .macroscalc-id-cell-container { - text-align: center; - padding-left: 12px; - padding-right: 12px; + text-align: center; + padding-left: 12px; + padding-right: 12px; } .macroscalc-id-cell-container .macroscalc-expand-toggle { - display: inline-block; - width: 16px; - height: 16px; - margin-right: 4px; - margin-left: 0; - text-align: center; - vertical-align: middle; + display: inline-block; + width: 16px; + height: 16px; + margin-right: 4px; + margin-left: 0; + text-align: center; + vertical-align: middle; } .macroscalc-id-cell-container .macroscalc-id-text { - display: inline-block; - vertical-align: middle; - margin-left: 0; + display: inline-block; + vertical-align: middle; + margin-left: 0; } .macroscalc-detail-row td { - padding: 10px 20px; - background-color: var(--background-primary-alt); + padding: 10px 20px; + background-color: var(--background-primary-alt); } .macroscalc-details-table { - width: 100%; - border-collapse: collapse; + width: 100%; + border-collapse: collapse; } .macroscalc-details-table th { - padding: 4px 8px; - text-align: left; + padding: 4px 8px; + text-align: left; } .macroscalc-chart-section { - transition: all 0.3s ease; + transition: all 0.3s ease; } .macroscalc-chart-container { - margin-top: 1rem; - padding: 1rem; - background-color: var(--background-primary-alt); - border-radius: 6px; - transition: opacity 0.3s ease, max-height 0.3s ease; + margin-top: 1rem; + padding: 1rem; + background-color: var(--background-primary-alt); + border-radius: 6px; + transition: + opacity 0.3s ease, + max-height 0.3s ease; } .macroscalc-chart-header { - margin-top: 0; - margin-bottom: 1rem; + margin-top: 0; + margin-bottom: 1rem; } .macroscalc-chart-wrapper { - position: relative; - height: 350px; - width: 100%; + position: relative; + height: 350px; + width: 100%; } .macroscalc-line-chart { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .macroscalc-chart-error { - padding: 1rem; - background: var(--background-modifier-error); - border-radius: 4px; - margin: 1rem 0; + padding: 1rem; + background: var(--background-modifier-error); + border-radius: 4px; + margin: 1rem 0; } .error-message { - color: var(--text-error); - font-weight: 500; - margin: 0; + color: var(--text-error); + font-weight: 500; + margin: 0; } .macroscalc-chart-info { - text-align: center; - color: var(--text-muted); - font-style: italic; - padding: 2rem; + text-align: center; + color: var(--text-muted); + font-style: italic; + padding: 2rem; } .macroscalc-metric-card.protein-card { - border-left: 4px solid var(--protein-color, #4caf50); - padding-left: 12px; + border-left: 4px solid var(--protein-color, #4caf50); + padding-left: 12px; } .macroscalc-metric-card.fat-card { - border-left: 4px solid var(--fat-color, #f44336); - padding-left: 12px; + border-left: 4px solid var(--fat-color, #f44336); + padding-left: 12px; } .macroscalc-metric-card.carbs-card { - border-left: 4px solid var(--carbs-color, #2196f3); - padding-left: 12px; + border-left: 4px solid var(--carbs-color, #2196f3); + padding-left: 12px; } .macroscalc-metric-card.calories-card { - border-left: 4px solid var(--calories-color, #e8962b); - padding-left: 12px; + border-left: 4px solid var(--calories-color, #e8962b); + padding-left: 12px; } .macroscalc-protein-value { - color: var(--protein-color, #4caf50); + color: var(--protein-color, #4caf50); } .macroscalc-fat-value { - color: var(--fat-color, #f44336); + color: var(--fat-color, #f44336); } .macroscalc-carbs-value { - color: var(--carbs-color, #2196f3); + color: var(--carbs-color, #2196f3); } .macroscalc-meal-header { - font-weight: bold; - background-color: var(--background-secondary-alt); + font-weight: bold; + background-color: var(--background-secondary-alt); } .macroscalc-alt-row { - background-color: var(--background-secondary); + background-color: var(--background-secondary); } .macroscalc-high-value { - font-weight: bold; + font-weight: bold; } /* ============================== @@ -1767,37 +1859,37 @@ .macroscalc-toggle-button, .macroscalc-expand-toggle, .macrospc-container .macroscalc-toggle-button { - width: 20px !important; - height: 20px !important; - min-width: 20px !important; - min-height: 20px !important; - display: flex !important; - align-items: center !important; - justify-content: center !important; - font-size: 14px !important; - line-height: 14px !important; - text-align: center !important; - transition: transform 0.2s ease !important; - opacity: 0.8 !important; - flex-shrink: 0 !important; + width: 20px !important; + height: 20px !important; + min-width: 20px !important; + min-height: 20px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + font-size: 14px !important; + line-height: 14px !important; + text-align: center !important; + transition: transform 0.2s ease !important; + opacity: 0.8 !important; + flex-shrink: 0 !important; } .toggle-icon::after, .meal-toggle-icon, .macroscalc-toggle-button::after, .macroscalc-expand-toggle.expanded::after { - content: '▼' !important; - display: inline-block !important; - font-size: 12px !important; + content: '▼' !important; + display: inline-block !important; + font-size: 12px !important; } .collapsed .toggle-icon::after, .collapsed .meal-toggle-icon, .macroscalc-toggle-button.collapsed::after, .macroscalc-expand-toggle::after { - content: '▶' !important; - display: inline-block !important; - font-size: 12px !important; + content: '▶' !important; + display: inline-block !important; + font-size: 12px !important; } .toggle-icon:hover, @@ -1805,26 +1897,26 @@ .macroscalc-toggle-button:hover, .macroscalc-expand-toggle:hover, .macrospc-container .macroscalc-toggle-button:hover { - opacity: 1 !important; - color: var(--text-accent) !important; + opacity: 1 !important; + color: var(--text-accent) !important; } .macroscalc-id-cell .macroscalc-expand-toggle { - margin-right: 8px !important; - transform: translateY(0) !important; + margin-right: 8px !important; + transform: translateY(0) !important; } .header-content .toggle-icon { - margin-left: 8px !important; + margin-left: 8px !important; } .meal-header-content .meal-toggle-icon { - margin-left: 8px !important; + margin-left: 8px !important; } .toggle-icon.collapsed::after, .toggle-icon.collapsed.expand-all-icon::after { - content: '▶' !important; + content: '▶' !important; } /* ============================== @@ -3212,7 +3304,7 @@ .header-text-desktop { display: none; } - + .header-text-mobile { display: inline; } @@ -3220,54 +3312,54 @@ .macro-food-remove-btn { display: none !important; } - + .macros-table tr { touch-action: manipulation; min-height: 44px; } - + .macros-table tr.long-press-active { background-color: var(--interactive-accent); color: white; transform: scale(1.01); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } - + .long-press-active td { color: white !important; border-color: rgba(255, 255, 255, 0.3) !important; } - + .macro-food-name-container { gap: 12px !important; min-height: 36px !important; padding: 4px 0 !important; } - + .macro-food-name { font-size: 14px !important; line-height: 1.4 !important; font-weight: 500 !important; max-width: 100% !important; } - + .macros-table td, .macros-table th, .macros-table .column-header { padding: 6px 8px; font-size: 0.9rem; } - + .macro-percentage { font-size: 0.7rem !important; } - + .remove-item-button { width: 24px; height: 24px; font-size: 1rem; } - + .editable-quantity { padding: 4px 6px !important; font-size: 0.9rem; @@ -3282,7 +3374,7 @@ border-color: var(--interactive-accent) !important; background-color: var(--background-modifier-hover) !important; } - + .editable-quantity input { width: 60px !important; padding: 3px 6px !important; @@ -3290,12 +3382,12 @@ min-height: 24px !important; border-radius: 6px !important; } - + .macro-dashboard { margin-top: 0.5rem; margin-bottom: 15px; } - + .macro-dashboard-content { display: grid; grid-template-columns: 1fr 1fr; @@ -3305,7 +3397,7 @@ width: 100%; box-sizing: border-box; } - + .macro-metric-card { min-width: auto; width: 100%; @@ -3316,27 +3408,27 @@ justify-content: space-between; min-height: 80px; } - + .macro-metric-card .macro-metric-label { font-size: 0.9rem; margin-bottom: 6px; } - + .macro-metric-card .macro-metric-value { font-size: 1.2rem; font-weight: 600; } - + .macro-metric-card .macro-metric-percentage { font-size: 0.85rem; } - + .macro-pie-chart-container { width: 250px; height: 250px; margin-left: 8px; } - + .macro-pie-chart-summary-container { min-height: 250px; padding: 8px 12px; @@ -3353,27 +3445,27 @@ width: 14px; height: 14px; } - + .macroscalc-details-table { font-size: 0.85rem; } - + .macroscalc-details-table th, .macroscalc-details-table td { padding: 4px 6px; } - + .macroscalc-meal-header { font-size: 0.9rem; padding: 6px 8px; } - + .macroscalc-expand-toggle { width: 18px !important; height: 18px !important; font-size: 12px !important; } - + .macroscalc-id-text { font-size: 0.9rem; } @@ -3390,7 +3482,7 @@ -webkit-backdrop-filter: blur(8px) !important; transform: translateX(-50%) translateY(-4px) scale(1) !important; } - + .tooltip-visible { transform: translateX(-50%) translateY(0px) scale(1) !important; } @@ -3406,22 +3498,22 @@ .delete-confirmation-content { padding: 0 1rem; } - + .delete-confirmation-message { font-size: 1rem; max-width: 300px; } - + .delete-context-message { font-size: 0.9rem; max-width: 280px; } - + .modal-button-container { flex-direction: column-reverse; gap: 0.75rem; } - + .modal-button-container button { width: 100%; min-width: auto; @@ -3495,15 +3587,15 @@ padding: 4px 6px; font-size: 0.85rem; } - + .header-text-mobile { font-size: 0.8rem; } - + .macro-percentage { font-size: 0.65rem !important; } - + .macro-dashboard-content { display: grid; grid-template-columns: 1fr 1fr; @@ -3513,7 +3605,7 @@ width: 100%; box-sizing: border-box; } - + .macro-metric-card { min-width: auto; width: 100%; @@ -3524,100 +3616,100 @@ justify-content: space-between; min-height: 70px; } - + .macro-metric-card .macro-metric-label { font-size: 0.8rem; margin-bottom: 4px; } - + .macro-metric-card .macro-metric-value { font-size: 1.1rem; font-weight: 600; } - + .macro-metric-card .macro-metric-percentage { font-size: 0.75rem; } - + .macro-metric-card .macro-metric-progress-container { height: 6px; margin-top: 4px; } - + .macro-dashboard-flex-container { flex-direction: column; align-items: center; gap: 15px; } - + .macro-pie-chart-container { width: 200px; height: 200px; margin-left: 0; } - + .macro-pie-chart-summary-container { min-height: auto; max-width: none; width: 100%; } - + .macros-table-header { padding: 6px 8px; margin-bottom: 8px; } - + .macros-table-controls { gap: 6px; } - + .meal-header-content { flex-wrap: wrap; gap: 4px; } - + .header-calorie-summary { font-size: 0.85rem; margin-left: 6px; } - + .macroscalc-details-table { font-size: 0.8rem; } - + .macroscalc-details-table th, .macroscalc-details-table td { padding: 3px 4px; } - + .macroscalc-meal-header { font-size: 0.85rem; padding: 4px 6px; } - + .macroscalc-header-container { flex-direction: column; align-items: flex-start; gap: 2px; } - + .macroscalc-sort-icon { margin-left: 0; align-self: flex-end; } - + .macroscalc-detail-row td { padding: 4px 6px; } - + .macroscalc-chart-section { margin-top: 0.5rem; } - + .macroscalc-chart-wrapper { height: 250px; } - + .macroscalc-header-container { display: flex; flex-direction: row; @@ -3626,13 +3718,13 @@ gap: 4px; width: 100%; } - + .macroscalc-sort-icon { margin-left: 2px; align-self: center; font-size: 0.7rem; } - + .macroscalc-id-cell { display: flex; align-items: center; @@ -3641,7 +3733,7 @@ width: 100%; text-align: center; } - + .macroscalc-id-text { text-align: center; } @@ -3657,12 +3749,12 @@ .delete-warning-icon { font-size: 2.5rem; } - + .delete-confirmation-message { font-size: 0.95rem; max-width: 250px; } - + .delete-context-message { font-size: 0.85rem; max-width: 220px; @@ -3673,22 +3765,22 @@ .macros-table tr { min-height: 48px; } - + .macro-food-name-container { min-height: 40px !important; padding: 6px 0 !important; } - + .macros-table tr.long-press-active { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } - + .macros-table tr.long-press-ready { transform: scale(1.03); box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4); } - + .modal-button-container button { min-height: 48px; font-size: 1.1rem; @@ -3700,12 +3792,12 @@ * ============================== */ @keyframes long-press-pulse { - from { - background-color: var(--text-error, #e74c3c); + from { + background-color: var(--text-error, #e74c3c); transform: scale(1); } - to { - background-color: var(--text-error, #c0392b); + to { + background-color: var(--text-error, #c0392b); transform: scale(1.02); } } @@ -3726,27 +3818,27 @@ * ============================== */ body:not(.theme-obsidian) .api-credentials-warning { - color: #e74c3c; - background-color: rgba(231, 76, 60, 0.1); - border: 1px solid rgba(231, 76, 60, 0.3); + color: #e74c3c; + background-color: rgba(231, 76, 60, 0.1); + border: 1px solid rgba(231, 76, 60, 0.3); } body:not(.theme-obsidian) .api-credentials-success { - color: #27ae60; - background-color: rgba(39, 174, 96, 0.1); - border: 1px solid rgba(39, 174, 96, 0.3); + color: #27ae60; + background-color: rgba(39, 174, 96, 0.1); + border: 1px solid rgba(39, 174, 96, 0.3); } .theme-dark .api-credentials-warning { - color: #ff6b6b; - background-color: rgba(255, 107, 107, 0.15); - border: 1px solid rgba(255, 107, 107, 0.3); + color: #ff6b6b; + background-color: rgba(255, 107, 107, 0.15); + border: 1px solid rgba(255, 107, 107, 0.3); } .theme-dark .api-credentials-success { - color: #51cf66; - background-color: rgba(81, 207, 102, 0.15); - border: 1px solid rgba(81, 207, 102, 0.3); + color: #51cf66; + background-color: rgba(81, 207, 102, 0.15); + border: 1px solid rgba(81, 207, 102, 0.3); } .theme-dark .status-indicator.status-success { @@ -3850,22 +3942,22 @@ body:not(.theme-obsidian) .api-credentials-success { background-color: var(--interactive-accent) !important; border: 2px solid var(--text-normal) !important; } - + .macros-table tr.long-press-ready { background-color: #800000 !important; border: 3px solid #ffffff !important; } - + .delete-confirmation-title { color: var(--text-error, #800000) !important; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important; } - + .modal-button-container .mod-warning { background-color: #800000 !important; border: 2px solid #ffffff !important; } - + .macro-tooltip, .macro-tooltip-mobile { background-color: black !important; @@ -3883,13 +3975,13 @@ body:not(.theme-obsidian) .api-credentials-success { transition: none !important; animation: none !important; } - + .macros-table tr.long-press-active, .macros-table tr.long-press-ready, .modal-button-container button:hover { transform: none !important; } - + .macros-table tr.long-press-ready { background-color: var(--text-error, #c0392b) !important; } @@ -3903,6 +3995,29 @@ body:not(.theme-obsidian) .api-credentials-success { margin-bottom: 1rem; } +.dual-energy-inputs { + display: flex; + gap: 16px; + align-items: flex-end; + justify-content: flex-end; + flex-wrap: wrap; +} + +.energy-field .form-label, +.energy-label-bold { + font-weight: bold !important; +} + +/* Make sure all energy-related labels are bold */ +.energy-fields-container .form-label { + font-weight: bold !important; +} + +/* Also ensure dashboard metric labels are bold */ +.macro-metric-label { + font-weight: bold !important; +} + .energy-field { flex: 1; min-width: 0; /* Allows flex items to shrink below their content size */ @@ -3952,7 +4067,7 @@ body:not(.theme-obsidian) .api-credentials-success { flex-direction: column; gap: 0.75rem; } - + .energy-field { flex: none; } @@ -3963,7 +4078,7 @@ body:not(.theme-obsidian) .api-credentials-success { .energy-field .form-input { border-width: 2px; } - + .energy-info { border-left-width: 4px; } @@ -4021,12 +4136,12 @@ body:not(.theme-obsidian) .api-credentials-success { flex-direction: column; gap: 8px; } - + .energy-input-group { width: 100%; } - + .energy-input { width: 100%; } -} \ No newline at end of file +}