client/src/sass/include/_account-channel-page.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 @mixin section-label-responsive {
   5   color: pvar(--mainColor);
   6   font-size: 12px;
   7   margin-bottom: 15px;
   8   font-weight: $font-bold;
   9   letter-spacing: 2.5px;
  10
  11   @media screen and (max-width: $mobile-view) {
  12     font-size: 10px;
  13     letter-spacing: 2.1px;
  14     margin-bottom: 5px;
  15   }
  16 }
  17
  18 @mixin show-more-description {
  19   @include margin(10px, auto, 45px);
  20
  21   color: pvar(--mainColor);
  22   cursor: pointer;
  23 }
  24
  25 @mixin avatar-row-responsive ($img-margin, $grey-font-size) {
  26   @include margin-bottom(2rem);
  27
  28   display: flex;
  29   grid-column: 1;
  30
  31   > div {
  32     @include margin-left($img-margin);
  33
  34     min-width: 1px;
  35   }
  36
  37   .actor-info {
  38     display: flex;
  39
  40     > div:first-child {
  41       flex-grow: 1;
  42       min-width: 1px;
  43     }
  44   }
  45
  46   .actor-display-name {
  47     @include peertube-word-wrap;
  48
  49     display: flex;
  50     flex-wrap: wrap;
  51   }
  52
  53   h1 {
  54     @include font-size(2rem);
  55
  56     font-weight: $font-bold;
  57     margin: 0;
  58   }
  59
  60   .actor-handle {
  61     @include ellipsis;
  62   }
  63
  64   .actor-handle,
  65   .actor-counters {
  66     @include font-size($grey-font-size);
  67
  68     color: pvar(--greyForegroundColor);
  69   }
  70
  71   .actor-counters > *:not(:last-child)::after {
  72     content: '•';
  73     margin: 0 10px;
  74     color: pvar(--mainColor);
  75   }
  76
  77   .main-avatar {
  78     @include actor-avatar-size(120px);
  79   }
  80
  81   @media screen and (max-width: $mobile-view) {
  82
  83     .main-avatar {
  84       @include actor-avatar-size(80px);
  85     }
  86   }
  87 }