From 040c32a6d68eb0db5ff717a026754efd656a8629 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 16 Aug 2026 18:36:56 +0000 Subject: [PATCH] =?UTF-8?q?Blocs=20de=20code=20:=20un=20fond=20qui=20se=20?= =?UTF-8?q?d=C3=A9tache=20de=20la=20carte=20de=20r=C3=A9ponse?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Depuis que la réponse de l'IA est une carte, le bloc de code avait exactement son ton (#F4F6F5 dans une bulle #F6F8F7) : l'encadré disparaissait dans la bulle, et un long prompt collé dans une réponse ne se distinguait plus du texte qui l'entoure. --code-bg est désormais nettement plus soutenu que --bubble, dans les deux variantes, avec un filet net. Le code EN LIGNE suit la même règle. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01LPyFxVHNAN9u5pVzSYMwjd --- internal/loki/ui/index.html | 14 ++++++++++++-- internal/loki/ui/src/styles.css | 14 ++++++++++++-- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/internal/loki/ui/index.html b/internal/loki/ui/index.html index 3a924b9..44d3fcf 100644 --- a/internal/loki/ui/index.html +++ b/internal/loki/ui/index.html @@ -50,6 +50,8 @@ document.documentElement.setAttribute('data-perf',localStorage.getItem('loki-per Rôles : --accent = sauge (sélection, marche, liens, bulle utilisateur) · --warn = ambre (chiffres, mesures, avertissements) · --err = rouille (arrêt, danger). --row-bg / --code-bg sont les deux fonds encastrés d'un panneau. + --code-bg est nettement plus soutenu que --bubble : un bloc de code posé DANS + la carte de réponse doit se lire comme un encadré, pas se fondre dedans. --on-accent : ce qui s'écrit SUR un aplat de sauge. Il change avec la variante — blanc sur la sauge foncée du thème clair, ardoise sur la sauge @@ -64,7 +66,7 @@ document.documentElement.setAttribute('data-perf',localStorage.getItem('loki-per --accent-soft:#8fab8b; --side:#fafbfa;--row-bg:#f5f7f6;--row-bg-on:#eef2f0; --ok:#5e7f5a;--warn:#a86a2a;--err:#c0503f;--mag:#a86a2a; - --code-bg:#f4f6f5;--danger-bg:#faeae7;--warn-bg:#f7f0e5; + --code-bg:#e7ecea;--danger-bg:#faeae7;--warn-bg:#f7f0e5; --add:#5e7f5a;--add-bg:rgba(94,127,90,.11);--del:#c0503f;--del-bg:rgba(192,80,63,.12); --shadow:0 1px 2px rgba(15,23,42,.05);--shadow-lift:0 4px 16px rgba(15,23,42,.08); --shadow-card:0 2px 10px rgba(15,23,42,.07),0 1px 3px rgba(15,23,42,.05)} @@ -76,7 +78,7 @@ document.documentElement.setAttribute('data-perf',localStorage.getItem('loki-per --accent-soft:#6d8f6a; --side:#0d1424;--row-bg:#172033;--row-bg-on:#243349; --ok:#8fb08c;--warn:#d9a55f;--err:#e0705c;--mag:#d9a55f; - --code-bg:#131c2f;--danger-bg:#3a1f1c;--warn-bg:#33291b; + --code-bg:#0e1626;--danger-bg:#3a1f1c;--warn-bg:#33291b; --add:#8fb08c;--add-bg:rgba(143,176,140,.16);--del:#e0705c;--del-bg:rgba(224,112,92,.16); --shadow:none;--shadow-lift:0 4px 16px rgba(0,0,0,.35); --shadow-card:0 2px 12px rgba(0,0,0,.30),0 1px 3px rgba(0,0,0,.22)} @@ -1709,6 +1711,14 @@ html[data-files="1"] #files-btn{color:var(--accent)} /* Marque et attribution du fork empilées, pastille d'état à leur droite. */ .sidebrand{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px} .sidebrand .brand-fork{margin:0;font-size:10px;line-height:1.3} +/* Blocs de code du fil : encadré franc dans la carte de réponse — fond plus + soutenu, filet net et coins alignés sur ceux de la carte. Le bouton « copier » + reprend le fond du bloc pour ne pas flotter sur le texte. */ +#chat .msg.assistant .body pre,#chat .msg.reasoning .body pre,#chat .msg.tool pre{ + background:var(--code-bg);border:1px solid color-mix(in srgb,var(--text) 10%,transparent)} +#chat .msg.assistant .body code{background:var(--code-bg); + border:1px solid color-mix(in srgb,var(--text) 7%,transparent);border-radius:5px} +#chat .msg.assistant .body pre code{border:0;background:transparent}