style: cleaner looks and sharp gradient for now

Author: pxeemo

index.html

@@ -65,10 +65,10 @@
 
     <div class="container container-md h-[calc(100svh-3rem)] px-1 py-2 text-center">
         <textarea dir="auto"
-            class="w-full h-[calc(100%-13rem)] p-2 outline-none bg-zinc-950 rounded-md focus:shadow-orange-400 focus:shadow-[0_0_2px_0_#fff] border-zinc-700 transition-all ease-in-out duration-300 focus:border-orange-400 border-2 resize-none"
+            class="w-full max-w-3xl h-[calc(100%-13rem)] p-2 outline-none bg-zinc-950 rounded-md focus:shadow-orange-400 focus:shadow-[0_0_2px_0_#fff] border-zinc-700 transition-all ease-in-out duration-300 focus:border-orange-400 border-2 resize-none"
             id="lyricInput" rows="20" placeholder="Enter your lyric text here" required></textarea>
 
-        <div class="w-2/3 my-2 mx-auto rounded-2xl overflow-clip">
+        <div class="max-w-lg my-2 mx-auto rounded-2xl overflow-clip">
             <label class="flex p-2 my-0.5 bg-zinc-800 rounded cursor-pointer items-center justify-between"
                 for="isWordByWord">
                 <p class="ps-2 text-lg text-start">Sync word-by-word</p>
@@ -103,8 +103,8 @@
     </div>
 
     <!-- Lyrics container -->
-    <div class="container container-md px-1 py-2 my-28 text-center hidden" id="syncer">
-        <ul class="w-full text-start rounded-2xl overflow-clip" id="lyricList"></ul>
+    <div class="container container-md max-w-3xl px-1 py-2 my-28 text-center hidden" id="syncer">
+        <ul class="w-full text-start font-bold overflow-clip" id="lyricList"></ul>
 
         <button class="h-8 bg-orange-400 text-black font-medium rounded-full px-5 my-2" id="dlFile">
             Save

src/main.js

@@ -133,9 +133,10 @@ function updateSelection(item, mode) {
         'cursor-pointer',
         'border-zinc-900',
         'bg-zinc-800',
+        'border-b-2',
     ]
-    const selectedStyle = ['border-zinc-900', 'bg-orange-900', 'rounded-b-2xl']
-    const normalStyle = ['border-zinc-700', 'text-zinc-400']
+    const selectedStyle = ['border-orange-400', 'border-1', 'rounded-b-2xl']
+    const normalStyle = ['border-zinc-800', 'border-b-2', 'text-zinc-400']
     item.classList.remove(...activeStyle, ...selectedStyle, ...normalStyle)
     if (mode == 'active') item.classList.add(...activeStyle)
     else if (mode == 'selected') item.classList.add(...selectedStyle)
@@ -252,15 +253,17 @@ function createItemElement(line, isBg = false) {
     item.dataset.type = isBg ? 'bg' : 'normal'
     item.classList.add(
         'flex',
-        'p-3',
-        'pl-4',
+        isBg ? 'py-2' : 'py-4',
+        'px-5',
         'gap-2',
         'text-zinc-400',
         'items-center',
         'rounded',
+        'first:rounded-t-2xl',
+        'last:rounded-b-2xl',
         'border-b-2',
         'border-zinc-800',
-        'duration-500',
+        'duration-300',
         'ease-out',
         'transition-all',
         'scroll-mt-[20svh]',
@@ -274,9 +277,7 @@ function createItemElement(line, isBg = false) {
     if (isDuet) item.dataset.vocalist = 1
     lineEl.classList.add(
         'grow',
-        isBg ? 'text-sm' : 'text-xl',
-        'text-start',
-        'font-semibold',
+        isBg ? null : 'text-2xl',
         'transition-all',
         'duration-300',
     )
@@ -598,12 +599,14 @@ editItemDone.addEventListener('click', () => {
     }
     if (markAsBg.checked) {
         itemsList[index].dataset.type = 'bg'
-        itemsList[index].children[0].classList.remove('text-xl')
-        itemsList[index].children[0].classList.add('text-sm')
+        itemsList[index].children[0].classList.remove('text-2xl', 'p-4')
+        itemsList[index].classList.remove('py-4')
+        itemsList[index].classList.add('py-2')
     } else {
         itemsList[index].dataset.type = 'normal'
-        itemsList[index].children[0].classList.remove('text-sm')
-        itemsList[index].children[0].classList.add('text-xl')
+        itemsList[index].classList.remove('py-2')
+        itemsList[index].classList.add('py-4')
+        itemsList[index].children[0].classList.add('text-2xl')
     }
 })
 

src/style.css

@@ -17,14 +17,16 @@
 
   --font-vazir: Outfit, Vazirmatn, sans-serif;
 
-  --gradient-shade: 8px;
+  --gradient-start-color: var(--color-zinc-500);
+  --gradient-end-color: var(--color-zinc-100);
+  --gradient-hardness: 0px;
 }
 
 .word {
   background-image: linear-gradient(270deg,
-      var(--color-zinc-400) calc(50% - var(--gradient-shade) / 2),
-      var(--color-zinc-100) calc(50% + var(--gradient-shade) / 2));
-  background-size: calc(200% + var(--gradient-shade)) 100%;
+      var(--gradient-start-color) calc(50% - var(--gradient-hardness) / 2),
+      var(--gradient-end-color) calc(50% + var(--gradient-hardness) / 2));
+  background-size: calc(200% + var(--gradient-hardness)) 100%;
   background-position: right;
   background-clip: text;
   color: transparent;
@@ -41,8 +43,8 @@
 .word.rtl {
   direction: rtl;
   background-image: linear-gradient(90deg,
-      var(--color-zinc-400) calc(50% - var(--gradient-shade) / 2),
-      var(--color-zinc-100) calc(50% + var(--gradient-shade) / 2));
+      var(--gradient-start-color) calc(50% - var(--gradient-hardness) / 2),
+      var(--gradient-end-color) calc(50% + var(--gradient-hardness) / 2));
   background-position: left;
   animation-direction: reverse;
 }