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