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

   1 @use '_variables';
   2 @use '_mixins';
   3 @use '_actor';
   4 @use '_miniature';
   5
   6 .root {
   7   --myGlobalTopPadding: 60px;
   8   --myImgMargin: 30px;
   9   --myFontSize: 16px;
  10   --myGreyFontSize: 16px;
  11 }
  12
  13 .section-label {
  14   @include section-label-responsive;
  15 }
  16
  17 .links {
  18   @include grid-videos-miniature-margins;
  19
  20   display: flex;
  21   justify-content: space-between;
  22   align-items: center;
  23   max-width: $max-channels-width;
  24
  25   simple-search-input {
  26     @include margin-left(auto);
  27   }
  28 }
  29
  30 my-user-moderation-dropdown,
  31 .badge {
  32   @include margin-left(10px);
  33
  34   position: relative;
  35   top: 3px;
  36 }
  37
  38 .badge {
  39   font-size: 13px;
  40 }
  41
  42 .copy-button {
  43   border: 0;
  44 }
  45
  46 .account-info {
  47   @include grid-videos-miniature-margins(false, 15px);
  48
  49   display: grid;
  50   grid-template-columns: 1fr min-content;
  51   grid-template-rows: auto auto;
  52
  53   background-color: pvar(--submenuBackgroundColor);
  54   margin-bottom: 45px;
  55   padding-top: var(--myGlobalTopPadding);
  56   padding-bottom: var(--myGlobalTopPadding);
  57   font-size: var(--myFontSize);
  58 }
  59
  60 .account-avatar-row {
  61   @include avatar-row-responsive(var(--myImgMargin), var(--myGreyFontSize));
  62 }
  63
  64 .description {
  65   grid-column: 1 / 3;
  66   max-width: 1000px;
  67   word-break: break-word;
  68 }
  69
  70 .show-more {
  71   @include show-more-description;
  72
  73   display: none;
  74   text-align: center;
  75 }
  76
  77 .buttons {
  78   grid-column: 2;
  79   grid-row: 1;
  80
  81   display: flex;
  82   flex-wrap: wrap;
  83   justify-content: flex-end;
  84   align-content: flex-start;
  85
  86   > *:not(:last-child) {
  87     margin-bottom: 15px;
  88   }
  89
  90   > a {
  91     white-space: nowrap;
  92   }
  93 }
  94
  95 @media screen and (max-width: $small-view) {
  96   .root {
  97     --myGlobalTopPadding: 45px;
  98     --myChannelImgMargin: 15px;
  99   }
 100
 101   .account-info {
 102     display: block;
 103     padding-bottom: 60px;
 104   }
 105
 106   .description:not(.expanded) {
 107     @include fade-text(30px, pvar(--submenuBackgroundColor));
 108
 109     max-height: 70px;
 110   }
 111
 112   .show-more {
 113     display: block;
 114   }
 115
 116   .buttons {
 117     justify-content: center;
 118   }
 119 }
 120
 121 @media screen and (max-width: $mobile-view) {
 122   .root {
 123     --myGlobalTopPadding: 15px;
 124     --myFontSize: 14px;
 125     --myGreyFontSize: 13px;
 126   }
 127
 128   .account-info {
 129     display: block;
 130     padding-bottom: 30px;
 131   }
 132
 133   .links {
 134     margin: auto !important;
 135     width: min-content;
 136   }
 137
 138   .show-more {
 139     margin-bottom: 30px;
 140   }
 141 }