client/src/sass/include/_actor.scss

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