client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 form {
   5   margin-bottom: 30px;
   6 }
   7
   8 .avatar-and-textarea {
   9   display: flex;
  10   margin-bottom: 10px;
  11
  12   img {
  13     @include avatar(25px);
  14
  15     vertical-align: top;
  16     margin-right: 10px;
  17   }
  18
  19   .form-group {
  20     flex-grow: 1;
  21     margin: 0;
  22
  23     textarea {
  24       @include peertube-textarea(100%, 60px);
  25       @include button-focus(pvar(--mainColorLightest));
  26
  27       &:focus::placeholder {
  28         opacity: 0;
  29       }
  30     }
  31   }
  32 }
  33
  34 .comment-buttons {
  35   display: flex;
  36   justify-content: flex-end;
  37
  38   button {
  39     @include peertube-button;
  40     @include disable-outline;
  41     @include disable-default-a-behaviour;
  42
  43     &:not(:last-child) {
  44       margin-right: .5rem;
  45     }
  46
  47     &:last-child {
  48       @include orange-button;
  49     }
  50   }
  51
  52   .cancel-button {
  53     @include tertiary-button;
  54
  55     font-weight: $font-semibold;
  56     display: inline-block;
  57     padding: 0 10px 0 10px;
  58     white-space: nowrap;
  59     background: transparent;
  60   }
  61 }
  62
  63 @media screen and (max-width: 600px) {
  64   textarea, .comment-buttons button {
  65     font-size: 14px !important;
  66   }
  67
  68   textarea {
  69     padding: 5px !important;
  70   }
  71 }
  72
  73 .modal-body {
  74   .btn {
  75     @include peertube-button;
  76     @include orange-button;
  77   }
  78
  79   span {
  80     float: left;
  81     margin-bottom: 20px;
  82   }
  83 }