summaryrefslogtreecommitdiff
path: root/ui/styles/messages.css
Commit message (Collapse)AuthorAge
* Show number of unread conversations in app badgenotifs-controlsKit La Touche2025-11-30
|
* Remove code block borders.Owen Jacobson2025-05-08
| | | | This styling suggestion c/o Jessamyn Smith! Thanks, Jess. I like it.
* Make rules targeting inline code more specific.Owen Jacobson2025-05-08
| | | | This prevents the need to go and un-apply unwanted styles when considering code blocks.
* Prevent double-indenting of the first line of a code block.Owen Jacobson2025-05-08
| | | | | | | | | | | | For reasons known only to the author, marked emits code blocks as <pre><code>your code here</code></pre> Inline code, on the other hand, is emitted as <p>Non-code text <code>code text</code> non-code text.</p> In d15bfb2b9a4872cba99bc966fe5c9c4399b3323c, we added a rule to give inline code nicer leading and trailing space, so that the borders don't directly abut the letters. However, we neglected to consider code blocks; the padding added for inline code also affected their first line, pushing it in slightly. This removes the padding from `<code>` when it is a direct child of a `<pre>`, as per the markup emitted by marked.
* Stlye headings, as well.Owen Jacobson2025-05-08
| | | | | | This is a fairly simple approach using a linearly-reducing scale (from 2.25 down to 1.0) to adjust both the font size and the line height. All headings are bold, and are in the body typeface. People who actually use headings in _chat messages_ are doing a bit, but hey, bits are valid.
* Fix horizontal padding on inline codeKit La Touche2025-05-08
|
* Apply rounded borders to inline code inside list elements.Owen Jacobson2025-05-08
| | | | There isn't a good way to target "any <code> not inside a <pre>" so we do a little reverse logic here, as a treat.
* Provide conventional text styling for message bodies.Owen Jacobson2025-05-08
| | | | | | | | | | | | | | | | | | 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.
* Merge branch 'prop/outbox-message-ui'Owen Jacobson2025-05-08
|\
| * Render messages as ghosts when there's a pending delete, too.Owen Jacobson2025-05-06
| |
| * Render "ghost" messages for unsent messages.Owen Jacobson2025-05-06
| | | | | | | | | | | | | | | | | | | | | | There is a subtle race conditon in this code, which is likely not fixable without a protocol change: * Ghost messages can disappear before their "real" message replacement shows up, if the client finishes sending (i.e., receives an HTTP response on the POST) before the server delivers the real message. * Ghost messages can be duplicated briefly, if the client receives the real message before the client finishes sending. Both happen in practice; we make no ordering guarantees between requests. To aviod this, we'd to give clients a way to correlate pending sends with received messages. This would require fundamentally the same capabilities, like per-operation nonces, that preventing duplicate operations will require.
| * Use a more targetted selector to control link text colours inside of messages.Owen Jacobson2025-05-06
| | | | | | | | Using a wildcard selector here makes this rule surprisingly hard to override, which will be a problem for styling unsent messages.
* | Split up link colours and use fewer wildcard patterns to re-style them.Owen Jacobson2025-05-06
|/ | | | | | This was causing problems with message colouring, as these rules had specificity similar to constructs like `.message.deleted`. This approach removes their browser default styles, then adds styling specific to the channel sidebar, the app bar, and the message view.
* Provide fallback generic fonts for our custom fontsOwen Jacobson2025-02-21
|
* Remove nonexistent CSS variableOwen Jacobson2025-02-21
|
* npm formatOwen Jacobson2025-02-15
|
* Make mobile UI look a little betterKit La Touche2025-01-17
| | | | The rounded corners on an iPhone shouldn't be cut off now.
* Merge branch 'main' into wip/fontsKit La Touche2025-01-13
|\
| * Use margins, rather than alternating float/non-float elements, to lay out ↵Owen Jacobson2025-01-11
| | | | | | | | own/other messages.
| * Reinstate delete-armed message colouringOwen Jacobson2025-01-09
| |
* | Add initial fontsKit La Touche2025-01-13
|/ | | | | We're not using Overlock currently, but I think it'll be good on headers and stuff?
* Fix message handle positionKit La Touche2025-01-06
|
* Stylize channel badgesKit La Touche2025-01-05
|
* Stylize more betterKit La Touche2025-01-05
|
* Set a sample colourKit La Touche2025-01-04
|
* Do a lot of stylingKit La Touche2025-01-04
|
* Variablize more coloursKit La Touche2025-01-04
|
* Add username class to username spanKit La Touche2025-01-04
|
* Update colour variablesKit La Touche2025-01-04
|
* Just oh so many stylesKit La Touche2025-01-01