diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index ddcce1218..25393f88a 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -450,20 +450,141 @@ word-break: normal; word-wrap: break-word; - p { + .emojione { + width: 20px; + height: 20px; + margin: -3px 0 0; + } + + .hoverplay:hover { padding-left: 20px } + + p, pre, blockquote { margin-bottom: 20px; + white-space: pre-wrap; &:last-child { margin-bottom: 0; } } + h1, h2, h3, h4, h5, h6 { + margin-top: 20px; + margin-bottom: 20px; + } + + h1, h2 { + font-weight: 700; + font-size: 18px; + } + + h2 { + font-size: 16px; + } + + h3, h4, h5, h6 { + font-weight: 500; + } + + blockquote { + padding-left: 10px; + border-left: 3px solid $darker-text-color; + color: $darker-text-color; + white-space: normal; + font-style: italic; + + p:last-child { + margin-bottom: 20px; + } + } + + b, strong { + font-weight: 700; + } + + em, i { + font-style: italic; + } + + sub { + font-size: smaller; + text-align: sub; + } + + sup { + vertical-align: super; + font-size: smaller; + } + + ul, ol { + margin-left: 1em; + + p { + margin: 0; + } + + li:last-child { + margin-bottom: 20px; + } + } + + ul { + list-style-type: disc; + } + + ol { + list-style-type: decimal; + } + + s, del { + text-decoration: line-through; + } + + hr { + border-color: lighten($dark-text-color, 10%); + } + + pre, code { + color: lighten($dark-text-color, 33%); + } + + mark { + background-color: #ccff15; + color: black; + } + a { - color: inherit; - text-decoration: underline; + background-color: lighten($ui-base-color, 7%); + color: darken($secondary-text-color, 10%); + text-decoration: none; + padding: 2px; + border: 1px solid lighten($ui-base-color, 20%); + border-radius: 8px; &:hover { - text-decoration: none; + border: 1px solid darken($secondary-text-color, 20%); + color: lighten($dark-text-color, 10%); + } + + &.mention { + &:hover { + text-decoration: none; + + span { + text-decoration: underline; + } + } + } + + .fa { + color: $dark-text-color; + } + } + + p { + margin-bottom: 20px; + + &:last-child { + margin-bottom: 0; } } } diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss index 1b9fbc905..59bafbb6a 100644 --- a/app/javascript/flavours/glitch/styles/components/status.scss +++ b/app/javascript/flavours/glitch/styles/components/status.scss @@ -58,6 +58,7 @@ border-left: 3px solid $darker-text-color; color: $darker-text-color; white-space: normal; + font-style: italic; p:last-child { margin-bottom: 20px; @@ -77,6 +78,11 @@ text-align: sub; } + sup { + vertical-align: super; + font-size: smaller; + } + ul, ol { margin-left: 1em; @@ -96,18 +102,43 @@ ol { list-style-type: decimal; } + + s, del { + text-decoration: line-through; + } + + hr { + border-color: lighten($dark-text-color, 10%); + } + + pre, code { + color: lighten($dark-text-color, 33%); + } + + mark { + background-color: #ccff15; + color: black; + } + + p.signature { + color: lighten($dark-text-color, 20%); + font-style: italic; + font-size: 12px; + text-align: right; + } } a { - color: $secondary-text-color; + background-color: lighten($ui-base-color, 7%); + color: darken($secondary-text-color, 10%); text-decoration: none; + padding: 2px; + border: 1px solid lighten($ui-base-color, 20%); + border-radius: 8px; &:hover { - text-decoration: underline; - - .fa { - color: lighten($dark-text-color, 7%); - } + border: 1px solid darken($secondary-text-color, 20%); + color: lighten($dark-text-color, 10%); } &.mention { @@ -331,7 +362,7 @@ background: linear-gradient(rgba($ui-base-color, 0), rgba($ui-base-color, 1)); pointer-events: none; } - + a:hover { text-decoration: none; } diff --git a/app/javascript/flavours/glitch/styles/monsterpit.scss b/app/javascript/flavours/glitch/styles/monsterpit.scss index f4e2632ba..649ae1e20 100644 --- a/app/javascript/flavours/glitch/styles/monsterpit.scss +++ b/app/javascript/flavours/glitch/styles/monsterpit.scss @@ -1,42 +1,6 @@ .status__content__text, -.reply-indicator__content, -.composer--reply > .content, -.account__header__content, .e-content { - s { text-decoration: line-through; } - del { text-decoration: line-through; } - h6 { font-size: 8px; font-weight: bold; } - hr { border-color: lighten($dark-text-color, 10%); } - sub { - vertical-align: sub; - font-size: smaller; - } - sup { - vertical-align: super; - font-size: smaller; - } - pre, code { - color: lighten($dark-text-color, 33%); - } - mark { - background-color: #ccff15; - color: black; - } - blockquote { - font-style: italic; - } - .caption { - display: block; - margin: auto; - font-size: 12px !important; - padding-top: 0; - text-align: center; - max-width: 80%; - } - .caption-hidden { - display: none; - } p.signature { color: lighten($dark-text-color, 20%); font-style: italic; @@ -51,31 +15,32 @@ div.media-caption { margin-bottom: 0; text-align: center; } + a { - color: $secondary-text-color; - text-decoration: none; - font-weight: bold; + background-color: lighten($ui-base-color, 7%); + color: darken($secondary-text-color, 10%); + text-decoration: none; + padding: 2px; + border: 1px solid lighten($ui-base-color, 20%); + border-radius: 8px; - &:hover { - text-decoration: underline; + &:hover { + border: 1px solid darken($secondary-text-color, 20%); + color: lighten($dark-text-color, 10%); + } - .fa { - color: lighten($dark-text-color, 7%); - } - } + &.mention { + &:hover { + text-decoration: none; - &.mention { - &:hover { - text-decoration: none; + span { + text-decoration: underline; + } + } + } - span { - text-decoration: underline; - } - } - } - - .fa { - color: $dark-text-color; - } - } + .fa { + color: $dark-text-color; + } + } } diff --git a/app/lib/formatter.rb b/app/lib/formatter.rb index ccaf71e7b..64afc843c 100644 --- a/app/lib/formatter.rb +++ b/app/lib/formatter.rb @@ -251,7 +251,9 @@ class Formatter end def simplified_format(account, **options) - html = account.local? ? linkify(account.note) : reformat(account.note) + return reformat(account.note) unless account.local? + html = format_bbdown(account.note) + html = encode_and_link_urls(html, keep_html: true) html = encode_custom_emojis(html, account.emojis, options[:autoplay]) if options[:custom_emojify] html.html_safe # rubocop:disable Rails/OutputSafety end