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