M: Add delay for some hover effects

rsconcept/frontend/src/index.css

@@ -91,6 +91,7 @@
   --duration-modal: 300ms;
   --duration-fade: 300ms;
   --duration-move: 500ms;
+  --duration-cycle: 1000ms;
 
   /* Custom animations */
   --animate-pulse-scale: pulse-scale 1s infinite;
@@ -110,12 +111,6 @@
   }
 
   /* ========= shadcn theme ============ */
-
-  /* --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px); */
-
   --color-background: var(--clr-prim-100);
   --color-foreground: var(--clr-prim-999);
   --color-card: var(--clr-prim-0);

rsconcept/frontend/src/styling/components.css

@@ -314,6 +314,10 @@
   color: var(--color-muted-foreground);
   background-color: transparent;
 
+  transition-property: color;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-select);
+
   .selected & {
     color: var(--color-foreground);
     border-color: var(--color-graph-selected);
@@ -322,6 +326,7 @@
 
   &:hover {
     color: var(--color-foreground);
+    transition-delay: var(--duration-select);
   }
 
   .cursor-relocate .dragging & {

rsconcept/frontend/src/styling/reactflow.css

@@ -75,8 +75,13 @@
     pointer-events: none !important;
   }
 
+  transition-property: box-shadow;
+  transition-timing-function: var(--transition-bezier);
+  transition-duration: var(--duration-select);
+
   &:hover:not(.selected) {
     box-shadow: 0 0 0 2px var(--color-selected);
+    transition-delay: var(--duration-select);
   }
 }
 

rsconcept/frontend/src/styling/utilities.css

@@ -28,14 +28,15 @@
 
 @utility cc-hover-pulse {
   &:hover:not(:disabled) {
-    animation: pulse-scale 1s infinite;
+    animation: pulse-scale var(--duration-cycle) infinite;
-    transition: var(--duration-move);
+    animation-delay: var(--duration-select);
   }
 }
 
 @utility cc-hover-text {
   &:hover:not(:disabled) {
     color: var(--color-foreground);
+    transition-delay: var(--duration-select);
   }
 }