wcfsetup/install/files/style/ui/comment.scss

   1 .commentList {
   2         > li {
   3                 &:hover {
   4                         background-color: transparent;
   5
   6                         .buttonGroupNavigation {
   7                                 opacity: 0;
   8                         }
   9                 }
  10
  11                 &.jsCommentAdd {
  12                         padding-right: 0;
  13                 }
  14         }
  15
  16         .commentContent {
  17                 &:hover {
  18                         .buttonGroupNavigation {
  19                                 opacity: 1;
  20                         }
  21                 }
  22
  23                 + .commentOptionContainer {
  24                         .commentResponseAdd {
  25                                 border-top: 1px solid $wcfContentBorderInner;
  26                                 padding-top: 20px;
  27                                 margin-top: 20px;
  28                         }
  29                 }
  30
  31                 .wcfLikeCounter {
  32                         @include wcfFontSmall;
  33                 }
  34
  35                 > .userMessage {
  36                         margin-top: 10px;
  37                         padding-bottom: 5px;
  38
  39                         /* slightly indent code and quote boxes at the root of the
  40                            message container, allows some space for shadows */
  41                         > .codeBox,
  42                         > .quoteBox {
  43                                 margin-left: 5px;
  44                                 margin-right: 5px;
  45                         }
  46                 }
  47         }
  48
  49         .commentResponseList {
  50                 &:not(:empty) {
  51                         margin-top: 20px;
  52                 }
  53
  54                 > li {
  55                         &:first-child,
  56                         &:last-child {
  57                                 border-color: $wcfContentBorderInner;
  58                         }
  59                 }
  60         }
  61
  62         .commentOptionContainer {
  63                 margin-top: 10px;
  64         }
  65
  66         .commentResponseAdd {
  67                 padding: 10px 20px 0 20px;
  68         }
  69
  70         textarea + button {
  71                 margin-top: 2px;
  72         }
  73
  74         .comment[data-is-disabled="1"] .jsCommentShowAddResponse {
  75                 display: none;
  76         }
  77
  78         /* prevents the author avatar link to be stretched downwards */
  79         .comment > .box48 > a:first-child {
  80                 align-self: flex-start;
  81         }
  82
  83         @include screen-sm-up {
  84                 .jsCommentResponseAdd {
  85                         padding-left: 20px;
  86                 }
  87         }
  88
  89         /* hide avatar on smartphones to give more room to the editor */
  90         @include screen-xs {
  91                 .jsCommentAdd > .userAvatarImage,
  92                 .jsCommentResponseAdd > .userAvatarImage {
  93                         display: none;
  94                 }
  95         }
  96
  97         /* mobile drop-down menus are sometimes cut off due to the overflow */
  98         @include screen-md-down {
  99                 .commentContentContainer {
 100                         overflow: visible;
 101                 }
 102         }
 103 }
 104
 105 .commentListAddComment {
 106         &.collapsed {
 107                 background-color: $wcfSidebarBackground;
 108                 cursor: pointer;
 109                 overflow: hidden;
 110                 padding: 10px 20px;
 111                 position: relative;
 112
 113                 &::before {
 114                         color: $wcfSidebarText;
 115                         content: $fa-var-reply;
 116                         font-family: FontAwesome;
 117                         font-size: 28px;
 118                         height: 32px;
 119                         line-height: 32px;
 120                         margin-right: 10px;
 121                         width: 32px;
 122                         vertical-align: -5px;
 123                 }
 124
 125                 &::after {
 126                         color: $wcfSidebarText;
 127                         content: attr(data-placeholder);
 128                         position: relative;
 129                         top: 2px;
 130
 131                         @include screen-sm-up {
 132                                 @include wcfFontSection;
 133                         }
 134                 }
 135
 136                 > .commentListAddCommentEditorContainer {
 137                         left: 200%;
 138                         position: absolute;
 139                         top: -100%;
 140                 }
 141         }
 142
 143         &.loading {
 144                 height: 150px;
 145                 position: relative;
 146
 147                 > .commentListAddCommentEditorContainer {
 148                         display: none;
 149                 }
 150
 151                 > .commentLoadingOverlay {
 152                         left: 50%;
 153                         position: absolute;
 154                         top: 50%;
 155                         transform: translateX(-50%) translateY(-50%);
 156                 }
 157         }
 158 }
 159
 160 .commentListAddCommentResponse {
 161         &.loading {
 162                 height: 150px;
 163                 position: relative;
 164
 165                 > .commentListAddCommentResponseEditorContainer {
 166                         display: none;
 167                 }
 168
 169                 > .commentLoadingOverlay {
 170                         left: 50%;
 171                         position: absolute;
 172                         top: 50%;
 173                         transform: translateX(-50%) translateY(-50%);
 174                 }
 175         }
 176 }
 177
 178 .commentListAddCommentEditorContainer > .jsCommentAddRequiresApproval {
 179         margin-top: 0;
 180 }
 181
 182 .commentResponseAdd > div > .jsCommentAddRequiresApproval {
 183         margin-top: 0;
 184
 185         & + textarea {
 186                 margin-top: 20px;
 187         }
 188 }
 189
 190 .commentEditorContainer {
 191         > .icon {
 192                 left: calc(50% - 24px);
 193                 position: relative;
 194         }
 195
 196         ~ .commentContent,
 197         ~ .commentOptionContainer {
 198                 display: none;
 199         }
 200 }
 201
 202 .commentResponse .commentEditorContainer {
 203         ~ .containerHeadline,
 204         ~ .userMessage,
 205         ~ .buttonGroupNavigation {
 206                 display: none;
 207         }
 208 }
 209
 210 .commentListAddComment,
 211 .commentEditorContainer {
 212         .formSubmit {
 213                 /* reduced margin, now in sync with the container padding */
 214                 margin-top: 20px;
 215         }
 216 }
 217
 218 @keyframes wcfCommentHighlight {
 219         0%   { opacity: 1;  }
 220         50%  { opacity: .3; }
 221         100% { opacity: 1;  }
 222 }
 223
 224 .commentPermalinkContainer,
 225 .commentResponsePermalinkContainer{
 226         border-bottom-color: $wcfContentBorder !important;
 227
 228         &.loading > .icon {
 229                 left: calc(50% - 24px);
 230                 position: relative;
 231         }
 232
 233         &:not(.loading) {
 234                 //opacity: 0;
 235         }
 236
 237         &.fadeIn {
 238
 239                 /*opacity: 1;
 240                 transition: opacity .24s linear;*/
 241         }
 242 }
 243
 244 .comment.commentHighlightTarget .commentContent:not(.commentResponseContent),
 245 .commentResponse.commentHighlightTarget .commentResponseContent {
 246         animation: wcfCommentHighlight .96s linear;
 247 }
 248
 249 .commentScrollTarget {
 250         display: block;
 251         height: 0;
 252         position: absolute;
 253 }
 254
 255 .jsEnableComment > .invisible,
 256 .jsEnableResponse > .invisible {
 257         display: inline;
 258 }
 259
 260 .commentModerationDisabledComment {
 261         margin: 0 -20px;
 262 }