comments.pcss.css

Same filename in other branches
  1. 10 core/themes/olivero/css/components/comments.pcss.css
  2. 11.x core/themes/olivero/css/components/comments.pcss.css

Comment section and individual comments.

File

core/themes/olivero/css/components/comments.pcss.css

View source
  1. /**
  2. * @file
  3. * Comment section and individual comments.
  4. */
  5. @import "../base/variables.pcss.css";
  6. :root {
  7. --comment-indentation: var(--sp2);
  8. --comment-indentation--md: var(--sp4);
  9. }
  10. .comment--level-1 {
  11. border-block-start: 2px solid var(--color--gray-80);
  12. & ~ .comment--level-1 {
  13. margin-block-start: var(--sp2);
  14. }
  15. }
  16. .comments__title {
  17. display: flex;
  18. align-items: center;
  19. margin-block-start: 0;
  20. }
  21. .comments__count {
  22. position: relative;
  23. display: inline-block;
  24. min-width: 34px;
  25. margin-block-start: 0;
  26. margin-block-end: var(--sp0-5);
  27. margin-inline-start: var(--sp);
  28. margin-inline-end: var(--sp);
  29. padding-block: 0;
  30. padding-inline-start: 5px;
  31. padding-inline-end: 5px;
  32. text-align: center;
  33. color: var(--color--white);
  34. border-radius: 2px;
  35. background-color: var(--color--blue-20);
  36. font-size: 11px;
  37. line-height: 21px;
  38. &:after {
  39. position: absolute;
  40. inset-block-end: -7px;
  41. inset-inline-start: 8px;
  42. width: 0;
  43. height: 0;
  44. content: "";
  45. border-block-start: 7px solid var(--color--blue-20);
  46. border-inline-end: 8px solid transparent;
  47. }
  48. }
  49. .comment-form {
  50. padding-block-end: var(--sp2);
  51. }
  52. .add-comment__form {
  53. padding-inline-start: 0;
  54. }
  55. .comment {
  56. position: relative;
  57. padding-block-start: var(--sp2);
  58. padding-inline-start: var(--sp3);
  59. @media (--grid-md) {
  60. padding-inline-start: 0;
  61. }
  62. }
  63. .comment__text-content {
  64. font-size: 16px;
  65. & blockquote {
  66. font-size: 21px;
  67. line-height: var(--sp2);
  68. }
  69. /* Override for .field:not(:last-child) */
  70. &:not(:last-child) {
  71. margin-block-end: 0;
  72. }
  73. }
  74. .comment__links {
  75. margin-block: var(--sp) 0;
  76. }
  77. .comment__links-link {
  78. text-decoration: none;
  79. font-size: 14px;
  80. font-weight: bold;
  81. line-height: var(--sp);
  82. &:hover {
  83. text-decoration: underline;
  84. }
  85. }
  86. .add-comment__picture-wrapper {
  87. inset-block-start: calc(var(--line-height-base) + var(--sp0-5));
  88. }
  89. .add-comment__picture,
  90. .comment__picture {
  91. position: absolute;
  92. inset-inline-start: 0;
  93. overflow: hidden;
  94. width: var(--sp2);
  95. height: var(--sp2);
  96. border-radius: 50%;
  97. background-color: var(--color--gray-80);
  98. & *:not(img) {
  99. display: inherit;
  100. width: inherit;
  101. height: inherit;
  102. }
  103. & img {
  104. width: 100%;
  105. height: 100%;
  106. object-fit: cover;
  107. /* @TODO: create image-style for profile's avatar to have image squared by default. */
  108. @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  109. position: absolute;
  110. /* stylelint-disable csstools/use-logical */
  111. top: 50%;
  112. left: 50%;
  113. /* stylelint-enable csstools/use-logical */
  114. width: 100%;
  115. height: auto;
  116. transform: translate(-50%, -50%);
  117. }
  118. }
  119. @media (--grid-md) {
  120. inset-inline-start: calc(-1 * var(--sp5));
  121. width: var(--sp3);
  122. height: var(--sp3);
  123. }
  124. }
  125. .indented .comment__picture {
  126. @media (--grid-md) {
  127. inset-inline-start: calc(-1 * var(--sp4));
  128. width: var(--sp2);
  129. height: var(--sp2);
  130. }
  131. }
  132. .comment__meta {
  133. & * {
  134. display: inline;
  135. }
  136. }
  137. .comment__author {
  138. margin-inline-end: var(--sp);
  139. font-family: var(--font-sans);
  140. font-size: 16px;
  141. font-weight: 700;
  142. line-height: var(--sp);
  143. & a {
  144. text-decoration: none;
  145. }
  146. }
  147. .comment__time {
  148. margin: 0;
  149. color: var(--color--gray-20);
  150. font-family: var(--font-sans);
  151. font-size: 14px;
  152. line-height: var(--sp);
  153. }
  154. .indented {
  155. margin-inline-start: var(--comment-indentation);
  156. & > .comment:not(:last-of-type):not(.has-children):before {
  157. position: absolute;
  158. inset-block-start: var(--sp2);
  159. inset-inline-start: calc(-1 * var(--comment-indentation) - var(--sp)); /* Comment's padding-top */
  160. width: 0;
  161. height: 100%;
  162. content: "";
  163. border-inline-start: solid 1px var(--color--gray-80);
  164. @media (--md) {
  165. inset-inline-start: calc(-1 * var(--comment-indentation--md) + var(--sp));
  166. }
  167. }
  168. @media (--md) {
  169. margin-inline-start: var(--comment-indentation--md);
  170. }
  171. }
  172. .show-hide-btn {
  173. margin-block-start: var(--sp2);
  174. margin-block-end: 0;
  175. margin-inline-start: var(--sp3);
  176. margin-inline-end: 0;
  177. padding-block: 0;
  178. padding-inline-start: 0;
  179. padding-inline-end: 0;
  180. cursor: pointer;
  181. color: var(--color--gray-10);
  182. border: 0;
  183. background: none;
  184. font-size: 14px;
  185. font-weight: 600;
  186. line-height: 18px;
  187. appearance: none;
  188. &[aria-expanded="true"]:after {
  189. content: "\0020 -";
  190. }
  191. &[aria-expanded="false"]:after {
  192. content: "\0020 +";
  193. }
  194. @media (--grid-md) {
  195. margin-inline-start: 0;
  196. }
  197. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.