client/src/app/+accounts/accounts.component.scss

   1 // Bootstrap grid utilities require functions, variables and mixins
   2 @import 'node_modules/bootstrap/scss/functions';
   3 @import 'node_modules/bootstrap/scss/variables';
   4 @import 'node_modules/bootstrap/scss/mixins';
   5 @import 'node_modules/bootstrap/scss/grid';
   6
   7 @import '_variables';
   8 @import '_mixins';
   9
  10 .sub-menu {
  11   @include sub-menu-with-actor;
  12
  13   .actor {
  14     width: 100%;
  15   }
  16 }
  17
  18 .right-buttons {
  19   display: flex;
  20   height: max-content;
  21   margin-left: auto;
  22   margin-top: 10px;
  23
  24   @include media-breakpoint-down(lg) {
  25     flex-flow: column-reverse;
  26
  27     a {
  28       margin-top: 0.25rem;
  29       margin-right: 0 !important;
  30     }
  31   }
  32
  33   a {
  34     @include peertube-button-outline;
  35   }
  36
  37   my-subscribe-button {
  38     min-height: 30px;
  39   }
  40 }
  41
  42 my-user-moderation-dropdown,
  43 .badge {
  44   margin-left: 10px;
  45
  46   position: relative;
  47   top: 3px;
  48 }
  49
  50 .badge {
  51   font-size: 13px;
  52 }
  53
  54 .copy-button {
  55   border: none;
  56   padding: 5px;
  57   margin-top: -2px;
  58 }
  59
  60 @media screen and (max-width: $mobile-view) {
  61   .sub-menu {
  62     .actor {
  63       flex-direction: column;
  64       align-items: center;
  65
  66       img,
  67       .actor-info .actor-names .actor-display-name {
  68         margin-right: 0;
  69       }
  70
  71       .actor-info  {
  72         .actor-names {
  73           flex-direction: column;
  74           align-items: center;
  75         }
  76
  77         my-user-moderation-dropdown {
  78           margin-left: 0;
  79         }
  80
  81         .actor-followers {
  82           text-align: center;
  83         }
  84       }
  85     }
  86   }
  87 }