1.9.2 - Updating colors

Author: quead

dist/assets/css/main.css

@@ -41,7 +41,7 @@
 }
 
 :root {
-  --c-base: #1e232f;
+  --c-base: #212129;
   --c-primary: red;
   --c-primary-active: #d42222;
   --c-primary-active-focus: #bb2222;
@@ -113,6 +113,17 @@ a:active {
   height: 100%;
 }
 
+#app-container:before {
+  content: '';
+  background-image: url(http://blog.marmakoide.org/wp-content/uploads/2012/06/noise-good.png);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.025;
+}
+
 .btn {
   display: inline-block;
   color: var(--c-white);
@@ -388,7 +399,7 @@ a:active {
   height: 330px;
   left: 0;
   top: -230px;
-  background: radial-gradient(ellipse at center, rgba(0, 208, 255, 0.42) 0%, transparent 70%);
+  background: radial-gradient(ellipse at center, rgba(162, 173, 214, 0.42) 0%, transparent 70%);
 }
 
 #youtube-player {
@@ -1432,7 +1443,7 @@ iframe {
 }
 
 #search-video-list .video-item-settings {
-  background-color: rgba(30, 35, 47, 0.6);
+  background-color: rgba(41, 41, 53, 0.5);
 }
 
 #search-video-list::-webkit-scrollbar {
@@ -1464,8 +1475,8 @@ iframe {
   border-radius: 3px;
   padding: 4px 8px;
   margin-top: 2px;
-  text-transform: capitalize;
-  font-size: 11px;
+  text-transform: uppercase;
+  font-size: 10px;
   border: none;
   display: block;
   user-select: none;
@@ -1568,7 +1579,7 @@ iframe {
 }
 
 .video-item-settings > button {
-  background-color: var(--c-light-gray);
+  background-color: var(--c-black);
   color: inherit;
   height: 30px;
   width: 30px;
@@ -1638,7 +1649,7 @@ iframe {
 }
 
 .video-item.active {
-  background-color: var(--c-black);
+  background-color: var(--c-gray);
 }
 
 .video-item.active .video-item-hint {

scss/_common.scss

@@ -135,7 +135,7 @@
             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%);
+            background: radial-gradient(ellipse at center, rgba(162, 173, 214, 0.42) 0%, rgba(0,0,0,0) 70%);
         }
     }
 }

scss/_global.scss

@@ -40,4 +40,14 @@ a {
 #app-container {
     position: relative;
     height: 100%;
+    &:before {
+        content: '';
+        background-image: url(http://blog.marmakoide.org/wp-content/uploads/2012/06/noise-good.png);
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0.025;
+    }
 }

scss/_variables.scss

@@ -60,8 +60,8 @@ $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
-    --c-base: #1e232f;
+    // un albastru smecher de tinut minte #1e232f old -> #17171d #1b2029
+    --c-base: #212129;
     --c-primary: red;
     --c-primary-active: #d42222;
     --c-primary-active-focus: #bb2222;

scss/_videos.scss

@@ -45,7 +45,7 @@ iframe {
     .video-item {
         background-color: var(--c-black);
         &-settings {
-            background-color: rgba(30, 35, 47, 0.6);
+            background-color: rgba(41, 41, 53, 0.5);
         }
     }
     &::-webkit-scrollbar {
@@ -74,8 +74,8 @@ iframe {
         border-radius: 3px;
         padding: 4px 8px;
         margin-top: 2px;
-        text-transform: capitalize;
-        font-size: $f-11;
+        text-transform: uppercase;
+        font-size: $f-10;
         border: none;
         display: block;
         user-select: none;
@@ -163,7 +163,7 @@ iframe {
         justify-content: center;
         transition: all 0.1s ease-in-out;      
         > button {
-            background-color: var(--c-light-gray);
+            background-color: var(--c-black);
             color: inherit;
             height: 30px;
             width: 30px;
@@ -231,7 +231,7 @@ iframe {
         }
     }
     &.active {
-        background-color: var(--c-black);
+        background-color: var(--c-gray);
         .video-item-hint {
             display: inline-block;
         }

src/assets/css/main.css

@@ -41,7 +41,7 @@
 }
 
 :root {
-  --c-base: #1e232f;
+  --c-base: #212129;
   --c-primary: red;
   --c-primary-active: #d42222;
   --c-primary-active-focus: #bb2222;
@@ -113,6 +113,17 @@ a:active {
   height: 100%;
 }
 
+#app-container:before {
+  content: '';
+  background-image: url(http://blog.marmakoide.org/wp-content/uploads/2012/06/noise-good.png);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.025;
+}
+
 .btn {
   display: inline-block;
   color: var(--c-white);
@@ -388,7 +399,7 @@ a:active {
   height: 330px;
   left: 0;
   top: -230px;
-  background: radial-gradient(ellipse at center, rgba(0, 208, 255, 0.42) 0%, transparent 70%);
+  background: radial-gradient(ellipse at center, rgba(162, 173, 214, 0.42) 0%, transparent 70%);
 }
 
 #youtube-player {
@@ -1432,7 +1443,7 @@ iframe {
 }
 
 #search-video-list .video-item-settings {
-  background-color: rgba(30, 35, 47, 0.6);
+  background-color: rgba(41, 41, 53, 0.5);
 }
 
 #search-video-list::-webkit-scrollbar {
@@ -1464,8 +1475,8 @@ iframe {
   border-radius: 3px;
   padding: 4px 8px;
   margin-top: 2px;
-  text-transform: capitalize;
-  font-size: 11px;
+  text-transform: uppercase;
+  font-size: 10px;
   border: none;
   display: block;
   user-select: none;
@@ -1568,7 +1579,7 @@ iframe {
 }
 
 .video-item-settings > button {
-  background-color: var(--c-light-gray);
+  background-color: var(--c-black);
   color: inherit;
   height: 30px;
   width: 30px;
@@ -1638,7 +1649,7 @@ iframe {
 }
 
 .video-item.active {
-  background-color: var(--c-black);
+  background-color: var(--c-gray);
 }
 
 .video-item.active .video-item-hint {