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

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