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
 132                 > .commentListAddCommentEditorContainer {
 133                         left: 200%;
 134                         position: absolute;
 135                         top: -100%;
 136                 }
 137         }
 138
 139         &.loading {
 140                 height: 150px;
 141                 position: relative;
 142
 143                 > .commentListAddCommentEditorContainer {
 144                         display: none;
 145                 }
 146
 147                 > .commentLoadingOverlay {
 148                         left: 50%;
 149                         position: absolute;
 150                         top: 50%;
 151                         transform: translateX(-50%) translateY(-50%);
 152                 }
 153         }
 154 }
 155
 156 .commentListAddCommentResponse {
 157         &.loading {
 158                 height: 150px;
 159                 position: relative;
 160
 161                 > .commentListAddCommentResponseEditorContainer {
 162                         display: none;
 163                 }
 164
 165                 > .commentLoadingOverlay {
 166                         left: 50%;
 167                         position: absolute;
 168                         top: 50%;
 169                         transform: translateX(-50%) translateY(-50%);
 170                 }
 171         }
 172 }
 173
 174 .commentListAddCommentEditorContainer > .jsCommentAddRequiresApproval {
 175         margin-top: 0;
 176 }
 177
 178 .commentResponseAdd > div > .jsCommentAddRequiresApproval {
 179         margin-top: 0;
 180
 181         & + textarea {
 182                 margin-top: 20px;
 183         }
 184 }
 185
 186 .commentEditorContainer {
 187         > .icon {
 188                 left: calc(50% - 24px);
 189                 position: relative;
 190         }
 191
 192         ~ .commentContent,
 193         ~ .commentOptionContainer {
 194                 display: none;
 195         }
 196 }
 197
 198 .commentResponse .commentEditorContainer {
 199         ~ .containerHeadline,
 200         ~ .userMessage,
 201         ~ .buttonGroupNavigation {
 202                 display: none;
 203         }
 204 }
 205
 206 .commentListAddComment,
 207 .commentEditorContainer {
 208         .formSubmit {
 209                 /* reduced margin, now in sync with the container padding */
 210                 margin-top: 20px;
 211         }
 212 }
 213
 214 @keyframes wcfCommentHighlight {
 215         0%   { opacity: 1;  }
 216         50%  { opacity: .3; }
 217         100% { opacity: 1;  }
 218 }
 219
 220 .commentPermalinkContainer,
 221 .commentResponsePermalinkContainer{
 222         border-bottom-color: $wcfContentBorder !important;
 223
 224         &.loading > .icon {
 225                 left: calc(50% - 24px);
 226                 position: relative;
 227         }
 228
 229         &:not(.loading) {
 230                 //opacity: 0;
 231         }
 232
 233         &.fadeIn {
 234
 235                 /*opacity: 1;
 236                 transition: opacity .24s linear;*/
 237         }
 238 }
 239
 240 .comment.commentHighlightTarget .commentContent:not(.commentResponseContent),
 241 .commentResponse.commentHighlightTarget .commentResponseContent {
 242         animation: wcfCommentHighlight .96s linear;
 243 }
 244
 245 .commentScrollTarget {
 246         display: block;
 247         height: 0;
 248         position: absolute;
 249 }
 250
 251 .jsEnableComment > .invisible,
 252 .jsEnableResponse > .invisible {
 253         display: inline;
 254 }
 255
 256 .commentModerationDisabledComment {
 257         margin: 0 -20px;
 258 }
 259
 260 /* Prevent images in comments in the sidebar box from becoming too large */
 261 .sidebarCommentContent {
 262         img {
 263                 max-width: 100%;
 264                 max-height: 300px;
 265         }
 266 }