From e31498f7df32e4e476dcb448d5166caedc35de2d Mon Sep 17 00:00:00 2001
From: svetlagasheva <svetulka_24@mail.bg>
Date: Wed, 2 Jan 2019 16:03:05 +0200
Subject: [PATCH] video styles refactored

---
 .../Detail/VideosList/Video/styles.less       | 23 +++++++++----------
 src/routes/Detail/VideosList/styles.less      | 18 ++++++++-------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/routes/Detail/VideosList/Video/styles.less b/src/routes/Detail/VideosList/Video/styles.less
index 0da43ffe0..a6d165be0 100644
--- a/src/routes/Detail/VideosList/Video/styles.less
+++ b/src/routes/Detail/VideosList/Video/styles.less
@@ -9,7 +9,7 @@
 
         .poster-container {
             flex: 1;
-            margin: var(--video-spacing) 0 var(--video-spacing) var(--video-spacing);
+            margin: var(--spacing) 0 var(--spacing) var(--spacing);
 
             .poster {
                 display: block;
@@ -31,14 +31,13 @@
 
         .info-container {
             flex: 3;
-            min-height: calc(0.2 * var(--video-width));
-            padding: var(--video-spacing);
+            min-height: calc(var(--video-width) * 0.2);
+            padding: var(--spacing);
             display: flex;
             flex-direction: column;
             justify-content: center;
 
             .title {
-                font-size: var(--video-title-font-size);
                 line-height: 1.2em;
                 color: var(--color-surfacelighter);
                 word-break: break-all; //Firefox doesn't support { break-word }
@@ -46,7 +45,7 @@
             }
 
             .released-date {
-                font-size: var(--video-released-date-font-size);
+                font-size: 90%;
                 color: var(--color-surface);
             }
 
@@ -54,17 +53,17 @@
                 display: flex;
 
                 .upcoming-label, .watched-label {
-                    font-size: var(--video-label-font-size);
+                    font-size: 80%;
                     font-weight: 500;
                     line-height: 1.5;
-                    border-width: var(--video-label-border-width);
+                    border-width: calc(var(--spacing) * 0.25);
                     border-style: solid;
                     padding: 0 0.6em;
                     color: var(--color-surfacelighter);
                 }
 
                 .upcoming-label {
-                    margin-right: var(--video-spacing);
+                    margin-right: var(--spacing);
                     border-color: var(--color-signal5);
                 }
 
@@ -74,15 +73,15 @@
             }
 
             >:not(:last-child) {
-                margin-bottom: calc(0.5 * var(--video-spacing));
+                margin-bottom: calc(var(--spacing) * 0.5);
             }
         }
 
         .arrow-container {
-            width: calc(0.07 * var(--video-width));
+            width: calc(var(--video-width) * 0.07);
             display: flex;
             align-items: center;
-            padding: var(--video-spacing) var(--video-spacing) var(--video-spacing) 0;
+            padding: var(--spacing) var(--spacing) var(--spacing) 0;
 
             .arrow {
                 width: 100%;
@@ -92,7 +91,7 @@
     }
 
     .progress-container {
-        height: calc(0.5 * var(--video-spacing));
+        height: calc(var(--spacing) * 0.5);
         background-color: var(--color-primarydark);
 
         .progress {
diff --git a/src/routes/Detail/VideosList/styles.less b/src/routes/Detail/VideosList/styles.less
index cc504a348..73a645e92 100644
--- a/src/routes/Detail/VideosList/styles.less
+++ b/src/routes/Detail/VideosList/styles.less
@@ -1,10 +1,12 @@
 .videos-list-container {
+    width: calc(var(--video-width) + var(--spacing) * 6);
     flex-direction: column;
     padding: calc(3 * var(--spacing)) 0;
     background: var(--color-backgrounddarker40);
 
     .seasons-bar {
-        height: var(--seasons-bar-height);
+        height: calc(var(--video-width) * 0.14);
+        width: 100%;
         display: flex;
         justify-content: space-between;
         margin-bottom: var(--spacing);
@@ -12,7 +14,7 @@
 
         .control-bar-button {
             cursor: pointer;
-            width: 258px;
+            flex: 3;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -34,8 +36,8 @@
         }
 
         .button-container {
-            width: calc(1.5 * var(--seasons-bar-height));
             cursor: pointer;
+            flex: 1;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -54,7 +56,7 @@
 
     .scroll-container {
         flex: 1;
-        width: calc(var(--video-width) + 4 * var(--spacing));
+        width: calc(var(--video-width) + var(--spacing) * 4);
         padding: 0 calc(2 * var(--spacing));
         margin: 0 var(--spacing);
         overflow-y: auto;
@@ -66,7 +68,7 @@
     }
 
     .scroll-container::-webkit-scrollbar {
-        width: var(--spacing);
+        width: var(--spacing) !important;
     }
 
     .scroll-container::-webkit-scrollbar-thumb {
@@ -82,16 +84,16 @@
     --border-color: var(--color-primarylight);
 
     .popup-content {
-        cursor: pointer;
         width: 258px;
         background-color: var(--color-backgrounddark);
-        
+
         .season {
+            cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 16px;
-            width: 258px;
+            width: 100%;
             border-top: 1px solid var(--color-primarylight);
             color: var(--color-surfacelight);