client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss

   1 @use '_variables';
   2 @use '_mixins';
   3
   4 form {
   5   margin: 20px 20px 0 0;
   6
   7   .form-group:first-child {
   8     // Keep place to display error message without modifying the height
   9     min-height: 125px;
  10   }
  11 }
  12
  13 textarea {
  14   @include peertube-textarea(100%, 70px);
  15
  16   margin-top: 20px;
  17 }
  18
  19 .messages {
  20   display: flex;
  21   flex-direction: column;
  22   overflow-y: scroll;
  23   max-height: 50vh;
  24 }
  25
  26 .no-messages {
  27   display: flex;
  28   font-size: 15px;
  29   justify-content: center;
  30 }
  31
  32 .message-block {
  33   margin: 0 5px 10px 0;
  34   max-width: 60%;
  35
  36   .author {
  37     color: var(--greyForegroundColor);
  38     font-size: 14px;
  39     padding: 0 0 3px 10px;
  40   }
  41
  42   .bubble {
  43     border-radius: 10px;
  44     padding: 5px 10px;
  45     color: var(--mainForegroundColor);
  46     background-color: var(--greyBackgroundColor);
  47
  48     .content {
  49       font-size: 15px;
  50     }
  51
  52     .date {
  53       font-size: 13px;
  54       color: var(--greyForegroundColor);
  55     }
  56   }
  57
  58   &.by-me {
  59
  60     .bubble {
  61       color: var(--mainBackgroundColor);
  62       background-color: var(--mainColorLighter);
  63
  64       .date {
  65         color: var(--mainBackgroundColor);
  66       }
  67     }
  68   }
  69
  70   &.by-moderator {
  71     align-self: flex-end;
  72   }
  73 }