mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-19 09:33:53 +00:00
c4bcd178a4
BREAKING CHANGE: Login is no longer automatic when opening webview Changes: - Remove auto-login on webview open and restore - Add /login slash command for manual authentication - Add VSCode progress notification during login process - Add warning notification when user tries to chat without login - Implement pending message auto-retry after successful login - Add NotLoggedInMessage component (for future use) - Improve InfoBanner close button styling consistency User flow: 1. Open webview - no automatic login 2. Type /login or select from completion menu to login 3. Show "Logging in to Qwen Code..." progress notification 4. After login, show success message and auto-retry pending messages 5. If user tries to chat without login, show warning with "Login Now" button 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
481 lines
11 KiB
CSS
481 lines
11 KiB
CSS
/**
|
|
* @license
|
|
* Copyright 2025 Qwen Team
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*
|
|
* Styles extracted from Claude Code extension (v2.0.43)
|
|
* Path: /Users/jinjing/Downloads/Anthropic.claude-code-2.0.43/extension/webview/index.css
|
|
*/
|
|
|
|
/* Import component styles */
|
|
@import './components/SaveSessionDialog.css';
|
|
@import './components/SessionManager.css';
|
|
@import './components/MessageContent.css';
|
|
@import './components/EmptyState.css';
|
|
@import './components/CompletionMenu.css';
|
|
@import './components/ContextPills.css';
|
|
@import './components/PermissionDrawer.css';
|
|
@import './components/PlanDisplay.css';
|
|
@import './components/Timeline.css';
|
|
@import './components/shared/FileLink.css';
|
|
@import './components/toolcalls/shared/DiffDisplay.css';
|
|
|
|
/* ===========================
|
|
Header Styles (from Claude Code .he)
|
|
=========================== */
|
|
.chat-header {
|
|
display: flex;
|
|
border-bottom: 1px solid var(--app-primary-border-color);
|
|
padding: 6px 10px;
|
|
gap: 4px;
|
|
background-color: var(--app-header-background);
|
|
justify-content: flex-start;
|
|
user-select: none;
|
|
}
|
|
|
|
/* ===========================
|
|
Session Selector Button (from Claude Code .E)
|
|
=========================== */
|
|
.session-selector-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 2px 8px;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
outline: none;
|
|
min-width: 0;
|
|
max-width: 300px;
|
|
overflow: hidden;
|
|
font-size: var(--vscode-chat-font-size, 13px);
|
|
font-family: var(--vscode-chat-font-family);
|
|
}
|
|
|
|
.session-selector-button:focus,
|
|
.session-selector-button:hover {
|
|
background: var(--app-ghost-button-hover-background);
|
|
}
|
|
|
|
/* Session Selector Button Internal Elements */
|
|
.session-selector-button-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
max-width: 300px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.session-selector-button-title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.session-selector-button-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.session-selector-button-icon svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
min-width: 16px;
|
|
}
|
|
|
|
/* ===========================
|
|
Icon Button (from Claude Code .j)
|
|
=========================== */
|
|
.icon-button {
|
|
flex: 0 0 auto;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
outline: none;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.icon-button:focus,
|
|
.icon-button:hover {
|
|
background: var(--app-ghost-button-hover-background);
|
|
}
|
|
|
|
/* ===========================
|
|
Session Dropdown (from Claude Code .St/.Wt)
|
|
=========================== */
|
|
.session-dropdown {
|
|
position: fixed;
|
|
background: var(--app-menu-background);
|
|
border: 1px solid var(--app-menu-border);
|
|
border-radius: var(--corner-radius-small);
|
|
width: min(400px, calc(100vw - 32px));
|
|
max-height: min(500px, 50vh);
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
outline: none;
|
|
font-size: var(--vscode-chat-font-size, 13px);
|
|
font-family: var(--vscode-chat-font-family);
|
|
}
|
|
|
|
/* ===========================
|
|
Search Box Container (from Claude Code .Lt)
|
|
=========================== */
|
|
.session-search {
|
|
padding: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-bottom: 1px solid var(--app-menu-border);
|
|
}
|
|
|
|
.session-search svg,
|
|
.session-search-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
opacity: 0.5;
|
|
flex-shrink: 0;
|
|
color: var(--app-primary-foreground);
|
|
}
|
|
|
|
/* Search Input (from Claude Code .U) */
|
|
.session-search-input {
|
|
flex: 1;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
color: var(--app-menu-foreground);
|
|
font-size: var(--vscode-chat-font-size, 13px);
|
|
font-family: var(--vscode-chat-font-family);
|
|
padding: 0;
|
|
}
|
|
|
|
.session-search-input::placeholder {
|
|
color: var(--app-input-placeholder-foreground);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Session List Content Area (from Claude Code .jt/.It) */
|
|
.session-list-content {
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
user-select: none;
|
|
padding: 8px;
|
|
}
|
|
|
|
/* Group Label (from Claude Code .ae) */
|
|
.session-group-label {
|
|
padding: 4px 8px;
|
|
color: var(--app-primary-foreground);
|
|
opacity: 0.5;
|
|
font-size: 0.9em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.session-group-label:not(:first-child) {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Session Group Container (from Claude Code .At) */
|
|
.session-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
/* Session Item Button (from Claude Code .s) */
|
|
.session-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 6px 8px;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
width: 100%;
|
|
font-size: var(--vscode-chat-font-size, 13px);
|
|
font-family: var(--vscode-chat-font-family);
|
|
color: var(--app-primary-foreground);
|
|
transition: background 0.1s ease;
|
|
}
|
|
|
|
.session-item:hover {
|
|
background: var(--app-list-hover-background);
|
|
}
|
|
|
|
/* Active Session (from Claude Code .N) */
|
|
.session-item.active {
|
|
background: var(--app-list-active-background);
|
|
color: var(--app-list-active-foreground);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Session Title (from Claude Code .ce) */
|
|
.session-item-title {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Session Time (from Claude Code .Dt) */
|
|
.session-item-time {
|
|
opacity: 0.6;
|
|
font-size: 0.9em;
|
|
flex-shrink: 0;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
/* Backdrop for dropdown */
|
|
.session-selector-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
background: transparent;
|
|
}
|
|
|
|
/* ===========================
|
|
CSS Variables (from Claude Code root styles)
|
|
=========================== */
|
|
:root {
|
|
/* Colors */
|
|
--app-primary-foreground: var(--vscode-foreground);
|
|
--app-secondary-foreground: var(--vscode-descriptionForeground);
|
|
--app-primary-border-color: var(--vscode-panel-border);
|
|
--app-input-placeholder-foreground: var(--vscode-input-placeholderForeground);
|
|
|
|
/* Buttons */
|
|
--app-ghost-button-hover-background: var(--vscode-toolbar-hoverBackground);
|
|
|
|
/* Border Radius */
|
|
--corner-radius-small: 6px;
|
|
|
|
/* Header */
|
|
--app-header-background: var(--vscode-sideBar-background);
|
|
|
|
/* List Styles */
|
|
--app-list-padding: 0px;
|
|
--app-list-item-padding: 4px 8px;
|
|
--app-list-border-color: transparent;
|
|
--app-list-border-radius: 4px;
|
|
--app-list-hover-background: var(--vscode-list-hoverBackground);
|
|
--app-list-active-background: var(--vscode-list-activeSelectionBackground);
|
|
--app-list-active-foreground: var(--vscode-list-activeSelectionForeground);
|
|
--app-list-gap: 2px;
|
|
|
|
/* Menu Styles */
|
|
--app-menu-background: var(--vscode-menu-background);
|
|
--app-menu-border: var(--vscode-menu-border);
|
|
--app-menu-foreground: var(--vscode-menu-foreground);
|
|
--app-menu-selection-background: var(--vscode-menu-selectionBackground);
|
|
--app-menu-selection-foreground: var(--vscode-menu-selectionForeground);
|
|
|
|
/* Tool Call Styles */
|
|
--app-tool-background: var(--vscode-editor-background);
|
|
--app-code-background: var(--vscode-textCodeBlock-background);
|
|
|
|
/* Warning/Error Styles */
|
|
--app-warning-background: var(--vscode-editorWarning-background, rgba(255, 204, 0, 0.1));
|
|
--app-warning-border: var(--vscode-editorWarning-foreground, #ffcc00);
|
|
--app-warning-foreground: var(--vscode-editorWarning-foreground, #ffcc00);
|
|
}
|
|
|
|
/* ===========================
|
|
Tool Call Card (from Claude Code .Ne)
|
|
=========================== */
|
|
.tool-call-card {
|
|
border: 0.5px solid var(--app-input-border);
|
|
border-radius: 5px;
|
|
background: var(--app-tool-background);
|
|
margin: 8px 0;
|
|
max-width: 100%;
|
|
font-size: 1em;
|
|
align-items: start;
|
|
}
|
|
|
|
/* Tool Call Grid Layout (from Claude Code .Ke) */
|
|
.tool-call-grid {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
}
|
|
|
|
/* Tool Call Row (from Claude Code .no) */
|
|
.tool-call-row {
|
|
grid-column: 1 / -1;
|
|
display: grid;
|
|
grid-template-columns: subgrid;
|
|
border-top: 0.5px solid var(--app-input-border);
|
|
padding: 4px;
|
|
}
|
|
|
|
.tool-call-row:first-child {
|
|
border-top: none;
|
|
}
|
|
|
|
/* Tool Call Label (from Claude Code .Je) */
|
|
.tool-call-label {
|
|
grid-column: 1;
|
|
color: var(--app-secondary-foreground);
|
|
text-align: left;
|
|
opacity: 0.5;
|
|
padding: 4px 8px 4px 4px;
|
|
font-family: var(--app-monospace-font-family);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* Tool Call Value (from Claude Code .m) */
|
|
.tool-call-value {
|
|
grid-column: 2;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
margin: 0;
|
|
padding: 4px;
|
|
}
|
|
|
|
.tool-call-value:not(.expanded) {
|
|
max-height: 60px;
|
|
mask-image: linear-gradient(to bottom, var(--app-primary-background) 40px, transparent 60px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tool-call-value pre {
|
|
margin-block: 0;
|
|
overflow: hidden;
|
|
font-family: var(--app-monospace-font-family);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.tool-call-value code {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: var(--app-monospace-font-family);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* Tool Call Icon (from Claude Code .to) */
|
|
.tool-call-icon {
|
|
margin: 8px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Code Block (from Claude Code ._e) */
|
|
.code-block {
|
|
background-color: var(--app-code-background);
|
|
white-space: pre;
|
|
overflow-x: auto;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
font-family: var(--app-monospace-font-family);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* Code content wrapper for better scrolling */
|
|
.code-content {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
display: block;
|
|
}
|
|
|
|
/* Diff display container */
|
|
.diff-display-container {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.diff-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-bottom: 4px;
|
|
border-bottom: 1px solid var(--app-primary-border-color);
|
|
}
|
|
|
|
.diff-file-path {
|
|
font-weight: 500;
|
|
color: var(--app-secondary-foreground);
|
|
}
|
|
|
|
.open-diff-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px 8px;
|
|
background: var(--app-ghost-button-hover-background);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.85em;
|
|
color: var(--app-secondary-foreground);
|
|
}
|
|
|
|
.open-diff-button:hover {
|
|
background: var(--vscode-button-hoverBackground);
|
|
color: var(--vscode-button-foreground);
|
|
}
|
|
|
|
.diff-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.diff-label {
|
|
font-weight: 500;
|
|
color: var(--app-secondary-foreground);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* Status indicators for tool calls */
|
|
.tool-call-status-indicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.tool-call-status-indicator::before {
|
|
content: "●";
|
|
font-size: 10px;
|
|
}
|
|
|
|
.tool-call-status-indicator.pending::before {
|
|
color: var(--app-secondary-foreground);
|
|
}
|
|
|
|
.tool-call-status-indicator.in-progress::before {
|
|
color: #e1c08d;
|
|
animation: blink 1s linear infinite;
|
|
}
|
|
|
|
.tool-call-status-indicator.completed::before {
|
|
color: #74c991;
|
|
}
|
|
|
|
.tool-call-status-indicator.failed::before {
|
|
color: #c74e39;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|