From 7592c9cacecb5a5aa5faadb78b0355d878988f11 Mon Sep 17 00:00:00 2001 From: Richard Dern Date: Sat, 4 Apr 2026 23:44:21 +0200 Subject: [PATCH] Stylisation des conversations --- themes/2026/assets/css/content.css | 173 +++++++++++++++++++++++++++ themes/2026/assets/css/variables.css | 8 ++ 2 files changed, 181 insertions(+) diff --git a/themes/2026/assets/css/content.css b/themes/2026/assets/css/content.css index 5e8b0413..444ac9f9 100644 --- a/themes/2026/assets/css/content.css +++ b/themes/2026/assets/css/content.css @@ -1136,6 +1136,166 @@ main > article figure:not(.figure-media) figcaption p { font-size: 1.02rem; } +main > article > figure.chat-message { + --chat-bubble-max-width: min(100%, 74ch); + margin-top: var(--space-1); + margin-bottom: var(--space-1); + display: flex; + width: 100%; + max-width: 100%; + padding-top: 0; +} + +main > article > figure.chat-message + figure.chat-message { + margin-top: var(--space-3); +} + +main > article > :is(h2, h3, h4, h5, h6, p, ul, ol, details, table, dl, pre, blockquote) + figure.chat-message { + margin-top: var(--space-4); +} + +main > article > figure.chat-message + :is(h2, h3, h4, h5, h6, p, ul, ol, details, table, dl, pre, blockquote) { + margin-top: var(--space-4); +} + +main > article > figure.chat-message.me { + justify-content: flex-end; + margin-left: auto; + margin-right: 0; + color: var(--color-chat-me-text); +} + +main > article > figure.chat-message.other { + justify-content: flex-start; + margin-left: 0; + margin-right: auto; + color: var(--color-chat-other-text); +} + +main > article > figure.chat-message > blockquote { + margin: 0; + border: 0; + padding: var(--space-3) var(--space-4); + display: flex; + flex-direction: column; + gap: var(--space-2); + width: fit-content; + max-width: var(--chat-bubble-max-width); + color: inherit; + line-height: inherit; + overflow-wrap: anywhere; +} + +main > article > figure.chat-message.me > blockquote { + background: var(--color-chat-me-background); + border: 1px solid var(--color-chat-me-border); + border-radius: 1.45rem 1.45rem 0.45rem 1.45rem; +} + +main > article > figure.chat-message.other > blockquote { + background: var(--color-chat-other-background); + border: 1px solid var(--color-chat-other-border); + border-radius: 1.45rem 1.45rem 1.45rem 0.45rem; +} + +main > article > figure.chat-message > blockquote > :is(p, ul, ol, figure, pre, details, table, footer) { + margin-top: 0; +} + +main > article > figure.chat-message > blockquote > footer { + display: flex; + align-items: baseline; + font-size: 0.98rem; +} + +main > article > figure.chat-message.me > blockquote > footer { + justify-content: flex-end; +} + +main > article > figure.chat-message.other > blockquote > footer { + justify-content: flex-start; +} + +main > article > figure.chat-message > blockquote > footer cite { + font-style: normal; + font-weight: 600; + letter-spacing: 0.02em; +} + +main > article > figure.chat-message.me > blockquote > footer cite { + color: var(--color-chat-author-me); +} + +main > article > figure.chat-message.other > blockquote > footer cite { + color: var(--color-chat-author-other); +} + +main > article > figure.chat-message.me a { + color: inherit; +} + +main > article > figure.chat-message.me a:is(:hover, :focus-visible) { + color: #ffffff; +} + +body:has(> header.article-header) > main > article > figure.chat-message :is(strong, b) { + font-weight: 700; + color: inherit; + text-shadow: none; + background-image: none; + padding: 0; +} + +main > article > figure.chat-message + figure.figure-media, +main > article > figure.figure-media:has(+ figure.chat-message) { + --figure-media-column: 1; + --figure-meta-column: 1; + --figure-media-justify: center; + width: min(calc(100vw - (2 * var(--page-gutter))), 48rem); + max-width: min(calc(100vw - (2 * var(--page-gutter))), 48rem); + margin-top: var(--space-2); + margin-bottom: var(--space-2); + margin-inline: auto; + grid-template-columns: minmax(0, 1fr); + gap: var(--space-2); +} + +main > article > figure.chat-message + figure.figure-media > :is(video, img, a), +main > article > figure.figure-media:has(+ figure.chat-message) > :is(video, img, a), +main > article > figure.chat-message + figure.figure-media > figcaption.figure-media-meta, +main > article > figure.figure-media:has(+ figure.chat-message) > figcaption.figure-media-meta { + grid-column: 1; + grid-row: auto; +} + +main > article > figure.chat-message + figure.figure-media > :is(video, img, a), +main > article > figure.figure-media:has(+ figure.chat-message) > :is(video, img, a) { + justify-self: center; +} + +main > article > figure.chat-message + figure.figure-media > figcaption.figure-media-meta, +main > article > figure.figure-media:has(+ figure.chat-message) > figcaption.figure-media-meta { + min-height: 0; + text-align: left; + border-left: 0; + border-right: 0; + padding-left: 0; + padding-right: 0; +} + +body:has(> header.article-header) > main > article > figure.chat-message, +body:has(> header.article-header) > main > article > figure.chat-message + figure.figure-media, +body:has(> header.article-header) > main > article > figure.figure-media:has(+ figure.chat-message) { + margin-inline: 0; + margin-left: 50%; + transform: translateX(-50%); +} + +body:has(> header.article-header) > main > article > figure.chat-message { + width: min(calc(100vw - (2 * var(--page-gutter))), var(--max-width)); + max-width: min(calc(100vw - (2 * var(--page-gutter))), var(--max-width)); +} + aside section > p:first-of-type { display: flex; flex-wrap: wrap; @@ -1442,6 +1602,19 @@ body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Som } @media (max-width: 800px) { + main > article > figure.chat-message { + --chat-bubble-max-width: calc(100% - 1.4rem); + } + + main > article > figure.chat-message > blockquote { + padding: var(--space-3); + } + + main > article > figure.chat-message + figure.figure-media, + main > article > figure.figure-media:has(+ figure.chat-message) { + width: min(100%, calc(100% - 1rem)); + } + main > article > section.article-books > div > section > article { grid-template-columns: minmax(0, 1fr); } diff --git a/themes/2026/assets/css/variables.css b/themes/2026/assets/css/variables.css index 4c548bc4..57fa641a 100644 --- a/themes/2026/assets/css/variables.css +++ b/themes/2026/assets/css/variables.css @@ -55,6 +55,14 @@ --color-border-strong-alpha-62: rgba(59, 83, 109, 0.62); --color-border-strong-alpha-72: rgba(59, 83, 109, 0.72); --color-content-soft-background: rgba(17, 27, 42, 0.82); + --color-chat-me-background: #0a84ff; + --color-chat-me-border: #64b2ff; + --color-chat-me-text: #f8fbff; + --color-chat-other-background: #2b3442; + --color-chat-other-border: #4a5d74; + --color-chat-other-text: #f2f7fc; + --color-chat-author-me: #dbeeff; + --color-chat-author-other: #c3d1df; --font-body: "Source Sans 3", "Noto Sans", "DejaVu Sans", sans-serif; --font-heading: "Avenir Next Condensed", "Franklin Gothic Medium", "Arial Narrow", sans-serif;