From efded5a0c63a43d7c9af9b4769e071379ca1f2eb Mon Sep 17 00:00:00 2001 From: Alberto Viera Date: Fri, 27 Mar 2026 16:57:37 +0000 Subject: [PATCH] Add neoteroi timeline CSS and register changelog category Populate timeline-neoteroi.css with kluster-themed styles (info-blue accent, dark/light mode support, vertical left layout). Register changelog category and exclude from LLM processing in llms_config.json. Co-Authored-By: Claude Opus 4.6 (1M context) --- llms_config.json | 8 +- .../assets/stylesheets/timeline-neoteroi.css | 189 +++++++++++++++++- 2 files changed, 195 insertions(+), 2 deletions(-) diff --git a/llms_config.json b/llms_config.json index d28e13e34..f27f4bc30 100644 --- a/llms_config.json +++ b/llms_config.json @@ -65,6 +65,11 @@ "id": "pr_reviews", "name": "PR Reviews", "description": "Information and guides related to using kluster.ai PR Reviews to automatically review pull requests on GitHub, GitLab, and Bitbucket." + }, + "changelog": { + "id": "changelog", + "name": "Changelog", + "description": "Chronological timeline of kluster.ai Code Reviews product updates, new features, bug fixes, and improvements." } }, "exclusions": { @@ -72,7 +77,8 @@ "README.md", "LICENSE.md", "ai-resources.md", - "video-library.md" + "video-library.md", + "changelogs.md" ], "skip_paths": ["venv"] } diff --git a/material-overrides/assets/stylesheets/timeline-neoteroi.css b/material-overrides/assets/stylesheets/timeline-neoteroi.css index 733a41418..be60b8b56 100644 --- a/material-overrides/assets/stylesheets/timeline-neoteroi.css +++ b/material-overrides/assets/stylesheets/timeline-neoteroi.css @@ -1 +1,188 @@ -/* TODO: add styling for timeline element */ \ No newline at end of file +/** + * Neoteroi Timeline Styles + * Compiled from upstream SCSS and customized for the kluster Material theme. + * Supports vertical left layout only (the layout used in kluster docs). + */ + +/* ------------------------------------------------------------------ */ +/* Error state */ +/* ------------------------------------------------------------------ */ + +.nt-error { + border: 2px dashed darkred; + padding: 0 1rem; + background: #faf9ba; + color: darkred; +} + +/* ------------------------------------------------------------------ */ +/* Timeline container */ +/* ------------------------------------------------------------------ */ + +.nt-timeline { + margin-top: 30px; +} + +/* Vertical left layout */ +.nt-timeline.vertical.left { + padding-left: 100px; +} + +/* ------------------------------------------------------------------ */ +/* Timeline items wrapper */ +/* ------------------------------------------------------------------ */ + +.nt-timeline-items { + display: flex; + position: relative; +} + +/* Vertical layout — stack items top to bottom */ +.nt-timeline.vertical .nt-timeline-items { + flex-direction: column; +} + +.nt-timeline-items > div { + min-height: 100px; + padding-top: 2px; + padding-bottom: 20px; +} + +/* Vertical connector line — blue accent, single solid line */ +.nt-timeline.vertical.left .nt-timeline-items { + background: no-repeat 30px/2px 100%; + background-image: linear-gradient( + to bottom, + var(--info-blue-500, #4e75ff), + var(--info-blue-500, #4e75ff) + ); +} + +/* ------------------------------------------------------------------ */ +/* Individual timeline item */ +/* ------------------------------------------------------------------ */ + +.nt-timeline-item { + position: relative; +} + +.nt-timeline.vertical.left .nt-timeline-item { + padding-left: 70px; +} + +/* ------------------------------------------------------------------ */ +/* Before / after spacers */ +/* ------------------------------------------------------------------ */ + +.nt-timeline-before { + content: ""; + height: 15px; +} + +/* Fade-in segment at top of item */ +.nt-timeline.vertical.left .nt-timeline-before { + background: linear-gradient( + rgba(78, 117, 255, 0) 0%, + var(--info-blue-500, #4e75ff) 100% + ) + no-repeat 30px/2px 100%; +} + +.nt-timeline-after { + content: ""; + height: 60px; + margin-bottom: 20px; +} + +/* Fade-out segment at bottom of item */ +.nt-timeline.vertical.left .nt-timeline-after { + background: linear-gradient( + var(--info-blue-500, #4e75ff) 0%, + rgba(78, 117, 255, 0) 100% + ) + no-repeat 30px/2px 100%; +} + +/* ------------------------------------------------------------------ */ +/* Dot */ +/* ------------------------------------------------------------------ */ + +.nt-timeline-dot { + position: absolute; + width: 20px; + height: 20px; + border-radius: 100%; + background-color: var(--info-blue-500, #4e75ff); + top: 0; + z-index: 2; + display: flex; + justify-content: center; + align-items: center; + box-shadow: + 0 2px 1px -1px rgb(0 0 0 / 20%), + 0 1px 1px 0 rgb(0 0 0 / 14%), + 0 1px 3px 0 rgb(0 0 0 / 12%); + /* Border adapts to the current background so it looks "cut out" */ + border: 3px solid var(--md-default-bg-color, #ffffff); +} + +.nt-timeline.vertical.left .nt-timeline-dot { + left: 21px; + top: 8px; +} + +/* Larger dot variant (used when an icon is present) */ +.nt-timeline-dot.bigger { + width: 40px; + height: 40px; + padding: 3px; +} + +.nt-timeline.vertical.left .nt-timeline-dot.bigger { + top: 0; + left: 10px; +} + +.nt-timeline-dot .icon { + color: var(--dark, #060809); + position: relative; + top: 1px; +} + +/* ------------------------------------------------------------------ */ +/* Subtitle (date / label shown to the left) */ +/* ------------------------------------------------------------------ */ + +.nt-timeline-sub-title { + position: absolute; + top: 4px; + margin-top: 0; + font-size: 0.7rem; + color: var(--md-default-fg-color--light, #425c67); +} + +.nt-timeline.vertical.left .nt-timeline-sub-title { + left: -100px; + width: 100px; +} + +/* Dark mode: use the slate-scheme mapped value */ +[data-md-color-scheme="slate"] .nt-timeline-sub-title { + color: var(--md-default-fg-color--light, #abc0c9); +} + +/* ------------------------------------------------------------------ */ +/* Content block */ +/* ------------------------------------------------------------------ */ + +.nt-timeline-title { + font-size: 0.85rem; + font-weight: 600; + margin-top: 0; +} + +.nt-timeline-content { + font-size: 0.75rem; + border-bottom: 2px dashed var(--border-color, #e9eff1); + padding-bottom: 1.2rem; +}