diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss index af23aca901..71ce47eb5b 100644 --- a/app/javascript/flavours/glitch/styles/components.scss +++ b/app/javascript/flavours/glitch/styles/components.scss @@ -794,6 +794,7 @@ body > [data-popper-placement] { } } +.quote-indicator, .reply-indicator { border-radius: 4px; margin-bottom: 10px; @@ -804,16 +805,19 @@ body > [data-popper-placement] { flex: 0 2 auto; } +.quote-indicator__header, .reply-indicator__header { margin-bottom: 5px; overflow: hidden; } +.quote-indicator__cancel, .reply-indicator__cancel { float: right; line-height: 24px; } +.quote-indicator__display-name, .reply-indicator__display-name { color: $inverted-text-color; display: block; @@ -828,6 +832,7 @@ body > [data-popper-placement] { } } +.quote-indicator__display-avatar, .reply-indicator__display-avatar { float: left; margin-inline-end: 5px; @@ -841,6 +846,7 @@ body > [data-popper-placement] { clear: both; } +.quote-indicator__content, .reply-indicator__content { position: relative; font-size: 14px; @@ -853,7 +859,8 @@ body > [data-popper-placement] { white-space: pre-wrap; p, - pre { + pre, + blockquote { margin-bottom: 20px; white-space: pre-wrap; @@ -1001,6 +1008,7 @@ body > [data-popper-placement] { } .focusable { + &:hover, &:focus { outline: 0; background: lighten($ui-base-color, 4%); @@ -1447,6 +1455,7 @@ a .account__avatar { } a.status__display-name, +.quote-indicator__display-name, .reply-indicator__display-name, .detailed-status__display-name, .account__display-name { diff --git a/app/javascript/flavours/glitch/styles/rich_text.scss b/app/javascript/flavours/glitch/styles/rich_text.scss index 6224302ee3..a5b56d384c 100644 --- a/app/javascript/flavours/glitch/styles/rich_text.scss +++ b/app/javascript/flavours/glitch/styles/rich_text.scss @@ -1,5 +1,6 @@ .status__content__text, .e-content, +.quote-indicator__content, .reply-indicator__content { pre, blockquote { @@ -91,6 +92,7 @@ } } +.quote-indicator__content, .reply-indicator__content { blockquote { border-inline-start-color: $inverted-text-color;