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

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   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   justify-content: center;
  29 }
  30
  31 .message-block {
  32   margin: 0 5px 10px 0;
  33   max-width: 60%;
  34
  35   .author {
  36     color: var(--greyForegroundColor);
  37     font-size: 14px;
  38     padding: 0 0 3px 10px;
  39   }
  40
  41   .bubble {
  42     border-radius: 10px;
  43     padding: 5px 10px;
  44     color: var(--mainForegroundColor);
  45     background-color: var(--greyBackgroundColor);
  46
  47     .date {
  48       font-size: 13px;
  49       color: var(--greyForegroundColor);
  50     }
  51   }
  52
  53   &.by-me {
  54
  55     .bubble {
  56       color: var(--mainBackgroundColor);
  57       background-color: var(--mainColorLighter);
  58
  59       .date {
  60         color: var(--mainBackgroundColor);
  61       }
  62     }
  63   }
  64
  65   &.by-moderator {
  66     align-self: flex-end;
  67   }
  68 }