css variables for stream

src/routes/Detail/StreamsList/Stream/styles.less

@@ -1,49 +1,15 @@
 @import 'stremio-colors';
 
-@stream-width: 360px;
-@spacing: max(12px, ceil((@stream-width * 0.04)));
-@progress-height: 5px;
-
 .stream-container {
-    width: @stream-width;
-
-    .logo-container {
-        margin: @spacing 0 @spacing @spacing;
-    }
-
-    .source-name {
-        font-size: 13px;
-        margin: @spacing 0 @spacing @spacing;
-    }
-
-    .text-container {
-        min-height: ceil((@stream-width * 0.16));
-        padding: @spacing;
-
-        .title {
-            font-size: 11px;
-        }
-
-        .subtitle {
-            font-size: 11px;
-        }
-
-        :not(:last-child) {
-            margin-bottom: (@spacing * 0.5);
-        }
-    }
-
-    .play-container {
-        width: floor((@stream-width * 0.08));
-        padding: @spacing @spacing @spacing 0;
-    }
-
-    .progress {
-        height: @progress-height;
-    }
+    --stream-width: 360px;
+    --spacing: 8px;
+    --source-name-font-size: 13px;
+    --title-font-size: 11px;
+    --subtitle-font-size: 11px;
 }
 
 .stream-container {
+    width: var(--stream-width);
     background-color: @colorglass;
 
     .flex-row-container {
@@ -56,6 +22,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            margin: var(--spacing) 0 var(--spacing) var(--spacing);
 
             .logo {
                 width: 100%;
@@ -67,6 +34,8 @@
             flex: 1;
             display: flex;
             align-items: center;
+            margin: var(--spacing) 0 var(--spacing) var(--spacing);
+            font-size: var(--source-name-font-size);
             color: @colorwhite;
             word-break: break-all; //Firefox doesn't support { break-word }
             word-break: break-word;
@@ -74,24 +43,36 @@
 
         .text-container {
             flex: 3;
+            min-height: calc(0.2 * var(--stream-width));
+            padding: var(--spacing);
             display: flex;
             flex-direction: column;
             justify-content: center;
 
             .title {
+                font-size: var(--title-font-size);
                 color: @colorwhite;
+                word-break: break-all;
                 word-break: break-word;
             }
 
             .subtitle {
+                font-size: var(--subtitle-font-size);
                 color: @colorwhite;
+                word-break: break-all;
                 word-break: break-word;
             }
+
+            :not(:last-child) {
+                margin-bottom: calc(0.5 * var(--spacing));
+            }
         }
 
         .play-container {
+            width: calc(0.07 * var(--stream-width));
             display: flex;
             align-items: center;
+            padding: var(--spacing) var(--spacing) var(--spacing) 0;
 
             .play {
                 width: 100%;
@@ -101,9 +82,11 @@
     }
 
     .progress-container {
+        height: var(0.5 * var(--spacing));
         background-color: @colorprim;
 
         .progress {
+            height: 100%;
             background-color: @colorprimlight;
         }
     }

src/routes/Detail/VideosList/Video/styles.less

@@ -48,7 +48,6 @@
             flex-direction: column;
             justify-content: center;
 
-
             .title {
                 font-size: var(--title-font-size);
                 color: @colorwhite;