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

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 .root-comment {
   5   font-size: 15px;
   6   display: flex;
   7
   8   .left {
   9     @include margin-right(10px);
  10
  11     display: flex;
  12     flex-direction: column;
  13     align-items: center;
  14
  15     .vertical-border {
  16       width: 2px;
  17       height: 100%;
  18       background-color: rgba(0, 0, 0, 0.05);
  19       margin: 10px calc(1rem + 1px);
  20     }
  21   }
  22
  23   .right {
  24     width: 100%;
  25   }
  26 }
  27
  28 my-actor-avatar {
  29   @include actor-avatar-size(36px);
  30 }
  31
  32 .comment {
  33   flex-grow: 1;
  34   // Fix word-wrap with flex
  35   min-width: 1px;
  36 }
  37
  38 .highlighted-comment {
  39   display: inline-block;
  40   background-color: #F5F5F5;
  41   color: #3d3d3d;
  42   padding: 0 5px;
  43   font-size: 13px;
  44   margin-bottom: 5px;
  45   font-weight: $font-semibold;
  46   border-radius: 3px;
  47 }
  48
  49 .comment-account-date {
  50   display: flex;
  51   margin-bottom: 4px;
  52 }
  53
  54 .video-author {
  55   @include padding-right(6px);
  56   @include padding-left(6px);
  57
  58   height: 20px;
  59   background-color: #888888;
  60   border-radius: 12px;
  61   margin-bottom: 2px;
  62   max-width: 100%;
  63   box-sizing: border-box;
  64   flex-direction: row;
  65   align-items: center;
  66   display: inline-flex;
  67   color: #fff !important;
  68 }
  69
  70 .comment-account {
  71   word-break: break-all;
  72   font-weight: 600;
  73   font-size: 90%;
  74
  75   a {
  76     @include disable-default-a-behaviour;
  77
  78     color: pvar(--mainForegroundColor);
  79
  80     &:hover {
  81       text-decoration: underline;
  82     }
  83   }
  84
  85   .comment-account-fid {
  86     opacity: .6;
  87   }
  88 }
  89
  90 .comment-date {
  91   @include margin-left(5px);
  92
  93   font-size: 90%;
  94   color: pvar(--greyForegroundColor);
  95   text-decoration: none;
  96
  97   &:hover {
  98     text-decoration: underline;
  99   }
 100 }
 101
 102 .comment-html {
 103   @include peertube-word-wrap;
 104
 105   // Mentions
 106   ::ng-deep a {
 107
 108     &:not(.linkified-url) {
 109       @include disable-default-a-behaviour;
 110
 111       color: pvar(--mainForegroundColor);
 112
 113       font-weight: $font-semibold;
 114     }
 115
 116   }
 117
 118   // Paragraphs
 119   ::ng-deep p {
 120     margin-bottom: .3rem;
 121   }
 122
 123   &.comment-html-deleted {
 124     color: pvar(--greyForegroundColor);
 125     margin-bottom: 1rem;
 126   }
 127 }
 128
 129 .comment-actions {
 130   margin-bottom: 10px;
 131   display: flex;
 132
 133   ::ng-deep .dropdown-toggle,
 134   .comment-action-reply {
 135     @include margin-right(10px);
 136
 137     color: pvar(--greyForegroundColor);
 138     cursor: pointer;
 139
 140     &:hover,
 141     &:active,
 142     &:focus,
 143     &:focus-visible {
 144       color: pvar(--mainForegroundColor);
 145     }
 146   }
 147
 148   ::ng-deep .action-button {
 149     background-color: transparent;
 150     padding: 0;
 151     font-weight: unset;
 152   }
 153 }
 154
 155 my-video-comment-add {
 156   ::ng-deep form {
 157     margin-top: 1rem;
 158     margin-bottom: 0;
 159   }
 160 }
 161
 162 .is-child {
 163   // Reduce avatars size for replies
 164   my-actor-avatar {
 165     @include actor-avatar-size(25px);
 166   }
 167
 168   .left {
 169     @include margin-right(6px);
 170   }
 171 }
 172
 173 @media screen and (max-width: 1200px) {
 174   .children {
 175     @include margin-left(-10px);
 176   }
 177 }
 178
 179 @media screen and (max-width: 600px) {
 180   .children {
 181     @include margin-left(-20px);
 182
 183     .left {
 184       align-items: flex-start;
 185
 186       .vertical-border {
 187         @include margin-left(2px);
 188       }
 189     }
 190   }
 191
 192   .comment-account-date {
 193     flex-direction: column;
 194
 195     .comment-date {
 196       @include margin-left(0);
 197     }
 198   }
 199 }