`fitWidth` for `video-miniature`, fluid grid (#2830)

* Fluid abstract video list

* normalize timestamp display on miniatures

* use grid for abstract-video-list

- refactor scss function var to pvar to avoid overriding css variables
- move fluid-grid margins to adapt-margin-content-width mixin for maintainability
- fix video-miniature-name margin-top on small screen

* move sceenratio function in a mixin

* display no miniature avatar in channel videos view

2 files changed, 7 insertions, 7 deletions

diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss
index 2371c8ae5..cc1591ee8 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.scss
+++ b/client/src/app/+signup/+register/custom-stepper.component.scss
@@ -28,7 +28,7 @@ header {
       margin-bottom: 10px;
 
       my-global-icon {
-        @include apply-svg-color(var(--mainBackgroundColor));
+        @include apply-svg-color(pvar(--mainBackgroundColor));
 
         width: 22px;
         height: 22px;
@@ -42,13 +42,13 @@ header {
     &.active,
     &.completed {
       .step-index {
-        border-color: var(--mainColor);
-        background-color: var(--mainColor);
-        color: var(--mainBackgroundColor);
+        border-color: pvar(--mainColor);
+        background-color: pvar(--mainColor);
+        color: pvar(--mainBackgroundColor);
       }
 
       .step-label {
-        color: var(--mainColor);
+        color: pvar(--mainColor);
       }
     }
 
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index e135b5cb4..6a7e361e3 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -39,7 +39,7 @@
       ngb-accordion ::ng-deep {
         .btn {
           font-weight: $font-semibold !important;
-          color: var(--mainForegroundColor) !important;
+          color: pvar(--mainForegroundColor) !important;
         }
       }
     }
@@ -94,7 +94,7 @@ button {
     margin-bottom: 20px;
 
     ::ng-deep .loader div {
-      border-color: var(--mainColor) transparent transparent transparent;
+      border-color: pvar(--mainColor) transparent transparent transparent;
     }
 
     & + div {