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   max-width: $max-channels-width;
  12   background-color: pvar(--channelBackgroundColor);
  13   padding: 30px;
  14
  15   margin: 30px 0;
  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 actor-avatar-size(75px);
  33     @include margin-right(15px);
  34
  35     grid-column: 1;
  36     grid-row: 1 / 3;
  37   }
  38
  39   a {
  40     @include peertube-word-wrap;
  41
  42     color: pvar(--mainForegroundColor);
  43   }
  44
  45   h2 {
  46     grid-row: 1;
  47     grid-column: 2;
  48     font-size: 20px;
  49     line-height: 1;
  50     font-weight: $font-bold;
  51     margin: 0;
  52   }
  53
  54   .actor-counters {
  55     @include margin-left(15px);
  56     @include actor-counters;
  57
  58     grid-row: 1;
  59     grid-column: 3;
  60   }
  61
  62   .description-html {
  63     @include fade-text(30px, pvar(--channelBackgroundColor));
  64
  65     grid-column: 2 / 4;
  66     grid-row: 2;
  67
  68     max-height: 80px;
  69     font-size: 16px;
  70   }
  71 }
  72
  73 my-subscribe-button {
  74   grid-row: 1;
  75   grid-column: 2;
  76 }
  77
  78 .videos {
  79   display: flex;
  80   grid-column: 1 / 3;
  81   grid-row: 2;
  82   margin-top: 30px;
  83
  84   position: relative;
  85   overflow: hidden;
  86
  87   my-video-miniature {
  88     @include margin-right(15px);
  89
  90     min-width: $video-thumbnail-medium-width;
  91     max-width: $video-thumbnail-medium-width;
  92   }
  93
  94   .no-results {
  95     height: auto;
  96   }
  97 }
  98
  99 .miniature-show-channel {
 100   height: 100%;
 101   position: absolute;
 102   right: 0;
 103   background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
 104   padding: (math.div($video-thumbnail-medium-height, 2) - 10px) 15px 0 60px;
 105   z-index: z(miniature) + 1;
 106
 107   a {
 108     color: pvar(--mainColor);
 109     font-size: 16px;
 110     font-weight: $font-semibold;
 111   }
 112 }
 113
 114 .button-show-channel {
 115   display: none;
 116 }
 117
 118 @media screen and (max-width: $mobile-view) {
 119   .channel {
 120     padding: 15px;
 121   }
 122
 123   .channel-avatar-row {
 124     grid-template-columns: auto auto auto 1fr;
 125
 126     .avatar-link {
 127       grid-row: 1 / 4;
 128     }
 129
 130     h2 {
 131       font-size: 16px;
 132     }
 133
 134     .actor-counters {
 135       margin: 0;
 136       font-size: 13px;
 137       grid-row: 2;
 138       grid-column: 2 / 4;
 139     }
 140
 141     .description-html {
 142       grid-row: 3;
 143       font-size: 14px;
 144     }
 145   }
 146
 147   .show-channel a {
 148     @include peertube-button-link;
 149     @include orange-button-inverted;
 150   }
 151
 152   .videos {
 153     display: none;
 154   }
 155
 156   my-subscribe-button,
 157   .button-show-channel {
 158     grid-column: 1 / 4;
 159     grid-row: 3;
 160     margin-top: 15px;
 161   }
 162
 163   my-subscribe-button {
 164     justify-self: start;
 165   }
 166
 167   .button-show-channel {
 168     display: block;
 169     justify-self: end;
 170   }
 171 }