blog/2025
1
Fork 0
Code Issues Activity

Stylisation des conversations

Browse Source
This commit is contained in:
Richard Dern
2026-04-04 23:44:21 +02:00
parent 7b288f6bc2
commit 7592c9cace
2 changed files with 181 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
themes/2026/assets/css/content.css
View File

@@ -1136,6 +1136,166 @@ main > article figure:not(.figure-media) figcaption p {
font-size: 1.02rem; 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 { aside section > p:first-of-type {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -1442,6 +1602,19 @@ body:has(> header.article-header) > main > aside.article-toc nav[aria-label="Som
} }
@media (max-width: 800px) { @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 { main > article > section.article-books > div > section > article {
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
} }

8
themes/2026/assets/css/variables.css
View File

@@ -55,6 +55,14 @@
--color-border-strong-alpha-62: rgba(59, 83, 109, 0.62); --color-border-strong-alpha-62: rgba(59, 83, 109, 0.62);
--color-border-strong-alpha-72: rgba(59, 83, 109, 0.72); --color-border-strong-alpha-72: rgba(59, 83, 109, 0.72);
--color-content-soft-background: rgba(17, 27, 42, 0.82); --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-body: "Source Sans 3", "Noto Sans", "DejaVu Sans", sans-serif;
--font-heading: "Avenir Next Condensed", "Franklin Gothic Medium", "Arial Narrow", sans-serif; --font-heading: "Avenir Next Condensed", "Franklin Gothic Medium", "Arial Narrow", sans-serif;