steps 5-8: deep gut — purge chat/notes/projects/providers from code
main.go: remove ~300 lines of stale routes referencing deleted handlers (channels, messages, folders, personas, notes, projects, memories, models, providers, tasks, roles, usage, routing, capabilities, etc.) Fix branding: "Chat Switchboard" → "Switchboard Core" pages: remove chat/notes/projects surface manifests and templates Keep: admin, settings, team-admin, workflow, workflow-landing frontend: delete chat/, notes/, projects/ surface directories (19 files) Delete 5 CSS files (4,144 lines): sw-chat-*, sw-notes-*, sw-projects-* SDK: strip gutted API domains (594→287 lines), remove chatPane/notesPane tests: remove integration_test.go (5,194 lines, broken imports to deleted packages) and perm_enforcement_test.go (551 lines, depended on deleted test helpers). Fix testmain_test.go (remove providers import). openapi.yaml: replace 12,491-line stale spec with kernel auth stub. Full ICD rebuild is Step 8 proper. Auth (builtin, mTLS, OIDC) untouched throughout. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,847 +0,0 @@
|
||||
/* ==========================================
|
||||
Chat Switchboard — Preact ChatPane Kit CSS
|
||||
==========================================
|
||||
v0.37.8: Styles for the composable ChatPane kit.
|
||||
sw- prefixed, no conflicts with legacy chat-pane.css.
|
||||
========================================== */
|
||||
|
||||
/* ── Container ─────────────────────────────── */
|
||||
|
||||
.sw-chat-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--bg, #0e0e10);
|
||||
}
|
||||
|
||||
/* ── Header Bar (standalone mode) ──────────── */
|
||||
|
||||
.sw-chat-pane__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid var(--border, #2a2a2e);
|
||||
background: var(--bg-secondary, #151517);
|
||||
flex-shrink: 0;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.sw-chat-pane__header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sw-chat-pane__header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Chat History Select ──────────────────── */
|
||||
|
||||
.sw-chat-history__select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: var(--bg, #0e0e10);
|
||||
border: 1px solid var(--border, #2a2a2e);
|
||||
border-radius: 4px;
|
||||
color: var(--text, #eee);
|
||||
font-size: 11px;
|
||||
font-family: inherit;
|
||||
padding: 4px 6px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sw-chat-history__select:focus {
|
||||
border-color: var(--accent, #b38a4e);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sw-chat-history__new-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background: none;
|
||||
border: 1px solid var(--border, #2a2a2e);
|
||||
border-radius: 4px;
|
||||
color: var(--text-2, #999);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.sw-chat-history__new-btn:hover {
|
||||
color: var(--accent, #b38a4e);
|
||||
border-color: var(--accent, #b38a4e);
|
||||
background: var(--accent-dim, rgba(179, 138, 78, 0.1));
|
||||
}
|
||||
|
||||
/* ── Model Selector ───────────────────────── */
|
||||
|
||||
.sw-model-selector__select {
|
||||
background: var(--bg, #0e0e10);
|
||||
border: 1px solid var(--border, #2a2a2e);
|
||||
border-radius: 4px;
|
||||
color: var(--text-2, #999);
|
||||
font-size: 11px;
|
||||
font-family: inherit;
|
||||
padding: 4px 6px;
|
||||
cursor: pointer;
|
||||
min-width: 100px;
|
||||
max-width: 160px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sw-model-selector__select:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.sw-model-selector__select:focus {
|
||||
border-color: var(--accent, #b38a4e);
|
||||
outline: none;
|
||||
color: var(--text, #eee);
|
||||
}
|
||||
|
||||
/* ── Messages Area ─────────────────────────── */
|
||||
|
||||
.sw-chat-pane__messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
scroll-behavior: smooth;
|
||||
padding: 12px 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ── Message Bubbles ───────────────────────── */
|
||||
|
||||
.sw-chat-msg {
|
||||
padding: 8px 16px;
|
||||
font-size: var(--msg-font, 14px);
|
||||
line-height: 1.65;
|
||||
color: var(--text, #eee);
|
||||
}
|
||||
|
||||
.sw-chat-msg + .sw-chat-msg {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* User messages — right-aligned bubble */
|
||||
.sw-chat-msg--user {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.sw-chat-msg--user .sw-chat-msg__content {
|
||||
background: var(--accent-dim, rgba(179, 138, 78, 0.15));
|
||||
color: var(--text, #eee);
|
||||
padding: 8px 14px;
|
||||
border-radius: 12px 12px 2px 12px;
|
||||
max-width: 85%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* Other user messages — left-aligned bubble */
|
||||
.sw-chat-msg--other {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.sw-chat-msg--other .sw-chat-msg__content {
|
||||
background: var(--bg-2, #1a1a1e);
|
||||
color: var(--text, #eee);
|
||||
padding: 8px 14px;
|
||||
border-radius: 12px 12px 12px 2px;
|
||||
max-width: 85%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.sw-chat-msg__sender {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-3, #555);
|
||||
margin-bottom: 2px;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
/* ── @Mention highlights in rendered messages ─ */
|
||||
|
||||
.sw-mention {
|
||||
color: var(--accent, #6366f1);
|
||||
background: rgba(var(--accent-rgb, 99, 102, 241), 0.1);
|
||||
border-radius: 3px;
|
||||
padding: 0 3px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Typing Indicator ─────────────────────── */
|
||||
|
||||
.sw-typing-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 16px;
|
||||
font-size: 12px;
|
||||
color: var(--text-3, #888);
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
.sw-typing-indicator__dots {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.sw-typing-indicator__dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-3, #888);
|
||||
animation: sw-typing-bounce 1.4s infinite ease-in-out both;
|
||||
}
|
||||
|
||||
.sw-typing-indicator__dot:nth-child(1) { animation-delay: 0s; }
|
||||
.sw-typing-indicator__dot:nth-child(2) { animation-delay: 0.16s; }
|
||||
.sw-typing-indicator__dot:nth-child(3) { animation-delay: 0.32s; }
|
||||
|
||||
@keyframes sw-typing-bounce {
|
||||
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
|
||||
40% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Assistant messages — left-aligned */
|
||||
.sw-chat-msg--assistant {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.sw-chat-msg--assistant .sw-chat-msg__content {
|
||||
max-width: 100%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* System/error messages */
|
||||
.sw-chat-msg--system {
|
||||
padding: 6px 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sw-chat-msg--system .sw-chat-msg__content {
|
||||
color: var(--danger, #f44336);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ── Streaming indicator ───────────────────── */
|
||||
|
||||
.sw-chat-msg--streaming .sw-chat-msg__content::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
background: var(--accent, #b38a4e);
|
||||
margin-left: 2px;
|
||||
vertical-align: text-bottom;
|
||||
animation: sw-cursor-blink 0.8s step-end infinite;
|
||||
}
|
||||
|
||||
@keyframes sw-cursor-blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* ── Typing dots ───────────────────────────── */
|
||||
|
||||
.sw-chat-msg--typing {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.sw-chat-msg--typing .sw-typing-dots {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.sw-chat-msg--typing .sw-typing-dots span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-3, #555);
|
||||
animation: sw-dot-bounce 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.sw-chat-msg--typing .sw-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
|
||||
.sw-chat-msg--typing .sw-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes sw-dot-bounce {
|
||||
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
|
||||
30% { transform: translateY(-4px); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ── Markdown content ──────────────────────── */
|
||||
|
||||
.sw-chat-msg__content p { margin: 0 0 0.5em; }
|
||||
.sw-chat-msg__content p:last-child { margin-bottom: 0; }
|
||||
|
||||
.sw-chat-msg__content pre {
|
||||
background: var(--bg-secondary, #151517);
|
||||
border: 1px solid var(--border, #2a2a2e);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
overflow-x: auto;
|
||||
margin: 8px 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
font-family: var(--mono, 'SF Mono', monospace);
|
||||
}
|
||||
|
||||
.sw-chat-msg__content code {
|
||||
background: var(--bg-secondary, #151517);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.88em;
|
||||
font-family: var(--mono, 'SF Mono', monospace);
|
||||
}
|
||||
|
||||
.sw-chat-msg__content pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.sw-chat-msg__content ul, .sw-chat-msg__content ol {
|
||||
margin: 4px 0;
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
.sw-chat-msg__content blockquote {
|
||||
border-left: 3px solid var(--accent, #b38a4e);
|
||||
padding: 4px 12px;
|
||||
margin: 8px 0;
|
||||
color: var(--text-2, #999);
|
||||
}
|
||||
|
||||
.sw-chat-msg__content a {
|
||||
color: var(--accent, #b38a4e);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sw-chat-msg__content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sw-chat-msg__content table {
|
||||
border-collapse: collapse;
|
||||
margin: 8px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sw-chat-msg__content th,
|
||||
.sw-chat-msg__content td {
|
||||
border: 1px solid var(--border, #2a2a2e);
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.sw-chat-msg__content th {
|
||||
background: var(--bg-secondary, #151517);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── Welcome / Empty State ─────────────────── */
|
||||
|
||||
.sw-chat-welcome {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.sw-chat-welcome__title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text, #eee);
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.sw-chat-welcome__hint {
|
||||
font-size: 13px;
|
||||
color: var(--text-3, #555);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Input Bar ─────────────────────────────── */
|
||||
|
||||
.sw-chat-pane__input-bar {
|
||||
flex-shrink: 0;
|
||||
border-top: 1px solid var(--border, #2a2a2e);
|
||||
background: var(--bg-secondary, #151517);
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.sw-msg-input__wrap {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 6px;
|
||||
background: var(--bg, #0e0e10);
|
||||
border: 1px solid var(--border, #2a2a2e);
|
||||
border-radius: 8px;
|
||||
padding: 6px 8px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.sw-msg-input__wrap:focus-within {
|
||||
border-color: var(--accent, #b38a4e);
|
||||
}
|
||||
|
||||
.sw-msg-input__textarea {
|
||||
flex: 1;
|
||||
min-height: 20px;
|
||||
max-height: 160px;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text, #eee);
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
line-height: 1.5;
|
||||
resize: none;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ── Send Button ───────────────────────────── */
|
||||
|
||||
.sw-msg-input__send {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--accent, #b38a4e);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.sw-msg-input__send:hover {
|
||||
background: var(--accent-dim, rgba(179, 138, 78, 0.15));
|
||||
color: var(--accent-hover, #c9a05e);
|
||||
}
|
||||
|
||||
.sw-msg-input__send:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── Stop Button ──────────────────────────── */
|
||||
|
||||
.sw-msg-input__stop {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--danger, #f44336);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.sw-msg-input__stop:hover {
|
||||
background: rgba(244, 67, 54, 0.1);
|
||||
}
|
||||
|
||||
/* ── Input Buttons Row ────────────────────── */
|
||||
|
||||
.sw-msg-input__buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Emoji Button + Picker ────────────────── */
|
||||
|
||||
.sw-msg-input__emoji-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sw-msg-input__emoji-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--text-3, #555);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.sw-msg-input__emoji-btn:hover {
|
||||
color: var(--text-2, #999);
|
||||
}
|
||||
|
||||
.sw-emoji-picker {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: 0;
|
||||
width: 320px;
|
||||
max-height: 360px;
|
||||
background: var(--bg-secondary, #151517);
|
||||
border: 1px solid var(--border, #2a2a2e);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sw-emoji-picker__tabs {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border-bottom: 1px solid var(--border, #2a2a2e);
|
||||
padding: 4px 4px 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-emoji-picker__tab {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
padding: 6px 4px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sw-emoji-picker__tab--active {
|
||||
border-bottom-color: var(--accent, #b38a4e);
|
||||
}
|
||||
|
||||
.sw-emoji-picker__search {
|
||||
margin: 6px 8px;
|
||||
padding: 6px 10px;
|
||||
background: var(--bg, #0e0e10);
|
||||
border: 1px solid var(--border, #2a2a2e);
|
||||
border-radius: 6px;
|
||||
color: var(--text, #eee);
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-emoji-picker__search:focus {
|
||||
border-color: var(--accent, #b38a4e);
|
||||
}
|
||||
|
||||
.sw-emoji-picker__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
gap: 2px;
|
||||
padding: 6px 8px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.sw-emoji-picker__emoji {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.1s;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sw-emoji-picker__emoji:hover {
|
||||
background: var(--bg, #0e0e10);
|
||||
}
|
||||
|
||||
.sw-emoji-picker__empty {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: var(--text-3, #555);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ── CM6 Chat Input ──────────────────────── */
|
||||
|
||||
.sw-msg-input__cm-container {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sw-msg-input__cm-container .cm-editor {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sw-msg-input__cm-container .cm-editor.cm-focused {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ── Error Banner ─────────────────────────── */
|
||||
|
||||
.sw-chat-pane__error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(244, 67, 54, 0.1);
|
||||
border-bottom: 1px solid rgba(244, 67, 54, 0.2);
|
||||
color: var(--danger, #f44336);
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-chat-pane__error-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sw-chat-pane__error-dismiss {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--danger, #f44336);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.sw-chat-pane__error-dismiss:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ── Load More ────────────────────────────── */
|
||||
|
||||
.sw-chat-pane__load-more {
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.sw-chat-pane__load-more-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--border, #2a2a2e);
|
||||
border-radius: 6px;
|
||||
color: var(--text-2, #999);
|
||||
font-size: 12px;
|
||||
padding: 6px 16px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.sw-chat-pane__load-more-btn:hover {
|
||||
border-color: var(--accent, #b38a4e);
|
||||
color: var(--text, #eee);
|
||||
}
|
||||
|
||||
.sw-chat-pane__load-more-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── Message Footer (time + actions) ──────── */
|
||||
|
||||
.sw-chat-msg__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.sw-chat-msg:hover .sw-chat-msg__footer {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sw-chat-msg__time {
|
||||
font-size: 10px;
|
||||
color: var(--text-3, #555);
|
||||
}
|
||||
|
||||
/* ── Message Actions Toolbar ──────────────── */
|
||||
|
||||
.sw-chat-msg__actions {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.sw-chat-msg__action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: var(--text-3, #555);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sw-chat-msg__action-btn:hover {
|
||||
color: var(--text, #eee);
|
||||
background: var(--bg-secondary, #151517);
|
||||
}
|
||||
|
||||
.sw-chat-msg__action-btn--danger:hover {
|
||||
color: var(--danger, #f44336);
|
||||
}
|
||||
|
||||
/* ── Code Block ───────────────────────────── */
|
||||
|
||||
.sw-code-block {
|
||||
position: relative;
|
||||
margin: 8px 0;
|
||||
border: 1px solid var(--border, #2a2a2e);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sw-code-block__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 8px;
|
||||
background: var(--bg, #0e0e10);
|
||||
border-bottom: 1px solid var(--border, #2a2a2e);
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
.sw-code-block__lang {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--text-3, #555);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-family: var(--mono, 'SF Mono', monospace);
|
||||
}
|
||||
|
||||
.sw-code-block__copy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-3, #555);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sw-code-block__copy:hover {
|
||||
color: var(--text, #eee);
|
||||
background: var(--bg-secondary, #151517);
|
||||
}
|
||||
|
||||
.sw-code-block__copy-text {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.sw-code-block__pre {
|
||||
background: var(--bg-secondary, #151517);
|
||||
padding: 10px 12px;
|
||||
overflow-x: auto;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
font-family: var(--mono, 'SF Mono', monospace);
|
||||
}
|
||||
|
||||
.sw-code-block__pre code {
|
||||
background: none;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* ── Task List Checkboxes ─────────────────── */
|
||||
|
||||
.sw-task-item {
|
||||
list-style: none;
|
||||
margin-left: -1.5em;
|
||||
}
|
||||
|
||||
.sw-task-checkbox {
|
||||
margin-right: 6px;
|
||||
vertical-align: middle;
|
||||
accent-color: var(--accent, #b38a4e);
|
||||
}
|
||||
|
||||
/* ── Thinking / Reasoning Blocks ────────── */
|
||||
|
||||
.sw-chat-msg__thinking {
|
||||
margin-bottom: 8px;
|
||||
border-left: 3px solid var(--border, rgba(255,255,255,0.1));
|
||||
border-radius: 4px;
|
||||
font-size: 0.85em;
|
||||
color: var(--text-muted, #888);
|
||||
}
|
||||
|
||||
.sw-chat-msg__thinking-toggle {
|
||||
cursor: pointer;
|
||||
padding: 6px 10px;
|
||||
user-select: none;
|
||||
font-weight: 500;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.sw-chat-msg__thinking-toggle:hover { opacity: 1; }
|
||||
|
||||
.sw-chat-msg__thinking[open] .sw-chat-msg__thinking-toggle {
|
||||
border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sw-chat-msg__thinking-content {
|
||||
padding: 6px 10px 10px;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,897 +0,0 @@
|
||||
/* ==========================================
|
||||
Chat Switchboard — Preact NotesPane Kit CSS
|
||||
==========================================
|
||||
v0.37.9: Styles for the composable NotesPane kit.
|
||||
sw-notes-pane prefixed, no conflicts with legacy.
|
||||
========================================== */
|
||||
|
||||
/* ── Container ─────────────────────────────── */
|
||||
|
||||
.sw-notes-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--bg, #0e0e10);
|
||||
}
|
||||
|
||||
/* ── Toolbar ───────────────────────────────── */
|
||||
|
||||
.sw-notes-pane__toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid var(--border, #2e2e35);
|
||||
background: var(--bg-surface, #18181b);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-notes-pane__toolbar-spacer { flex: 1; }
|
||||
|
||||
.sw-notes-pane__toolbar-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
background: none;
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-radius: 4px;
|
||||
color: var(--text-2, #9898a8);
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s, background 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sw-notes-pane__toolbar-btn:hover {
|
||||
color: var(--accent, #6c9fff);
|
||||
border-color: var(--accent, #6c9fff);
|
||||
background: var(--accent-dim, rgba(108,159,255,0.12));
|
||||
}
|
||||
|
||||
/* ── Search + Filters ──────────────────────── */
|
||||
|
||||
.sw-notes-pane__search-row {
|
||||
display: flex;
|
||||
padding: 6px 10px 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-notes-pane__search-input {
|
||||
width: 100%;
|
||||
background: var(--input-bg, #1a1a1f);
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-radius: 4px;
|
||||
color: var(--text, #e8e8ed);
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
padding: 5px 8px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.sw-notes-pane__search-input:focus {
|
||||
border-color: var(--accent, #6c9fff);
|
||||
}
|
||||
|
||||
.sw-notes-pane__filter-row {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 4px 10px 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-notes-pane__filter-select {
|
||||
flex: 1;
|
||||
background: var(--input-bg, #1a1a1f);
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-radius: 4px;
|
||||
color: var(--text-2, #9898a8);
|
||||
font-size: 11px;
|
||||
font-family: inherit;
|
||||
padding: 3px 6px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sw-notes-pane__filter-select:focus {
|
||||
border-color: var(--accent, #6c9fff);
|
||||
}
|
||||
|
||||
/* ── Tag Cloud ─────────────────────────────── */
|
||||
|
||||
.sw-notes-pane__tag-cloud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 3px;
|
||||
padding: 0 10px 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-notes-pane__tag-chip {
|
||||
display: inline-flex;
|
||||
padding: 1px 6px;
|
||||
background: var(--purple-dim, rgba(167,139,250,0.1));
|
||||
color: var(--purple, #a78bfa);
|
||||
font-size: 10px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.sw-notes-pane__tag-chip:hover,
|
||||
.sw-notes-pane__tag-chip--active {
|
||||
border-color: var(--purple, #a78bfa);
|
||||
background: rgba(167,139,250,0.18);
|
||||
}
|
||||
|
||||
/* ── Note List ─────────────────────────────── */
|
||||
|
||||
.sw-notes-pane__list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.sw-notes-pane__list-empty {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__pinned-divider {
|
||||
padding: 2px 10px;
|
||||
font-size: 10px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid var(--border, #2e2e35);
|
||||
background: var(--bg-surface, #18181b);
|
||||
}
|
||||
|
||||
/* ── Note List Item ────────────────────────── */
|
||||
|
||||
.sw-notes-pane__item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid var(--border, #2e2e35);
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
|
||||
.sw-notes-pane__item:hover {
|
||||
background: var(--bg-hover, #2a2a30);
|
||||
}
|
||||
|
||||
.sw-notes-pane__item--selected {
|
||||
background: var(--accent-dim, rgba(108,159,255,0.12));
|
||||
}
|
||||
|
||||
.sw-notes-pane__item-checkbox {
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__item-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sw-notes-pane__item-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__item-title {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text, #e8e8ed);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sw-notes-pane__item-time {
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
}
|
||||
|
||||
.sw-notes-pane__item-preview {
|
||||
font-size: 12px;
|
||||
color: var(--text-2, #9898a8);
|
||||
margin-top: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sw-notes-pane__item-preview mark {
|
||||
background: var(--warning-dim, rgba(234,179,8,0.2));
|
||||
color: var(--warning-light, #fbbf24);
|
||||
border-radius: 2px;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__item-meta {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-top: 3px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sw-notes-pane__item-folder {
|
||||
font-size: 10px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
background: var(--bg-raised, #222227);
|
||||
padding: 0 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__item-tag {
|
||||
font-size: 10px;
|
||||
color: var(--purple, #a78bfa);
|
||||
background: var(--purple-dim, rgba(167,139,250,0.1));
|
||||
padding: 0 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__item-pin {
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
padding: 2px;
|
||||
opacity: 0.4;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.sw-notes-pane__item:hover .sw-notes-pane__item-pin,
|
||||
.sw-notes-pane__item-pin--active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sw-notes-pane__item-pin--active {
|
||||
color: var(--accent, #6c9fff);
|
||||
}
|
||||
|
||||
/* ── Selection Bar ─────────────────────────── */
|
||||
|
||||
.sw-notes-pane__selection-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
background: var(--bg-surface, #18181b);
|
||||
border-top: 1px solid var(--border, #2e2e35);
|
||||
font-size: 12px;
|
||||
color: var(--text-2, #9898a8);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-notes-pane__selection-bar label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ── Load More ─────────────────────────────── */
|
||||
|
||||
.sw-notes-pane__load-more {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-top: 1px solid var(--border, #2e2e35);
|
||||
color: var(--accent, #6c9fff);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.sw-notes-pane__load-more:hover {
|
||||
background: var(--accent-dim, rgba(108,159,255,0.12));
|
||||
}
|
||||
|
||||
/* ── Editor ────────────────────────────────── */
|
||||
|
||||
.sw-notes-pane__editor-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid var(--border, #2e2e35);
|
||||
background: var(--bg-surface, #18181b);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-notes-pane__editor-header-spacer { flex: 1; }
|
||||
|
||||
.sw-notes-pane__editor {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__editor-title {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--border, #2e2e35);
|
||||
color: var(--text, #e8e8ed);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
padding: 4px 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sw-notes-pane__editor-title:focus {
|
||||
border-color: var(--accent, #6c9fff);
|
||||
}
|
||||
|
||||
.sw-notes-pane__editor-meta {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__editor-meta input {
|
||||
flex: 1;
|
||||
background: var(--input-bg, #1a1a1f);
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-radius: 4px;
|
||||
color: var(--text-2, #9898a8);
|
||||
font-size: 11px;
|
||||
font-family: inherit;
|
||||
padding: 3px 6px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sw-notes-pane__editor-meta input:focus {
|
||||
border-color: var(--accent, #6c9fff);
|
||||
color: var(--text, #e8e8ed);
|
||||
}
|
||||
|
||||
.sw-notes-pane__editor-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sw-notes-pane__editor-textarea {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
min-height: 120px;
|
||||
background: var(--input-bg, #1a1a1f);
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-radius: 4px;
|
||||
color: var(--text, #e8e8ed);
|
||||
font-size: 13px;
|
||||
font-family: var(--mono, 'JetBrains Mono', monospace);
|
||||
line-height: 1.6;
|
||||
padding: 8px;
|
||||
resize: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sw-notes-pane__editor-textarea:focus {
|
||||
border-color: var(--accent, #6c9fff);
|
||||
}
|
||||
|
||||
.sw-notes-pane__editor-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 11px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
padding-top: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Reader ────────────────────────────────── */
|
||||
|
||||
.sw-notes-pane__reader {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* With outline: side-by-side layout */
|
||||
.sw-notes-pane__reader--with-outline {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sw-notes-pane__reader-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 16px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ── Outline Sidebar (sticky, right side) ─── */
|
||||
|
||||
.sw-notes-pane__outline-sidebar {
|
||||
width: 160px;
|
||||
flex-shrink: 0;
|
||||
overflow-y: auto;
|
||||
padding: 12px 8px;
|
||||
border-left: 1px solid var(--border, #2e2e35);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
align-self: flex-start;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.sw-notes-pane__reader--with-outline { flex-direction: column; }
|
||||
.sw-notes-pane__outline-sidebar {
|
||||
width: 100%;
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--border, #2e2e35);
|
||||
position: static;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sw-notes-pane__reader-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--text, #e8e8ed);
|
||||
margin: 0 0 4px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.sw-notes-pane__reader-meta {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__reader-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: var(--text, #e8e8ed);
|
||||
}
|
||||
|
||||
/* Reader markdown */
|
||||
.sw-notes-pane__reader-content p { margin: 0 0 0.6em; }
|
||||
.sw-notes-pane__reader-content p:last-child { margin-bottom: 0; }
|
||||
|
||||
.sw-notes-pane__reader-content pre {
|
||||
background: var(--bg-surface, #18181b);
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
overflow-x: auto;
|
||||
margin: 8px 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
font-family: var(--mono, 'JetBrains Mono', monospace);
|
||||
}
|
||||
|
||||
.sw-notes-pane__reader-content code {
|
||||
background: var(--bg-surface, #18181b);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.88em;
|
||||
font-family: var(--mono, 'JetBrains Mono', monospace);
|
||||
}
|
||||
|
||||
.sw-notes-pane__reader-content pre code {
|
||||
background: none; padding: 0; border-radius: 0; font-size: inherit;
|
||||
}
|
||||
|
||||
.sw-notes-pane__reader-content ul,
|
||||
.sw-notes-pane__reader-content ol { margin: 4px 0; padding-left: 1.5em; }
|
||||
|
||||
.sw-notes-pane__reader-content blockquote {
|
||||
border-left: 3px solid var(--accent, #6c9fff);
|
||||
padding: 4px 12px;
|
||||
margin: 8px 0;
|
||||
color: var(--text-2, #9898a8);
|
||||
}
|
||||
|
||||
.sw-notes-pane__reader-content a {
|
||||
color: var(--accent, #6c9fff);
|
||||
text-decoration: none;
|
||||
}
|
||||
.sw-notes-pane__reader-content a:hover { text-decoration: underline; }
|
||||
|
||||
.sw-notes-pane__reader-content table { border-collapse: collapse; margin: 8px 0; font-size: 13px; }
|
||||
.sw-notes-pane__reader-content th,
|
||||
.sw-notes-pane__reader-content td { border: 1px solid var(--border, #2e2e35); padding: 4px 8px; }
|
||||
.sw-notes-pane__reader-content th { background: var(--bg-surface, #18181b); font-weight: 600; }
|
||||
|
||||
/* ── Daily Nav ─────────────────────────────── */
|
||||
|
||||
.sw-notes-pane__daily-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 0 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-2, #9898a8);
|
||||
}
|
||||
|
||||
.sw-notes-pane__daily-nav button:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── Outline / TOC ─────────────────────────── */
|
||||
|
||||
/* Outline items shared by sidebar + inline fallback */
|
||||
.sw-notes-pane__outline-sidebar,
|
||||
.sw-notes-pane__outline {
|
||||
/* shared base */
|
||||
}
|
||||
|
||||
.sw-notes-pane__outline-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 0 0 4px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__outline-item {
|
||||
display: block;
|
||||
padding: 2px 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-2, #9898a8);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: color 0.12s;
|
||||
}
|
||||
|
||||
.sw-notes-pane__outline-item:hover {
|
||||
color: var(--accent, #6c9fff);
|
||||
}
|
||||
|
||||
.sw-notes-pane__outline-item--h2 { padding-left: 12px; }
|
||||
.sw-notes-pane__outline-item--h3 { padding-left: 24px; }
|
||||
|
||||
/* ── Backlinks ─────────────────────────────── */
|
||||
|
||||
.sw-notes-pane__backlinks {
|
||||
border-top: 1px solid var(--border, #2e2e35);
|
||||
padding: 8px 0;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__backlinks-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sw-notes-pane__backlinks-badge {
|
||||
background: var(--accent-dim, rgba(108,159,255,0.12));
|
||||
color: var(--accent, #6c9fff);
|
||||
font-size: 10px;
|
||||
padding: 0 5px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sw-notes-pane__backlinks-list {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__backlink-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
padding: 3px 0;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
color: var(--accent, #6c9fff);
|
||||
transition: color 0.12s;
|
||||
}
|
||||
|
||||
.sw-notes-pane__backlink-item:hover {
|
||||
color: var(--accent-hover, #84b0ff);
|
||||
}
|
||||
|
||||
.sw-notes-pane__backlink-folder {
|
||||
font-size: 10px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
}
|
||||
|
||||
/* ── Wikilinks ─────────────────────────────── */
|
||||
|
||||
.sw-notes-pane__wikilink {
|
||||
display: inline;
|
||||
padding: 1px 5px;
|
||||
background: var(--accent-dim, rgba(108,159,255,0.12));
|
||||
color: var(--accent, #6c9fff);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 0.92em;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
|
||||
.sw-notes-pane__wikilink:hover {
|
||||
background: rgba(108,159,255,0.22);
|
||||
}
|
||||
|
||||
.sw-notes-pane__wikilink--transclusion {
|
||||
color: var(--purple, #a78bfa);
|
||||
background: var(--purple-dim, rgba(167,139,250,0.1));
|
||||
}
|
||||
|
||||
.sw-notes-pane__wikilink--transclusion:hover {
|
||||
background: rgba(167,139,250,0.2);
|
||||
}
|
||||
|
||||
.sw-notes-pane__transclusion {
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-left: 3px solid var(--purple, #a78bfa);
|
||||
border-radius: 4px;
|
||||
margin: 8px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sw-notes-pane__transclusion-header {
|
||||
padding: 4px 8px;
|
||||
background: var(--bg-surface, #18181b);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__transclusion-content {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: var(--text-2, #9898a8);
|
||||
}
|
||||
|
||||
/* ── Unlinked Mentions ─────────────────────── */
|
||||
|
||||
.sw-notes-pane__unlinked {
|
||||
border-top: 1px solid var(--border, #2e2e35);
|
||||
padding: 8px 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__unlinked-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 0 0 4px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__unlinked-item {
|
||||
display: inline-flex;
|
||||
padding: 1px 6px;
|
||||
margin: 1px 2px;
|
||||
background: var(--bg-raised, #222227);
|
||||
color: var(--text-2, #9898a8);
|
||||
font-size: 11px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
border: 1px dashed var(--border, #2e2e35);
|
||||
transition: border-color 0.12s, color 0.12s;
|
||||
}
|
||||
|
||||
.sw-notes-pane__unlinked-item:hover {
|
||||
border-color: var(--accent, #6c9fff);
|
||||
color: var(--accent, #6c9fff);
|
||||
}
|
||||
|
||||
/* ── Graph ─────────────────────────────────── */
|
||||
|
||||
.sw-notes-pane__graph {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sw-notes-pane__graph-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid var(--border, #2e2e35);
|
||||
background: var(--bg-surface, #18181b);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-notes-pane__graph-stats {
|
||||
font-size: 11px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
}
|
||||
|
||||
.sw-notes-pane__graph-canvas-wrap {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sw-notes-pane__graph-canvas-wrap canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ── Quick Switcher ────────────────────────── */
|
||||
|
||||
.sw-notes-pane__switcher-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--overlay, rgba(0,0,0,0.55));
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding-top: 15vh;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.sw-notes-pane__switcher {
|
||||
width: min(420px, 90vw);
|
||||
background: var(--bg-surface, #18181b);
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,0.5));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sw-notes-pane__switcher-input {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--border, #2e2e35);
|
||||
color: var(--text, #e8e8ed);
|
||||
font-size: 15px;
|
||||
font-family: inherit;
|
||||
padding: 12px 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sw-notes-pane__switcher-results {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sw-notes-pane__switcher-section {
|
||||
padding: 4px 12px 2px;
|
||||
font-size: 10px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__switcher-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.sw-notes-pane__switcher-item:hover,
|
||||
.sw-notes-pane__switcher-item--active {
|
||||
background: var(--accent-dim, rgba(108,159,255,0.12));
|
||||
}
|
||||
|
||||
.sw-notes-pane__switcher-item-title {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: var(--text, #e8e8ed);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sw-notes-pane__switcher-item-folder {
|
||||
font-size: 10px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
}
|
||||
|
||||
.sw-notes-pane__switcher-create {
|
||||
padding: 8px 14px;
|
||||
border-top: 1px solid var(--border, #2e2e35);
|
||||
font-size: 12px;
|
||||
color: var(--accent, #6c9fff);
|
||||
cursor: pointer;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.sw-notes-pane__switcher-create:hover {
|
||||
background: var(--accent-dim, rgba(108,159,255,0.12));
|
||||
}
|
||||
|
||||
.sw-notes-pane__switcher-hint {
|
||||
padding: 6px 14px;
|
||||
font-size: 10px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
text-align: right;
|
||||
border-top: 1px solid var(--border, #2e2e35);
|
||||
}
|
||||
|
||||
/* ── Save-to-Note Dialog ───────────────────── */
|
||||
|
||||
.sw-notes-pane__save-mode {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__save-mode label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
color: var(--text-2, #9898a8);
|
||||
}
|
||||
|
||||
.sw-notes-pane__save-search-results {
|
||||
max-height: 150px;
|
||||
overflow-y: auto;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.sw-notes-pane__save-search-item {
|
||||
padding: 6px 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text, #e8e8ed);
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.sw-notes-pane__save-search-item:hover,
|
||||
.sw-notes-pane__save-search-item--selected {
|
||||
background: var(--accent-dim, rgba(108,159,255,0.12));
|
||||
}
|
||||
|
||||
.sw-notes-pane__save-preview {
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
padding: 8px;
|
||||
background: var(--bg-raised, #222227);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-2, #9898a8);
|
||||
}
|
||||
|
||||
/* ── Shared: loading spinner ───────────────── */
|
||||
|
||||
.sw-notes-pane__loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -1,377 +0,0 @@
|
||||
/* ==========================================
|
||||
Chat Switchboard — Notes Surface CSS
|
||||
==========================================
|
||||
v0.37.11: Preact notes surface layout.
|
||||
sw-notes-surface__ prefixed, no legacy conflicts.
|
||||
========================================== */
|
||||
|
||||
/* ── Root Layout ──────────────────────────── */
|
||||
|
||||
.sw-notes-surface {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1 1 0%;
|
||||
overflow: hidden;
|
||||
background: var(--bg, #0e0e10);
|
||||
}
|
||||
|
||||
/* ── Sidebar ──────────────────────────────── */
|
||||
|
||||
.sw-notes-surface__sidebar {
|
||||
width: 260px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-secondary, #151517);
|
||||
border-right: 1px solid var(--border, #2a2a2e);
|
||||
overflow: hidden;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.sw-notes-surface__sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 12px 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-notes-surface__new-note-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
background: var(--accent-dim, rgba(179, 138, 78, 0.1));
|
||||
border: 1px solid var(--accent, #b38a4e);
|
||||
border-radius: 8px;
|
||||
color: var(--accent, #b38a4e);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.sw-notes-surface__new-note-btn:hover {
|
||||
background: rgba(179, 138, 78, 0.2);
|
||||
}
|
||||
|
||||
.sw-notes-surface__collapse-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--text-3, #555);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.sw-notes-surface__collapse-btn:hover {
|
||||
color: var(--text, #eee);
|
||||
background: var(--bg, #0e0e10);
|
||||
}
|
||||
|
||||
/* ── Search ───────────────────────────────── */
|
||||
|
||||
.sw-notes-surface__search-wrap {
|
||||
position: relative;
|
||||
padding: 4px 12px 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-notes-surface__search-icon {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-3, #555);
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input.sw-notes-surface__search {
|
||||
width: 100%;
|
||||
padding: 6px 8px 6px 30px;
|
||||
background: var(--bg, #0e0e10);
|
||||
border: 1px solid var(--border, #2a2a2e);
|
||||
border-radius: 6px;
|
||||
color: var(--text, #eee);
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
input.sw-notes-surface__search:focus {
|
||||
border-color: var(--accent, #b38a4e);
|
||||
}
|
||||
|
||||
/* ── Sidebar Body (scrollable) ────────────── */
|
||||
|
||||
.sw-notes-surface__sidebar-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ── Section ──────────────────────────────── */
|
||||
|
||||
.sw-notes-surface__section {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.sw-notes-surface__section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-2, #999);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.sw-notes-surface__section-header:hover {
|
||||
color: var(--text, #eee);
|
||||
}
|
||||
|
||||
.sw-notes-surface__chevron {
|
||||
display: flex;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
.sw-notes-surface__chevron--open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.sw-notes-surface__section-count {
|
||||
margin-left: auto;
|
||||
font-size: 10px;
|
||||
color: var(--text-3, #555);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.sw-notes-surface__section-body {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.sw-notes-surface__empty {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
color: var(--text-3, #555);
|
||||
}
|
||||
|
||||
/* ── Sidebar Item ─────────────────────────── */
|
||||
|
||||
.sw-notes-surface__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--text-2, #999);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background 0.1s, color 0.1s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sw-notes-surface__item:hover {
|
||||
background: var(--bg, #0e0e10);
|
||||
color: var(--text, #eee);
|
||||
}
|
||||
|
||||
.sw-notes-surface__item--active {
|
||||
background: var(--accent-dim, rgba(179, 138, 78, 0.1));
|
||||
color: var(--text, #eee);
|
||||
}
|
||||
|
||||
.sw-notes-surface__item-icon {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
color: var(--text-3, #555);
|
||||
}
|
||||
|
||||
.sw-notes-surface__item-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sw-notes-surface__item-count {
|
||||
font-size: 10px;
|
||||
color: var(--text-3, #555);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Tag Cloud ───────────────────────────── */
|
||||
|
||||
.sw-notes-surface__tag-cloud {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.sw-notes-surface__tag-chip {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background: var(--bg, #0e0e10);
|
||||
border: 1px solid var(--border, #2a2a2e);
|
||||
border-radius: 12px;
|
||||
color: var(--text-2, #999);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s, color 0.1s, border-color 0.1s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sw-notes-surface__tag-chip:hover {
|
||||
color: var(--text, #eee);
|
||||
border-color: var(--text-3, #555);
|
||||
}
|
||||
|
||||
.sw-notes-surface__tag-chip--active {
|
||||
background: var(--accent-dim, rgba(179, 138, 78, 0.1));
|
||||
border-color: var(--accent, #b38a4e);
|
||||
color: var(--accent, #b38a4e);
|
||||
}
|
||||
|
||||
/* ── Sidebar Footer ──────────────────────── */
|
||||
|
||||
.sw-notes-surface__sidebar-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid var(--border, #2a2a2e);
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── Main Area ───────────────────────────── */
|
||||
|
||||
.sw-notes-surface__main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── Workspace ───────────────────────────── */
|
||||
|
||||
.sw-notes-surface__workspace {
|
||||
flex: 1 1 0%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sw-notes-surface__workspace-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 10px;
|
||||
border-bottom: 1px solid var(--border, #2a2a2e);
|
||||
background: var(--bg-secondary, #151517);
|
||||
flex-shrink: 0;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.sw-notes-surface__workspace-header-left,
|
||||
.sw-notes-surface__workspace-header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sw-notes-surface__sidebar-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
color: var(--text-3, #555);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.sw-notes-surface__sidebar-toggle:hover {
|
||||
color: var(--text, #eee);
|
||||
background: var(--bg, #0e0e10);
|
||||
}
|
||||
|
||||
/* ── NotesPane Container ─────────────────── */
|
||||
|
||||
.sw-notes-surface__notes-pane {
|
||||
flex: 1 1 0%;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ── Sidebar Overlay (mobile) ────────────── */
|
||||
|
||||
.sw-notes-surface__sidebar-overlay {
|
||||
display: none; /* Hidden on desktop */
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
/* ── Responsive: Mobile ──────────────────── */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sw-notes-surface__sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 280px;
|
||||
z-index: 120;
|
||||
}
|
||||
|
||||
.sw-notes-surface__sidebar-overlay {
|
||||
display: block;
|
||||
z-index: 110;
|
||||
}
|
||||
|
||||
.sw-notes-surface__collapse-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Touch targets */
|
||||
.sw-notes-surface__item {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
/* Prevent iOS zoom */
|
||||
.sw-notes-surface__search {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -1,793 +0,0 @@
|
||||
/* ==========================================
|
||||
Chat Switchboard — Projects Surface CSS
|
||||
==========================================
|
||||
v0.37.16: Card grid list + detail with inline chat.
|
||||
sw-projects__ prefixed, BEM convention.
|
||||
========================================== */
|
||||
|
||||
/* ── Root ────────────────────────────────── */
|
||||
|
||||
.sw-projects {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--bg, #0e0e10);
|
||||
}
|
||||
|
||||
/* ── List View ───────────────────────────── */
|
||||
|
||||
.sw-projects__list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 24px 32px 40px;
|
||||
max-width: 940px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sw-projects__list-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.sw-projects__list-header .sw-projects__new-btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sw-projects__list-title {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: var(--text, #e8e8ed);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sw-projects__new-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-raised, #222227);
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-radius: 8px;
|
||||
color: var(--text, #e8e8ed);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.sw-projects__new-btn:hover {
|
||||
background: var(--bg-hover, #2a2a30);
|
||||
border-color: var(--border-light, #3a3a42);
|
||||
}
|
||||
|
||||
.sw-projects__search {
|
||||
width: 100%;
|
||||
padding: 10px 14px 10px 36px;
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-radius: 10px;
|
||||
background: var(--bg-surface, #18181b);
|
||||
color: var(--text, #e8e8ed);
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.sw-projects__search:focus {
|
||||
border-color: var(--accent, #6c9fff);
|
||||
}
|
||||
|
||||
.sw-projects__search-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sw-projects__search-icon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-3, #6b6b7b);
|
||||
font-size: 14px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sw-projects__sort {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
}
|
||||
|
||||
.sw-projects__sort select {
|
||||
background: var(--bg-raised, #222227);
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-radius: 6px;
|
||||
color: var(--text-2, #9898a8);
|
||||
font-size: 13px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ── Card Grid ───────────────────────────── */
|
||||
|
||||
.sw-projects__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.sw-projects__card {
|
||||
background: var(--bg-surface, #18181b);
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.sw-projects__card:hover {
|
||||
border-color: var(--border-light, #3a3a42);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.sw-projects__card-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text, #e8e8ed);
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sw-projects__card-desc {
|
||||
font-size: 13px;
|
||||
color: var(--text-2, #9898a8);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.sw-projects__card-meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.sw-projects__card-badge {
|
||||
display: inline-flex;
|
||||
padding: 2px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-raised, #222227);
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
color: var(--text-3, #6b6b7b);
|
||||
}
|
||||
|
||||
.sw-projects__empty {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* ── Detail View ─────────────────────────── */
|
||||
|
||||
.sw-projects__detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sw-projects__detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid var(--border, #2e2e35);
|
||||
flex-shrink: 0;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.sw-projects__back {
|
||||
font-size: 13px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.sw-projects__back:hover {
|
||||
color: var(--text, #e8e8ed);
|
||||
}
|
||||
|
||||
.sw-projects__detail-name {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--text, #e8e8ed);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sw-projects__detail-name-input {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--text, #e8e8ed);
|
||||
background: var(--bg-surface, #18181b);
|
||||
border: 1px solid var(--accent, #6c9fff);
|
||||
border-radius: 6px;
|
||||
padding: 2px 8px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sw-projects__header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-projects__icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.sw-projects__icon-btn:hover {
|
||||
background: var(--bg-hover, #2a2a30);
|
||||
color: var(--text, #e8e8ed);
|
||||
}
|
||||
|
||||
.sw-projects__icon-btn--active {
|
||||
color: var(--warning, #eab308);
|
||||
}
|
||||
|
||||
/* ── Detail Body (2-column) ──────────────── */
|
||||
|
||||
.sw-projects__detail-body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sw-projects__conversations {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sw-projects__conv-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-projects__conv-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 12px 20px;
|
||||
}
|
||||
|
||||
.sw-projects__conv-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
|
||||
.sw-projects__conv-item:hover {
|
||||
background: var(--bg-hover, #2a2a30);
|
||||
}
|
||||
|
||||
.sw-projects__conv-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text, #e8e8ed);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sw-projects__conv-meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.sw-projects__conv-empty {
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ── Chat Embed ──────────────────────────── */
|
||||
|
||||
.sw-projects__chat-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sw-projects__chat-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--border, #2e2e35);
|
||||
flex-shrink: 0;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.sw-projects__chat-back:hover {
|
||||
color: var(--text, #e8e8ed);
|
||||
}
|
||||
|
||||
/* ── Right Sidebar ───────────────────────── */
|
||||
|
||||
.sw-projects__sidebar {
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid var(--border, #2e2e35);
|
||||
overflow-y: auto;
|
||||
padding: 12px 16px;
|
||||
background: var(--bg-surface, #18181b);
|
||||
}
|
||||
|
||||
/* ── Collapsible Sections ────────────────── */
|
||||
|
||||
.sw-projects__section {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sw-projects__section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sw-projects__section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-2, #9898a8);
|
||||
}
|
||||
|
||||
.sw-projects__section-count {
|
||||
font-size: 11px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.sw-projects__section-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.sw-projects__section-add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.sw-projects__section-add:hover {
|
||||
background: var(--bg-hover, #2a2a30);
|
||||
color: var(--text, #e8e8ed);
|
||||
}
|
||||
|
||||
.sw-projects__section-chevron {
|
||||
font-size: 10px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
.sw-projects__section-chevron--open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.sw-projects__section-body {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.sw-projects__section-textarea {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-raised, #222227);
|
||||
color: var(--text, #e8e8ed);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
min-height: 60px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.sw-projects__section-textarea:focus {
|
||||
border-color: var(--accent, #6c9fff);
|
||||
}
|
||||
|
||||
.sw-projects__section-hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* ── Section Items (KBs, Notes, Files) ──── */
|
||||
|
||||
.sw-projects__section-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--text, #e8e8ed);
|
||||
transition: background 0.12s;
|
||||
}
|
||||
|
||||
.sw-projects__section-item:hover {
|
||||
background: var(--bg-hover, #2a2a30);
|
||||
}
|
||||
|
||||
.sw-projects__section-item-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sw-projects__section-item-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-projects__section-item-remove {
|
||||
display: none;
|
||||
font-size: 11px;
|
||||
color: var(--danger, #ef4444);
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.sw-projects__section-item:hover .sw-projects__section-item-remove {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.sw-projects__section-item-remove:hover {
|
||||
background: var(--danger-dim, rgba(239, 68, 68, 0.2));
|
||||
}
|
||||
|
||||
/* ── File Drop Zone ──────────────────────── */
|
||||
|
||||
.sw-projects__dropzone {
|
||||
border: 2px dashed var(--border, #2e2e35);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
font-size: 13px;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sw-projects__dropzone:hover {
|
||||
border-color: var(--border-light, #3a3a42);
|
||||
}
|
||||
|
||||
.sw-projects__dropzone--active {
|
||||
border-color: var(--accent, #6c9fff);
|
||||
background: var(--accent-dim, rgba(108, 159, 255, 0.12));
|
||||
color: var(--text, #e8e8ed);
|
||||
}
|
||||
|
||||
/* ── Picker Dropdown ─────────────────────── */
|
||||
|
||||
.sw-projects__picker {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
z-index: 10;
|
||||
width: 280px;
|
||||
margin-top: 4px;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-raised, #222227);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
|
||||
max-height: 240px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sw-projects__picker-item {
|
||||
padding: 6px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--text, #e8e8ed);
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
|
||||
.sw-projects__picker-item:hover {
|
||||
background: var(--bg-hover, #2a2a30);
|
||||
}
|
||||
|
||||
.sw-projects__picker-hint {
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
color: var(--text-3, #6b6b7b);
|
||||
}
|
||||
|
||||
/* ── Context Menu (... menu) ─────────────── */
|
||||
|
||||
.sw-projects__ctx-menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
z-index: 20;
|
||||
min-width: 180px;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
border-radius: 8px;
|
||||
background: var(--bg-raised, #222227);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.sw-projects__ctx-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--text, #e8e8ed);
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.sw-projects__ctx-item:hover {
|
||||
background: var(--bg-hover, #2a2a30);
|
||||
}
|
||||
|
||||
.sw-projects__ctx-item--danger {
|
||||
color: var(--danger, #ef4444);
|
||||
}
|
||||
|
||||
.sw-projects__ctx-divider {
|
||||
height: 1px;
|
||||
background: var(--border, #2e2e35);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
/* ── Color Swatches (in menu) ────────────── */
|
||||
|
||||
.sw-projects__color-row {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.sw-projects__color-swatch {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.sw-projects__color-swatch--active {
|
||||
border-color: var(--text, #e8e8ed);
|
||||
}
|
||||
|
||||
/* ── File Browser (v0.37.17) ──────────────── */
|
||||
|
||||
.sw-projects__file-browser {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.sw-projects__file-actions-bar {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 4px 0 8px;
|
||||
border-bottom: 1px solid var(--border, #2e2e35);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sw-projects__file-action-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--border, #2e2e35);
|
||||
color: var(--text-3, #999);
|
||||
border-radius: 4px;
|
||||
padding: 3px 8px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.sw-projects__file-action-btn:hover {
|
||||
color: var(--text-1, #fff);
|
||||
border-color: var(--text-3, #999);
|
||||
}
|
||||
|
||||
.sw-projects__file-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.sw-projects__file-row:hover {
|
||||
background: var(--bg-3, rgba(255,255,255,0.04));
|
||||
}
|
||||
|
||||
.sw-projects__file-chevron {
|
||||
font-size: 8px;
|
||||
cursor: pointer;
|
||||
color: var(--text-3, #999);
|
||||
transition: transform 0.15s;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sw-projects__file-chevron--open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.sw-projects__file-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sw-projects__file-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: var(--text-2, #ccc);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sw-projects__file-name:hover {
|
||||
color: var(--text-1, #fff);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.sw-projects__file-meta {
|
||||
font-size: 11px;
|
||||
color: var(--text-3, #999);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sw-projects__file-delete {
|
||||
opacity: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--danger, #ef4444);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 0 2px;
|
||||
flex-shrink: 0;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
.sw-projects__file-row:hover .sw-projects__file-delete {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.sw-projects__file-delete:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.sw-projects__dropzone {
|
||||
margin-top: 8px;
|
||||
padding: 16px;
|
||||
border: 2px dashed var(--border, #2e2e35);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--text-3, #999);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
||||
}
|
||||
.sw-projects__dropzone:hover {
|
||||
border-color: var(--text-3, #999);
|
||||
color: var(--text-2, #ccc);
|
||||
}
|
||||
.sw-projects__dropzone--active {
|
||||
border-color: var(--accent, #4f8cff);
|
||||
color: var(--accent, #4f8cff);
|
||||
background: rgba(79, 140, 255, 0.05);
|
||||
}
|
||||
|
||||
/* ── Responsive ──────────────────────────── */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sw-projects__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sw-projects__list {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.sw-projects__detail-body {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sw-projects__sidebar {
|
||||
width: 100%;
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--border, #2e2e35);
|
||||
max-height: 40vh;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user