[ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Summary view] [Print] [Text view]
1 .comment-content a { 2 word-wrap: break-word; 3 } 4 5 .bypostauthor { 6 display: block; 7 } 8 9 .comments-area { 10 -webkit-hyphens: auto; 11 -moz-hyphens: auto; 12 -ms-hyphens: auto; 13 hyphens: auto; 14 margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit; 15 word-wrap: break-word; 16 @include postContentMaxWidth(); 17 18 @include media(tablet) { 19 margin: calc(3 * #{$size__spacing-unit}) $size__site-margins; 20 } 21 22 & > * { 23 margin-top: calc(2 * #{$size__spacing-unit}); 24 margin-bottom: calc(2 * #{$size__spacing-unit}); 25 26 @include media(tablet) { 27 margin-top: calc(3 * #{$size__spacing-unit}); 28 margin-bottom: calc(3 * #{$size__spacing-unit}); 29 } 30 } 31 32 /* Add extra margin when the comments section is located immediately after the 33 * post itself (this happens on pages). 34 */ 35 .entry + & { 36 margin-top: calc(3 * #{$size__spacing-unit}); 37 } 38 39 .comments-title-wrap { 40 41 @include media(tablet) { 42 align-items: baseline; 43 display: flex; 44 justify-content: space-between; 45 } 46 47 .comments-title { 48 @include post-section-dash; 49 margin: 0; 50 51 @include media(tablet) { 52 flex: 1 0 calc(3 * (100vw / 12)); 53 } 54 } 55 56 .discussion-meta { 57 @include media(tablet) { 58 flex: 0 0 calc(2 * (100vw / 12)); 59 margin-left: #{$size__spacing-unit}; 60 } 61 } 62 } 63 } 64 65 #comment { 66 max-width: 100%; 67 box-sizing: border-box; 68 } 69 70 #respond { 71 position: relative; 72 73 .comment-user-avatar { 74 margin: $size__spacing-unit 0 -#{$size__spacing-unit}; 75 } 76 77 .comment .comment-form { 78 padding-left: 0; 79 } 80 81 > small { 82 display: block; 83 font-size: $font__size_base; 84 position: absolute; 85 left: calc(#{$size__spacing-unit} + 100%); 86 top: calc(-3.5 * #{$size__spacing-unit}); 87 width: calc(100vw / 12 ); 88 } 89 } 90 91 #comments { 92 93 > .comments-title:last-child { 94 display: none; 95 } 96 } 97 98 .comment-form-flex { 99 display: flex; 100 flex-direction: column; 101 102 .comments-title { 103 display: none; 104 margin: 0; 105 order: 1; 106 } 107 108 #respond { 109 order: 2; 110 111 + .comments-title { 112 display: block; 113 } 114 } 115 } 116 117 .comment-form-wrapper, 118 .comment-form-wrapper .comments-title { 119 display: block; 120 } 121 122 .comment-list { 123 list-style: none; 124 padding: 0; 125 126 .children { 127 margin: 0; 128 padding: 0 0 0 $size__spacing-unit; 129 } 130 131 > .comment:first-child { 132 margin-top: 0; 133 } 134 135 .pingback, 136 .trackback { 137 138 .comment-body { 139 color: $color__text-light; 140 @include font-family( $font__heading ); 141 font-size: $font__size-xs; 142 font-weight: 500; 143 margin-top: $size__spacing-unit; 144 margin-bottom: $size__spacing-unit; 145 146 a:not(.comment-edit-link) { 147 font-weight: bold; 148 font-size: $font__size-base / (1 * $font__size-ratio); 149 line-height: 1.5; 150 padding-right: #{0.5 * $size__spacing-unit}; 151 display: block; 152 } 153 154 .comment-edit-link { 155 color: $color__text-light; 156 @include font-family( $font__heading ); 157 font-weight: 500; 158 } 159 } 160 } 161 } 162 163 .comment-reply { 164 165 #respond + & { 166 display: none; 167 } 168 169 .comment-reply-link { 170 display: inline-block; 171 } 172 } 173 174 .comment { 175 list-style: none; 176 position: relative; 177 178 @include media(tablet) { 179 padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 ))); 180 181 &.depth-1, 182 .children { 183 padding-left: 0; 184 } 185 186 &.depth-1 { 187 margin-left: calc(3.25 * #{$size__spacing-unit}); 188 } 189 } 190 191 .comment-body { 192 margin: calc(2 * #{$size__spacing-unit}) 0 0; 193 } 194 195 196 .comment-meta { 197 position: relative; 198 } 199 200 .comment-author { 201 202 .avatar { 203 float: left; 204 margin-right: $size__spacing-unit; 205 position: relative; 206 207 @include media(tablet) { 208 float: inherit; 209 margin-right: inherit; 210 position: absolute; 211 top: 0; 212 right: calc(100% + #{$size__spacing-unit}); 213 } 214 } 215 216 .fn { 217 position: relative; 218 display: block; 219 220 a { 221 color: inherit; 222 223 &:hover { 224 color: $color__link-hover; 225 } 226 } 227 } 228 229 .post-author-badge { 230 border-radius: 100%; 231 display: block; 232 height: 18px; 233 position: absolute; 234 background: lighten( $color__link, 8% ); 235 right: calc(100% - #{$size__spacing-unit * 2.5}); 236 top: -3px; 237 width: 18px; 238 239 @include media(tablet) { 240 right: calc(100% + #{$size__spacing-unit * .75}); 241 } 242 243 svg { 244 width: inherit; 245 height: inherit; 246 display: block; 247 fill: white; 248 transform: scale(0.875); 249 } 250 } 251 } 252 253 .comment-metadata { 254 255 > a, 256 .comment-edit-link { 257 display: inline; 258 font-weight: 500; 259 color: $color__text-light; 260 vertical-align: baseline; 261 262 time { 263 vertical-align: baseline; 264 } 265 266 &:hover { 267 color: $color__link-hover; 268 text-decoration: none; 269 } 270 } 271 272 > * { 273 display: inline-block; 274 } 275 276 .edit-link-sep { 277 color: $color__text-light; 278 margin: 0 0.2em; 279 vertical-align: baseline; 280 } 281 282 .edit-link { 283 color: $color__text-light; 284 285 svg { 286 transform: scale(0.8); 287 vertical-align: baseline; 288 margin-right: 0.1em; 289 } 290 } 291 292 .comment-edit-link { 293 position: relative; 294 padding-left: $size__spacing-unit; 295 margin-left: -#{$size__spacing-unit}; 296 z-index: 1; 297 298 &:hover { 299 color: $color__link; 300 } 301 } 302 } 303 304 .comment-content { 305 306 margin: $size__spacing-unit 0; 307 308 @include media(desktop) { 309 padding-right: $size__spacing-unit; 310 } 311 312 > *:first-child { 313 margin-top: 0; 314 } 315 316 > *:last-child { 317 margin-bottom: 0; 318 } 319 320 blockquote { 321 margin-left: 0; 322 } 323 324 a { 325 text-decoration: underline; 326 text-decoration-thickness: 2px; 327 328 &:hover { 329 text-decoration: none; 330 } 331 } 332 } 333 } 334 335 .comment-reply-link, 336 #cancel-comment-reply-link { 337 font-weight: 500; 338 339 &:hover { 340 color: $color__link-hover; 341 } 342 } 343 344 .discussion-avatar-list { 345 @include clearfix; 346 347 margin: 0; 348 padding: 0; 349 350 li { 351 position: relative; 352 list-style: none; 353 margin: 0 -8px 0 0; 354 padding: 0; 355 float: left; 356 } 357 358 .comment-user-avatar { 359 360 img { 361 height: calc(1.5 * #{$size__spacing-unit}); 362 width: calc(1.5 * #{$size__spacing-unit}); 363 } 364 } 365 } 366 367 .discussion-meta { 368 369 .discussion-meta-info { 370 margin: 0; 371 372 .svg-icon { 373 vertical-align: middle; 374 fill: currentColor; 375 transform: scale( 0.6 ) scaleX(-1) translateY(-0.1em); 376 margin-left: -#{.25 * $size__spacing-unit}; // Align icon with avatars above. 377 } 378 } 379 380 } 381 382 .comment-form { 383 384 .comment-notes, 385 label { 386 @include font-family( $font__heading ); 387 font-size: $font__size-xs; 388 color: $color__text-light; 389 } 390 391 #wp-comment-cookies-consent { 392 margin: 0 10px 0 0; 393 } 394 395 .comment-form-author, 396 .comment-form-email { 397 @include media(tablet) { 398 width: calc(50% - #{$size__spacing-unit / 2}); 399 float: left; 400 } 401 } 402 403 .comment-form-email { 404 @include media(tablet) { 405 margin-left: $size__spacing-unit; 406 } 407 } 408 409 input[name="author"], 410 input[name="email"], 411 input[name="url"] { 412 display: block; 413 width: 100%; 414 } 415 }
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated : Thu May 9 08:20:02 2024 | Cross-referenced by PHPXref |