Made changes to CSS and merged together.

2025-12-18 16:44:25 -05:00
parent 9b71c82c7d
commit cee0c922d2
15 changed files with 352 additions and 607 deletions
--- a/web/vue-app/src/assets/global.css
+++ b/web/vue-app/src/assets/global.css
@@ -57,6 +57,7 @@
  --card-bg: #fff;
  --card-title: #333;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+  --kebab-icon-color: #666;
  --kebab-menu-bg: #f7fafc;
  --kebab-menu-border: #bcc1c9;
  --kebab-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 1.5px 6px rgba(102, 126, 234, 0.08);
@@ -80,4 +81,81 @@
  --child-image-bg: #fff;
  --age-color: #666;
  --points-color: #444;
+
+  /* Image Picker styles */
+  --icon-btn-bg: #f3f3f3;
+  --icon-btn-color: #667eea;
+  --icon-btn-shadow: 0 2px 8px rgba(102, 126, 234, 0.07);
+  --selectable-image-border: #e6e6e6;
+  --selectable-image-bg: #fafbff;
+  --selectable-image-selected: #667eea;
+  --loading-text: #888;
+  --modal-bg: #fff;
+  --modal-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+
+  /* ChildDetailCard color variables */
+  --detail-card-bg: #fff;
+  --detail-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.13);
+
+  --child-name-color: #333;
+  --child-age-color: #666;
+
+  --points-label-color: #888;
+  --points-value-color: #667eea;
+
+  /* ChildEditView styles */
+  --form-label-color: #333;
+  --form-input-bg: #fafbff;
+  --form-input-border: #e6e6e6;
+  --form-input-color: #222;
+  --form-input-focus: #667eea;
+
+  /*Reward/Task Assignment styles*/
+  --assign-heading-color: #ffffff;
+  --assign-no-items-color: #fdfdfd;
+  --assign-sub-message-color: #b5ccff;
+  --assign-create-btn-bg: #fff;
+  --assign-create-btn-color: #2563eb;
+  --assign-create-btn-border: #2563eb;
+  --assign-create-btn-hover-bg: #2563eb;
+  --assign-create-btn-hover-color: #fff;
+
+  --notification-reward-name: #ef4444;
+
+  /* ChildLists styles */
+  --child-list-bg: rgba(255, 255, 255, 0.1);
+  --child-list-title-color: #fff;
+  --child-list-loading-color: #fff;
+  --child-list-scrollbar-track: rgba(255, 255, 255, 0.05);
+  --child-list-scrollbar-thumb: linear-gradient(
+    180deg,
+    rgba(102, 126, 234, 0.8),
+    rgba(118, 75, 162, 0.8)
+  );
+  --child-list-scrollbar-thumb-hover: linear-gradient(
+    180deg,
+    rgba(102, 126, 234, 1),
+    rgba(118, 75, 162, 1)
+  );
+  --child-list-scrollbar-thumb-border: 2px solid rgba(255, 255, 255, 0.08);
+
+  --item-card-bg: rgba(255, 255, 255, 0.12);
+  --item-card-border: 1px solid rgba(255, 255, 255, 0.08);
+  --item-card-good-border: rgba(46, 204, 113, 0.9);
+  --item-card-good-bg: rgba(46, 204, 113, 0.06);
+  --item-card-bad-border: rgba(255, 99, 71, 0.95);
+  --item-card-bad-bg: rgba(255, 99, 71, 0.03);
+  --item-card-ready-shadow: 0 0 0 3px #667eea88, 0 0 12px #667eea44;
+  --item-card-ready-border: #667eea;
+  --item-card-hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+
+  --item-name-color: #fff;
+
+  --item-points-color: #ffd166;
+  --item-points-shadow:
+    -1px -1px 0 #1a3d1f, 1px -1px 0 #1a3d1f, -1px 1px 0 #1a3d1f, 1px 1px 0 #1a3d1f;
+  --item-points-ready-color: #38c172;
+
+  --pending-block-bg: #222b;
+  --pending-block-color: #62ff7a;
 }