diff --git a/iframe.html b/iframe.html index 2e6f20f..624e892 100644 --- a/iframe.html +++ b/iframe.html @@ -447,14 +447,117 @@ } } + /* Feeding Configuration Styles */ + .dog-calculator-container .dog-calculator-feeding-config { + margin-top: 20px; + padding: 16px; + background: var(--bg-tertiary); + border: 1px solid var(--border-color); + border-radius: 8px; + } + + .dog-calculator-container .dog-calculator-frequency-row { + display: flex; + align-items: center; + gap: 16px; + flex-wrap: wrap; + } + + .dog-calculator-container .dog-calculator-frequency-row > label { + font-weight: 500; + color: var(--text-label); + margin: 0; + } + + .dog-calculator-container .dog-calculator-radio-group { + display: flex; + gap: 20px; + align-items: center; + } + + .dog-calculator-container .dog-calculator-radio-group label { + display: flex; + align-items: center; + gap: 6px; + cursor: pointer; + color: var(--text-primary); + font-size: 0.95rem; + } + + .dog-calculator-container .dog-calculator-radio-group input[type="radio"] { + cursor: pointer; + margin: 0; + } + + .dog-calculator-container .dog-calculator-radio-group input[type="radio"]:checked + span { + font-weight: 600; + color: var(--accent-color); + } + + .dog-calculator-container .dog-calculator-meal-input { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + margin-left: auto; + } + + .dog-calculator-container .dog-calculator-meal-input span { + color: var(--text-secondary); + font-size: 0.95rem; + } + + .dog-calculator-container .dog-calculator-meal-input input[type="number"] { + width: 50px; + padding: 4px 8px; + border: 1px solid var(--border-color); + border-radius: 4px; + font-size: 0.95rem; + color: var(--text-primary); + background: var(--bg-secondary); + text-align: center; + } + + .dog-calculator-container .dog-calculator-meal-input input[type="number"]:focus { + outline: none; + border-color: var(--accent-color); + box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.1); + } + + /* Update meal note styling */ + .dog-calculator-container #mealNote { + color: var(--text-secondary); + font-size: 0.9rem; + font-weight: normal; + margin-left: 4px; + } + + /* Mobile responsive adjustments for feeding config */ + @media (max-width: 480px) { + .dog-calculator-meal-input { + margin-left: 0; + width: 100%; + margin-top: 8px; + } + + .dog-calculator-frequency-row { + flex-direction: column; + align-items: flex-start; + } + } + /* Dark theme - manual override */ .dog-calculator-container.theme-dark { --bg-primary: #24202d; --bg-secondary: #312b3b; + --bg-tertiary: #1f1b26; --border-color: #433c4f; --text-primary: #f5f3f7; --text-secondary: #b8b0c2; + --text-label: #9f94ae; + --success-color: #7fa464; + --error-color: #e87159; color: var(--text-primary); } @@ -599,14 +702,55 @@ color: var(--success-color); } + /* Dark theme feeding configuration styles */ + .dog-calculator-container.theme-dark .dog-calculator-feeding-config { + background: var(--bg-tertiary); + border-color: var(--border-color); + } + + .dog-calculator-container.theme-dark .dog-calculator-frequency-row > label { + color: var(--text-label); + } + + .dog-calculator-container.theme-dark .dog-calculator-radio-group label { + color: var(--text-primary); + } + + .dog-calculator-container.theme-dark .dog-calculator-radio-group input[type="radio"]:checked + span { + color: #f19a5f; + } + + .dog-calculator-container.theme-dark .dog-calculator-meal-input span { + color: var(--text-secondary); + } + + .dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"] { + background: var(--bg-secondary); + border-color: var(--border-color); + color: var(--text-primary); + } + + .dog-calculator-container.theme-dark .dog-calculator-meal-input input[type="number"]:focus { + border-color: #f19a5f; + box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15); + } + + .dog-calculator-container.theme-dark #mealNote { + color: var(--text-secondary); + } + /* System theme - follows user's OS preference */ @media (prefers-color-scheme: dark) { .dog-calculator-container.theme-system { --bg-primary: #24202d; --bg-secondary: #312b3b; + --bg-tertiary: #1f1b26; --border-color: #433c4f; --text-primary: #f5f3f7; --text-secondary: #b8b0c2; + --text-label: #9f94ae; + --success-color: #7fa464; + --error-color: #e87159; color: var(--text-primary); } @@ -750,6 +894,43 @@ border-color: var(--success-color); color: var(--success-color); } + + /* System theme feeding configuration styles in dark mode */ + .dog-calculator-container.theme-system .dog-calculator-feeding-config { + background: var(--bg-tertiary); + border-color: var(--border-color); + } + + .dog-calculator-container.theme-system .dog-calculator-frequency-row > label { + color: var(--text-label); + } + + .dog-calculator-container.theme-system .dog-calculator-radio-group label { + color: var(--text-primary); + } + + .dog-calculator-container.theme-system .dog-calculator-radio-group input[type="radio"]:checked + span { + color: #f19a5f; + } + + .dog-calculator-container.theme-system .dog-calculator-meal-input span { + color: var(--text-secondary); + } + + .dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"] { + background: var(--bg-secondary); + border-color: var(--border-color); + color: var(--text-primary); + } + + .dog-calculator-container.theme-system .dog-calculator-meal-input input[type="number"]:focus { + border-color: #f19a5f; + box-shadow: 0 0 0 2px rgba(241, 154, 95, 0.15); + } + + .dog-calculator-container.theme-system #mealNote { + color: var(--text-secondary); + } } /* Modal Styles */ @@ -1901,6 +2082,28 @@ Add another food source + + +