feat: Adicionando o icone de estrela a capa do video

fga-eps-mds · Dec 6, 2024 · 22a15ee · 22a15ee
1 parent d010ec5
commit 22a15ee
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/src/app/pages/video/video.component.css b/src/app/pages/video/video.component.css
@@ -70,6 +70,7 @@
   0% {
     transform: translateX(100%);
   }
+
   100% {
     transform: translateX(-100%);
   }
@@ -112,4 +113,28 @@
 
 .favorite-button:focus {
   outline: none;
+}
+
+/* Estilo para o ícone da estrela */
+.star-icon {
+  position: absolute;
+  top: -5px;
+  /* Posição ajustada para mais em cima */
+  right: 2px;
+  /* Posição ajustada para o canto direito */
+  font-size: 32px;
+  /* Tamanho da estrela */
+  color: #000;
+  /* Cor preta inicialmente */
+  z-index: 2;
+  transition: color 0.3s ease, transform 0.3s ease;
+  /* Transições suaves para cor e escala */
+}
+
+/* Estilo da estrela ao passar o mouse */
+.star-icon:hover {
+  color: #fefb00;
+  /* Cor amarela ao passar o mouse */
+  transform: scale(1.1);
+  /* Leve aumento de tamanho */
 }
diff --git a/src/app/pages/video/video.component.html b/src/app/pages/video/video.component.html
@@ -19,6 +19,8 @@ <h6 class="text-grey-brand text-[13px]">
         <div class="video-description-box">
           <h6 class="description-text" title="{{ video.title }}">{{ video.title }}</h6>
         </div>
+        <!-- Ícone de estrela dentro do vídeo -->
+        <div class="star-icon">★</div>
       </div>
     </div>
   </div>