2.0 - Updating UI

Author: quead

scss/_global.scss

@@ -42,4 +42,5 @@ a {
 #app-container {
     position: relative;
     height: 100%;
+    background: linear-gradient(120deg, rgba(255, 38, 38, 0.1) 0%, var(--c-base) 30%);
 }

scss/_grid.scss

@@ -11,6 +11,7 @@
     position: relative;
     &-1 {
         width: 320px;
+        box-shadow: 10px 0px 20px rgba(0, 0, 0, 0.05);
     }
     &-2 {
         width: calc(40% - var(--menu-diff));
@@ -20,4 +21,8 @@
         width: calc(60% - var(--menu-diff));
         left: calc(-40% + var(--menu-diff));
     }
+    &-2,
+    &-3 {
+        background-color: rgba(0, 0, 0, 0.25);
+    }
 }

scss/_search.scss

@@ -35,12 +35,11 @@
         color: inherit;
         z-index: 1;
         transition: all 0.1s ease-out;
-        border-bottom: 1px solid #2f2f3a;
         &::-webkit-input-placeholder {
             color: rgba(255, 255, 255, 0.3);
         }
         &:focus + .search-icon {
-            color: var(--c-white);
+            color: rgba(255, 255, 255, 0.6);
         }
     }
     .clear-button {

scss/_variables.scss

@@ -61,7 +61,7 @@ $f-32: 32px;
 // If you don't use darken and other sass functions use this
 :root {
     // un albastru smecher de tinut minte #1e232f old -> #17171d #1b2029
-    --c-base: #1b1b23;
+    --c-base: #272731;
     --c-primary: red;
     --c-primary-active: #d42222;
     --c-primary-active-focus: #bb2222;

scss/_videos.scss

@@ -61,7 +61,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;
@@ -307,7 +307,7 @@ iframe {
 
         &::-webkit-scrollbar {
             width: 6px;
-            background-color: var(--c-dark-gray);
+            background-color: transparent;
         }
 
         &::-webkit-scrollbar-thumb {

src/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,6 +220,7 @@ a:active {
 
 .col-1 {
   width: 320px;
+  box-shadow: 10px 0px 20px rgba(0, 0, 0, 0.05);
 }
 
 .col-2 {
@@ -231,6 +233,10 @@ a:active {
   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);
@@ -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 {