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 .margin-content {
  19   // margin-content is required, but child views have their own margins
  20   // that match views outside the scope of accounts, so we only align
  21   // them with the margins of .sub-menu when required.
  22   margin: 0;
  23 }
  24
  25 .right-buttons {
  26   display: flex;
  27   height: max-content;
  28   margin-left: auto;
  29   margin-top: 10px;
  30
  31   @include media-breakpoint-down(lg) {
  32     flex-flow: column-reverse;
  33
  34     a {
  35       margin-top: 0.25rem;
  36       margin-right: 0 !important;
  37     }
  38   }
  39
  40   a {
  41     @include peertube-button-outline;
  42   }
  43
  44   my-subscribe-button {
  45     min-height: 30px;
  46   }
  47 }
  48
  49 my-user-moderation-dropdown,
  50 .badge {
  51   margin-left: 10px;
  52
  53   position: relative;
  54   top: 3px;
  55 }
  56
  57 .badge {
  58   font-size: 13px;
  59 }
  60
  61 .copy-button {
  62   border: none;
  63   padding: 5px;
  64   margin-top: -2px;
  65 }
  66
  67 @media screen and (max-width: $mobile-view) {
  68   .sub-menu {
  69     .actor {
  70       flex-direction: column;
  71       align-items: center;
  72
  73       img,
  74       .actor-info .actor-names .actor-display-name {
  75         margin-right: 0;
  76       }
  77
  78       .actor-info  {
  79         .actor-names {
  80           flex-direction: column;
  81           align-items: center;
  82         }
  83
  84         my-user-moderation-dropdown {
  85           margin-left: 0;
  86         }
  87
  88         .actor-followers {
  89           text-align: center;
  90         }
  91       }
  92
  93       .right-buttons {
  94         margin-left: 0;
  95       }
  96     }
  97   }
  98 }