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   img {
   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         color: var(--mainForegroundColor);
  39         font-weight: $font-bold;
  40       }
  41
  42       .comment-date {
  43         color: #585858;
  44         margin-left: 10px;
  45       }
  46     }
  47
  48     .comment-html {
  49       @include peertube-word-wrap;
  50
  51       // Mentions
  52       /deep/ a {
  53
  54         &:not(.linkified-url) {
  55           @include disable-default-a-behaviour;
  56
  57           color: var(--mainForegroundColor);
  58
  59           font-weight: $font-semibold;
  60         }
  61
  62       }
  63     }
  64
  65     .comment-actions {
  66       margin: 10px 0;
  67       display: flex;
  68
  69       .comment-action-reply,
  70       .comment-action-delete {
  71         color: #585858;
  72         cursor: pointer;
  73         margin-right: 10px;
  74
  75         &:hover {
  76           color: var(--mainForegroundColor);
  77         }
  78       }
  79     }
  80   }
  81 }
  82
  83 // Decrease the space of child comments on small screens
  84 @media screen and (max-width: 1600px) {
  85   .children {
  86     margin-left: -20px;
  87   }
  88 }
  89
  90 @media screen and (max-width: 1200px) {
  91   .children {
  92     margin-left: -30px;
  93   }
  94 }
  95
  96 @media screen and (max-width: 600px) {
  97   .children {
  98     margin-left: -35px;
  99   }
 100
 101   .root-comment {
 102     img { margin-right: 10px; }
 103   }
 104 }