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