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