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