feat: add meal planner - wip
This commit is contained in:
+283
@@ -0,0 +1,283 @@
|
||||
/* Meal Planner Page Styles */
|
||||
|
||||
/* Template Management */
|
||||
.template-management {
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background: var(--card-bg, #1e1e1e);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.template-selector-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.template-selector-container label {
|
||||
font-weight: 500;
|
||||
color: var(--text-color, #ffffff);
|
||||
}
|
||||
|
||||
.template-selector {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 10px;
|
||||
background: var(--input-bg, #2a2a2a);
|
||||
color: var(--text-color, #ffffff);
|
||||
border: 1px solid var(--border-color, #3a3a3a);
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.template-btn {
|
||||
padding: 10px 20px;
|
||||
background: var(--primary-color, #4CAF50);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.template-btn:hover {
|
||||
background: var(--primary-hover, #45a049);
|
||||
}
|
||||
|
||||
.template-btn.delete-btn {
|
||||
background: #f44336;
|
||||
}
|
||||
|
||||
.template-btn.delete-btn:hover {
|
||||
background: #da190b;
|
||||
}
|
||||
|
||||
/* Plan Progress Container */
|
||||
.plan-progress-container {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* Nutrition Progress Bars */
|
||||
.nutrition-progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: var(--progress-bg, #2a2a2a);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.nutrition-progress-fill {
|
||||
height: 100%;
|
||||
background: #4CAF50;
|
||||
transition: width 0.3s ease, background-color 0.3s ease;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Meals Container */
|
||||
.meals-container {
|
||||
margin: 30px 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Meal Section */
|
||||
.meal-section {
|
||||
background: var(--card-bg, #1e1e1e);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--border-color, #3a3a3a);
|
||||
}
|
||||
|
||||
.meal-section-title {
|
||||
margin: 0 0 15px 0;
|
||||
color: var(--text-color, #ffffff);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.add-meal-item-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: var(--primary-color, #4CAF50);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.add-meal-item-btn:hover {
|
||||
background: var(--primary-hover, #45a049);
|
||||
}
|
||||
|
||||
.meal-items-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.no-items-message {
|
||||
text-align: center;
|
||||
color: var(--text-secondary, #888);
|
||||
padding: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Planned Item Cards */
|
||||
.planned-item-card {
|
||||
background: var(--input-bg, #2a2a2a);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border-color, #3a3a3a);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.planned-item-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.planned-item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.planned-item-name {
|
||||
font-weight: 500;
|
||||
color: var(--text-color, #ffffff);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.planned-item-grams {
|
||||
color: var(--text-secondary, #888);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.planned-item-nutrition {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary, #888);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.delete-planned-item-btn {
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
background: #f44336;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.delete-planned-item-btn:hover {
|
||||
background: #da190b;
|
||||
}
|
||||
|
||||
/* Add Food to Plan Section */
|
||||
.add-food-to-plan-section {
|
||||
margin: 30px 0;
|
||||
padding: 20px;
|
||||
background: var(--card-bg, #1e1e1e);
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--primary-color, #4CAF50);
|
||||
}
|
||||
|
||||
/* Quick Add Section in Food Log */
|
||||
.quick-add-section {
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background: var(--card-bg, #1e1e1e);
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border-color, #3a3a3a);
|
||||
}
|
||||
|
||||
.quick-add-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.quick-add-meal-header {
|
||||
grid-column: 1 / -1;
|
||||
margin: 10px 0 5px 0;
|
||||
color: var(--text-color, #ffffff);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.quick-add-btn {
|
||||
padding: 12px;
|
||||
background: var(--input-bg, #2a2a2a);
|
||||
border: 1px solid var(--border-color, #3a3a3a);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.quick-add-btn:hover {
|
||||
background: var(--primary-color, #4CAF50);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.quick-add-name {
|
||||
font-weight: 500;
|
||||
color: var(--text-color, #ffffff);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.quick-add-details {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary, #888);
|
||||
}
|
||||
|
||||
.quick-add-btn:hover .quick-add-name,
|
||||
.quick-add-btn:hover .quick-add-details {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Mobile Responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.template-selector-container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.template-selector {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.meals-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quick-add-items {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.planned-item-nutrition {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.quick-add-btn {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user