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

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