Skip to content

CSS Styles Cleanup #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cboos merged 6 commits into from
Dec 1, 2025
Merged

CSS Styles Cleanup #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fbbb0a1
Extract inline CSS styles to stylesheet classes
cboos Nov 30, 2025
4e5eace
Replace hardcoded colors with CSS variables
cboos Nov 30, 2025
83d2b9a
Fix session_subtitle template access error
cboos Nov 30, 2025
fd9a700
Update HTML snapshots for CSS variable changes
cboos Nov 30, 2025
5cdd122
Add missing CSS variable definitions
cboos Nov 30, 2025
05cd64f
Add --border-light CSS variable for #ddd borders
cboos Nov 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions claude_code_log/renderer.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1290,8 +1290,7 @@ def format_tool_result_content(
data_url = f"data:{media_type};base64,{data}"
image_html_parts.append(
f'<img src="{data_url}" alt="Tool result image" '
f'style="max-width: 100%; height: auto; border: 1px solid #ddd; '
f'border-radius: 4px; margin: 10px 0;" />'
f'class="tool-result-image" />'
)
raw_content = "\n".join(content_parts)
has_images = len(image_html_parts) > 0
Expand Down Expand Up @@ -1469,7 +1468,7 @@ def format_image_content(image: ImageContent) -> str:
# Create a data URL from the base64 image data
data_url = f"data:{image.source.media_type};base64,{image.source.data}"

return f'<img src="{data_url}" alt="Uploaded image" style="max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px; margin: 10px 0;" />'
return f'<img src="{data_url}" alt="Uploaded image" class="uploaded-image" />'


def _is_compacted_session_summary(text: str) -> bool:
Expand Down
26 changes: 13 additions & 13 deletions claude_code_log/templates/components/filter_styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/* Filter toolbar and controls */
.filter-toolbar {
background-color: #f8f9fa66;
background-color: var(--neutral-dimmed);
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 16px;
box-shadow: -7px -7px 10px #eeeeee44, 7px 7px 10px #00000011;
border-left: #ffffff66 1px solid;
border-top: #ffffff66 1px solid;
border-left: var(--white-dimmed) 1px solid;
border-top: var(--white-dimmed) 1px solid;
border-bottom: #00000017 1px solid;
border-right: #00000017 1px solid;
display: none;
Expand Down Expand Up @@ -35,14 +35,14 @@
.toolbar-header h3 {
margin: 0;
font-size: 1em;
color: #495057;
color: var(--text-secondary);
font-weight: 600;
}

.close-toolbar-btn {
background: none;
border: none;
color: #666;
color: var(--text-muted);
cursor: pointer;
font-size: 20px;
padding: 5px;
Expand All @@ -58,8 +58,8 @@
}

.close-toolbar-btn:hover {
background-color: #ffffff66;
color: #333;
background-color: var(--white-dimmed);
color: var(--text-primary);
}

.filter-section {
Expand All @@ -83,7 +83,7 @@
border: 1px solid #dee2e6;
border-radius: 20px;
background-color: transparent;
color: #495057;
color: var(--text-secondary);
font-size: 0.85em;
font-weight: 500;
cursor: pointer;
Expand All @@ -104,12 +104,12 @@
}

.filter-toggle.active:hover {
background-color: #ffffff66;
background-color: var(--white-dimmed);
}

/* Color-coded filter buttons */
.filter-toggle[data-type="user"] {
border-color: #ff9800;
border-color: var(--user-color);
border-width: 2px;
}

Expand All @@ -124,12 +124,12 @@
}

.filter-toggle[data-type="assistant"] {
border-color: #9c27b0;
border-color: var(--assistant-color);
border-width: 2px;
}

.filter-toggle[data-type="thinking"] {
border-color: #9c27b066;
border-color: var(--assistant-dimmed);
border-width: 2px;
}

Expand All @@ -142,7 +142,7 @@
padding: 4px 8px;
border: 1px solid #dee2e6;
border-radius: 4px;
background-color: #ffffff66;
background-color: var(--white-dimmed);
color: #6c757d;
font-size: 0.75em;
cursor: pointer;
Expand Down
16 changes: 11 additions & 5 deletions claude_code_log/templates/components/global_styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ body {
margin: 0 auto;
padding: 10px;
background: linear-gradient(90deg, #f3d6d2, #f1dcce, #f0e4ca, #eeecc7, #e3ecc3, #d5eac0, #c6e8bd, #b9e6bc, #b6e3c5, #b3e1cf);
color: #333;
color: var(--text-primary);
}

h1 {
Expand Down Expand Up @@ -118,6 +118,12 @@ pre {
line-height: 1.5;
}

/* Summary stats layout (used in index.html) */
.summary-stats-flex {
display: flex;
gap: 3em;
}

/* Common card styling */
.card-base {
background-color: #ffffff66;
Expand Down Expand Up @@ -166,16 +172,16 @@ pre {
/* Timestamps */
.timestamp {
font-size: 0.85em;
color: #666;
color: var(--text-muted);
font-weight: normal;
}

/* Floating action buttons */
.floating-btn {
position: fixed;
right: 20px;
background-color: #e8f4fd66;
color: #666;
background-color: var(--session-bg-dimmed);
color: var(--text-muted);
border: none;
border-radius: 50%;
width: 50px;
Expand All @@ -198,7 +204,7 @@ pre {
}

.floating-btn:visited {
color: #666;
color: var(--text-muted);
}

/* Floating buttons positioning */
Expand Down
54 changes: 35 additions & 19 deletions claude_code_log/templates/components/message_styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@
}

.fold-bar[data-border-color="session-header"] .fold-bar-section {
border-bottom-color: #2196f3;
border-bottom-color: var(--system-warning-color);
}

/* Sidechain (sub-assistant) fold-bar styling */
Expand Down Expand Up @@ -255,7 +255,7 @@

.pair-duration {
font-size: 80%;
color: #666;
color: var(--text-muted);
font-style: italic;
}

Expand Down Expand Up @@ -297,7 +297,7 @@

/* Message type styling */
.user {
border-left-color: #ff9800;
border-left-color: var(--user-color);
}

/* Steering user messages (out-of-band input while agent is working) */
Expand All @@ -313,7 +313,7 @@
}

.assistant {
border-left-color: #9c27b0;
border-left-color: var(--assistant-color);
}

/* Dimmed assistant when paired with thinking */
Expand Down Expand Up @@ -358,7 +358,7 @@
line-height: 1.4;
white-space: pre-wrap;
word-wrap: break-word;
color: #333;
color: var(--text-primary);
overflow-x: auto;
}

Expand All @@ -374,11 +374,11 @@
/* Bash command styling */
.bash-input {
background-color: #1e1e1e08;
border-left-color: #4caf50;
border-left-color: var(--tool-use-color);
}

.bash-prompt {
color: #4caf50;
color: var(--tool-use-color);
font-weight: bold;
font-size: 1.1em;
margin-right: 8px;
Expand All @@ -388,7 +388,7 @@
font-family: var(--font-monospace);
font-size: 0.95em;
color: #2c3e50;
background-color: #f8f9fa;
background-color: var(--bg-neutral);
padding: 2px 6px;
border-radius: 3px;
}
Expand All @@ -410,7 +410,7 @@
line-height: 1.4;
white-space: pre-wrap;
word-wrap: break-word;
color: #333;
color: var(--text-primary);
overflow-x: auto;
}

Expand All @@ -430,7 +430,7 @@
}

.bash-empty {
color: #999;
color: var(--text-muted);
font-style: italic;
}

Expand Down Expand Up @@ -459,7 +459,7 @@
}

.tool_use {
border-left-color: #4caf50;
border-left-color: var(--tool-use-color);
}

.tool_result {
Expand Down Expand Up @@ -499,7 +499,7 @@

/* Full purple when thinking is paired (as pair_first) */
.thinking.paired-message.pair_first {
border-left-color: #9c27b0;
border-left-color: var(--assistant-color);
}

.image {
Expand All @@ -525,10 +525,16 @@
font-size: 1.2em;
}

.session-subtitle {
font-size: 0.9em;
color: var(--text-muted);
margin-top: 4px;
}

/* IDE notification styling */
.ide-notification {
background-color: var(--ide-notification-dimmed);
border-left: #9c27b0 2px solid;
border-left: var(--assistant-color) 2px solid;
padding: 8px 12px;
margin: 8px 0;
border-radius: 4px;
Expand All @@ -548,13 +554,13 @@
}

.ide-selection-collapsible summary:hover {
color: #333;
color: var(--text-primary);
}

.ide-selection-content {
margin-top: 8px;
padding: 8px;
background-color: #f8f9fa;
background-color: var(--bg-neutral);
border-radius: 3px;
border: 1px solid #dee2e6;
font-family: var(--font-monospace);
Expand Down Expand Up @@ -633,7 +639,7 @@ pre > code {

.tool-param-structured {
margin: 0;
background-color: #f8f9fa;
background-color: var(--bg-neutral);
padding: 4px;
border-radius: 3px;
}
Expand All @@ -648,7 +654,7 @@ pre > code {
}

.tool-param-collapsible summary:hover {
color: #333;
color: var(--text-primary);
}

.tool-param-collapsible[open] > summary {
Expand All @@ -661,7 +667,7 @@ pre > code {
}

.tool-params-empty {
color: #999;
color: var(--text-muted);
font-style: italic;
}

Expand Down Expand Up @@ -841,4 +847,14 @@ details summary {
.ansi-bold { font-weight: bold; }
.ansi-dim { opacity: 0.7; }
.ansi-italic { font-style: italic; }
.ansi-underline { text-decoration: underline; }
.ansi-underline { text-decoration: underline; }

/* Image styling */
.tool-result-image,
.uploaded-image {
max-width: 100%;
height: auto;
border: 1px solid var(--border-light);
border-radius: 4px;
margin: 10px 0;
}
17 changes: 11 additions & 6 deletions claude_code_log/templates/components/project_card_styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,20 @@

.project-name a {
text-decoration: none;
color: #2196f3;
color: var(--system-warning-color);
}

.project-name a:hover {
text-decoration: underline;
}

.transcript-link-hint {
font-size: 0.6em;
color: var(--text-muted);
}

.project-stats {
color: #666;
color: var(--text-muted);
font-size: 0.9em;
display: flex;
gap: 20px;
Expand Down Expand Up @@ -79,11 +84,11 @@
.summary-stat .number {
font-size: 1.5em;
font-weight: 600;
color: #2196f3;
color: var(--system-warning-color);
}

.summary-stat .label {
color: #666;
color: var(--text-muted);
font-size: 0.9em;
}

Expand All @@ -94,14 +99,14 @@

.project-sessions details summary {
cursor: pointer;
color: #666;
color: var(--text-muted);
font-size: 1.1em;
font-weight: 600;
padding: 8px 0;
}

.project-sessions details summary:hover {
color: #2196f3;
color: var(--system-warning-color);
}

.project-sessions details[open] summary {
Expand Down
Loading
Loading