`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

1 files changed, 6 insertions, 6 deletions

diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss
index 1de2f43bd..692a81daa 100644
--- a/client/src/app/header/suggestion.component.scss
+++ b/client/src/app/header/suggestion.component.scss
@@ -5,21 +5,21 @@ a {
   width: 100%;
 
   &, &:hover {
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
 
     &.focus-visible {
-      background-color: var(--mainHoverColor);
-      color: var(--mainBackgroundColor);
+      background-color: pvar(--mainHoverColor);
+      color: pvar(--mainBackgroundColor);
     }
   }
 }
 
 .bg-gray {
-  background-color: var(--mainBackgroundColor);
+  background-color: pvar(--mainBackgroundColor);
 }
 
 .text-gray-light {
-  color: var(--mainForegroundColor);
+  color: pvar(--mainForegroundColor);
 }
 
 my-global-icon {
@@ -28,5 +28,5 @@ my-global-icon {
   top: -2px;
   margin: 5px;
 
-  @include apply-svg-color(var(--mainForegroundColor));
+  @include apply-svg-color(pvar(--mainForegroundColor));
 }