💄 feat: Estilização CSS da Section Playlist

assets/css/main-content.css

@@ -3,11 +3,27 @@ body {
     overflow: hidden;
 }
 
-.main-container {
+/* main {
+    padding-top: 2px;
+    margin-left: 312px;
     max-width: 80vw;
     height: 100vh;
+} */
+
+.main-container {
+    padding-top: 2px;
     margin-left: 312px;
-    margin-top: 12px;
+    max-width: 80vw;
+    height: 100vh;
+    z-index: 1;
+}
+
+.main-container::-webkit-scrollbar-thumb {
+    visibility: hidden;
+}
+
+.main-container:hover::-webkit-scrollbar-thumb {
+    visibility: visible;
 }
 
 .header-navigation {
@@ -16,8 +32,11 @@ body {
     align-items: center;
     padding: 16px;
     margin: 10px;
-    border-radius: 8px;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
     background-color: var(--color-black-two);
+    position: relative;
+    z-index: 1;
 }
 
 .header-navigation .navigation {
@@ -82,6 +101,12 @@ body {
     overflow: hidden;
     white-space: nowrap;
     outline: none;
+    transition: 0.4s;
+    cursor: pointer;
+}
+
+.header-search:hover {
+    border: 1px solid var(--color-white);
 }
 
 .header-login .subscribe {
@@ -94,6 +119,7 @@ body {
 }
 
 .header-login .subscribe:hover {
+    transform: scale(1.04);
     color: var(--color-white);
 }
 
@@ -109,5 +135,47 @@ body {
 }
 
 .header-login .login:hover {
-    transform: scale(1.05);
+    transform: scale(1.04);
+}
+
+/* Main Playlist */
+.playlist-container {
+    display: flex;
+    flex-direction: column;
+    background: linear-gradient(var(--color-black-three), var(--color-black-two) 100%);
+    overflow: auto;
+    margin: -20px 10px 0 10px;
+    position: relative;
+    z-index: -1;
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
+    color: var(--color-white);
+    height: 468px;
+}
+
+#result-playlists {
+    margin: 24px;
+}
+
+.playlist {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.playlist #greeting {
+    font-size: 32px;
+    font-weight: 700;
+}
+
+.playlist .session {
+    color: var(--color-gray);
+    font-size: 14px;
+    font-weight: 700;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.playlist .session:hover {
+    text-decoration: underline;
 }

assets/css/sidebar-footer.css

@@ -1,7 +1,7 @@
 /* Geral */
 body {
     background-color: var(--color-black);
-    font-family: var(--font);
+    font-family: var(--font-dm-sans);
 }
 
 ::-webkit-scrollbar {
@@ -334,4 +334,8 @@ svg {
     border-radius: 40px;
     cursor: pointer;
     flex-shrink: 0;
+}
+
+#artistList {
+    display: none;
 }

assets/css/vars.css

@@ -1,16 +1,45 @@
 :root {
     /* Colors */
-    --color-black: #000;
+    --color-black: #000;            /*--text-base-dark*/
     --color-black-two: #121212;
     --color-black-three: #242424;
     --color-gray: #b3b3b3;
     --color-gray-two: #878787;
-    --color-gray-three: #a7a7a7;
-    --color-white: #fff;
+    --color-gray-three: #a7a7a7;    /*--text-sub*/
+    --color-white: #fff;            /*--text-base-light*/
     --color-purple: #ae2896;
     --color-blue: #509bf5;
     --bg-icon:#131313;
+    --bg-top-bar: #61616142;
     --bg-arrow-color:rgba(0,0,0,7);
+
+    /* Colors Cards */
+    --card1: rgb(0, 100, 80);
+    --card2: rgb(132, 0, 231);
+    --card3: rgb(30, 50, 100);
+    --card4: rgb(140, 25, 50);
+    --card5: rgb(232, 17, 91);
+    --card6: rgb(83, 122, 161);
+    --card7: rgb(142, 102, 172);
+    --card8: rgb(20, 138, 8);
+    --card9: rgb(30, 50, 100);
+    --card10: rgb(233, 20, 41);
+    --card11: rgb(80, 55, 80);
+    --card12: rgb(216, 64, 0);
+    --card13: rgb(186, 93, 7);
+    --card14: rgb(0, 30, 80);
+    --card15: rgb(60, 30, 80);
+
+    --grid-gap: 24px;
+    --column-count: 5;
+
     /* Font */
-    --font: 'DM Sans', sans-serif;
+    --font-dm-sans: 'DM Sans', sans-serif;
+}
+
+/* Media Querys */
+@media screen and (max-width: 767px) {
+}
+
+@media screen and (min-width: 768px) and (max-width: 1274px) {
 }