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

   1 @import 'variables';
   2 @import '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 }
  24
  25 .no-messages {
  26   display: flex;
  27   font-size: 15px;
  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     .content {
  48       font-size: 15px;
  49     }
  50
  51     .date {
  52       font-size: 13px;
  53       color: var(--greyForegroundColor);
  54     }
  55   }
  56
  57   &.by-me {
  58
  59     .bubble {
  60       color: var(--mainBackgroundColor);
  61       background-color: var(--mainColorLighter);
  62
  63       .date {
  64         color: var(--mainBackgroundColor);
  65       }
  66     }
  67   }
  68
  69   &.by-moderator {
  70     align-self: flex-end;
  71   }
  72 }