$thumbnailWidth: 1.5rem; $thumbnailWidthSmall: 1rem; .comments { list-style-type: none; font-size: var(--font-small); margin-top: var(--spacing-l); } .comments--replies { list-style-type: none; margin-left: var(--spacing-s); flex: 1; } .comment__sort { margin: var(--spacing-s) 0; display: block; @media (min-width: $breakpoint-small) { margin-top: 0; display: inline; } } .comment__create { padding-bottom: var(--spacing-m); font-size: var(--font-small); } .comment__create--reply { margin-top: var(--spacing-m); position: relative; } .comment__create--bottom { padding-bottom: 0; } .comment { width: 100%; display: flex; flex-direction: column; font-size: var(--font-small); margin: 0; &:not(:first-child) { margin-top: var(--spacing-l); } .comment__author-thumbnail { @include handleChannelGif($thumbnailWidthSmall); margin-right: 0; @media (min-width: $breakpoint-small) { @include handleChannelGif($thumbnailWidth); } .channel-staked__wrapper { @media (max-width: $breakpoint-small) { padding: 0; left: 0; bottom: -1rem; padding: -1rem; margin-left: 0; } } .channel-staked__indicator { @media (max-width: $breakpoint-small) { margin-left: 0.1rem; } } } } .comment__thumbnail-wrapper { flex: 0; margin-top: var(--spacing-xxs); } .comment__content { display: flex; flex-direction: row; } .comment__replies-container { margin: 0; } .comment__replies { display: flex; margin-top: var(--spacing-m); margin-left: calc(#{$thumbnailWidthSmall} + var(--spacing-xs)); @media (min-width: $breakpoint-small) { margin-left: calc(#{$thumbnailWidth} + var(--spacing-m)); } } .comment--reply { margin: 0; &:not(:first-child) { margin-top: var(--spacing-m); } } .comment--top-level { &:not(:first-child) { margin-top: var(--spacing-l); } } .comment--livestream { margin-right: 0; } .comment--slimed { opacity: 0.6; } .comment__threadline { @extend .button--alt; height: auto; align-self: stretch; padding: 1px; border-radius: 3px; background-color: var(--color-comment-threadline); &:hover { box-shadow: 0 0 0 1px var(--color-comment-threadline-hover); background-color: var(--color-comment-threadline-hover); border-color: var(--color-comment-threadline-hover); } @media (min-width: $breakpoint-small) { padding: 2px; } } .comment-new__label-wrapper { display: flex; flex-direction: row; justify-content: flex-start; align-items: baseline; flex-wrap: wrap; width: 100%; @media (min-width: $breakpoint-small) { fieldset-section { max-width: 10rem; } } } .comment-new__label { white-space: nowrap; margin-right: var(--spacing-xs); } .comment--highlighted { background: var(--color-comment-highlighted); box-shadow: 0 0 0 5px var(--color-comment-highlighted); border-radius: 4px; } .comment__body_container { flex: 1; margin-left: var(--spacing-xs); @media (min-width: $breakpoint-small) { margin-left: var(--spacing-m); } } .comment__dead { display: flex; align-items: center; .icon { margin-left: var(--spacing-s); } } .comment__meta { display: flex; justify-content: space-between; } .comment__meta-information { justify-content: flex-start; display: flex; height: 100%; } .comment__pin { margin-left: var(--spacing-s); .icon { padding-top: 1px; } } .comment__message { word-break: break-word; max-width: 35rem; ul li, ol li { list-style-position: inside; } p { & + p { margin-top: var(--spacing-xxs); } } } .comment__author { max-width: 10rem; text-overflow: ellipsis; margin-right: var(--spacing-xs); height: 100%; } .comment__time { @extend .button--uri-indicator; opacity: 0.5; white-space: nowrap; height: 100%; margin-left: var(--spacing-xs); &:focus { @include linkFocus; } } .comment__menu { align-self: flex-end; line-height: 1; button { border-radius: var(--border-radius); &:focus { @include linkFocus; } } } .comment__char-count { align-self: flex-end; font-size: var(--font-xsmall); padding-top: var(--spacing-xxs); } .comment__char-count-mde { align-self: flex-end; font-size: var(--font-xsmall); padding-right: var(--spacing-xs); // Align with SimpleMDE's status bar padding-bottom: 0; } .comment__menu-option { display: flex; align-items: center; padding: var(--spacing-s); font-size: var(--font-xsmall); .menu__link { padding: 0; } } .comment__menu-icon--hovering { stroke: var(--color-comment-menu-hovering); } .comment__menu-icon { stroke: var(--color-comment-menu); } .comment__menu-list { box-shadow: var(--card-box-shadow); border-radius: var(--card-radius); padding: var(--spacing-s); } .comment__menu-title { @extend .help; margin-top: 0; padding-left: var(--spacing-xs); padding-right: var(--spacing-xl); padding-bottom: var(--spacing-xs); font-size: var(--font-small); border-bottom: 1px solid var(--color-border); &:not(:last-child) { margin-bottom: var(--spacing-xs); } } .comment__menu-help { @extend .help; margin-top: var(--spacing-xs); padding-left: calc(18px + var(--spacing-s)); max-width: 15rem; white-space: pre-line; } .comment__actions { display: flex; margin-top: var(--spacing-s); > *:not(:last-of-type) { margin-right: var(--spacing-m); } .button__label { margin-left: var(--spacing-xs); } } .comment__actions--nested { @extend .comment__actions; margin-left: calc((#{$thumbnailWidthSmall} + var(--spacing-xs))); margin-top: var(--spacing-m); @media (min-width: $breakpoint-small) { margin-left: calc((#{$thumbnailWidth} + var(--spacing-m))); } } .comment__action { @extend .button--uri-indicator; height: auto; font-size: var(--font-xsmall); } .comment__action--creator-like { &:disabled { opacity: 1; } } .comment__action, .comment__author { &:focus { @include linkFocus; } } .comment__action--active { .icon { fill: var(--color-primary-alt); stroke: var(--color-primary); } } .comment__action--nested { @extend .comment__action; } .comment__action--nested, .comment__create--nested-reply { margin-top: var(--spacing-s); margin-left: calc((#{$thumbnailWidthSmall} + var(--spacing-xs)) * 2 + var(--spacing-m) + 4px); @media (min-width: $breakpoint-small) { margin-left: calc((#{$thumbnailWidth} + var(--spacing-m)) * 2 + var(--spacing-m) + 4px); } } .comment__more-below { margin-top: var(--spacing-l); } .comment__creator-like { height: 0.8rem; width: 0.8rem; margin-left: 3px; z-index: 3; position: absolute; top: 0.4rem; left: 0.4rem; } .comment__menu-active { padding: var(--spacing-xs); padding-bottom: 0; border-top: 1px solid var(--color-border); margin-top: var(--spacing-s); display: flex; align-items: center; .channel-thumbnail { margin-right: var(--spacing-xs); height: 1.8rem; width: 1.8rem; } } .comment__menu-channel { @extend .help; font-size: var(--font-xsmall); margin-top: 0; max-width: 10rem; white-space: pre-line; margin-right: var(--spacing-s); }