`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

4 files changed, 7 insertions, 7 deletions

diff --git a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
index ba8d56689..dd990c42b 100644
--- a/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
+++ b/client/src/app/+my-account/my-account-subscriptions/my-account-subscriptions.component.scss
@@ -19,7 +19,7 @@
       width: fit-content;
       display: flex;
       align-items: baseline;
-      color: var(--mainForegroundColor);
+      color: pvar(--mainForegroundColor);
 
       .video-channel-display-name {
         font-weight: $font-semibold;
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
index 144c2440b..76fb2cde0 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
@@ -30,7 +30,7 @@
       width: fit-content;
       display: flex;
       align-items: baseline;
-      color: var(--mainForegroundColor);
+      color: pvar(--mainForegroundColor);
 
       .video-channel-display-name {
         font-weight: $font-semibold;
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
index d47810566..3f2c345d2 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
@@ -3,7 +3,7 @@
 @import '_miniature';
 
 .playlist-info {
-  background-color: var(--submenuColor);
+  background-color: pvar(--submenuColor);
   margin-left: -15px;
   margin-top: -$sub-menu-margin-bottom;
 
@@ -14,7 +14,7 @@
 
   /* fix ellipsis dots background color */
   ::ng-deep .miniature-name::after {
-    background-color: var(--submenuColor) !important;
+    background-color: pvar(--submenuColor) !important;
   }
 }
 
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
index a3422c239..67a58d8d5 100644
--- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
+++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss
@@ -84,7 +84,7 @@ my-edit-button {
       .video-bottom,
       .video-bottom .video-miniature-information {
         /* same width than a.video-thumbnail */
-        max-width: 223px !important;
+        max-width: $video-thumbnail-width !important;
       }
     }
   }
@@ -110,7 +110,7 @@ my-edit-button {
     ::ng-deep {
       .action-button {
         /* same width than a.video-thumbnail */
-        width: 223px;
+        width: $video-thumbnail-width;
       }
     }
   }
@@ -124,7 +124,7 @@ my-edit-button {
         flex-direction: column;
 
         .video-miniature-name {
-          max-width: 223px;
+          max-width: $video-thumbnail-width;
         }
       }
     }