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

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   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 $sizes: '18', '25', '28', '32', '34', '35', '36', '40', '48', '75', '80', '100', '120';
  24
  25 @each $size in $sizes {
  26   .avatar-#{$size} {
  27     --avatarSize: #{$size}px;
  28   }
  29 }
  30
  31 .avatar-18 {
  32   --initialFontSize: 13px;
  33 }
  34
  35 .avatar-100 {
  36   --initialFontSize: 40px;
  37 }
  38
  39 .avatar-120 {
  40   --initialFontSize: 46px;
  41 }
  42
  43 a:hover {
  44   text-decoration: none;
  45 }
  46
  47 .initial {
  48   background-color: #3C2109;
  49   color: #fff;
  50   display: flex;
  51   align-items: center;
  52   justify-content: center;
  53   font-size: var(--initialFontSize);
  54
  55   &.blue {
  56     background-color: #009FD4;
  57   }
  58
  59   &.green {
  60     background-color: #00AA55;
  61   }
  62
  63   &.purple {
  64     background-color: #B381B3;
  65   }
  66
  67   &.gray {
  68     background-color: #939393;
  69   }
  70
  71   &.yellow {
  72     background-color: #AA8F00;
  73   }
  74
  75   &.orange {
  76     background-color: #D47500;
  77   }
  78
  79   &.red {
  80     background-color: #E76E3C;
  81   }
  82
  83   &.dark-blue {
  84     background-color: #0A3055;
  85   }
  86 }