client/src/sass/include/_actor.scss

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