diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index 2b60bd551b..9fdf4dd209 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -1923,7 +1923,10 @@ body > [data-popper-placement] { } .status__quote { - --quote-margin: 36px; + // --status-gutter-width is currently only set inside of + // .notification-ungrouped, so everywhere else this will fall back + // to the pixel values + --quote-margin: var(--status-gutter-width, 36px); position: relative; margin-block-start: 16px; @@ -1934,7 +1937,7 @@ body > [data-popper-placement] { border: var(--nested-card-border); @container (width > 460px) { - --quote-margin: 56px; + --quote-margin: var(--status-gutter-width, 56px); } } @@ -11131,21 +11134,23 @@ noscript { } } - .status { + .status:not(.status--is-quote) { border: 0; padding: 0; - - &__avatar { - width: 40px; - height: 40px; - } } .status__wrapper-direct { background: transparent; } - $icon-margin: 48px; // 40px avatar + 8px gap + .status { + // 40px avatar + 8px gap + --status-gutter-width: 48px; + } + + .status--is-quote { + --status-gutter-width: 0; + } .status__content, .status__action-bar, @@ -11159,16 +11164,16 @@ noscript { .hashtag-bar, .content-warning, .filter-warning { - margin-inline-start: $icon-margin; - width: calc(100% - $icon-margin); + margin-inline-start: var(--status-gutter-width); + width: calc(100% - var(--status-gutter-width)); } .more-from-author { - width: calc(100% - $icon-margin + 2px); + width: calc(100% - var(--status-gutter-width) + 2px); } .status__content__read-more-button { - margin-inline-start: $icon-margin; + margin-inline-start: var(--status-gutter-width); } .notification__report {