client/src/app/+accounts/account-video-channels/account-video-channels.component.scss

   1 @use 'sass:math';
   2 @use '_variables' as *;
   3 @use '_mixins' as *;
   4 @use '_miniature' as *;
   5
   6 .margin-content {
   7   @include grid-videos-miniature-margins;
   8 }
   9
  10 .channel {
  11   @include padding(1.75rem);
  12   @include margin(2rem, 0);
  13
  14   max-width: $max-channels-width;
  15   background-color: pvar(--channelBackgroundColor);
  16
  17   display: grid;
  18   grid-template-columns: 1fr auto;
  19   grid-template-rows: auto auto;
  20   column-gap: 15px;
  21 }
  22
  23 .channel-avatar-row {
  24   grid-column: 1;
  25   grid-row: 1;
  26
  27   display: grid;
  28   grid-template-columns: auto auto 1fr;
  29   grid-template-rows: auto 1fr;
  30
  31   my-actor-avatar {
  32     @include margin-right(15px);
  33
  34     grid-column: 1;
  35     grid-row: 1 / 3;
  36   }
  37
  38   a {
  39     @include peertube-word-wrap;
  40
  41     color: pvar(--mainForegroundColor);
  42   }
  43
  44   h2 {
  45     grid-row: 1;
  46     grid-column: 2;
  47   }
  48
  49   .actor-counters {
  50     @include margin-left(15px);
  51     @include actor-counters;
  52
  53     grid-row: 1;
  54     grid-column: 3;
  55   }
  56
  57   .description-html {
  58     @include fade-text(30px, pvar(--channelBackgroundColor));
  59
  60     grid-column: 2 / 4;
  61     grid-row: 2;
  62
  63     max-height: 80px;
  64   }
  65 }
  66
  67 my-subscribe-button {
  68   grid-row: 1;
  69   grid-column: 2;
  70 }
  71
  72 .videos {
  73   display: flex;
  74   grid-column: 1 / 3;
  75   grid-row: 2;
  76
  77   position: relative;
  78
  79   my-video-miniature {
  80     @include margin-right(15px);
  81
  82     min-width: $video-thumbnail-medium-width;
  83     max-width: $video-thumbnail-medium-width;
  84   }
  85
  86 }
  87
  88 .videos-overflow-workaround {
  89   @include margin-top(2rem);
  90
  91   overflow-x: hidden;
  92 }
  93
  94 .miniature-show-channel {
  95   height: 100%;
  96   position: absolute;
  97   right: 0;
  98   background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
  99   padding: (math.div($video-thumbnail-medium-height, 2) - 10px) 15px 0 60px;
 100   z-index: z(miniature) + 1;
 101
 102   a {
 103     color: pvar(--mainColor);
 104     font-weight: $font-semibold;
 105   }
 106 }
 107
 108 .button-show-channel {
 109   display: none;
 110 }
 111
 112 @include on-small-main-col {
 113   .channel-avatar-row {
 114     grid-template-columns: auto auto auto 1fr;
 115
 116     .avatar-link {
 117       grid-row: 1 / 4;
 118     }
 119
 120     .actor-counters {
 121       margin: 0;
 122       font-size: 13px;
 123       grid-row: 2;
 124       grid-column: 2 / 4;
 125     }
 126
 127     .description-html {
 128       grid-row: 3;
 129       font-size: 14px;
 130     }
 131   }
 132
 133   .show-channel a {
 134     @include peertube-button-link;
 135     @include orange-button-inverted;
 136   }
 137
 138   .videos {
 139     display: none;
 140   }
 141
 142   my-subscribe-button,
 143   .button-show-channel {
 144     grid-column: 1 / 4;
 145     grid-row: 3;
 146     margin-top: 15px;
 147   }
 148
 149   my-subscribe-button {
 150     justify-self: start;
 151   }
 152
 153   .button-show-channel {
 154     display: block;
 155     justify-self: end;
 156   }
 157 }