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