improved lightshow

docs/assets/js/ColorSelect.js

@@ -19,6 +19,7 @@ function renderSlots() {
     slot.style.backgroundColor = color;
     slot.dataset.slot = index;
     slot.style.cursor = 'pointer';
+    slot.style.boxShadow = `0 0 5px 2px ${color}`; // Match glow color to slot
 
     let holdTimer;
     let tapHandled = false;
@@ -42,6 +43,9 @@ function renderSlots() {
     // Function to handle click/tap
     const handleTap = () => {
       if (!tapHandled) {
+        // Add highlight to the selected slot
+        const selectedSlot = document.querySelector(`[data-slot="${index}"]`);
+
         editColor(index);
       }
       tcolselapHandled = false; // Reset tapHandled for future interactions
@@ -132,6 +136,7 @@ function stopFlashingRed(index) {
 
 function createDropdown(options, onSelect, title) {
   const dropdown = document.createElement('div');
+  dropdown.className = 'dropdown';
   dropdown.style.position = 'absolute';
   dropdown.style.backgroundColor = '#333';
   dropdown.style.border = '1px solid #777';
@@ -158,34 +163,25 @@ function createDropdown(options, onSelect, title) {
 
   options.forEach((option) => {
     const box = document.createElement('div');
-    box.className = 'slot';
+    box.className = 'dropdown-option';
     box.style.width = '40px';
     box.style.height = '40px';
     box.style.cursor = 'pointer';
     box.style.borderRadius = '8px';
-    box.style.border = '2px solid #555';
 
     // Apply the gradient or color
     if (option.backgroundImage) {
       box.style.backgroundImage = option.backgroundImage;
+      box.style.border = '2px solid rgba(100, 100, 100, 1)';
     } else {
       box.style.backgroundColor = option.color;
+      box.style.boxShadow = `0 0 3px 1px ${option.color}`;
+      box.style.border = '2px solid transparent';
     }
 
     // Handle highlighting
     box.addEventListener('click', (event) => {
       event.stopPropagation();
-
-      // Remove highlight from all boxes
-      document.querySelectorAll('.highlighted').forEach(el => {
-        el.classList.remove('highlighted');
-        el.style.boxShadow = '';
-      });
-
-      // Add highlight to the selected box
-      box.classList.add('highlighted');
-      box.style.boxShadow = `0 0 10px 2px ${option.color}`; // Add glow effect
-
       onSelect(option.value, option.color);
     });
 

docs/color_select_menu.md

@@ -12,7 +12,7 @@ grand_parent: Vortex Engine
   min-height: 50px;
   width: 50px;
   height: 50px;
-  margin: 2px;
+  margin: 6px;
   border-radius: 50%;
   border: 2px solid #777;
   line-height: 50px;
@@ -22,6 +22,26 @@ grand_parent: Vortex Engine
   text-align: center;
 }
 
+.slot.empty:hover {
+  box-shadow: none;
+  transform: none;
+}
+
+.slot.empty {
+  box-shadow: none;
+  transform: none;
+}
+
+.slot:not(.empty):hover {
+  box-shadow: 0 0 10px 4px currentColor; /* Glow color based on the slot's color */
+}
+
+.slot:not(.empty).highlighted {
+  border-color: currentColor; /* Use slot's color for the border when selected */
+  box-shadow: 0 0 8px 3px currentColor; /* Softer glow */
+  transform: scale(1.1);
+}
+
 .empty {
   background-color: #222;
   border: 2px dashed #555;
@@ -73,10 +93,29 @@ grand_parent: Vortex Engine
   padding:0;
 }
 
+.dropdown {
+  box-shadow: 5px 5px 10px 4px rgba(0, 0, 0, 0.4);
+  border-radius: 12px;
+  transition: all 0.3s ease-in-out;
+}
+
+.dropdown-option {
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out;
+}
+
+.dropdown-option:hover {
+  transform: scale(1.1);
+}
+
 @keyframes flashRed {
-  0% { background-color: inherit; }
-  50% { background-color: #700000; }
-  100% { background-color: inherit; }
+  0% { 
+  }
+  50% {
+    background-color: rgba(255, 0, 0, 0.6);
+    box-shadow: 0 0 5px 2px rgba(255, 0, 0, 0.6);
+  }
+  100% {
+  }
 }
 
 @media (max-width: 500px) {