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