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