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 calc(1rem + 1px);
  19     }
  20   }
  21
  22   .right {
  23     width: 100%;
  24   }
  25
  26   .comment {
  27     flex-grow: 1;
  28     // Fix word-wrap with flex
  29     min-width: 1px;
  30
  31     .highlighted-comment {
  32       display: inline-block;
  33       background-color: #F5F5F5;
  34       color: #3d3d3d;
  35       padding: 0 5px;
  36       font-size: 13px;
  37       margin-bottom: 5px;
  38       font-weight: $font-semibold;
  39       border-radius: 3px;
  40     }
  41
  42     .comment-account-date {
  43       display: flex;
  44       margin-bottom: 4px;
  45
  46       .video-author {
  47         height: 20px;
  48         background-color: #888888;
  49         border-radius: 12px;
  50         margin-bottom: 2px;
  51         max-width: 100%;
  52         box-sizing: border-box;
  53         flex-direction: row;
  54         align-items: center;
  55         display: inline-flex;
  56         padding-right: 6px;
  57         padding-left: 6px;
  58         color: white !important;
  59       }
  60
  61       .comment-account {
  62         word-break: break-all;
  63         font-weight: 600;
  64         font-size: 90%;
  65
  66         a {
  67           @include disable-default-a-behaviour;
  68
  69           color: pvar(--mainForegroundColor);
  70
  71           &:hover {
  72             text-decoration: underline;
  73           }
  74         }
  75
  76         .comment-account-fid {
  77           opacity: .6;
  78         }
  79       }
  80
  81       .comment-date {
  82         font-size: 90%;
  83         color: pvar(--greyForegroundColor);
  84         margin-left: 5px;
  85         text-decoration: none;
  86
  87         &:hover {
  88           text-decoration: underline;
  89         }
  90       }
  91     }
  92
  93     .comment-html {
  94       @include peertube-word-wrap;
  95
  96       // Mentions
  97       ::ng-deep a {
  98
  99         &:not(.linkified-url) {
 100           @include disable-default-a-behaviour;
 101
 102           color: pvar(--mainForegroundColor);
 103
 104           font-weight: $font-semibold;
 105         }
 106
 107       }
 108
 109       // Paragraphs
 110       ::ng-deep p {
 111         margin-bottom: .3rem;
 112       }
 113
 114       &.comment-html-deleted {
 115         color: pvar(--greyForegroundColor);
 116         margin-bottom: 1rem;
 117       }
 118     }
 119
 120     .comment-actions {
 121       margin-bottom: 10px;
 122       display: flex;
 123
 124       ::ng-deep .dropdown-toggle,
 125       .comment-action-reply {
 126         color: pvar(--greyForegroundColor);
 127         cursor: pointer;
 128         margin-right: 10px;
 129
 130         &:hover, &:active, &:focus, &:focus-visible {
 131           color: pvar(--mainForegroundColor);
 132         }
 133       }
 134
 135       ::ng-deep .action-button {
 136         background-color: transparent;
 137         padding: 0;
 138         font-weight: unset;
 139       }
 140     }
 141
 142     my-video-comment-add {
 143       ::ng-deep form {
 144         margin-top: 1rem;
 145         margin-bottom: 0;
 146       }
 147     }
 148   }
 149
 150   .children {
 151     // Reduce avatars size for replies
 152     .comment-avatar {
 153       @include avatar(25px);
 154     }
 155
 156     .left {
 157       margin-right: 6px;
 158     }
 159   }
 160 }
 161
 162 @media screen and (max-width: 1200px) {
 163   .children {
 164     margin-left: -10px;
 165   }
 166 }
 167
 168 @media screen and (max-width: 600px) {
 169   .root-comment {
 170     .children {
 171       margin-left: -20px;
 172
 173       .left {
 174         align-items: flex-start;
 175
 176         .vertical-border {
 177           margin-left: 2px;
 178         }
 179       }
 180     }
 181
 182     .comment {
 183       .comment-account-date {
 184         flex-direction: column;
 185
 186         .comment-date {
 187           margin-left: 0;
 188         }
 189       }
 190     }
 191   }
 192 }