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