`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/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
index 1daa7b741..83030b7e0 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -3,7 +3,7 @@
 
 .plugin {
   margin: 15px 0;
-  background-color: var(--submenuColor);
+  background-color: pvar(--submenuColor);
 }
 
 .first-row {
@@ -25,10 +25,10 @@
     margin-left: 10px;
 
     my-global-icon {
-      @include apply-svg-color(var(--greyForegroundColor));
+      @include apply-svg-color(pvar(--greyForegroundColor));
 
       &[iconName="npm"] {
-        @include fill-svg-color(var(--greyForegroundColor));
+        @include fill-svg-color(pvar(--greyForegroundColor));
       }
     }
   }
diff --git a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
index 56ea91d0b..b653abfaa 100644
--- a/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
+++ b/client/src/app/+admin/plugins/shared/toggle-plugin-type.scss
@@ -19,12 +19,12 @@
       }
 
       .ui-button.ui-state-active {
-        background-color: var(--mainColor);
-        border-color: var(--mainColor);
+        background-color: pvar(--mainColor);
+        border-color: pvar(--mainColor);
 
         &:hover {
-          background-color: var(--mainHoverColor);
-          border-color: var(--mainHoverColor);
+          background-color: pvar(--mainHoverColor);
+          border-color: pvar(--mainHoverColor);
         }
       }