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

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 $markdown-icon-height: 18px;
   5 $markdown-icon-width: 30px;
   6 $peertube-textarea-height: 60px;
   7
   8 form {
   9   margin-bottom: 30px;
  10 }
  11
  12 .avatar-and-textarea {
  13   display: flex;
  14   margin-bottom: 10px;
  15
  16   my-actor-avatar {
  17     @include margin-right(10px);
  18   }
  19
  20   .textarea-wrapper {
  21     flex-grow: 1;
  22     position: relative;
  23   }
  24
  25   textarea {
  26     @include peertube-textarea(100%, $peertube-textarea-height);
  27     @include button-focus(pvar(--mainColorLightest));
  28     @include padding-right($markdown-icon-width + 15px !important);
  29
  30     min-height: calc(#{$peertube-textarea-height} - 15px * 2);
  31
  32     @media screen and (max-width: 600px) {
  33       @include padding-right($markdown-icon-width + 19px !important);
  34     }
  35
  36     &:focus::placeholder {
  37       opacity: 0;
  38     }
  39   }
  40 }
  41
  42 .markdown-guide {
  43   position: absolute;
  44   top: 5px;
  45   right: 9px;
  46
  47   // inset-inline is not well supported by web browsers
  48   &.is-rtl {
  49     right: unset;
  50     left: 9px;
  51   }
  52
  53   ::ng-deep .help-tooltip-button {
  54     my-global-icon {
  55       height: $markdown-icon-height;
  56       width: $markdown-icon-width;
  57
  58       svg {
  59         color: #C6C6C6;
  60         fill: #C6C6C6;
  61         border-radius: 3px;
  62       }
  63     }
  64
  65     &:focus,
  66     &:active,
  67     &:hover {
  68       my-global-icon svg {
  69         background-color: #C6C6C6;
  70         color: pvar(--mainBackgroundColor);
  71         fill: pvar(--mainBackgroundColor);
  72       }
  73     }
  74   }
  75 }
  76
  77 .comment-buttons {
  78   display: flex;
  79   justify-content: flex-end;
  80 }
  81
  82 .emoji-flex {
  83   display: flex;
  84   flex-flow: row wrap;
  85   align-items: center;
  86
  87   .emoji-flex-item {
  88     text-align: left;
  89     margin: auto;
  90     min-width: 227px;
  91     flex: 1;
  92
  93     code {
  94       @include margin-left(5px);
  95
  96       display: inline-block;
  97       vertical-align: middle;
  98     }
  99   }
 100 }
 101
 102 @media screen and (max-width: 600px) {
 103   textarea,
 104   .comment-buttons button {
 105     font-size: 14px !important;
 106   }
 107
 108   textarea {
 109     padding: 5px !important;
 110   }
 111 }
 112
 113 .modal-body {
 114   > span {
 115     float: left;
 116     margin-bottom: 20px;
 117   }
 118 }