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