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

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