client/src/app/shared/shared-main/account/actor-avatar-info.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .actor {
   5   display: flex;
   6
   7   img {
   8     @include avatar(100px);
   9
  10     margin-right: 15px;
  11   }
  12
  13   .actor-img-edit-container {
  14     position: relative;
  15     width: 0;
  16
  17     .actor-img-edit-button {
  18       @include peertube-button-file(21px);
  19       @include button-with-icon(19px);
  20
  21       margin-top: 10px;
  22       margin-bottom: 5px;
  23       border-radius: 50%;
  24       top: 55px;
  25       right: 45px;
  26       cursor: pointer;
  27
  28       input {
  29         width: 30px;
  30         height: 30px;
  31       }
  32
  33       my-global-icon {
  34         right: 7px;
  35       }
  36     }
  37   }
  38
  39   .actor-info {
  40     justify-content: center;
  41     display: inline-flex;
  42     flex-direction: column;
  43
  44     .actor-info-names {
  45       display: flex;
  46       align-items: center;
  47
  48       .actor-info-display-name {
  49         font-size: 20px;
  50         font-weight: $font-bold;
  51
  52         @media screen and (max-width: $small-view) {
  53           font-size: 16px;
  54         }
  55       }
  56
  57       .actor-info-username {
  58         margin-left: 7px;
  59         position: relative;
  60         top: 2px;
  61         font-size: 14px;
  62         color: $grey-actor-name;
  63       }
  64     }
  65
  66     .actor-info-followers {
  67       font-size: 15px;
  68       padding-bottom: .5rem;
  69     }
  70   }
  71 }