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         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
  52       // Mentions
  53       /deep/ a {
  54
  55         &:not(.linkified-url) {
  56           @include disable-default-a-behaviour;
  57
  58           color: var(--mainForegroundColor);
  59
  60           font-weight: $font-semibold;
  61         }
  62
  63       }
  64     }
  65
  66     .comment-actions {
  67       margin: 10px 0;
  68       display: flex;
  69
  70       .comment-action-reply,
  71       .comment-action-delete {
  72         color: $grey-foreground-color;
  73         cursor: pointer;
  74         margin-right: 10px;
  75
  76         &:hover {
  77           color: var(--mainForegroundColor);
  78         }
  79       }
  80     }
  81   }
  82 }
  83
  84 // Decrease the space of child comments on small screens
  85 @media screen and (max-width: 1600px) {
  86   .children {
  87     margin-left: -20px;
  88   }
  89 }
  90
  91 @media screen and (max-width: 1200px) {
  92   .children {
  93     margin-left: -30px;
  94   }
  95 }
  96
  97 @media screen and (max-width: 600px) {
  98   .children {
  99     margin-left: -35px;
 100   }
 101
 102   .root-comment {
 103     img { margin-right: 10px; }
 104   }
 105 }
 106
 107 @media screen and (max-width: 450px) {
 108   .root-comment {
 109     font-size: 14px;
 110   }
 111 }