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       @include orange-button;
  21
  22       margin-top: 10px;
  23       margin-bottom: 5px;
  24       border-radius: 50%;
  25       top: 55px;
  26       right: 45px;
  27       cursor: pointer;
  28
  29       input {
  30         width: 30px;
  31         height: 30px;
  32       }
  33
  34       my-global-icon {
  35         right: 7px;
  36       }
  37     }
  38   }
  39
  40   .actor-info {
  41     justify-content: center;
  42     display: inline-flex;
  43     flex-direction: column;
  44
  45     .actor-info-names {
  46       display: flex;
  47       align-items: center;
  48
  49       .actor-info-display-name {
  50         font-size: 20px;
  51         font-weight: $font-bold;
  52
  53         @media screen and (max-width: $small-view) {
  54           font-size: 16px;
  55         }
  56       }
  57
  58       .actor-info-username {
  59         margin-left: 7px;
  60         position: relative;
  61         top: 2px;
  62         font-size: 14px;
  63         color: $grey-actor-name;
  64       }
  65     }
  66
  67     .actor-info-followers {
  68       font-size: 15px;
  69       padding-bottom: .5rem;
  70     }
  71   }
  72 }