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