2.0 - Updating UI

Author: quead

dist/assets/css/main.css

@@ -41,7 +41,7 @@
 }
 
 :root {
-  --c-base: #1b1b23;
+  --c-base: #272731;
   --c-primary: red;
   --c-primary-active: #d42222;
   --c-primary-active-focus: #bb2222;
@@ -113,6 +113,7 @@ a:active {
 #app-container {
   position: relative;
   height: 100%;
+  background: linear-gradient(120deg, rgba(255, 38, 38, 0.1) 0%, var(--c-base) 30%);
 }
 
 .btn {
@@ -219,11 +220,17 @@ a:active {
 
 .col-1 {
   width: 320px;
+  box-shadow: 10px 0px 20px rgba(0, 0, 0, 0.05);
+}
+
+.col-2, .col-3 {
+  background-color: rgba(0, 0, 0, 0.25);
 }
 
 .col-2 {
   width: calc(40% - var(--menu-diff));
   left: calc(60% - var(--menu-diff));
+  background: linear-gradient(-90deg, rgba(255, 0, 0, 0.05) 0%, #1d1d25 30%);
 }
 
 .col-3 {
@@ -1379,12 +1386,11 @@ nav a:hover {
 
 nav a.is-active, nav a:active {
   opacity: 1;
-  color: var(--c-primary);
-  text-shadow: 0 0 10px var(--c-primary);
+  color: var(--c-white);
 }
 
 nav a.is-active .fa, nav a:active .fa {
-  color: var(--c-primary);
+  color: var(--c-white);
 }
 
 nav a.is-active .description, nav a:active .description {
@@ -1433,15 +1439,14 @@ nav a.is-active .description, nav a:active .description {
   color: inherit;
   z-index: 1;
   transition: all 0.1s ease-out;
-  border-bottom: 1px solid #2f2f3a;
 }
 
 #main-search input[type="text"]::-webkit-input-placeholder {
   color: rgba(255, 255, 255, 0.3);
 }
 
 #main-search input[type="text"]:focus + .search-icon {
-  color: var(--c-white);
+  color: rgba(255, 255, 255, 0.6);
 }
 
 #main-search .clear-button {
@@ -1541,7 +1546,7 @@ iframe {
 }
 
 .video-item-head {
-  background-color: rgba(255, 255, 255, 0.03);
+  background-color: rgba(255, 255, 255, 0.04);
   color: var(--c-white);
   width: 100%;
   height: 39px;
@@ -1815,7 +1820,7 @@ iframe {
 
 #playlist-video-list .playlist-video-content::-webkit-scrollbar {
   width: 6px;
-  background-color: var(--c-dark-gray);
+  background-color: transparent;
 }
 
 #playlist-video-list .playlist-video-content::-webkit-scrollbar-thumb {

scss/_grid.scss

@@ -13,16 +13,17 @@
         width: 320px;
         box-shadow: 10px 0px 20px rgba(0, 0, 0, 0.05);
     }
+    &-2,
+    &-3 {
+        background-color: rgba(0, 0, 0, 0.25);
+    }
     &-2 {
         width: calc(40% - var(--menu-diff));
         left: calc(60% - var(--menu-diff));
+        background: linear-gradient(-90deg, rgba(255, 0, 0, 0.05) 0%, #1d1d25 30%);
     }
     &-3 {
         width: calc(60% - var(--menu-diff));
         left: calc(-40% + var(--menu-diff));
     }
-    &-2,
-    &-3 {
-        background-color: rgba(0, 0, 0, 0.25);
-    }
 }

scss/_navbar.scss

@@ -38,10 +38,9 @@ nav {
         &.is-active,
         &:active {
             opacity: 1;
-            color: var(--c-primary);
-            text-shadow: 0 0 10px var(--c-primary);
+            color: var(--c-white);
             .fa {
-                color: var(--c-primary);
+                color: var(--c-white);
             }
             .description {
                 text-shadow: none;

src/assets/css/main.css

@@ -223,20 +223,21 @@ a:active {
   box-shadow: 10px 0px 20px rgba(0, 0, 0, 0.05);
 }
 
+.col-2, .col-3 {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
 .col-2 {
   width: calc(40% - var(--menu-diff));
   left: calc(60% - var(--menu-diff));
+  background: linear-gradient(-90deg, rgba(255, 0, 0, 0.05) 0%, #1d1d25 30%);
 }
 
 .col-3 {
   width: calc(60% - var(--menu-diff));
   left: calc(-40% + var(--menu-diff));
 }
 
-.col-2, .col-3 {
-  background-color: rgba(0, 0, 0, 0.25);
-}
-
 .loading-app {
   position: fixed;
   color: var(--c-white);
@@ -1385,12 +1386,11 @@ nav a:hover {
 
 nav a.is-active, nav a:active {
   opacity: 1;
-  color: var(--c-primary);
-  text-shadow: 0 0 10px var(--c-primary);
+  color: var(--c-white);
 }
 
 nav a.is-active .fa, nav a:active .fa {
-  color: var(--c-primary);
+  color: var(--c-white);
 }
 
 nav a.is-active .description, nav a:active .description {