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 0;
  19     }
  20   }
  21
  22   .right {
  23     width: 100%;
  24   }
  25
  26   .comment-avatar {
  27     @include avatar(36px);
  28
  29     margin-top: 5px;
  30   }
  31
  32   .comment {
  33     flex-grow: 1;
  34     // Fix word-wrap with flex
  35     min-width: 1px;
  36
  37     .highlighted-comment {
  38       display: inline-block;
  39       background-color: #F5F5F5;
  40       color: #3d3d3d;
  41       padding: 0 5px;
  42       font-size: 13px;
  43       margin-bottom: 5px;
  44       font-weight: $font-semibold;
  45       border-radius: 3px;
  46     }
  47
  48     .comment-account-date {
  49       display: flex;
  50       margin-bottom: 4px;
  51
  52       .comment-account {
  53         @include disable-default-a-behaviour;
  54
  55         word-break: break-all;
  56         color: var(--mainForegroundColor);
  57         font-weight: $font-bold;
  58       }
  59
  60       .comment-date {
  61         color: $grey-foreground-color;
  62         margin-left: 10px;
  63       }
  64     }
  65
  66     .comment-html {
  67       @include peertube-word-wrap;
  68       margin-bottom: 10px;
  69
  70       // Mentions
  71       ::ng-deep a {
  72
  73         &:not(.linkified-url) {
  74           @include disable-default-a-behaviour;
  75
  76           color: var(--mainForegroundColor);
  77
  78           font-weight: $font-semibold;
  79         }
  80
  81       }
  82
  83       &.comment-html-deleted {
  84         color: $grey-foreground-color;
  85       }
  86     }
  87
  88     .comment-actions {
  89       margin-bottom: 10px;
  90       display: flex;
  91
  92       .comment-action-reply,
  93       .comment-action-delete {
  94         color: $grey-foreground-color;
  95         cursor: pointer;
  96         margin-right: 10px;
  97
  98         &:hover {
  99           color: var(--mainForegroundColor);
 100         }
 101       }
 102     }
 103   }
 104
 105   .children {
 106     // Reduce avatars size for replies
 107     .comment-avatar {
 108       @include avatar(25px);
 109     }
 110
 111     .left {
 112       margin-right: 6px;
 113     }
 114   }
 115 }
 116
 117 @media screen and (max-width: 1200px) {
 118   .children {
 119     margin-left: -10px;
 120   }
 121 }
 122
 123 @media screen and (max-width: 600px) {
 124   .root-comment {
 125     .children {
 126       margin-left: -20px;
 127
 128       .left {
 129         align-items: flex-start;
 130
 131         .vertical-border {
 132           margin-left: 2px;
 133         }
 134       }
 135     }
 136
 137     .comment {
 138       .comment-account-date {
 139         flex-direction: column;
 140
 141         .comment-date {
 142           margin-left: 0;
 143         }
 144       }
 145     }
 146   }
 147 }