From f1595c0756a60544f8e2c4f7f307d86ec26f8560 Mon Sep 17 00:00:00 2001
From: ryan <ryannganga13325@gmail.com>
Date: Thu, 5 Jun 2025 15:33:42 +0300
Subject: [PATCH] style(list): modernize CSS variables and enhance overall
 styling for better UI consistency

---
 assets/style.css | 450 ++++++++++++++++++++++++++++++-----------------
 1 file changed, 287 insertions(+), 163 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index a540a96..569f248 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,243 +1,367 @@
+/* Variables for non-cell elements */
+:root {
+  --primary: #1e88e5;
+  --primary-dark: #1565c0;
+  --text-primary: #333;
+  --text-secondary: #666;
+  --background: #f4f4f9;
+  --card-bg: #ffffff;
+  --border: #ddd;
+  --danger: #ff4d4f;
+  --danger-hover: #ff7875;
+  --danger-active: #d9363e;
+  
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 15px;
+  --spacing-lg: 20px;
+  --spacing-xl: 30px;
+  
+  /* Shadows */
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 8px 12px rgba(0, 0, 0, 0.1);
+  
+  /* Border radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+}
+
+/* Base styles */
 body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-    background-color: #f4f4f9;
-    color: #333;
+  font-family: 'Inter', Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: var(--background);
+  color: var(--text-primary);
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 h1 {
-    color: #1e88e5;
-    text-align: center;
-    margin-bottom: 20px;
+  color: var(--primary);
+  text-align: center;
+  margin-bottom: var(--spacing-lg);
+  font-size: 2rem;
+  letter-spacing: -0.5px;
+  font-weight: 600;
 }
 
+/* Container for better content width control */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-md);
+}
+
+/* Form styling */
 form {
-    margin: 20px auto;
-    max-width: 600px;
-    padding: 20px;
-    background: white;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
+  margin: var(--spacing-xl) auto;
+  max-width: 600px;
+  padding: var(--spacing-lg);
+  background: var(--card-bg);
+  box-shadow: var(--shadow-md);
+  border-radius: var(--radius-md);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+form:hover {
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
 }
 
 form input, form textarea, form button {
-    display: block;
-    width: 100%;
-    margin-bottom: 15px;
-    padding: 10px;
-    font-size: 16px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
+  display: block;
+  width: 100%;
+  margin-bottom: var(--spacing-md);
+  padding: var(--spacing-md);
+  font-size: 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
 }
 
 form button {
-    background-color: #1e88e5;
-    color: white;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
+  background-color: var(--primary);
+  color: white;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.1s ease;
+  font-weight: 600;
 }
 
 form button:hover {
-    background-color: #1565c0;
+  background-color: var(--primary-dark);
+  transform: translateY(-1px);
 }
 
+form button:active {
+  transform: translateY(1px);
+}
+
+/* Lists */
 ul {
-    list-style: none;
-    padding: 0;
+  list-style: none;
+  padding: 0;
 }
 
 ul li {
-    background: #fff;
-    margin: 10px 0;
-    padding: 15px;
-    border-radius: 5px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background: var(--card-bg);
+  margin: var(--spacing-md) 0;
+  padding: var(--spacing-lg);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
 }
 
+ul li:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+/* Tables */
 table {
-    width: 100%;
-    border-collapse: collapse;
+  width: 100%;
+  border-collapse: collapse;
+  margin: var(--spacing-lg) 0;
+  box-shadow: var(--shadow-sm);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
 }
 
 th, td {
-    border: 1px solid #ddd;
-    padding: 8px;
+  border: 1px solid var(--border);
+  padding: var(--spacing-md);
 }
 
 th {
-    background-color: #f2f2f2;
+  background-color: #f2f2f2;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+tr {
+  transition: background-color 0.2s ease;
+}
+
+tr:hover {
+  background-color: rgba(30, 136, 229, 0.03);
 }
 
 /* Style for the grid container */
 .grid-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));  /* Adjust the minimum width for cells */
-    gap: 1px; /* Gap between cells */
-    background-color: #ccc;/* Grid line color  */
-    border: 1px solid #aaa; /* Outer border */
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  gap: 1px;
+  background-color: #ccc;
+  border: 1px solid #aaa;
 }
 
 /* Style for individual cells */
 .editable-cell {
-    display: flex;          /* Use flexbox for better layout control */
-    flex-direction: column; /* Stack children vertically */
-    width: 100%;     /* Full width of the allocated space */
-    height: 100%;    /* Full height of the allocated space */
-    position: relative;  /* Relative positioning for absolute children */
-    box-sizing: border-box; /* Ensure padding and border are included in width/height */
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
 }
 
 /* Style for the input field inside the editable cell */
 .editable-cell-input {
-    width: 100%;    /* Ensure input takes up full width */
-    height: 100%;   /* Ensure input takes up full height */
-    border: none;   /* Remove input box borders */
-    padding: 8px;   /* Add padding for spacing */
-    box-sizing: border-box; /* Ensure padding doesn't cause overflow */
-    font-size: 14px;   /* Adjust font size */
-    text-align: left;  /* Align text to the left */
-    outline: none;     /* Remove outline for better UI */
-    background-color: transparent;  /* Make background transparent */
+  width: 100%;
+  height: 100%;
+  border: none;
+  padding: 8px;
+  box-sizing: border-box;
+  font-size: 14px;
+  text-align: left;
+  outline: none;
+  background-color: transparent;
 }
 
 /* Style for the focused input field */
 .editable-cell-input:focus {
-    background-color: #e0f7fa;  /* Light blue background when focused */
-    border: 1px solid #00796b;  /* Green border when focused */
+  background-color: #e0f7fa;
+  border: 1px solid #00796b;
 }
 
-/* Style for the suggestions list */
+/* Suggestion styling */
 .editable-cell-suggestions {
-    position: absolute;     /* Position suggestions absolutely within the cell */
-    top: 100%;              /* Place suggestions below the input field */
-    left: 0;                /* Align suggestions with the left edge of the cell */
-    width: 100%;            /* Full width of the cell */
-    max-height: 200px;      /* Limit height of suggestions list */
-    overflow-y: auto;       /* Add scrollbar if suggestions exceed max height */
-    background-color: white; /* White background for suggestions */
-    border: 1px solid #ddd;  /* Light border for suggestions */
-    z-index: 10;            /* Ensure suggestions appear above other content */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  max-height: 200px;
+  overflow-y: auto;
+  background-color: white;
+  border: 1px solid var(--border);
+  z-index: 10;
+  box-shadow: var(--shadow-md);
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
 }
 
-/* Style for individual suggestion items */
 .editable-cell-suggestions li {
-    padding: 8px;           /* Add padding for spacing */
-    cursor: pointer;        /* Change cursor to pointer on hover */
-    border-bottom: 1px solid #eee; /* Add separator between items */
+  padding: 8px;
+  cursor: pointer;
+  border-bottom: 1px solid #eee;
+  margin: 0;
+  box-shadow: none;
+  transform: none;
+  border-radius: 0;
 }
 
 .editable-cell-suggestions li:hover {
-    background-color: #f5f5f5; /* Light gray background on hover */
+  background-color: #f5f5f5;
+  transform: none;
+  box-shadow: none;
 }
 
-.search-icon {
-    margin-left: 10px;
-    padding: 5px;
-    border: none;
-    background-color: transparent;
-    cursor: pointer;
-}
-
-.search-icon i {
-    font-size: 18px;
-    color: #333;
-}
-
-.search-icon i.fas.fa-search {
-    margin-left: 5px;
+.editable-cell-suggestions li:last-child {
+  border-bottom: none;
 }
 
+/* Textarea */
 .editable-cell-textarea {
-    width: 100%;
-    height: 100px;
-    resize: vertical;
-    overflow: auto;
+  width: 100%;
+  height: 100px;
+  resize: vertical;
+  overflow: auto;
+  padding: var(--spacing-md);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  transition: border-color 0.2s ease;
 }
 
+.editable-cell-textarea:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+/* Typeahead */
 .typeahead-container {
-    position: relative;
+  position: relative;
 }
 
 .tt-menu {
-    width: 100%;
-    background: white;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    margin-top: 5px;
+  width: 100%;
+  background: white;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-md);
+  margin-top: 5px;
 }
 
 .tt-suggestion {
-    padding: 8px 12px;
-    cursor: pointer;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
 }
 
 .tt-suggestion:hover {
-    background-color: #f5f5f5;
+  background-color: #f5f5f5;
 }
 
 .tt-cursor {
-    background-color: #e9e9e9;
+  background-color: #e9e9e9;
 }
 
 .tt-hint {
-    display: none !important;
-  }
-  
-  .tt-menu {
-    background: white;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-shadow: 0 5px 10px rgba(0,0,0,.2);
-    margin-top: 5px;
-    width: 100%;
-  }
-  
-  .suggestion-item {
-    padding: 8px 12px;
-    cursor: pointer;
-  }
-  
-  .suggestion-item.tt-cursor {
-    background-color: #f5f5f5;
-  }
+  display: none !important;
+}
 
-  /* Common styles for delete buttons */
-    .delete-button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-        border-radius: 50%;
-        border: none;
-        background-color: #ff4d4f;
-        color: white;
-        font-size: 16px;
-        font-weight: bold;
-        cursor: pointer;
-        margin-left: 8px;
-        transition: all 0.2s ease;
-        padding: 0;
-        line-height: 1;
-    }
-    .delete-button:hover {
-        background-color: #ff7875;
-        transform: scale(1.1);
-    }
-    .delete-button:active {
-        background-color: #d9363e;
-        transform: scale(0.95);
-    }
-    /* Specific styles for item delete buttons */
-    .item-delete {
-        vertical-align: middle;
-    }
-    /* Specific styles for property delete buttons */
-    .property-delete {
-        vertical-align: middle;
-        font-size: 14px;
-    }
\ No newline at end of file
+.suggestion-item {
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.suggestion-item.tt-cursor {
+  background-color: #f5f5f5;
+}
+
+/* Delete buttons */
+.delete-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: none;
+  background-color: var(--danger);
+  color: white;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+  margin-left: 8px;
+  transition: all 0.2s ease;
+  padding: 0;
+  line-height: 1;
+  box-shadow: var(--shadow-sm);
+}
+
+.delete-button:hover {
+  background-color: var(--danger-hover);
+  transform: scale(1.1);
+  box-shadow: var(--shadow-md);
+}
+
+.delete-button:active {
+  background-color: var(--danger-active);
+  transform: scale(0.95);
+}
+
+.item-delete {
+  vertical-align: middle;
+}
+
+.property-delete {
+  vertical-align: middle;
+  font-size: 14px;
+}
+
+/* Button class for consistency */
+.button {
+  display: inline-block;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background-color: var(--primary);
+  color: white;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease, transform 0.1s ease;
+}
+
+.button:hover {
+  background-color: var(--primary-dark);
+  transform: translateY(-1px);
+}
+
+.button:active {
+  transform: translateY(1px);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  form {
+    padding: var(--spacing-md);
+  }
+  
+  h1 {
+    font-size: 1.75rem;
+  }
+}
+
+@media (max-width: 480px) {
+  form input, form textarea, form button {
+    padding: var(--spacing-sm);
+  }
+  
+  h1 {
+    font-size: 1.5rem;
+  }
+}
\ No newline at end of file