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

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