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