feat: full JS-less theme transition, better transition animation between themes, better light theme colors

src/styles/components/marquee.css

@@ -33,6 +33,13 @@
   justify-content: flex-start;
   align-items: flex-start;
   overflow: hidden;
+  opacity: 0;
+  transition: opacity 0.6s ease;
+  min-height: 200px; /* placeholder height */
+
+  &.initialized {
+    opacity: 1;
+  }
 }
 
 .marquee-content {
@@ -44,6 +51,11 @@
   padding: 0;
   will-change: transform;
   transform: translateX(0);
+  visibility: hidden;
+
+  .initialized & {
+    visibility: visible;
+  }
 }
 
 .marquee-item {
@@ -56,7 +68,7 @@
   box-sizing: border-box;
   will-change: opacity;
 
-  &>* {
+  & > * {
     z-index: 11;
   }
 
@@ -89,8 +101,8 @@
   justify-content: space-between;
   align-items: stretch;
   transition:
-    background-color 0.3s,
-    opacity 0.3s;
+    background-color var(--theme-transition),
+    opacity var(--theme-transition);
   z-index: 20;
   user-select: none;
   pointer-events: none;
@@ -106,7 +118,7 @@
   align-items: center;
   height: 100%;
 
-  &>div {
+  & > div {
     width: 2.5rem;
     aspect-ratio: 1 / 1;
     display: flex;
@@ -120,7 +132,7 @@
   &:hover {
     cursor: pointer;
 
-    &>div {
+    & > div {
       opacity: 0.9;
     }
   }
@@ -154,10 +166,9 @@
   .marquee-scroll-arrow {
     height: unset;
 
-    &>div {
+    & > div {
       background-color: #55555580;
       border-radius: var(--radius-xs);
     }
   }
 }
-