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