From a92a3cf0e350007bb45dec1a35bfb06386572a60 Mon Sep 17 00:00:00 2001 From: Christian Boos Date: Sun, 1 Feb 2026 20:43:17 +0100 Subject: [PATCH 1/3] Fix fold-bar colors to match message type borders The fold-bar background now uses semantic color variables (--assistant-dimmed, --user-dimmed, etc.) instead of hardcoded gray, creating visual consistency with the left border colors of each message type. Co-Authored-By: Claude Opus 4.5 --- claude_code_log/html/templates/components/message_styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/claude_code_log/html/templates/components/message_styles.css b/claude_code_log/html/templates/components/message_styles.css index 918c450..32e6097 100644 --- a/claude_code_log/html/templates/components/message_styles.css +++ b/claude_code_log/html/templates/components/message_styles.css @@ -102,7 +102,7 @@ .fold-bar[data-border-color="assistant"] .fold-bar-section.folded, .fold-bar[data-border-color="assistant sidechain"] .fold-bar-section.folded { - border-bottom-color: var(--assistant-color); + border-bottom-color: var(--assistant-dimmed); } .fold-bar[data-border-color="system"] .fold-bar-section.folded { @@ -138,7 +138,7 @@ .fold-bar[data-border-color="thinking"] .fold-bar-section.folded, .fold-bar[data-border-color="thinking sidechain"] .fold-bar-section.folded { - border-bottom-color: var(--assistant-dimmed); + border-bottom-color: var(--assistant-color); } .fold-bar[data-border-color="image"] .fold-bar-section.folded, From 6e2e6ebb33a6dd619d971da4b733c55c6c37c218 Mon Sep 17 00:00:00 2001 From: Christian Boos Date: Sun, 1 Feb 2026 21:23:59 +0100 Subject: [PATCH 2/3] Fix System Hook header alignment Made the header indentation rule more specific to details.collapsible-details so it no longer affects hook-summary elements. Co-Authored-By: Claude Opus 4.5 --- claude_code_log/html/templates/components/message_styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/claude_code_log/html/templates/components/message_styles.css b/claude_code_log/html/templates/components/message_styles.css index 32e6097..2f2c5dc 100644 --- a/claude_code_log/html/templates/components/message_styles.css +++ b/claude_code_log/html/templates/components/message_styles.css @@ -621,7 +621,7 @@ border-radius: 0; } -.header:has(+ .content > details) { +.header:has(+ .content > details.collapsible-details) { margin-left: 1em; } From ba91ce2412cd908a1bba907ac3b0f20276b8d7c9 Mon Sep 17 00:00:00 2001 From: Christian Boos Date: Mon, 2 Feb 2026 01:20:32 +0100 Subject: [PATCH 3/3] Update test snapshot --- test/__snapshots__/test_snapshot_html.ambr | 24 +++++++++++----------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/test/__snapshots__/test_snapshot_html.ambr b/test/__snapshots__/test_snapshot_html.ambr index 1582b73..86cd799 100644 --- a/test/__snapshots__/test_snapshot_html.ambr +++ b/test/__snapshots__/test_snapshot_html.ambr @@ -2236,7 +2236,7 @@ .fold-bar[data-border-color="assistant"] .fold-bar-section.folded, .fold-bar[data-border-color="assistant sidechain"] .fold-bar-section.folded { - border-bottom-color: var(--assistant-color); + border-bottom-color: var(--assistant-dimmed); } .fold-bar[data-border-color="system"] .fold-bar-section.folded { @@ -2272,7 +2272,7 @@ .fold-bar[data-border-color="thinking"] .fold-bar-section.folded, .fold-bar[data-border-color="thinking sidechain"] .fold-bar-section.folded { - border-bottom-color: var(--assistant-dimmed); + border-bottom-color: var(--assistant-color); } .fold-bar[data-border-color="image"] .fold-bar-section.folded, @@ -2755,7 +2755,7 @@ border-radius: 0; } - .header:has(+ .content > details) { + .header:has(+ .content > details.collapsible-details) { margin-left: 1em; } @@ -7163,7 +7163,7 @@ .fold-bar[data-border-color="assistant"] .fold-bar-section.folded, .fold-bar[data-border-color="assistant sidechain"] .fold-bar-section.folded { - border-bottom-color: var(--assistant-color); + border-bottom-color: var(--assistant-dimmed); } .fold-bar[data-border-color="system"] .fold-bar-section.folded { @@ -7199,7 +7199,7 @@ .fold-bar[data-border-color="thinking"] .fold-bar-section.folded, .fold-bar[data-border-color="thinking sidechain"] .fold-bar-section.folded { - border-bottom-color: var(--assistant-dimmed); + border-bottom-color: var(--assistant-color); } .fold-bar[data-border-color="image"] .fold-bar-section.folded, @@ -7682,7 +7682,7 @@ border-radius: 0; } - .header:has(+ .content > details) { + .header:has(+ .content > details.collapsible-details) { margin-left: 1em; } @@ -12186,7 +12186,7 @@ .fold-bar[data-border-color="assistant"] .fold-bar-section.folded, .fold-bar[data-border-color="assistant sidechain"] .fold-bar-section.folded { - border-bottom-color: var(--assistant-color); + border-bottom-color: var(--assistant-dimmed); } .fold-bar[data-border-color="system"] .fold-bar-section.folded { @@ -12222,7 +12222,7 @@ .fold-bar[data-border-color="thinking"] .fold-bar-section.folded, .fold-bar[data-border-color="thinking sidechain"] .fold-bar-section.folded { - border-bottom-color: var(--assistant-dimmed); + border-bottom-color: var(--assistant-color); } .fold-bar[data-border-color="image"] .fold-bar-section.folded, @@ -12705,7 +12705,7 @@ border-radius: 0; } - .header:has(+ .content > details) { + .header:has(+ .content > details.collapsible-details) { margin-left: 1em; } @@ -17250,7 +17250,7 @@ .fold-bar[data-border-color="assistant"] .fold-bar-section.folded, .fold-bar[data-border-color="assistant sidechain"] .fold-bar-section.folded { - border-bottom-color: var(--assistant-color); + border-bottom-color: var(--assistant-dimmed); } .fold-bar[data-border-color="system"] .fold-bar-section.folded { @@ -17286,7 +17286,7 @@ .fold-bar[data-border-color="thinking"] .fold-bar-section.folded, .fold-bar[data-border-color="thinking sidechain"] .fold-bar-section.folded { - border-bottom-color: var(--assistant-dimmed); + border-bottom-color: var(--assistant-color); } .fold-bar[data-border-color="image"] .fold-bar-section.folded, @@ -17769,7 +17769,7 @@ border-radius: 0; } - .header:has(+ .content > details) { + .header:has(+ .content > details.collapsible-details) { margin-left: 1em; }