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   .comment-avatar {
   9     @include avatar(36px);
  10
  11     margin-top: 5px;
  12     margin-right: 20px;
  13   }
  14
  15   .comment {
  16     flex-grow: 1;
  17     // Fix word-wrap with flex
  18     min-width: 1px;
  19
  20     .highlighted-comment {
  21       display: inline-block;
  22       background-color: #F5F5F5;
  23       color: #3d3d3d;
  24       padding: 0 5px;
  25       font-size: 13px;
  26       margin-bottom: 5px;
  27       font-weight: $font-semibold;
  28       border-radius: 3px;
  29     }
  30
  31     .comment-account-date {
  32       display: flex;
  33       margin-bottom: 4px;
  34
  35       .comment-account {
  36         @include disable-default-a-behaviour;
  37
  38         word-break: break-all;
  39         color: var(--mainForegroundColor);
  40         font-weight: $font-bold;
  41       }
  42
  43       .comment-date {
  44         color: $grey-foreground-color;
  45         margin-left: 10px;
  46       }
  47     }
  48
  49     .comment-html {
  50       @include peertube-word-wrap;
  51       margin-bottom: 10px;
  52
  53       // Mentions
  54       ::ng-deep a {
  55
  56         &:not(.linkified-url) {
  57           @include disable-default-a-behaviour;
  58
  59           color: var(--mainForegroundColor);
  60
  61           font-weight: $font-semibold;
  62         }
  63
  64       }
  65
  66       &.comment-html-deleted {
  67         color: $grey-foreground-color;
  68       }
  69     }
  70
  71     .comment-actions {
  72       margin-bottom: 10px;
  73       display: flex;
  74
  75       .comment-action-reply,
  76       .comment-action-delete {
  77         color: $grey-foreground-color;
  78         cursor: pointer;
  79         margin-right: 10px;
  80
  81         &:hover {
  82           color: var(--mainForegroundColor);
  83         }
  84       }
  85     }
  86   }
  87 }
  88
  89 // Decrease the space of child comments on small screens
  90 @media screen and (max-width: 1600px) {
  91   .children {
  92     margin-left: -20px;
  93   }
  94 }
  95
  96 @media screen and (max-width: 1200px) {
  97   .children {
  98     margin-left: -30px;
  99   }
 100 }
 101
 102 @media screen and (max-width: 600px) {
 103   .children {
 104     margin-left: -35px;
 105   }
 106
 107   .root-comment {
 108     .comment-avatar { margin-right: 10px; }
 109   }
 110 }
 111
 112 @media screen and (max-width: 450px) {
 113   .root-comment {
 114     font-size: 14px;
 115   }
 116 }