You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
422 lines
7.4 KiB
422 lines
7.4 KiB
/* |
|
* DO NOT EDIT THIS FILE. |
|
* See the following change record for more information, |
|
* https://www.drupal.org/node/3084859 |
|
* @preserve |
|
*/ |
|
|
|
/** |
|
* @file |
|
* Comment section and individual comments. |
|
*/ |
|
|
|
/* |
|
* Media query breakpoints. |
|
* Processed by postcss/postcss-custom-media. |
|
*/ |
|
|
|
/* Navigation related breakpoints */ |
|
|
|
/* Grid related breakpoints */ |
|
|
|
/* Grid shifts from 6 to 14 columns. */ |
|
|
|
/* Width of the entire grid maxes out. */ |
|
|
|
.comment--level-1 { |
|
border-top: 2px solid var(--color--gray-95) |
|
} |
|
|
|
.comment--level-1 ~ .comment--level-1 { |
|
margin-top: var(--sp2); |
|
} |
|
|
|
.comments__title { |
|
display: flex; |
|
align-items: center; |
|
margin-top: 0; |
|
} |
|
|
|
[dir="ltr"] .comments__count { |
|
margin-left: var(--sp) |
|
} |
|
|
|
[dir="rtl"] .comments__count { |
|
margin-right: var(--sp) |
|
} |
|
|
|
[dir="ltr"] .comments__count { |
|
margin-right: var(--sp) |
|
} |
|
|
|
[dir="rtl"] .comments__count { |
|
margin-left: var(--sp) |
|
} |
|
|
|
[dir="ltr"] .comments__count { |
|
padding-left: 0.3125rem |
|
} |
|
|
|
[dir="rtl"] .comments__count { |
|
padding-right: 0.3125rem |
|
} |
|
|
|
[dir="ltr"] .comments__count { |
|
padding-right: 0.3125rem |
|
} |
|
|
|
[dir="rtl"] .comments__count { |
|
padding-left: 0.3125rem |
|
} |
|
|
|
.comments__count { |
|
position: relative; |
|
display: inline-block; |
|
min-width: 2.125rem; |
|
margin-top: 0; |
|
margin-bottom: var(--sp0-5); |
|
padding-top: 0; |
|
padding-bottom: 0; |
|
text-align: center; |
|
color: var(--color--white); |
|
border-radius: 2px; |
|
background-color: var(--color--primary-40); |
|
font-size: 0.6875rem; |
|
line-height: 1.3125rem |
|
} |
|
|
|
[dir="ltr"] .comments__count::after { |
|
left: 0.5rem |
|
} |
|
|
|
[dir="rtl"] .comments__count::after { |
|
right: 0.5rem |
|
} |
|
|
|
[dir="ltr"] .comments__count::after { |
|
border-right: 8px solid transparent |
|
} |
|
|
|
[dir="rtl"] .comments__count::after { |
|
border-left: 8px solid transparent |
|
} |
|
|
|
.comments__count::after { |
|
position: absolute; |
|
bottom: -0.4375rem; |
|
width: 0; |
|
height: 0; |
|
content: ""; |
|
border-top: 7px solid var(--color--primary-40); |
|
} |
|
|
|
.comment-form { |
|
padding-bottom: var(--sp2); |
|
} |
|
|
|
[dir="ltr"] .add-comment__form { |
|
padding-left: 0 |
|
} |
|
|
|
[dir="rtl"] .add-comment__form { |
|
padding-right: 0 |
|
} |
|
|
|
[dir="ltr"] .comment { |
|
padding-left: var(--sp3) |
|
} |
|
|
|
[dir="rtl"] .comment { |
|
padding-right: var(--sp3) |
|
} |
|
|
|
.comment { |
|
position: relative; |
|
padding-top: var(--sp2) |
|
} |
|
|
|
@media (min-width: 43.75rem) { |
|
|
|
[dir="ltr"] .comment { |
|
padding-left: 0 |
|
} |
|
|
|
[dir="rtl"] .comment { |
|
padding-right: 0 |
|
} |
|
} |
|
|
|
.comment__text-content { |
|
font-size: 1rem |
|
} |
|
|
|
.comment__text-content blockquote { |
|
font-size: 1.3125rem; |
|
line-height: var(--sp2); |
|
} |
|
|
|
.comment__text-content { |
|
|
|
/* Override for .field:not(:last-child) */ |
|
} |
|
|
|
.comment__text-content:not(:last-child) { |
|
margin-bottom: 0; |
|
} |
|
|
|
.comment__links { |
|
margin-top: var(--sp); |
|
margin-bottom: 0; |
|
} |
|
|
|
.comment__links-link { |
|
text-decoration: none; |
|
font-size: 0.875rem; |
|
font-weight: bold; |
|
line-height: var(--sp) |
|
} |
|
|
|
.comment__links-link:hover { |
|
text-decoration: underline; |
|
} |
|
|
|
.add-comment__picture-wrapper { |
|
top: calc(var(--line-height-base) + var(--sp0-5)); |
|
} |
|
|
|
[dir="ltr"] .add-comment__picture,[dir="ltr"] |
|
.comment__picture { |
|
left: 0 |
|
} |
|
|
|
[dir="rtl"] .add-comment__picture,[dir="rtl"] |
|
.comment__picture { |
|
right: 0 |
|
} |
|
|
|
.add-comment__picture, |
|
.comment__picture { |
|
position: absolute; |
|
overflow: hidden; |
|
width: var(--sp2); |
|
height: var(--sp2); |
|
border-radius: 50%; |
|
background-color: var(--color--gray-95) |
|
} |
|
|
|
.add-comment__picture *:not(img), .comment__picture *:not(img) { |
|
display: inherit; |
|
width: inherit; |
|
height: inherit; |
|
} |
|
|
|
.add-comment__picture img, .comment__picture img { |
|
width: 100%; |
|
height: 100%; |
|
-o-object-fit: cover; |
|
object-fit: cover |
|
|
|
/* @TODO: create image-style for profile's avatar to have image squared by default. */ |
|
} |
|
|
|
@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) { |
|
|
|
.add-comment__picture img, .comment__picture img { |
|
position: absolute; |
|
/* stylelint-disable csstools/use-logical */ |
|
top: 50%; |
|
left: 50%; |
|
/* stylelint-enable csstools/use-logical */ |
|
width: 100%; |
|
height: auto; |
|
transform: translate(-50%, -50%) |
|
} |
|
} |
|
|
|
@media (min-width: 43.75rem) { |
|
|
|
[dir="ltr"] .add-comment__picture,[dir="ltr"] |
|
.comment__picture { |
|
left: calc(var(--sp5)*-1) |
|
} |
|
|
|
[dir="rtl"] .add-comment__picture,[dir="rtl"] |
|
.comment__picture { |
|
right: calc(var(--sp5)*-1) |
|
} |
|
|
|
.add-comment__picture, |
|
.comment__picture { |
|
width: var(--sp3); |
|
height: var(--sp3) |
|
} |
|
} |
|
|
|
@media (min-width: 43.75rem) { |
|
|
|
[dir="ltr"] .indented .comment__picture { |
|
left: calc(var(--sp4)*-1) |
|
} |
|
|
|
[dir="rtl"] .indented .comment__picture { |
|
right: calc(var(--sp4)*-1) |
|
} |
|
|
|
.indented .comment__picture { |
|
width: var(--sp2); |
|
height: var(--sp2) |
|
} |
|
} |
|
|
|
.comment__meta * { |
|
display: inline; |
|
} |
|
|
|
[dir="ltr"] .comment__author { |
|
margin-right: var(--sp) |
|
} |
|
|
|
[dir="rtl"] .comment__author { |
|
margin-left: var(--sp) |
|
} |
|
|
|
.comment__author { |
|
font-family: var(--font-sans); |
|
font-size: 1rem; |
|
font-weight: 700; |
|
line-height: var(--sp) |
|
} |
|
|
|
.comment__author a { |
|
text-decoration: none; |
|
} |
|
|
|
.comment__time { |
|
margin: 0; |
|
color: var(--color-text-neutral-soft); |
|
font-family: var(--font-sans); |
|
font-size: 0.875rem; |
|
line-height: var(--sp); |
|
} |
|
|
|
[dir="ltr"] .indented { |
|
margin-left: var(--sp2) |
|
} |
|
|
|
[dir="rtl"] .indented { |
|
margin-right: var(--sp2) |
|
} |
|
|
|
[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children)::before { |
|
left: calc(var(--sp2)*-1 - var(--sp)) |
|
} |
|
|
|
[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children)::before { |
|
right: calc(var(--sp2)*-1 - var(--sp)) |
|
} |
|
|
|
[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children)::before { |
|
border-left: solid 1px var(--color--gray-95) |
|
} |
|
|
|
[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children)::before { |
|
border-right: solid 1px var(--color--gray-95) |
|
} |
|
|
|
.indented > .comment:not(:last-of-type):not(.has-children)::before { |
|
position: absolute; |
|
top: var(--sp2); /* Comment's padding-top */ |
|
width: 0; |
|
height: 100%; |
|
content: "" |
|
} |
|
|
|
@media (min-width: 43.75rem) { |
|
|
|
[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children)::before { |
|
left: calc(var(--sp4)*-1 + var(--sp)) |
|
} |
|
|
|
[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children)::before { |
|
right: calc(var(--sp4)*-1 + var(--sp)) |
|
} |
|
} |
|
|
|
@media (min-width: 43.75rem) { |
|
|
|
[dir="ltr"] .indented { |
|
margin-left: var(--sp4) |
|
} |
|
|
|
[dir="rtl"] .indented { |
|
margin-right: var(--sp4) |
|
} |
|
} |
|
|
|
[dir="ltr"] .show-hide-btn { |
|
margin-left: var(--sp3) |
|
} |
|
|
|
[dir="rtl"] .show-hide-btn { |
|
margin-right: var(--sp3) |
|
} |
|
|
|
[dir="ltr"] .show-hide-btn { |
|
margin-right: 0 |
|
} |
|
|
|
[dir="rtl"] .show-hide-btn { |
|
margin-left: 0 |
|
} |
|
|
|
[dir="ltr"] .show-hide-btn { |
|
padding-left: 0 |
|
} |
|
|
|
[dir="rtl"] .show-hide-btn { |
|
padding-right: 0 |
|
} |
|
|
|
[dir="ltr"] .show-hide-btn { |
|
padding-right: 0 |
|
} |
|
|
|
[dir="rtl"] .show-hide-btn { |
|
padding-left: 0 |
|
} |
|
|
|
.show-hide-btn { |
|
margin-top: var(--sp2); |
|
margin-bottom: 0; |
|
padding-top: 0; |
|
padding-bottom: 0; |
|
cursor: pointer; |
|
color: var(--color-text-neutral-medium); |
|
border: 0; |
|
background: none; |
|
font-size: 0.875rem; |
|
font-weight: 600; |
|
line-height: 1.125rem; |
|
-webkit-appearance: none; |
|
-moz-appearance: none; |
|
appearance: none |
|
} |
|
|
|
.show-hide-btn[aria-expanded="true"]::after { |
|
content: "\0020 -"; |
|
} |
|
|
|
.show-hide-btn[aria-expanded="false"]::after { |
|
content: "\0020 +"; |
|
} |
|
|
|
@media (min-width: 43.75rem) { |
|
|
|
[dir="ltr"] .show-hide-btn { |
|
margin-left: 0 |
|
} |
|
|
|
[dir="rtl"] .show-hide-btn { |
|
margin-right: 0 |
|
} |
|
}
|
|
|