1/* 2 * DO NOT EDIT THIS FILE. 3 * See the following change record for more information, 4 * https://www.drupal.org/node/3084859 5 * @preserve 6 */ 7 8/** 9 * @file 10 * Comment section and individual comments. 11 */ 12 13.comment--level-1 { 14 border-top: 2px solid #e7edf1 15} 16 17.comment--level-1 ~ .comment--level-1 { 18 margin-top: 2.25rem; 19 } 20 21.comments__title { 22 display: flex; 23 align-items: center; 24 margin-top: 0; 25} 26 27[dir="ltr"] .comments__count { 28 margin-left: 1.125rem 29} 30 31[dir="rtl"] .comments__count { 32 margin-right: 1.125rem 33} 34 35[dir="ltr"] .comments__count { 36 margin-right: 1.125rem 37} 38 39[dir="rtl"] .comments__count { 40 margin-left: 1.125rem 41} 42 43[dir="ltr"] .comments__count { 44 padding-left: 0.3125rem 45} 46 47[dir="rtl"] .comments__count { 48 padding-right: 0.3125rem 49} 50 51[dir="ltr"] .comments__count { 52 padding-right: 0.3125rem 53} 54 55[dir="rtl"] .comments__count { 56 padding-left: 0.3125rem 57} 58 59.comments__count { 60 position: relative; 61 display: inline-block; 62 min-width: 2.125rem; 63 margin-top: 0; 64 margin-bottom: 0.5625rem; 65 padding-top: 0; 66 padding-bottom: 0; 67 text-align: center; 68 color: #fff; 69 border-radius: 2px; 70 background-color: #0d77b5; 71 font-size: 0.6875rem; 72 line-height: 1.3125rem 73} 74 75[dir="ltr"] .comments__count:after { 76 left: 0.5rem 77} 78 79[dir="rtl"] .comments__count:after { 80 right: 0.5rem 81} 82 83[dir="ltr"] .comments__count:after { 84 border-right: 8px solid transparent 85} 86 87[dir="rtl"] .comments__count:after { 88 border-left: 8px solid transparent 89} 90 91.comments__count:after { 92 position: absolute; 93 bottom: -0.4375rem; 94 width: 0; 95 height: 0; 96 content: ""; 97 border-top: 7px solid #0d77b5; 98 } 99 100.comment-form { 101 padding-bottom: 2.25rem; 102} 103 104[dir="ltr"] .add-comment__form { 105 padding-left: 0 106} 107 108[dir="rtl"] .add-comment__form { 109 padding-right: 0 110} 111 112[dir="ltr"] .comment { 113 padding-left: 3.375rem 114} 115 116[dir="rtl"] .comment { 117 padding-right: 3.375rem 118} 119 120.comment { 121 position: relative; 122 padding-top: 2.25rem 123} 124 125@media (min-width: 43.75rem) { 126 127[dir="ltr"] .comment { 128 padding-left: 0 129 } 130 131[dir="rtl"] .comment { 132 padding-right: 0 133 } 134 } 135 136.comment__text-content { 137 font-size: 1rem 138} 139 140.comment__text-content blockquote { 141 font-size: 1.3125rem; 142 line-height: 2.25rem; 143 } 144 145.comment__text-content { 146 147 /* Override for .field:not(:last-child) */ 148} 149 150.comment__text-content:not(:last-child) { 151 margin-bottom: 0; 152 } 153 154.comment__links { 155 margin-top: 1.125rem; 156 margin-bottom: 0; 157} 158 159.comment__links-link { 160 text-decoration: none; 161 font-size: 0.875rem; 162 font-weight: bold; 163 line-height: 1.125rem 164} 165 166.comment__links-link:hover { 167 text-decoration: underline; 168 } 169 170.add-comment__picture-wrapper { 171 top: 2.25rem; 172} 173 174[dir="ltr"] .add-comment__picture,[dir="ltr"] 175.comment__picture { 176 left: 0 177} 178 179[dir="rtl"] .add-comment__picture,[dir="rtl"] 180.comment__picture { 181 right: 0 182} 183 184.add-comment__picture, 185.comment__picture { 186 position: absolute; 187 overflow: hidden; 188 width: 2.25rem; 189 height: 2.25rem; 190 border-radius: 50%; 191 background-color: #e7edf1 192} 193 194.add-comment__picture *:not(img), .comment__picture *:not(img) { 195 display: inherit; 196 width: inherit; 197 height: inherit; 198 } 199 200.add-comment__picture img, .comment__picture img { 201 width: 100%; 202 height: 100%; 203 -o-object-fit: cover; 204 object-fit: cover 205 206 /* @TODO: create image-style for profile's avatar to have image squared by default. */ 207 } 208 209@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) { 210 211.add-comment__picture img, .comment__picture img { 212 position: absolute; 213 /* stylelint-disable csstools/use-logical */ 214 top: 50%; 215 left: 50%; 216 /* stylelint-enable csstools/use-logical */ 217 width: 100%; 218 height: auto; 219 transform: translate(-50%, -50%) 220 } 221 } 222 223@media (min-width: 43.75rem) { 224 225[dir="ltr"] .add-comment__picture,[dir="ltr"] 226.comment__picture { 227 left: -5.625rem 228 } 229 230[dir="rtl"] .add-comment__picture,[dir="rtl"] 231.comment__picture { 232 right: -5.625rem 233 } 234 235.add-comment__picture, 236.comment__picture { 237 width: 3.375rem; 238 height: 3.375rem 239} 240 } 241 242@media (min-width: 43.75rem) { 243 244[dir="ltr"] .indented .comment__picture { 245 left: -4.5rem 246 } 247 248[dir="rtl"] .indented .comment__picture { 249 right: -4.5rem 250 } 251 252.indented .comment__picture { 253 width: 2.25rem; 254 height: 2.25rem 255} 256 } 257 258.comment__meta * { 259 display: inline; 260 } 261 262[dir="ltr"] .comment__author { 263 margin-right: 1.125rem 264} 265 266[dir="rtl"] .comment__author { 267 margin-left: 1.125rem 268} 269 270.comment__author { 271 font-family: "metropolis", sans-serif; 272 font-size: 1rem; 273 font-weight: 700; 274 line-height: 1.125rem 275} 276 277.comment__author a { 278 text-decoration: none; 279 } 280 281.comment__time { 282 margin: 0; 283 color: #6e7172; 284 font-family: "metropolis", sans-serif; 285 font-size: 0.875rem; 286 line-height: 1.125rem; 287} 288 289[dir="ltr"] .indented { 290 margin-left: 2.25rem 291} 292 293[dir="rtl"] .indented { 294 margin-right: 2.25rem 295} 296 297[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before { 298 left: -3.375rem 299} 300 301[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before { 302 right: -3.375rem 303} 304 305[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before { 306 border-left: solid 1px #e7edf1 307} 308 309[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before { 310 border-right: solid 1px #e7edf1 311} 312 313.indented > .comment:not(:last-of-type):not(.has-children):before { 314 position: absolute; 315 top: 2.25rem; /* Comment's padding-top */ 316 width: 0; 317 height: 100%; 318 content: "" 319 } 320 321@media (min-width: 43.75rem) { 322 323[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before { 324 left: -3.375rem 325 } 326 327[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before { 328 right: -3.375rem 329 } 330 } 331 332@media (min-width: 43.75rem) { 333 334[dir="ltr"] .indented { 335 margin-left: 4.5rem 336 } 337 338[dir="rtl"] .indented { 339 margin-right: 4.5rem 340 } 341 } 342 343[dir="ltr"] .show-hide-btn { 344 margin-left: 3.375rem 345} 346 347[dir="rtl"] .show-hide-btn { 348 margin-right: 3.375rem 349} 350 351[dir="ltr"] .show-hide-btn { 352 margin-right: 0 353} 354 355[dir="rtl"] .show-hide-btn { 356 margin-left: 0 357} 358 359[dir="ltr"] .show-hide-btn { 360 padding-left: 0 361} 362 363[dir="rtl"] .show-hide-btn { 364 padding-right: 0 365} 366 367[dir="ltr"] .show-hide-btn { 368 padding-right: 0 369} 370 371[dir="rtl"] .show-hide-btn { 372 padding-left: 0 373} 374 375.show-hide-btn { 376 margin-top: 2.25rem; 377 margin-bottom: 0; 378 padding-top: 0; 379 padding-bottom: 0; 380 cursor: pointer; 381 color: #313637; 382 border: 0; 383 background: none; 384 font-size: 0.875rem; 385 font-weight: 600; 386 line-height: 1.125rem; 387 -webkit-appearance: none; 388 -moz-appearance: none; 389 appearance: none 390} 391 392.show-hide-btn[aria-expanded="true"]:after { 393 content: "\0020 -"; 394 } 395 396.show-hide-btn[aria-expanded="false"]:after { 397 content: "\0020 +"; 398 } 399 400@media (min-width: 43.75rem) { 401 402[dir="ltr"] .show-hide-btn { 403 margin-left: 0 404 } 405 406[dir="rtl"] .show-hide-btn { 407 margin-right: 0 408 } 409 } 410