Made changes to CSS and merged together.

web/vue-app/src/components/ChildrenListView.vue

@@ -420,9 +420,9 @@ h1 {
 }
 
 .card {
-  background: white;
+  background: var(--card-bg);
+  box-shadow: var(--card-shadow);
   border-radius: 12px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   overflow: visible; /* allow menu to overflow */
   transition: all 0.3s ease;
   display: flex;
@@ -470,17 +470,14 @@ h1 {
   right: 0;
   margin: 0;
   min-width: 150px;
-  background: #f7fafcc7; /* subtle light gray for contrast */
-  border-radius: 10px;
-  border: 1.5px solid #bcc1c9; /* subtle border for definition */
-  box-shadow:
-    0 8px 24px rgba(0, 0, 0, 0.18),
-    0 1.5px 6px rgba(102, 126, 234, 0.08); /* stronger shadow for separation */
+  background: var(--kebab-menu-bg);
+  border: 1.5px solid var(--kebab-menu-border);
+  box-shadow: var(--kebab-menu-shadow);
+  backdrop-filter: blur(var(--kebab-menu-blur));
   display: flex;
   flex-direction: column;
   overflow: hidden;
   z-index: 30;
-  backdrop-filter: blur(11px); /* optional: adds a modern blur effect */
 }
 
 .menu-item {
@@ -490,7 +487,7 @@ h1 {
   text-align: left;
   cursor: pointer;
   font-weight: 600;
-  color: #333;
+  color: var(--menu-item-color);
   font-size: 1.1rem; /* Slightly larger text for readability */
 }
 
@@ -509,11 +506,11 @@ h1 {
 }
 
 .menu-item:hover {
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--menu-item-hover-bg);
 }
 
 .menu-item.danger {
-  color: #ff4d4f;
+  color: var(--menu-item-danger);
 }
 
 /* card content */
@@ -528,7 +525,7 @@ h1 {
 
 .card h2 {
   font-size: 1.5rem;
-  color: #333;
+  color: var(--card-title);
   margin-bottom: 0.5rem;
   word-break: break-word;
   text-align: center;
@@ -536,7 +533,7 @@ h1 {
 
 .age {
   font-size: 1.1rem;
-  color: #666;
+  color: var(--age-color);
   font-weight: 500;
   text-align: center;
 }
@@ -547,6 +544,7 @@ h1 {
   object-fit: cover;
   border-radius: 50%;
   margin: 0 auto 1rem auto;
+  background: var(--child-image-bg);
 }
 
 /* modal */
@@ -561,13 +559,13 @@ h1 {
 }
 
 .modal {
-  background: #fff;
-  color: #222;
+  background: var(--modal-bg);
+  color: var(--modal-text);
   padding: 1.25rem;
   border-radius: 10px;
   width: 360px;
   max-width: calc(100% - 32px);
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--modal-shadow);
   text-align: center;
 }
 
@@ -578,7 +576,7 @@ h1 {
 
 .points {
   font-size: 1.05rem;
-  color: #444;
+  color: var(--points-color);
   margin-top: 0.4rem;
   font-weight: 600;
   text-align: center;
@@ -589,7 +587,7 @@ h1 {
   position: fixed;
   bottom: 2rem;
   right: 2rem;
-  background: #667eea;
+  background: var(--fab-bg);
   color: #fff;
   border: none;
   border-radius: 50%;
@@ -605,11 +603,11 @@ h1 {
 }
 
 .fab:hover {
-  background: #5a67d8;
+  background: var(--fab-hover-bg);
 }
 
 .fab:active {
-  background: #4c51bf;
+  background: var(--fab-active-bg);
 }
 
 .no-children-message {
@@ -617,19 +615,19 @@ h1 {
   font-size: 1.15rem;
   font-weight: 600;
   text-align: center;
-  color: #fdfdfd;
+  color: var(--no-children-color);
   line-height: 1.5;
 }
 .sub-message {
   margin-top: 0.3rem;
   font-size: 1rem;
   font-weight: 400;
-  color: #b5ccff;
+  color: var(--sub-message-color);
 }
 .sign-in-btn {
-  background: #fff;
-  color: #2563eb;
-  border: 2px solid #2563eb;
+  background: var(--sign-in-btn-bg);
+  color: var(--sign-in-btn-color);
+  border: 2px solid var(--sign-in-btn-border);
   border-radius: 6px;
   font-size: 0.85rem;
   font-weight: 600;
@@ -641,7 +639,7 @@ h1 {
     color 0.18s;
 }
 .sign-in-btn:hover {
-  background: #2563eb;
-  color: #fff;
+  background: var(--sign-in-btn-hover-bg);
+  color: var(--sign-in-btn-hover-color);
 }
 </style>