client/src/app/shared/shared-actor-image/actor-avatar.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .avatar {
   5   --avatarSize: 100%;
   6   --initialFontSize: 22px;
   7
   8   width: var(--avatarSize);
   9   height: var(--avatarSize);
  10   min-width: var(--avatarSize);
  11   min-height: var(--avatarSize);
  12
  13   &.account {
  14     object-fit: cover;
  15     border-radius: 50%;
  16   }
  17
  18   &.channel {
  19     border-radius: 5px;
  20   }
  21 }
  22
  23 .avatar-18 {
  24   --avatarSize: 18px;
  25   --initialFontSize: 13px;
  26 }
  27
  28 .avatar-25 {
  29   --avatarSize: 25px;
  30 }
  31
  32 .avatar-32 {
  33  --avatarSize: 32px;
  34 }
  35
  36 .avatar-34 {
  37  --avatarSize: 34px;
  38 }
  39
  40 .avatar-36 {
  41  --avatarSize: 36px;
  42 }
  43
  44 .avatar-40 {
  45  --avatarSize: 40px;
  46 }
  47
  48 .avatar-100 {
  49   --avatarSize: 100px;
  50   --initialFontSize: 40px;
  51  }
  52
  53 .avatar-120 {
  54  --avatarSize: 120px;
  55  --initialFontSize: 46px;
  56 }
  57
  58 a:hover {
  59   text-decoration: none;
  60 }
  61
  62 .initial {
  63   background-color: #3C2109;
  64   color: #fff;
  65   display: flex;
  66   align-items: center;
  67   justify-content: center;
  68   font-size: var(--initialFontSize);
  69
  70   &.blue {
  71     background-color: #009FD4;
  72   }
  73
  74   &.green {
  75     background-color: #00AA55;
  76   }
  77
  78   &.purple {
  79     background-color: #B381B3;
  80   }
  81
  82   &.gray {
  83     background-color: #939393;
  84   }
  85
  86   &.yellow {
  87     background-color: #AA8F00;
  88   }
  89
  90   &.orange {
  91     background-color: #D47500;
  92   }
  93
  94   &.red {
  95     background-color: #E76E3C;
  96   }
  97
  98   &.dark-blue {
  99     background-color: #0A3055;
 100   }
 101 }