ol.comments-list, ul.children { margin-block-end: 0; margin-inline-start: 0; } .comments .children { border-inline-start: 2px solid color-mix(in srgb, var(--color-primary), transparent 80%); padding-inline-start: var(--space-single); margin-block-start: var(--space-single); } .comments .comments-title { align-items: center; display: flex; gap: var(--space-half); justify-content: space-between; margin-block-end: var(--space-single); } .comments-title .micro-title { margin-block-end: 0; } .comments-add-link { background: color-mix(in srgb, var(--color-primary), transparent 88%); border-radius: var(--radius-full); color: var(--color-primary); flex-shrink: 0; font-size: var(--fs-s); font-weight: 600; padding: 0.4rem 1rem; text-decoration: none; transition: all var(--transition); white-space: nowrap; } .comments-add-link:hover { background: var(--color-primary); color: var(--color-text-light); } .md-tab-content { display: none; } .md-tab-content.active { display: block; } .comments-tabs { background-color: color-mix(in srgb, var(--color-content-bg), var(--color-border) 25%); border-bottom: 1px solid var(--color-border); display: flex; gap: var(--space-xs); justify-content: center; line-height: 1; padding: var(--space-half) var(--space-half) 0; } .comments-tabs .comment-tab { border: 1px solid var(--color-border); border-radius: var(--radius-s) var(--radius-s) 0 0; border-width: 1px 1px 0; color: var(--color-text-sec); cursor: pointer; display: inline-flex; align-items: center; gap: 0.3em; font-weight: var(--font-weight-bold); padding: var(--space-half); transition: color var(--transition), background-color var(--transition); } .comments-tabs .comment-tab:hover { color: var(--color-text); } .comments-tabs .comment-tab.active { background-color: var(--color-content-bg); border-bottom-color: var(--color-content-bg); color: var(--color-text); margin-block-end: -1px; } :where(.comments-list) > .comment { background-color: var(--color-content-bg); border: 1px solid var(--color-border); border-radius: var(--radius-l); padding: var(--space-single); transition: border-color var(--transition); } :where(.comments-list) > .comment:hover { border-color: color-mix(in srgb, var(--color-primary), transparent 60%); } .comment { list-style: none; } .comment:not(:last-child) { margin-block-end: var(--space-single); } .comment-byline { align-items: center; display: flex; gap: var(--space-half); margin-block-end: var(--space-half); } :where(.comment-byline) .byline-author { color: var(--color-text); font-weight: var(--font-weight-bold); } .byline-author-url { display: none; } .comment-byline .byline-avatar { flex-shrink: 0; position: relative; } .comment-byline .byline-avatar img { border-radius: var(--radius-full); display: block; } .comment-byline .byline-avatar-author { background-color: var(--color-primary); border: 2px solid var(--color-content-bg); border-radius: var(--radius-full); color: var(--color-text-light); display: flex; align-items: center; justify-content: center; font-size: 10px; height: 20px; position: absolute; inset-block-end: -2px; inset-inline-end: -4px; width: 20px; } .comment-byline-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4em; min-width: 0; } .comment-meta-sec { display: inline-flex; align-items: center; gap: 0.4em; opacity: 0.4; transition: opacity var(--transition); } .comment:hover .comment-meta-sec, .comment-meta-sec:focus-within { opacity: 1; } .comment-date-link { color: var(--color-text-sec); font-size: 0.8em; text-decoration: none; } .comment-date-link:hover { color: var(--color-links); } .byline-edit { color: var(--color-text-sec); font-size: 0.85em; opacity: 0.6; transition: opacity var(--transition); } .comment:hover .byline-edit { opacity: 1; } .comment-reply { color: var(--color-text-sec); font-size: 0.8em; font-weight: 600; text-decoration: none; transition: color var(--transition); } .comment-reply:hover { color: var(--color-primary); } .comment-respond { background-color: var(--color-content-bg); border: 1px solid var(--color-border); border-radius: var(--radius-l); padding: var(--space-single); } .comment-respond:not(:first-child), .comment-respond + .comments-area { margin-block-start: var(--space-single); } .comment-reply-title { font-size: var(--fs-m); line-height: var(--lh-tight); margin-block-end: var(--space-single); } .comment-form label { display: block; font-size: var(--fs-s); font-weight: 600; margin-block-end: 0.3em; } .comment-form .required { color: var(--color-primary); } .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) { background-color: color-mix(in srgb, var(--color-content-bg), var(--color-border) 15%); border: 1px solid var(--color-border); border-radius: var(--radius-s); padding: 0.6em 0.8em; transition: border-color var(--transition), box-shadow var(--transition); width: 100%; } .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea):focus-visible { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary), transparent 85%); outline: none; } .comment-form p:not(.form-submit) { margin-block-end: var(--space-half); } .comment-form .form-submit { margin-block-end: 0; } #cancel-comment-reply-link { color: var(--color-text-sec); float: right; font-size: 0.8em; transition: color var(--transition); } #cancel-comment-reply-link:hover { color: var(--color-primary); } #cancel-comment-reply-link::before { content: '\e810'; margin-inline-end: var(--space-xs); } .comments .pagination { border-top: 1px solid var(--color-border); margin-block-start: var(--space-single); padding-block-start: var(--space-single); } [data-theme="dark"] :where(.comments-list) > .comment { background-color: color-mix(in srgb, var(--color-content-bg), white 3%); border-color: color-mix(in srgb, var(--color-border), transparent 20%); } [data-theme="dark"] :where(.comments-list) > .comment:hover { border-color: color-mix(in srgb, var(--color-primary), transparent 40%); } [data-theme="dark"] .comments .children { border-inline-start-color: color-mix(in srgb, var(--color-primary), transparent 65%); } [data-theme="dark"] .comments-add-link { background: color-mix(in srgb, var(--color-primary), transparent 82%); } [data-theme="dark"] .comments-tabs { background-color: color-mix(in srgb, var(--color-content-bg), white 4%); border-bottom-color: color-mix(in srgb, var(--color-border), transparent 30%); } [data-theme="dark"] .comment-respond { background-color: color-mix(in srgb, var(--color-content-bg), white 3%); border-color: color-mix(in srgb, var(--color-border), transparent 20%); } [data-theme="dark"] .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) { background-color: color-mix(in srgb, var(--color-content-bg), white 6%); border-color: color-mix(in srgb, var(--color-border), transparent 20%); } @media (max-width: 850px) { .comments-list > .comment { padding: var(--space-half); } .comments .children { padding-inline-start: var(--space-half); } .comment-respond { padding: var(--space-half); } }