comments.css

Same filename in other branches
  1. 9 core/themes/olivero/css/components/comments.css
  2. 9 core/themes/bartik/css/components/comments.css
  3. 8.9.x core/themes/bartik/css/components/comments.css
  4. 11.x core/themes/olivero/css/components/comments.css

Comment section and individual comments.

File

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

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

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