a0fd70418f
Bug fixes: - Add missing showLoadingOverlay/hideLoadingOverlay functions to ide.js (previously only existed in sessions-landing.js, causing continueSessionInChat to fail) - Add loading overlay CSS styles to main style.css - Fix Projects button URL: /projects -> /claude/ide?view=projects - Add ?view= URL parameter handling in ide.js initialization - Add missing Native mode button to chat view (now has 3 modes: Chat, Native, Terminal) These fixes resolve: 1. "Continue in Chat" button not working in sessions view 2. Projects button in landing page nav taking to wrong URL 3. Missing "Native" mode button (user referred to as "Full Stack mode") 4. Loading overlay not displaying in IDE Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
529 lines
9.4 KiB
CSS
529 lines
9.4 KiB
CSS
/* Reset and Base */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--bg-primary: #1e1e1e;
|
|
--bg-secondary: #252526;
|
|
--bg-tertiary: #2d2d2d;
|
|
--text-primary: #e0e0e0;
|
|
--text-secondary: #858585;
|
|
--accent: #7c3aed;
|
|
--accent-hover: #6d28d9;
|
|
--border: #3e3e42;
|
|
--success: #22c55e;
|
|
--error: #ef4444;
|
|
--warning: #f59e0b;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Login Screen */
|
|
.login-screen {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
|
|
}
|
|
|
|
.login-box {
|
|
background: var(--bg-secondary);
|
|
padding: 2.5rem;
|
|
border-radius: 12px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
width: 100%;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.login-box h1 {
|
|
font-size: 1.8rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--text-secondary);
|
|
margin-bottom: 2rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.form-group input {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.form-group input:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn-primary,
|
|
.btn-secondary,
|
|
.btn-logout {
|
|
padding: 0.75rem 1.5rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent);
|
|
color: white;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--border);
|
|
}
|
|
|
|
.btn-logout {
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.btn-logout:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.error {
|
|
color: var(--error);
|
|
margin-top: 1rem;
|
|
text-align: center;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Main App */
|
|
.main-app {
|
|
display: flex;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
width: 280px;
|
|
background: var(--bg-secondary);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.sidebar-header h2 {
|
|
font-size: 1.2rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.search-box {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.search-box input {
|
|
width: 100%;
|
|
padding: 0.6rem 0.8rem;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.search-box input:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.sidebar-section {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.sidebar-section h3 {
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.file-list {
|
|
list-style: none;
|
|
}
|
|
|
|
.file-list li {
|
|
padding: 0.5rem 0.75rem;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.file-list li:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.file-tree {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.tree-item {
|
|
padding: 0.4rem 0.75rem;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.tree-item:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.tree-item.folder {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tree-item.file {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.tree-children {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
.tree-icon {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* Main Content */
|
|
.main-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.content-header {
|
|
padding: 1rem 2rem;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.breadcrumb {
|
|
font-size: 0.9rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.content-view,
|
|
.content-editor {
|
|
flex: 1;
|
|
padding: 2rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.content-editor {
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 0.95rem;
|
|
line-height: 1.7;
|
|
resize: none;
|
|
border: none;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.content-editor:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* Markdown Content */
|
|
.markdown-body {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.markdown-body h1,
|
|
.markdown-body h2,
|
|
.markdown-body h3,
|
|
.markdown-body h4,
|
|
.markdown-body h5,
|
|
.markdown-body h6 {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.markdown-body h1 {
|
|
font-size: 2rem;
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.markdown-body h2 {
|
|
font-size: 1.5rem;
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: 0.3rem;
|
|
}
|
|
|
|
.markdown-body h3 {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.markdown-body p {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.markdown-body a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.markdown-body a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.markdown-body code {
|
|
background: var(--bg-tertiary);
|
|
padding: 0.2rem 0.4rem;
|
|
border-radius: 3px;
|
|
font-family: 'Monaco', 'Menlo', monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.markdown-body pre {
|
|
background: var(--bg-tertiary);
|
|
padding: 1rem;
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.markdown-body pre code {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.markdown-body ul,
|
|
.markdown-body ol {
|
|
margin-left: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.markdown-body li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.markdown-body blockquote {
|
|
border-left: 4px solid var(--accent);
|
|
padding-left: 1rem;
|
|
margin: 1rem 0;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.markdown-body table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.markdown-body th,
|
|
.markdown-body td {
|
|
border: 1px solid var(--border);
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.markdown-body th {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.markdown-body img {
|
|
max-width: 100%;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.placeholder {
|
|
text-align: center;
|
|
padding: 4rem 2rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.placeholder h2 {
|
|
margin-bottom: 1rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
position: absolute;
|
|
left: -280px;
|
|
height: 100%;
|
|
z-index: 100;
|
|
transition: left 0.3s;
|
|
}
|
|
|
|
.sidebar.open {
|
|
left: 0;
|
|
}
|
|
|
|
.content-view,
|
|
.content-editor {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Loading */
|
|
.loading {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid var(--border);
|
|
border-radius: 50%;
|
|
border-top-color: var(--accent);
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Search Results */
|
|
.search-results {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
margin-top: 0.5rem;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
z-index: 100;
|
|
display: none;
|
|
}
|
|
|
|
.search-results.active {
|
|
display: block;
|
|
}
|
|
|
|
.search-result-item {
|
|
padding: 0.75rem;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.search-result-item:hover {
|
|
background: var(--bg-tertiary);
|
|
}
|
|
|
|
.search-result-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.search-result-title {
|
|
font-weight: 500;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.search-result-preview {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* === Loading Overlay === */
|
|
.loading-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 10000;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.loading-overlay.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.loading-overlay.visible {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 4px solid #333;
|
|
border-top-color: #4a9eff;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
.loading-text {
|
|
margin-top: 1rem;
|
|
color: var(--text-primary);
|
|
font-size: 0.9rem;
|
|
}
|