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

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