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

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3 @use '_account-channel-page' as *;
   4 @use '_miniature' as *;
   5
   6 .root {
   7   --myGlobalTopPadding: 60px;
   8   --myChannelImgMargin: 30px;
   9   --myFontSize: 16px;
  10   --myGreyChannelFontSize: 16px;
  11   --myGreyOwnerFontSize: 14px;
  12 }
  13
  14 .banner {
  15   @include block-ratio('img', $banner-inverted-ratio);
  16 }
  17
  18 .section-label {
  19   @include section-label-responsive;
  20 }
  21
  22 .links {
  23   @include grid-videos-miniature-margins;
  24 }
  25
  26 .actor-info {
  27   min-width: 1px;
  28   width: 100%;
  29
  30   > h4,
  31   > .actor-handle {
  32     @include ellipsis;
  33   }
  34 }
  35
  36 .channel-info {
  37   @include grid-videos-miniature-margins(false, 15px);
  38
  39   display: grid;
  40   grid-template-columns: 1fr auto;
  41   grid-template-rows: auto auto;
  42
  43   background-color: pvar(--channelBackgroundColor);
  44   margin-bottom: 45px;
  45   padding-top: var(--myGlobalTopPadding);
  46   font-size: var(--myFontSize);
  47 }
  48
  49 .channel-avatar-row {
  50   @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize));
  51 }
  52
  53 .support-button {
  54   @include button-with-icon(21px, 0, -1px);
  55 }
  56
  57 .channel-description {
  58   grid-column: 1;
  59   word-break: break-word;
  60   padding-bottom: var(--myGlobalTopPadding);
  61 }
  62
  63 .show-more {
  64   @include show-more-description;
  65
  66   display: none;
  67 }
  68
  69 .channel-buttons {
  70   display: flex;
  71   flex-wrap: wrap;
  72
  73   > *:not(:last-child) {
  74     @include margin-right(15px);
  75   }
  76 }
  77
  78 .channel-buttons.right {
  79   @include margin-left(45px);
  80 }
  81
  82 // Only used by mobile
  83 .channel-buttons.bottom {
  84   display: none;
  85 }
  86
  87 .owner-card {
  88   @include margin-left(105px);
  89   grid-column: 2;
  90   // Takes all the column
  91   grid-row: 1 / 3;
  92   place-self: end;
  93 }
  94
  95 // Only used on mobile
  96 .bottom-owner {
  97   display: none;
  98 }
  99
 100 .owner-block {
 101   background-color: pvar(--mainBackgroundColor);
 102   padding: 30px;
 103   width: 300px;
 104   font-size: var(--myFontSize);
 105
 106   .avatar-row {
 107     display: flex;
 108     margin-bottom: 15px;
 109
 110     .actor-info {
 111       @include margin-left(15px);
 112     }
 113
 114     h4 {
 115       font-size: 18px;
 116       margin: 0;
 117
 118       a {
 119         color: pvar(--mainForegroundColor);
 120       }
 121     }
 122
 123     .actor-handle {
 124       font-size: var(--myGreyOwnerFontSize);
 125       color: pvar(--greyForegroundColor);
 126     }
 127
 128     .account-avatar {
 129       @include actor-avatar-size(48px);
 130     }
 131   }
 132
 133   .owner-description {
 134     @include fade-text(120px, pvar(--mainBackgroundColor));
 135
 136     max-height: 140px;
 137     word-break: break-word;
 138   }
 139 }
 140
 141 .view-account.short {
 142   @include peertube-button-link;
 143   @include orange-button-inverted;
 144
 145   margin-top: 30px;
 146 }
 147
 148 .view-account.complete {
 149   display: none;
 150 }
 151
 152 .copy-button {
 153   @include margin-left(3px);
 154
 155   border: 0;
 156
 157   my-global-icon {
 158     width: 15px;
 159   }
 160 }
 161
 162 @media screen and (max-width: 1400px) {
 163   // Takes all the row width
 164   .channel-avatar-row {
 165     grid-column: 1 / 3;
 166   }
 167
 168   .owner-card {
 169     @include margin-left(60px);
 170
 171     grid-row: 2;
 172   }
 173 }
 174
 175 @media screen and (max-width: 1100px) {
 176   .root {
 177     --myGlobalTopPadding: 45px;
 178     --myChannelImgMargin: 15px;
 179   }
 180
 181   .channel-info {
 182     display: flex;
 183     flex-direction: column;
 184     margin-bottom: 0;
 185   }
 186
 187   .channel-description:not(.expanded) {
 188     @include fade-text(30px, pvar(--channelBackgroundColor));
 189
 190     max-height: 70px;
 191   }
 192
 193   .show-more {
 194     display: inline-block;
 195   }
 196
 197   .channel-buttons.bottom {
 198     display: flex;
 199     justify-content: center;
 200     margin-bottom: 30px;
 201   }
 202
 203   .channel-buttons.right {
 204     display: none;
 205   }
 206
 207   .owner-card {
 208     display: none;
 209   }
 210
 211   .bottom-owner {
 212     display: block;
 213     width: 100%;
 214     border-bottom: 2px solid $separator-border-color;
 215     padding: var(--myGlobalTopPadding) 45px;
 216     margin-bottom: 60px;
 217   }
 218
 219   .owner-block {
 220     display: grid;
 221     width: 100%;
 222     padding: 0;
 223
 224     .avatar-row {
 225       @include margin-right(30px);
 226
 227       grid-column: 1;
 228     }
 229
 230     .owner-description {
 231       @include fade-text(30px, pvar(--mainBackgroundColor));
 232
 233       grid-column: 2;
 234       max-height: 70px;
 235     }
 236
 237     .view-account {
 238       grid-column: 2;
 239     }
 240   }
 241
 242   .view-account.complete {
 243     display: block;
 244     text-align: end;
 245     margin-top: 10px;
 246     color: pvar(--mainColor);
 247   }
 248
 249   .view-account.short {
 250     display: none;
 251   }
 252 }
 253
 254 @media screen and (max-width: $mobile-view) {
 255   .root {
 256     --myGlobalTopPadding: 15px;
 257     --myFontSize: 14px;
 258     --myGreyChannelFontSize: 13px;
 259     --myGreyOwnerFontSize: 13px;
 260   }
 261
 262   .links {
 263     margin: auto !important;
 264     width: min-content;
 265   }
 266
 267   .show-more {
 268     margin-bottom: 30px;
 269   }
 270
 271   .bottom-owner {
 272     padding: 15px;
 273     margin-bottom: 30px;
 274
 275     .section-label {
 276       display: none;
 277     }
 278   }
 279
 280   .owner-block {
 281     display: block;
 282
 283     .avatar-row {
 284       display: flex;
 285       flex-direction: row-reverse;
 286       margin: 0;
 287
 288       h4 {
 289         font-size: 16px;
 290       }
 291
 292       .actor-info {
 293         display: flex;
 294         flex-direction: column;
 295         align-items: flex-end;
 296         justify-content: flex-end;
 297         margin-top: -5px;
 298       }
 299
 300       .account-avatar {
 301         @include actor-avatar-size(64px);
 302
 303         margin: -30px 0 0 15px;
 304       }
 305     }
 306
 307     .owner-description {
 308       display: none;
 309     }
 310   }
 311 }