`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

diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index 909ae5c21330078da2f5f0a14b1443973ce9df0a..154031939d1580b6def6a2b4af21351efb0f519f 100644 (file)
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -27,7 +27,7 @@
     margin-right: 5px;
 
     &.category {
-      background-color: var(--mainColor);
+      background-color: pvar(--mainColor);
     }
   }
 }

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 8f1ff21a55422246e155ad31acaf9ea4927691aa..b45ca58da51cd831ebf335db0619f134c8c28b84 100644 (file)
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -19,6 +19,7 @@
         <div class="no-results my-5" i18n *ngIf="getVideosOf(videoChannel).length === 0">This channel doesn't have any videos.</div>
 
         <my-video-miniature
+          class="pr-2"
           *ngFor="let video of getVideosOf(videoChannel)"
           [video]="video" [user]="user" [displayVideoActions]="true"
         ></my-video-miniature>

diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.scss b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
index 14189ff11e119726a6f2173886c23d4fca60a1ef..f2d752eb581fe0297a6095c24b582575d4964b4f 100644 (file)
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.scss
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.scss
@@ -14,12 +14,12 @@ a {
   display: inline-block;
 
   &, &:hover {
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
   }
 
   span {
     font-size: 80%;
-    color: var(--inputPlaceholderColor);
+    color: pvar(--inputPlaceholderColor);
   }
 }
 

diff --git a/client/src/app/+admin/follows/following-list/following-list.component.scss b/client/src/app/+admin/follows/following-list/following-list.component.scss
index 563f8d2bccbe697a6bc24e2bfa71774275913626..b108218b80fc8ffc01a983928c49ba14305e6719 100644 (file)
--- a/client/src/app/+admin/follows/following-list/following-list.component.scss
+++ b/client/src/app/+admin/follows/following-list/following-list.component.scss
@@ -6,12 +6,12 @@ a {
   display: inline-block;
 
   &, &:hover {
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
   }
 
   span {
     font-size: 80%;
-    color: var(--inputPlaceholderColor);
+    color: pvar(--inputPlaceholderColor);
   }
 }
 

diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
index dc43e40077a5d577be52e8bb1672ececd1140223..adcf2037ee5f629d25bf9118515213c1791aaed3 100644 (file)
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
@@ -6,12 +6,12 @@ a {
   display: inline-block;
 
   &, &:hover {
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
   }
 
   span {
     font-size: 80%;
-    color: var(--inputPlaceholderColor);
+    color: pvar(--inputPlaceholderColor);
   }
 }
 

diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss
index c6c71587f2d69121c6372f18265074e25a95107d..c1f66116bc3eca1fa014b665496d98bc88fa0c7d 100644 (file)
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.scss
@@ -6,12 +6,12 @@ a {
   display: inline-block;
 
   &, &:hover {
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
   }
 
   span {
     font-size: 80%;
-    color: var(--inputPlaceholderColor);
+    color: pvar(--inputPlaceholderColor);
   }
 }
 

diff --git a/client/src/app/+admin/moderation/moderation.component.scss b/client/src/app/+admin/moderation/moderation.component.scss
index 26c2a30d4269b49efb9932d466e050b0a643fe5c..404eb050488f3e0df6c2dda6fd23aef423243b09 100644 (file)
--- a/client/src/app/+admin/moderation/moderation.component.scss
+++ b/client/src/app/+admin/moderation/moderation.component.scss
@@ -47,29 +47,19 @@
 }
 
 .screenratio {
-  position: relative;
-  width: 100%;
-  height: 0;
-  padding-bottom: 56%;
-
   div {
     @include miniature-thumbnail;
-    position: absolute;
-    height: 100%;
-    width: 100%;
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    color: var(--inputPlaceholderColor);
+    color: pvar(--inputPlaceholderColor);
   }
 
-  ::ng-deep iframe {
-    position: absolute;
+  @include large-screen-ratio($selector: 'div, ::ng-deep iframe') {
     width: 100% !important;
     height: 100% !important;
     left: 0;
-    top: 0;
-  }
+  };
 }
 
 .chip {
@@ -115,7 +105,7 @@ my-action-dropdown.show {
     }
 
     span {
-      color: var(--inputPlaceholderColor);
+      color: pvar(--inputPlaceholderColor);
     }
 
     .video-table-video-image-label {
@@ -135,7 +125,7 @@ my-action-dropdown.show {
     flex-direction: column;
     justify-content: center;
     font-size: 90%;
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
     line-height: 1rem;
 
     div .glyphicon {

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 1daa7b74183f75746438db01d26f6f91ec12dab5..83030b7e0444eea559126747e51585c58bba29b7 100644 (file)
--- 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 56ea91d0be7e35aa5a77c3938fb210bc9f6e266c..b653abfaaf6cb752be07a6f9f33dc12f2e1f34b5 100644 (file)
--- 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);
         }
       }
 

diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss
index 087155254541aee96f223b6c1868bd83bfd709f9..6b92f4d0b4ada70d9767e7fadb32eef80b125f4b 100644 (file)
--- a/client/src/app/+admin/system/logs/logs.component.scss
+++ b/client/src/app/+admin/system/logs/logs.component.scss
@@ -28,7 +28,7 @@
   }
 
   .warn {
-    color: var(--mainColor);
+    color: pvar(--mainColor);
   }
 
   .error {

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 ba8d56689bf2e58a4422c27faf69a94491d59885..dd990c42b55472dc369065e94ef183b965eba3f3 100644 (file)
--- 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 144c2440bb94590534239a1981625ef3d0fd782b..76fb2cde08757dca4d8e8325a8e2ff50862fe020 100644 (file)
--- 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 d47810566a55fd577165cc73c60d52d634dcb3ce..3f2c345d2592c9aaa660bd8dd2a56e426765b988 100644 (file)
--- 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 a3422c239c373e871ed95b3dd591fcc70743f46f..67a58d8d5567507106b1c1056a5a2240449e36cd 100644 (file)
--- 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;
         }
       }
     }

diff --git a/client/src/app/+signup/+register/custom-stepper.component.scss b/client/src/app/+signup/+register/custom-stepper.component.scss
index 2371c8ae5220804cb7f2aaf725b336f9057fc5c2..cc1591ee8e332a75cdad904549ca03b3547c4c29 100644 (file)
--- 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 e135b5cb4312488b91a7f4bb3845051f01d5c9bb..6a7e361e322efd71355e544f897167403b573ab4 100644 (file)
--- 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 {

diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
index 9eaa3ba325a924ece0948d0e9b2f2a1b7ee56ad6..6df47d11cb2f79ce29d2395138f98c9c63e51c88 100644 (file)
--- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
+++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
@@ -47,6 +47,10 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
     super()
 
     this.titlePage = this.i18n('Published videos')
+    this.displayOptions = {
+      ...this.displayOptions,
+      avatar: false
+    }
   }
 
   ngOnInit () {

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 27fd69c8da7bdc1c299a8deb03546123605c98c4..a2180e19d3483c4218a53ddfe503c87b741a41a2 100644 (file)
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -13,7 +13,7 @@
 
 .sub-header-container {
   margin-top: $header-height;
-  background-color: var(--mainBackgroundColor);
+  background-color: pvar(--mainBackgroundColor);
   width: 100%;
 }
 
@@ -22,7 +22,7 @@
   position: fixed;
   top: 0;
   width: 100%;
-  background-color: var(--mainBackgroundColor);
+  background-color: pvar(--mainBackgroundColor);
   z-index: z(header);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
   display: flex;
@@ -38,7 +38,7 @@
       @include icon(24px);
 
       &.icon-menu {
-        background-color: var(--mainForegroundColor);
+        background-color: pvar(--mainForegroundColor);
         mask-image: url('../assets/images/header/menu.svg');
         margin: 0 18px 0 20px;
       }
@@ -65,6 +65,7 @@
         background: url('../assets/images/logo.svg') no-repeat;
         width: 23px;
         height: 24px;
+        margin-right: .5rem;
       }
     }
 

diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
index 33b88825f3b72359276886a199cbc9f2946301c7..0a30ebd552311561d18f38901615e46ba733e625 100644 (file)
--- a/client/src/app/header/search-typeahead.component.scss
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -10,7 +10,7 @@
   font-size: 14px;
 
   &::placeholder {
-    color: var(--inputPlaceholderColor);
+    color: pvar(--inputPlaceholderColor);
   }
 }
 
@@ -18,7 +18,7 @@
   @include icon(25px);
   height: 21px;
 
-  background-color: var(--mainForegroundColor);
+  background-color: pvar(--mainForegroundColor);
   mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
 
   // yolo
@@ -37,10 +37,10 @@
 #typeahead-help,
 #typeahead-instructions,
 my-suggestions ::ng-deep ul {
-  border: 1px solid var(--mainBackgroundColor);
+  border: 1px solid pvar(--mainBackgroundColor);
   border-bottom-right-radius: 3px;
   border-bottom-left-radius: 3px;
-  background: var(--mainBackgroundColor);
+  background: pvar(--mainBackgroundColor);
   transition: .3s ease;
   transition-property: box-shadow;
 }
@@ -67,7 +67,7 @@ my-suggestions ::ng-deep ul {
 
 #typeahead-container {
   input {
-    border: 1px solid var(--mainBackgroundColor) !important;
+    border: 1px solid pvar(--mainBackgroundColor) !important;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
     flex-grow: 1;
     transition: box-shadow .3s ease, width .2s ease;

diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss
index 1de2f43bd8610d08b8b8ef586d044901684a3795..692a81daa01e803449288ffedcb14be8add501f8 100644 (file)
--- 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));
 }

diff --git a/client/src/app/login/login.component.scss b/client/src/app/login/login.component.scss
index db9f78f7c40130116fc17c412e21bc349c4a7822..fde6cc15e1f86f49693651b19c8644aa2bb52f97 100644 (file)
--- a/client/src/app/login/login.component.scss
+++ b/client/src/app/login/login.component.scss
@@ -18,7 +18,7 @@ input[type=submit] {
 }
 
 .create-an-account, .forgot-password-button {
-  color: var(--mainForegroundColor);
+  color: pvar(--mainForegroundColor);
   cursor: pointer;
   transition: opacity cubic-bezier(0.39, 0.575, 0.565, 1);
 
@@ -50,7 +50,7 @@ input[type=submit] {
       cursor: pointer;
       border: 1px solid #d1d7e0;
       border-radius: 5px;
-      color: var(--mainForegroundColor);
+      color: pvar(--mainForegroundColor);
       margin: 10px 10px 0 0;
       display: flex;
       justify-content: center;

diff --git a/client/src/app/menu/avatar-notification.component.scss b/client/src/app/menu/avatar-notification.component.scss
index ebb2a54248486b3d0b0fcc0aa074e8bcbcad5167..88f2b629698d3582419efb3e7bbe7d7b51355718 100644 (file)
--- a/client/src/app/menu/avatar-notification.component.scss
+++ b/client/src/app/menu/avatar-notification.component.scss
@@ -106,8 +106,8 @@
     align-items: center;
     justify-content: center;
 
-    background-color: var(--mainColor);
-    color: var(#fff);
+    background-color: pvar(--mainColor);
+    color: #fff;
     font-size: 10px;
     font-weight: $font-semibold;
 

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 5bff0c328560cb3dc31efbbd5eabf7a30d21cfc6..8f8c31417966f5a81da9b7917da7afffd3aa7151 100644 (file)
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -7,18 +7,18 @@
   padding: 0;
   width: $menu-width;
   z-index: z(menu);
-  scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor);
+  scrollbar-color: pvar(--actionButtonColor) pvar(--menuBackgroundColor);
 }
 
 menu {
   @include ellipsis;
 
-  background-color: var(--menuBackgroundColor);
+  background-color: pvar(--menuBackgroundColor);
   margin: 0;
   padding: 0;
   height: 100%;
   overflow-x: hidden;
-  color: var(--menuForegroundColor);
+  color: pvar(--menuForegroundColor);
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -62,7 +62,7 @@ menu {
       .logged-in-display-name {
         font-size: 16px;
         font-weight: $font-semibold;
-        color: var(--menuForegroundColor);
+        color: pvar(--menuForegroundColor);
         cursor: pointer;
 
         @include disable-default-a-behaviour;
@@ -89,7 +89,7 @@ menu {
         }
 
         ::ng-deep {
-          @include apply-svg-color(var(--menuForegroundColor));
+          @include apply-svg-color(pvar(--menuForegroundColor));
         }
       }
     }
@@ -139,7 +139,7 @@ menu {
       display: flex;
       align-items: center;
       padding-left: $menu-lateral-padding;
-      color: var(--menuForegroundColor);
+      color: pvar(--menuForegroundColor);
       cursor: pointer;
       min-height: 40px;
       font-size: 16px;
@@ -206,7 +206,7 @@ menu {
       a, span[role=button] {
         display: inline-block;
         text-decoration: none;
-        color: var(--mainBackgroundColor);
+        color: pvar(--mainBackgroundColor);
         opacity: $footer-links-base-opacity;
         white-space: nowrap;
         font-size: 90%;
@@ -221,7 +221,7 @@ menu {
           height: 1.4rem;
 
           my-global-icon {
-            @include apply-svg-color(var(--mainBackgroundColor));
+            @include apply-svg-color(pvar(--mainBackgroundColor));
 
             display: flex;
             width: auto;
@@ -235,7 +235,7 @@ menu {
     .footer-copyleft small a {
       @include disable-default-a-behaviour;
 
-      color: var(--mainBackgroundColor);
+      color: pvar(--mainBackgroundColor);
       opacity: $footer-links-base-opacity - .2;
     }
   }
@@ -323,7 +323,7 @@ label {
     left: 3px;
     width: 14px;
     height: 14px;
-    background: var(--mainBackgroundColor);
+    background: pvar(--mainBackgroundColor);
     border-radius: 50%;
     transition: 0.3s ease-out;
   }
@@ -334,7 +334,7 @@ label {
 }
 
 input:checked + label {
-  background: var(--mainColor);
+  background: pvar(--mainColor);
 
   &:after {
     left: calc(100% - 3px);

diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index c04772546102ffd7addbafa340242bdde8e9c0bb..a93dbcef9538464e18ab677789c4e0d91e4460be 100644 (file)
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -51,7 +51,7 @@ li {
   .link-block {
     @include disable-default-a-behaviour;
 
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
     padding: 10px;
     transition: background-color 0.2s ease-in;
     flex-basis: 33%;

diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss
index 78749cf2006b363d39194ff155c276aff6b2df28..6e59adb600d4890fb68861cb861567791eea05c7 100644 (file)
--- a/client/src/app/search/search.component.scss
+++ b/client/src/app/search/search.component.scss
@@ -62,7 +62,7 @@
 
           display: flex;
           align-items: baseline;
-          color: var(--mainForegroundColor);
+          color: pvar(--mainForegroundColor);
           width: fit-content;
 
           .video-channel-display-name {
@@ -111,7 +111,7 @@
 
     // Override the min-width: 500px to not break screen
     ::ng-deep .video-miniature-information {
-      min-width: 223px !important;
+      min-width: $video-thumbnail-width !important;
     }
   }
 

diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 7a030f32c33452470e041d3154fa7c59956115a5..724a04efcf1d1260c6fad1d143e907eb413d80ab 100644 (file)
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -34,7 +34,7 @@
     width: 21px;
 
     ::ng-deep {
-      @include apply-svg-color(var(--actionButtonColor));
+      @include apply-svg-color(pvar(--actionButtonColor));
     }
   }
 

diff --git a/client/src/app/shared/channel/avatar.component.scss b/client/src/app/shared/channel/avatar.component.scss
index 77b90c5790c13180aa1ddcba3978b7ea033991a3..4bf8fcd2168be22a63bdd81671758d75b6cb1ee1 100644 (file)
--- a/client/src/app/shared/channel/avatar.component.scss
+++ b/client/src/app/shared/channel/avatar.component.scss
@@ -30,9 +30,9 @@
   a:nth-of-type(2) img {
     height: 60%;
     width: 60%;
-    border: 2px solid var(--mainBackgroundColor);
+    border: 2px solid pvar(--mainBackgroundColor);
     transform: translateX(15%);
     position: relative;
-    background-color: var(--mainBackgroundColor);
+    background-color: pvar(--mainBackgroundColor);
   }
 }

diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
index 33f52fa6e19284d01b73e85f4c499f92664a0e74..f2c76f7a13bde4b6b1791fbe3a4cb0bf17a267ad 100644 (file)
--- a/client/src/app/shared/forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/forms/markdown-textarea.component.scss
@@ -14,7 +14,7 @@ $input-border-radius: 3px;
     textarea {
       @include peertube-textarea(100%, 150px);
 
-      background-color: var(--markdownTextareaBackgroundColor);
+      background-color: pvar(--markdownTextareaBackgroundColor);
 
       font-family: monospace;
       font-size: 13px;
@@ -61,7 +61,7 @@ $input-border-radius: 3px;
   flex-grow: 1;
   border-bottom-left-radius: unset;
   border-bottom-right-radius: unset;
-  border-bottom: 2px solid var(--mainColor);
+  border-bottom: 2px solid pvar(--mainColor);
 
   :first-child {
     margin-left: auto;
@@ -112,7 +112,7 @@ $input-border-radius: 3px;
     padding-left: 0px;
     padding-right: 0px;
     position: absolute;
-    background-color: var(--mainBackgroundColor);
+    background-color: pvar(--mainBackgroundColor);
     width: 100% !important;
     border-top: none;
     border-left: none;
@@ -125,8 +125,8 @@ $input-border-radius: 3px;
 
   ::ng-deep .tab-content {
     @include content-preview-base();
-    background-color: var(--mainBackgroundColor);
-    scrollbar-color: var(--actionButtonColor) var(--mainBackgroundColor);
+    background-color: pvar(--mainBackgroundColor);
+    scrollbar-color: pvar(--actionButtonColor) pvar(--mainBackgroundColor);
   }
 
   textarea,
@@ -214,7 +214,7 @@ $input-border-radius: 3px;
       padding: $base-padding;
       border-right: 1px dashed $input-border-color !important;
       resize: none;
-      scrollbar-color: var(--actionButtonColor) var(--markdownTextareaBackgroundColor);
+      scrollbar-color: pvar(--actionButtonColor) pvar(--markdownTextareaBackgroundColor);
 
       &:focus {
         box-shadow: none;

diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
index c1233e8a5e79875be68994581d8c6072da319cfa..cf8540dc37c87a809a43aabe5f0f1430eb57e661 100644 (file)
--- a/client/src/app/shared/forms/peertube-checkbox.component.scss
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -45,7 +45,7 @@
     font-size: 12px;
     line-height: 12px;
     font-weight: 500;
-    color: var(--inputPlaceholderColor);
+    color: pvar(--inputPlaceholderColor);
     background-color: rgba(217,225,232,.1);
     border: 1px solid rgba(217,225,232,.5);
   }

diff --git a/client/src/app/shared/forms/timestamp-input.component.scss b/client/src/app/shared/forms/timestamp-input.component.scss
index 9671cc65f1e53bf6e0b4f5c2719fdc7ef511132a..8092b095bd72d646c09fa0783da12e5987e55234 100644 (file)
--- a/client/src/app/shared/forms/timestamp-input.component.scss
+++ b/client/src/app/shared/forms/timestamp-input.component.scss
@@ -9,7 +9,7 @@ p-inputmask {
 
     &:focus-within,
     &:focus {
-      box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+      box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
     }
   }
 }

diff --git a/client/src/app/shared/images/preview-upload.component.scss b/client/src/app/shared/images/preview-upload.component.scss
index 8f35221156873201e3f0b57ee8d267a8856dd68b..88eccd5f7c8fd1f05110ae028edc31836eae9512 100644 (file)
--- a/client/src/app/shared/images/preview-upload.component.scss
+++ b/client/src/app/shared/images/preview-upload.component.scss
@@ -22,7 +22,7 @@
 
       &.no-image {
         border: 2px solid grey;
-        background-color: var(--mainBackgroundColor);
+        background-color: pvar(--mainBackgroundColor);
       }
     }
   }

diff --git a/client/src/app/shared/instance/instance-features-table.component.scss b/client/src/app/shared/instance/instance-features-table.component.scss
index 67f2b6c848db80324e55f1af8c38575794539876..47c064265b46eaf89f88be467dec4206fb0b0905 100644 (file)
--- a/client/src/app/shared/instance/instance-features-table.component.scss
+++ b/client/src/app/shared/instance/instance-features-table.component.scss
@@ -3,7 +3,7 @@
 
 table {
   font-size: 14px;
-  color: var(--mainForegroundColor);
+  color: pvar(--mainForegroundColor);
 
   .label,
   .sub-label {

diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss
index 5f90dcf801566b9a64286af3ced7382ae47e7e52..84dd7dce3375ae96db321147a8d2ff80c350c64a 100644 (file)
--- a/client/src/app/shared/menu/top-menu-dropdown.component.scss
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss
@@ -48,8 +48,8 @@
     width: 100%;
 
     &.active {
-      color: var(--mainBackgroundColor) !important;
-      background-color: var(--mainHoverColor);
+      color: pvar(--mainBackgroundColor) !important;
+      background-color: pvar(--mainHoverColor);
       opacity: .9;
     }
   }

diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss
index 3c8b66cd5b283d6da2cefe4c2ac2480df9996546..43f33a53abdc3e0a022b9ec79c5e6002d02ce965 100644 (file)
--- a/client/src/app/shared/misc/help.component.scss
+++ b/client/src/app/shared/misc/help.component.scss
@@ -11,7 +11,7 @@
     top: -2px;
     margin: 5px;
 
-    @include apply-svg-color(var(--mainForegroundColor))
+    @include apply-svg-color(pvar(--mainForegroundColor))
   }
 }
 
@@ -25,8 +25,8 @@
       text-align: left;
       padding: 10px;
       font-size: 13px;
-      background-color: var(--mainBackgroundColor);
-      color: var(--mainForegroundColor);
+      background-color: pvar(--mainBackgroundColor);
+      color: pvar(--mainForegroundColor);
       border-radius: 3px;
 
       p {

diff --git a/client/src/app/shared/misc/list-overflow.component.scss b/client/src/app/shared/misc/list-overflow.component.scss
index 1e5fe4c1065954b7bcfc2e17bb1664d846a7c842..1ec044489a087ff384023f551a675183c6577607 100644 (file)
--- a/client/src/app/shared/misc/list-overflow.component.scss
+++ b/client/src/app/shared/misc/list-overflow.component.scss
@@ -24,7 +24,7 @@ button {
   &.routeActive {
     &::after {
       display: inherit;
-      border: 2px solid var(--mainColor);
+      border: 2px solid pvar(--mainColor);
       position: relative;
       right: 95%;
       top: 50%;
@@ -53,8 +53,8 @@ button {
     width: 100%;
 
     &.active {
-      color: var(--mainBackgroundColor) !important;
-      background-color: var(--mainHoverColor);
+      color: pvar(--mainBackgroundColor) !important;
+      background-color: pvar(--mainHoverColor);
       opacity: .9;
     }
   }

diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts
index 3d1e906a206b0018e5da196860ff4f8bf670b088..bc3ab85b3c4d276f82918a570fd195348480202d 100644 (file)
--- a/client/src/app/shared/misc/utils.ts
+++ b/client/src/app/shared/misc/utils.ts
@@ -59,7 +59,9 @@ function durationToString (duration: number) {
   const secondsPadding = seconds >= 10 ? '' : '0'
   const displayedHours = hours > 0 ? hours.toString() + ':' : ''
 
-  return displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString()
+  return (
+    displayedHours + minutesPadding + minutes.toString() + ':' + secondsPadding + seconds.toString()
+  ).replace(/^0/, '')
 }
 
 function immutableAssign <A, B> (target: A, source: B) {

diff --git a/client/src/app/shared/users/user-notifications.component.scss b/client/src/app/shared/users/user-notifications.component.scss
index ddd7abe8a4b67b89858cd2bd24a18f82dbe4be1b..5166bd559d7f19fedadbb889960b18652a8fc615 100644 (file)
--- a/client/src/app/shared/users/user-notifications.component.scss
+++ b/client/src/app/shared/users/user-notifications.component.scss
@@ -44,7 +44,7 @@
 
   .from-date {
     font-size: 0.85em;
-    color: var(--greyForegroundColor);
+    color: pvar(--greyForegroundColor);
     padding-left: 5px;
     min-width: 70px;
     text-align: right;

diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
index f572dd90249c5288e15b08afb1fe6a0a64d9f08c..47baa997b2fee610cfaf1ea0f8d1fe8b7cea2e48 100644 (file)
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.scss
@@ -68,7 +68,7 @@
 
     .timestamp-info {
       font-size: 0.9em;
-      color: var(--greyForegroundColor);
+      color: pvar(--greyForegroundColor);
       margin-left: 5px;
     }
   }

diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
index 649272c52093754731df2271fccbc442db196400..afd775b2554aaff3793eafac45c9247292240532 100644 (file)
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss
@@ -24,7 +24,7 @@ my-video-thumbnail,
 .video {
   display: flex;
   align-items: center;
-  background-color: var(--mainBackgroundColor);
+  background-color: pvar(--mainBackgroundColor);
   padding: 10px;
   border-bottom: 1px solid $separator-border-color;
 
@@ -49,7 +49,7 @@ my-video-thumbnail,
   a {
     @include disable-default-a-behaviour;
 
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
     display: flex;
     min-width: 0;
     align-items: center;
@@ -58,11 +58,11 @@ my-video-thumbnail,
     .position {
       font-weight: $font-semibold;
       margin-right: 10px;
-      color: var(--greyForegroundColor);
+      color: pvar(--greyForegroundColor);
       min-width: 25px;
 
       my-global-icon {
-        @include apply-svg-color(var(--greyForegroundColor));
+        @include apply-svg-color(pvar(--greyForegroundColor));
 
         width: 17px;
         position: relative;
@@ -81,7 +81,7 @@ my-video-thumbnail,
       }
 
       .video-info-account, .video-info-timestamp {
-        color: var(--greyForegroundColor);
+        color: pvar(--greyForegroundColor);
       }
     }
   }
@@ -109,7 +109,7 @@ my-video-thumbnail,
     }
 
     .icon-more {
-      @include apply-svg-color(var(--greyForegroundColor));
+      @include apply-svg-color(pvar(--greyForegroundColor));
 
       display: flex;
 

diff --git a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
index 5279934961f61c602720e9d690af8d54d29b2377..1b16dbb01ad18ece0df18518c4d213da58e28147 100644 (file)
--- a/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
+++ b/client/src/app/shared/video-playlist/video-playlist-miniature.component.scss
@@ -53,7 +53,7 @@
       @include disable-default-a-behaviour;
 
       display: block;
-      color: var(--greyForegroundColor);
+      color: pvar(--greyForegroundColor);
     }
 
     .privacy-date {
@@ -72,7 +72,7 @@
 
     .video-info-description {
       margin-top: 10px;
-      color: var(--greyForegroundColor);
+      color: pvar(--greyForegroundColor);
     }
   }
 }

diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html
index a811fc0a81350056c352ed8a067f31ba811087be..cd8a5b840685ee151defe55fa8208f2f1657a2ac 100644 (file)
--- a/client/src/app/shared/video/abstract-video-list.html
+++ b/client/src/app/shared/video/abstract-video-list.html
@@ -36,6 +36,7 @@
       </div>
 
       <my-video-miniature
+        [fitWidth]="true"
         [video]="video" [user]="user" [ownerDisplayType]="ownerDisplayType"
         [displayVideoActions]="displayVideoActions" [displayOptions]="displayOptions"
         (videoBlacklisted)="removeVideoFromArray(video)" (videoRemoved)="removeVideoFromArray(video)"

diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 4149c910905b6205c36cde60f83bd5725597895a..2aab40ea8a5189a8ae4ada3f06333045c96808e8 100644 (file)
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -1,6 +1,24 @@
+@import '_bootstrap-variables';
+@import '_variables';
 @import '_mixins';
 @import '_miniature';
 
+.videos {
+  display: grid;
+  column-gap: calc(10px + .2%);
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(
+      var(--miniature-min-width, #{$video-thumbnail-width}),
+      1fr
+    )
+  );
+
+  @media screen and (min-width: #{breakpoint(xxl)}) {
+    --miniature-min-width: 300px;
+  }
+}
+
 .videos-header {
   display: flex;
   justify-content: space-between;
@@ -45,13 +63,16 @@
   margin-top: -10px;
   padding-top: 20px;
 
+  // make the element span a full grid row within .videos grid
+  grid-column: 1 / -1;
+
   &:not(:first-child) {
     border-top: 1px solid $separator-border-color;
   }
 }
 
-.margin-content {
-  @include adapt-margin-content-width;
+:host-context(.main-col:not(.expanded)) .margin-content {
+  @include adapt-margin-content-width($fluid: true);
 }
 
 @media screen and (max-width: $mobile-view) {

diff --git a/client/src/app/shared/video/feed.component.scss b/client/src/app/shared/video/feed.component.scss
index f39e409a32aeeccd94a712c26cb1537ff26d4c4e..34dd0e93783ab37d892f703a8824ba53db953bc1 100644 (file)
--- a/client/src/app/shared/video/feed.component.scss
+++ b/client/src/app/shared/video/feed.component.scss
@@ -15,6 +15,6 @@
     position: relative;
     top: -2px;
 
-    @include apply-svg-color(var(--mainForegroundColor))
+    @include apply-svg-color(pvar(--mainForegroundColor))
   }
 }

diff --git a/client/src/app/shared/video/modals/video-download.component.scss b/client/src/app/shared/video/modals/video-download.component.scss
index 7e2dd7d2fab74246090ca168c6de81c72d346549..b09078bea1b332ee16ca2c196b79487984e74820 100644 (file)
--- a/client/src/app/shared/video/modals/video-download.component.scss
+++ b/client/src/app/shared/video/modals/video-download.component.scss
@@ -41,13 +41,13 @@
     min-width: 142px;
     padding-right: 5px;
     display: inline-block;
-    color: var(--greyForegroundColor);
+    color: pvar(--greyForegroundColor);
     font-weight: $font-bold;
   }
 
   a.metadata-attribute-value {
     @include disable-default-a-behaviour;
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
 
     &:hover {
       opacity: 0.9;

diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index c9ac97762ae7414a9e555ca786e5521fb41fbe81..d354a2930c38326c40ea3707df5a801be82d79b6 100644 (file)
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -1,4 +1,4 @@
-<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow }" (mouseenter)="loadActions()">
+<div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow, 'fit-width': fitWidth }" (mouseenter)="loadActions()">
   <my-video-thumbnail
     [video]="video" [nsfw]="isVideoBlur"
     [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"

diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index 23d918d009ef19d02753a2e214d23340a27700c6..849bd54bb0d2df613f8e102e6c8bc68b86945c8f 100644 (file)
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -6,7 +6,6 @@ $more-button-width: 41px;
 $more-margin-right: 15px;
 
 .video-miniature {
-  width: $video-miniature-width;
   display: inline-flex;
   flex-direction: column;
   margin-bottom: $video-miniature-margin-bottom;
@@ -19,14 +18,16 @@ $more-margin-right: 15px;
     .video-miniature-information {
       width: $video-miniature-width - $more-button-width - $more-margin-right;
       line-height: normal;
+      font-size: 13px;
 
       .video-miniature-name {
         @include miniature-name;
+        font-size: 110%;
       }
 
       .video-miniature-created-at-views {
         display: block;
-        font-size: 13px;
+        font-size: 95%;
       }
 
       .video-miniature-account,
@@ -35,8 +36,8 @@ $more-margin-right: 15px;
         @include ellipsis;
 
         display: block;
-        font-size: 13px;
-        color: var(--greyForegroundColor);
+        font-size: 95%;
+        color: pvar(--greyForegroundColor);
 
         &:hover {
           color: $grey-foreground-hover-color;
@@ -87,10 +88,6 @@ $more-margin-right: 15px;
     @media screen and (max-width: $small-view) {
       .video-miniature-information {
         margin: 0 10px;
-
-        .video-miniature-name {
-          margin-top: 0;
-        }
       }
 
       .video-actions {
@@ -109,6 +106,24 @@ $more-margin-right: 15px;
     opacity: 1;
   }
 
+  &.fit-width {
+    width: 100%;
+    height: unset;
+    margin-bottom: $video-miniature-margin-bottom / 2;
+
+    .video-bottom {
+      width: 100% !important;
+
+      .video-miniature-information {
+        width: calc(100% - 40px) !important;
+      }
+    }
+
+    my-video-thumbnail {
+      @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
+    }
+  }
+
   &.display-as-row {
     flex-direction: row;
     margin-bottom: 0;
@@ -137,7 +152,7 @@ $more-margin-right: 15px;
         .video-miniature-created-at-views,
         .video-miniature-account,
         .video-miniature-channel {
-          font-size: 14px;
+          font-size: 95%;
           width: fit-content;
         }
 

diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 88b21b3a56c9ca8769668c66800ba987b0b66a5a..a1d4f0e81b1485e368a0812ff587c2dafea4778c 100644 (file)
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -55,6 +55,7 @@ export class VideoMiniatureComponent implements OnInit {
   }
   @Input() displayAsRow = false
   @Input() displayVideoActions = true
+  @Input() fitWidth = false
 
   @Output() videoBlacklisted = new EventEmitter()
   @Output() videoUnblacklisted = new EventEmitter()

diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index 5fca916f03a6d0ab8b2621d47726d96ef7d6f33f..feff78a87899b71b966bd48e2f8144e5714df482 100644 (file)
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -14,7 +14,7 @@
 
     div {
       height: 100%;
-      background-color: var(--mainColor);
+      background-color: pvar(--mainColor);
     }
   }
 
@@ -25,7 +25,8 @@
 
     border-radius: 3px;
     font-size: 12px;
-    font-weight: $font-bold;
+    font-weight: $font-semibold;
+    line-height: 1.2;
     z-index: z(miniature);
   }
 
@@ -34,6 +35,7 @@
     padding: 0 5px;
     left: 5px;
     top: 5px;
+    font-weight: $font-bold;
 
     &.warning { background-color: orange; }
     &.danger { background-color: red; }
@@ -41,7 +43,7 @@
 
   .video-thumbnail-duration-overlay {
     position: absolute;
-    padding: 0 5px;
+    padding: 0 3px;
     right: 5px;
     bottom: 5px;
   }

diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index 0702ebf2215c05d1e812b01b36e9450e9a1f0cf7..69b9072883ac33625d35b43c384ff5f9ae5db815 100644 (file)
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -17,7 +17,7 @@ label {
 }
 
 .title-page a {
-  color: var(--mainForegroundColor);
+  color: pvar(--mainForegroundColor);
 
   &:hover {
     text-decoration: none;
@@ -122,7 +122,7 @@ my-peertube-checkbox {
     display: inline-block;
     margin-right: 25px;
 
-    color: var(--greyForegroundColor);
+    color: pvar(--greyForegroundColor);
     font-size: 15px;
   }
 

diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
index 3b46475b426714239873d0a741f9b634757d551e..1fef749947b675307712310de74e481cd8005b6b 100644 (file)
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss
@@ -3,7 +3,7 @@
 
 .first-step-block {
   .torrent-or-magnet {
-    @include divider($color: var(--inputPlaceholderColor), $background: var(--submenuColor));
+    @include divider($color: pvar(--inputPlaceholderColor), $background: pvar(--submenuColor));
     
     &[data-content] {
       margin: 1.5rem 0;

diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss
index 1316e09e4f7f1c1a93a00183cbed4dfbfce42414..0ad57d897927db026130a611472e137948cfeb01 100644 (file)
--- a/client/src/app/videos/+video-edit/video-add.component.scss
+++ b/client/src/app/videos/+video-edit/video-add.component.scss
@@ -33,10 +33,10 @@ $nav-link-height: 40px;
     &.active {
       border: $border-width $border-type $border-color;
       border-bottom: none;
-      background-color: var(--submenuColor) !important;
+      background-color: pvar(--submenuColor) !important;
 
       span {
-        border-bottom: 2px solid var(--mainColor);
+        border-bottom: 2px solid pvar(--mainColor);
         font-weight: $font-bold;
       }
     }
@@ -47,7 +47,7 @@ $nav-link-height: 40px;
   border: $border-width $border-type $border-color;
   border-top: transparent;
 
-  background-color: var(--submenuColor);
+  background-color: pvar(--submenuColor);
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
   width: 100%;
@@ -58,7 +58,7 @@ $nav-link-height: 40px;
   align-items: center;
 
   &.dragover {
-    border: 3px dashed var(--mainColor);
+    border: 3px dashed pvar(--mainColor);
   }
 }
 
@@ -72,7 +72,7 @@ $nav-link-height: 40px;
     /* Hide active tab style to not have a moving tab effect */
     a.nav-link.active {
       border: none;
-      background-color: var(--mainBackgroundColor) !important;
+      background-color: pvar(--mainBackgroundColor) !important;
     }
   }
 }

diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
index 33204de3ba2b5fae1a12d3a4d95d6b122039d1c0..e7ef79561f7ffe2832428baaecb6cca03ac449da 100644 (file)
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
@@ -70,7 +70,7 @@
         a {
           @include disable-default-a-behaviour;
 
-          color: var(--mainForegroundColor);
+          color: pvar(--mainForegroundColor);
         }
 
         .comment-account-fid {
@@ -80,7 +80,7 @@
 
       .comment-date {
         font-size: 90%;
-        color: var(--greyForegroundColor);
+        color: pvar(--greyForegroundColor);
         margin-left: 5px;
         text-decoration: none;
       }
@@ -95,7 +95,7 @@
         &:not(.linkified-url) {
           @include disable-default-a-behaviour;
 
-          color: var(--mainForegroundColor);
+          color: pvar(--mainForegroundColor);
 
           font-weight: $font-semibold;
         }
@@ -108,7 +108,7 @@
       }
 
       &.comment-html-deleted {
-        color: var(--greyForegroundColor);
+        color: pvar(--greyForegroundColor);
         margin-bottom: 1rem;
       }
     }
@@ -120,12 +120,12 @@
       ::ng-deep .dropdown-toggle,
       .comment-action-reply,
       .comment-action-delete {
-        color: var(--greyForegroundColor);
+        color: pvar(--greyForegroundColor);
         cursor: pointer;
         margin-right: 10px;
 
         &:hover {
-          color: var(--mainForegroundColor);
+          color: pvar(--mainForegroundColor);
         }
       }
 

diff --git a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
index db36dcd8b4a911a54696f82cca3e458f1f2dccd2..0b0a2a899a38216cc6caa8a0913a8be11229bc01 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch-playlist.component.scss
@@ -7,7 +7,7 @@
   min-width: 200px;
   max-width: 470px;
   height: 66vh;
-  background-color: var(--mainBackgroundColor);
+  background-color: pvar(--mainBackgroundColor);
   overflow-y: auto;
   border-bottom: 1px solid $separator-border-color;
 
@@ -22,7 +22,7 @@
     }
 
     .playlist-by-index {
-      color: var(--greyForegroundColor);
+      color: pvar(--greyForegroundColor);
       display: flex;
 
       .playlist-by {

diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 431a2103905f9f33a3a95f69d2410eb8d4a060c1..8be0bab1d32404c952a426fcfce88ccbe848c3e5 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -166,7 +166,7 @@ $video-info-margin-left: 44px;
         a {
           @include disable-default-a-behaviour;
 
-          color: var(--mainForegroundColor);
+          color: pvar(--mainForegroundColor);
 
           &:hover {
             opacity: 0.8;
@@ -225,7 +225,7 @@ $video-info-margin-left: 44px;
           ::ng-deep.action-button {
             @include peertube-button;
             @include button-with-icon(21px, 0, -1px);
-            @include apply-svg-color(var(--actionButtonColor));
+            @include apply-svg-color(pvar(--actionButtonColor));
 
             font-size: 100%;
             font-weight: $font-semibold;
@@ -233,7 +233,7 @@ $video-info-margin-left: 44px;
             padding: 0 10px 0 10px;
             white-space: nowrap;
             background-color: transparent !important;
-            color: var(--actionButtonColor);
+            color: pvar(--actionButtonColor);
             text-transform: uppercase;
 
             &::after {
@@ -255,36 +255,36 @@ $video-info-margin-left: 44px;
 
             &.action-button-like.activated {
               .count {
-                color: var(--activatedActionButtonColor);
+                color: pvar(--activatedActionButtonColor);
               }
 
               my-global-icon {
-                @include apply-svg-color(var(--activatedActionButtonColor));
+                @include apply-svg-color(pvar(--activatedActionButtonColor));
               }
             }
 
             &.action-button-dislike.activated {
               .count {
-                color: var(--activatedActionButtonColor);
+                color: pvar(--activatedActionButtonColor);
               }
 
               my-global-icon {
-                @include apply-svg-color(var(--activatedActionButtonColor));
+                @include apply-svg-color(pvar(--activatedActionButtonColor));
               }
             }
 
             &.action-button-support {
-              color: var(--supportButtonColor);
+              color: pvar(--supportButtonColor);
 
               my-global-icon {
-                @include apply-svg-color(var(--supportButtonColor));
+                @include apply-svg-color(pvar(--supportButtonColor));
               }
             }
 
             &.action-button-support {
               my-global-icon {
                 ::ng-deep path:first-child {
-                  fill: var(--supportButtonHeartColor) !important;
+                  fill: pvar(--supportButtonHeartColor) !important;
                 }
               }
             }
@@ -325,7 +325,7 @@ $video-info-margin-left: 44px;
             background-color: #909090;
 
             &.liked {
-              background-color: var(--activatedActionButtonColor);
+              background-color: pvar(--activatedActionButtonColor);
             }
           }
         }
@@ -356,7 +356,7 @@ $video-info-margin-left: 44px;
       .video-info-description-more {
         cursor: pointer;
         font-weight: $font-semibold;
-        color: var(--greyForegroundColor);
+        color: pvar(--greyForegroundColor);
         font-size: 14px;
 
         .glyphicon {
@@ -379,13 +379,13 @@ $video-info-margin-left: 44px;
         min-width: 142px;
         padding-right: 5px;
         display: inline-block;
-        color: var(--greyForegroundColor);
+        color: pvar(--greyForegroundColor);
         font-weight: $font-bold;
       }
 
       a.video-attribute-value {
         @include disable-default-a-behaviour;
-        color: var(--mainForegroundColor);
+        color: pvar(--mainForegroundColor);
 
         &:hover {
           opacity: 0.9;
@@ -480,7 +480,7 @@ my-video-comments {
   a {
     @include disable-default-a-behaviour;
 
-    color: var(--mainColor);
+    color: pvar(--mainColor);
     transition: color 0.3s;
 
     &:hover {
@@ -503,7 +503,7 @@ my-video-comments {
   }
 
   .privacy-concerns-okay {
-    background-color: var(--mainColor);
+    background-color: pvar(--mainColor);
     margin-left: 10px;
   }
 }

diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html
index 84999cfb2723df6e6bf9cf981c86d76cdb66d1b8..72e101558978a6b92d3a8c808a993460cff3226c 100644 (file)
--- a/client/src/app/videos/video-list/video-overview.component.html
+++ b/client/src/app/videos/video-list/video-overview.component.html
@@ -12,7 +12,7 @@
           <a routerLink="/search" [queryParams]="{ categoryOneOf: [ object.category.id ] }">{{ object.category.label }}</a>
         </div>
 
-        <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
+        <my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
         </my-video-miniature>
       </div>
 
@@ -21,7 +21,7 @@
           <a routerLink="/search" [queryParams]="{ tagsOneOf: [ object.tag ] }">#{{ object.tag }}</a>
         </div>
 
-        <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
+        <my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
         </my-video-miniature>
       </div>
 
@@ -34,7 +34,7 @@
           </a>
         </div>
 
-        <my-video-miniature *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
+        <my-video-miniature class="pr-2" *ngFor="let video of buildVideos(object.videos)" [video]="video" [user]="user" [displayVideoActions]="false">
         </my-video-miniature>
       </div>
 

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 16e7ea5cada8317c77aabfe838b1020fa70854b1..d5763527e9fa3065eb914cda1c8477d5155f7118 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -47,21 +47,21 @@ body {
 
   --actionButtonColor: #{$grey-foreground-color};
   --supportButtonBackgroundColor: #{transparent};
-  --supportButtonColor: #{var(--actionButtonColor)};
+  --supportButtonColor: #{pvar(--actionButtonColor)};
   --supportButtonHeartColor: #{$support-button-heart};
 
   --activatedActionButtonColor: #{$activated-action-button-color};
 
   font-family: $main-fonts;
   font-weight: $font-regular;
-  color: var(--mainForegroundColor);
-  background-color: var(--mainBackgroundColor);
+  color: pvar(--mainForegroundColor);
+  background-color: pvar(--mainBackgroundColor);
   font-size: 14px;
 }
 
 ::selection {
-  color: var(--mainBackgroundColor);
-  background-color: var(--mainHoverColor);
+  color: pvar(--mainBackgroundColor);
+  background-color: pvar(--mainHoverColor);
 }
 
 #incompatible-browser {
@@ -78,12 +78,12 @@ strong {
 
 input.readonly {
   /* Force blank on readonly inputs */
-  background-color: var(--inputBackgroundColor) !important;
+  background-color: pvar(--inputBackgroundColor) !important;
 }
 
 input, textarea {
   outline: none;
-  color: var(--mainForegroundColor);
+  color: pvar(--mainForegroundColor);
 }
 
 label {
@@ -128,7 +128,7 @@ label {
   }
 
   .sub-menu {
-    background-color: var(--submenuColor);
+    background-color: pvar(--submenuColor);
     width: 100%;
     height: 81px;
     margin-bottom: $sub-menu-margin-bottom;
@@ -166,7 +166,7 @@ label {
 }
 
 .title-page {
-  color: var(--mainForegroundColor);
+  color: pvar(--mainForegroundColor);
   font-size: 16px;
   display: inline-block;
   margin-right: 55px;
@@ -180,7 +180,7 @@ label {
 
   &.active {
     font-weight: $font-bold;
-    border-bottom: 2px solid var(--mainColor);
+    border-bottom: 2px solid pvar(--mainColor);
   }
 
   &.title-page-single {
@@ -188,7 +188,7 @@ label {
   }
 
   &:hover, &:active, &:focus {
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
   }
 
   @media screen and (max-width: $mobile-view) {
@@ -220,7 +220,7 @@ label {
     @include disable-default-a-behaviour;
 
     font-size: 16px;
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
     padding: 5px 15px;
     border-radius: 0.25rem;
 

diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 7985472ed0cef7e20eb1305605d4e23b2daf77a5..0dc58a7c9235173de3f6ab4826cbf40fbabb2689 100644 (file)
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -51,8 +51,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
     padding: 3px 15px;
 
     &.active {
-      color: var(--mainBackgroundColor) !important;
-      background-color: var(--mainHoverColor);
+      color: pvar(--mainBackgroundColor) !important;
+      background-color: pvar(--mainHoverColor);
       opacity: .9;
     }
 
@@ -94,7 +94,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   text-align: center;
 
   .modal-content {
-    background-color: var(--mainBackgroundColor);
+    background-color: pvar(--mainBackgroundColor);
   }
 
   .modal-header {
@@ -161,7 +161,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   a {
     @include disable-default-a-behaviour;
 
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
   }
 }
 
@@ -170,7 +170,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   .nav-link {
     @include disable-default-a-behaviour;
 
-    color: var(--mainForegroundColor) !important;
+    color: pvar(--mainForegroundColor) !important;
   }
 }
 
@@ -180,9 +180,9 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   }
   &.active {
     font-weight: $font-semibold;
-    background-color: var(--mainBackgroundColor) !important;
+    background-color: pvar(--mainBackgroundColor) !important;
     border: none;
-    border-bottom: 2px solid var(--mainColor);
+    border-bottom: 2px solid pvar(--mainColor);
   }
   &:hover {
     border-top-color: transparent;
@@ -192,7 +192,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 }
 
 .card {
-  background-color: var(--mainBackgroundColor);
+  background-color: pvar(--mainBackgroundColor);
   border-color: #dee2e6;
 }
 
@@ -240,27 +240,27 @@ ngb-tooltip-window {
 }
 
 .btn-outline-tertiary {
-  color: var(--secondaryColor);
-  border-color: var(--secondaryColor);
+  color: pvar(--secondaryColor);
+  border-color: pvar(--secondaryColor);
 
   &:focus-within,
   &:focus,
   &:hover {
-    color: var(--mainBackgroundColor);
-    background-color: var(--secondaryColor);
+    color: pvar(--mainBackgroundColor);
+    background-color: pvar(--secondaryColor);
   }
 }
 
 // input box-shadow on focus
 .form-control {
   font-size: 15px;
-  color: var(--mainForegroundColor);
-  background-color: var(--inputBackgroundColor);
+  color: pvar(--mainForegroundColor);
+  background-color: pvar(--inputBackgroundColor);
   outline: none;
 
   &:focus-within,
   &:focus {
-    box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+    box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 
     &.input-error {
       box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index d0ee1e2f0c27cc258767553dfde74ebf0463ee4f..d89d6f9ffac097f825403fd852bf92bab9bb7172 100644 (file)
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -6,7 +6,7 @@
 
   transition: color 0.2s;
   font-weight: $font-semibold;
-  color: var(--mainForegroundColor);
+  color: pvar(--mainForegroundColor);
   margin-top: 10px;
   margin-bottom: 5px;
 
@@ -80,7 +80,7 @@ $play-overlay-width: 18px;
   }
 
   &.focus-visible {
-    box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+    box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
     outline: none;
   }
 
@@ -168,7 +168,7 @@ $play-overlay-width: 18px;
         outline: none;
       }
 
-      color: var(--mainForegroundColor);
+      color: pvar(--mainForegroundColor);
     }
   }
 
@@ -187,7 +187,7 @@ $play-overlay-width: 18px;
       }
 
       .followers {
-        color: var(--greyForegroundColor);
+        color: pvar(--greyForegroundColor);
         font-weight: normal;
         font-size: 14px;
         margin-left: 10px;
@@ -203,7 +203,7 @@ $play-overlay-width: 18px;
     display: inline-block;
     font-size: 16px;
     text-transform: uppercase;
-    color: var(--greyForegroundColor);
+    color: pvar(--greyForegroundColor);
     margin-bottom: 10px;
     font-weight: $font-semibold;
     text-decoration: none;
@@ -221,32 +221,37 @@ $play-overlay-width: 18px;
   }
 }
 
-@mixin adapt-margin-content-width {
-  width: $video-miniature-width * 6;
-  margin: auto !important;
+@mixin adapt-margin-content-width($fluid: false) {
+  @if $fluid {
+    margin-left: 3vw !important;
+    margin-right: 3vw !important;
+  } @else {
+    width: $video-miniature-width * 6;
+    margin: auto !important;
 
-  @media screen and (max-width: 1800px) {
-    width: $video-miniature-width * 5;
-  }
+    @media screen and (max-width: 1800px) {
+      width: $video-miniature-width * 5;
+    }
 
-  @media screen and (max-width: 1800px - $video-miniature-width) {
-    width: $video-miniature-width * 4;
-  }
+    @media screen and (max-width: 1800px - $video-miniature-width) {
+      width: $video-miniature-width * 4;
+    }
 
-  @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
-    width: $video-miniature-width * 3;
-  }
+    @media screen and (max-width: 1800px - (2* $video-miniature-width)) {
+      width: $video-miniature-width * 3;
+    }
 
-  @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
-    width: $video-miniature-width * 2;
-  }
+    @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
+      width: $video-miniature-width * 2;
+    }
 
-  @media screen and (max-width: $mobile-view) {
-    width: auto;
-    margin: 0 !important;
+    @media screen and (max-width: $mobile-view) {
+      width: auto;
+      margin: 0 !important;
 
-    .videos {
-      @include video-miniature-small-screen;
+      .videos {
+        @include video-miniature-small-screen;
+      }
     }
   }
 }

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 0b558a3f52e16f1fc2ce1c2271172c16000c79fc..5971bb72a46422cc6283160edb0981032347e956 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -90,8 +90,8 @@
   display: inline-block;
   height: $button-height;
   width: $width;
-  color: var(--inputForegroundColor);
-  background-color: var(--inputBackgroundColor);
+  color: pvar(--inputForegroundColor);
+  background-color: pvar(--inputBackgroundColor);
   border: 1px solid #C6C6C6;
   border-radius: 3px;
   padding-left: 15px;
@@ -99,7 +99,7 @@
   font-size: 15px;
 
   &::placeholder {
-    color: var(--inputPlaceholderColor);
+    color: pvar(--inputPlaceholderColor);
   }
 
   @media screen and (max-width: $width) {
@@ -122,24 +122,24 @@
 @mixin peertube-textarea ($width, $height) {
   @include peertube-input-text($width);
 
-  color: var(--textareaForegroundColor);
-  background-color: var(--textareaBackgroundColor);
+  color: pvar(--textareaForegroundColor);
+  background-color: pvar(--textareaBackgroundColor);
   height: $height;
   padding: 5px 15px;
   font-size: 15px;
 }
 
 @mixin orange-button {
-  @include button-focus(var(--mainColorLightest));
+  @include button-focus(pvar(--mainColorLightest));
 
   &, &:active, &:focus {
     color: #fff;
-    background-color: var(--mainColor);
+    background-color: pvar(--mainColor);
   }
 
   &:hover {
     color: #fff;
-    background-color: var(--mainHoverColor);
+    background-color: pvar(--mainHoverColor);
   }
 
   &[disabled], &.disabled {
@@ -156,7 +156,7 @@
 @mixin tertiary-button {
   @include button-focus($grey-button-outline-color);
 
-  color: var(--greyForegroundColor);
+  color: pvar(--greyForegroundColor);
   background-color: transparent;
 
   &[disabled], &.disabled {
@@ -173,11 +173,11 @@
 
   &, &:active, &:focus {
     background-color: $grey-background-color;
-    color: var(--greyForegroundColor);
+    color: pvar(--greyForegroundColor);
   }
 
   &:hover, &:active, &:focus, &[disabled], &.disabled {
-    color: var(--greyForegroundColor);
+    color: pvar(--greyForegroundColor);
     background-color: $grey-background-hover-color;
   }
 
@@ -186,7 +186,7 @@
   }
 
   my-global-icon {
-    @include apply-svg-color(var(--greyForegroundColor))
+    @include apply-svg-color(pvar(--greyForegroundColor))
   }
 }
 
@@ -283,8 +283,8 @@
   margin: 0;
   width: $width;
   border-radius: 3px;
-  color: var(--inputForegroundColor);
-  background: var(--inputBackgroundColor);
+  color: pvar(--inputForegroundColor);
+  background: pvar(--inputBackgroundColor);
   position: relative;
   font-size: 15px;
 
@@ -315,7 +315,7 @@
     cursor: pointer;
     height: $button-height;
     text-overflow: ellipsis;
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
 
     &:focus {
       outline: none;
@@ -375,7 +375,7 @@
   position: absolute;
 
   &:focus + span {
-    box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+    box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
   }
 
   & + span {
@@ -404,7 +404,7 @@
 
   &:checked + span {
     border-color: transparent;
-    background: var(--mainColor);
+    background: pvar(--mainColor);
     animation: jelly 0.6s ease;
 
     &:after {
@@ -464,14 +464,14 @@
 
 @mixin in-content-small-title {
   text-transform: uppercase;
-  color: var(--mainColor);
+  color: pvar(--mainColor);
   font-weight: $font-bold;
   font-size: 13px;
 }
 
 @mixin settings-big-title {
   text-transform: uppercase;
-  color: var(--mainColor);
+  color: pvar(--mainColor);
   font-weight: $font-bold;
   font-size: 110%;
   margin-bottom: 10px;
@@ -482,7 +482,7 @@
 
   font-size: 13px;
   margin-top: 4px;
-  color: var(--mainForegroundColor);
+  color: pvar(--mainForegroundColor);
 
   span:hover {
     opacity: 0.8;
@@ -612,8 +612,8 @@
   border-radius: 0.25rem;
 
   .progress-bar {
-    color: var(--mainBackgroundColor);
-    background-color: var(--mainColor);
+    color: pvar(--mainBackgroundColor);
+    background-color: pvar(--mainColor);
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -622,7 +622,7 @@
     transition: width 0.6s ease;
 
     &.secondary {
-      background-color: var(--secondaryColor);
+      background-color: pvar(--secondaryColor);
     }
   }
 }
@@ -633,14 +633,14 @@
   padding: 0.75rem 1rem;
   margin-bottom: 1rem;
   list-style: none;
-  background-color: var(--submenuColor);
+  background-color: pvar(--submenuColor);
   border-radius: 0.25rem;
 
   .breadcrumb-item {
     display: flex;
 
     a {
-      color: var(--mainColor);
+      color: pvar(--mainColor);
     }
 
     & + .breadcrumb-item {
@@ -688,7 +688,7 @@
     & > a,
     & > div {
       padding: 20px;
-      background: var(--submenuColor);
+      background: pvar(--submenuColor);
       border-radius: 4px;
       box-sizing: border-box;
       height: 100%;
@@ -699,14 +699,14 @@
     text-align: center;
     font-size: 130%;
     line-height: 21px;
-    color: var(--mainForegroundColor);
+    color: pvar(--mainForegroundColor);
     line-height: 30px;
     margin-bottom: 20px;
   }
 
   .dashboard-label {
     font-size: 90%;
-    color: var(--inputPlaceholderColor);
+    color: pvar(--inputPlaceholderColor);
     text-align: center;
   }
 }
@@ -726,7 +726,7 @@
       height: max-content;
 
       &:focus-within {
-        box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+        box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
       }
     }
 
@@ -735,8 +735,8 @@
         height: 30px !important;
         font-size: 12px !important;
 
-        background-color: var(--mainBackgroundColor) !important;
-        color: var(--mainForegroundColor) !important;
+        background-color: pvar(--mainBackgroundColor) !important;
+        color: pvar(--mainForegroundColor) !important;
       }
     }
 
@@ -769,7 +769,7 @@
         vertical-align: middle !important;
 
         path  {
-          fill: var(--greyForegroundColor) !important;
+          fill: pvar(--greyForegroundColor) !important;
         }
       }
 
@@ -780,7 +780,7 @@
   }
 }
 
-@mixin divider($color: var(--submenuColor), $background: var(--mainBackgroundColor)) {
+@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
   width: 95%;
   border-top: .05rem solid $color;
   height: .05rem;
@@ -810,7 +810,7 @@
   border-radius: 5rem;
   display: inline-flex;
   font-size: 90%;
-  color: var(--mainForegroundColor);
+  color: pvar(--mainForegroundColor);
   height: $avatar-height;
   line-height: 1rem;
   margin: .1rem;
@@ -887,3 +887,21 @@
     }
   }
 }
+
+// applies 16:9 ratio to a child element (using $selector) only using
+// an immediate's parent size. This allows 16:9 ratio without explicit
+// dimensions, as width/height cannot be computed from each other.
+@mixin large-screen-ratio ($selector: 'div') {
+  position: relative;
+  height: 0;
+  width: 100%;
+  padding-top: 56%;
+
+  #{$selector} {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    @content;
+  }
+}

diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 11561e268bdf4ee3f45030ad14cdf77d086dbe65..14f1ae76c399ab16ec11dfbd931d854cf4ad1e59 100644 (file)
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -116,7 +116,7 @@ $variables: (
   --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
 );
 
-@function var($variable) {
+@function pvar($variable) {
   @return map-get($variables, $variable);
 }
 

diff --git a/client/src/sass/loading-bar.scss b/client/src/sass/loading-bar.scss
index d584b7c67bf3301ef20840c2d1b4abd5d9378d31..d7c30891128d11a465c5a69017d0814ae01be437 100644 (file)
--- a/client/src/sass/loading-bar.scss
+++ b/client/src/sass/loading-bar.scss
@@ -10,7 +10,7 @@
   -moz-transition: 350ms linear all;
   -o-transition: 350ms linear all;
   transition: 350ms linear all;
-  color: var(--mainColor);
+  color: pvar(--mainColor);
 }
 
 #loading-bar .bar {
@@ -19,7 +19,7 @@
   -o-transition: width 350ms;
   transition: width 350ms;
 
-  background: var(--mainColor);
+  background: pvar(--mainColor);
   position: fixed;
   z-index: z(loadbar);
   top: 0;

diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index eeab0ccdfc4b747a2275c4dfde1aa1a66635ff58..f3a28ead0e05d3fa8d09e74600b278cf55d21274 100644 (file)
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -14,7 +14,7 @@ $context-menu-width: 350px;
 
   .vjs-menu-content {
     opacity: $primary-foreground-opacity;
-    color: var(--embedForegroundCsolor);
+    color: pvar(--embedForegroundCsolor);
     font-size: $font-size !important;
     font-weight: $font-semibold;
   }

diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 836be23ccece241e7d02283ba37dea1e8cde962d..92923a129f437c03d96d538ee5a2e29acb7efe26 100644 (file)
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -17,7 +17,7 @@ body {
 
 .video-js.vjs-peertube-skin {
   font-size: $font-size;
-  color: var(--embedForegroundColor);
+  color: pvar(--embedForegroundColor);
 
   .vjs-dock-text {
     padding-right: 10px;
@@ -132,7 +132,7 @@ body {
   .vjs-control-bar,
   .vjs-big-play-button,
   .vjs-settings-dialog {
-    background-color: var(--embedBigPlayBackgroundColor);
+    background-color: pvar(--embedBigPlayBackgroundColor);
   }
 
   .vjs-poster {
@@ -157,7 +157,7 @@ body {
     .vjs-theater-control,
     .vjs-settings
     {
-      color: var(--embedForegroundColor) !important;
+      color: pvar(--embedForegroundColor) !important;
 
       opacity: $primary-foreground-opacity;
       transition: opacity .1s;
@@ -170,7 +170,7 @@ body {
     .vjs-current-time,
     .vjs-duration,
     .vjs-peertube {
-      color: var(--embedForegroundColor);
+      color: pvar(--embedForegroundColor);
       opacity: $primary-foreground-opacity;
     }
 
@@ -190,7 +190,7 @@ body {
         transition: none;
 
         .vjs-play-progress {
-          background: var(--embedForegroundColor);
+          background: pvar(--embedForegroundColor);
 
           // Not display the circle if the progress is not hovered
           &::before {

diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 83407b4459f1b3d5d9f0d1a7b41f3aab4752b866..09c872ef74b3a6ac5c18d985f805368eeabbc6c4 100644 (file)
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -38,7 +38,7 @@ $setting-transition-easing: ease-out;
     position: absolute;
     right: .5em;
     bottom: 3.5em;
-    color: var(--embedForegroundColor);
+    color: pvar(--embedForegroundColor);
     opacity: $primary-foreground-opacity;
     margin: 0 auto;
     font-size: $font-size !important;

diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 056b88fc16013fa96a3104c3d25ad2721b248c67..a9a950dc08375fa1a25905e354cc1bc91a3dcbba 100644 (file)
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -7,7 +7,7 @@
 @mixin glyphicon-light {
   font-family: 'Glyphicons Halflings';
   text-decoration: none !important;
-  color: var(--mainForegroundColor) !important;
+  color: pvar(--mainForegroundColor) !important;
   font-display: swap;
 }
 
@@ -19,14 +19,14 @@ my-button {
 
 // focus box-shadow for primeng
 .ui-inputtext:enabled:focus:not(.ui-state-error) {
-  box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
+  box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
 }
 
 // data table customizations
 p-table {
   .ui-table-caption {
     border: none !important;
-    background-color: var(--mainBackgroundColor) !important;
+    background-color: pvar(--mainBackgroundColor) !important;
 
     .caption {
       height: 40px;
@@ -41,14 +41,14 @@ p-table {
   }
 
   th {
-    background-color: var(--mainBackgroundColor) !important;
+    background-color: pvar(--mainBackgroundColor) !important;
     outline: 0;
   }
 
   td, th {
     font-family: $main-fonts;
     font-size: 15px !important;
-    color: var(--mainForegroundColor) !important;
+    color: pvar(--mainForegroundColor) !important;
   }
 
   td {
@@ -63,14 +63,14 @@ p-table {
 
   tr {
     outline: 0;
-    background-color: var(--mainBackgroundColor) !important;
+    background-color: pvar(--mainBackgroundColor) !important;
     height: 46px;
 
     &.ui-state-highlight {
-      background-color: var(--submenuColor) !important;
+      background-color: pvar(--submenuColor) !important;
 
       td, td > a {
-        color: var(--mainForegroundColor) !important;
+        color: pvar(--mainForegroundColor) !important;
       }
     }
   }
@@ -78,7 +78,7 @@ p-table {
   .ui-table-tbody {
     tr {
       &:hover {
-        background-color: var(--submenuColor) !important;
+        background-color: pvar(--submenuColor) !important;
 
         .action-cell {
           .dropdown-root,
@@ -113,16 +113,16 @@ p-table {
   th {
     border: none !important;
     border-bottom: 1px solid !important;
-    border-color: var(--submenuColor) !important;
+    border-color: pvar(--submenuColor) !important;
     text-align: left !important;
     padding: 5px 0 5px 15px !important;
     font-weight: $font-semibold !important;
-    color: var(--mainForegroundColor) !important;
+    color: pvar(--mainForegroundColor) !important;
 
     &.ui-sortable-column:hover {
-      background-color: var(--submenuColor) !important;
+      background-color: pvar(--submenuColor) !important;
       border: 1px solid !important;
-      border-color: var(--submenuColor) !important;
+      border-color: pvar(--submenuColor) !important;
       border-width: 0 1px !important;
 
       &:first-child {
@@ -131,7 +131,7 @@ p-table {
     }
 
     &.ui-state-highlight {
-      background-color: var(--submenuColor) !important;
+      background-color: pvar(--submenuColor) !important;
 
       .pi {
         @extend .glyphicon;
@@ -143,13 +143,13 @@ p-table {
         &.pi-sort-amount-up-alt {
           @extend .glyphicon-triangle-top;
 
-          color: var(--mainForegroundColor) !important;
+          color: pvar(--mainForegroundColor) !important;
         }
 
         &.pi-sort-amount-down {
           @extend .glyphicon-triangle-bottom;
 
-          color: var(--mainForegroundColor) !important;
+          color: pvar(--mainForegroundColor) !important;
         }
       }
     }
@@ -184,11 +184,11 @@ p-table {
 
   p-paginator {
     .ui-paginator-bottom {
-      background-color: var(--mainBackgroundColor) !important;
+      background-color: pvar(--mainBackgroundColor) !important;
       position: relative;
       border: none;
       border-top: 1px solid !important;
-      border-color: var(--submenuColor) !important;
+      border-color: pvar(--submenuColor) !important;
       height: 40px;
       display: flex;
       justify-content: center;
@@ -200,18 +200,18 @@ p-table {
         left: 0;
 
         &.ui-state-focus {
-          box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+          box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
         }
 
         .ui-dropdown-label {
-          color: var(--inputPlaceholderColor);
+          color: pvar(--inputPlaceholderColor);
         }
       }
 
       .ui-paginator-current {
         position: absolute;
         right: 0;
-        color: var(--inputPlaceholderColor);
+        color: pvar(--inputPlaceholderColor);
       }
 
       .ui-paginator-first,
@@ -227,7 +227,7 @@ p-table {
 
         &.focus-within,
         &:focus {
-          box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+          box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
         }
 
         &.ui-state-disabled:hover {
@@ -261,12 +261,12 @@ p-table {
         .ui-paginator-page {
           &.focus-within,
           &:focus {
-            box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest) !important;
+            box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest) !important;
           }
         }
 
         a {
-          color: var(--mainForegroundColor) !important;
+          color: pvar(--mainForegroundColor) !important;
           font-weight: $font-semibold !important;
           margin: 0 5px !important;
           outline: 0 !important;
@@ -278,7 +278,7 @@ p-table {
           &.ui-state-active {
             &, &:hover, &:active, &:focus {
               color: #fff !important;
-              background-color: var(--mainColor) !important;
+              background-color: pvar(--mainColor) !important;
             }
           }
         }
@@ -328,7 +328,7 @@ p-multiselect {
 
       &:focus,
       &.ui-state-focus {
-        box-shadow: #{$focus-box-shadow-form} var(--mainColorLightest);
+        box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
       }
     }
   }
@@ -368,11 +368,11 @@ p-multiselect {
   }
 
   .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
-    background-color: var(--mainColorLighter);
+    background-color: pvar(--mainColorLighter);
   }
 
   .ui-inputtext:enabled:focus:not(.ui-state-error) {
-    border-color: var(--mainColorLighter) !important;
+    border-color: pvar(--mainColorLighter) !important;
     box-shadow: none;
   }
 }
@@ -445,8 +445,8 @@ p-tablecheckbox:hover div .ui-chkbox-box {
 
   .ui-chkbox-box {
     &.ui-state-active {
-      border-color: var(--mainColor) !important;
-      background-color: var(--mainColor) !important;
+      border-color: pvar(--mainColor) !important;
+      background-color: pvar(--mainColor) !important;
     }
 
     .ui-chkbox-icon {
@@ -462,8 +462,8 @@ p-tablecheckbox:hover div .ui-chkbox-box {
         height: 12px;
         opacity: 0;
         transform: rotate(45deg) scale(0);
-        border-right: 2px solid var(--mainBackgroundColor);
-        border-bottom: 2px solid var(--mainBackgroundColor);
+        border-right: 2px solid pvar(--mainBackgroundColor);
+        border-bottom: 2px solid pvar(--mainBackgroundColor);
       }
 
       &.pi-check:after {
@@ -478,7 +478,7 @@ p-inputswitch {
   height: 26px;
 
   .ui-inputswitch-checked .ui-inputswitch-slider {
-    background-color: var(--mainColor) !important;
+    background-color: pvar(--mainColor) !important;
   }
 
   &.small {
@@ -520,8 +520,8 @@ p-toast {
 
   .ui-toast-message {
     font-family: $main-fonts;
-    background-color: var(--mainBackgroundColor) !important;
-    color: var(--mainForegroundColor) !important;
+    background-color: pvar(--mainBackgroundColor) !important;
+    color: pvar(--mainForegroundColor) !important;
     border-radius: 5px;
     box-sizing: border-box;
     border: 1px solid #EBEEF5 !important;