4 files changed, 268 insertions, 264 deletions

diff --git a/client/src/sass/include/_actor.scss b/client/src/sass/include/_actor.scss
new file mode 100644
index 000000000..a4798ce1d
--- /dev/null
+++ b/client/src/sass/include/_actor.scss
@@ -0,0 +1,88 @@
+@import '_variables';
+
+@mixin section-label-responsive {
+  color: pvar(--mainColor);
+  font-size: 12px;
+  margin-bottom: 15px;
+  font-weight: $font-bold;
+  letter-spacing: 2.5px;
+
+  @media screen and (max-width: $mobile-view) {
+    font-size: 10px;
+    letter-spacing: 2.1px;
+    margin-bottom: 5px;
+  }
+}
+
+@mixin show-more-description {
+  color: pvar(--mainColor);
+  cursor: pointer;
+  margin: 10px auto 45px auto;
+}
+
+@mixin avatar-row-responsive ($img-margin, $grey-font-size) {
+  display: flex;
+  grid-column: 1;
+  margin-bottom: 30px;
+
+  .channel-avatar {
+    @include channel-avatar(120px);
+  }
+
+  > div {
+    margin-left: $img-margin;
+    min-width: 1px;
+  }
+
+  .actor-info {
+    display: flex;
+
+    > div:first-child {
+      flex-grow: 1;
+      min-width: 1px;
+    }
+  }
+
+  .actor-display-name {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  h1 {
+    font-size: 28px;
+    font-weight: $font-bold;
+    margin: 0;
+  }
+
+  .actor-handle {
+    @include ellipsis;
+  }
+
+  .actor-handle,
+  .actor-counters {
+    color: pvar(--greyForegroundColor);
+    font-size: $grey-font-size;
+  }
+
+  .actor-counters > *:not(:last-child)::after {
+    content: '•';
+    margin: 0 10px;
+    color: pvar(--mainColor);
+  }
+
+  @media screen and (max-width: $mobile-view) {
+    margin-bottom: 15px;
+
+    h1 {
+      font-size: 22px;
+    }
+
+    .channel-avatar {
+      @include channel-avatar(80px);
+    }
+
+    .account-avatar {
+      @include avatar(120px);
+    }
+  }
+}
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 134b307b1..3b86f29b4 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -4,11 +4,11 @@
 @mixin miniature-name {
   @include ellipsis-multiline(1.1em, 2);
 
+  word-break: break-all;
+  word-wrap: break-word;
   transition: color 0.2s;
   font-weight: $font-semibold;
   color: pvar(--mainForegroundColor);
-  margin-top: 10px;
-  margin-bottom: 5px;
 
   &:hover {
     text-decoration: none;
@@ -20,20 +20,20 @@
   }
 }
 
-$play-overlay-transition: 0.2s ease;
-$play-overlay-height: 26px;
-$play-overlay-width: 18px;
-
 @mixin miniature-thumbnail {
   @include disable-outline;
 
+  $play-overlay-transition: 0.2s ease;
+  $play-overlay-height: 26px;
+  $play-overlay-width: 18px;
+
   display: flex;
   flex-direction: column;
   position: relative;
   border-radius: 3px;
+  width: 100%;
+  height: 100%;
   overflow: hidden;
-  width: $video-thumbnail-width;
-  height: $video-thumbnail-height;
   background-color: #ececec;
   transition: filter $play-overlay-transition;
 
@@ -97,154 +97,64 @@ $play-overlay-width: 18px;
   color: #fff;
 }
 
-@mixin miniature-rows {
-  &:first-child {
-    padding-top: 30px;
+// Use margin by default, or padding if $margin is false
+@mixin grid-videos-miniature-margins ($margin: true, $min-margin: 0) {
+  --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
 
-    .section-title {
-      border-top: none !important;
-    }
-  }
-
-  .section-title {
-    font-size: 24px;
-    font-weight: $font-semibold;
-    padding-top: 15px;
-    margin-bottom: 15px;
-    display: flex;
-    justify-content: space-between;
-
-    &:not(h2) {
-      border-top: 1px solid $separator-border-color;
-    }
-
-    a {
-      &:hover, &:focus:not(.focus-visible), &:active {
-        text-decoration: none;
-        outline: none;
-      }
-
-      color: pvar(--mainForegroundColor);
-    }
-  }
-
-  &.channel {
-    .section-title {
-      a {
-        display: flex;
-        width: fit-content;
-        align-items: center;
-
-        img {
-          @include avatar(28px);
-
-          margin-right: 8px;
-        }
-      }
-
-      .followers {
-        color: pvar(--greyForegroundColor);
-        font-weight: normal;
-        font-size: 14px;
-        margin-left: 10px;
-        position: relative;
-        top: 2px;
-      }
-    }
-  }
-
-  .show-more {
-    position: relative;
-    top: -5px;
-    display: inline-block;
-    font-size: 16px;
-    text-transform: uppercase;
-    color: pvar(--greyForegroundColor);
-    margin-bottom: 10px;
-    font-weight: $font-semibold;
-    text-decoration: none;
+  @if $margin {
+    margin-left: var(--gridVideosMiniatureMargins) !important;
+    margin-right: var(--gridVideosMiniatureMargins) !important;
+  } @else {
+    padding-left: var(--gridVideosMiniatureMargins) !important;
+    padding-right: var(--gridVideosMiniatureMargins) !important;
   }
 
   @media screen and (max-width: $mobile-view) {
-    max-height: initial;
-    overflow: initial;
-
-    .section-title {
-      font-size: 17px;
-      margin-left: 10px;
-    }
-  }
-}
+    --gridVideosMiniatureMargins: #{$min-margin};
 
-@mixin fluid-videos-miniature-layout {
-  margin-left: $not-expanded-horizontal-margins !important;
-  margin-right: $not-expanded-horizontal-margins !important;
-
-  @media screen and (max-width: $mobile-view) {
     width: auto;
-    margin: 0 !important;
-
-    .videos {
-      text-align: center;
-
-      ::ng-deep .video-miniature {
-        padding-right: 0;
-        height: auto;
-        width: 100%;
-        margin-bottom: 25px;
-
-        .video-miniature-information {
-          width: 100% !important;
-          text-align: left;
-
-          span {
-            width: 100%;
-          }
-        }
-
-        .video-thumbnail {
-          border-radius: 0;
-        }
-      }
-    }
   }
+}
 
-  @media screen and (min-width: #{breakpoint(fhd)}) {
-    margin-left: 6vw !important;
-    margin-right: 6vw !important;
-  }
+@mixin grid-videos-miniature-layout {
+  @include grid-videos-miniature-margins;
 
   @media screen and (min-width: $mobile-view) {
-
-    .videos {
-      --miniature-min-width: #{$video-thumbnail-width - 15px};
-      --miniature-max-width: #{$video-thumbnail-width};
+    .videos,
+    .playlists {
+      --miniatureMinWidth: #{$video-thumbnail-width - 25px};
+      --miniatureMaxWidth: #{$video-thumbnail-width};
 
       display: grid;
-      column-gap: 5px;
+      column-gap: 30px;
       grid-template-columns: repeat(
         auto-fill,
         minmax(
-          var(--miniature-min-width),
+          var(--miniatureMinWidth),
           1fr
         )
       );
 
-      @media screen and (min-width: #{breakpoint(fhd)}) {
-        column-gap: 1%;
-        --miniature-min-width: #{$video-thumbnail-width};
-      }
-
-      .video-wrapper {
+      .video-wrapper,
+      .playlist-wrapper {
         margin: 0 auto;
         width: 100%;
 
-        my-video-miniature {
+        my-video-miniature,
+        my-video-playlist-miniature {
           display: block;
-          min-width: var(--miniature-min-width);
-          max-width: var(--miniature-max-width);
+          min-width: var(--miniatureMinWidth);
+          max-width: var(--miniatureMaxWidth);
         }
       }
+
+      @media screen and (min-width: #{breakpoint(xm)}) {
+        column-gap: 15px;
+      }
+
+      @media screen and (min-width: #{breakpoint(fhd)}) {
+        column-gap: 2%;
+      }
     }
   }
 }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index ca11488cb..e03201cef 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -23,17 +23,28 @@
   display: block;
   /* Fallback for non-webkit */
   display: -webkit-box;
-  max-height: $font-size * $number-of-lines;
+  -webkit-line-clamp: $number-of-lines;
   /* Fallback for non-webkit */
   font-size: $font-size;
   line-height: $font-size;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-height: $font-size * $number-of-lines;
 }
 
-@mixin prefix($property, $parameters...) {
-  @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
-    #{$prefix}#{$property}: $parameters;
+@mixin fade-text ($fade-after, $background-color) {
+  position: relative;
+  overflow: hidden;
+
+  &:after {
+    content: '';
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: linear-gradient(transparent $fade-after, $background-color);
   }
 }
 
@@ -41,9 +52,6 @@
   word-break: break-word;
   word-wrap: break-word;
   overflow-wrap: break-word;
-  -webkit-hyphens: auto;
-  -ms-hyphens: auto;
-  -moz-hyphens: auto;
   hyphens: auto;
 }
 
@@ -52,28 +60,6 @@
   ::ng-deep .material {
     color: $color;
   }
-
-  ::ng-deep svg {
-    path[fill="#000"],
-    g[fill="#000"],
-    rect[fill="#000"],
-    circle[fill="#000"],
-    polygon[fill="#000"] {
-      fill: $color;
-    }
-
-    path[stroke="#000"],
-    g[stroke="#000"],
-    rect[stroke="#000"],
-    circle[stroke="#000"],
-    polygon[stroke="#000"] {
-      stroke: $color;
-    }
-
-    stop[stop-color="#000"] {
-      stop-color: $color;
-    }
-  }
 }
 
 @mixin fill-svg-color ($color) {
@@ -163,6 +149,33 @@
   }
 }
 
+@mixin orange-button-inverted {
+  @include button-focus(pvar(--mainColorLightest));
+
+  border: 2px solid pvar(--mainColor);
+  font-weight: $font-semibold;
+
+  &, &:active, &:focus {
+    color: pvar(--mainColor);
+    background-color: pvar(--mainBackgroundColor);
+  }
+
+  &:hover {
+    color: pvar(--mainColor);
+    background-color: pvar(--mainColorLightest);
+  }
+
+  &[disabled], &.disabled {
+    cursor: default;
+    color: pvar(--mainColor);
+    background-color: #C6C6C6;
+  }
+
+  my-global-icon {
+    @include apply-svg-color(pvar(--mainColor))
+  }
+}
+
 @mixin tertiary-button {
   @include button-focus($grey-button-outline-color);
 
@@ -225,7 +238,8 @@
   font-size: 15px;
   height: $button-height;
   line-height: $button-height;
-  border-radius: 3px;
+  // FIXME: because of primeng that redefines border-radius of all input[type="..."]
+  border-radius: 3px !important;
   text-align: center;
   padding: 0 17px 0 13px;
   cursor: pointer;
@@ -534,6 +548,14 @@
   min-height: $size;
 }
 
+@mixin channel-avatar ($size) {
+  width: $size;
+  height: $size;
+  min-width: $size;
+  min-height: $size;
+  border-radius: 5px;
+}
+
 @mixin chevron ($size, $border-width) {
   border-style: solid;
   border-width: $border-width $border-width 0 0;
@@ -593,103 +615,29 @@
   }
 }
 
-@mixin sub-menu-with-actor {
-  position: initial;
-  z-index: unset;
-  height: max-content;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-
-  .actor {
-    display: flex;
-    margin-top: 20px;
-    margin-bottom: 20px;
-
-    img {
-      @include avatar(80px);
-
-      margin-right: 20px;
-    }
-
-    .actor-info {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      .actor-names {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-
-        .actor-display-name {
-          font-size: 23px;
-          font-weight: $font-bold;
-          margin-right: 7px;
-        }
-
-        .actor-name {
-          position: relative;
-          top: 3px;
-          font-size: 14px;
-          color: $grey-actor-name;
-        }
-      }
-
-      .actor-lower {
-        grid-area: lower;
-      }
-
-      .actor-followers {
-        font-size: 15px;
-      }
-
-      .actor-owner {
-        @include actor-owner;
-      }
-    }
-  }
-
-  .links {
-    margin-top: 0;
-    margin-bottom: 15px;
-
-    a {
-      margin-top: 0;
-      margin-bottom: 0;
-      text-transform: uppercase;
-      font-weight: 600;
-      font-size: 110%;
-
-      @media screen and (max-width: $mobile-view) {
-        font-size: 130%;
-      }
-    }
-
-    list-overflow {
-      display: inline-block;
-      width: max-content;
-    }
-  }
-}
-
 @mixin create-button {
   @include peertube-button-link;
   @include orange-button;
   @include button-with-icon(20px, 5px, -1px);
 }
 
-@mixin row-blocks {
+@mixin row-blocks ($column-responsive: true) {
   display: flex;
   min-height: 130px;
   padding-bottom: 20px;
   margin-bottom: 20px;
   border-bottom: 1px solid #C6C6C6;
 
-  @media screen and (max-width: 800px) {
-    flex-direction: column;
-    height: auto;
-    align-items: center;
+  @media screen and (max-width: $small-view) {
+    @if $column-responsive {
+      flex-direction: column;
+      height: auto;
+      align-items: center;
+    } @else {
+      min-height: initial;
+      padding-bottom: 10px;
+      margin-bottom: 10px;
+    }
   }
 }
 
@@ -756,7 +704,7 @@
   padding: 0.75rem 1rem;
   margin-bottom: 1rem;
   list-style: none;
-  background-color: pvar(--submenuColor);
+  background-color: pvar(--submenuBackgroundColor);
   border-radius: 0.25rem;
 
   .breadcrumb-item {
@@ -811,7 +759,7 @@
     & > a,
     & > div {
       padding: 20px;
-      background: pvar(--submenuColor);
+      background: pvar(--submenuBackgroundColor);
       border-radius: 4px;
       box-sizing: border-box;
       height: 100%;
@@ -833,7 +781,7 @@
   }
 }
 
-@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
+@mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
   width: 95%;
   border-top: .05rem solid $color;
   height: .05rem;
@@ -916,7 +864,7 @@
   }
 }
 
-@mixin admin-sub-header-responsive ($horizontal-margins) {
+@mixin admin-sub-header-responsive {
   flex-direction: column;
 
   .form-sub-title {
@@ -931,7 +879,7 @@
     white-space: nowrap;
     height: 50px;
     padding: 10px 0;
-    width: calc(100vw - #{$horizontal-margins*2});
+    width: 100%;
 
     a {
       margin-left: 5px;
@@ -939,14 +887,16 @@
   }
 }
 
-// applies 16:9 ratio to a child element (using $selector) only using
-// an immediate's parent size. This allows 16:9 ratio without explicit
+// applies ratio (default to 16:9) to a child element (using $selector) only using
+// an immediate's parent size. This allows to set a ratio without explicit
 // dimensions, as width/height cannot be computed from each other.
-@mixin large-screen-ratio ($selector: 'div') {
+@mixin block-ratio ($selector: 'div', $inverted-ratio: 9/16) {
+  $padding-percent: percentage($inverted-ratio);
+
   position: relative;
   height: 0;
   width: 100%;
-  padding-top: 56%;
+  padding-top: $padding-percent;
 
   #{$selector} {
     position: absolute;
@@ -964,7 +914,7 @@
     padding-bottom: 15px;
     margin-bottom: $sub-menu-margin-bottom;
 
-    my-global-icon {
+    > my-global-icon {
       margin-right: 10px;
       vertical-align: bottom;
       width: 24px;
@@ -991,3 +941,31 @@
 
   border-left: $width solid rgba(255, 255, 255, 0.95);
 }
+
+@mixin on-small-main-col () {
+  :host-context(.main-col:not(.expanded)) {
+    @media screen and (max-width: $small-view + $menu-width) {
+      @content;
+    }
+  }
+
+  :host-context(.main-col.expanded) {
+    @media screen and (max-width: $small-view) {
+      @content;
+    }
+  }
+}
+
+@mixin on-mobile-main-col () {
+  :host-context(.main-col:not(.expanded)) {
+    @media screen and (max-width: $mobile-view + $menu-width) {
+      @content;
+    }
+  }
+
+  :host-context(.main-col.expanded) {
+    @media screen and (max-width: $mobile-view) {
+      @content;
+    }
+  }
+}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index c8316473d..d2a5d2bd9 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -16,9 +16,10 @@ $grey-foreground-hover-color: #303030;
 $grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%);
 
 $main-color: hsl(24, 90%, 50%);
-$main-hover-color: lighten($main-color, 5%);
 $main-color-lighter: lighten($main-color, 10%);
 $main-color-lightest: lighten($main-color, 40%);
+$main-hover-color: lighten($main-color, 5%);
+
 $secondary-color: hsl(187, 77%, 34%);
 
 $support-button: inherit;
@@ -47,18 +48,34 @@ $menu-bottom-color: #C6C6C6;
 $menu-width: 240px;
 $menu-lateral-padding: 26px;
 
-$sub-menu-color: #F7F7F7;
+$sub-menu-background-color: #F7F7F7;
 $sub-menu-height: 81px;
 
+$channel-background-color: #f6ede8;
+
+$banner-inverted-ratio: 1/6;
+
+$max-channels-width: 1200px;
+
 $footer-height: 30px;
 $footer-margin: 30px;
 
 $separator-border-color: rgba(0, 0, 0, 0.10);
 
-$video-miniature-width: 238px;
 $video-miniature-margin-bottom: 15px;
-$video-thumbnail-height: 122px;
-$video-thumbnail-width: 223px;
+
+$video-miniature-row-name-font-size: 1.3em;
+$video-miniature-row-mobile-name-font-size: 14px;
+
+$video-miniature-row-info-font-size: 14px;
+$video-miniature-row-mobile-info-font-size: 12px;
+
+$video-thumbnail-height: 153px;
+$video-thumbnail-width: 280px;
+$video-thumbnail-medium-height: 114px;
+$video-thumbnail-medium-width: 201px;
+$video-thumbnail-small-height: 71px;
+$video-thumbnail-small-width: 125px;
 
 $theater-bottom-space: 115px;
 
@@ -98,7 +115,9 @@ $variables: (
 
   --menuBackgroundColor: var(--menuBackgroundColor),
   --menuForegroundColor: var(--menuForegroundColor),
-  --submenuColor: var(--submenuColor),
+
+  --submenuBackgroundColor: var(--submenuBackgroundColor),
+  --channelBackgroundColor: var(--channelBackgroundColor),
 
   --inputForegroundColor: var(--inputForegroundColor),
   --inputBackgroundColor: var(--inputBackgroundColor),
@@ -116,11 +135,20 @@ $variables: (
   --supportButtonHeartColor: var(--supportButtonHeartColor),
 
   --embedForegroundColor: var(--embedForegroundColor),
-  --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
+  --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor),
+
+  --horizontalMarginContent: var(--horizontalMarginContent),
+  --videosHorizontalMarginContent: var(--videosHorizontalMarginContent),
+  --mainColWidth: var(--mainColWidth)
 );
 
+// SASS type check our CSS variables
 @function pvar($variable) {
-  @return map-get($variables, $variable);
+  @if map-has-key($variables, $variable) {
+    @return map-get($variables, $variable);
+  } @else {
+    @error "ERROR: Variable #{$variable} does not exist";
+  }
 }
 
 /*** z-index groups ***/