GeneralBots/botui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: resolve background grid hardcoded colours and stray inline hex values

Browse source
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2026-02-28 10:58:17 -03:00
parent a570d7bd11
commit 76ec8f9bb5
2 changed files with 23 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/suite/partials/desktop-inner.html
View file

@ -201,7 +201,7 @@
.bg-grid { .bg-grid {
position: absolute; position: absolute;
inset: 0; inset: 0;
background-image: linear-gradient(to right, var(--border, #f0fdf4) 1px, transparent 1px), linear-gradient(to bottom, var(--border, #f0fdf4) 1px, transparent 1px); background-image: linear-gradient(to right, var(--surface-hover, #f0fdf4) 1px, transparent 1px), linear-gradient(to bottom, var(--surface-hover, #f0fdf4) 1px, transparent 1px);
background-size: 40px 40px; background-size: 40px 40px;
z-index: 0; z-index: 0;
pointer-events: none; pointer-events: none;
@ -221,7 +221,7 @@
.bg-svg path { .bg-svg path {
fill: none; fill: none;
stroke: var(--border, #e6f2eb); stroke: var(--surface-hover, #e6f2eb);
stroke-width: 45; stroke-width: 45;
stroke-linecap: round; stroke-linecap: round;
stroke-linejoin: round; stroke-linejoin: round;

42
ui/suite/partials/vibe.html
View file

@ -136,7 +136,7 @@
<!-- Canvas Area --> <!-- Canvas Area -->
<div class="vibe-canvas" id="vibeCanvas" <div class="vibe-canvas" id="vibeCanvas"
style="background: var(--bg, #fdfdfd); background-image: radial-gradient(var(--border, #e0e0e0) 1px, transparent 1px); background-size: 20px 20px; position:relative;"> style="background: var(--bg, #fdfdfd); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 20px 20px; position:relative;">
<div <div
style="padding: 16px 24px; font-size: 11px; color: var(--text-muted, #888); font-weight: 600; letter-spacing: 0.5px; border-bottom: 1px solid var(--border, #f0f1f2); background: rgba(255,255,255,0.8); backdrop-filter: blur(4px);"> style="padding: 16px 24px; font-size: 11px; color: var(--text-muted, #888); font-weight: 600; letter-spacing: 0.5px; border-bottom: 1px solid var(--border, #f0f1f2); background: rgba(255,255,255,0.8); backdrop-filter: blur(4px);">
@ -187,12 +187,12 @@
<!-- Vibe Chat Overlay (LIVE) --> <!-- Vibe Chat Overlay (LIVE) -->
<div id="vibeChatOverlay" <div id="vibeChatOverlay"
style="position: absolute; bottom: 24px; right: 24px; width: 380px; background: var(--surface, #1a1a24); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border, #2a2a35); color: var(--bg, #fff); z-index: 100;"> style="position: absolute; bottom: 24px; right: 24px; width: 380px; background: var(--surface); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); color: var(--bg, #fff); z-index: 100;">
<div <div
style="padding: 12px 16px; background: var(--surface-hover, #23232f); border-bottom: 1px solid var(--border, #2a2a35); display: flex; justify-content: space-between; align-items: center;"> style="padding: 12px 16px; background: var(--surface-hover); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 8px;"> <div style="display: flex; align-items: center; gap: 8px;">
<span class="as-status-dot green" id="vibeChatStatusDot" <span class="as-status-dot green" id="vibeChatStatusDot"
style="box-shadow: 0 0 8px #84d669;"></span> style="box-shadow: 0 0 8px var(--accent, #84d669);"></span>
<span style="font-size: 12px; font-weight: 600;">Mantis #1</span> <span style="font-size: 12px; font-weight: 600;">Mantis #1</span>
</div> </div>
<span id="vibeChatStatusBadge" <span id="vibeChatStatusBadge"
@ -208,14 +208,14 @@
</div> </div>
</div> </div>
<div style="padding: 12px; border-top: 1px solid #2a2a35; background: var(--surface, #1a1a24);"> <div style="padding: 12px; border-top: 1px solid var(--border); background: var(--surface);">
<form id="vibeChatForm" autocomplete="off" <form id="vibeChatForm" autocomplete="off"
style="display: flex; align-items: center; gap: 8px; background: var(--surface-hover, #23232f); padding: 8px 12px; border-radius: 20px; border: 1px solid #333;"> style="display: flex; align-items: center; gap: 8px; background: var(--surface-hover); padding: 8px 12px; border-radius: 20px; border: 1px solid #333;">
<span style="color: var(--text-muted, #888); cursor: pointer; transform: rotate(-45deg);">📎</span> <span style="color: var(--text-muted, #888); cursor: pointer; transform: rotate(-45deg);">📎</span>
<input type="text" id="vibeChatInput" placeholder="Describe your project…" <input type="text" id="vibeChatInput" placeholder="Describe your project…"
style="flex: 1; background: transparent; border: none; color: var(--bg, #fff); font-size: 13px; outline: none; font-family: 'Segoe UI', system-ui, sans-serif;" /> style="flex: 1; background: transparent; border: none; color: var(--bg, #fff); font-size: 13px; outline: none; font-family: 'Segoe UI', system-ui, sans-serif;" />
<button type="submit" id="vibeChatSend" <button type="submit" id="vibeChatSend"
style="background: #84d669; color: #1a1a24; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; font-weight: bold; border: none;">↑</button> style="background: var(--accent, #84d669); color: var(--surface); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; font-weight: bold; border: none;">↑</button>
</form> </form>
</div> </div>
</div> </div>
@ -262,13 +262,13 @@
if (!box) return; if (!box) return;
var div = document.createElement("div"); var div = document.createElement("div");
if (role === "user") { if (role === "user") {
div.style.cssText = "align-self:flex-end;background:#84d669;color:#1a1a24;font-weight:500;padding:10px 14px;border-radius:12px 12px 0 12px;max-width:85%;word-wrap:break-word;"; div.style.cssText = "align-self:flex-end;background:var(--accent, #84d669);color:var(--surface);font-weight:500;padding:10px 14px;border-radius:12px 12px 0 12px;max-width:85%;word-wrap:break-word;";
div.textContent = text; div.textContent = text;
} else if (role === "system") { } else if (role === "system") {
div.style.cssText = "align-self:center;background:rgba(132,214,105,0.12);color: var(--accent, #84d669);padding:6px 12px;border-radius:8px;font-size:11px;text-align:center;"; div.style.cssText = "align-self:center;background:rgba(132,214,105,0.12);color: var(--accent, #84d669);padding:6px 12px;border-radius:8px;font-size:11px;text-align:center;";
div.innerHTML = text; div.innerHTML = text;
} else { } else {
div.style.cssText = "align-self:flex-start;background: var(--border, #2a2a35);color:#ececec;padding:10px 14px;border-radius:12px 12px 12px 0;max-width:85%;word-wrap:break-word;"; div.style.cssText = "align-self:flex-start;background: var(--border);color:#ececec;padding:10px 14px;border-radius:12px 12px 12px 0;max-width:85%;word-wrap:break-word;";
div.className = "vibe-bot-msg"; div.className = "vibe-bot-msg";
if (typeof marked !== "undefined" && marked.parse) { if (typeof marked !== "undefined" && marked.parse) {
div.innerHTML = marked.parse(text); div.innerHTML = marked.parse(text);
@ -322,14 +322,14 @@
var dot = document.getElementById("vibeChatStatusDot"); var dot = document.getElementById("vibeChatStatusDot");
var badge = document.getElementById("vibeChatStatusBadge"); var badge = document.getElementById("vibeChatStatusBadge");
if (status === "connected") { if (status === "connected") {
if (dot) { dot.className = "as-status-dot green"; dot.style.boxShadow = "0 0 8px #84d669"; } if (dot) { dot.className = "as-status-dot green"; dot.style.boxShadow = "0 0 8px var(--accent, #84d669)"; }
if (badge) { badge.textContent = "EVOLVED"; badge.style.background = "#84d669"; badge.style.color = "#fff"; } if (badge) { badge.textContent = "EVOLVED"; badge.style.background = "var(--accent, #84d669)"; badge.style.color = "var(--bg, #fff)"; }
} else if (status === "connecting") { } else if (status === "connecting") {
if (dot) { dot.className = "as-status-dot yellow"; dot.style.boxShadow = "0 0 8px #f59e0b"; } if (dot) { dot.className = "as-status-dot yellow"; dot.style.boxShadow = "0 0 8px #f59e0b"; }
if (badge) { badge.textContent = "CONNECTING…"; badge.style.background = "#333"; badge.style.color = "#888"; } if (badge) { badge.textContent = "CONNECTING…"; badge.style.background = "#333"; badge.style.color = "var(--text-muted, #888)"; }
} else { } else {
if (dot) { dot.className = "as-status-dot red"; dot.style.boxShadow = "0 0 8px #ef4444"; } if (dot) { dot.className = "as-status-dot red"; dot.style.boxShadow = "0 0 8px #ef4444"; }
if (badge) { badge.textContent = "OFFLINE"; badge.style.background = "#333"; badge.style.color = "#888"; } if (badge) { badge.textContent = "OFFLINE"; badge.style.background = "#333"; badge.style.color = "var(--text-muted, #888)"; }
} }
} }
@ -347,7 +347,7 @@
card.appendChild(barWrapper); card.appendChild(barWrapper);
} }
} else if (status === "done") { } else if (status === "done") {
card.style.borderLeftColor = "#84d669"; card.style.borderLeftColor = "var(--accent, #84d669)";
bar = card.querySelector(".as-bar-fill"); bar = card.querySelector(".as-bar-fill");
if (bar) bar.style.width = "100%"; if (bar) bar.style.width = "100%";
setTimeout(function () { setTimeout(function () {
@ -375,12 +375,12 @@
var isFirst = stepsContainer.children.length === 0; var isFirst = stepsContainer.children.length === 0;
var nodeId = "vibe-node-" + nodeIdCounter; var nodeId = "vibe-node-" + nodeIdCounter;
var statusBg = status === "Done" ? "#84d669" : (status === "Planning" ? "#eef8eb" : "#fff3cd"); var statusBg = status === "Done" ? "var(--accent, #84d669)" : (status === "Planning" ? "var(--success-light, #eef8eb)" : "var(--warning-light, var(--bg, #fff)3cd)");
var statusColor = status === "Done" ? "#fff" : (status === "Planning" ? "#84d669" : "#856404"); var statusColor = status === "Done" ? "var(--bg, #fff)" : (status === "Planning" ? "var(--accent, #84d669)" : "var(--warning, #856404)");
var subTasksHtml = ""; var subTasksHtml = "";
if (fileList.length > 0) { if (fileList.length > 0) {
subTasksHtml = '<div id="' + nodeId + '-files" style="display:none;padding:8px 16px;border-top:1px solid #f0f1f2;font-size:10px;color:#555;">'; subTasksHtml = '<div id="' + nodeId + '-files" style="display:none;padding:8px 16px;border-top:1px solid var(--border, #f0f1f2);font-size:10px;color:var(--text-muted, #555);">';
for (var fi = 0; fi < fileList.length; fi++) { for (var fi = 0; fi < fileList.length; fi++) {
subTasksHtml += '<div style="padding:2px 0;display:flex;align-items:center;gap:4px;"><span style="color: var(--accent, #84d669);">📄</span> ' + esc(fileList[fi]) + '</div>'; subTasksHtml += '<div style="padding:2px 0;display:flex;align-items:center;gap:4px;"><span style="color: var(--accent, #84d669);">📄</span> ' + esc(fileList[fi]) + '</div>';
} }
@ -389,7 +389,7 @@
var node = document.createElement("div"); var node = document.createElement("div");
node.className = "vibe-task-node"; node.className = "vibe-task-node";
node.style.cssText = "background: var(--bg, #fff);border:" + (isFirst ? "2px solid #84d669" : "1px solid #f0f1f2") + ";border-radius:8px;width:280px;box-shadow:0 " + (isFirst ? "4" : "2") + "px 12px rgba(" + (isFirst ? "132,214,105,0.15" : "0,0,0,0.05") + ");position:relative;flex-shrink:0;animation:nodeIn 0.4s ease;"; node.style.cssText = "background: var(--bg, #fff);border:" + (isFirst ? "2px solid var(--accent, #84d669)" : "1px solid var(--border, #f0f1f2)") + ";border-radius:8px;width:280px;box-shadow:0 " + (isFirst ? "4" : "2") + "px 12px rgba(" + (isFirst ? "132,214,105,0.15" : "0,0,0,0.05") + ");position:relative;flex-shrink:0;animation:nodeIn 0.4s ease;";
node.innerHTML = node.innerHTML =
'<div style="padding:12px 16px;border-bottom: 1px solid var(--border, #f0f1f2);">' + '<div style="padding:12px 16px;border-bottom: 1px solid var(--border, #f0f1f2);">' +
@ -417,11 +417,11 @@
if (isFirst || stepsContainer.children.length > 0) { if (isFirst || stepsContainer.children.length > 0) {
var line = document.createElement("div"); var line = document.createElement("div");
line.style.cssText = "position:absolute;right:-60px;top:50%;width:60px;height:2px;background:#84d669;z-index:10;"; line.style.cssText = "position:absolute;right:-60px;top:50%;width:60px;height:2px;background:var(--accent, #84d669);z-index:10;";
node.appendChild(line); node.appendChild(line);
if (!isFirst) { if (!isFirst) {
var dot = document.createElement("div"); var dot = document.createElement("div");
dot.style.cssText = "position:absolute;left:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:#84d669;z-index:20;"; dot.style.cssText = "position:absolute;left:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:var(--accent, #84d669);z-index:20;";
node.appendChild(dot); node.appendChild(dot);
} }
} }
@ -725,7 +725,7 @@
card.appendChild(barWrapper); card.appendChild(barWrapper);
} }
} else if (status === "EVOLVED" || status === "DONE") { } else if (status === "EVOLVED" || status === "DONE") {
card.style.borderLeft = "3px solid #84d669"; card.style.borderLeft = "3px solid var(--accent, #84d669)";
if (dot) { dot.className = "as-status-dot green"; } if (dot) { dot.className = "as-status-dot green"; }
if (badge) { badge.textContent = "EVOLVED"; badge.className = "as-badge badge-evolved"; } if (badge) { badge.textContent = "EVOLVED"; badge.className = "as-badge badge-evolved"; }
var agBar = card.querySelector(".as-bar-fill"); var agBar = card.querySelector(".as-bar-fill");