feat: bring urgency sync, background auto-sync, recipe mealplan chip, screensaver fix
This commit is contained in:
dadaloop82
@@ -2970,6 +2970,155 @@ body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* ===== WEEKLY MEAL PLAN ===== */
|
||||
.mplan-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.mplan-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 0 4px 2px;
|
||||
padding-left: 44px;
|
||||
}
|
||||
.mplan-col-header {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.mplan-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 5px 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg);
|
||||
}
|
||||
.mplan-row-today {
|
||||
background: rgba(45,80,22,0.08);
|
||||
outline: 2px solid var(--primary-light);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.mplan-day-name {
|
||||
width: 36px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.mplan-badge {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 7px 6px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.mplan-badge:active { transform: scale(0.93); }
|
||||
.mplan-badge-pranzo { background: var(--primary-light); }
|
||||
.mplan-badge-cena { background: #1e3a6e; }
|
||||
|
||||
/* Meal plan picker popup */
|
||||
.mplan-picker {
|
||||
position: fixed;
|
||||
z-index: 600;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-lg);
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
left: 50% !important;
|
||||
transform: translateX(-50%);
|
||||
width: min(320px, 92vw);
|
||||
}
|
||||
.mplan-pick-btn {
|
||||
background: var(--bg);
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 7px 12px;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.mplan-pick-btn.active {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.mplan-pick-btn:active { opacity: 0.7; }
|
||||
|
||||
/* Legend in settings */
|
||||
.mplan-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Recipe dialog banner (top strip) */
|
||||
.recipe-mealplan-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
padding: 11px 20px;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
border-radius: var(--radius) var(--radius) 0 0;
|
||||
margin: -20px -20px 16px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
/* Recipe dialog hint */
|
||||
.recipe-mealplan-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(45,80,22,0.07);
|
||||
border: 1px solid rgba(45,80,22,0.18);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 12px;
|
||||
margin: 4px 0 12px;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
.mplan-hint-badge {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 3px 10px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mplan-hint-label {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.80rem;
|
||||
}
|
||||
|
||||
/* ===== COOKING MODE ===== */
|
||||
.cooking-overlay {
|
||||
position: fixed;
|
||||
@@ -3191,6 +3340,29 @@ body {
|
||||
to { opacity: 0.5; transform: scale(1.06); }
|
||||
}
|
||||
|
||||
/* ===== COOKING SCREEN FLASH ===== */
|
||||
.cooking-flash-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 50;
|
||||
background: transparent;
|
||||
}
|
||||
.cooking-flash-overlay.flash-warning {
|
||||
animation: cookFlashOrange 1.1s ease-in-out infinite;
|
||||
}
|
||||
.cooking-flash-overlay.flash-done {
|
||||
animation: cookFlashRed 0.65s ease-in-out infinite;
|
||||
}
|
||||
@keyframes cookFlashOrange {
|
||||
0%, 100% { background: transparent; }
|
||||
50% { background: rgba(249, 115, 22, 0.28); }
|
||||
}
|
||||
@keyframes cookFlashRed {
|
||||
0%, 100% { background: transparent; }
|
||||
50% { background: rgba(220, 38, 38, 0.42); }
|
||||
}
|
||||
|
||||
.ctimer-btns {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
@@ -3664,6 +3836,23 @@ body {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
/* Meal-plan chip: visually highlighted to stand out as the planned food type */
|
||||
.recipe-opt-mealplan-chip {
|
||||
grid-column: 1 / -1;
|
||||
background: rgba(100, 60, 20, 0.07);
|
||||
border-color: #b07830;
|
||||
font-weight: 600;
|
||||
}
|
||||
.recipe-opt-mealplan-chip:has(input:checked) {
|
||||
background: rgba(120, 70, 10, 0.13);
|
||||
border-color: #c08020;
|
||||
}
|
||||
.recipe-opt-mealplan-chip:has(input:not(:checked)) {
|
||||
opacity: 0.6;
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: #c08020;
|
||||
}
|
||||
|
||||
.recipe-option-chip input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
@@ -4628,6 +4817,24 @@ body {
|
||||
.screensaver-fact.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
.screensaver-mealplan {
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
margin: -8px 0 4px;
|
||||
}
|
||||
.screensaver-mealplan-badge {
|
||||
display: inline-block;
|
||||
background: rgba(255,255,255,0.10);
|
||||
color: rgba(255,255,255,0.70);
|
||||
border: 1px solid rgba(255,255,255,0.18);
|
||||
border-radius: 28px;
|
||||
padding: 8px 24px;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.4px;
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
.screensaver-shortcuts {
|
||||
position: absolute;
|
||||
bottom: max(32px, env(safe-area-inset-bottom, 32px));
|
||||
|
||||
Reference in New Issue
Block a user