client/src/sass/include/_actor.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 @mixin actor-row ($avatar-margin-right: 10px, $min-height: 130px, $separator: true) {
   5   @include row-blocks($min-height: $min-height, $separator: $separator);
   6
   7   > my-actor-avatar {
   8     @include margin-right($avatar-margin-right);
   9   }
  10
  11   .actor-info {
  12     flex-grow: 1;
  13   }
  14
  15   .actor-names {
  16     @include disable-default-a-behaviour;
  17
  18     width: fit-content;
  19     display: flex;
  20     align-items: baseline;
  21     color: pvar(--mainForegroundColor);
  22   }
  23
  24   .actor-display-name {
  25     font-weight: $font-semibold;
  26     font-size: 18px;
  27   }
  28
  29   .actor-name {
  30     @include margin-left(5px);
  31
  32     font-size: 14px;
  33     color: $grey-actor-name;
  34   }
  35
  36   .actor-owner {
  37     @include disable-default-a-behaviour;
  38
  39     font-size: 13px;
  40     color: pvar(--mainForegroundColor);
  41
  42     span:hover {
  43       opacity: 0.8;
  44     }
  45
  46     my-actor-avatar {
  47       @include margin-left(7px);
  48
  49       display: inline-block;
  50       vertical-align: top;
  51     }
  52   }
  53
  54   @media screen and (max-width: $small-view) {
  55     .actor-info {
  56       padding-bottom: 10px;
  57       text-align: center;
  58
  59       .actor-names {
  60         flex-direction: column;
  61         align-items: center !important;
  62         margin: auto;
  63       }
  64     }
  65   }
  66 }