Changeset 0.22.9 (#151)
This commit is contained in:
@@ -9,6 +9,7 @@
|
||||
"tools": [
|
||||
{
|
||||
"name": "js_eval",
|
||||
"display_name": "JavaScript Eval",
|
||||
"description": "Execute JavaScript code in a secure browser sandbox. Use this to: verify calculations, run algorithms, transform data, test code snippets, parse/format strings, or any computation. Console output (log/warn/error) is captured. The last expression's value is returned as the result. Has no network access, no DOM access, no access to the parent page. Timeout: 10 seconds.",
|
||||
"parameters": {
|
||||
"type": "object",
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
"tools": [
|
||||
{
|
||||
"name": "regex_test",
|
||||
"display_name": "Regex Tester",
|
||||
"description": "Test a regular expression against one or more input strings. Returns match details including captured groups, indices, and whether each string matched. Use this to verify regex patterns instead of guessing.",
|
||||
"parameters": {
|
||||
"type": "object",
|
||||
|
||||
@@ -670,6 +670,7 @@ func (h *CompletionHandler) ListTools(c *gin.Context) {
|
||||
var manifest struct {
|
||||
Tools []struct {
|
||||
Name string `json:"name"`
|
||||
DisplayName string `json:"display_name"`
|
||||
Description string `json:"description"`
|
||||
} `json:"tools"`
|
||||
}
|
||||
@@ -677,8 +678,13 @@ func (h *CompletionHandler) ListTools(c *gin.Context) {
|
||||
continue
|
||||
}
|
||||
for _, t := range manifest.Tools {
|
||||
displayName := t.DisplayName
|
||||
if displayName == "" {
|
||||
displayName = t.Name
|
||||
}
|
||||
result = append(result, toolInfo{
|
||||
Name: t.Name,
|
||||
DisplayName: displayName,
|
||||
Description: t.Description,
|
||||
Category: "browser",
|
||||
})
|
||||
|
||||
@@ -7,7 +7,15 @@
|
||||
<title>{{block "title" .}}Chat Switchboard{{end}}</title>
|
||||
<link rel="icon" type="image/svg+xml" href="{{.BasePath}}/favicon.svg?v={{.Version}}">
|
||||
<link rel="icon" type="image/x-icon" href="{{.BasePath}}/favicon.ico?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/styles.css?v={{.Version}}">
|
||||
{{/* Decomposed from monolithic styles.css (v0.22.9) */}}
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/variables.css?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/layout.css?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/primitives.css?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/modals.css?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/chat.css?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/panels.css?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/surfaces.css?v={{.Version}}">
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/splash.css?v={{.Version}}">
|
||||
{{if eq .Surface "chat"}}{{template "css-chat" .}}{{end}}
|
||||
{{if eq .Surface "editor"}}{{template "css-editor" .}}{{end}}
|
||||
<style>
|
||||
@@ -73,6 +81,56 @@
|
||||
{{if eq .Surface "editor"}}{{template "scripts-editor" .}}{{end}}
|
||||
{{if eq .Surface "notes"}}{{template "scripts-notes" .}}{{end}}
|
||||
{{if eq .Surface "settings"}}{{template "scripts-settings" .}}{{end}}
|
||||
|
||||
{{/* ── Debug Log Modal (all surfaces) ───── */}}
|
||||
<div id="debugModal" class="modal-overlay">
|
||||
<div class="modal-content modal-lg">
|
||||
<div class="modal-header">
|
||||
<h2>Debug Log</h2>
|
||||
<button class="modal-close" onclick="closeModal('debugModal')">✕</button>
|
||||
</div>
|
||||
<div class="modal-tabs">
|
||||
<button class="debug-tab active" data-tab="console" onclick="switchDebugTab('console')">Console <span id="debugConsoleCount" class="badge">0</span></button>
|
||||
<button class="debug-tab" data-tab="network" onclick="switchDebugTab('network')">Network <span id="debugNetworkCount" class="badge">0</span></button>
|
||||
<button class="debug-tab" data-tab="state" onclick="switchDebugTab('state')">State</button>
|
||||
<button class="debug-tab" data-tab="repl" onclick="switchDebugTab('repl')">REPL</button>
|
||||
</div>
|
||||
<div class="modal-body" style="padding:0;height:400px;overflow:hidden;">
|
||||
<div id="debugConsoleTab" class="debug-tab-content" style="display:block;height:100%;overflow-y:auto;">
|
||||
<div style="padding:8px;display:flex;gap:8px;align-items:center;">
|
||||
<label><input type="checkbox" id="debugFilterErrors"> Errors only</label>
|
||||
<label><input type="checkbox" id="debugAutoScroll" checked> Auto-scroll</label>
|
||||
</div>
|
||||
<div id="debugConsoleContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;"></div>
|
||||
</div>
|
||||
<div id="debugNetworkTab" class="debug-tab-content" style="display:none;height:100%;overflow-y:auto;">
|
||||
<div id="debugNetworkContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;"></div>
|
||||
</div>
|
||||
<div id="debugStateTab" class="debug-tab-content" style="display:none;height:100%;overflow-y:auto;">
|
||||
<div id="debugStateContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;white-space:pre-wrap;"></div>
|
||||
</div>
|
||||
<div id="debugReplTab" class="debug-tab-content" style="display:none;height:100%;display:flex;flex-direction:column;">
|
||||
<div id="replOutput" style="flex:1;overflow-y:auto;font-family:monospace;font-size:12px;padding:8px;"></div>
|
||||
<div style="border-top:1px solid var(--border);padding:8px;">
|
||||
<input type="text" id="replInput" placeholder="Type expression…" style="width:100%;font-family:monospace;font-size:12px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer" style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<div style="display:flex;gap:8px;">
|
||||
<button class="btn-danger btn-small" onclick="runDebugDiagnostics()">Diagnostics</button>
|
||||
<button class="btn-danger btn-small" onclick="purgeCache()">Purge Cache</button>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<button class="btn-secondary btn-small" onclick="clearDebugLog()">Clear</button>
|
||||
<button class="btn-secondary btn-small" onclick="copyDebugLog()">Copy</button>
|
||||
<button class="btn-secondary btn-small" onclick="exportDebugLog()">Export</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/debug.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/repl.js?v={{.Version}}"></script>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
.hero-content { position: relative; z-index: 1; max-width: 520px; }
|
||||
|
||||
.hero-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 1.5rem; }
|
||||
.hero-brand-icon { font-size: 40px; line-height: 1; }
|
||||
.hero-brand-icon { width: 40px; height: 40px; }
|
||||
.hero-brand-text { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
|
||||
.hero-brand-text .hl { color: var(--accent); }
|
||||
|
||||
@@ -182,7 +182,7 @@
|
||||
<div class="hero-orb"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-brand anim anim-1">
|
||||
<span class="hero-brand-icon">🔀</span>
|
||||
<img class="hero-brand-icon" src="{{.BasePath}}/favicon.svg?v={{.Version}}" alt="Chat Switchboard">
|
||||
<span class="hero-brand-text">Chat <span class="hl">Switchboard</span></span>
|
||||
</div>
|
||||
<h1 class="anim anim-2">Your AI conversations,<br>your infrastructure</h1>
|
||||
@@ -197,7 +197,7 @@
|
||||
<span class="hero-pill ac"><span class="hero-pill-icon">🔍</span> Web Search Tools</span>
|
||||
<span class="hero-pill pu"><span class="hero-pill-icon">📝</span> Notes & Memory</span>
|
||||
</div>
|
||||
<p class="hero-version anim anim-5">v{{.Version}} · gobha.ai</p>
|
||||
<p class="hero-version anim anim-5">v{{.Version}}{{if .Environment}} · {{.Environment}}{{end}}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{/* CSS: consolidated into styles.css */}}
|
||||
{{/* CSS: loaded via base.html (variables, layout, primitives, modals, chat, panels, surfaces, splash) */}}
|
||||
{{define "css-admin"}}{{end}}
|
||||
|
||||
{{/* Scripts */}}
|
||||
|
||||
@@ -175,7 +175,7 @@ window.addEventListener('unhandledrejection', function(e) {
|
||||
</button>
|
||||
<button id="menuDebug" class="flyout-item" style="display:none;">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/><path d="M12 6V12L16 14"/></svg>
|
||||
<span>Debug Console</span>
|
||||
<span>Debug Log</span>
|
||||
</button>
|
||||
<hr class="flyout-divider">
|
||||
<button id="menuSignout" class="flyout-item flyout-danger">
|
||||
@@ -643,44 +643,7 @@ window.addEventListener('unhandledrejection', function(e) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{/* ── Debug Modal ─────────────────────────── */}}
|
||||
<div id="debugModal" class="modal-overlay">
|
||||
<div class="modal-content modal-lg">
|
||||
<div class="modal-header">
|
||||
<h2>Debug Console</h2>
|
||||
<button class="modal-close" onclick="closeModal('debugModal')">✕</button>
|
||||
</div>
|
||||
<div class="modal-tabs">
|
||||
<button class="debug-tab active" data-dtab="console" onclick="switchDebugTab('console')">Console</button>
|
||||
<button class="debug-tab" data-dtab="network" onclick="switchDebugTab('network')">Network</button>
|
||||
<button class="debug-tab" data-dtab="state" onclick="switchDebugTab('state')">State</button>
|
||||
<button class="debug-tab" data-dtab="repl" onclick="switchDebugTab('repl')">REPL</button>
|
||||
</div>
|
||||
<div class="modal-body" style="padding:0;height:400px;overflow:hidden;">
|
||||
<div id="debugConsoleTab" class="debug-tab-content" style="display:block;height:100%;overflow-y:auto;">
|
||||
<div style="padding:8px;display:flex;gap:8px;align-items:center;">
|
||||
<label><input type="checkbox" id="debugAutoScroll" checked> Auto-scroll</label>
|
||||
<label><input type="checkbox" id="debugFilterErrors"> Errors only</label>
|
||||
<span id="debugConsoleCount" class="badge">0</span>
|
||||
</div>
|
||||
<div id="debugConsoleContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;"></div>
|
||||
</div>
|
||||
<div id="debugNetworkTab" class="debug-tab-content" style="display:none;height:100%;overflow-y:auto;">
|
||||
<div style="padding:8px;"><span id="debugNetworkCount" class="badge">0</span> requests</div>
|
||||
<div id="debugNetworkContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;"></div>
|
||||
</div>
|
||||
<div id="debugStateTab" class="debug-tab-content" style="display:none;height:100%;overflow-y:auto;">
|
||||
<div id="debugStateContent" class="debug-content" style="font-family:monospace;font-size:12px;padding:8px;white-space:pre-wrap;"></div>
|
||||
</div>
|
||||
<div id="debugReplTab" class="debug-tab-content" style="display:none;height:100%;display:flex;flex-direction:column;">
|
||||
<div id="replOutput" style="flex:1;overflow-y:auto;font-family:monospace;font-size:12px;padding:8px;"></div>
|
||||
<div style="border-top:1px solid var(--border);padding:8px;">
|
||||
<input type="text" id="replInput" placeholder="Type expression…" style="width:100%;font-family:monospace;font-size:12px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/* ── Debug Modal moved to base.html (available on all surfaces) ── */}}
|
||||
|
||||
{{/* ── Notification bell is now inside .chat-header ── */}}
|
||||
|
||||
@@ -726,8 +689,7 @@ window.addEventListener('unhandledrejection', function(e) {
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/vendor/purify.min.js" onerror="this.onerror=null;this.src='https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.4/purify.min.js'"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/vendor/codemirror/codemirror.bundle.js?v={{$.Version}}" onerror="console.warn('[CM6] Bundle not available — falling back to textarea')"></script>
|
||||
{{/* App JS — order matches index.html (minus api/events/ui-primitives already in base) */}}
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/debug.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/repl.js?v={{$.Version}}"></script>
|
||||
{{/* debug.js and repl.js now loaded in base.html for all surfaces */}}
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/extensions.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/panels.js?v={{$.Version}}"></script>
|
||||
<script nonce="{{$.CSPNonce}}" src="{{$.BasePath}}/js/ui-format.js?v={{$.Version}}"></script>
|
||||
|
||||
@@ -111,7 +111,7 @@
|
||||
<div id="toastContainer" class="toast-container"></div>
|
||||
{{end}}
|
||||
|
||||
{{/* CSS: consolidated into styles.css */}}
|
||||
{{/* CSS: loaded via base.html (variables, layout, primitives, modals, chat, panels, surfaces, splash) */}}
|
||||
{{define "css-editor"}}
|
||||
<link rel="stylesheet" href="{{.BasePath}}/css/editor-mode.css?v={{.Version}}">
|
||||
{{end}}
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/memory-ui.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/notifications.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/panels.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/debug.js?v={{.Version}}"></script>
|
||||
{{/* debug.js now loaded in base.html for all surfaces */}}
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/projects-ui.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}" src="{{.BasePath}}/js/app.js?v={{.Version}}"></script>
|
||||
<script nonce="{{.CSPNonce}}">
|
||||
|
||||
@@ -150,7 +150,7 @@
|
||||
<div id="toastContainer" class="toast-container"></div>
|
||||
{{end}}
|
||||
|
||||
{{/* CSS: consolidated into styles.css */}}
|
||||
{{/* CSS: loaded via base.html (variables, layout, primitives, modals, chat, panels, surfaces, splash) */}}
|
||||
{{define "css-settings"}}{{end}}
|
||||
|
||||
{{/* Scripts */}}
|
||||
|
||||
@@ -1,8 +1,29 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"os"
|
||||
"strings"
|
||||
)
|
||||
|
||||
// Version is set at build time via:
|
||||
//
|
||||
// go build -ldflags "-X main.Version=$(cat VERSION)"
|
||||
//
|
||||
// Falls back to "dev" for local builds without ldflags.
|
||||
// Falls back to reading /VERSION or ./VERSION for container/local runs
|
||||
// without ldflags. Final fallback is "dev".
|
||||
var Version = "dev"
|
||||
|
||||
func init() {
|
||||
if Version != "dev" {
|
||||
return
|
||||
}
|
||||
// Try well-known paths: container (/VERSION), repo root (../VERSION, ./VERSION)
|
||||
for _, path := range []string{"/VERSION", "VERSION", "../VERSION"} {
|
||||
if data, err := os.ReadFile(path); err == nil {
|
||||
if v := strings.TrimSpace(string(data)); v != "" {
|
||||
Version = v
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
596
src/css/chat.css
Normal file
596
src/css/chat.css
Normal file
@@ -0,0 +1,596 @@
|
||||
/* ── chat.css ────────────────────────────────
|
||||
Chat area, model dropdown, markdown, input, files
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
/* ── Chat Area ───────────────────────────── */
|
||||
|
||||
/* .chat-area is now .workspace-primary — alias kept for compat */
|
||||
.chat-area, .workspace-primary { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); }
|
||||
|
||||
/* Role fallback banner */
|
||||
.role-fallback-banner {
|
||||
background: var(--warning-dim); color: var(--warning);
|
||||
text-align: center; font-size: 12px; font-weight: 500;
|
||||
padding: 6px 12px; flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Chat header (model selector + caps + token count + panel toggle) */
|
||||
.chat-header {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 8px 16px; flex-shrink: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.chat-header-right {
|
||||
margin-left: auto; display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.token-count {
|
||||
font-size: 11px; color: var(--text-3);
|
||||
font-family: var(--mono); white-space: nowrap;
|
||||
}
|
||||
.summarized-badge {
|
||||
font-size: 11px; color: var(--text-3); white-space: nowrap;
|
||||
display: inline-flex; align-items: center; gap: 4px;
|
||||
}
|
||||
|
||||
/* Message container (scrollable) */
|
||||
.msg-container {
|
||||
flex: 1; overflow-y: auto; scroll-behavior: smooth;
|
||||
padding-top: 12px; padding-bottom: 8px;
|
||||
}
|
||||
.msg-container::-webkit-scrollbar { width: 5px; }
|
||||
.msg-container::-webkit-scrollbar-track { background: transparent; }
|
||||
.msg-container::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--border); }
|
||||
|
||||
/* Streaming tools display */
|
||||
.stream-tools {
|
||||
padding: 8px 24px; flex-shrink: 0;
|
||||
font-size: 12px; color: var(--text-3);
|
||||
display: flex; gap: 6px; align-items: center;
|
||||
}
|
||||
|
||||
.model-bar {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 8px 16px; flex-shrink: 0;
|
||||
}
|
||||
.model-bar select {
|
||||
background: transparent; border: 1px solid transparent;
|
||||
color: var(--text); font-size: 14px; font-weight: 500;
|
||||
padding: 4px 8px; border-radius: var(--radius); cursor: pointer;
|
||||
font-family: var(--font); max-width: 300px;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
.model-bar select:hover { border-color: var(--border); }
|
||||
.model-bar select:focus { outline: none; border-color: var(--accent); }
|
||||
.model-bar select option { background: var(--bg-surface); color: var(--text); }
|
||||
|
||||
/* ── Custom Model Dropdown ───────────────── */
|
||||
|
||||
.model-dropdown { position: relative; }
|
||||
.model-dropdown-btn {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
background: none; border: 1px solid transparent;
|
||||
color: var(--text); font-size: 14px; font-weight: 500;
|
||||
padding: 4px 8px; border-radius: var(--radius); cursor: pointer;
|
||||
font-family: var(--font); max-width: 340px;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
.model-dropdown-btn:hover { border-color: var(--border); }
|
||||
.model-dropdown-btn svg { flex-shrink: 0; opacity: 0.5; }
|
||||
.model-dropdown-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.model-dropdown-menu {
|
||||
display: none; position: absolute; top: 100%; left: 0; z-index: 200;
|
||||
min-width: 280px; max-width: 400px; max-height: 400px; overflow-y: auto;
|
||||
background: var(--bg-raised); border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius); padding: 4px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.model-dropdown-menu.open { display: block; }
|
||||
.model-dropdown-group {
|
||||
padding: 6px 10px 4px; font-size: 11px; font-weight: 600;
|
||||
color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px;
|
||||
}
|
||||
.model-dropdown-item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 7px 10px; border-radius: 4px;
|
||||
cursor: pointer; font-size: 13px;
|
||||
color: var(--text-2); white-space: nowrap;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
.model-dropdown-item:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.model-dropdown-item.selected { background: var(--bg-hover); color: var(--accent); }
|
||||
.model-dropdown-item .item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
|
||||
.model-dropdown-item .item-provider { margin-left: auto; font-size: 10px; color: var(--text-3); }
|
||||
.dropdown-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
|
||||
|
||||
.model-caps {
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
margin-left: 4px; flex-wrap: wrap;
|
||||
}
|
||||
.cap-badge {
|
||||
display: inline-flex; align-items: center; gap: 3px;
|
||||
font-size: 10px; line-height: 1; padding: 2px 6px;
|
||||
border-radius: 3px; white-space: nowrap;
|
||||
background: var(--bg-raised); color: var(--text-3);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.cap-badge.cap-accent {
|
||||
color: var(--accent); border-color: color-mix(in srgb, var(--accent), transparent 80%);
|
||||
background: color-mix(in srgb, var(--accent), transparent 92%);
|
||||
}
|
||||
.cap-badge.cap-context {
|
||||
color: var(--text-3);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: none; border: none; color: var(--text-3); cursor: pointer;
|
||||
padding: 4px; border-radius: 4px;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
.icon-btn:hover { color: var(--text); }
|
||||
|
||||
/* Messages — Bubble Layout (matching prototype) */
|
||||
.messages { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
|
||||
|
||||
.message { padding: 10px 24px; }
|
||||
|
||||
.msg-inner { max-width: 768px; margin: 0 auto; display: flex; gap: 10px; }
|
||||
|
||||
/* User messages: right-aligned bubble */
|
||||
.message.user { display: flex; justify-content: flex-end; }
|
||||
.message.user .msg-inner { flex-direction: row-reverse; }
|
||||
.message.user .msg-body {
|
||||
background: var(--user-bubble);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 16px 16px 4px 16px;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
.message.user .msg-head { flex-direction: row-reverse; }
|
||||
.message.user .msg-role { color: var(--accent); }
|
||||
.message.user .msg-avatar { color: var(--accent); }
|
||||
|
||||
/* Assistant messages: left-aligned bubble */
|
||||
.message.assistant .msg-body {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px 16px 16px 4px;
|
||||
padding: 10px 14px;
|
||||
}
|
||||
|
||||
.msg-avatar {
|
||||
width: 28px; height: 28px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 14px; flex-shrink: 0; margin-top: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.msg-avatar-img {
|
||||
width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
|
||||
}
|
||||
.message.user .msg-avatar { background: var(--accent-dim); }
|
||||
.message.assistant .msg-avatar { background: var(--bg-raised); }
|
||||
|
||||
.msg-body { flex: 1; min-width: 0; }
|
||||
.msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
|
||||
.msg-role { font-size: 13px; font-weight: 600; }
|
||||
.msg-time { font-size: 11px; color: var(--text-3); }
|
||||
.msg-actions {
|
||||
margin-left: auto; display: flex; gap: 2px; opacity: 0;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
.message:hover .msg-actions { opacity: 1; }
|
||||
.msg-action-btn {
|
||||
background: none; border: none; color: var(--text-3); cursor: pointer;
|
||||
padding: 2px 6px; border-radius: 4px; font-size: 11px;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
.msg-action-btn:hover { background: var(--bg-hover); color: var(--text); }
|
||||
|
||||
/* Branch navigation indicator */
|
||||
.branch-nav {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-size: 12px;
|
||||
color: var(--text-3);
|
||||
}
|
||||
.branch-arrow {
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
color: var(--text-2);
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.branch-arrow:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
|
||||
.branch-arrow:disabled { opacity: 0.25; cursor: default; }
|
||||
.branch-pos {
|
||||
font-size: 11px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 28px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Inline message editing */
|
||||
.msg-edit-input {
|
||||
width: 100%;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
padding: 10px 12px;
|
||||
font-family: var(--font);
|
||||
font-size: var(--msg-font, 14px);
|
||||
line-height: 1.6;
|
||||
resize: vertical;
|
||||
min-height: 60px;
|
||||
max-height: 400px;
|
||||
outline: none;
|
||||
}
|
||||
.msg-edit-input:focus { border-color: var(--accent-hover); box-shadow: 0 0 0 2px var(--accent-dim); }
|
||||
.msg-edit-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.msg-edit-cancel, .msg-edit-submit {
|
||||
padding: 6px 14px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.msg-edit-cancel {
|
||||
background: var(--bg-raised);
|
||||
color: var(--text-2);
|
||||
}
|
||||
.msg-edit-cancel:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.msg-edit-submit {
|
||||
background: var(--accent);
|
||||
color: var(--text-on-color);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.msg-edit-submit:hover { background: var(--accent-hover); }
|
||||
|
||||
.msg-text { font-size: var(--msg-font, 14px); line-height: 1.7; }
|
||||
|
||||
/* ── Markdown Content ────────────────────── */
|
||||
|
||||
.msg-text p { margin: 0.4em 0; }
|
||||
.msg-text p:first-child { margin-top: 0; }
|
||||
.msg-text p:last-child { margin-bottom: 0; }
|
||||
|
||||
.msg-text pre {
|
||||
background: var(--bg-surface); border: 1px solid var(--border);
|
||||
padding: 0.75rem 1rem; border-radius: var(--radius);
|
||||
overflow-x: auto; margin: 0.75rem 0; position: relative;
|
||||
font-size: 13px;
|
||||
}
|
||||
.msg-text code {
|
||||
font-family: var(--mono); font-size: 0.9em;
|
||||
background: var(--bg-raised); padding: 0.15em 0.4em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.msg-text pre code { background: none; padding: 0; font-size: inherit; }
|
||||
|
||||
/* Code block toolbar */
|
||||
.code-toolbar {
|
||||
position: absolute; top: 6px; right: 6px;
|
||||
display: flex; gap: 4px; align-items: center;
|
||||
opacity: 0; transition: opacity var(--transition);
|
||||
}
|
||||
.msg-text pre:hover .code-toolbar { opacity: 1; }
|
||||
.code-block.code-collapsed .code-toolbar { opacity: 1; }
|
||||
.copy-code-btn {
|
||||
background: var(--bg-raised); border: 1px solid var(--border);
|
||||
color: var(--text-3); border-radius: 4px;
|
||||
padding: 2px 10px; font-size: 11px; cursor: pointer;
|
||||
transition: color var(--transition), border-color var(--transition);
|
||||
}
|
||||
.copy-code-btn:hover { color: var(--text); border-color: var(--border-light); }
|
||||
.code-collapse-btn {
|
||||
background: var(--bg-raised); border: 1px solid var(--border);
|
||||
color: var(--text-3); border-radius: 4px;
|
||||
padding: 2px 10px; font-size: 11px; cursor: pointer;
|
||||
font-family: var(--mono); white-space: nowrap;
|
||||
transition: color var(--transition), border-color var(--transition);
|
||||
}
|
||||
.code-collapse-btn:hover { color: var(--text); border-color: var(--border-light); }
|
||||
|
||||
/* Collapsed code block */
|
||||
.code-block.code-collapsed code {
|
||||
max-height: 3.6em; overflow: hidden; display: block;
|
||||
mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
|
||||
}
|
||||
|
||||
/* Language label */
|
||||
.code-lang {
|
||||
position: absolute; top: 6px; left: 10px;
|
||||
font-size: 10px; color: var(--text-3); font-family: var(--mono);
|
||||
text-transform: uppercase; letter-spacing: 0.5px; user-select: none;
|
||||
}
|
||||
|
||||
/* ── Extension-rendered blocks ──────── */
|
||||
|
||||
.ext-rendered {
|
||||
margin: 12px 0;
|
||||
position: relative;
|
||||
}
|
||||
.ext-popout-btn {
|
||||
position: absolute; top: 4px; right: 4px;
|
||||
background: var(--bg-raised); border: 1px solid var(--border);
|
||||
color: var(--text-3); cursor: pointer; font-size: 14px;
|
||||
width: 26px; height: 26px; border-radius: var(--radius);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
opacity: 0; transition: opacity 0.15s, background 0.15s;
|
||||
z-index: 5;
|
||||
}
|
||||
.ext-rendered:hover .ext-popout-btn { opacity: 1; }
|
||||
.ext-popout-btn:hover { background: var(--bg-hover); color: var(--text); }
|
||||
|
||||
/* HTML preview */
|
||||
|
||||
/* ── Input Area ──────────────────────────── */
|
||||
|
||||
.input-area { padding: 0 1rem 1rem; flex-shrink: 0; }
|
||||
.input-area:empty { padding: 0; min-height: 0; }
|
||||
|
||||
/* Token counter below input */
|
||||
.input-meta { display: flex; justify-content: space-between; align-items: center; padding: 2px 12px 0; min-height: 18px; }
|
||||
.input-token-count { font-size: 0.68rem; color: var(--text-3); transition: color 0.2s; }
|
||||
.input-token-count.warning { color: var(--warning); }
|
||||
.input-token-count.danger { color: var(--danger); }
|
||||
|
||||
/* Context length warning banner */
|
||||
.context-warning {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 6px 12px; margin-bottom: 8px; border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--warning) 12%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
|
||||
font-size: 0.78rem; color: var(--text-2); animation: fadeIn 0.2s ease;
|
||||
}
|
||||
.context-warning.danger {
|
||||
background: color-mix(in srgb, var(--danger) 12%, transparent);
|
||||
border-color: color-mix(in srgb, var(--danger) 25%, transparent);
|
||||
}
|
||||
.context-warning-icon { flex-shrink: 0; }
|
||||
.context-warning-text { flex: 1; }
|
||||
.context-warning-dismiss { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 0 2px; font-size: 0.85rem; }
|
||||
.context-warning-dismiss:hover { color: var(--text); }
|
||||
.context-warning-action {
|
||||
flex-shrink: 0; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--border);
|
||||
background: var(--bg-surface); color: var(--text); cursor: pointer;
|
||||
font-size: 0.75rem; white-space: nowrap; transition: all var(--transition);
|
||||
}
|
||||
.context-warning-action:hover { background: var(--accent); color: var(--text-on-color); border-color: var(--accent); }
|
||||
.context-warning-action:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.context-warning-action:disabled:hover { background: var(--bg-surface); color: var(--text); border-color: var(--border); }
|
||||
.context-warning-toggle {
|
||||
display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
|
||||
font-size: 0.72rem; color: var(--text-3); cursor: pointer; white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
.context-warning-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }
|
||||
/* Summary message node */
|
||||
.message-summary {
|
||||
border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
|
||||
border-radius: 8px; padding: 10px 14px; margin: 4px 0;
|
||||
background: color-mix(in srgb, var(--accent) 6%, transparent);
|
||||
font-size: 0.85rem; position: relative;
|
||||
}
|
||||
.message-summary .summary-header {
|
||||
display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
|
||||
font-size: 0.75rem; color: var(--text-3); font-weight: 500;
|
||||
}
|
||||
.message-summary .summary-toggle {
|
||||
background: none; border: none; color: var(--accent); cursor: pointer;
|
||||
font-size: 0.75rem; padding: 0; text-decoration: underline;
|
||||
}
|
||||
.message-summary .summary-toggle:hover { color: var(--text); }
|
||||
.msg-dimmed { opacity: 0.5; }
|
||||
.message-summary-divider {
|
||||
text-align: center; padding: 8px 0; margin: 4px 0;
|
||||
}
|
||||
.message-summary-divider .summary-toggle {
|
||||
background: none; border: none; color: var(--text-3); cursor: pointer;
|
||||
font-size: 0.78rem; padding: 4px 12px; border-radius: 4px;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.message-summary-divider .summary-toggle:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
|
||||
.input-wrap {
|
||||
max-width: 768px; margin: 0 auto; width: 100%; box-sizing: border-box;
|
||||
background: var(--bg-surface); border: 1px solid var(--border);
|
||||
border-radius: 12px; padding: 0;
|
||||
display: flex; align-items: flex-end;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
.input-wrap:focus-within { border-color: var(--border-light); }
|
||||
|
||||
.input-wrap textarea {
|
||||
flex: 1; resize: none; background: none; border: none;
|
||||
color: var(--text); padding: 12px 0 12px 14px;
|
||||
font-family: var(--font); font-size: 14px;
|
||||
max-height: 200px; line-height: 1.5;
|
||||
}
|
||||
.input-wrap textarea:focus { outline: none; }
|
||||
.input-wrap textarea::placeholder { color: var(--text-3); }
|
||||
|
||||
/* CM6 chat input — match textarea layout within .input-wrap */
|
||||
#messageInputWrap {
|
||||
flex: 1; min-width: 0;
|
||||
}
|
||||
#messageInputWrap .cm-editor {
|
||||
background: transparent;
|
||||
padding: 12px 0 12px 8px;
|
||||
max-height: 200px;
|
||||
font-family: var(--font);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
#messageInputWrap .cm-editor.cm-focused { outline: none; }
|
||||
#messageInputWrap .cm-scroller { overflow-y: auto; }
|
||||
|
||||
/* CM6 extension editor containers */
|
||||
.ext-edit-form .cm-editor {
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.input-actions { display: flex; align-items: center; gap: 2px; padding: 6px 8px; }
|
||||
|
||||
/* Chat input area wrapper (bottom pinned, padded) */
|
||||
.chat-input-area {
|
||||
padding: 0 16px 16px; flex-shrink: 0;
|
||||
}
|
||||
.chat-footer {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 4px 4px 0; max-width: 768px; margin: 0 auto;
|
||||
min-height: 18px;
|
||||
}
|
||||
.chat-version { font-size: 10px; color: var(--text-3); }
|
||||
.input-token-count {
|
||||
font-size: 10px; color: var(--text-3);
|
||||
font-family: var(--mono); margin-right: 4px; white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Left-side toolbar: attach, tools, KB — single container handles alignment */
|
||||
.input-toolbar {
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
padding: 0 4px 6px; flex-shrink: 0;
|
||||
max-width: 768px; margin: 0 auto; width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: none; border: none; color: var(--text-3); cursor: pointer;
|
||||
padding: 6px; border-radius: var(--radius);
|
||||
transition: background var(--transition), color var(--transition);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.action-btn:hover { background: var(--bg-hover); color: var(--text); }
|
||||
|
||||
.send-btn { color: var(--accent); }
|
||||
.send-btn:hover { background: var(--accent-dim); color: var(--accent-hover); }
|
||||
.send-btn:disabled { opacity: 0.3; cursor: not-allowed; }
|
||||
|
||||
.stop-btn { display: none; color: var(--warning); }
|
||||
.stop-btn.visible { display: flex; }
|
||||
|
||||
/* ── Files ─────────────────────────── */
|
||||
|
||||
.attach-btn { color: var(--text-3); }
|
||||
.attach-btn:hover { color: var(--text); }
|
||||
|
||||
.file-strip {
|
||||
max-width: 768px; margin: 0 auto; padding: 6px 8px 2px;
|
||||
display: flex; gap: 6px; flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.att-chip {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
background: var(--bg-raised); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 4px 6px;
|
||||
font-size: 12px; max-width: 220px; position: relative;
|
||||
}
|
||||
.att-chip.att-ready { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
|
||||
.att-chip.att-error { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
|
||||
.att-chip.att-pending { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
|
||||
|
||||
.att-thumb {
|
||||
width: 32px; height: 32px; object-fit: cover;
|
||||
border-radius: 3px; flex-shrink: 0;
|
||||
}
|
||||
.att-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
|
||||
|
||||
.att-info { display: flex; flex-direction: column; min-width: 0; }
|
||||
.att-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-weight: 500; }
|
||||
.att-meta { color: var(--text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
.att-remove {
|
||||
background: none; border: none; color: var(--text-3); cursor: pointer;
|
||||
padding: 2px 4px; font-size: 13px; line-height: 1; border-radius: 3px;
|
||||
flex-shrink: 0; margin-left: auto;
|
||||
}
|
||||
.att-remove:hover { background: var(--bg-hover); color: var(--text); }
|
||||
|
||||
/* Drag-and-drop overlay on chat area */
|
||||
.messages.drag-over {
|
||||
outline: 2px dashed var(--accent);
|
||||
outline-offset: -4px;
|
||||
background: color-mix(in srgb, var(--accent) 4%, var(--bg));
|
||||
}
|
||||
|
||||
/* ── Message Files ────────────────────── */
|
||||
|
||||
.msg-files {
|
||||
display: flex; gap: 8px; flex-wrap: wrap;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.msg-att-image {
|
||||
cursor: pointer; position: relative; border-radius: var(--radius);
|
||||
overflow: hidden; border: 1px solid var(--border);
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
.msg-att-image:hover { border-color: var(--accent); }
|
||||
.msg-att-image img {
|
||||
display: block; max-height: 280px; border-radius: var(--radius);
|
||||
background: var(--bg-raised);
|
||||
}
|
||||
.msg-att-image img.att-load-error {
|
||||
min-width: 120px; min-height: 60px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 13px; color: var(--text-3);
|
||||
}
|
||||
|
||||
.att-vision-hint {
|
||||
position: absolute; top: 4px; right: 4px;
|
||||
background: color-mix(in srgb, var(--bg) 85%, transparent);
|
||||
border-radius: 4px; padding: 2px 5px; font-size: 14px;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.msg-att-doc {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 8px 12px; border: 1px solid var(--border);
|
||||
border-radius: var(--radius); background: var(--bg-raised);
|
||||
text-decoration: none; color: var(--text);
|
||||
max-width: 280px; transition: border-color var(--transition);
|
||||
}
|
||||
.msg-att-doc:hover { border-color: var(--accent); }
|
||||
.att-doc-icon { font-size: 20px; flex-shrink: 0; }
|
||||
.att-doc-info { display: flex; flex-direction: column; min-width: 0; }
|
||||
.att-doc-name {
|
||||
font-size: 13px; font-weight: 500;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.att-doc-size { font-size: 11px; color: var(--text-3); }
|
||||
.att-doc-dl { color: var(--text-3); font-size: 14px; margin-left: auto; }
|
||||
|
||||
/* ── Image Lightbox ─────────────────────────── */
|
||||
|
||||
.lightbox-overlay {
|
||||
display: none; position: fixed; inset: 0; z-index: 10000;
|
||||
background: rgba(0,0,0,0.85); align-items: center; justify-content: center;
|
||||
}
|
||||
.lightbox-overlay.active { display: flex; }
|
||||
.lightbox-overlay img {
|
||||
max-width: 92vw; max-height: 90vh; object-fit: contain;
|
||||
border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
||||
}
|
||||
.lightbox-close {
|
||||
position: absolute; top: 16px; right: 20px;
|
||||
background: rgba(255,255,255,0.15); border: none; color: var(--text-on-color);
|
||||
font-size: 22px; width: 40px; height: 40px; border-radius: 50%;
|
||||
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.lightbox-close:hover { background: rgba(255,255,255,0.3); }
|
||||
|
||||
401
src/css/layout.css
Normal file
401
src/css/layout.css
Normal file
@@ -0,0 +1,401 @@
|
||||
/* ── layout.css ──────────────────────────────
|
||||
App shell, workspace, sidebar, responsive
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
/* ── App Shell ───────────────────────────── */
|
||||
|
||||
.app { display: flex; height: 100%; flex-direction: column; }
|
||||
.app-body { display: flex; flex: 1; min-height: 0; }
|
||||
|
||||
/* ── Workspace (everything right of sidebar) ── */
|
||||
|
||||
.workspace {
|
||||
display: flex; flex: 1; min-width: 0; min-height: 0;
|
||||
overflow: hidden; position: relative;
|
||||
}
|
||||
.workspace-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
|
||||
.workspace-primary { flex: 1; min-width: 0; background: var(--bg); }
|
||||
.workspace-secondary {
|
||||
width: 0; min-width: 0; overflow: hidden;
|
||||
background: var(--bg); border-left: 1px solid var(--border);
|
||||
transition: width 0.25s ease, min-width 0.25s ease;
|
||||
}
|
||||
.workspace-secondary.open {
|
||||
width: 480px; min-width: 480px;
|
||||
}
|
||||
.workspace-secondary.fullscreen {
|
||||
position: fixed; top: 0; right: 0; bottom: 0;
|
||||
width: 100% !important; min-width: 100% !important;
|
||||
z-index: 100; transition: none;
|
||||
}
|
||||
.workspace-handle {
|
||||
width: 0; flex-shrink: 0; position: relative; z-index: 10;
|
||||
}
|
||||
.workspace-handle.active {
|
||||
width: 6px; cursor: col-resize;
|
||||
}
|
||||
.workspace-handle.active::after {
|
||||
content: ''; position: absolute; inset: 0;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.workspace-handle.active:hover::after { background: var(--accent); opacity: 0.3; }
|
||||
.workspace-secondary.fullscreen ~ .workspace-handle { display: none; }
|
||||
|
||||
/* ── Environment Banners ──────────────────── */
|
||||
|
||||
.banner {
|
||||
display: none;
|
||||
width: 100%; text-align: center;
|
||||
font-size: 12px; font-weight: 700; letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
padding: 2px 0; line-height: 1.4;
|
||||
background: var(--banner-bg); color: var(--banner-fg);
|
||||
flex-shrink: 0; z-index: 9999;
|
||||
min-height: 22px; box-sizing: border-box;
|
||||
}
|
||||
.banner.active { display: flex; align-items: center; justify-content: center; }
|
||||
.banner-top { order: -1; }
|
||||
.banner-bottom { order: 999; }
|
||||
|
||||
/* ── Sidebar ─────────────────────────────── */
|
||||
|
||||
.sidebar {
|
||||
width: var(--sidebar-w); background: var(--bg-surface);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex; flex-direction: column;
|
||||
transition: width var(--transition);
|
||||
overflow: hidden; flex-shrink: 0;
|
||||
}
|
||||
.sidebar.collapsed { width: var(--sidebar-rail); }
|
||||
|
||||
.sidebar-top {
|
||||
display: flex; flex-direction: column; gap: 2px;
|
||||
padding: 10px 10px 6px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* Brand / collapse toggle */
|
||||
.sb-brand {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 10px; border-radius: var(--radius);
|
||||
background: none; border: none; color: var(--text);
|
||||
cursor: pointer; font-size: 13px; white-space: nowrap;
|
||||
transition: background var(--transition); width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.sb-brand:hover { background: var(--bg-hover); }
|
||||
.sb-logo { flex-shrink: 0; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; }
|
||||
.sb-logo img, .sb-logo .brand-logo-img { width: 22px; height: 22px; object-fit: contain; border-radius: 3px; }
|
||||
.brand-collapse { display: none; }
|
||||
.brand-text { font-weight: 600; font-size: 14px; }
|
||||
|
||||
.sb-btn {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 10px; border-radius: var(--radius);
|
||||
background: none; border: none; color: var(--text-2);
|
||||
cursor: pointer; font-size: 13px; white-space: nowrap;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
width: 100%;
|
||||
}
|
||||
.sb-btn:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.sb-btn svg { flex-shrink: 0; }
|
||||
/* Sidebar toggle: hidden on desktop (brand click handles collapse) */
|
||||
.sidebar-toggle { display: none; }
|
||||
.sb-label { overflow: hidden; transition: opacity var(--transition); }
|
||||
.sidebar.collapsed .sb-label { opacity: 0; width: 0; }
|
||||
.sidebar.collapsed .brand-text { opacity: 0; width: 0; }
|
||||
|
||||
/* Collapsed centering */
|
||||
.sidebar.collapsed .sidebar-top { padding: 10px 0 8px; align-items: center; }
|
||||
.sidebar.collapsed .sidebar-bottom { padding: 8px 0; display: flex; flex-direction: column; align-items: center; }
|
||||
.sidebar.collapsed .sb-brand { justify-content: center; padding: 8px 0; gap: 0; }
|
||||
.sidebar.collapsed .sb-btn { justify-content: center; padding: 8px 0; gap: 0; }
|
||||
.sidebar.collapsed .split-btn-main { justify-content: center; padding: 8px 0; gap: 0; }
|
||||
.sidebar.collapsed .user-btn { justify-content: center; padding: 6px 0; gap: 0; }
|
||||
.sidebar.collapsed .user-flyout {
|
||||
position: fixed;
|
||||
left: var(--sidebar-rail);
|
||||
bottom: 8px;
|
||||
right: auto;
|
||||
width: 200px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.sidebar.collapsed .avatar-bug { display: none; }
|
||||
|
||||
/* Split button (New Chat + dropdown) */
|
||||
.split-btn { display: flex; width: 100%; gap: 0; position: relative; }
|
||||
.split-btn-main {
|
||||
flex: 1; display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 10px; border-radius: var(--radius) 0 0 var(--radius);
|
||||
background: none; border: none; color: var(--text-2);
|
||||
cursor: pointer; font-size: 13px; white-space: nowrap;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
.split-btn-main:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.split-btn-main svg { flex-shrink: 0; }
|
||||
|
||||
.split-btn-drop {
|
||||
display: flex; align-items: center; padding: 8px 6px;
|
||||
border-radius: 0 var(--radius) var(--radius) 0;
|
||||
background: none; border: none; border-left: 1px solid var(--border);
|
||||
color: var(--text-3); cursor: pointer;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
.split-btn-drop:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.sidebar.collapsed .split-btn-drop { display: none; }
|
||||
|
||||
/* Dropdown menu */
|
||||
.split-dropdown {
|
||||
display: none; position: absolute; left: 6px; right: 6px;
|
||||
top: 100%; z-index: 200;
|
||||
background: var(--bg-raised); border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius); padding: 4px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
|
||||
}
|
||||
.split-dropdown.open { display: block; }
|
||||
.split-dropdown-item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 7px 10px; border-radius: 4px; width: 100%;
|
||||
background: none; border: none; color: var(--text-2);
|
||||
cursor: pointer; font-size: 12px; white-space: nowrap;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
.split-dropdown-item:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.split-dropdown-item.disabled { opacity: 0.4; pointer-events: none; }
|
||||
.split-dropdown-item .dd-hint {
|
||||
margin-left: auto; font-size: 10px; color: var(--text-3);
|
||||
}
|
||||
|
||||
/* Chat/Channel list */
|
||||
.sidebar-chats {
|
||||
flex: 1; overflow-y: auto; overflow-x: hidden;
|
||||
padding: 8px 6px;
|
||||
}
|
||||
.sidebar-chats::-webkit-scrollbar { width: 4px; }
|
||||
|
||||
/* Channels section header */
|
||||
.sidebar-section-header {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 8px 10px 4px; cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.sidebar-section-header .section-arrow {
|
||||
font-size: 10px; color: var(--text-3); transition: transform var(--transition);
|
||||
}
|
||||
.sidebar-section-header.collapsed .section-arrow { transform: rotate(-90deg); }
|
||||
.sidebar-section-header .section-label {
|
||||
font-size: 11px; font-weight: 600; color: var(--text-3);
|
||||
text-transform: uppercase; letter-spacing: 0.5px;
|
||||
}
|
||||
.sidebar-section-header .section-count {
|
||||
font-size: 10px; color: var(--text-3); margin-left: auto;
|
||||
}
|
||||
.sidebar.collapsed .sidebar-section-header { display: none; }
|
||||
|
||||
.channel-item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 7px 10px; border-radius: var(--radius);
|
||||
cursor: pointer; font-size: 13px; color: var(--text-2);
|
||||
transition: background var(--transition); position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.channel-item:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.channel-item.active { background: var(--bg-raised); color: var(--text); }
|
||||
.channel-item .channel-hash { color: var(--text-3); font-weight: 600; flex-shrink: 0; }
|
||||
.channel-item .channel-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.sidebar.collapsed .channel-item .channel-name { display: none; }
|
||||
|
||||
.chat-group-label {
|
||||
font-size: 11px; font-weight: 600; color: var(--text-3);
|
||||
padding: 12px 10px 4px; text-transform: uppercase; letter-spacing: 0.5px;
|
||||
white-space: nowrap; overflow: hidden;
|
||||
}
|
||||
.sidebar.collapsed .chat-group-label { display: none; }
|
||||
|
||||
.chat-item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 7px 10px; border-radius: var(--radius);
|
||||
cursor: pointer; font-size: 13px; color: var(--text-2);
|
||||
transition: background var(--transition); position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-item:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.chat-item.active { background: var(--bg-raised); color: var(--text); }
|
||||
.chat-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.chat-item-time {
|
||||
font-size: 10px; color: var(--text-3); flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.chat-item-delete {
|
||||
opacity: 0; position: absolute; right: 6px; background: var(--bg-raised);
|
||||
border: none; color: var(--text-3); cursor: pointer; font-size: 11px;
|
||||
padding: 2px 6px; border-radius: 4px; transition: opacity var(--transition);
|
||||
}
|
||||
.chat-item:hover .chat-item-delete { opacity: 1; }
|
||||
.chat-item:hover .chat-item-time { display: none; }
|
||||
.sidebar.collapsed .chat-item-title,
|
||||
.sidebar.collapsed .chat-item-time,
|
||||
.sidebar.collapsed .chat-item-delete { display: none; }
|
||||
.sidebar.collapsed .sidebar-chats { visibility: hidden; }
|
||||
|
||||
.sidebar-empty {
|
||||
color: var(--text-3); font-size: 12px; text-align: center; padding: 2rem 0.5rem;
|
||||
}
|
||||
.sidebar.collapsed .sidebar-empty { display: none; }
|
||||
|
||||
/* User area */
|
||||
.sidebar-bottom {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 8px 10px; position: relative;
|
||||
}
|
||||
.sidebar-bottom-divider {
|
||||
height: 1px; background: var(--border);
|
||||
margin: 4px 8px;
|
||||
}
|
||||
.sidebar-notes-btn {
|
||||
color: var(--text-2); font-size: 13px;
|
||||
}
|
||||
.sidebar-notes-btn:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.sidebar.collapsed .sidebar-notes-btn .sb-label { opacity: 0; width: 0; }
|
||||
.sidebar.collapsed .sidebar-notes-btn { justify-content: center; padding: 8px 0; gap: 0; }
|
||||
.sidebar.collapsed .sidebar-bottom-divider { margin: 4px 12px; }
|
||||
|
||||
.user-btn {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 6px 8px; border-radius: var(--radius);
|
||||
background: none; border: none; color: var(--text);
|
||||
cursor: pointer; width: 100%;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
.user-btn:hover { background: var(--bg-hover); }
|
||||
|
||||
.user-avatar {
|
||||
width: 30px; height: 30px; border-radius: 50%;
|
||||
background: var(--accent-dim); display: flex; align-items: center;
|
||||
justify-content: center; font-size: 13px; font-weight: 600;
|
||||
color: var(--accent); flex-shrink: 0; position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.user-avatar-img {
|
||||
width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
|
||||
}
|
||||
.avatar-bug {
|
||||
position: absolute; bottom: -3px; right: -3px;
|
||||
font-size: 10px; line-height: 1;
|
||||
display: none;
|
||||
transition: filter var(--transition);
|
||||
}
|
||||
.avatar-bug.has-errors {
|
||||
display: block;
|
||||
filter: drop-shadow(0 0 4px var(--danger));
|
||||
animation: bug-pulse 1.5s ease infinite;
|
||||
}
|
||||
@keyframes bug-pulse { 0%,100% { filter: drop-shadow(0 0 3px var(--danger)); } 50% { filter: drop-shadow(0 0 8px var(--danger)); } }
|
||||
.user-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* Flyout */
|
||||
.user-flyout {
|
||||
display: none; position: absolute; bottom: 100%; left: 8px; right: 8px;
|
||||
background: var(--bg-raised); border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg); padding: 4px; margin-bottom: 4px;
|
||||
box-shadow: 0 -4px 24px rgba(0,0,0,0.5); z-index: 200;
|
||||
}
|
||||
.user-flyout.open { display: block; }
|
||||
|
||||
.flyout-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 12px; border-radius: var(--radius);
|
||||
background: none; border: none; color: var(--text-2);
|
||||
cursor: pointer; font-size: 13px; width: 100%;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
.flyout-item:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.flyout-item svg { flex-shrink: 0; }
|
||||
.flyout-danger:hover { color: var(--danger); }
|
||||
.flyout-divider { height: 1px; background: var(--border); margin: 4px 8px; }
|
||||
|
||||
|
||||
/* ── Sidebar Tabs (v0.21.6) ──────────── */
|
||||
|
||||
.sidebar-tabs {
|
||||
display: flex; padding: 0 8px; gap: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sidebar-tab {
|
||||
flex: 1; padding: 6px 0; font-size: 12px; font-weight: 500;
|
||||
background: none; border: none; border-bottom: 2px solid transparent;
|
||||
color: var(--text-3); cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.sidebar-tab:hover { color: var(--text-2); }
|
||||
.sidebar-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||||
.sidebar.collapsed .sidebar-tabs { display: none; }
|
||||
.sidebar-tab-panel { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
|
||||
.sidebar-files-panel { padding: 0; }
|
||||
|
||||
|
||||
/* ── Sidebar Search ──────────────────────── */
|
||||
|
||||
.sidebar-search {
|
||||
display: flex; align-items: center; gap: 7px;
|
||||
padding: 6px 10px; margin: 8px 10px 4px;
|
||||
background: var(--input-bg); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); transition: border-color var(--transition);
|
||||
}
|
||||
.sidebar-search:focus-within { border-color: var(--accent); }
|
||||
.sidebar-search svg { color: var(--text-3); flex-shrink: 0; }
|
||||
.sidebar-search input {
|
||||
flex: 1; background: none; border: none; color: var(--text);
|
||||
font-size: 12px; font-family: var(--font); outline: none;
|
||||
min-width: 0;
|
||||
}
|
||||
.sidebar-search input::placeholder { color: var(--text-3); }
|
||||
.sidebar-search-clear {
|
||||
background: none; border: none; color: var(--text-3); cursor: pointer;
|
||||
font-size: 11px; padding: 2px 4px; border-radius: 4px;
|
||||
transition: color var(--transition); display: none;
|
||||
}
|
||||
.sidebar-search-clear:hover { color: var(--text); }
|
||||
.sidebar-search.has-value .sidebar-search-clear { display: block; }
|
||||
.sidebar.collapsed .sidebar-search { display: none; }
|
||||
|
||||
.sidebar-search-empty {
|
||||
color: var(--text-3); font-size: 12px; text-align: center;
|
||||
padding: 1.5rem 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* ── Responsive ──────────────────────────── */
|
||||
|
||||
.mobile-menu-btn {
|
||||
display: none; align-items: center; justify-content: center;
|
||||
background: none; border: none; color: var(--text-2);
|
||||
cursor: pointer; padding: 4px; border-radius: var(--radius);
|
||||
transition: color var(--transition);
|
||||
}
|
||||
.mobile-menu-btn:hover { color: var(--text); }
|
||||
.sidebar-overlay {
|
||||
display: none; position: fixed; inset: 0; z-index: 99;
|
||||
background: var(--overlay);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebar { position: fixed; z-index: 100; height: 100%; transition: width 0.2s ease; }
|
||||
.sidebar.collapsed { width: 0; border: none; overflow: hidden; }
|
||||
.msg-inner { padding: 0 1rem; }
|
||||
.model-caps { display: none; }
|
||||
.input-area { padding: 0 0.5rem 0.5rem; }
|
||||
.input-wrap textarea { font-size: 16px; } /* prevent iOS zoom */
|
||||
.mobile-menu-btn { display: flex; }
|
||||
.modal-overlay { padding: 0.75rem; }
|
||||
.modal { width: 100%; }
|
||||
.tab-arrow { width: 36px; font-size: 20px; } /* larger touch target */
|
||||
.modal-tabs { padding: 0 12px; }
|
||||
.admin-sidebar { width: 48px; padding: 0.5rem 0; }
|
||||
.admin-sidebar button { padding: 8px 0; text-align: center; font-size: 11px; border-left: none; border-bottom: 2px solid transparent; }
|
||||
.admin-sidebar button.active { border-bottom-color: var(--accent); border-left: none; }
|
||||
.admin-main { padding: 1rem; }
|
||||
.admin-cat { padding: 10px 12px; font-size: 13px; }
|
||||
}
|
||||
|
||||
447
src/css/modals.css
Normal file
447
src/css/modals.css
Normal file
@@ -0,0 +1,447 @@
|
||||
/* ── modals.css ──────────────────────────────
|
||||
Modal system, debug modal, command palette, confirm dialog
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
/* ── Modal ────────────────────────────────── */
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed; inset: 0; background: var(--overlay);
|
||||
display: none; align-items: center; justify-content: center;
|
||||
z-index: 1000; backdrop-filter: blur(2px);
|
||||
padding: 2rem; /* keeps modal away from viewport edges at any zoom */
|
||||
}
|
||||
.modal-overlay.active { display: flex; }
|
||||
|
||||
.modal {
|
||||
background: var(--bg-surface); border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg); width: 90%; max-width: 520px;
|
||||
max-height: 100%; display: flex; flex-direction: column;
|
||||
animation: modal-in 0.15s ease;
|
||||
}
|
||||
.modal-wide { max-width: 700px; }
|
||||
@keyframes modal-in { from { opacity: 0; transform: translateY(-8px); } }
|
||||
|
||||
.modal-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 16px 20px; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.modal-header h2 { font-size: 16px; font-weight: 600; }
|
||||
.modal-close {
|
||||
background: none; border: none; color: var(--text-3); font-size: 18px;
|
||||
cursor: pointer; padding: 2px 6px; border-radius: 4px;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
.modal-close:hover { color: var(--text); }
|
||||
.modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
|
||||
.modal-footer {
|
||||
padding: 12px 20px; border-top: 1px solid var(--border);
|
||||
display: flex; justify-content: flex-end; gap: 0.5rem;
|
||||
}
|
||||
|
||||
.settings-section { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
|
||||
.settings-section:last-child { border-bottom: none; margin-bottom: 0; }
|
||||
.settings-section h3 { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
.avatar-upload-row { display: flex; align-items: center; gap: 14px; margin-bottom: 1rem; }
|
||||
.avatar-preview {
|
||||
width: 56px; height: 56px; border-radius: 50%; background: var(--bg-raised);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 22px; font-weight: 600; color: var(--accent); flex-shrink: 0;
|
||||
overflow: hidden; border: 2px solid var(--border);
|
||||
}
|
||||
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.avatar-actions { display: flex; flex-direction: column; gap: 4px; }
|
||||
.avatar-actions .form-hint { font-size: 11px; margin-left: 0; }
|
||||
.avatar-preview-sm { width: 42px; height: 42px; font-size: 18px; }
|
||||
|
||||
/* Modal tab bars — shared horizontal scroll with arrow navigation */
|
||||
.modal-tabs-wrap {
|
||||
position: relative; flex-shrink: 0;
|
||||
border-bottom: 1px solid var(--border); background: var(--bg-raised);
|
||||
}
|
||||
.modal-tabs {
|
||||
display: flex; padding: 0 16px;
|
||||
border-bottom: 1px solid var(--border); background: var(--bg-raised);
|
||||
overflow-x: auto; overflow-y: hidden;
|
||||
scrollbar-width: none; -ms-overflow-style: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scroll-behavior: smooth;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.modal-tabs::-webkit-scrollbar { display: none; }
|
||||
/* When wrapped, the wrapper owns the border */
|
||||
.modal-tabs-wrap .modal-tabs { border-bottom: none; background: none; }
|
||||
|
||||
.tab-arrow {
|
||||
position: absolute; top: 0; bottom: 1px; /* 1px for border */ width: 28px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: var(--bg-raised); border: none; color: var(--text-2);
|
||||
cursor: pointer; font-size: 16px; z-index: 2; opacity: 0;
|
||||
pointer-events: none; transition: opacity 0.15s ease;
|
||||
}
|
||||
.tab-arrow.visible { opacity: 1; pointer-events: auto; }
|
||||
.tab-arrow:hover { color: var(--accent); }
|
||||
.tab-arrow-left { left: 0; padding-left: 2px; box-shadow: 4px 0 8px -2px rgba(0,0,0,0.15); }
|
||||
.tab-arrow-right { right: 0; padding-right: 2px; box-shadow: -4px 0 8px -2px rgba(0,0,0,0.15); }
|
||||
|
||||
/* Settings tabs */
|
||||
.settings-tabs { gap: 0; }
|
||||
.settings-tabs .settings-tab {
|
||||
padding: 10px 14px; background: none; border: none; border-radius: 0;
|
||||
color: var(--text-3); cursor: pointer; font-size: 13px; font-family: var(--font);
|
||||
border-bottom: 2px solid transparent; transition: color var(--transition);
|
||||
outline: none; -webkit-appearance: none; appearance: none;
|
||||
white-space: nowrap; flex-shrink: 0;
|
||||
}
|
||||
.settings-tabs .settings-tab:hover { color: var(--text-2); }
|
||||
.settings-tabs .settings-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||||
|
||||
.settings-notice {
|
||||
background: rgba(234,179,8,0.08); border: 1px solid var(--warning-dim);
|
||||
border-radius: var(--radius); padding: 10px 14px; font-size: 13px;
|
||||
color: var(--warning); display: flex; align-items: center; gap: 8px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
/* Providers */
|
||||
.provider-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 8px 0; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.provider-name { font-weight: 500; font-size: 13px; }
|
||||
.provider-meta { font-size: 11px; color: var(--text-3); margin-left: 8px; }
|
||||
.provider-actions { display: flex; align-items: center; gap: 8px; }
|
||||
.badge-global { font-size: 10px; color: var(--text-3); background: var(--bg-raised); padding: 2px 8px; border-radius: 4px; }
|
||||
|
||||
/* Admin panel (fullscreen) */
|
||||
.admin-panel {
|
||||
position: fixed; z-index: 1000;
|
||||
top: var(--banner-top-height); right: 0;
|
||||
bottom: var(--banner-bottom-height); left: 0;
|
||||
background: var(--bg); display: flex; flex-direction: column;
|
||||
}
|
||||
.admin-topbar {
|
||||
display: flex; align-items: center; padding: 0 1rem; height: 48px;
|
||||
border-bottom: 1px solid var(--border); background: var(--bg-surface); flex-shrink: 0;
|
||||
}
|
||||
.admin-back {
|
||||
background: none; border: none; color: var(--text-3); cursor: pointer;
|
||||
font-size: 14px; padding: 4px 10px; border-radius: 4px; font-family: var(--font);
|
||||
}
|
||||
.admin-back:hover { color: var(--accent); background: var(--bg-raised); }
|
||||
.admin-title { font-size: 16px; font-weight: 600; margin-left: 1rem; flex: 1; }
|
||||
.admin-user { font-size: 12px; color: var(--text-3); }
|
||||
|
||||
.admin-categories {
|
||||
display: flex; gap: 0; border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-surface); padding: 0 1rem; flex-shrink: 0;
|
||||
}
|
||||
.admin-cat {
|
||||
background: none; border: none; border-bottom: 2px solid transparent;
|
||||
color: var(--text-3); padding: 10px 20px; cursor: pointer;
|
||||
font-size: 14px; font-weight: 500; font-family: var(--font);
|
||||
transition: color 0.15s, border-color 0.15s; outline: none;
|
||||
}
|
||||
.admin-cat:hover { color: var(--text-2); }
|
||||
.admin-cat.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||||
|
||||
.admin-body { display: flex; flex: 1; overflow: hidden; }
|
||||
|
||||
.admin-sidebar {
|
||||
width: 160px; flex-shrink: 0; border-right: 1px solid var(--border);
|
||||
background: var(--bg-surface); padding: 0.75rem 0; overflow-y: auto;
|
||||
}
|
||||
.admin-sidebar button {
|
||||
display: block; width: 100%; text-align: left; background: none; border: none;
|
||||
padding: 8px 20px; color: var(--text-3); cursor: pointer;
|
||||
font-size: 13px; font-family: var(--font); border-left: 3px solid transparent;
|
||||
transition: color 0.1s, background 0.1s;
|
||||
}
|
||||
.admin-sidebar button:hover { color: var(--text-2); background: var(--bg-raised); }
|
||||
.admin-sidebar button.active { color: var(--accent); border-left-color: var(--accent); background: var(--bg-raised); }
|
||||
|
||||
.admin-main { flex: 1; overflow-y: auto; padding: 1.5rem 2rem; }
|
||||
.admin-section-content { /* replaces .admin-tab-content */ }
|
||||
|
||||
/* Admin shared */
|
||||
/* admin-tab: still used by team admin modal */
|
||||
.admin-tab {
|
||||
padding: 10px 14px; background: none; border: none; color: var(--text-3);
|
||||
cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent;
|
||||
white-space: nowrap; flex-shrink: 0; transition: color var(--transition);
|
||||
outline: none; font-family: var(--font);
|
||||
}
|
||||
.admin-tab:hover { color: var(--text-2); }
|
||||
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||||
|
||||
.admin-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
|
||||
.admin-hint { font-size: 12px; color: var(--text-3); }
|
||||
.admin-inline-form {
|
||||
background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
|
||||
padding: 1rem; margin-bottom: 1rem;
|
||||
}
|
||||
.ext-edit-form {
|
||||
background: var(--bg); padding: 12px 0;
|
||||
}
|
||||
.ext-edit-form textarea {
|
||||
resize: vertical; min-height: 60px;
|
||||
line-height: 1.5; white-space: pre; overflow-wrap: normal; overflow-x: auto;
|
||||
}
|
||||
|
||||
.admin-user-row {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px;
|
||||
min-height: 52px;
|
||||
}
|
||||
.admin-user-info { flex: 1; }
|
||||
.admin-user-email { font-size: 12px; color: var(--text-3); margin-top: 2px; }
|
||||
.admin-user-actions { display: flex; gap: 6px; flex-shrink: 0; }
|
||||
.admin-user-actions button { background: none; border: 1px solid var(--border); color: var(--text-2); border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; min-width: 68px; text-align: center; }
|
||||
.admin-user-actions button:hover { border-color: var(--border-light); color: var(--text); }
|
||||
.admin-user-actions .btn-danger { color: var(--danger); }
|
||||
.admin-user-actions .btn-danger:hover { border-color: var(--danger); }
|
||||
.inline-select { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-2); border-radius: 4px; padding: 3px 8px; font-size: 12px; cursor: pointer; }
|
||||
|
||||
.admin-model-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; min-height: 44px; }
|
||||
.admin-model-row .model-name { flex: 1; font-weight: 500; }
|
||||
.admin-model-row .model-caps-inline { display: flex; gap: 3px; }
|
||||
.admin-model-row .provider-meta { min-width: 80px; text-align: right; color: var(--text-3); font-size: 12px; }
|
||||
.admin-model-toggle { background: none; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--text-2); min-width: 82px; text-align: center; }
|
||||
.admin-model-toggle:hover { border-color: var(--accent); color: var(--accent); }
|
||||
.admin-model-toggle.enabled { border-color: var(--success); color: var(--success); }
|
||||
.admin-model-toggle.team { border-color: var(--accent); color: var(--accent); }
|
||||
.model-list-item.model-hidden { opacity: 0.5; }
|
||||
.model-list-item.model-hidden .model-name { text-decoration: line-through; }
|
||||
|
||||
.admin-provider-row {
|
||||
display: flex; align-items: center; gap: 12px; padding: 10px 0;
|
||||
border-bottom: 1px solid var(--border); font-size: 14px;
|
||||
}
|
||||
.admin-provider-row .provider-name { font-weight: 500; flex: 1; }
|
||||
.admin-provider-row .provider-endpoint { font-size: 12px; color: var(--text-3); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.btn-edit { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 16px; padding: 2px 6px; }
|
||||
.btn-edit:hover { color: var(--accent); }
|
||||
.admin-provider-row .btn-delete { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 16px; padding: 2px 6px; }
|
||||
.admin-provider-row .btn-delete:hover { color: var(--danger); }
|
||||
|
||||
.admin-persona-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
|
||||
.admin-persona-row .persona-info { flex: 1; min-width: 0; }
|
||||
.persona-row-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; }
|
||||
.persona-row-icon { margin-right: 4px; }
|
||||
.admin-persona-row .persona-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
|
||||
.admin-persona-row .persona-desc { font-size: 12px; color: var(--text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.admin-persona-row .persona-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
|
||||
.admin-persona-row .btn-delete { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 16px; padding: 2px 6px; }
|
||||
.admin-persona-row .btn-delete:hover { color: var(--danger); }
|
||||
.badge-user { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--accent-dim); color: var(--accent); }
|
||||
|
||||
/* Stats cards */
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
|
||||
.stat-card {
|
||||
background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
|
||||
padding: 14px 16px; text-align: center;
|
||||
}
|
||||
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1.2; }
|
||||
.stat-card .stat-label { font-size: 0.78rem; color: var(--text-3); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
|
||||
/* Audit log */
|
||||
.audit-row { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
|
||||
.audit-row:last-child { border-bottom: none; }
|
||||
.audit-main { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
||||
.audit-action { font-weight: 600; color: var(--accent); font-family: var(--font-mono, monospace); font-size: 12px; }
|
||||
.audit-actor { color: var(--text); }
|
||||
.audit-resource { color: var(--text-3); font-family: var(--font-mono, monospace); font-size: 11px; }
|
||||
.audit-meta { display: flex; gap: 10px; margin-top: 2px; font-size: 11px; color: var(--text-3); flex-wrap: wrap; }
|
||||
.audit-details { color: var(--text-2); }
|
||||
.audit-ip { font-family: var(--font-mono, monospace); }
|
||||
.pagination-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
|
||||
|
||||
/* Banner preview */
|
||||
.banner-preview {
|
||||
margin-top: 0.75rem; padding: 6px 16px; text-align: center;
|
||||
font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
.color-input-wrap { display: flex; align-items: center; gap: 8px; }
|
||||
.color-input-wrap input[type="color"] {
|
||||
width: 36px; height: 32px; border: 1px solid var(--border);
|
||||
border-radius: var(--radius); background: var(--bg);
|
||||
cursor: pointer; padding: 2px;
|
||||
}
|
||||
.color-hex {
|
||||
width: 80px; background: var(--bg-raised); border: 1px solid var(--border);
|
||||
color: var(--text); padding: 6px 10px; border-radius: var(--radius);
|
||||
font-family: var(--mono); font-size: 12px;
|
||||
}
|
||||
.section-hint { font-size: 13px; color: var(--text-3); margin-bottom: 0.75rem; }
|
||||
|
||||
/* User model list */
|
||||
.model-list-grid { display: flex; flex-direction: column; gap: 2px; }
|
||||
.model-list-item {
|
||||
display: flex; align-items: center; gap: 10px; padding: 8px 10px;
|
||||
border-radius: var(--radius); font-size: 13px; cursor: default;
|
||||
}
|
||||
.model-list-item:hover { background: var(--bg-hover); }
|
||||
.model-list-item .model-name { flex: 1; font-weight: 500; }
|
||||
.model-list-item .model-provider { font-size: 12px; color: var(--text-3); }
|
||||
.model-list-item .model-caps-inline { display: flex; gap: 3px; }
|
||||
|
||||
.badge-admin { background: var(--accent); color: var(--text-on-color); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
|
||||
.badge-user { background: var(--bg-raised); color: var(--text-3); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
|
||||
.badge-inactive { background: var(--danger); color: var(--text-on-color); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
|
||||
.badge-pending { background: var(--warning); color: var(--text-on-warning); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
|
||||
.badge-team { background: var(--accent-dim); color: var(--accent-light); font-size: 10px; padding: 1px 8px; border-radius: 4px; margin-left: 2px; }
|
||||
.admin-approve-form { padding: 10px 12px; margin: -4px 0 8px; background: var(--glass); border-radius: 0 0 8px 8px; border-top: 1px solid var(--border); }
|
||||
.admin-approve-form .checkbox-label { display: block; margin: 2px 0; }
|
||||
.btn-approve { background: var(--success-dim); color: var(--success-light); border: 1px solid rgba(34,197,94,0.3); border-radius: 4px; padding: 3px 10px; cursor: pointer; font-size: 12px; }
|
||||
.team-card { padding: 8px 10px; background: var(--glass); border-radius: 6px; margin-bottom: 6px; }
|
||||
.team-card-info { display: flex; align-items: center; gap: 8px; }
|
||||
.team-admin-back {
|
||||
cursor: pointer; margin-right: 4px; opacity: 0.5;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
.team-admin-back:hover { opacity: 1; }
|
||||
.team-tab-content { padding: 0; }
|
||||
.badge-private { background: var(--purple); color: var(--text-on-color); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
|
||||
.badge-success { background: var(--success-dim); color: var(--success-light); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
|
||||
.badge-warning { background: var(--warning-dim); color: var(--warning-light); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
|
||||
.badge-danger { background: var(--danger-dim); color: var(--danger-light); font-size: 10px; padding: 1px 8px; border-radius: 4px; }
|
||||
|
||||
/* Health + Routing admin (v0.22.3) */
|
||||
.admin-health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
|
||||
.admin-health-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
|
||||
.list-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; }
|
||||
.admin-table { border-collapse: collapse; }
|
||||
.admin-table th, .admin-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); }
|
||||
.admin-table th { font-weight: 600; color: var(--text-2); font-size: 11px; text-transform: uppercase; }
|
||||
.admin-user-row.user-inactive { opacity: 0.7; }
|
||||
.loading { color: var(--text-3); font-size: 13px; padding: 0.5rem; }
|
||||
.error-hint { color: var(--danger); font-size: 13px; padding: 0.5rem; }
|
||||
.empty-hint { color: var(--text-3); font-size: 13px; text-align: center; padding: 1rem; }
|
||||
|
||||
|
||||
/* ── Debug Modal ─────────────────────────── */
|
||||
|
||||
.debug-modal { max-width: 900px; height: 100%; overflow: hidden; }
|
||||
.debug-tabs { }
|
||||
.debug-tab { padding: 8px 12px; background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 12px; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; }
|
||||
.debug-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||||
.debug-modal-body { flex: 1; overflow: hidden; padding: 0 !important; display: flex; flex-direction: column; }
|
||||
.debug-tab-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
||||
.debug-toolbar { display: flex; gap: 1rem; padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 11px; }
|
||||
.debug-check { display: flex; align-items: center; gap: 4px; color: var(--text-3); cursor: pointer; }
|
||||
.debug-content { flex: 1; overflow-y: auto; padding: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.5; }
|
||||
.debug-entry { padding: 1px 6px; border-bottom: 1px solid rgba(128,128,128,0.06); white-space: pre-wrap; word-break: break-all; }
|
||||
.debug-time { color: var(--text-3); opacity: 0.6; font-size: 10px; }
|
||||
.debug-msg { color: var(--text); }
|
||||
.debug-empty { color: var(--text-3); text-align: center; padding: 2rem; }
|
||||
.debug-net-entry { border-bottom: 1px solid var(--border); }
|
||||
.debug-net-entry summary { padding: 6px; cursor: pointer; font-size: 11px; }
|
||||
.debug-net-method { font-weight: bold; color: var(--accent); }
|
||||
.debug-net-url { color: var(--text); word-break: break-all; }
|
||||
.debug-net-detail { padding: 6px 12px; font-size: 11px; }
|
||||
.debug-pre { white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow: auto; padding: 6px; background: rgba(0,0,0,0.2); border-radius: 4px; margin: 4px 0; }
|
||||
.debug-state-pre { max-height: none; margin: 0; }
|
||||
.debug-footer { display: flex; align-items: center; }
|
||||
|
||||
|
||||
/* ── Command Palette ─────────────────────── */
|
||||
|
||||
.cmd-palette-overlay {
|
||||
position: fixed; inset: 0; background: var(--overlay);
|
||||
display: none; align-items: flex-start; justify-content: center;
|
||||
z-index: 2000; backdrop-filter: blur(4px);
|
||||
padding-top: min(20vh, 160px);
|
||||
}
|
||||
.cmd-palette-overlay.active { display: flex; }
|
||||
|
||||
.cmd-palette {
|
||||
background: var(--bg-surface); border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg); width: 90%; max-width: 480px;
|
||||
box-shadow: 0 16px 64px rgba(0,0,0,0.6);
|
||||
animation: modal-in 0.12s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cmd-input-wrap {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 12px 16px; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.cmd-input-wrap svg { color: var(--text-3); flex-shrink: 0; }
|
||||
.cmd-input-wrap input {
|
||||
flex: 1; background: none; border: none; color: var(--text);
|
||||
font-size: 15px; font-family: var(--font); outline: none;
|
||||
}
|
||||
.cmd-input-wrap input::placeholder { color: var(--text-3); }
|
||||
.cmd-kbd {
|
||||
font-size: 10px; font-family: var(--mono); color: var(--text-3);
|
||||
background: var(--bg); border: 1px solid var(--border);
|
||||
border-radius: 4px; padding: 2px 6px; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cmd-results {
|
||||
max-height: 320px; overflow-y: auto;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.cmd-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 12px; border-radius: var(--radius);
|
||||
cursor: pointer; font-size: 13px; color: var(--text-2);
|
||||
transition: background 60ms ease, color 60ms ease;
|
||||
}
|
||||
.cmd-item:hover, .cmd-item.active {
|
||||
background: var(--accent-dim); color: var(--text);
|
||||
}
|
||||
.cmd-item svg { flex-shrink: 0; color: var(--text-3); }
|
||||
.cmd-item.active svg { color: var(--accent); }
|
||||
.cmd-item-label { flex: 1; }
|
||||
.cmd-item-hint {
|
||||
font-size: 11px; color: var(--text-3); flex-shrink: 0;
|
||||
}
|
||||
.cmd-item.active .cmd-item-hint { color: var(--accent); }
|
||||
.cmd-group-label {
|
||||
font-size: 10px; font-weight: 600; color: var(--text-3);
|
||||
padding: 8px 12px 4px; text-transform: uppercase; letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.cmd-footer {
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
padding: 8px 16px; border-top: 1px solid var(--border);
|
||||
font-size: 11px; color: var(--text-3);
|
||||
}
|
||||
.cmd-footer kbd {
|
||||
font-size: 10px; font-family: var(--mono);
|
||||
background: var(--bg); border: 1px solid var(--border);
|
||||
border-radius: 3px; padding: 1px 4px;
|
||||
}
|
||||
|
||||
|
||||
/* ── Confirm Dialog ──────────────────────── */
|
||||
|
||||
.confirm-overlay {
|
||||
position: fixed; inset: 0; z-index: 9999;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: var(--overlay);
|
||||
animation: fade-in 0.12s ease;
|
||||
}
|
||||
.confirm-dialog {
|
||||
background: var(--bg-raised); border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg); padding: 0;
|
||||
min-width: 320px; max-width: 440px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
||||
animation: confirm-in 0.15s ease;
|
||||
}
|
||||
.confirm-header {
|
||||
padding: 16px 20px 0; font-weight: 600; font-size: 15px; color: var(--text);
|
||||
}
|
||||
.confirm-body {
|
||||
padding: 12px 20px 20px; font-size: 13px; color: var(--text-2);
|
||||
line-height: 1.5; white-space: pre-wrap;
|
||||
}
|
||||
.confirm-footer {
|
||||
display: flex; justify-content: flex-end; gap: 8px;
|
||||
padding: 0 20px 16px;
|
||||
}
|
||||
@keyframes confirm-in { from { opacity: 0; transform: scale(0.95); } }
|
||||
@keyframes fade-in { from { opacity: 0; } }
|
||||
|
||||
547
src/css/panels.css
Normal file
547
src/css/panels.css
Normal file
@@ -0,0 +1,547 @@
|
||||
/* ── panels.css ──────────────────────────────
|
||||
Side panel, preview, notes, graph, backlinks
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
/* ── Side Panel (Preview + Notes) ──────── */
|
||||
|
||||
/* ── Secondary Pane (was .side-panel, now .workspace-secondary) ── */
|
||||
/* Layout handled by .workspace-secondary above; these are internal styles */
|
||||
|
||||
.side-panel-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 8px 12px; border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-raised); flex-shrink: 0;
|
||||
}
|
||||
.side-panel-actions {
|
||||
display: flex; align-items: center; gap: 2px;
|
||||
}
|
||||
.side-panel-action-btn {
|
||||
background: none; border: none; color: var(--text-3);
|
||||
cursor: pointer; padding: 4px 6px; border-radius: var(--radius);
|
||||
transition: all var(--transition); display: flex; align-items: center;
|
||||
}
|
||||
.side-panel-action-btn:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.side-panel-label {
|
||||
font-size: 12px; font-family: var(--font); font-weight: 600;
|
||||
color: var(--text-2); white-space: nowrap; font-style: normal;
|
||||
}
|
||||
.side-panel-btn {
|
||||
background: none; border: none; color: var(--text-3);
|
||||
cursor: pointer; padding: 4px 6px; border-radius: var(--radius);
|
||||
transition: all var(--transition); display: flex; align-items: center;
|
||||
}
|
||||
.side-panel-btn:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.side-panel-close {
|
||||
background: none; border: none; color: var(--text-3);
|
||||
cursor: pointer; font-size: 16px; padding: 2px 6px;
|
||||
border-radius: var(--radius); transition: all var(--transition);
|
||||
}
|
||||
.side-panel-close:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.side-panel-body {
|
||||
flex: 1; overflow-y: auto; min-height: 0;
|
||||
}
|
||||
.side-panel-page { height: 100%; display: flex; flex-direction: column; }
|
||||
.side-panel-empty {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: 100%; color: var(--text-3); font-size: 13px;
|
||||
padding: 2rem; text-align: center;
|
||||
}
|
||||
.preview-frame {
|
||||
flex: 1; width: 100%; border: none; background: var(--bg-surface);
|
||||
}
|
||||
.preview-empty {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
height: 100%; color: var(--text-3); font-size: 13px;
|
||||
padding: 2rem; text-align: center;
|
||||
}
|
||||
|
||||
/* Notes inside secondary pane */
|
||||
.notes-actions-bar {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 8px 12px; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.workspace-secondary .notes-list, .side-panel .notes-list { padding: 4px 8px; }
|
||||
.workspace-secondary .notes-editor, .side-panel .notes-editor { padding: 8px 12px; }
|
||||
.workspace-secondary .note-read-content, .side-panel .note-read-content {
|
||||
max-height: none; flex: 1; overflow-y: auto;
|
||||
}
|
||||
.workspace-secondary .notes-content-input, .side-panel .notes-content-input {
|
||||
min-height: 150px;
|
||||
}
|
||||
.workspace-secondary #notesListView, .side-panel #notesListView {
|
||||
flex: 1; overflow-y: auto; min-height: 0;
|
||||
}
|
||||
.workspace-secondary #notesEditorView, .side-panel #notesEditorView {
|
||||
flex: 1; overflow-y: auto; min-height: 0;
|
||||
}
|
||||
|
||||
/* Side panel overlay (mobile tap-to-close, mirrors sidebar-overlay) */
|
||||
.side-panel-overlay {
|
||||
display: none; position: fixed; inset: 0; z-index: 199;
|
||||
background: var(--overlay);
|
||||
}
|
||||
|
||||
/* Mobile: full-width overlay */
|
||||
@media (max-width: 768px) {
|
||||
.workspace-secondary.open {
|
||||
position: fixed; top: 0; right: 0; bottom: 0;
|
||||
width: 100vw; min-width: 100vw; z-index: 200;
|
||||
}
|
||||
.workspace-handle { display: none !important; }
|
||||
|
||||
/* Larger touch targets on mobile */
|
||||
.side-panel-close { font-size: 20px; padding: 4px 10px; }
|
||||
.side-panel-action-btn { padding: 6px 8px; }
|
||||
.side-panel-header { padding: 10px 12px; }
|
||||
}
|
||||
|
||||
/* Dual-view removed in workspace refactor (v0.22.0) — workspace
|
||||
handles all pane placement via primary/secondary slots. */
|
||||
|
||||
.msg-text ul, .msg-text ol { margin: 0.4em 0; padding-left: 1.5em; }
|
||||
.msg-text li { margin: 0.2em 0; }
|
||||
.msg-text li > p { margin: 0.2em 0; }
|
||||
|
||||
.msg-text blockquote {
|
||||
border-left: 3px solid var(--accent); padding: 0.25em 0.75em; margin: 0.5em 0;
|
||||
color: var(--text-2); background: var(--accent-dim); border-radius: 0 var(--radius) var(--radius) 0;
|
||||
}
|
||||
|
||||
.msg-text hr { border: none; border-top: 1px solid var(--border); margin: 0.75em 0; }
|
||||
|
||||
.msg-text table { border-collapse: collapse; width: 100%; margin: 0.5em 0; font-size: 13px; }
|
||||
.msg-text th, .msg-text td { border: 1px solid var(--border); padding: 0.4em 0.7em; text-align: left; }
|
||||
.msg-text th { background: var(--bg-raised); font-weight: 600; }
|
||||
|
||||
.msg-text h1, .msg-text h2, .msg-text h3, .msg-text h4 { margin: 0.75em 0 0.3em; font-weight: 600; }
|
||||
.msg-text h1 { font-size: 1.4em; }
|
||||
.msg-text h2 { font-size: 1.2em; }
|
||||
.msg-text h3 { font-size: 1.05em; }
|
||||
|
||||
.msg-text a { color: var(--accent); }
|
||||
.msg-text img { max-width: 100%; border-radius: var(--radius); }
|
||||
|
||||
/* Thinking blocks */
|
||||
.thinking-block {
|
||||
border: 1px solid var(--accent-dim); border-radius: var(--radius);
|
||||
margin: 0.5rem 0; background: rgba(108,159,255,0.03);
|
||||
}
|
||||
.thinking-block summary {
|
||||
padding: 0.4rem 0.75rem; cursor: pointer; font-size: 12px;
|
||||
color: var(--text-3); user-select: none;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
.thinking-block summary:hover { color: var(--text-2); }
|
||||
.thinking-block[open] summary { border-bottom: 1px solid rgba(108,159,255,0.08); }
|
||||
.thinking-content {
|
||||
padding: 0.5rem 0.75rem; font-size: 12px; color: var(--text-3);
|
||||
max-height: 300px; overflow-y: auto; line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Tool activity indicators */
|
||||
.msg-tools {
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.tool-activity {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
font-size: 12px; color: var(--text-3);
|
||||
background: var(--bg-raised); border: 1px solid var(--border);
|
||||
padding: 4px 10px; border-radius: var(--radius);
|
||||
animation: tool-fade-in 0.2s ease;
|
||||
}
|
||||
@keyframes tool-fade-in { from { opacity: 0; transform: translateY(-4px); } }
|
||||
.tool-icon { font-size: 13px; }
|
||||
.tool-name { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
|
||||
.tool-status { font-size: 11px; margin-left: auto; }
|
||||
.tool-running { color: var(--warning); }
|
||||
.tool-running::after {
|
||||
content: ''; display: inline-block; width: 4px; height: 4px;
|
||||
border-radius: 50%; background: var(--warning); margin-left: 4px;
|
||||
animation: tool-pulse 1s infinite;
|
||||
}
|
||||
@keyframes tool-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
|
||||
.tool-done { color: var(--success); }
|
||||
.tool-error { color: var(--danger); }
|
||||
.tool-hint {
|
||||
font-size: 11px; color: var(--text-3); margin-left: 6px;
|
||||
max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.tool-note-link {
|
||||
background: none; border: none; color: var(--accent); cursor: pointer;
|
||||
font-size: 11px; margin-left: 6px; padding: 0;
|
||||
text-decoration: none;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
.tool-note-link:hover { color: var(--text); text-decoration: underline; }
|
||||
|
||||
/* Tool calls in message history (collapsed) */
|
||||
.tool-call-block {
|
||||
border: 1px solid var(--border); border-radius: var(--radius);
|
||||
background: var(--bg-raised); font-size: 12px;
|
||||
}
|
||||
.tool-call-summary {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 4px 10px; cursor: pointer; user-select: none;
|
||||
color: var(--text-3); list-style: none;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
.tool-call-summary::-webkit-details-marker { display: none; }
|
||||
.tool-call-summary::before {
|
||||
content: '▸'; font-size: 10px; color: var(--text-3);
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
.tool-call-block[open] .tool-call-summary::before { transform: rotate(90deg); }
|
||||
.tool-call-summary:hover { color: var(--text-2); }
|
||||
.tool-detail {
|
||||
border-top: 1px solid var(--border); padding: 6px 10px;
|
||||
display: flex; flex-direction: column; gap: 6px;
|
||||
}
|
||||
.tool-detail-label {
|
||||
font-size: 10px; color: var(--text-3); text-transform: uppercase;
|
||||
letter-spacing: 0.5px; font-weight: 600;
|
||||
}
|
||||
.tool-detail-pre {
|
||||
margin: 2px 0 0; padding: 6px 8px;
|
||||
background: var(--bg-surface); border-radius: 4px;
|
||||
font-size: 11px; color: var(--text-2); white-space: pre-wrap;
|
||||
word-break: break-all; max-height: 200px; overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.empty-state {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
justify-content: center; height: 100%; color: var(--text-3); gap: 0.25rem;
|
||||
}
|
||||
.empty-logo { font-size: 3rem; margin-bottom: 0.5rem; }
|
||||
.empty-logo-img { width: 64px; height: 64px; object-fit: contain; }
|
||||
.empty-state h2 { font-size: 1.25rem; font-weight: 600; color: var(--text-2); }
|
||||
.empty-state p { font-size: 0.85rem; }
|
||||
|
||||
/* Typing indicator */
|
||||
.typing-dots { display: flex; gap: 4px; padding: 0.5rem 0; }
|
||||
.typing-dots span {
|
||||
width: 6px; height: 6px; border-radius: 50%; background: var(--text-3);
|
||||
animation: dot-pulse 1.2s infinite;
|
||||
}
|
||||
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
|
||||
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
|
||||
@keyframes dot-pulse { 0%,60%,100% { opacity: 0.4; } 30% { opacity: 1; } }
|
||||
|
||||
|
||||
/* ── Sidebar Notes Button ───────────────── */
|
||||
|
||||
.sidebar-notes-btn {
|
||||
padding: 4px 8px; border-top: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sb-notes {
|
||||
display: flex; align-items: center; gap: 8px; width: 100%;
|
||||
padding: 8px 12px; background: none; border: none;
|
||||
border-radius: var(--radius); color: var(--text-2);
|
||||
cursor: pointer; font-size: 13px; font-family: var(--font);
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
.sb-notes:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.sidebar.collapsed .sidebar-notes-btn .sb-label { display: none; }
|
||||
.sidebar.collapsed .sb-notes { justify-content: center; padding: 8px; }
|
||||
|
||||
/* ── Notes (inside side panel) ──────────── */
|
||||
|
||||
/* Notes toolbar and selection bar now live inside the side panel */
|
||||
|
||||
.notes-toolbar {
|
||||
display: flex; gap: 8px; padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-raised);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.notes-search-row {
|
||||
padding: 8px 12px 4px;
|
||||
}
|
||||
.notes-search-input {
|
||||
width: 100%; background: var(--input-bg); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); color: var(--text);
|
||||
font-size: 13px; font-family: var(--font); padding: 6px 10px;
|
||||
outline: none; transition: border-color var(--transition);
|
||||
}
|
||||
.notes-search-input:focus { border-color: var(--accent); }
|
||||
.notes-filter-row {
|
||||
display: flex; gap: 8px; padding: 0 12px 8px;
|
||||
}
|
||||
.notes-editor-header {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 8px 12px; border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-raised);
|
||||
}
|
||||
.notes-meta-row {
|
||||
display: flex; gap: 8px; margin-bottom: 8px;
|
||||
}
|
||||
.notes-meta-row input { flex: 1; }
|
||||
.notes-content-container { min-height: 200px; }
|
||||
.notes-read-view { padding: 12px; }
|
||||
.notes-search-wrap {
|
||||
display: flex; align-items: center; gap: 6px; flex: 1;
|
||||
background: var(--bg-surface); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 0 10px;
|
||||
}
|
||||
.notes-search-wrap svg { color: var(--text-3); flex-shrink: 0; }
|
||||
.notes-search-wrap input {
|
||||
flex: 1; background: none; border: none; color: var(--text);
|
||||
font-size: 13px; font-family: var(--font); padding: 6px 0;
|
||||
outline: none;
|
||||
}
|
||||
.notes-filter-select {
|
||||
background: var(--bg-surface); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); color: var(--text); font-size: 12px;
|
||||
padding: 4px 8px; font-family: var(--font); cursor: pointer;
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
/* Notes toolbar and selection bar now live inside the side panel */
|
||||
|
||||
/* Selection bar */
|
||||
.notes-selection-bar {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 6px 12px;
|
||||
background: var(--accent-dim); border-bottom: 1px solid var(--border);
|
||||
font-size: 12px;
|
||||
}
|
||||
.notes-select-all {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
color: var(--text-2); cursor: pointer; font-size: 12px;
|
||||
}
|
||||
.notes-select-all input { cursor: pointer; }
|
||||
|
||||
.notes-list { padding: 8px; }
|
||||
.notes-empty, .notes-loading {
|
||||
text-align: center; color: var(--text-3); padding: 2rem;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.note-item {
|
||||
display: flex; align-items: flex-start; gap: 8px;
|
||||
padding: 10px 12px; border-radius: var(--radius);
|
||||
cursor: pointer; border: 1px solid transparent;
|
||||
transition: background var(--transition), border-color var(--transition);
|
||||
}
|
||||
.note-item:hover {
|
||||
background: var(--bg-hover); border-color: var(--border);
|
||||
}
|
||||
.note-item.selected {
|
||||
background: var(--accent-dim); border-color: var(--accent);
|
||||
}
|
||||
.note-select-col { flex-shrink: 0; padding-top: 2px; }
|
||||
.note-checkbox { cursor: pointer; accent-color: var(--accent); }
|
||||
.note-content-col { flex: 1; min-width: 0; }
|
||||
.note-item-header {
|
||||
display: flex; align-items: baseline; justify-content: space-between;
|
||||
gap: 8px; margin-bottom: 2px;
|
||||
}
|
||||
.note-item-title {
|
||||
font-size: 13px; font-weight: 600; color: var(--text);
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.note-item-time { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
|
||||
.note-preview {
|
||||
font-size: 12px; color: var(--text-3); line-height: 1.4;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
max-height: 1.4em;
|
||||
}
|
||||
.note-headline {
|
||||
font-size: 12px; color: var(--text-3); line-height: 1.4;
|
||||
}
|
||||
.note-headline mark {
|
||||
background: var(--accent-dim); color: var(--accent);
|
||||
padding: 0 2px; border-radius: 2px;
|
||||
}
|
||||
.note-item-meta {
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
margin-top: 4px; flex-wrap: wrap;
|
||||
}
|
||||
.note-folder {
|
||||
font-size: 11px; color: var(--text-3); font-family: var(--mono);
|
||||
background: var(--bg-raised); padding: 1px 6px; border-radius: 3px;
|
||||
}
|
||||
.note-tag {
|
||||
font-size: 10px; color: var(--purple); background: var(--purple-dim);
|
||||
padding: 1px 6px; border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Notes editor */
|
||||
.notes-editor { padding: 12px; }
|
||||
.notes-editor-toolbar {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Note read mode */
|
||||
.note-read-title {
|
||||
font-size: 18px; font-weight: 600; color: var(--text);
|
||||
margin: 0 0 6px; line-height: 1.3;
|
||||
}
|
||||
.note-read-meta {
|
||||
display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.note-read-content {
|
||||
font-size: var(--msg-font, 14px); line-height: 1.7;
|
||||
max-height: 50vh; overflow-y: auto;
|
||||
padding: 12px; background: var(--bg-surface);
|
||||
border: 1px solid var(--border); border-radius: var(--radius);
|
||||
}
|
||||
.notes-back-btn {
|
||||
background: none; border: none; color: var(--text-3);
|
||||
cursor: pointer; font-size: 12px; font-family: var(--font);
|
||||
padding: 4px 0; margin-bottom: 8px;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
.notes-back-btn:hover { color: var(--text); }
|
||||
.notes-title-input {
|
||||
font-size: 16px !important; font-weight: 600;
|
||||
border: 1px solid var(--border) !important;
|
||||
padding: 8px 10px !important;
|
||||
}
|
||||
.notes-folder-input, .notes-tags-input {
|
||||
font-size: 12px !important; font-family: var(--mono);
|
||||
}
|
||||
.notes-content-input {
|
||||
font-size: 13px !important; line-height: 1.6 !important;
|
||||
min-height: 200px; resize: vertical;
|
||||
font-family: var(--mono); border: 1px solid var(--border) !important;
|
||||
}
|
||||
.notes-editor input, .notes-editor textarea {
|
||||
width: 100%; background: var(--bg-surface); color: var(--text);
|
||||
border: 1px solid var(--border); border-radius: var(--radius);
|
||||
padding: 6px 10px; font-family: var(--font); font-size: var(--msg-font, 14px);
|
||||
outline: none; transition: border-color var(--transition);
|
||||
}
|
||||
.notes-editor input:focus, .notes-editor textarea:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.notes-editor-actions {
|
||||
display: flex; gap: 8px; margin-top: 12px;
|
||||
}
|
||||
|
||||
/* ── Note Backlinks ──────────────────────── */
|
||||
|
||||
.note-backlinks {
|
||||
margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px;
|
||||
}
|
||||
.note-backlinks-header {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
font-size: 12px; color: var(--text-2); cursor: pointer;
|
||||
padding: 4px 0; user-select: none;
|
||||
}
|
||||
.note-backlinks-header:hover { color: var(--text); }
|
||||
.note-backlinks-header .badge {
|
||||
background: var(--accent); color: var(--text-on-color); font-size: 10px;
|
||||
padding: 1px 6px; border-radius: 10px;
|
||||
}
|
||||
.note-backlinks-list { margin-top: 6px; }
|
||||
.note-backlink-item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 6px 8px; border-radius: var(--radius); cursor: pointer;
|
||||
font-size: 13px; transition: background var(--transition);
|
||||
}
|
||||
.note-backlink-item:hover { background: var(--bg-hover); }
|
||||
.note-backlink-title { color: var(--accent); font-weight: 500; }
|
||||
.note-backlink-folder { font-size: 11px; color: var(--text-3); }
|
||||
|
||||
/* ── Wikilink Chips (Read Mode) ──────────── */
|
||||
|
||||
.wikilink-chip {
|
||||
display: inline-block; padding: 1px 6px; margin: 0 1px;
|
||||
border-radius: 4px; cursor: pointer; font-size: 0.9em;
|
||||
font-weight: 500; text-decoration: none; vertical-align: baseline;
|
||||
background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
|
||||
color: var(--accent, #6366f1);
|
||||
transition: background var(--transition);
|
||||
}
|
||||
.wikilink-chip:hover {
|
||||
background: rgba(var(--accent-rgb, 99, 102, 241), 0.25);
|
||||
}
|
||||
.wikilink-transclusion {
|
||||
border-left: 2px solid var(--accent, #6366f1);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Transclusion Embeds ─────────────────── */
|
||||
|
||||
.transclusion-embed {
|
||||
margin: 8px 0; border: 1px solid var(--border);
|
||||
border-left: 3px solid var(--accent, #6366f1);
|
||||
border-radius: var(--radius); overflow: hidden;
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
.transclusion-header {
|
||||
padding: 6px 10px; background: var(--bg-2);
|
||||
border-bottom: 1px solid var(--border); font-size: 12px;
|
||||
}
|
||||
.transclusion-content {
|
||||
padding: 10px 12px; font-size: 13px; line-height: 1.5;
|
||||
}
|
||||
.transclusion-content .msg-text { margin: 0; }
|
||||
|
||||
/* ── Graph View ──────────────────────────── */
|
||||
|
||||
.notes-graph-view {
|
||||
display: flex; flex-direction: column; height: 100%;
|
||||
}
|
||||
.notes-graph-toolbar {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 6px 10px; border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-surface); flex-shrink: 0;
|
||||
}
|
||||
.notes-graph-stats {
|
||||
flex: 1; text-align: center; font-size: 11px; color: var(--text-3);
|
||||
}
|
||||
#noteGraphCanvas {
|
||||
flex: 1; width: 100%; min-height: 200px;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
/* ── Daily Note Navigation ───────────────── */
|
||||
|
||||
.note-daily-nav {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
gap: 12px; padding: 6px 10px;
|
||||
border-bottom: 1px solid var(--border); background: var(--bg-surface);
|
||||
}
|
||||
.note-daily-date {
|
||||
font-size: 13px; font-weight: 500; color: var(--text);
|
||||
min-width: 100px; text-align: center;
|
||||
}
|
||||
|
||||
/* ── Save-to-Note Modal ──────────────────── */
|
||||
|
||||
.save-to-note-modal {
|
||||
max-width: 460px; width: 90%;
|
||||
}
|
||||
.save-to-note-modal h3 { margin: 0 0 12px; font-size: 16px; }
|
||||
.save-note-mode-toggle {
|
||||
display: flex; gap: 16px; margin-bottom: 12px; font-size: 13px;
|
||||
}
|
||||
.save-note-mode-toggle label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
|
||||
.save-note-preview {
|
||||
max-height: 120px; overflow-y: auto; padding: 8px;
|
||||
border: 1px solid var(--border); border-radius: var(--radius);
|
||||
background: var(--bg); font-size: 12px; line-height: 1.5;
|
||||
}
|
||||
.save-note-search-results {
|
||||
max-height: 160px; overflow-y: auto; margin-top: 4px;
|
||||
border: 1px solid var(--border); border-radius: var(--radius);
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
.save-note-search-results:empty { display: none; }
|
||||
.save-note-result {
|
||||
padding: 6px 10px; cursor: pointer; font-size: 13px;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
.save-note-result:hover, .save-note-result.selected {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
.save-note-result.selected {
|
||||
border-left: 3px solid var(--accent); font-weight: 500;
|
||||
}
|
||||
|
||||
432
src/css/primitives.css
Normal file
432
src/css/primitives.css
Normal file
@@ -0,0 +1,432 @@
|
||||
/* ── primitives.css ──────────────────────────
|
||||
Buttons, forms, toasts, popups, toggles, badges
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
/* ── Buttons ─────────────────────────────── */
|
||||
|
||||
button { font-family: var(--font); cursor: pointer; }
|
||||
.btn-primary {
|
||||
background: var(--accent); color: var(--text-on-color); border: none;
|
||||
padding: 8px 16px; border-radius: var(--radius);
|
||||
font-weight: 500; font-size: 13px;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.btn-full { width: 100%; }
|
||||
.btn-small {
|
||||
background: var(--bg-raised); border: 1px solid var(--border);
|
||||
color: var(--text-2); padding: 6px 12px; border-radius: var(--radius);
|
||||
font-size: 12px; transition: all var(--transition);
|
||||
}
|
||||
.btn-small:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.btn-small.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-color); }
|
||||
.btn-danger { background: var(--danger); color: var(--text-on-color); border: none; border-radius: var(--radius); }
|
||||
|
||||
|
||||
/* ── Forms ────────────────────────────────── */
|
||||
|
||||
/* Base form element styling — ensures selects/inputs match the dark theme
|
||||
even when not wrapped in .form-group (e.g. role config, inline toolbars) */
|
||||
select, input[type="text"], input[type="email"], input[type="password"],
|
||||
input[type="number"], input[type="search"], textarea {
|
||||
background: var(--bg-raised); border: 1px solid var(--border);
|
||||
color: var(--text); padding: 8px 12px; border-radius: var(--radius);
|
||||
font-family: var(--font); font-size: 13px;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
select:focus, input[type="text"]:focus, input[type="email"]:focus,
|
||||
input[type="password"]:focus, textarea:focus {
|
||||
outline: none; border-color: var(--accent);
|
||||
}
|
||||
select option { background: var(--bg-surface); color: var(--text); }
|
||||
|
||||
.form-group { margin-bottom: 0.75rem; }
|
||||
.form-group label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 4px; font-weight: 500; }
|
||||
.form-group input, .form-group select, .form-group textarea {
|
||||
width: 100%;
|
||||
}
|
||||
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
|
||||
outline: none; border-color: var(--accent);
|
||||
}
|
||||
.form-row { display: flex; gap: 0.75rem; }
|
||||
.form-row .form-group { flex: 1; }
|
||||
.form-hint { font-weight: 400; color: var(--text-3); margin-left: 4px; }
|
||||
.range-input {
|
||||
width: 100%; height: 4px; -webkit-appearance: none; appearance: none;
|
||||
background: var(--border); border-radius: 2px; outline: none;
|
||||
margin: 8px 0 4px; cursor: pointer;
|
||||
}
|
||||
.range-input::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
|
||||
background: var(--accent); border: 2px solid var(--bg-surface); cursor: pointer;
|
||||
}
|
||||
.range-input::-moz-range-thumb {
|
||||
width: 16px; height: 16px; border-radius: 50%;
|
||||
background: var(--accent); border: 2px solid var(--bg-surface); cursor: pointer;
|
||||
}
|
||||
.range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); }
|
||||
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin: 0.5rem 0; color: var(--text-2); }
|
||||
|
||||
/* ── Theme Toggle ────────────────────────── */
|
||||
.theme-toggle {
|
||||
display: flex; gap: 4px; padding: 3px;
|
||||
background: var(--bg); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); width: fit-content;
|
||||
}
|
||||
.theme-btn {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 6px 14px; border-radius: calc(var(--radius) - 2px);
|
||||
border: none; background: none; color: var(--text-3);
|
||||
font-family: var(--font); font-size: 13px; font-weight: 500;
|
||||
cursor: pointer; transition: all var(--transition);
|
||||
}
|
||||
.theme-btn:hover { color: var(--text); background: var(--bg-hover); }
|
||||
.theme-btn.active {
|
||||
color: var(--text); background: var(--bg-raised);
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
|
||||
/* ── Toast ────────────────────────────────── */
|
||||
|
||||
.toast-container { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
.toast {
|
||||
background: var(--bg-surface); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 8px 16px; font-size: 13px;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
animation: toast-in 0.25s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||||
}
|
||||
.toast.error { border-color: var(--danger); }
|
||||
.toast.warning { border-color: var(--warning); }
|
||||
.toast.success { border-color: var(--success); }
|
||||
.toast button { background: none; border: none; color: var(--text-3); cursor: pointer; }
|
||||
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
|
||||
|
||||
|
||||
/* ── Mode Selector (v0.21.3) ───────────── */
|
||||
|
||||
/* Surface region wrappers must participate in parent flex layouts */
|
||||
[data-surface-region="sidebar-content"] {
|
||||
flex: 1; min-height: 0;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
|
||||
.mode-selector {
|
||||
display: flex; gap: 2px; padding: 6px 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mode-btn {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 4px 10px; height: 28px; border: none;
|
||||
border-radius: var(--radius); background: none;
|
||||
color: var(--text-3); cursor: pointer; font-size: 12px;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mode-btn svg { flex-shrink: 0; }
|
||||
.mode-btn-label { font-weight: 500; }
|
||||
.mode-btn:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.mode-btn.active { background: var(--bg-active); color: var(--accent); }
|
||||
.sidebar.collapsed .mode-selector { justify-content: center; }
|
||||
.sidebar.collapsed .mode-btn-label { display: none; }
|
||||
.sidebar.collapsed .mode-btn { padding: 4px; width: 28px; justify-content: center; }
|
||||
|
||||
|
||||
/* ── REPL Console (v0.21.3) ────────────── */
|
||||
|
||||
.repl-toolbar {
|
||||
display: flex; gap: 0.5rem; padding: 6px 12px;
|
||||
border-bottom: 1px solid var(--border); font-size: 11px;
|
||||
}
|
||||
.repl-output {
|
||||
flex: 1; overflow-y: auto; padding: 6px;
|
||||
font-family: var(--mono); font-size: 12px; line-height: 1.6;
|
||||
}
|
||||
.repl-input-wrap {
|
||||
display: flex; align-items: flex-start; gap: 6px;
|
||||
padding: 8px 12px; border-top: 1px solid var(--border);
|
||||
background: var(--bg-raised);
|
||||
}
|
||||
.repl-prompt {
|
||||
font-family: var(--mono); font-size: 12px; line-height: 1.6;
|
||||
color: var(--accent); font-weight: bold;
|
||||
flex-shrink: 0; padding-top: 2px;
|
||||
}
|
||||
.repl-input {
|
||||
flex: 1; background: none; border: none; outline: none;
|
||||
font-family: var(--mono); font-size: 12px; line-height: 1.6;
|
||||
color: var(--text); resize: none; overflow: hidden;
|
||||
min-height: 20px;
|
||||
}
|
||||
.repl-entry { padding: 2px 6px; }
|
||||
.repl-entry-input pre { color: var(--text-2); margin: 0; white-space: pre-wrap; word-break: break-all; }
|
||||
.repl-entry-result { color: var(--text); }
|
||||
.repl-entry-error { color: var(--danger, #e55); }
|
||||
.repl-entry-info { color: var(--text-3); font-size: 11px; }
|
||||
|
||||
.repl-error-msg { margin: 0; white-space: pre-wrap; font-weight: 500; }
|
||||
.repl-error-stack { margin: 2px 0 0 0; color: var(--text-3); font-size: 11px; white-space: pre-wrap; }
|
||||
.repl-stack-toggle {
|
||||
background: none; border: none; color: var(--text-3);
|
||||
cursor: pointer; font-size: 10px; font-family: var(--mono);
|
||||
padding: 0; margin-top: 2px;
|
||||
}
|
||||
.repl-stack-toggle:hover { color: var(--text-2); }
|
||||
|
||||
.repl-elapsed { color: var(--text-3); font-size: 10px; margin-left: 8px; }
|
||||
|
||||
/* REPL value types */
|
||||
.repl-null, .repl-undefined { color: var(--text-3); margin: 0; }
|
||||
.repl-string { color: #98c379; margin: 0; white-space: pre-wrap; word-break: break-all; }
|
||||
.repl-number { color: #d19a66; margin: 0; }
|
||||
.repl-boolean { color: #56b6c2; margin: 0; }
|
||||
.repl-function { color: #c678dd; margin: 0; font-style: italic; }
|
||||
.repl-symbol { color: #e5c07b; margin: 0; }
|
||||
.repl-dom { color: #61afef; margin: 0; }
|
||||
.repl-object { color: var(--text); margin: 0; }
|
||||
.repl-json { margin: 0; white-space: pre-wrap; word-break: break-all; color: var(--text); font-size: 11px; }
|
||||
|
||||
.repl-collapsible { display: inline; }
|
||||
.repl-json-toggle {
|
||||
background: none; border: none; color: var(--text-2);
|
||||
cursor: pointer; font-family: var(--mono); font-size: 12px;
|
||||
padding: 0;
|
||||
}
|
||||
.repl-json-toggle:hover { color: var(--accent); }
|
||||
|
||||
|
||||
/* ── Popup Menu (shared base) ───────────── */
|
||||
|
||||
.popup-menu {
|
||||
display: none; position: absolute; z-index: 200;
|
||||
background: var(--bg-raised); border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius); padding: 4px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
|
||||
min-width: 160px;
|
||||
}
|
||||
.popup-menu.open { display: block; }
|
||||
.popup-menu-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 12px; border-radius: var(--radius);
|
||||
background: none; border: none; color: var(--text-2);
|
||||
cursor: pointer; font-size: 13px; width: 100%;
|
||||
transition: background var(--transition), color var(--transition);
|
||||
}
|
||||
.popup-menu-item:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.popup-menu-item.disabled { opacity: 0.4; pointer-events: none; }
|
||||
.popup-menu-danger:hover { color: var(--danger); }
|
||||
.popup-menu-icon { flex-shrink: 0; display: flex; align-items: center; }
|
||||
.popup-menu-hint { margin-left: auto; font-size: 11px; color: var(--text-3); }
|
||||
.popup-menu-divider { height: 1px; background: var(--border); margin: 4px 8px; }
|
||||
|
||||
/* ── Tools Toggle ────────────────────────── */
|
||||
|
||||
/* ── Popup (shared base for tools/KB popups) ── */
|
||||
.popup {
|
||||
display: none; position: absolute;
|
||||
background: var(--bg-raised); border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg); padding: 4px;
|
||||
box-shadow: var(--shadow-lg); z-index: 300;
|
||||
}
|
||||
.popup.open { display: block; }
|
||||
|
||||
.tools-toggle-wrap { position: relative; display: flex; align-items: center; }
|
||||
.tools-toggle-btn.has-disabled { color: var(--text-3); }
|
||||
.tools-toggle-btn.has-disabled::after {
|
||||
content: ''; position: absolute; top: 4px; right: 4px;
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
background: var(--warning);
|
||||
}
|
||||
.tools-popup { bottom: 100%; left: 0; margin-bottom: 8px; min-width: 210px; }
|
||||
.tools-popup-category, .tools-popup-tool {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 8px 12px; border-radius: var(--radius);
|
||||
cursor: pointer; font-size: 13px; color: var(--text-2);
|
||||
transition: background var(--transition);
|
||||
}
|
||||
.tools-popup-category:hover, .tools-popup-tool:hover { background: var(--bg-hover); }
|
||||
.tools-popup-tool { padding-left: 36px; font-size: 12px; } /* indented children */
|
||||
/* Toggle switch */
|
||||
.tools-popup-switch {
|
||||
width: 32px; height: 18px; border-radius: 9px;
|
||||
background: var(--border); flex-shrink: 0;
|
||||
position: relative; cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.tools-popup-switch-knob {
|
||||
position: absolute; top: 2px; left: 2px;
|
||||
width: 14px; height: 14px; border-radius: 50%;
|
||||
background: var(--text-3);
|
||||
transition: transform 0.2s, background 0.2s;
|
||||
}
|
||||
.tools-popup-switch.on { background: var(--accent); }
|
||||
.tools-popup-switch.on .tools-popup-switch-knob {
|
||||
transform: translateX(14px); background: var(--text-on-color);
|
||||
}
|
||||
.tools-popup-switch.on.partial { background: var(--accent-dim); }
|
||||
.tools-popup-switch.on.partial .tools-popup-switch-knob {
|
||||
transform: translateX(7px); background: var(--accent);
|
||||
}
|
||||
.tools-popup-label { flex: 1; }
|
||||
.tools-popup-expand {
|
||||
font-size: 14px; color: var(--text-3); cursor: pointer;
|
||||
transition: transform var(--transition); padding: 0 2px;
|
||||
user-select: none;
|
||||
}
|
||||
.tools-popup-expand.open { transform: rotate(90deg); }
|
||||
|
||||
/* ── Knowledge Bases ────────────────────── */
|
||||
|
||||
/* Toggle button in input bar */
|
||||
.kb-toggle-wrap {
|
||||
position: relative; display: flex; align-items: center;
|
||||
}
|
||||
.kb-toggle-btn.has-active {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Channel KB popup */
|
||||
.kb-popup {
|
||||
bottom: 100%; left: 0; margin-bottom: 8px;
|
||||
min-width: 240px; max-height: 300px; overflow-y: auto;
|
||||
}
|
||||
.kb-popup-header {
|
||||
padding: 8px 12px 4px; font-size: 12px; font-weight: 600;
|
||||
color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px;
|
||||
}
|
||||
.kb-popup-item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 6px 12px; cursor: pointer;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
.kb-popup-item:hover { background: var(--bg-hover); }
|
||||
.kb-popup-item .kb-popup-check {
|
||||
width: 16px; height: 16px; border-radius: 3px;
|
||||
border: 1.5px solid var(--border); flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.kb-popup-item.enabled .kb-popup-check {
|
||||
background: var(--accent); border-color: var(--accent);
|
||||
}
|
||||
.kb-popup-item.enabled .kb-popup-check::after {
|
||||
content: '✓'; font-size: 11px; color: var(--text-on-color);
|
||||
}
|
||||
.kb-popup-label { display: flex; flex-direction: column; min-width: 0; }
|
||||
.kb-popup-name {
|
||||
font-size: 13px; color: var(--text);
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.kb-popup-meta { font-size: 11px; color: var(--text-3); }
|
||||
.kb-popup-empty, .kb-popup-loading {
|
||||
padding: 16px; text-align: center; font-size: 13px; color: var(--text-3);
|
||||
}
|
||||
|
||||
/* KB management panel (settings tab) */
|
||||
.kb-manage-header {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.kb-manage-header h3 { flex: 1; margin: 0; font-size: 15px; }
|
||||
.kb-manage-summary { font-size: 11px; color: var(--text-3); margin-bottom: 10px; padding: 0 2px; }
|
||||
.kb-manage-list { display: flex; flex-direction: column; gap: 2px; }
|
||||
.kb-manage-item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 8px 10px; border-radius: var(--radius);
|
||||
background: var(--bg-2); transition: background var(--transition);
|
||||
}
|
||||
.kb-manage-item:hover { background: var(--bg-hover); }
|
||||
.kb-manage-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
||||
.kb-manage-name { font-size: 13px; font-weight: 500; color: var(--text); }
|
||||
.kb-manage-desc { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.kb-manage-stats { font-size: 11px; color: var(--text-3); }
|
||||
.kb-manage-desc-block { font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
|
||||
.kb-manage-actions { display: flex; gap: 4px; flex-shrink: 0; }
|
||||
.kb-manage-empty, .kb-manage-loading {
|
||||
padding: 20px; text-align: center; font-size: 13px; color: var(--text-3);
|
||||
}
|
||||
.kb-doc-item[data-doc-status="pending"] .kb-manage-name,
|
||||
.kb-doc-item[data-doc-status="extracting"] .kb-manage-name,
|
||||
.kb-doc-item[data-doc-status="chunking"] .kb-manage-name,
|
||||
.kb-doc-item[data-doc-status="embedding"] .kb-manage-name {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
||||
/* ── Shared Form Controls ────────────────── */
|
||||
|
||||
.form-group { margin-bottom: 14px; }
|
||||
.form-group label {
|
||||
display: block; font-size: 12px; font-weight: 500;
|
||||
color: var(--text-2); margin-bottom: 5px;
|
||||
}
|
||||
.form-group input, .form-group select, .form-group textarea {
|
||||
padding: 8px 12px; border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--input-bg, var(--bg)); color: var(--text);
|
||||
font-size: 13px; font-family: inherit;
|
||||
width: 100%; max-width: 360px; outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.form-group input:disabled { opacity: 0.6; }
|
||||
.form-group input[type="range"] { max-width: 100%; border: none; background: none; }
|
||||
.form-group input[type="range"]:focus { box-shadow: none; }
|
||||
.form-group input[type="checkbox"] { width: auto; max-width: none; accent-color: var(--accent); }
|
||||
|
||||
.toggle-group {
|
||||
display: flex; gap: 1px; padding: 3px;
|
||||
background: var(--bg); border-radius: 10px;
|
||||
border: 1px solid var(--border); width: fit-content;
|
||||
}
|
||||
.toggle-btn {
|
||||
padding: 6px 14px; border: none; border-radius: 7px;
|
||||
background: transparent; color: var(--text-3);
|
||||
cursor: pointer; font-size: 12px; font-weight: 500;
|
||||
font-family: inherit; transition: all 0.15s;
|
||||
}
|
||||
.toggle-btn.active { background: var(--bg-raised); color: var(--text); }
|
||||
.toggle-btn:hover { color: var(--text-2); }
|
||||
|
||||
.btn-primary { background: var(--accent); color: var(--text-on-color); border: none; }
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
.btn-danger { background: var(--danger); color: var(--text-on-color); border: none; }
|
||||
.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
|
||||
.btn-ghost:hover { background: var(--bg-hover); }
|
||||
.btn-subtle { background: var(--accent-dim); color: var(--accent); border: none; }
|
||||
.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 6px; cursor: pointer; font-weight: 500; font-family: inherit; }
|
||||
.btn-md { padding: 7px 15px; font-size: 13px; border-radius: 8px; cursor: pointer; font-weight: 500; font-family: inherit; }
|
||||
|
||||
/* ── Badge ───────────────────────────────── */
|
||||
.badge {
|
||||
font-size: 10px; padding: 2px 7px; border-radius: 4px;
|
||||
font-weight: 600; letter-spacing: 0.3px; white-space: nowrap;
|
||||
display: inline-flex; align-items: center;
|
||||
}
|
||||
.badge-accent { background: var(--accent-dim); color: var(--accent); }
|
||||
.badge-success { background: var(--success-dim); color: var(--success); }
|
||||
.badge-warning { background: var(--warning-dim); color: var(--warning); }
|
||||
.badge-danger { background: var(--danger-dim); color: var(--danger); }
|
||||
.badge-muted { background: var(--bg-raised); color: var(--text-3); }
|
||||
|
||||
/* ── Status Dot ──────────────────────────── */
|
||||
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
|
||||
.status-dot.healthy { background: var(--success); }
|
||||
.status-dot.degraded { background: var(--warning); }
|
||||
.status-dot.down { background: var(--danger); }
|
||||
.status-dot.disabled { background: var(--text-3); }
|
||||
|
||||
/* ── Icon Button ─────────────────────────── */
|
||||
.icon-btn {
|
||||
background: none; border: none; color: var(--text-3);
|
||||
cursor: pointer; padding: 5px; border-radius: 7px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
.icon-btn:hover { background: var(--bg-hover); color: var(--text-2); }
|
||||
.icon-btn.active { color: var(--accent); }
|
||||
|
||||
168
src/css/splash.css
Normal file
168
src/css/splash.css
Normal file
@@ -0,0 +1,168 @@
|
||||
/* ── splash.css ───────────────────────────────
|
||||
Auth splash, login, PWA install banner
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
/* ── Auth Splash ─────────────────────────── */
|
||||
|
||||
.splash {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
/* Hero Panel (left) */
|
||||
.splash-hero {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 4rem 3.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 60% at 30% 40%, rgba(108,159,255,0.06), transparent),
|
||||
radial-gradient(ellipse 60% 50% at 70% 70%, rgba(167,139,250,0.05), transparent),
|
||||
var(--bg);
|
||||
}
|
||||
.splash-hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -50%;
|
||||
background-image:
|
||||
linear-gradient(rgba(108,159,255,0.04) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(108,159,255,0.04) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
animation: gridDrift 30s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes gridDrift { to { transform: translate(48px, 48px); } }
|
||||
.splash-hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 320px; height: 320px;
|
||||
bottom: -80px; right: -60px;
|
||||
background: radial-gradient(circle, rgba(167,139,250,0.08), transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-content { position: relative; z-index: 1; max-width: 520px; }
|
||||
.hero-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 1.5rem; }
|
||||
.hero-logo-mark { width: 48px; height: 48px; flex-shrink: 0; }
|
||||
.hero-logo-img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; }
|
||||
.hero-wordmark { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
|
||||
.hero-wordmark span { color: var(--accent); }
|
||||
|
||||
.hero-headline {
|
||||
font-size: 2.4rem; font-weight: 700; line-height: 1.15;
|
||||
letter-spacing: -0.03em; margin-bottom: 1rem;
|
||||
background: linear-gradient(135deg, var(--text) 0%, var(--text-2) 100%);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
||||
}
|
||||
.hero-sub { font-size: 1.05rem; color: var(--text-2); line-height: 1.6; margin-bottom: 2.5rem; max-width: 440px; }
|
||||
|
||||
.hero-features { display: flex; flex-wrap: wrap; gap: 10px; }
|
||||
.hero-pill {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
padding: 7px 14px; background: var(--bg-surface);
|
||||
border: 1px solid var(--border); border-radius: 100px;
|
||||
font-size: 0.8rem; font-weight: 500; color: var(--text-2);
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.hero-pill:hover { border-color: var(--border-light); color: var(--text); }
|
||||
.hero-pill .pill-icon { font-size: 0.95rem; line-height: 1; }
|
||||
.hero-pill.accent { border-color: rgba(108,159,255,0.2); color: var(--accent); }
|
||||
.hero-pill.purple { border-color: rgba(167,139,250,0.2); color: var(--purple); }
|
||||
.hero-version { margin-top: 3rem; font-size: 0.72rem; font-family: var(--mono); color: var(--text-3); letter-spacing: 0.04em; }
|
||||
|
||||
/* Auth Panel (right) */
|
||||
.splash-auth {
|
||||
width: 440px; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: 2rem; background: var(--bg-surface);
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
.auth-card { width: 100%; max-width: 340px; }
|
||||
.auth-card-header { margin-bottom: 2rem; }
|
||||
.auth-card-header h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 4px; }
|
||||
.auth-card-header p { font-size: 0.85rem; color: var(--text-3); }
|
||||
|
||||
.auth-tabs { display: flex; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
|
||||
.auth-tab {
|
||||
flex: 1; background: none; border: none; color: var(--text-3);
|
||||
padding: 10px 0; cursor: pointer; font-family: var(--font);
|
||||
font-size: 0.85rem; font-weight: 500;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
.auth-tab:hover { color: var(--text-2); }
|
||||
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
|
||||
.auth-error { color: var(--danger); font-size: 0.78rem; min-height: 1.2em; margin: 0.5rem 0; }
|
||||
.splash-error { color: var(--danger); font-size: 0.78rem; text-align: center; margin-top: 0.5rem; line-height: 1.5; }
|
||||
.splash-error strong { display: block; font-size: 0.85rem; margin-bottom: 0.25rem; }
|
||||
.splash-error-hint { color: var(--text-3); font-size: 0.72rem; }
|
||||
.splash-error-hint a { color: var(--accent); text-decoration: underline; cursor: pointer; }
|
||||
.auth-actions { margin-top: 1.5rem; }
|
||||
.auth-footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); text-align: center; }
|
||||
.auth-footer p { font-size: 0.75rem; color: var(--text-3); line-height: 1.6; }
|
||||
|
||||
/* Splash entrance animation */
|
||||
.hero-logo-row, .hero-headline, .hero-sub, .hero-features, .hero-version,
|
||||
.auth-card-header, .splash .auth-tabs, #authLoginForm, .splash .auth-actions {
|
||||
opacity: 0; transform: translateY(12px);
|
||||
animation: fadeUp 0.5s ease forwards;
|
||||
}
|
||||
.hero-logo-row { animation-delay: 0.05s; }
|
||||
.hero-headline { animation-delay: 0.12s; }
|
||||
.hero-sub { animation-delay: 0.19s; }
|
||||
.hero-features { animation-delay: 0.26s; }
|
||||
.hero-version { animation-delay: 0.33s; }
|
||||
.auth-card-header { animation-delay: 0.15s; }
|
||||
.splash .auth-tabs { animation-delay: 0.22s; }
|
||||
#authLoginForm { animation-delay: 0.29s; }
|
||||
.splash .auth-actions { animation-delay: 0.36s; }
|
||||
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||||
|
||||
/* Splash responsive */
|
||||
@media (max-width: 860px) {
|
||||
.splash { flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow-y: auto; }
|
||||
.splash-hero { padding: 2.5rem 1.75rem 2rem; min-height: auto; flex: none; }
|
||||
.hero-headline { font-size: 1.8rem; }
|
||||
.hero-sub { font-size: 0.95rem; margin-bottom: 1.5rem; }
|
||||
.hero-version { margin-top: 1.5rem; }
|
||||
.splash-auth { width: 100%; border-left: none; border-top: 1px solid var(--border); padding: 2rem 1.75rem; }
|
||||
.auth-card { max-width: 400px; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.splash-hero { padding: 1.5rem 1.25rem 1rem; }
|
||||
.hero-logo-row { gap: 10px; margin-bottom: 0.75rem; }
|
||||
.hero-logo-mark { width: 40px; height: 40px; }
|
||||
.hero-logo-img { width: 40px; height: 40px; }
|
||||
.hero-wordmark { font-size: 1.3rem; }
|
||||
.hero-headline { font-size: 1.35rem; margin-bottom: 0.5rem; }
|
||||
.hero-sub { font-size: 0.85rem; margin-bottom: 1rem; line-height: 1.5; }
|
||||
.hero-features { gap: 6px; }
|
||||
.hero-pill { padding: 5px 10px; font-size: 0.72rem; }
|
||||
.hero-version { margin-top: 1rem; }
|
||||
.splash-auth { padding: 1.5rem 1.25rem; }
|
||||
.auth-card-header { margin-bottom: 1rem; }
|
||||
.auth-card-header h2 { font-size: 1.1rem; }
|
||||
.auth-actions { margin-top: 1rem; }
|
||||
}
|
||||
|
||||
|
||||
/* ── PWA Install Banner ──────────────────── */
|
||||
|
||||
.pwa-install-banner {
|
||||
position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
|
||||
background: var(--bg-raised); border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg); padding: 10px 16px;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 3000;
|
||||
font-size: 13px; color: var(--text-2);
|
||||
animation: pwa-banner-in 0.3s ease;
|
||||
max-width: 90vw;
|
||||
}
|
||||
@keyframes pwa-banner-in { from { opacity: 0; transform: translateX(-50%) translateY(20px); } }
|
||||
|
||||
3098
src/css/styles.css
3098
src/css/styles.css
File diff suppressed because it is too large
Load Diff
429
src/css/surfaces.css
Normal file
429
src/css/surfaces.css
Normal file
@@ -0,0 +1,429 @@
|
||||
/* ── surfaces.css ─────────────────────────────
|
||||
Admin, settings, editor, projects, stat cards, data tables
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
/* ── Admin Storage Panel ────────────────────── */
|
||||
|
||||
.admin-storage-card {
|
||||
background: var(--bg-raised); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
|
||||
}
|
||||
.admin-storage-card h4 { margin: 0 0 10px 0; font-size: 14px; }
|
||||
.admin-storage-desc { font-size: 12px; color: var(--text-3); margin: 0 0 10px 0; }
|
||||
.admin-storage-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.admin-storage-item { display: flex; flex-direction: column; gap: 2px; }
|
||||
.admin-storage-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.admin-storage-value { font-size: 14px; font-weight: 500; }
|
||||
|
||||
|
||||
/* =========================================
|
||||
PROJECTS (v0.19.0)
|
||||
========================================= */
|
||||
|
||||
.project-group {
|
||||
margin-bottom: 2px;
|
||||
border-radius: var(--radius);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.project-group.drag-over {
|
||||
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
||||
outline: 1px dashed var(--accent);
|
||||
outline-offset: -1px;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.project-header {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 6px 10px; cursor: pointer; user-select: none;
|
||||
border-radius: var(--radius);
|
||||
transition: background var(--transition);
|
||||
}
|
||||
.project-header:hover { background: var(--bg-hover); }
|
||||
|
||||
.project-arrow {
|
||||
font-size: 10px; color: var(--text-3); width: 12px; text-align: center; flex-shrink: 0;
|
||||
}
|
||||
.project-dot {
|
||||
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
|
||||
background: var(--text-3); display: inline-block;
|
||||
}
|
||||
.project-name {
|
||||
font-size: 12px; font-weight: 600; color: var(--text-2);
|
||||
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.project-count {
|
||||
font-size: 10px; color: var(--text-3); flex-shrink: 0; margin-left: auto;
|
||||
}
|
||||
.project-menu-btn {
|
||||
opacity: 0; background: none; border: none; color: var(--text-3);
|
||||
cursor: pointer; font-size: 14px; padding: 0 4px; border-radius: 4px;
|
||||
transition: opacity var(--transition), background var(--transition);
|
||||
line-height: 1; flex-shrink: 0;
|
||||
}
|
||||
.project-header:hover .project-menu-btn { opacity: 1; }
|
||||
.project-header:hover .project-count { display: none; }
|
||||
.project-menu-btn:hover { background: var(--bg-raised); color: var(--text); }
|
||||
|
||||
.project-empty {
|
||||
font-size: 11px; color: var(--text-3); padding: 4px 10px 8px 28px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Active project indicator (v0.19.1) */
|
||||
.project-group.active { border-left: 2px solid var(--accent); }
|
||||
.project-group.active .project-header { background: color-mix(in srgb, var(--accent) 6%, transparent); }
|
||||
.project-pin { font-size: 10px; margin-left: 2px; opacity: 0.7; }
|
||||
|
||||
.sidebar.collapsed .project-group { display: none; }
|
||||
.sidebar.collapsed .recent-section .chat-group-label { display: none; }
|
||||
|
||||
/* Recent section drop target */
|
||||
.recent-section { min-height: 40px; }
|
||||
.recent-section.drag-over {
|
||||
background: color-mix(in srgb, var(--accent) 8%, transparent);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
/* Dragging state */
|
||||
.chat-item.dragging { opacity: 0.4; }
|
||||
.chat-item[draggable="true"] { cursor: grab; }
|
||||
.chat-item[draggable="true"]:active { cursor: grabbing; }
|
||||
|
||||
/* Context menu */
|
||||
.project-ctx-menu {
|
||||
position: fixed; z-index: 9999;
|
||||
background: var(--bg-surface); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); box-shadow: var(--shadow);
|
||||
padding: 4px; min-width: 160px; max-width: 220px;
|
||||
}
|
||||
.ctx-item {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
width: 100%; padding: 7px 10px; border: none; background: none;
|
||||
color: var(--text-2); font-size: 13px; cursor: pointer;
|
||||
border-radius: calc(var(--radius) - 2px); text-align: left;
|
||||
white-space: nowrap; overflow: hidden;
|
||||
}
|
||||
.ctx-item:hover { background: var(--bg-hover); color: var(--text); }
|
||||
.ctx-item.ctx-danger:hover { background: var(--danger-bg, #fef2f2); color: var(--danger, #ef4444); }
|
||||
.ctx-icon { width: 16px; text-align: center; flex-shrink: 0; font-size: 12px; }
|
||||
.ctx-divider { height: 1px; background: var(--border); margin: 3px 0; }
|
||||
.ctx-hint { font-size: 11px; color: var(--text-3); padding: 6px 10px; }
|
||||
|
||||
/* Time labels inside project-grouped sidebar */
|
||||
.chat-time-label { padding-left: 12px; font-size: 10px; }
|
||||
|
||||
/* ── Project Detail Panel (v0.19.1) ───────── */
|
||||
.project-panel { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
|
||||
.project-panel-section { display: flex; flex-direction: column; gap: 6px; }
|
||||
.project-panel-section-header { display: flex; justify-content: space-between; align-items: center; }
|
||||
.project-panel-label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.project-panel-textarea {
|
||||
width: 100%; resize: vertical; min-height: 80px; padding: 8px;
|
||||
font-family: var(--font-mono, monospace); font-size: 13px;
|
||||
background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
}
|
||||
.project-panel-textarea:focus { outline: none; border-color: var(--accent); }
|
||||
.project-panel-status { font-size: 11px; margin-left: 8px; }
|
||||
.project-panel-status.success { color: var(--success, #22c55e); }
|
||||
.project-panel-status.error { color: var(--danger, #ef4444); }
|
||||
.project-panel-list { display: flex; flex-direction: column; gap: 2px; }
|
||||
.project-panel-item {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 6px 8px; border-radius: var(--radius);
|
||||
background: var(--bg); border: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
}
|
||||
.project-panel-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.project-panel-item-remove {
|
||||
background: none; border: none; cursor: pointer; color: var(--text-3);
|
||||
font-size: 14px; padding: 2px 4px; border-radius: 4px; flex-shrink: 0;
|
||||
}
|
||||
.project-panel-item-remove:hover { color: var(--danger, #ef4444); background: var(--danger-bg, #fef2f2); }
|
||||
.project-panel-empty { font-size: 12px; color: var(--text-3); font-style: italic; padding: 4px 0; }
|
||||
.project-panel-select {
|
||||
width: 100%; padding: 6px 8px; font-size: 13px;
|
||||
background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
}
|
||||
.project-panel-select:focus { outline: none; border-color: var(--accent); }
|
||||
.project-panel-hint { font-size: 11px; color: var(--text-3); margin-top: 2px; }
|
||||
.project-panel-ws-row { display: flex; gap: 6px; align-items: center; }
|
||||
.project-panel-ws-row select { flex: 1; }
|
||||
.project-panel-checkbox {
|
||||
display: flex; align-items: center; gap: 8px; font-size: 13px;
|
||||
cursor: pointer; color: var(--text-2);
|
||||
}
|
||||
.project-panel-checkbox input { cursor: pointer; }
|
||||
.project-panel-footer { padding-top: 8px; border-top: 1px solid var(--border); }
|
||||
.project-show-archived {
|
||||
background: none; border: none; cursor: pointer;
|
||||
font-size: 11px; color: var(--text-3); padding: 6px 10px;
|
||||
width: 100%; text-align: left;
|
||||
}
|
||||
.project-show-archived:hover { color: var(--text-2); }
|
||||
.project-group.archived { opacity: 0.5; }
|
||||
.project-group.archived .project-header { font-style: italic; }
|
||||
|
||||
/* ── Router Workspace Picker (v0.21.6) ──── */
|
||||
|
||||
.router-picker-overlay {
|
||||
position: fixed; inset: 0; z-index: 9999;
|
||||
background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.router-picker {
|
||||
background: var(--bg-primary, #1a1a2e); color: var(--text, #e0e0e0);
|
||||
border: 1px solid var(--border, #333); border-radius: 12px;
|
||||
padding: 24px; min-width: 320px; max-width: 440px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
|
||||
}
|
||||
.router-picker h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
|
||||
.router-picker p { margin: 0 0 16px; font-size: 13px; color: var(--text-2, #999); }
|
||||
.router-picker-list {
|
||||
display: flex; flex-direction: column; gap: 4px;
|
||||
max-height: 280px; overflow-y: auto; margin-bottom: 16px;
|
||||
}
|
||||
.router-picker-empty {
|
||||
padding: 24px; text-align: center; color: var(--text-3, #666); font-size: 13px;
|
||||
}
|
||||
.router-picker-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 10px 12px; border: 1px solid var(--border, #333);
|
||||
border-radius: 8px; background: none; color: var(--text, #e0e0e0);
|
||||
cursor: pointer; font-size: 14px; text-align: left;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
.router-picker-item:hover {
|
||||
background: var(--hover, rgba(255,255,255,0.05));
|
||||
border-color: var(--accent, #6366f1);
|
||||
}
|
||||
.router-picker-icon { font-size: 18px; flex-shrink: 0; }
|
||||
.router-picker-actions {
|
||||
display: flex; gap: 8px; justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* ── Settings Surface ────────────────────── */
|
||||
|
||||
.surface-settings {
|
||||
display: flex; height: 100%; overflow: hidden;
|
||||
}
|
||||
.settings-topbar {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 10px 20px; border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-surface); flex-shrink: 0;
|
||||
}
|
||||
.settings-topbar-back {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
background: none; border: none; color: var(--text-3);
|
||||
cursor: pointer; font-family: inherit; font-size: 13px;
|
||||
padding: 4px 8px; border-radius: 6px; transition: color 0.12s;
|
||||
}
|
||||
.settings-topbar-back:hover { color: var(--text); }
|
||||
.settings-topbar-sep { width: 1px; height: 20px; background: var(--border); }
|
||||
.settings-topbar-title { font-size: 15px; font-weight: 600; }
|
||||
.settings-nav {
|
||||
width: 220px; flex-shrink: 0;
|
||||
border-right: 1px solid var(--border);
|
||||
background: var(--bg-surface);
|
||||
padding: 12px 8px; overflow-y: auto;
|
||||
display: flex; flex-direction: column; gap: 2px;
|
||||
}
|
||||
.settings-nav-link {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 8px 12px; border-radius: 8px;
|
||||
color: var(--text-2); text-decoration: none;
|
||||
font-size: 13px; font-weight: 500; transition: all 0.12s;
|
||||
border: none; background: none; cursor: pointer;
|
||||
font-family: inherit; width: 100%; text-align: left;
|
||||
}
|
||||
.settings-nav-link:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
|
||||
.settings-nav-link.active { background: var(--accent-dim); color: var(--accent); }
|
||||
.settings-nav-sep { margin: 8px 0; border-top: 1px solid var(--border); }
|
||||
.settings-nav-footer {
|
||||
margin-top: auto; padding: 10px 12px; border-top: 1px solid var(--border);
|
||||
}
|
||||
.settings-content { flex: 1; overflow-y: auto; padding: 28px; }
|
||||
.settings-content h2 { font-size: 18px; font-weight: 600; margin: 0 0 20px; }
|
||||
.settings-section {
|
||||
margin-bottom: 24px; padding: 20px;
|
||||
background: var(--bg-surface); border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.settings-section h3 {
|
||||
font-size: 15px; font-weight: 600; margin: 0 0 16px;
|
||||
padding-bottom: 10px; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.settings-placeholder {
|
||||
padding: 40px 20px; color: var(--text-3);
|
||||
text-align: center; font-size: 13px;
|
||||
}
|
||||
|
||||
/* ── Admin Surface ───────────────────────── */
|
||||
|
||||
.surface-admin {
|
||||
display: flex; flex-direction: column; height: 100%; overflow: hidden;
|
||||
}
|
||||
.admin-topbar {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 10px 20px; border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-surface); flex-shrink: 0;
|
||||
}
|
||||
.admin-topbar-back {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
background: none; border: none; color: var(--text-3);
|
||||
cursor: pointer; font-family: inherit; font-size: 13px;
|
||||
padding: 4px 8px; border-radius: 6px; transition: color 0.12s;
|
||||
}
|
||||
.admin-topbar-back:hover { color: var(--text); }
|
||||
.admin-topbar-sep { width: 1px; height: 20px; background: var(--border); }
|
||||
.admin-topbar-title { font-size: 15px; font-weight: 600; }
|
||||
.admin-category-tabs {
|
||||
display: flex; gap: 1px; padding: 3px;
|
||||
background: var(--bg); border-radius: 10px;
|
||||
border: 1px solid var(--border); margin-left: auto;
|
||||
}
|
||||
.admin-cat-btn {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 6px 14px; border-radius: 7px; border: none;
|
||||
cursor: pointer; font-size: 13px; font-weight: 500;
|
||||
font-family: inherit; background: transparent; color: var(--text-3);
|
||||
transition: all 0.12s;
|
||||
}
|
||||
.admin-cat-btn.active { background: var(--bg-raised); color: var(--text); }
|
||||
.admin-cat-btn:hover { color: var(--text-2); }
|
||||
.admin-body { display: flex; flex: 1; min-height: 0; }
|
||||
.admin-nav {
|
||||
width: 200px; background: var(--bg-surface);
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
|
||||
}
|
||||
.admin-nav-link {
|
||||
display: flex; padding: 8px 12px; border-radius: 8px;
|
||||
border: none; cursor: pointer; font-family: inherit;
|
||||
font-size: 13px; font-weight: 500; width: 100%;
|
||||
text-align: left; transition: all 0.12s;
|
||||
background: transparent; color: var(--text-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
.admin-nav-link:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
|
||||
.admin-nav-link.active { background: var(--accent-dim); color: var(--accent); }
|
||||
.admin-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
||||
.admin-content-header {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 14px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0;
|
||||
}
|
||||
.admin-content-header h2 { font-size: 16px; font-weight: 600; margin: 0; }
|
||||
.admin-search {
|
||||
display: flex; align-items: center; gap: 7px;
|
||||
background: var(--input-bg, var(--bg)); border-radius: 8px;
|
||||
padding: 6px 10px; border: 1px solid var(--border); width: 220px;
|
||||
}
|
||||
.admin-search input {
|
||||
background: none; border: none; color: var(--text);
|
||||
font-size: 12px; font-family: inherit; flex: 1; outline: none;
|
||||
}
|
||||
.admin-content-body { flex: 1; overflow-y: auto; padding: 24px; }
|
||||
|
||||
/* ── Stat Cards ──────────────────────────── */
|
||||
.stat-cards { display: flex; gap: 12px; margin-bottom: 20px; }
|
||||
.stat-card {
|
||||
padding: 16px 20px; background: var(--bg-surface);
|
||||
border: 1px solid var(--border); border-radius: 10px; flex: 1;
|
||||
}
|
||||
.stat-card-value { font-size: 24px; font-weight: 700; }
|
||||
.stat-card-label { font-size: 12px; color: var(--text-2); margin-top: 2px; }
|
||||
.stat-card-sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }
|
||||
|
||||
/* ── Data Tables ─────────────────────────── */
|
||||
.data-table { width: 100%; border-collapse: collapse; }
|
||||
.data-table th {
|
||||
padding: 10px 14px; text-align: left; font-weight: 600;
|
||||
font-size: 11px; color: var(--text-3); text-transform: uppercase;
|
||||
letter-spacing: 0.5px; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.data-table td {
|
||||
padding: 10px 14px; font-size: 13px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.data-table tr:hover td { background: var(--bg-hover); }
|
||||
|
||||
/* ── Editor Surface ──────────────────────── */
|
||||
|
||||
.surface-editor {
|
||||
display: flex; flex-direction: column; height: 100%; overflow: hidden;
|
||||
}
|
||||
.editor-topbar {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 6px 12px; border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-surface); flex-shrink: 0;
|
||||
}
|
||||
.editor-topbar-back {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
background: none; border: none; color: var(--text-3);
|
||||
cursor: pointer; font-family: inherit; font-size: 13px;
|
||||
padding: 4px 8px; border-radius: 6px;
|
||||
}
|
||||
.editor-topbar-back:hover { color: var(--text); }
|
||||
.editor-body { display: flex; flex: 1; min-height: 0; }
|
||||
.editor-tree {
|
||||
width: 220px; background: var(--bg-surface);
|
||||
border-right: 1px solid var(--border);
|
||||
display: flex; flex-direction: column; flex-shrink: 0;
|
||||
}
|
||||
.editor-tree-header {
|
||||
padding: 8px 10px; border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.editor-tree-files { flex: 1; overflow-y: auto; padding: 4px 0; }
|
||||
.editor-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
||||
.editor-tabs {
|
||||
display: flex; align-items: center;
|
||||
background: var(--bg-raised); border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0; overflow-x: auto; min-height: 33px;
|
||||
}
|
||||
.editor-tab {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 6px 12px; cursor: pointer; font-size: 12px;
|
||||
white-space: nowrap; border-right: 1px solid var(--border);
|
||||
background: transparent; color: var(--text-3);
|
||||
border-bottom: 2px solid transparent;
|
||||
border-top: none; border-left: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
.editor-tab.active {
|
||||
background: var(--bg); color: var(--text);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
.editor-content { flex: 1; overflow: auto; }
|
||||
.editor-statusbar {
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
padding: 3px 12px; background: var(--bg-surface);
|
||||
border-top: 1px solid var(--border); flex-shrink: 0;
|
||||
font-size: 11px; color: var(--text-3);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
.editor-chat {
|
||||
display: flex; flex-direction: column;
|
||||
min-width: 200px; background: var(--bg-surface);
|
||||
}
|
||||
.editor-chat-header {
|
||||
padding: 8px 12px; border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.editor-chat-messages { flex: 1; overflow-y: auto; padding: 12px; }
|
||||
.editor-chat-input {
|
||||
padding: 8px 12px; border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.settings-nav { width: 160px; font-size: 12px; padding: 12px 8px; }
|
||||
.settings-content { padding: 16px; }
|
||||
.admin-nav { width: 160px; }
|
||||
.admin-content-body { padding: 16px; }
|
||||
.editor-tree { width: 180px; }
|
||||
}
|
||||
124
src/css/variables.css
Normal file
124
src/css/variables.css
Normal file
@@ -0,0 +1,124 @@
|
||||
/* ── variables.css ────────────────────────────
|
||||
Theme variables, reset, base styles
|
||||
──────────────────────────────────────────── */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
/* ==========================================
|
||||
Chat Switchboard
|
||||
Clean utility layout · Open WebUI inspired
|
||||
========================================== */
|
||||
|
||||
:root {
|
||||
/* ── Core palette (Dark — default) ────────── */
|
||||
--bg: #0e0e10;
|
||||
--bg-surface: #18181b;
|
||||
--bg-raised: #222227;
|
||||
--bg-hover: #2a2a30;
|
||||
--border: #2e2e35;
|
||||
--border-light: #3a3a42;
|
||||
--text: #e8e8ed;
|
||||
--text-2: #9898a8;
|
||||
--text-3: #6b6b7b;
|
||||
--accent: #6c9fff;
|
||||
--accent-hover: #84b0ff;
|
||||
--accent-dim: rgba(108,159,255,0.12);
|
||||
--danger: #ef4444;
|
||||
--success: #22c55e;
|
||||
--warning: #eab308;
|
||||
--purple: #a78bfa;
|
||||
--purple-dim: rgba(167,139,250,0.10);
|
||||
|
||||
/* ── Contrast text for solid-color backgrounds ── */
|
||||
--text-on-color: #fff;
|
||||
--text-on-warning: #000;
|
||||
|
||||
/* ── Light variants (badge/pill text on dim backgrounds) ── */
|
||||
--accent-light: #93c5fd;
|
||||
--danger-light: #f87171;
|
||||
--success-light: #4ade80;
|
||||
--warning-light: #fbbf24;
|
||||
|
||||
/* ── Dim variants (badge/pill backgrounds) ── */
|
||||
--danger-dim: rgba(239,68,68,0.2);
|
||||
--success-dim: rgba(34,197,94,0.2);
|
||||
--warning-dim: rgba(234,179,8,0.2);
|
||||
|
||||
/* ── Surfaces ────────────────────────────── */
|
||||
--overlay: rgba(0,0,0,0.55);
|
||||
--glass: rgba(255,255,255,0.03);
|
||||
--input-bg: #1a1a1f;
|
||||
--user-bubble: rgba(108,159,255,0.08);
|
||||
--shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
|
||||
|
||||
/* ── Layout ──────────────────────────────── */
|
||||
--radius: 8px;
|
||||
--radius-lg: 12px;
|
||||
--sidebar-w: 260px;
|
||||
--sidebar-rail: 52px;
|
||||
--font: 'DM Sans', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--mono: 'JetBrains Mono', 'Söhne Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
||||
--transition: 180ms ease;
|
||||
|
||||
/* Banner system — set by JS from /api/v1/admin/settings/banner */
|
||||
--banner-top-height: 0px;
|
||||
--banner-bottom-height: 0px;
|
||||
--banner-bg: transparent;
|
||||
--banner-fg: transparent;
|
||||
}
|
||||
|
||||
/* ── Light Theme ─────────────────────────────── */
|
||||
[data-theme="light"] {
|
||||
--bg: #f7f7fa;
|
||||
--bg-surface: #ffffff;
|
||||
--bg-raised: #eff0f3;
|
||||
--bg-hover: #e5e6eb;
|
||||
--border: #d5d6dc;
|
||||
--border-light: #c2c3cb;
|
||||
--text: #1a1a2e;
|
||||
--text-2: #555770;
|
||||
--text-3: #8b8da3;
|
||||
--accent: #4a7cdb;
|
||||
--accent-hover: #3968c4;
|
||||
--accent-dim: rgba(74,124,219,0.09);
|
||||
--danger: #dc2626;
|
||||
--success: #16a34a;
|
||||
--warning: #ca8a04;
|
||||
--purple: #7c3aed;
|
||||
--purple-dim: rgba(124,58,237,0.08);
|
||||
|
||||
--text-on-color: #fff;
|
||||
--text-on-warning: #000;
|
||||
|
||||
--accent-light: #2563eb;
|
||||
--danger-light: #dc2626;
|
||||
--success-light: #16a34a;
|
||||
--warning-light: #ca8a04;
|
||||
|
||||
--danger-dim: rgba(220,38,38,0.09);
|
||||
--success-dim: rgba(22,163,74,0.09);
|
||||
--warning-dim: rgba(202,138,4,0.09);
|
||||
|
||||
--overlay: rgba(0,0,0,0.25);
|
||||
--glass: rgba(0,0,0,0.02);
|
||||
--input-bg: #f2f3f6;
|
||||
--user-bubble: rgba(74,124,219,0.06);
|
||||
--shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
|
||||
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
html, body { height: 100%; }
|
||||
body { font-family: var(--font); background: var(--bg); color: var(--text); overflow: hidden; font-size: 14px; }
|
||||
|
||||
/* Global scrollbar styling */
|
||||
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
|
||||
a { color: var(--accent); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
::selection { background: var(--accent-dim); }
|
||||
|
||||
@@ -117,6 +117,11 @@ async function startApp() {
|
||||
}
|
||||
} catch (_) {}
|
||||
|
||||
// If no chat was restored, show the welcome/empty state
|
||||
if (!App.currentChatId) {
|
||||
UI.showEmptyState();
|
||||
}
|
||||
|
||||
UI.updateUser();
|
||||
UI.showAdminButton(API.isAdmin);
|
||||
initListeners();
|
||||
@@ -125,6 +130,12 @@ async function startApp() {
|
||||
try {
|
||||
Events.connect((window.__BASE__ || '') + '/ws');
|
||||
|
||||
// Once WS connects, re-fetch tools so browser extension tools appear
|
||||
// (ToolsToggle.init runs before WS is up → server omits browser tools)
|
||||
Events.on('ws.connected', () => {
|
||||
if (typeof ToolsToggle !== 'undefined') ToolsToggle.refresh();
|
||||
});
|
||||
|
||||
// Admin-only: persistent fallback alert banner (v0.17.0)
|
||||
Events.on('role.fallback', (payload) => {
|
||||
if (App.user?.role !== 'admin') return;
|
||||
@@ -161,80 +172,6 @@ function showFallbackBanner(data) {
|
||||
|
||||
// ── Modal Helpers ───────────────────────────
|
||||
|
||||
function openModal(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
el.classList.add('active');
|
||||
// Defer overflow check — browser needs a frame to lay out the modal
|
||||
requestAnimationFrame(() => {
|
||||
el.querySelectorAll('.modal-tabs').forEach(checkTabsOverflow);
|
||||
});
|
||||
}
|
||||
|
||||
function closeModal(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.classList.remove('active');
|
||||
}
|
||||
|
||||
// Toggle .is-scrollable on tab bars that overflow horizontally
|
||||
// and inject arrow navigation buttons when needed.
|
||||
function checkTabsOverflow(tabs) {
|
||||
if (!tabs) return;
|
||||
const scrollable = tabs.scrollWidth > tabs.clientWidth + 1;
|
||||
|
||||
if (!scrollable) {
|
||||
// Remove wrapper if overflow went away (e.g. zoom decreased)
|
||||
const wrap = tabs.parentElement;
|
||||
if (wrap && wrap.classList.contains('modal-tabs-wrap')) {
|
||||
wrap.parentElement.insertBefore(tabs, wrap);
|
||||
wrap.remove();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Wrap if not already wrapped
|
||||
if (!tabs.parentElement.classList.contains('modal-tabs-wrap')) {
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'modal-tabs-wrap';
|
||||
tabs.parentElement.insertBefore(wrap, tabs);
|
||||
wrap.appendChild(tabs);
|
||||
|
||||
// Inject arrows
|
||||
const left = document.createElement('button');
|
||||
left.className = 'tab-arrow tab-arrow-left';
|
||||
left.innerHTML = '‹';
|
||||
left.addEventListener('click', () => { tabs.scrollLeft -= 120; });
|
||||
|
||||
const right = document.createElement('button');
|
||||
right.className = 'tab-arrow tab-arrow-right';
|
||||
right.innerHTML = '›';
|
||||
right.addEventListener('click', () => { tabs.scrollLeft += 120; });
|
||||
|
||||
wrap.appendChild(left);
|
||||
wrap.appendChild(right);
|
||||
|
||||
// Update arrow visibility on scroll
|
||||
tabs.addEventListener('scroll', () => updateTabArrows(tabs), { passive: true });
|
||||
}
|
||||
|
||||
updateTabArrows(tabs);
|
||||
}
|
||||
|
||||
function updateTabArrows(tabs) {
|
||||
const wrap = tabs.parentElement;
|
||||
if (!wrap || !wrap.classList.contains('modal-tabs-wrap')) return;
|
||||
|
||||
const left = wrap.querySelector('.tab-arrow-left');
|
||||
const right = wrap.querySelector('.tab-arrow-right');
|
||||
if (!left || !right) return;
|
||||
|
||||
const atStart = tabs.scrollLeft <= 2;
|
||||
const atEnd = tabs.scrollLeft + tabs.clientWidth >= tabs.scrollWidth - 2;
|
||||
|
||||
left.classList.toggle('visible', !atStart);
|
||||
right.classList.toggle('visible', !atEnd);
|
||||
}
|
||||
|
||||
// ── Auth Flow ────────────────────────────────
|
||||
|
||||
function showSplash(health) {
|
||||
|
||||
@@ -14,6 +14,9 @@ const ToolsToggle = (() => {
|
||||
knowledge: { label: 'Knowledge Bases', icon: '📚' },
|
||||
notes: { label: 'Notes', icon: '📝' },
|
||||
utilities: { label: 'Utilities', icon: '🧮' },
|
||||
workspace: { label: 'Workspace', icon: '🗂️' },
|
||||
context: { label: 'Context', icon: '📎' },
|
||||
memory: { label: 'Memory', icon: '🧠' },
|
||||
browser: { label: 'Extensions', icon: '🧩' },
|
||||
};
|
||||
|
||||
@@ -157,14 +160,15 @@ const ToolsToggle = (() => {
|
||||
const state = _categoryState(cat);
|
||||
const tools = _categories[cat];
|
||||
const expanded = _expanded.has(cat);
|
||||
const stateClass = state === 'all' ? 'enabled' : state === 'partial' ? 'partial' : '';
|
||||
const switchClass = state === 'all' ? 'on' : state === 'partial' ? 'on partial' : '';
|
||||
const chevron = tools.length > 1
|
||||
? `<span class="tools-popup-expand ${expanded ? 'open' : ''}" data-expand="${cat}">›</span>`
|
||||
: '';
|
||||
const labelExpand = tools.length > 1 ? ` data-expand="${cat}"` : '';
|
||||
|
||||
html += `<div class="tools-popup-category ${stateClass}" data-category="${cat}">
|
||||
<span class="tools-popup-check"></span>
|
||||
<span class="tools-popup-label">${meta.icon} ${meta.label}</span>
|
||||
html += `<div class="tools-popup-category" data-category="${cat}">
|
||||
<span class="tools-popup-switch ${switchClass}" data-switch="${cat}"><span class="tools-popup-switch-knob"></span></span>
|
||||
<span class="tools-popup-label"${labelExpand}>${meta.icon} ${meta.label}</span>
|
||||
${chevron}
|
||||
</div>`;
|
||||
|
||||
@@ -172,8 +176,8 @@ const ToolsToggle = (() => {
|
||||
if (expanded && tools.length > 1) {
|
||||
for (const t of tools) {
|
||||
const on = !_disabled.has(t.name);
|
||||
html += `<div class="tools-popup-tool ${on ? 'enabled' : ''}" data-tool="${t.name}">
|
||||
<span class="tools-popup-check"></span>
|
||||
html += `<div class="tools-popup-tool" data-tool="${t.name}">
|
||||
<span class="tools-popup-switch ${on ? 'on' : ''}" data-tool-switch="${t.name}"><span class="tools-popup-switch-knob"></span></span>
|
||||
<span class="tools-popup-label">${t.displayName}</span>
|
||||
</div>`;
|
||||
}
|
||||
@@ -196,23 +200,40 @@ const ToolsToggle = (() => {
|
||||
popup.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
// Expand/collapse chevron
|
||||
const expander = e.target.closest('.tools-popup-expand');
|
||||
// Toggle switch on category row
|
||||
const catSwitch = e.target.closest('[data-switch]');
|
||||
if (catSwitch) {
|
||||
_toggleCategory(catSwitch.dataset.switch);
|
||||
return;
|
||||
}
|
||||
|
||||
// Toggle switch on individual tool row
|
||||
const toolSwitch = e.target.closest('[data-tool-switch]');
|
||||
if (toolSwitch) {
|
||||
_toggleTool(toolSwitch.dataset.toolSwitch);
|
||||
return;
|
||||
}
|
||||
|
||||
// Expand/collapse: chevron or label click on multi-tool categories
|
||||
const expander = e.target.closest('[data-expand]');
|
||||
if (expander) {
|
||||
_toggleExpand(expander.dataset.expand);
|
||||
return;
|
||||
}
|
||||
|
||||
// Individual tool toggle
|
||||
// Individual tool label (no expand, just toggle)
|
||||
const toolRow = e.target.closest('.tools-popup-tool');
|
||||
if (toolRow) {
|
||||
_toggleTool(toolRow.dataset.tool);
|
||||
return;
|
||||
}
|
||||
|
||||
// Category toggle
|
||||
// Single-tool category label click (no chevron) — toggle
|
||||
const catRow = e.target.closest('.tools-popup-category');
|
||||
if (catRow) _toggleCategory(catRow.dataset.category);
|
||||
if (catRow) {
|
||||
_toggleCategory(catRow.dataset.category);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
// Close on outside click
|
||||
|
||||
@@ -539,9 +539,10 @@ const UI = {
|
||||
},
|
||||
|
||||
showEmptyState() {
|
||||
var base = window.__BASE__ || '';
|
||||
document.getElementById('chatMessages').innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="empty-logo"><img src="favicon-256.png" class="empty-logo-img" alt=""></div>
|
||||
<div class="empty-logo"><img src="${base}/favicon-256.png" class="empty-logo-img" alt=""></div>
|
||||
<h2>Chat Switchboard</h2>
|
||||
<p>Select a model and start chatting</p>
|
||||
</div>`;
|
||||
@@ -995,6 +996,8 @@ const UI = {
|
||||
|
||||
showAdminButton(show) {
|
||||
document.getElementById('menuAdmin').style.display = show ? '' : 'none';
|
||||
var dbg = document.getElementById('menuDebug');
|
||||
if (dbg) dbg.style.display = show ? '' : 'none';
|
||||
},
|
||||
|
||||
// ── Generating State ─────────────────────
|
||||
|
||||
@@ -348,13 +348,18 @@ function popOutExtBlock(blockId) {
|
||||
|
||||
const lang = block.getAttribute('data-ext-lang') || '';
|
||||
|
||||
// Read current theme colors so the iframe respects light/dark mode
|
||||
const cs = getComputedStyle(document.documentElement);
|
||||
const bgColor = cs.getPropertyValue('--bg-surface').trim() || '#fff';
|
||||
const textColor = cs.getPropertyValue('--text').trim() || '#1a1a2e';
|
||||
|
||||
// Wrap in a minimal HTML document for the iframe
|
||||
const html = `<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body { margin: 0; padding: 16px; display: flex; justify-content: center;
|
||||
align-items: flex-start; min-height: 100vh; background: #fff;
|
||||
align-items: flex-start; min-height: 100vh; background: ${bgColor}; color: ${textColor};
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
|
||||
body > * { max-width: 100%; }
|
||||
svg { max-width: 100%; height: auto; }
|
||||
|
||||
@@ -791,3 +791,77 @@ function showConfirm(message, opts = {}) {
|
||||
overlay.querySelector('[data-action="cancel"]').focus();
|
||||
});
|
||||
}
|
||||
|
||||
// ── Modal open/close ────────────────────────
|
||||
// Generic modal show/hide used by settings, admin, debug, team-admin modals.
|
||||
// Moved here from app.js so all surfaces (not just chat) can use modals.
|
||||
|
||||
function openModal(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
el.classList.add('active');
|
||||
// Defer overflow check — browser needs a frame to lay out the modal
|
||||
requestAnimationFrame(() => {
|
||||
el.querySelectorAll('.modal-tabs').forEach(checkTabsOverflow);
|
||||
});
|
||||
}
|
||||
|
||||
function closeModal(id) {
|
||||
const el = document.getElementById(id);
|
||||
if (el) el.classList.remove('active');
|
||||
}
|
||||
|
||||
// Toggle .is-scrollable on tab bars that overflow horizontally
|
||||
// and inject arrow navigation buttons when needed.
|
||||
function checkTabsOverflow(tabs) {
|
||||
if (!tabs) return;
|
||||
const scrollable = tabs.scrollWidth > tabs.clientWidth + 1;
|
||||
|
||||
if (!scrollable) {
|
||||
const wrap = tabs.parentElement;
|
||||
if (wrap && wrap.classList.contains('modal-tabs-wrap')) {
|
||||
wrap.parentElement.insertBefore(tabs, wrap);
|
||||
wrap.remove();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (!tabs.parentElement.classList.contains('modal-tabs-wrap')) {
|
||||
const wrap = document.createElement('div');
|
||||
wrap.className = 'modal-tabs-wrap';
|
||||
tabs.parentElement.insertBefore(wrap, tabs);
|
||||
wrap.appendChild(tabs);
|
||||
|
||||
const left = document.createElement('button');
|
||||
left.className = 'tab-arrow tab-arrow-left';
|
||||
left.innerHTML = '‹';
|
||||
left.addEventListener('click', () => { tabs.scrollLeft -= 120; });
|
||||
|
||||
const right = document.createElement('button');
|
||||
right.className = 'tab-arrow tab-arrow-right';
|
||||
right.innerHTML = '›';
|
||||
right.addEventListener('click', () => { tabs.scrollLeft += 120; });
|
||||
|
||||
wrap.appendChild(left);
|
||||
wrap.appendChild(right);
|
||||
|
||||
tabs.addEventListener('scroll', () => updateTabArrows(tabs), { passive: true });
|
||||
}
|
||||
|
||||
updateTabArrows(tabs);
|
||||
}
|
||||
|
||||
function updateTabArrows(tabs) {
|
||||
const wrap = tabs.parentElement;
|
||||
if (!wrap || !wrap.classList.contains('modal-tabs-wrap')) return;
|
||||
|
||||
const left = wrap.querySelector('.tab-arrow-left');
|
||||
const right = wrap.querySelector('.tab-arrow-right');
|
||||
if (!left || !right) return;
|
||||
|
||||
const atStart = tabs.scrollLeft <= 2;
|
||||
const atEnd = tabs.scrollLeft + tabs.clientWidth >= tabs.scrollWidth - 2;
|
||||
|
||||
left.classList.toggle('visible', !atStart);
|
||||
right.classList.toggle('visible', !atEnd);
|
||||
}
|
||||
|
||||
@@ -15,7 +15,14 @@ const CACHE_NAME = 'switchboard-%%APP_VERSION%%-%%BUILD_HASH%%';
|
||||
const SHELL_FILES = [
|
||||
'./',
|
||||
'./index.html',
|
||||
'./css/styles.css',
|
||||
'./css/variables.css',
|
||||
'./css/layout.css',
|
||||
'./css/primitives.css',
|
||||
'./css/modals.css',
|
||||
'./css/chat.css',
|
||||
'./css/panels.css',
|
||||
'./css/surfaces.css',
|
||||
'./css/splash.css',
|
||||
'./js/debug.js',
|
||||
'./js/events.js',
|
||||
'./js/extensions.js',
|
||||
|
||||
Reference in New Issue
Block a user