From 02c8c1e91026a58e7999356bf3348aca15f627e2 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Wed, 7 May 2025 23:37:41 -0400 Subject: Provide conventional text styling for message bodies. Our reset strips out a ton of default browser styles, which is good, but we haven't yet gotten around to adding styles we're using. This left formatted messages feeling a lot like this regardless of the intended formatting. (Is the above an example of a paragraph? A list? A single line that has gotten wrapped? The answer was "yes.") To make the margins and padding work out nicely, I've rearranged the positioning containers used for message runs and messages. We also no longer `float` the message handles, since we no longer need to: they can be positioned relative to the message they're part of. Styling on long bodies of inline code (`like this`) is a bit shaky. The outline overlaps with the following line. I think having a visual cue for where the code block begins and ends is _good_, but I'd like to pick apart some of the other examples on the internet because I think this needs more work. This change also makes code blocks wrap lines at the page edge where possible (it'll still scroll if wrapping isn't possible). This won't affect _most_ code blocks much - code tends to not be that wide - and it means that using a code block for effect doesn't require people to manually wrap strings. Having tried it both ways, this feels more human. Dumbnailing is not a _great_ solution to dealing with huge images, but it's the best we can do at rendering time. A more complete solution would require generating images at multiple sizes. --- ui/styles/messages.css | 100 +++++++++++++++++++++++++++++++++++------------- ui/styles/variables.css | 3 ++ 2 files changed, 76 insertions(+), 27 deletions(-) diff --git a/ui/styles/messages.css b/ui/styles/messages.css index ee946c5..61415e3 100644 --- a/ui/styles/messages.css +++ b/ui/styles/messages.css @@ -1,7 +1,5 @@ .message-run { - position: relative; border-radius: 0.25rem; - padding: 0 0 0.5rem 0; margin-top: 1rem; margin-bottom: 1rem; box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5); @@ -32,31 +30,15 @@ border-right: 1px solid var(--colour-message-run-username-border); } -.message { - padding: 0.5rem 0 0 0.5rem; - position: relative; -} - -.message a, -.message a:visited { - color: var(--colour-message-run-link-text); -} - -.message a:hover, -.message a:active { - text-decoration: underline; -} - -.message.unsent, -.message.deleted { - color: var(--colour-message-run-unsent-text); -} - .message.delete-armed, .message.delete-armed:hover { background-color: var(--colour-warn); } +.message { + position: relative; +} + .message:hover { background-color: var(--colour-message-hover-bg); color: var(--colour-message-hover-text); @@ -64,12 +46,11 @@ .message .handle { --text-size: 0.75rem; - float: right; line-height: var(--text-size); font-size: var(--text-size); + position: absolute; top: -0.75rem; right: 0.5rem; - position: absolute; padding: 0.25rem; border-radius: 0.25rem; display: none; @@ -79,7 +60,7 @@ } .message:hover .handle { - display: flex; + display: inline-block; } .message .handle button { @@ -90,8 +71,9 @@ } .message-body { - overflow: auto; max-width: 80vw; + padding: 0 0.5rem; + line-height: 1.2rem; @media (width > 640px) { /* 21rem is width of the nav bar in full-screen mode. */ @@ -99,27 +81,91 @@ } } +.message.unsent, +.message.deleted, +.message.unsent :link, +.message.deleted :link { + color: var(--colour-message-run-unsent-text); +} + .message-body:empty:after { content: '.'; visibility: hidden; } +.message-body p, +.message-body ul, +.message-body ol, +.message-body pre { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +.message-body ul { + list-style-type: disc; + list-style-position: outside; +} + +.message-body ol { + list-style-type: decimal; + list-style-position: outside; +} + +.message-body ul > li, +.message-body ol > li { + margin-left: 2rem; +} + +.message-body ul > li li, +.message-body ol > li li { + margin-left: 1rem; +} + +.message-body img { + /* dumbnail images that are bigger than the viewport */ + max-width: 100%; +} + +.message-body :link, +.message-body :link:visited { + color: var(--colour-message-run-link-text); +} + +.message-body :link:hover, +.message-body :link:active { + text-decoration: underline; +} + +.message-body p > code { + white-space: pre-wrap; + border: 1px solid #312e81; + border-radius: 0.25rem; +} + /* For rendered message bodies: */ .message-body blockquote { margin-left: 0.25rem; padding-left: 0.5rem; border-left: 2px solid grey; border-radius: 0.125rem; - color: grey; + color: var(--colour-message-run-blockquote-text); } .message-body pre { border: 1px solid #312e81; border-radius: 0.25rem; padding: 0.25rem; + overflow: auto; + text-wrap: wrap; } .message-body code, .message-body pre { font-family: 'FiraCode', monospace; + /* + * This puts the x-height at about the same x-height as Roboto, our body font. Determined + * experimentally and _very_ haphazardly. + */ + font-size: 0.95rem; + background-color: var(--colour-message-run-code-bg); } diff --git a/ui/styles/variables.css b/ui/styles/variables.css index ea0e9f5..2758aa1 100644 --- a/ui/styles/variables.css +++ b/ui/styles/variables.css @@ -18,6 +18,7 @@ /* Light text is a bit hard to read; I may need to adjust it. */ --light-text: color-mix(in srgb, var(--colour-base) 40%, white); --dark-text: color-mix(in srgb, var(--colour-base) 40%, black); + --mid-text: color-mix(in srgb, var(--dark-text) 75%, var(--light-text)); --link-text: color-mix(in srgb, var(--colour-base) 40%, blue); /* Header */ @@ -59,6 +60,8 @@ --colour-message-run-other-text: var(--dark-text); --colour-message-run-link-text: var(--link-text); --colour-message-run-unsent-text: var(--light-text); + --colour-message-run-blockquote-text: var(--mid-text); + --colour-message-run-code-bg: color-mix(in srgb, var(--colour-base) 40%, white); --colour-message-run-username-bg: color-mix(in srgb, var(--colour-base) 70%, white); --colour-message-run-username-border: color-mix(in srgb, var(--colour-base) 50%, black); -- cgit v1.2.3