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