comments.scss (4532B)
1 /** 2 * Comments Wrapper 3 */ 4 .comments-area { 5 6 > * { 7 margin-top: var(--global--spacing-vertical); 8 margin-bottom: var(--global--spacing-vertical); 9 10 &:first-child { 11 margin-top: 0; 12 } 13 14 &:last-child { 15 margin-bottom: 0; 16 } 17 } 18 19 &.show-avatars { 20 21 .avatar { 22 border-radius: 50%; 23 position: absolute; 24 top: 10px; 25 } 26 27 .fn { 28 display: inline-block; 29 padding-left: 85px; 30 } 31 32 .comment-metadata { 33 padding: 8px 0 9px 85px; 34 } 35 36 } 37 } 38 39 /** 40 * Comment Title 41 */ 42 43 .comments-title, 44 .comment-reply-title { 45 font-size: var(--heading--font-size-h2); 46 letter-spacing: var(--heading--letter-spacing-h2); 47 } 48 49 .comment-reply-title { 50 display: flex; 51 justify-content: space-between; 52 53 small { 54 55 a { 56 font-family: var(--global--font-secondary); 57 font-size: var(--global--font-size-xs); 58 font-style: normal; 59 font-weight: normal; 60 letter-spacing: normal; 61 } 62 } 63 } 64 65 /* Nested comment reply title*/ 66 .comment .comment-respond .comment-reply-title { 67 font-size: var(--global--font-size-lg); 68 } 69 70 /** 71 * Comment Lists 72 */ 73 .comment-list { 74 padding-left: 0; 75 list-style: none; 76 77 > li { 78 margin-top: var(--global--spacing-vertical); 79 margin-bottom: var(--global--spacing-vertical); 80 } 81 82 } 83 84 .comment-list .children { 85 list-style: none; 86 padding-left: 0; 87 88 > li { 89 margin-top: var(--global--spacing-vertical); 90 margin-bottom: var(--global--spacing-vertical); 91 } 92 93 } 94 95 .comment-list .depth-2, 96 .comment-list .depth-3 { 97 @include media(mobile) { 98 padding-left: calc(4 * var(--global--spacing-horizontal)); 99 } 100 } 101 102 /** 103 * Comment Meta 104 */ 105 .comment-meta { 106 107 .comment-author { 108 line-height: var(--global--line-height-heading); 109 margin-bottom: calc(0.25 * var(--global--spacing-unit)); 110 111 @include media(mobile) { 112 margin-bottom: 0; 113 padding-right: 0; 114 } 115 116 .fn { 117 font-family: var(--global--font-secondary); 118 font-weight: normal; 119 font-size: var(--global--font-size-lg); 120 hyphens: auto; 121 word-wrap: break-word; 122 word-break: break-word; 123 } 124 125 } 126 127 .comment-metadata { 128 color: var(--global--color-primary); 129 font-size: var(--global--font-size-xs); 130 padding: 8px 0 9px 0; 131 132 .edit-link { 133 margin-left: var(--global--spacing-horizontal); 134 } 135 136 } 137 138 @include media(mobile) { 139 margin-right: inherit; 140 141 .comment-author { 142 max-width: inherit; 143 } 144 } 145 } 146 147 .reply { 148 font-size: var(--global--font-size-sm); 149 line-height: var(--global--line-height-heading); 150 } 151 152 .bypostauthor { 153 display: block; 154 } 155 156 .says { 157 display: none; 158 } 159 160 .pingback .url, 161 .trackback .url { 162 font-family: var(--global--font-primary); 163 } 164 165 // Comment body 166 .comment-body { 167 position: relative; 168 margin-bottom: calc(1.7 * var(--global--spacing-vertical)); 169 170 > * { 171 margin-top: var(--global--spacing-vertical); 172 margin-bottom: var(--global--spacing-vertical); 173 } 174 175 .reply { 176 margin: 0; 177 } 178 } 179 180 .comment-content { 181 word-wrap: break-word; 182 } 183 184 // Pingbacks & Trackbacks 185 .pingback .comment-body, 186 .trackback .comment-body { 187 margin-top: var(--global--spacing-vertical); 188 margin-bottom: var(--global--spacing-vertical); 189 } 190 191 .comment-respond { 192 margin-top: var(--global--spacing-vertical); 193 } 194 195 .comment-respond > * { 196 margin-top: var(--global--spacing-unit); 197 margin-bottom: var(--global--spacing-unit); 198 199 &:first-child { 200 margin-top: 0; 201 } 202 203 &:last-child { 204 margin-bottom: 0; 205 206 &.comment-form { 207 margin-bottom: var(--global--spacing-vertical); 208 } 209 } 210 } 211 212 .comment-author { 213 padding-top: 3px; 214 215 .url { 216 color: currentColor; 217 } 218 } 219 220 .comment-form { 221 display: flex; 222 flex-wrap: wrap; 223 224 > * { 225 flex-basis: 100%; 226 } 227 228 .comment-notes { 229 font-size: var(--global--font-size-sm); 230 } 231 232 .comment-form-url, 233 .comment-form-comment { 234 width: 100%; 235 } 236 237 .comment-form-author, 238 .comment-form-email { 239 flex-basis: 0; 240 flex-grow: 1; 241 242 @include media(mobile-only) { 243 flex-basis: 100%; 244 } 245 } 246 247 .comment-form-cookies-consent > label, 248 .comment-notes { 249 font-size: var(--global--font-size-xs); 250 font-weight: normal; 251 } 252 } 253 254 .comment-form > p { 255 margin-bottom: var(--global--spacing-unit); 256 257 &:first-of-type { 258 margin-top: 0; 259 } 260 261 &:last-of-type { 262 margin-bottom: 0; 263 } 264 265 label, 266 input[type="email"], 267 input[type="text"], 268 input[type="url"], 269 textarea { 270 display: block; 271 font-size: var(--global--font-size-sm); 272 margin-bottom: calc(.5 * var(--global--spacing-unit)); 273 width: 100%; 274 font-weight: var(--form--label-weight); 275 } 276 277 &.comment-form-cookies-consent { 278 display: flex; 279 } 280 281 @include media(mobile) { 282 283 &.comment-form-author { 284 margin-right: calc(1.5 * var(--global--spacing-horizontal)); 285 } 286 287 &.comment-notes, 288 &.logged-in-as { 289 display: block; 290 } 291 } 292 }