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     color: pvar(--mainForegroundColor);
  40     display: flex;
  41     align-items: center;
  42
  43     span:hover {
  44       opacity: 0.8;
  45     }
  46
  47     my-actor-avatar {
  48       @include margin-left(5px);
  49     }
  50   }
  51
  52   @media screen and (max-width: $small-view) {
  53     .actor-info {
  54       padding-bottom: 10px;
  55       text-align: center;
  56
  57       .actor-names {
  58         flex-direction: column;
  59         align-items: center !important;
  60         margin: auto;
  61       }
  62     }
  63   }
  64 }