@ozdao/martyrs 0.2.604 → 0.2.605

package/src/modules/landing/components/sections/SectionGuide.vue

@@ -2,7 +2,7 @@
   <div class="">
     <div class="mn-b-big d-inline-block">
       <h2 class="mn-b-semi">{{t('title')}}</h2>
-      <p v-if="te('subtitle')" class="t-transp p-medium w-m-60r">{{t('subtitle')}}</p>
+      <p v-if="te('subtitle')" class="opacity-50 p-medium w-m-60r">{{t('subtitle')}}</p>
     </div>
     <div class="cols-1">
       <Spoiler v-for="item in tm('FAQ')" :key="item.title" class="br-grey-transp-10 br-1px radius-small o-hidden pd-big mn-b-thin">
@@ -14,7 +14,7 @@
         </template>
         <template #content>
           <div class="mn-t-semi">
-            <p class="t-transp" v-html="item.description"></p>
+            <p class="opacity-50" v-html="item.description"></p>
           </div>
         </template>
       </Spoiler>

package/src/modules/landing/components/sections/SectionHeroToken.vue

@@ -39,7 +39,7 @@
 		/>
 
 		<p 
-			class="w-max-50r mn-b-big t-transp p-medium" 
+			class="w-max-50r mn-b-big opacity-50 p-medium" 
 			v-html="t('DESCRIPTION')"
 		/>
 

package/src/modules/landing/components/sections/SectionHeroVideo.vue

@@ -13,7 +13,7 @@
 						</span>
 	        </h1>
 	        
-	        <p class="p-medium t-transp">{{ t('viewpoint.description') }}</p>
+	        <p class="p-medium opacity-50">{{ t('viewpoint.description') }}</p>
 	      </div>
 
         <div class="pd-big bg-black t-white radius-medium">

package/src/modules/landing/components/sections/SectionMobileApp.vue

@@ -21,12 +21,12 @@
 
     <div class="pd-big flex flex-h-center flex-column z-index-1 w-1/2">
       <h2 class="mn-t-medium mn-b-medium w-m-40r">{{ t('title') }}</h2>
-      <p class="t-transp mn-b-big p-medium w-m-33r">{{ t('description') }}</p>
+      <p class="opacity-50 mn-b-big p-medium w-m-33r">{{ t('description') }}</p>
       
       <div v-if="tm('features').length > 0" class="mn-b-big gap-regular cols-2 mobile:cols-1">
         <div v-for="feature in tm('features')"  class="feature">
           <h4 class="mn-b-small">{{ feature.title }}</h4>
-          <p class="t-transp p-regular">{{ feature.text }}</p>
+          <p class="opacity-50 p-regular">{{ feature.text }}</p>
         </div>
       </div>
 

package/src/modules/landing/components/sections/SectionOverview.vue

@@ -18,7 +18,7 @@
           class="w-100 object-fit-cover"
         >
         <h3 class="mn-b-medium">{{ section.title }}</h3>
-        <p class="t-transp">{{ section.text }}</p>
+        <p class="opacity-50">{{ section.text }}</p>
       </router-link>
     </div>
   </div>

package/src/modules/landing/components/sections/SectionRoadmap.vue

@@ -62,7 +62,7 @@ const { t,tm } = useI18n(props.textData);
         <div class="w-100 timeline-content">
           <h3 class="mn-b-small">{{ t(milestone.title) }}</h3>
           <p class="uppercase mn-b-semi t-main fw-semi date">{{ milestone.date }}</p>
-          <p class="t-transp w-100">{{ t(milestone.description) }}</p>
+          <p class="opacity-50 w-100">{{ t(milestone.description) }}</p>
         </div>
       </div>
     </div>

package/src/modules/landing/components/sections/SubscribeNewsletter.vue

@@ -2,7 +2,7 @@
   <div class="pos-relative flex-nowrap flex flex-column flex-center z-index-1">
     <header class="d-inline-block z-index-1 mn-b-big">
       <h2 class="mn-b-semi">{{ t('title') }}</h2>
-      <p class="t-transp p-medium">{{ t('subtitle') }}</p>
+      <p class="opacity-50 p-medium">{{ t('subtitle') }}</p>
     </header>
 
     <FieldSubscribeNewsletter

package/src/modules/marketplace/views/components/sections/SectionMenu.vue

@@ -18,7 +18,7 @@
 					<img loading="lazy" 
 						v-if="category.photo"
 						:src="category.photo"
-						class="h-100 aspect-1x1 t-transp mn-r-thin"
+						class="h-100 aspect-1x1 opacity-50 mn-r-thin"
 					>
 
 					<div class="w-100" :class="{'mn-r-auto':category.url === 'buds'}">
@@ -26,7 +26,7 @@
 							{{category.name}}
 						</h3>
 					
-						<p v-if="category.url === 'buds'" class="mn-t-thin mn-b-thin t-transp t-black p-regular">
+						<p v-if="category.url === 'buds'" class="mn-t-thin mn-b-thin opacity-50 t-black p-regular">
 							Unveiling the Exceptional User Curated Best Buds
 						</p>
 						

package/src/modules/music/components/SidebarMusic.vue

@@ -43,7 +43,7 @@
       
       <div class="music-playlists" v-if="isAuthenticated">
         <div class="flex-justify-between flex mn-b-small">
-          <h4 class="t-transp fw-medium">YOUR PLAYLISTS</h4>
+          <h4 class="opacity-50 fw-medium">YOUR PLAYLISTS</h4>
           <Button 
             @click="showCreatePlaylistModal = true" 
             class="bg-transparent cursor-pointer pd-micro radius-small hover:bg-white"

package/src/modules/music/components/cards/AlbumCard.vue

@@ -22,7 +22,7 @@
     </div>
     <div class="album-info pd-medium bg-light">
       <h3 class="mn-b-thin fw-medium  truncate" style="height: 1.50rem">{{ album.title }}</h3>
-      <p class="t-transp t-small truncate">{{ albumInfo }}</p>
+      <p class="opacity-50 t-small truncate">{{ albumInfo }}</p>
     </div>
   </router-link>
 </template>

package/src/modules/music/components/cards/ArtistCard.vue

@@ -31,7 +31,7 @@
     
     <div class="pd-small">
       <h4 class="fw-medium mn-b-small truncate">{{ artist.name }}</h4>
-      <p v-if="artist.genres && artist.genres.length" class="p-small t-transp truncate">
+      <p v-if="artist.genres && artist.genres.length" class="p-small opacity-50 truncate">
         {{ artist.genres.join(', ') }}
       </p>
     </div>

package/src/modules/music/components/cards/ArtistCardSmall.vue

@@ -24,7 +24,7 @@
           <span class="mn-b-thin">{{ artist.name }}</span>
           <IconVerified v-if="artist.isVerified" class="w-1r h-1r t-main" />
         </div>
-        <span class="t-small t-transp">{{ artistType }}</span>
+        <span class="t-small opacity-50">{{ artistType }}</span>
       </div>
     </div>
 

package/src/modules/music/components/cards/PlaylistCard.vue

@@ -22,7 +22,7 @@
     </div>
     <div class="playlist-info pd-small bg-light">
       <h3 class=" fw-medium mn-b-small truncate">{{ playlist.title }}</h3>
-      <p class="t-transp t-small truncate">{{ playlistInfo }}</p>
+      <p class="opacity-50 t-small truncate">{{ playlistInfo }}</p>
     </div>
   </router-link>
 </template>

package/src/modules/music/components/cards/TrackListCard.vue

@@ -9,7 +9,7 @@
     @mouseleave="hoveredIndex = -1"
   >
     <div class="track-number w-3r t-center pos-relative">
-      <span v-if="!isPlaying(track) && hoveredIndex !== props.index" class="t-transp">{{ props.index + 1 }}</span>
+      <span v-if="!isPlaying(track) && hoveredIndex !== props.index" class="opacity-50">{{ props.index + 1 }}</span>
       <Button 
         v-else-if="!isPlaying(track) && hoveredIndex === props.index"
         @click.stop="playTrack(track)"
@@ -51,11 +51,11 @@
           </router-link>
           <span v-else>{{ track.title }}</span>
         </div>
-        <div :class="{'t-main': isPlaying(track)}" class="track-artist t-transp t-small">
+        <div :class="{'t-main': isPlaying(track)}" class="track-artist opacity-50 t-small">
           <router-link
             v-if="track.artist && track.artist._id"
             :to="'/music/artists/' + track.artist.url"
-            class="t-transp hover:underline"
+            class="opacity-50 hover:underline"
             @click.stop
           >
             {{ getArtistName(track) }}
@@ -65,11 +65,11 @@
       </div>
     </div>
     
-    <div v-if="showAlbum" class="track-album  w-15r mobile:w-0 mobile:hidden t-transp truncate">
+    <div v-if="showAlbum" class="track-album  w-15r mobile:w-0 mobile:hidden opacity-50 truncate">
       <router-link
         v-if="track.album && track.album._id"
         :to="'/music/albums/' + track.album.url"
-        class="t-transp hover:underline"
+        class="opacity-50 hover:underline"
         @click.stop
       >
         {{ track.album.title }}
@@ -77,7 +77,7 @@
       <span v-else>{{ track.album?.title || 'Single' }}</span>
     </div>
     
-    <div class="track-duration w-5r t-right t-transp">{{ formatDuration(track.duration) }}</div>
+    <div class="track-duration w-5r t-right opacity-50">{{ formatDuration(track.duration) }}</div>
   </div>
 </template>
 

package/src/modules/music/components/forms/AlbumForm.vue

@@ -120,7 +120,7 @@
             <div class="flex-nowrap flex-v-center flex">
               <div class="w-100">
                 <p class="fw-medium">{{ item.name }}</p>
-                <p v-if="item.bio" class="t-small t-transp">{{ item.bio }}</p>
+                <p v-if="item.bio" class="t-small opacity-50">{{ item.bio }}</p>
               </div>
             </div>
           </template>
@@ -184,7 +184,7 @@
             <div class="flex-nowrap flex-v-center flex">
               <div class="w-100">
                 <p class="fw-medium">{{ item.name }}</p>
-                <p v-if="item.description" class="t-small t-transp">{{ item.description }}</p>
+                <p v-if="item.description" class="t-small opacity-50">{{ item.description }}</p>
               </div>
             </div>
           </template>

package/src/modules/music/components/forms/ArtistForm.vue

@@ -172,7 +172,7 @@
             <div class="flex-nowrap flex-v-center flex">
               <div class="w-100">
                 <p class="fw-medium">{{ item.name }}</p>
-                <p v-if="item.description" class="t-small t-transp">{{ item.description }}</p>
+                <p v-if="item.description" class="t-small opacity-50">{{ item.description }}</p>
               </div>
             </div>
           </template>

package/src/modules/music/components/forms/PlaylistForm.vue

@@ -114,13 +114,13 @@
               
               <div class="flex-child-1">
                 <p class="fw-medium">{{ item.title }}</p>
-                <p class="t-small t-transp">
+                <p class="t-small opacity-50">
                   {{ item.artists?.map(a => a.name || a).join(', ') }}
                   <span v-if="item.album"> • {{ item.album.title || item.album }}</span>
                 </p>
               </div>
               
-              <span v-if="item.duration" class="t-small t-transp">
+              <span v-if="item.duration" class="t-small opacity-50">
                 {{ formatDuration(item.duration) }}
               </span>
               
@@ -138,12 +138,12 @@
             <div class="flex-nowrap flex-v-center flex">
               <div class="w-100">
                 <p class="fw-medium">{{ item.title }}</p>
-                <p class="t-small t-transp">
+                <p class="t-small opacity-50">
                   {{ item.artists?.map(a => a.name || a).join(', ') }}
                   <span v-if="item.album"> • {{ item.album.title || item.album }}</span>
                 </p>
               </div>
-              <span v-if="item.duration" class="t-small t-transp mn-l-small">
+              <span v-if="item.duration" class="t-small opacity-50 mn-l-small">
                 {{ formatDuration(item.duration) }}
               </span>
             </div>
@@ -151,7 +151,7 @@
         </BlockMultiselect>
         
         <!-- Tracks summary -->
-        <div v-if="playlist.tracks.length > 0" class="t-small t-transp mn-t-small">
+        <div v-if="playlist.tracks.length > 0" class="t-small opacity-50 mn-t-small">
           {{ playlist.tracks.length }} tracks • {{ formatDuration(totalDuration) }}
         </div>
       </Block>

package/src/modules/music/components/forms/TrackForm.vue

@@ -136,7 +136,7 @@
               <div class="flex-nowrap flex-v-center flex">
                 <div class="w-100">
                   <p class="fw-medium">{{ item.name }}</p>
-                  <p v-if="item.bio" class="t-small t-transp">{{ item.bio }}</p>
+                  <p v-if="item.bio" class="t-small opacity-50">{{ item.bio }}</p>
                 </div>
               </div>
             </template>
@@ -200,7 +200,7 @@
               <div class="flex-nowrap flex-v-center flex">
                 <div class="w-100">
                   <p class="fw-medium">{{ item.title }}</p>
-                  <p v-if="item.description" class="t-small t-transp">{{ item.description }}</p>
+                  <p v-if="item.description" class="t-small opacity-50">{{ item.description }}</p>
                 </div>
               </div>
             </template>
@@ -264,7 +264,7 @@
             <div class="flex-nowrap flex-v-center flex">
               <div class="w-100">
                 <p class="fw-medium">{{ item.name }}</p>
-                <p v-if="item.description" class="t-small t-transp">{{ item.description }}</p>
+                <p v-if="item.description" class="t-small opacity-50">{{ item.description }}</p>
               </div>
             </div>
           </template>

package/src/modules/music/components/pages/Album.vue

@@ -9,7 +9,7 @@
     <!-- Not Found -->
     <div v-if="hasLoaded && !album" class="t-center pd-big">
       <h2 class="">Album not found</h2>
-      <p class="t-transp fw-medium">The album you're looking for doesn't exist or has been removed.</p>
+      <p class="opacity-50 fw-medium">The album you're looking for doesn't exist or has been removed.</p>
     </div>
     
     <!-- Album Content -->
@@ -26,11 +26,11 @@
         <div class="stats-grid d-grid cols-2 mobile:cols-1 gap-small">
           <div class="stat-card bg-light pd-medium radius-medium t-center">
             <div class=" mn-b-thin">{{ album.totalTracks || 0 }}</div>
-            <div class="t-small t-transp t-uppercase">Tracks</div>
+            <div class="t-small opacity-50 t-uppercase">Tracks</div>
           </div>
           <div class="stat-card bg-light pd-medium radius-medium t-center">
             <div class=" mn-b-thin">{{ formatNumber(album.views) }}</div>
-            <div class="t-small t-transp t-uppercase">Views</div>
+            <div class="t-small opacity-50 t-uppercase">Views</div>
           </div>
         </div>
       </div>
@@ -75,7 +75,7 @@
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
             <IconCalendar class="i-medium t-main" />
             <div>
-              <div class="t-small t-transp t-uppercase">Released</div>
+              <div class="t-small opacity-50 t-uppercase">Released</div>
               <div class="fw-medium ">{{ formatDate(album.releaseDate) }}</div>
             </div>
           </div>
@@ -84,7 +84,7 @@
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
             <IconClock class="i-medium t-main" />
             <div>
-              <div class="t-small t-transp t-uppercase">Duration</div>
+              <div class="t-small opacity-50 t-uppercase">Duration</div>
               <div class="fw-medium ">{{ totalDuration }}</div>
             </div>
           </div>
@@ -93,7 +93,7 @@
           <div v-if="album.label" class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
             <IconDisc class="i-medium t-main" />
             <div>
-              <div class="t-small t-transp t-uppercase">Label</div>
+              <div class="t-small opacity-50 t-uppercase">Label</div>
               <div class="fw-medium ">{{ album.label }}</div>
             </div>
           </div>
@@ -102,7 +102,7 @@
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
             <IconEye class="i-medium t-main" />
             <div>
-              <div class="t-small t-transp t-uppercase">Visibility</div>
+              <div class="t-small opacity-50 t-uppercase">Visibility</div>
               <div class="fw-medium ">{{ album.isPublic ? 'Public' : 'Private' }}</div>
             </div>
           </div>
@@ -122,7 +122,7 @@
             <span 
               v-for="tag in album.tags" 
               :key="tag"
-              class="tag bg-light t-transp pd-thin-big radius-small t-small hover:bg-light cursor-pointer"
+              class="tag bg-light opacity-50 pd-thin-big radius-small t-small hover:bg-light cursor-pointer"
             >
               #{{ tag }}
             </span>

package/src/modules/music/components/pages/Artist.vue

@@ -4,7 +4,7 @@
     <!-- Artist not found -->
     <div v-if="hasLoaded && !artist" class="flex-center flex-column flex pd-extra">
       <h2 class="h2 mn-b-medium">Artist Not Found</h2>
-      <p class="p-regular t-transp mn-b-medium">The artist you are looking for doesn't exist or may have been removed.</p>
+      <p class="p-regular opacity-50 mn-b-medium">The artist you are looking for doesn't exist or may have been removed.</p>
       <Button
         :submit="() => router.push({ name: 'music-home' })"
         class="bg-main "
@@ -128,7 +128,7 @@
             <div class="bg-light pd-medium radius-medium mn-b-medium">
               <h2 class="h3 mn-b-small">Biography</h2>
               <p v-if="artist.bio" class="p-regular">{{ artist.bio }}</p>
-              <p v-else class="p-regular t-transp">No biography available for this artist.</p>
+              <p v-else class="p-regular opacity-50">No biography available for this artist.</p>
             </div>
             
             <!-- Genres -->
@@ -173,7 +173,7 @@
                   
                   <div class="w-100 o-hidden">
                     <p class="p-regular truncate">{{ album.title }}</p>
-                    <p class="p-small t-transp">{{ formatDate(album.releaseDate) }}</p>
+                    <p class="p-small opacity-50">{{ formatDate(album.releaseDate) }}</p>
                   </div>
                 </div>
               </div>
@@ -214,7 +214,7 @@
                   
                   <div class="w-100 o-hidden">
                     <p class="p-regular truncate">{{ single.title }}</p>
-                    <p class="p-small t-transp">{{ formatDate(single.releaseDate) }}</p>
+                    <p class="p-small opacity-50">{{ formatDate(single.releaseDate) }}</p>
                   </div>
                 </div>
               </div>
@@ -252,7 +252,7 @@
               class="bg-light pd-medium radius-medium t-center"
             >
               <p class="p-regular mn-b-small">No releases yet</p>
-              <p class="p-small t-transp">This artist hasn't released any albums or singles yet.</p>
+              <p class="p-small opacity-50">This artist hasn't released any albums or singles yet.</p>
               
               <Button
                 v-if="isOwner"

package/src/modules/music/components/pages/Playlist.vue

@@ -3,7 +3,7 @@
     <!-- Not Found -->
     <div v-if="hasLoaded && !playlist" class="t-center pd-big">
       <h2 class="">Playlist not found</h2>
-      <p class="t-transp fw-medium">The playlist you're looking for doesn't exist or has been removed.</p>
+      <p class="opacity-50 fw-medium">The playlist you're looking for doesn't exist or has been removed.</p>
     </div>
     
     <!-- Playlist Content -->
@@ -23,11 +23,11 @@
         <div class="stats-grid d-grid cols-2 gap-small">
           <div class="stat-card bg-light pd-medium radius-medium t-center">
             <div class=" mn-b-thin">{{ playlistTracks.length }}</div>
-            <div class="t-small t-transp t-uppercase">Tracks</div>
+            <div class="t-small opacity-50 t-uppercase">Tracks</div>
           </div>
           <div class="stat-card bg-light pd-medium radius-medium t-center">
             <div class=" mn-b-thin">{{ formatNumber(playlist.followers || 0) }}</div>
-            <div class="t-small t-transp t-uppercase">Followers</div>
+            <div class="t-small opacity-50 t-uppercase">Followers</div>
           </div>
         </div>
       </div>
@@ -97,7 +97,7 @@
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
               <IconCalendar class="i-medium t-main" />
             <div>
-              <div class="t-small t-transp t-uppercase">Created</div>
+              <div class="t-small opacity-50 t-uppercase">Created</div>
               <div class="fw-medium ">{{ formatDate(playlist.createdAt) }}</div>
             </div>
           </div>
@@ -106,7 +106,7 @@
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
               <IconClock class="i-medium t-main" />
             <div>
-              <div class="t-small t-transp t-uppercase">Duration</div>
+              <div class="t-small opacity-50 t-uppercase">Duration</div>
               <div class="fw-medium ">{{ totalDuration }}</div>
             </div>
           </div>
@@ -115,7 +115,7 @@
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
               <IconRefresh class="i-medium t-main" />
             <div>
-              <div class="t-small t-transp t-uppercase">Updated</div>
+              <div class="t-small opacity-50 t-uppercase">Updated</div>
               <div class="fw-medium ">{{ formatDate(playlist.updatedAt) }}</div>
             </div>
           </div>
@@ -124,7 +124,7 @@
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
               <IconEye class="i-medium t-main" />
             <div>
-              <div class="t-small t-transp t-uppercase">Visibility</div>
+              <div class="t-small opacity-50 t-uppercase">Visibility</div>
               <div class="fw-medium ">{{ playlist.isPublic ? 'Public' : 'Private' }}</div>
             </div>
           </div>
@@ -137,7 +137,7 @@
             <span 
               v-for="tag in playlist.tags" 
               :key="tag"
-              class="tag bg-light t-transp pd-thin-big radius-small t-small hover:bg-light cursor-pointer"
+              class="tag bg-light opacity-50 pd-thin-big radius-small t-small hover:bg-light cursor-pointer"
             >
               #{{ tag }}
             </span>
@@ -147,7 +147,7 @@
         <!-- Description -->
         <div v-if="playlist.description" class="description-section bg-light pd-medium radius-medium mn-b-medium">
           <h3 class="fw-medium mn-b-small">About</h3>
-          <p class="t-transp">{{ playlist.description }}</p>
+          <p class="opacity-50">{{ playlist.description }}</p>
         </div>
       </div>
     </div>
@@ -191,7 +191,7 @@
     <section v-else-if="!isLoading && playlist && !playlistTracks.length" class="empty-section mn-t-big">
       <div class="empty-tracks t-center pd-big bg-light radius-medium">
         <h3 class=" mn-b-small">This playlist is empty</h3>
-        <p class="t-transp fw-medium mn-b-medium">Add some tracks to get started</p>
+        <p class="opacity-50 fw-medium mn-b-medium">Add some tracks to get started</p>
         
         <Button 
           v-if="isOwner || isCollaborator"
@@ -244,7 +244,7 @@
       class="bg-white pd-medium w-m-25r radius-medium"
     >
       <h3 class="mn-b-medium">Delete Playlist</h3>
-      <p class="t-transp mn-b-medium">Are you sure you want to delete "{{ playlist.title }}"? This action cannot be undone.</p>
+      <p class="opacity-50 mn-b-medium">Are you sure you want to delete "{{ playlist.title }}"? This action cannot be undone.</p>
       
       <div class="flex justify-end gap-small">
         <Button 

package/src/modules/music/components/pages/SearchResults.vue

@@ -38,12 +38,12 @@
     
     <div v-else-if="!searchQuery" class="search-empty t-center pd-big">
       <h2 class="mn-b-small">Search for music</h2>
-      <p class="t-transp fw-medium">Find your favorite songs, artists, albums, and playlists</p>
+      <p class="opacity-50 fw-medium">Find your favorite songs, artists, albums, and playlists</p>
     </div>
     
     <div v-else-if="!hasResults" class="search-no-results t-center pd-big">
       <h2 class="mn-b-small">No results found for "{{ searchQuery }}"</h2>
-      <p class="t-transp fw-medium">Please try different keywords or check your spelling</p>
+      <p class="opacity-50 fw-medium">Please try different keywords or check your spelling</p>
     </div>
     
     <div v-else class="search-results">

package/src/modules/music/components/pages/Track.vue

@@ -9,7 +9,7 @@
     <!-- Not Found -->
     <div v-if="hasLoaded && !track" class="t-center pd-big">
       <h2 class="">Track not found</h2>
-      <p class="t-transp fw-medium">The track you're looking for doesn't exist or has been removed.</p>
+      <p class="opacity-50 fw-medium">The track you're looking for doesn't exist or has been removed.</p>
     </div>
 
     <!-- Track Content -->
@@ -42,11 +42,11 @@
         <div class="stats-grid d-grid cols-2 gap-small">
           <div class="stat-card bg-light pd-medium radius-medium t-center">
             <div class=" mn-b-thin">{{ formatNumber(track.playCount) }}</div>
-            <div class="t-small t-transp t-uppercase">Plays</div>
+            <div class="t-small opacity-50 t-uppercase">Plays</div>
           </div>
           <div class="stat-card bg-light pd-medium radius-medium t-center">
             <div class=" mn-b-thin">{{ formatNumber(track.views) }}</div>
-            <div class="t-small t-transp t-uppercase">Views</div>
+            <div class="t-small opacity-50 t-uppercase">Views</div>
           </div>
         </div>
       </div>
@@ -83,7 +83,7 @@
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
             <IconCalendar class="i-medium t-main" />
             <div>
-              <div class="t-small t-transp t-uppercase">Released</div>
+              <div class="t-small opacity-50 t-uppercase">Released</div>
               <div class="fw-medium ">{{ formatDate(track.releaseDate) }}</div>
             </div>
           </div>
@@ -92,7 +92,7 @@
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
             <IconClock class="i-medium t-main" />
             <div>
-              <div class="t-small t-transp t-uppercase">Duration</div>
+              <div class="t-small opacity-50 t-uppercase">Duration</div>
               <div class="fw-medium ">{{ formatDuration(track.duration) }}</div>
             </div>
           </div>
@@ -101,7 +101,7 @@
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
             <IconCheck class="i-medium t-main" />
             <div>
-              <div class="t-small t-transp t-uppercase">Status</div>
+              <div class="t-small opacity-50 t-uppercase">Status</div>
               <div class="fw-medium ">{{ track.status }}</div>
             </div>
           </div>
@@ -110,7 +110,7 @@
           <div class="metadata-card bg-light pd-medium radius-medium flex items-center gap-regular">
             <IconEye class="i-medium t-main" />
             <div>
-              <div class="t-small t-transp t-uppercase">Visibility</div>
+              <div class="t-small opacity-50 t-uppercase">Visibility</div>
               <div class="fw-medium ">{{ track.isPublic ? 'Public' : 'Private' }}</div>
             </div>
           </div>
@@ -148,7 +148,7 @@
             <span 
               v-for="tag in track.tags" 
               :key="tag"
-              class="tag bg-light t-transp pd-thin-big radius-small t-small hover:bg-light cursor-pointer"
+              class="tag bg-light opacity-50 pd-thin-big radius-small t-small hover:bg-light cursor-pointer"
             >
               #{{ tag.name || tag }}
             </span>
@@ -158,13 +158,13 @@
         <!-- Description -->
         <div v-if="track.description" class="description-section bg-light pd-medium radius-medium mn-b-medium">
           <h3 class="fw-medium mn-b-small">About</h3>
-          <p class="t-transp">{{ track.description }}</p>
+          <p class="opacity-50">{{ track.description }}</p>
         </div>
 
         <!-- Lyrics -->
         <div v-if="track.lyrics" class="lyrics-section bg-light pd-medium radius-medium">
           <h3 class="fw-medium mn-b-small">Lyrics</h3>
-          <pre class="t-transp t-small">{{ track.lyrics }}</pre>
+          <pre class="opacity-50 t-small">{{ track.lyrics }}</pre>
         </div>
       </div>
     </div>
@@ -214,7 +214,7 @@
         :trackId="track._id" 
         @added="showAddToPlaylistModal = false"
       /> -->
-      <p class="t-transp">Playlist selector coming soon...</p>
+      <p class="opacity-50">Playlist selector coming soon...</p>
     </Popup>
   </div>
 </template>

package/src/modules/music/components/player/FullscreenPlayer.vue

@@ -85,7 +85,7 @@
         <!-- AUTHOR -->
         <p
           v-if="playerState.currentTrack"
-          class="h3 uppercase t-transp"
+          class="h3 uppercase opacity-50"
         >
           {{ playerState.currentTrack.artist?.name || 'Unknown Artist' }}
         </p>
@@ -129,8 +129,8 @@
       >
 
         <div class="pd-regular w-100 gap-thin flex-nowrap flex flex-v-center">
-          <IconEvents :fill="'rgb(var(--black))'" class="t-transp i-medium"/>
-          <p class="w-100 t-transp t-left">QUEUE</p>
+          <IconEvents :fill="'rgb(var(--black))'" class="opacity-50 i-medium"/>
+          <p class="w-100 opacity-50 t-left">QUEUE</p>
         </div>
 
         <TrackListCard