|
|
@@ -1148,3 +1148,289 @@ textarea::placeholder {
|
|
|
70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
|
|
|
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
|
|
|
}
|
|
|
+
|
|
|
+/* =============================================
|
|
|
+ Sprint 8: Saved Meals & Dashboard UI
|
|
|
+ ============================================= */
|
|
|
+
|
|
|
+.secondary-btn-sm {
|
|
|
+ background: rgba(255, 255, 255, 0.05);
|
|
|
+ color: var(--text-main);
|
|
|
+ border: 1px solid var(--border-color);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 8px 12px;
|
|
|
+ font-size: 0.85rem;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.secondary-btn-sm:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border-color: var(--text-muted);
|
|
|
+}
|
|
|
+
|
|
|
+.modal {
|
|
|
+ position: fixed;
|
|
|
+ top: 0; left: 0; width: 100%; height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.75);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ -webkit-backdrop-filter: blur(10px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 2000;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-content {
|
|
|
+ background: #161b22;
|
|
|
+ border: 1px solid var(--border-color);
|
|
|
+ border-radius: 20px;
|
|
|
+ width: 90%;
|
|
|
+ max-width: 420px;
|
|
|
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
|
|
|
+ animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes modalSlideUp {
|
|
|
+ from { transform: translateY(30px); opacity: 0; }
|
|
|
+ to { transform: translateY(0); opacity: 1; }
|
|
|
+}
|
|
|
+
|
|
|
+.modal-header {
|
|
|
+ padding: 20px 24px;
|
|
|
+ border-bottom: 1px solid var(--border-color);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background: rgba(255, 255, 255, 0.02);
|
|
|
+}
|
|
|
+
|
|
|
+.modal-header h3 {
|
|
|
+ font-size: 1.15rem;
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 0;
|
|
|
+ color: #f0f6fc;
|
|
|
+}
|
|
|
+
|
|
|
+.close-btn {
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-size: 1.8rem;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 0;
|
|
|
+ transition: color 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.close-btn:hover {
|
|
|
+ color: #ef4444;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-body {
|
|
|
+ padding: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-body p {
|
|
|
+ font-size: 0.95rem;
|
|
|
+ color: var(--text-muted);
|
|
|
+ line-height: 1.5;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-footer {
|
|
|
+ padding: 20px 24px;
|
|
|
+ border-top: 1px solid var(--border-color);
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ justify-content: flex-end;
|
|
|
+ background: rgba(255, 255, 255, 0.02);
|
|
|
+}
|
|
|
+
|
|
|
+.secondary-btn {
|
|
|
+ background: transparent;
|
|
|
+ border: 1px solid var(--border-color);
|
|
|
+ color: var(--text-main);
|
|
|
+ padding: 10px 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 0.95rem;
|
|
|
+ font-weight: 500;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.2s;
|
|
|
+}
|
|
|
+
|
|
|
+.secondary-btn:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.05);
|
|
|
+ border-color: var(--text-muted);
|
|
|
+}
|
|
|
+
|
|
|
+/* --- Dashboard Overlay --- */
|
|
|
+.dashboard-overlay {
|
|
|
+ position: absolute;
|
|
|
+ top: 0; left: 0; right: 0; bottom: 0;
|
|
|
+ background: rgba(13, 17, 23, 0.95);
|
|
|
+ backdrop-filter: blur(20px);
|
|
|
+ -webkit-backdrop-filter: blur(20px);
|
|
|
+ z-index: 50;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ animation: fadeIn 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.dashboard-content {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.dashboard-header {
|
|
|
+ padding: 24px;
|
|
|
+ border-bottom: 1px solid var(--border-color);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.dashboard-title-group {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.dashboard-title-group h2 {
|
|
|
+ font-size: 1.25rem;
|
|
|
+ color: #f0f6fc;
|
|
|
+}
|
|
|
+
|
|
|
+.dashboard-body {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.dashboard-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-meal-msg {
|
|
|
+ grid-column: 1 / -1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 60px 20px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-size: 1.1rem;
|
|
|
+ border: 2px dashed var(--border-color);
|
|
|
+ border-radius: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+/* --- Meal Cards (#59) --- */
|
|
|
+@keyframes cardSlideIn {
|
|
|
+ from { opacity: 0; transform: translateY(20px); }
|
|
|
+ to { opacity: 1; transform: translateY(0); }
|
|
|
+}
|
|
|
+
|
|
|
+.meal-card {
|
|
|
+ background: rgba(22, 27, 34, 0.6);
|
|
|
+ border: 1px solid rgba(48, 54, 61, 0.8);
|
|
|
+ border-radius: 18px;
|
|
|
+ padding: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 16px;
|
|
|
+ backdrop-filter: blur(12px);
|
|
|
+ -webkit-backdrop-filter: blur(12px);
|
|
|
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
|
|
|
+ border-color 0.3s ease,
|
|
|
+ box-shadow 0.3s ease;
|
|
|
+ animation: cardSlideIn 0.4s ease both;
|
|
|
+ cursor: default;
|
|
|
+}
|
|
|
+
|
|
|
+.meal-card:hover {
|
|
|
+ transform: translateY(-6px);
|
|
|
+ border-color: rgba(88, 166, 255, 0.4);
|
|
|
+ box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5),
|
|
|
+ 0 0 0 1px rgba(88, 166, 255, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.meal-card-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.meal-card-name {
|
|
|
+ font-size: 1.05rem;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #f0f6fc;
|
|
|
+ line-height: 1.3;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.meal-card-date {
|
|
|
+ font-size: 0.72rem;
|
|
|
+ color: var(--text-muted);
|
|
|
+ white-space: nowrap;
|
|
|
+ padding-top: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.meal-card-macros {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-macro {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 10px 8px;
|
|
|
+ border-radius: 12px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ gap: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-macro-val {
|
|
|
+ font-size: 1.1rem;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.card-macro-lbl {
|
|
|
+ font-size: 0.65rem;
|
|
|
+ font-weight: 500;
|
|
|
+ text-transform: uppercase;
|
|
|
+ letter-spacing: 0.05em;
|
|
|
+ opacity: 0.8;
|
|
|
+}
|
|
|
+
|
|
|
+/* Color-coded macro badges */
|
|
|
+.card-macro.kcal {
|
|
|
+ background: rgba(251, 146, 60, 0.12);
|
|
|
+ border-color: rgba(251, 146, 60, 0.25);
|
|
|
+ color: #fb923c;
|
|
|
+}
|
|
|
+.card-macro.protein {
|
|
|
+ background: rgba(59, 130, 246, 0.12);
|
|
|
+ border-color: rgba(59, 130, 246, 0.25);
|
|
|
+ color: #60a5fa;
|
|
|
+}
|
|
|
+.card-macro.carbs {
|
|
|
+ background: rgba(34, 197, 94, 0.12);
|
|
|
+ border-color: rgba(34, 197, 94, 0.25);
|
|
|
+ color: #4ade80;
|
|
|
+}
|
|
|
+.card-macro.fat {
|
|
|
+ background: rgba(168, 85, 247, 0.12);
|
|
|
+ border-color: rgba(168, 85, 247, 0.25);
|
|
|
+ color: #c084fc;
|
|
|
+}
|