Skip to content

Add neoteroi timeline CSS and register changelog category #166

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
albertov19 merged 1 commit into from
Mar 27, 2026
Merged

Add neoteroi timeline CSS and register changelog category #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 7 additions & 1 deletion llms_config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,14 +65,20 @@
"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": {
"skip_basenames": [
"README.md",
"LICENSE.md",
"ai-resources.md",
"video-library.md"
"video-library.md",
"changelogs.md"
],
"skip_paths": ["venv"]
}
Expand Down
189 changes: 188 additions & 1 deletion material-overrides/assets/stylesheets/timeline-neoteroi.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,188 @@
/* TODO: add styling for timeline element */
/**
* 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;
Comment on lines +77 to +94

Copilot AI Mar 27, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.nt-timeline-before and .nt-timeline-after set content: "", but content only applies to pseudo-elements (::before/::after) and has no effect on normal elements. Consider removing these declarations (or switching the selectors to pseudo-elements if that was the intent) to avoid confusion and keep the CSS semantically correct.

Copilot uses AI. Check for mistakes.
}

/* 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;
}
Loading