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

   1 @import '_variables';
   2 @import '_mixins';
   3 @import '_miniature';
   4
   5 .margin-content {
   6   @include grid-videos-miniature-margins;
   7 }
   8
   9 .channel {
  10   max-width: $max-channels-width;
  11   background-color: pvar(--channelBackgroundColor);
  12   padding: 30px;
  13
  14   margin: 30px 0;
  15
  16   display: grid;
  17   grid-template-columns: 1fr auto;
  18   grid-template-rows: auto auto;
  19   column-gap: 15px;
  20 }
  21
  22 .channel-avatar-row {
  23   grid-column: 1;
  24   grid-row: 1;
  25
  26   display: grid;
  27   grid-template-columns: auto auto 1fr;
  28   grid-template-rows: auto 1fr;
  29
  30   my-actor-avatar {
  31     @include actor-avatar-size(75px);
  32
  33     grid-column: 1;
  34     grid-row: 1 / 3;
  35     margin-right: 15px;
  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     grid-row: 1;
  55     grid-column: 3;
  56     color: pvar(--greyForegroundColor);
  57     font-size: 16px;
  58     display: flex;
  59     align-items: center;
  60     margin-left: 15px;
  61   }
  62
  63   .actor-counters > *:not(:last-child)::after {
  64     content: '•';
  65     margin: 0 10px;
  66     color: pvar(--mainColor);
  67   }
  68
  69   .description-html {
  70     @include fade-text(30px, pvar(--channelBackgroundColor));
  71
  72     grid-column: 2 / 4;
  73     grid-row: 2;
  74
  75     max-height: 80px;
  76     font-size: 16px;
  77   }
  78 }
  79
  80 my-subscribe-button {
  81   grid-row: 1;
  82   grid-column: 2;
  83 }
  84
  85 .videos {
  86   display: flex;
  87   grid-column: 1 / 3;
  88   grid-row: 2;
  89   margin-top: 30px;
  90
  91   position: relative;
  92   overflow: hidden;
  93
  94   my-video-miniature {
  95     margin-right: 15px;
  96     min-width: $video-thumbnail-medium-width;
  97     max-width: $video-thumbnail-medium-width;
  98   }
  99
 100   .no-results {
 101     height: auto;
 102   }
 103 }
 104
 105 .miniature-show-channel {
 106   height: 100%;
 107   position: absolute;
 108   right: 0;
 109   background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px);
 110   padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px;
 111   z-index: z(miniature) + 1;
 112
 113   a {
 114     color: pvar(--mainColor);
 115     font-size: 16px;
 116     font-weight: $font-semibold;
 117   }
 118 }
 119
 120 .button-show-channel {
 121   display: none;
 122 }
 123
 124 @media screen and (max-width: $mobile-view) {
 125   .channel {
 126     padding: 15px;
 127   }
 128
 129   .channel-avatar-row {
 130     grid-template-columns: auto auto auto 1fr;
 131
 132     .avatar-link {
 133       grid-row: 1 / 4;
 134     }
 135
 136     h2 {
 137       font-size: 16px;
 138     }
 139
 140     .actor-counters {
 141       margin: 0;
 142       font-size: 13px;
 143       grid-row: 2;
 144       grid-column: 2 / 4;
 145     }
 146
 147     .description-html {
 148       grid-row: 3;
 149       font-size: 14px;
 150     }
 151   }
 152
 153   .show-channel a {
 154     @include peertube-button-link;
 155     @include orange-button-inverted;
 156   }
 157
 158   .videos {
 159     display: none;
 160   }
 161
 162   my-subscribe-button,
 163   .button-show-channel {
 164     grid-column: 1 / 4;
 165     grid-row: 3;
 166     margin-top: 15px;
 167   }
 168
 169   my-subscribe-button {
 170     justify-self: start;
 171   }
 172
 173   .button-show-channel {
 174     display: block;
 175     justify-self: end;
 176   }
 177 }