penal-colony/samsa
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: per-engine accent colors in search results

Browse source 
Each engine now has a distinctive color accent applied to its result
card (left border) and engine badge (colored left strip + text).

16 engines mapped to brand-appropriate colors:
Google blue, Bing teal, DDG orange-red, Brave red, Qwant blue,
Wikipedia dark, GitHub purple, Reddit orange-red, YouTube red,
Stack Overflow amber, arXiv crimson, Crossref navy blue.

Pure CSS via data-engine attribute — no JavaScript.
This commit is contained in:
Franz Kafka 2026-03-22 22:59:32 +00:00
parent e96040ef35
commit 0030cf97ad
2 changed files with 51 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

49
internal/views/static/css/kafka.css
View file

@ -339,6 +339,10 @@ main {
border-bottom: 1px solid var(--border);
}
.result[data-engine] {
border-left: 3px solid var(--accent, transparent);
}
.result:last-child {
border-bottom: none;
}
@ -393,6 +397,51 @@ main {
font-size: 0.7rem;
color: var(--text-muted);
margin-left: auto;
border-left: 2.5px solid transparent;
transition: border-color 0.15s ease;
}
/* ============================================================
Engine Accent Colors
============================================================ */
.result[data-engine="google"],
.engine-badge[data-engine="google"] { --accent: #4285f4; }
.result[data-engine="bing"],
.engine-badge[data-engine="bing"] { --accent: #00897b; }
.result[data-engine="duckduckgo"],
.engine-badge[data-engine="duckduckgo"] { --accent: #de5833; }
.result[data-engine="brave"],
.engine-badge[data-engine="brave"] { --accent: #fb542b; }
.result[data-engine="braveapi"],
.engine-badge[data-engine="braveapi"] { --accent: #ff6600; }
.result[data-engine="qwant"],
.engine-badge[data-engine="qwant"] { --accent: #5c97ff; }
.result[data-engine="wikipedia"],
.engine-badge[data-engine="wikipedia"] { --accent: #333333; }
.result[data-engine="github"],
.engine-badge[data-engine="github"] { --accent: #8b5cf6; }
.result[data-engine="reddit"],
.engine-badge[data-engine="reddit"] { --accent: #ff4500; }
.result[data-engine="youtube"],
.engine-badge[data-engine="youtube"] { --accent: #ff0000; }
.result[data-engine="stackoverflow"],
.engine-badge[data-engine="stackoverflow"] { --accent: #f48024; }
.result[data-engine="arxiv"],
.engine-badge[data-engine="arxiv"] { --accent: #b31b1b; }
.result[data-engine="crossref"],
.engine-badge[data-engine="crossref"] { --accent: #00354d; }
.result[data-engine="bing_images"],
.engine-badge[data-engine="bing_images"] { --accent: #00897b; }
.result[data-engine="ddg_images"],
.engine-badge[data-engine="ddg_images"] { --accent: #de5833; }
.result[data-engine="qwant_images"],
.engine-badge[data-engine="qwant_images"] { --accent: #5c97ff; }
.engine-badge[data-engine] {
border-left-color: var(--accent, transparent);
color: var(--accent, var(--text-muted));
font-weight: 500;
}
.result_content {

4
internal/views/templates/result_item.html
View file

@ -1,12 +1,12 @@
{{define "result_item"}}
<article class="result">
<article class="result" data-engine="{{.Engine}}">
<div class="result_header">
<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.SafeTitle}}</a>
</div>
<div class="result_url">
<img class="result-favicon" src="https://www.google.com/s2/favicons?domain={{.URL | urlquery}}&sz=32" alt="" loading="lazy" onerror="this.style.display='none'">
<a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.URL}}</a>
<span class="engine-badge">{{.Engine}}</span>
<span class="engine-badge" data-engine="{{.Engine}}">{{.Engine}}</span>
</div>
{{if .Content}}
<p class="result_content">{{.SafeContent}}</p>