fix: remove black frame caused by hardcoded window wrapper colors
This commit is contained in:
parent
4a2c28e252
commit
8075f9701c
3 changed files with 53 additions and 53 deletions
|
|
@ -39,7 +39,7 @@ if (typeof window.WindowManager === 'undefined') {
|
|||
const top = 100 + offset;
|
||||
const left = 150 + offset;
|
||||
|
||||
windowEl.className = 'absolute w-[700px] h-[500px] bg-white rounded-lg shadow-2xl flex flex-col border border-gray-200 overflow-hidden window-element';
|
||||
windowEl.className = 'absolute w-[700px] h-[500px] rounded-lg shadow-2xl flex flex-col border border-gray-200 overflow-hidden window-element';
|
||||
windowEl.style.top = `${top}px`;
|
||||
windowEl.style.left = `${left}px`;
|
||||
windowEl.style.zIndex = this.zIndexCounter++;
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@
|
|||
.sidebar {
|
||||
width: 51px;
|
||||
height: 100%;
|
||||
background: var(--surface, #f8f8f8);
|
||||
border-right: 1px solid var(--border, #f0f1f2);
|
||||
background: var(--surface);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 100;
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
.sidebar-item {
|
||||
width: 51px;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid var(--border, #f0f1f2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
|
||||
.sidebar-item.active {
|
||||
background: var(--surface-hover, #ffffff);
|
||||
border-left: 3px solid var(--accent, #84d669);
|
||||
border-left: 3px solid var(--accent);
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
|
|
@ -83,8 +83,8 @@
|
|||
.tabs-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--surface, #f8f8f8);
|
||||
border-bottom: 1px solid var(--border, #f0f1f2);
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
height: 34px;
|
||||
min-width: 169px;
|
||||
flex: 1;
|
||||
border-right: 1px solid var(--border, #f0f1f2);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 18px;
|
||||
|
|
@ -110,12 +110,12 @@
|
|||
}
|
||||
|
||||
.main-tab.active {
|
||||
background: var(--accent, #84d669);
|
||||
border-color: var(--accent, #84d669);
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.main-tab.active .main-tab-content {
|
||||
color: var(--bg, white);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
.main-tab-content {
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
font-family: 'Fira Code', monospace;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text, #3b3b3b);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Workspace (Where windows float) */
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
/* Interactive Desktop Icons triggering HTMX */
|
||||
.desktop-icon {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border, #f0f1f2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
height: 67px;
|
||||
padding: 10px;
|
||||
|
|
@ -178,7 +178,7 @@
|
|||
.desktop-icon:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--accent, #84d669);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.panel-card-icon {
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
font-family: 'Fira Code', monospace;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text, #3b3b3b);
|
||||
color: var(--text);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
|
|
@ -236,7 +236,7 @@
|
|||
.toolbar {
|
||||
height: 50px;
|
||||
background: var(--bg);
|
||||
border-top: 1px solid var(--border, #f0f1f2);
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
|
|
@ -255,7 +255,7 @@
|
|||
.toolbar-time {
|
||||
font-family: 'Fira Code', monospace;
|
||||
font-size: 14px;
|
||||
color: var(--text, #3b3b3b);
|
||||
color: var(--text);
|
||||
text-align: right;
|
||||
line-height: 1.4;
|
||||
padding: 0 10px;
|
||||
|
|
@ -275,11 +275,11 @@
|
|||
}
|
||||
|
||||
.taskbar-item:hover {
|
||||
background: var(--surface, #f8f8f8);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.taskbar-item.active {
|
||||
border-bottom-color: var(--accent, #84d669);
|
||||
border-bottom-color: var(--accent);
|
||||
background: linear-gradient(to bottom, transparent 50%, var(--accent-light, rgba(132, 214, 105, 0.1)) 100%);
|
||||
}
|
||||
|
||||
|
|
@ -293,13 +293,13 @@
|
|||
<!-- Left Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-item active" title="Home">
|
||||
<svg class="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="var(--text, #3b3b3b)" stroke-width="2">
|
||||
<svg class="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
||||
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="sidebar-item" title="Terminal">
|
||||
<svg class="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="var(--text, #3b3b3b)" stroke-width="2">
|
||||
<svg class="sidebar-icon" viewBox="0 0 24 24" fill="none" stroke="var(--text)" stroke-width="2">
|
||||
<polyline points="4 17 10 11 4 5"></polyline>
|
||||
<line x1="12" y1="19" x2="20" y2="19"></line>
|
||||
</svg>
|
||||
|
|
@ -347,8 +347,8 @@
|
|||
<div class="desktop-icon" data-app-id="chat" data-app-title="Chat"
|
||||
hx-get="/suite/partials/chat.html" hx-swap="none">
|
||||
<svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
|
||||
<circle cx="21" cy="21" r="20" stroke="var(--accent, #84d669)" stroke-width="2" />
|
||||
<path d="M14 21h14M21 14v14" stroke="var(--accent, #84d669)" stroke-width="2" />
|
||||
<circle cx="21" cy="21" r="20" stroke="var(--accent)" stroke-width="2" />
|
||||
<path d="M14 21h14M21 14v14" stroke="var(--accent)" stroke-width="2" />
|
||||
</svg>
|
||||
<div class="panel-card-label">Chat</div>
|
||||
</div>
|
||||
|
|
@ -356,10 +356,10 @@
|
|||
<div class="desktop-icon" data-app-id="vibe" data-app-title="Vibe"
|
||||
hx-get="/suite/partials/vibe.html" hx-swap="none">
|
||||
<svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
|
||||
<circle cx="21" cy="21" r="20" stroke="var(--accent, #84d669)" stroke-width="2" />
|
||||
<path d="M12 14l8 7-8 7" stroke="var(--accent, #84d669)" stroke-width="2" stroke-linecap="round"
|
||||
<circle cx="21" cy="21" r="20" stroke="var(--accent)" stroke-width="2" />
|
||||
<path d="M12 14l8 7-8 7" stroke="var(--accent)" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
<line x1="22" y1="28" x2="32" y2="28" stroke="var(--accent, #84d669)" stroke-width="2"
|
||||
<line x1="22" y1="28" x2="32" y2="28" stroke="var(--accent)" stroke-width="2"
|
||||
stroke-linecap="round" />
|
||||
</svg>
|
||||
<div class="panel-card-label">Vibe</div>
|
||||
|
|
@ -368,10 +368,10 @@
|
|||
<div class="desktop-icon" data-app-id="tasks" data-app-title="Tasks"
|
||||
hx-get="/suite/tasks/task-window.html" hx-swap="none">
|
||||
<svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
|
||||
<rect x="2" y="2" width="38" height="38" rx="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="12" y1="12" x2="30" y2="12" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="12" y1="21" x2="30" y2="21" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="12" y1="30" x2="24" y2="30" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<rect x="2" y="2" width="38" height="38" rx="4" stroke="var(--text)" stroke-width="2" />
|
||||
<line x1="12" y1="12" x2="30" y2="12" stroke="var(--text)" stroke-width="2" />
|
||||
<line x1="12" y1="21" x2="30" y2="21" stroke="var(--text)" stroke-width="2" />
|
||||
<line x1="12" y1="30" x2="24" y2="30" stroke="var(--text)" stroke-width="2" />
|
||||
</svg>
|
||||
<div class="panel-card-label">Tasks</div>
|
||||
</div>
|
||||
|
|
@ -379,10 +379,10 @@
|
|||
<div class="desktop-icon" data-app-id="terminal" data-app-title="Terminal"
|
||||
hx-get="/suite/partials/terminal.html" hx-swap="none">
|
||||
<svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
|
||||
<rect x="2" y="4" width="38" height="34" rx="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="10" y1="14" x2="32" y2="14" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="10" y1="22" x2="28" y2="22" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="10" y1="30" x2="24" y2="30" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<rect x="2" y="4" width="38" height="34" rx="4" stroke="var(--text)" stroke-width="2" />
|
||||
<line x1="10" y1="14" x2="32" y2="14" stroke="var(--text)" stroke-width="2" />
|
||||
<line x1="10" y1="22" x2="28" y2="22" stroke="var(--text)" stroke-width="2" />
|
||||
<line x1="10" y1="30" x2="24" y2="30" stroke="var(--text)" stroke-width="2" />
|
||||
</svg>
|
||||
<div class="panel-card-label">Terminal</div>
|
||||
</div>
|
||||
|
|
@ -390,11 +390,11 @@
|
|||
<div class="desktop-icon" data-app-id="explorer" data-app-title="Explorer"
|
||||
hx-get="/suite/partials/explorer.html" hx-swap="none">
|
||||
<svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
|
||||
<rect x="2" y="2" width="38" height="38" rx="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="10" y1="10" x2="32" y2="10" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="10" y1="18" x2="28" y2="18" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="10" y1="26" x2="32" y2="26" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="10" y1="34" x2="24" y2="34" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<rect x="2" y="2" width="38" height="38" rx="4" stroke="var(--text)" stroke-width="2" />
|
||||
<line x1="10" y1="10" x2="32" y2="10" stroke="var(--text)" stroke-width="2" />
|
||||
<line x1="10" y1="18" x2="28" y2="18" stroke="var(--text)" stroke-width="2" />
|
||||
<line x1="10" y1="26" x2="32" y2="26" stroke="var(--text)" stroke-width="2" />
|
||||
<line x1="10" y1="34" x2="24" y2="34" stroke="var(--text)" stroke-width="2" />
|
||||
</svg>
|
||||
<div class="panel-card-label">Explorer</div>
|
||||
</div>
|
||||
|
|
@ -402,10 +402,10 @@
|
|||
<div class="desktop-icon" data-app-id="editor" data-app-title="Editor"
|
||||
hx-get="/suite/partials/editor.html" hx-swap="none">
|
||||
<svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
|
||||
<polyline points="4 8 12 2 20 8" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="12" y1="2" x2="12" y2="24" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<polyline points="22 16 30 10 38 16" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<line x1="30" y1="10" x2="30" y2="32" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<polyline points="4 8 12 2 20 8" stroke="var(--text)" stroke-width="2" />
|
||||
<line x1="12" y1="2" x2="12" y2="24" stroke="var(--text)" stroke-width="2" />
|
||||
<polyline points="22 16 30 10 38 16" stroke="var(--text)" stroke-width="2" />
|
||||
<line x1="30" y1="10" x2="30" y2="32" stroke="var(--text)" stroke-width="2" />
|
||||
</svg>
|
||||
<div class="panel-card-label">Editor</div>
|
||||
</div>
|
||||
|
|
@ -413,9 +413,9 @@
|
|||
<div class="desktop-icon" data-app-id="browser" data-app-title="Browser"
|
||||
hx-get="/suite/partials/browser.html" hx-swap="none">
|
||||
<svg class="panel-card-icon" viewBox="0 0 42 42" fill="none">
|
||||
<rect x="2" y="4" width="38" height="34" rx="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<circle cx="14" cy="16" r="4" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<path d="M6 34a6 6 0 0 1 6-6h10a6 6 0 0 1 6 6v2H6v-2z" stroke="var(--text, #3b3b3b)" stroke-width="2" />
|
||||
<rect x="2" y="4" width="38" height="34" rx="4" stroke="var(--text)" stroke-width="2" />
|
||||
<circle cx="14" cy="16" r="4" stroke="var(--text)" stroke-width="2" />
|
||||
<path d="M6 34a6 6 0 0 1 6-6h10a6 6 0 0 1 6 6v2H6v-2z" stroke="var(--text)" stroke-width="2" />
|
||||
</svg>
|
||||
<div class="panel-card-label">Browser</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
<div class="vibe-body">
|
||||
|
||||
<!-- Agents & Workspaces Sidebar (Fixed to left as in image) -->
|
||||
<aside class="agents-sidebar" id="agentsSidebar" style="background: var(--surface, #fcfcfc);">
|
||||
<aside class="agents-sidebar" id="agentsSidebar" style="background: var(--surface);">
|
||||
<div class="as-logo-section"
|
||||
style="padding: 16px; border-bottom: 1px solid var(--border, #f0f1f2); display: flex; align-items: center; justify-content: space-between;">
|
||||
style="padding: 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;">
|
||||
<h2
|
||||
style="margin:0; font-size: 15px; color: var(--text, #3b3b3b); font-weight: 800; display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 18px; color: var(--accent, #84d669);">🌱</span> mantis farm
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
style="background: var(--bg, #fdfdfd); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 20px 20px; position:relative;">
|
||||
|
||||
<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); background: rgba(255,255,255,0.8); backdrop-filter: blur(4px);">
|
||||
// DASHBOARD <span style="color: var(--text-secondary, #ccc); margin:0 6px;">></span> // E-COMMERCE APP DEVELOPMENT
|
||||
<div style="float: right;">
|
||||
<button
|
||||
|
|
@ -380,7 +380,7 @@
|
|||
|
||||
var subTasksHtml = "";
|
||||
if (fileList.length > 0) {
|
||||
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);">';
|
||||
subTasksHtml = '<div id="' + nodeId + '-files" style="display:none;padding:8px 16px;border-top:1px solid var(--border);font-size:10px;color:var(--text-muted, #555);">';
|
||||
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>';
|
||||
}
|
||||
|
|
@ -389,17 +389,17 @@
|
|||
|
||||
var node = document.createElement("div");
|
||||
node.className = "vibe-task-node";
|
||||
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.style.cssText = "background: var(--bg, #fff);border:" + (isFirst ? "2px solid var(--accent, #84d669)" : "1px solid var(--border)") + ";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 =
|
||||
'<div style="padding:12px 16px;border-bottom: 1px solid var(--border, #f0f1f2);">' +
|
||||
'<div style="padding:12px 16px;border-bottom: 1px solid var(--border);">' +
|
||||
'<div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:10px;color: var(--text-muted, #888);">' +
|
||||
'<span>' + fileCount + ' files</span><span>' + time + '</span><span>' + tokens + '</span>' +
|
||||
'</div>' +
|
||||
'<h4 style="margin:0 0 8px 0;font-size:14px;color: var(--text, #3b3b3b);font-weight:700;">' + esc(title) + '</h4>' +
|
||||
'<p style="margin:0;font-size:11px;color: var(--text-muted, #666);line-height:1.4;">' + esc(description) + '</p>' +
|
||||
'</div>' +
|
||||
'<div style="padding:10px 16px;background: var(--surface, #fcfcfc);border-bottom: 1px solid var(--border, #f0f1f2);font-size:11px;">' +
|
||||
'<div style="padding:10px 16px;background: var(--surface);border-bottom: 1px solid var(--border);font-size:11px;">' +
|
||||
'<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">' +
|
||||
'<span style="color: var(--text-muted, #888);">Status</span>' +
|
||||
'<span style="background:' + statusBg + ';color:' + statusColor + ';padding:2px 8px;border-radius:12px;font-weight:600;">' + esc(status) + '</span>' +
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue