.cmt-block { margin-top: 4px; } .cmt-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; } .cmt-title { font-family: var(--brand); font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; } .cmt-count { font-size: 12px; font-weight: 700; color: var(--muted); padding: 1px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); } .cmt-count:empty { display: none; } .cmt-list { display: flex; flex-direction: column; gap: 14px; } .cmt-item { display: flex; gap: 10px; } .cmt-item .prop-avatar { margin-top: 2px; } .cmt-main { flex: 1; min-width: 0; } .cmt-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 3px; } .cmt-author { font-weight: 700; color: var(--ink-2); } .cmt-dot { opacity: .6; } .cmt-time { font-variant-numeric: tabular-nums; } .cmt-edited { font-style: italic; opacity: .8; } .cmt-staff { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--blue-700); background: var(--blue-50); border: 1px solid var(--blue-100); } .cmt-body { font-size: 14px; line-height: 1.55; color: var(--ink-2); word-wrap: break-word; overflow-wrap: anywhere; } .cmt-link { color: var(--blue); text-decoration: none; border-bottom: 1px solid var(--blue-100); } .cmt-link:hover { border-bottom-color: var(--blue); } .cmt-item.is-staff .cmt-body { color: var(--ink); } .cmt-acts { display: flex; align-items: center; gap: 4px; margin-top: 5px; flex-wrap: wrap; } .cmt-act { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); transition: color .15s, background .15s, border-color .15s; } .cmt-act:hover { color: var(--blue); background: var(--blue-50); } .cmt-act svg { width: 13px; height: 13px; } .cmt-del .cmt-del-b { display: none; } .cmt-del:hover { color: var(--red); background: #fff2f1; } .cmt-del.armed { color: #fff; background: var(--red); border-color: transparent; } .cmt-del.armed .cmt-del-a { display: none; } .cmt-del.armed .cmt-del-b { display: inline; } .cmt-replies { margin: 12px 0 0 32px; padding-left: 14px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 14px; } .cmt-empty { font-size: 13.5px; color: var(--muted); padding: 4px 0 2px; } .cmt-fail { font-size: 13px; color: var(--muted); } .cmt-form { margin-top: 14px; } .cmt-form textarea { width: 100%; resize: vertical; min-height: 62px; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.9); font-family: inherit; font-size: 14.5px; line-height: 1.5; color: var(--ink); } .cmt-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); } .cmt-form-foot { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; } .cmt-form-foot .btn { padding: 8px 16px; font-size: 14px; } .cmt-form-foot .cmt-send { margin-left: auto; } .cmt-anon { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; } .cmt-err { font-size: 12.5px; color: var(--red); min-width: 0; } .cmt-form-reply { margin-top: 10px; } .cmt-edit { margin-top: 10px; } .cmt-edit textarea { width: 100%; resize: vertical; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.9); font-family: inherit; font-size: 14.5px; line-height: 1.5; color: var(--ink); } .cmt-edit textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); } .cmt-edit .cmt-edit-save { margin-left: auto; } .pm-comments:not(:empty) { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .doc-comments:not(:empty) { margin-top: 32px; padding: 20px; border-radius: var(--radius); background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.6); box-shadow: var(--shadow); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } .prop-cmt { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); } .prop-cmt[hidden] { display: none; } .prop-cmt svg { width: 15px; height: 15px; } @media (max-width: 560px) { .cmt-form textarea, .cmt-edit textarea { font-size: 16px; } .cmt-replies { margin-left: 14px; } .cmt-form-foot .cmt-send, .cmt-edit .cmt-edit-save { width: 100%; margin-left: 0; } } .pm-modal { width: min(560px, 96vw); } .cmt-report:hover { color: var(--amber); background: #fff6e8; } .cmt-report .cmt-rep-b { display: none; } .cmt-report.armed { color: #fff; background: var(--amber); } .cmt-report.armed .cmt-rep-a { display: none; } .cmt-report.armed .cmt-rep-b { display: inline; } .cmt-reported { color: var(--muted); cursor: default; } .cmt-mod { color: var(--blue-700); } .cmt-mod:hover { background: var(--blue-50); } .cmt-ban:hover { color: var(--red); background: #fff2f1; } .cmt-ban .cmt-blk-b { display: none; } .cmt-ban.armed { color: #fff; background: var(--red); } .cmt-ban.armed .cmt-blk-a { display: none; } .cmt-ban.armed .cmt-blk-b { display: inline; } .cmt-item.is-hidden { opacity: .68; } .cmt-item.is-hidden .cmt-body { border-left: 2px dashed var(--line-2); padding-left: 10px; } .cmt-hidden-mark { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2); }