From 1c253dbb62b64d27c9e393e50d290dfb846c5b05 Mon Sep 17 00:00:00 2001
From: Rafael Cortes <rafael_cortes@outlook.com>
Date: Sat, 7 Oct 2023 16:00:08 -0300
Subject: [PATCH] Estilo do Videos Mobile

---
 assets/css/variables.css |  2 +
 assets/css/videos.css    | 94 +++++++++++++++++++++++++++++++++++++++-
 index.html               |  2 +-
 3 files changed, 96 insertions(+), 2 deletions(-)

diff --git a/assets/css/variables.css b/assets/css/variables.css
index b91b324..81c3e62 100644
--- a/assets/css/variables.css
+++ b/assets/css/variables.css
@@ -3,8 +3,10 @@
     --bg-color: #1f2021;
     --text-color: #fff;
     --black-color: #161617;
+    --black40-color: rgba(21, 22, 23, .4);
     --black50-color: rgba(21, 22, 23, .5);
     --white10-color: rgba(255, 255, 255, .1);
+    --white20-color: rgba(255, 255, 255, .2);
     --gray-light: #ddd;
     --scrollbar-color: #c0c0c0;
 }
\ No newline at end of file
diff --git a/assets/css/videos.css b/assets/css/videos.css
index c0989fc..4bf41b0 100644
--- a/assets/css/videos.css
+++ b/assets/css/videos.css
@@ -1 +1,93 @@
-#videos {}
\ No newline at end of file
+#videos {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    > div {
+        flex-direction: column;
+    }
+    .player {
+        padding: 10px;
+        margin-bottom: 20px;
+        .video {
+            position: relative;
+            > video {
+                width: 100%;
+            }
+            .overlay {
+                background-color: var(--black50-color);
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: -1px;
+                right: -1px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                cursor: pointer;
+                opacity: 1;
+                transition: all 0.2s ease-in-out;
+                &:hover {
+                    background-color: var(--black40-color);
+                }
+                &:active img {
+                    transform: translateY(1px);
+                }
+            }
+        }
+        &.playing {
+            .overlay {
+                opacity: 0;
+                z-index: -1;
+            }
+        }
+        > h3 {
+            margin: 10px 0;
+            font-size: 16px;
+        }
+        > p {
+            font-size: 12px;
+        }
+    }
+    & ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        > li {
+            display: flex;
+            gap: 10px;
+            padding: 10px;
+            cursor: pointer;
+            font-size: 14px;
+            > div {
+                flex: 1;
+            }
+            > figure {
+                position: relative;
+                margin: 0;
+                display: flex;
+                > figcaption {
+                    position: absolute;
+                    bottom: 2px;
+                    left: 2px;
+                    background-color: var(--bg-color);
+                    font-size: 12px;
+                    padding: 3px;
+                    border-radius: 3px;
+                }
+            }
+            &.active {
+                background-color: var(--white10-color);
+            }
+            &:hover {
+                background-color: var(--white20-color);
+            }
+            &:active {
+                transform: translateY(1px);
+            }
+        }
+        > li + li {
+            border-top: var(--white10-color) 1px solid;
+        }
+    }
+}
diff --git a/index.html b/index.html
index 13183a3..d514f22 100644
--- a/index.html
+++ b/index.html
@@ -144,7 +144,7 @@ <h3>Starting XI: How Orlando City will line up on the road against Charlotte FC<
 
         <section id="videos">
             <div class="container">
-                <div class="player">
+                <div class="player playing">
                     <div class="video">
                         <video src="https://cdn.videvo.net/videvo_files/video/free/2022-11/large_watermarked/221017_01_Urban%20Football_4k_062_preview.mp4"></video>
                         <div class="overlay">