1.9.2 - Updating player colors

Author: quead

dist/assets/css/main.css

@@ -1,6 +1,6 @@
 .loading-app {
     position: fixed;
-    color: var(--c-primary);
+    color: var(--c-white);
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -123,9 +123,20 @@
     }
     &-feed {
         z-index: 1;
+        overflow: hidden;
         .app-content {
             padding: 0 20px;
         }
+        &:before {
+            content: '';
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 330px;
+            left: 0;
+            top: -230px;
+            background: radial-gradient(ellipse at center, rgba(0, 208, 255, 0.42) 0%, rgba(0,0,0,0) 70%);
+        }
     }
 }
 

scss/_common.scss

@@ -167,7 +167,7 @@
 .duration-range-container {
     position: relative;
     height: 9px;
-    background-color: var(--c-light-gray);
+    background-color: var(--c-gray);
     width: 100%;
     margin-top: 10px;
     margin-bottom: 10px;
@@ -222,7 +222,7 @@
     position: relative;
     width: 80px;
     height: 8px;
-    background-color: var(--c-light-gray);
+    background-color: var(--c-gray);
     border-radius: 5px;
     .volume-input-shadow {
         position: absolute;

scss/_controls.scss

@@ -10,7 +10,7 @@ select {
     &:before {
         content: '';
         display: block;
-        background-color: var(--c-black);
+        background-color: var(--c-gray);
         height: 20px;
         width: 40px;
         border-radius: 50px;
@@ -52,11 +52,11 @@ input[type="radio"]:checked {
     .form-field {
         margin-left: auto;
         padding: 10px 15px;
-        border: 1px solid var(--c-gray);
+        border: 1px solid var(--c-black);
         color: var(--c-white);
         min-width: 250px;
         font-weight: 300;        
-        background-color: var(--c-black);
+        background-color: var(--c-gray);
         border-radius: 0;
         outline: 0;
         &:disabled {

scss/_forms.scss

@@ -145,10 +145,10 @@
 
 .logo-svg {
     display: block;
-    @include icon-svg(logo, 111px, 25px, white, white, #17171d);
+    @include icon-svg(logo, 111px, 25px, red, white, white);
     transition: all 0.1s ease-out;
     &:hover {
-        @include icon-svg(logo, 111px, 25px, red, white, white);
+        @include icon-svg(logo, 111px, 25px, white, white, #17171d);
     }
 }
 
@@ -194,7 +194,7 @@
 .device-bar {
     height: 45px;
     width: 100%;
-    background-color: var(--c-black);
+    background-color: var(--c-gray);
     position: fixed;
     top: 0;
     z-index: 2;

scss/_header.scss

@@ -59,7 +59,7 @@
             position: fixed;
             height: 100%;
             z-index: 2;
-            background-color: var(--c-black);
+            background-color: #14171f;
             transition: all 0.6s ease-in-out;
         }
         &-2,

scss/_responsive.scss

@@ -19,7 +19,7 @@
         margin: 0;
         outline: 0;
         position: relative;
-        background-color: rgba(255, 255, 255, 0.1);
+        background-color: var(--c-gray);
         color: inherit;
         z-index: 1;
         transition: all 0.1s ease-out;

scss/_search.scss

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

scss/_variables.scss

@@ -45,7 +45,7 @@ iframe {
     .video-item {
         background-color: var(--c-black);
         &-settings {
-            background-color: rgba(97, 97, 105, 0.4);
+            background-color: rgba(30, 35, 47, 0.6);
         }
     }
     &::-webkit-scrollbar {
@@ -105,8 +105,9 @@ iframe {
         font-size: $f-14;
         margin: 0;
     }
-    .video-item-autor {
+    &-autor {
         font-size: $f-12;
+        color: #888888;
     }
     &-image {
         display: block;
@@ -383,6 +384,7 @@ iframe {
     height: calc(100% - 246px);
     width: calc(100% - 40px);
     max-height: none;
+    background-color: var(--c-gray);
     .video-item {
         &:first-child {
             display: none !important;

scss/_videos.scss

@@ -7,10 +7,6 @@
     color: var(--c-white);
 }
 
-.logo-svg {
-    @include icon-svg(logo, 111px, 25px, red, white, white);
-}
-
 .col-2,
 .col-3 {
     background-color: var(--c-white);
@@ -113,7 +109,7 @@ nav {
         &-settings {
             background-color: transparent;
         }
-        &-content > p {
+        &-content {
             color: var(--c-white);
         }
     }
@@ -163,7 +159,7 @@ nav {
     background-color: var(--c-white);
     &.grid-list {
         .video-item {
-            &-content > p {
+            &-content {
                 color: var(--c-white);
             }
         }
@@ -260,4 +256,8 @@ input[type="checkbox"]:checked + label .round-check:before, input[type="radio"]:
         background-color: var(--c-primary);
         border: 1px solid var(--c-primary-active);
     }
+}
+
+.app-feed:before {
+    display: none;
 }