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 .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   padding-bottom: 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 }
  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     margin-right: 15px;
  75   }
  76 }
  77
  78 .channel-buttons.right {
  79   margin-left: 45px;
  80 }
  81
  82 // Only used by mobile
  83 .channel-buttons.bottom {
  84   display: none;
  85 }
  86
  87 .owner-card {
  88   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     img {
 111       @include avatar(48px);
 112     }
 113
 114     .actor-info {
 115       margin-left: 15px;
 116     }
 117
 118     h4 {
 119       font-size: 18px;
 120       margin: 0;
 121
 122       a {
 123         color: pvar(--mainForegroundColor);
 124       }
 125     }
 126
 127     .actor-handle {
 128       font-size: var(--myGreyOwnerFontSize);
 129       color: pvar(--greyForegroundColor);
 130     }
 131   }
 132
 133   .owner-description {
 134     max-height: 140px;
 135     word-break: break-word;
 136
 137     @include fade-text(120px, pvar(--mainBackgroundColor));
 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   border: none;
 154 }
 155
 156 @media screen and (max-width: 1400px) {
 157   // Takes all the row width
 158   .channel-avatar-row {
 159     grid-column: 1 / 3;
 160   }
 161
 162   .owner-card {
 163     grid-row: 2;
 164     margin-left: 60px;
 165   }
 166 }
 167
 168 @media screen and (max-width: 1100px) {
 169   .root {
 170     --myGlobalTopPadding: 45px;
 171     --myChannelImgMargin: 15px;
 172   }
 173
 174   .channel-info {
 175     display: flex;
 176     flex-direction: column;
 177     margin-bottom: 0;
 178   }
 179
 180   .channel-description:not(.expanded) {
 181     max-height: 70px;
 182
 183     @include fade-text(30px, pvar(--channelBackgroundColor));
 184   }
 185
 186   .show-more {
 187     display: inline-block;
 188   }
 189
 190   .channel-buttons.bottom {
 191     display: flex;
 192     justify-content: center;
 193     margin-bottom: 30px;
 194   }
 195
 196   .channel-buttons.right {
 197     display: none;
 198   }
 199
 200   .owner-card {
 201     display: none;
 202   }
 203
 204   .bottom-owner {
 205     display: block;
 206     width: 100%;
 207     border-bottom: 2px solid $separator-border-color;
 208     padding: var(--myGlobalTopPadding) 45px;
 209     margin-bottom: 60px;
 210   }
 211
 212   .owner-block {
 213     display: grid;
 214     width: 100%;
 215     padding: 0;
 216
 217     .avatar-row {
 218       grid-column: 1;
 219       margin-right: 30px;
 220     }
 221
 222     .owner-description {
 223       grid-column: 2;
 224       max-height: 70px;
 225
 226       @include fade-text(30px, pvar(--mainBackgroundColor));
 227     }
 228
 229     .view-account {
 230       grid-column: 2;
 231     }
 232   }
 233
 234   .view-account.complete {
 235     display: block;
 236     text-align: right;
 237     margin-top: 10px;
 238     color: pvar(--mainColor);
 239   }
 240
 241   .view-account.short {
 242     display: none;
 243   }
 244 }
 245
 246 @media screen and (max-width: $mobile-view) {
 247   .root {
 248     --myGlobalTopPadding: 15px;
 249     --myFontSize: 14px;
 250     --myGreyChannelFontSize: 13px;
 251     --myGreyOwnerFontSize: 13px;
 252   }
 253
 254   .links {
 255     margin: auto !important;
 256     width: min-content;
 257   }
 258
 259   .show-more {
 260     margin-bottom: 30px;
 261   }
 262
 263   .bottom-owner {
 264     padding: 15px;
 265     margin-bottom: 30px;
 266
 267     .section-label {
 268       display: none;
 269     }
 270   }
 271
 272   .owner-block {
 273     display: block;
 274
 275     .avatar-row {
 276       display: flex;
 277       flex-direction: row-reverse;
 278       margin: 0;
 279
 280       h4 {
 281         font-size: 16px;
 282       }
 283
 284       .actor-info {
 285         display: flex;
 286         flex-direction: column;
 287         align-items: flex-end;
 288         justify-content: flex-end;
 289         margin-top: -5px;
 290       }
 291
 292       img {
 293         @include channel-avatar(64px);
 294
 295         margin: -30px 0 0 15px;
 296       }
 297     }
 298
 299     .owner-description {
 300       display: none;
 301     }
 302   }
 303 }