552 lines
12 KiB
CSS
552 lines
12 KiB
CSS
/* Right Panel / Drawer specific styles */
|
|
|
|
/* Right panel tab bar - browser-style tabs */
|
|
.right-panel-tab-bar {
|
|
background-color: var(--surface-secondary);
|
|
border-bottom: 1px solid var(--border-base);
|
|
position: relative;
|
|
}
|
|
|
|
.right-panel-tab-bar::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background-color: var(--border-base);
|
|
z-index: 0;
|
|
}
|
|
|
|
.right-panel-tab-bar .tab-container {
|
|
@apply flex items-center justify-between gap-1 px-2 pt-2 pb-0;
|
|
}
|
|
|
|
/* Keep the shortcuts (close/pin) fixed; only the tabs should scroll. */
|
|
.right-panel-tab-bar .tab-scroll {
|
|
@apply flex-1;
|
|
width: auto;
|
|
}
|
|
|
|
/* Shortcuts on the left side - match left drawer icon colors */
|
|
.tab-strip-shortcuts {
|
|
@apply flex items-center gap-1 flex-shrink-0;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Browser-style tabs - using INSTANCE tab color scheme */
|
|
.right-panel-tab {
|
|
@apply inline-flex items-center gap-2 px-4 py-2 text-xs font-medium transition-all duration-150 relative;
|
|
font-family: var(--font-family-sans);
|
|
outline: none;
|
|
border: 1px solid transparent;
|
|
border-bottom: none;
|
|
border-radius: 8px 8px 0 0;
|
|
margin-right: 2px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.right-panel-tab:focus-visible {
|
|
@apply ring-2 ring-offset-1;
|
|
ring-color: var(--accent-primary);
|
|
ring-offset-color: var(--surface-secondary);
|
|
}
|
|
|
|
.right-panel-tab-active {
|
|
background-color: var(--tab-active-bg);
|
|
border-color: transparent;
|
|
border-bottom: 2px solid var(--accent-primary);
|
|
color: var(--tab-active-text);
|
|
z-index: 2;
|
|
}
|
|
|
|
.right-panel-tab-inactive {
|
|
background-color: var(--tab-inactive-bg);
|
|
color: var(--tab-inactive-text);
|
|
border-color: transparent;
|
|
border-bottom: 2px solid var(--tab-active-bg);
|
|
}
|
|
|
|
.right-panel-tab-inactive:hover {
|
|
background-color: var(--tab-inactive-hover-bg);
|
|
color: var(--text-secondary);
|
|
border-color: var(--border-base);
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
/* Files tab layout */
|
|
.files-tab-container {
|
|
@apply flex flex-col h-full min-h-0;
|
|
}
|
|
|
|
/* Split view (file list + viewer) */
|
|
.files-split {
|
|
display: grid;
|
|
grid-template-columns: var(--files-pane-width, 320px) 10px minmax(0, 1fr);
|
|
min-height: 0;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.file-split-handle {
|
|
cursor: col-resize;
|
|
background-color: transparent;
|
|
border-left: 1px solid var(--border-base);
|
|
border-right: 1px solid var(--border-base);
|
|
user-select: none;
|
|
touch-action: none;
|
|
}
|
|
|
|
.file-split-handle:hover {
|
|
background-color: var(--surface-hover);
|
|
}
|
|
|
|
.files-tab-header {
|
|
@apply flex items-center justify-between gap-2 px-3 py-2 border-b;
|
|
border-color: var(--border-base);
|
|
}
|
|
|
|
.files-tab-header-row {
|
|
@apply flex items-center gap-2 w-full min-w-0;
|
|
}
|
|
|
|
.files-toggle-button {
|
|
@apply text-[11px] px-2 py-1 border border-base transition-colors;
|
|
background-color: var(--surface-base);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.files-toggle-button:hover {
|
|
background-color: var(--surface-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.files-header-icon-button {
|
|
@apply inline-flex items-center justify-center shrink-0 w-7 h-7 border border-base transition-colors;
|
|
background-color: var(--surface-base);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.files-header-icon-button:hover {
|
|
background-color: var(--surface-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.files-header-icon-button:disabled {
|
|
opacity: 0.55;
|
|
cursor: default;
|
|
}
|
|
|
|
.files-tab-body {
|
|
@apply flex flex-col flex-1 min-h-0;
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.file-list-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--surface-secondary);
|
|
border-left: 1px solid var(--border-base);
|
|
/* Monaco uses layered positioned elements; keep overlay well above it. */
|
|
z-index: 200;
|
|
}
|
|
|
|
/* Phone overlay: header removed; use main header toggle. */
|
|
|
|
.files-tab-stats {
|
|
@apply flex items-center gap-3 text-[11px];
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.files-tab-selected-path {
|
|
@apply text-xs font-mono min-w-0 flex-1 overflow-hidden whitespace-nowrap;
|
|
color: var(--text-primary);
|
|
text-overflow: ellipsis;
|
|
/* Truncate from the start; keep filename visible. */
|
|
direction: rtl;
|
|
text-align: left;
|
|
unicode-bidi: isolate;
|
|
}
|
|
|
|
.files-tab-selected-path .file-path-text {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
|
|
.files-tab-stat {
|
|
@apply flex items-center gap-1.5;
|
|
}
|
|
|
|
.files-tab-stat-value {
|
|
@apply font-semibold;
|
|
}
|
|
|
|
.files-tab-stat-additions {
|
|
color: var(--session-status-idle-fg);
|
|
}
|
|
|
|
.files-tab-stat-deletions {
|
|
color: var(--session-status-working-fg);
|
|
}
|
|
|
|
/* File list panel */
|
|
.file-list-panel {
|
|
@apply flex flex-col min-h-0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.file-list-header {
|
|
@apply flex items-center justify-between gap-2 px-3 py-2 border-b;
|
|
border-color: var(--border-base);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.file-list-title {
|
|
@apply text-[11px] font-semibold uppercase tracking-wide;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.file-list-count {
|
|
@apply text-[10px] px-1.5 py-0.5 rounded-full;
|
|
background-color: var(--surface-base);
|
|
color: var(--text-muted);
|
|
border: 1px solid var(--border-base);
|
|
}
|
|
|
|
.file-list-scroll {
|
|
@apply flex-1 overflow-y-auto min-h-0;
|
|
}
|
|
|
|
.file-list-item {
|
|
@apply px-3 py-2.5 border-b cursor-pointer transition-all duration-150;
|
|
border-color: var(--border-base);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.file-list-item:last-child {
|
|
@apply border-b-0;
|
|
}
|
|
|
|
.file-list-item:hover {
|
|
background-color: var(--surface-hover);
|
|
}
|
|
|
|
.file-list-item-active {
|
|
background-color: var(--surface-base);
|
|
box-shadow: inset 0 0 0 1px var(--accent-primary);
|
|
}
|
|
|
|
.file-list-item-content {
|
|
@apply flex items-center justify-between gap-3;
|
|
}
|
|
|
|
.file-list-item-path {
|
|
@apply text-xs font-mono min-w-0 flex-1 overflow-hidden whitespace-nowrap;
|
|
color: var(--text-primary);
|
|
text-overflow: ellipsis;
|
|
/* Truncate from the start; keep filename visible. */
|
|
direction: rtl;
|
|
text-align: left;
|
|
unicode-bidi: isolate;
|
|
}
|
|
|
|
.file-list-item-path .file-path-text {
|
|
direction: ltr;
|
|
unicode-bidi: isolate;
|
|
}
|
|
|
|
.file-list-item-stats {
|
|
@apply flex items-center gap-2 text-[11px] flex-shrink-0;
|
|
}
|
|
|
|
.file-list-item-additions {
|
|
color: var(--session-status-idle-fg);
|
|
}
|
|
|
|
.file-list-item-deletions {
|
|
color: var(--session-status-working-fg);
|
|
}
|
|
|
|
/* File viewer panel */
|
|
.file-viewer-panel {
|
|
@apply flex flex-col min-h-0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.file-viewer-header {
|
|
@apply flex items-center gap-2 px-3 py-2 border-b;
|
|
border-color: var(--border-base);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.file-viewer-toolbar {
|
|
@apply flex items-center gap-1;
|
|
}
|
|
|
|
.file-viewer-toolbar-button {
|
|
@apply text-[11px] px-2 py-1 rounded border border-base transition-colors;
|
|
background-color: var(--surface-base);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.file-viewer-toolbar-icon-button {
|
|
@apply inline-flex items-center justify-center shrink-0 w-7 h-7 border border-base transition-colors;
|
|
background-color: var(--surface-base);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.file-viewer-toolbar-icon-button:hover {
|
|
background-color: var(--surface-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.file-viewer-toolbar-icon-button.active {
|
|
color: var(--text-primary);
|
|
box-shadow: inset 0 0 0 1px var(--accent-primary);
|
|
}
|
|
|
|
.file-viewer-toolbar-button:hover {
|
|
background-color: var(--surface-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.file-viewer-toolbar-button.active {
|
|
color: var(--text-primary);
|
|
box-shadow: inset 0 0 0 1px var(--accent-primary);
|
|
}
|
|
|
|
.file-viewer-title {
|
|
@apply text-[11px] font-semibold uppercase tracking-wide;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.file-viewer-content {
|
|
@apply flex-1 p-4 overflow-auto min-h-0;
|
|
}
|
|
|
|
.file-viewer-content--monaco {
|
|
@apply flex-1 overflow-hidden min-h-0;
|
|
padding: 0;
|
|
}
|
|
|
|
.monaco-viewer {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.file-viewer-empty {
|
|
@apply flex flex-col items-center justify-center h-full gap-3 text-center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.file-viewer-empty-icon {
|
|
@apply w-8 h-8 opacity-40;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.file-viewer-empty-text {
|
|
@apply text-xs;
|
|
}
|
|
|
|
.file-viewer-placeholder {
|
|
@apply text-xs leading-relaxed;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.file-viewer-selected-file {
|
|
@apply flex flex-col gap-2;
|
|
}
|
|
|
|
.file-viewer-file-name {
|
|
@apply text-xs font-mono px-2 py-1.5 rounded border;
|
|
background-color: var(--surface-base);
|
|
border-color: var(--border-base);
|
|
color: var(--text-primary);
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* Mobile file selector */
|
|
.mobile-file-selector {
|
|
@apply rounded-lg border flex flex-col gap-3 p-3;
|
|
background-color: var(--surface-secondary);
|
|
border-color: var(--border-base);
|
|
}
|
|
|
|
.mobile-file-selector-label {
|
|
@apply text-[11px] font-semibold uppercase tracking-wide;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.mobile-file-selector-trigger {
|
|
@apply w-full;
|
|
}
|
|
|
|
.mobile-file-viewer {
|
|
@apply rounded-lg border flex flex-col min-h-[220px];
|
|
background-color: var(--surface-secondary);
|
|
border-color: var(--border-base);
|
|
}
|
|
|
|
/* Status tab layout */
|
|
.status-tab-container {
|
|
@apply flex flex-col h-full min-h-0;
|
|
}
|
|
|
|
.status-tab-context-panel {
|
|
@apply border-b;
|
|
border-color: var(--border-base);
|
|
background-color: var(--surface-secondary);
|
|
}
|
|
|
|
/* Accordion improvements for right panel */
|
|
.right-panel-accordion {
|
|
@apply flex flex-col;
|
|
}
|
|
|
|
.right-panel-accordion-item {
|
|
@apply border-b last:border-b-0;
|
|
border-color: var(--border-base);
|
|
background-color: var(--surface-secondary);
|
|
}
|
|
|
|
.right-panel-accordion-trigger {
|
|
@apply w-full flex items-center justify-between px-3 py-2.5 text-[11px] font-semibold uppercase tracking-wide transition-colors duration-150;
|
|
color: var(--text-secondary);
|
|
background-color: transparent;
|
|
}
|
|
|
|
.right-panel-accordion-trigger:hover {
|
|
background-color: var(--surface-hover);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.section-left {
|
|
@apply flex items-center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.right-panel-accordion-chevron {
|
|
@apply h-4 w-4 transition-transform duration-200;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.right-panel-accordion-chevron-expanded {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.right-panel-accordion-content {
|
|
@apply w-full px-3 pb-3 text-sm;
|
|
color: var(--text-primary);
|
|
min-height: 0;
|
|
}
|
|
|
|
.right-panel-accordion-content [data-accordion-content] {
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Section info tooltip */
|
|
.section-info-trigger {
|
|
@apply inline-flex items-center justify-center p-0.5 rounded transition-all duration-150;
|
|
color: var(--text-muted);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.section-info-trigger:hover {
|
|
color: var(--text-primary);
|
|
background-color: var(--surface-hover);
|
|
}
|
|
|
|
.section-label {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.section-info-icon {
|
|
@apply w-3.5 h-3.5;
|
|
}
|
|
|
|
.section-info-tooltip {
|
|
@apply max-w-xs px-3 py-2 text-xs rounded-lg border shadow-lg;
|
|
background-color: var(--surface-base);
|
|
border-color: var(--border-base);
|
|
color: var(--text-primary);
|
|
animation: tooltipShow 150ms ease-out;
|
|
transform-origin: var(--kb-tooltip-content-transform-origin);
|
|
z-index: 9999;
|
|
}
|
|
|
|
.section-info-tooltip[data-expanded] {
|
|
animation: tooltipShow 150ms ease-out;
|
|
}
|
|
|
|
@keyframes tooltipShow {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Background process cards in status panel */
|
|
.status-process-card {
|
|
@apply rounded-lg border flex flex-col gap-2 p-3 transition-all duration-150;
|
|
background-color: var(--surface-base);
|
|
border-color: var(--border-base);
|
|
}
|
|
|
|
.status-process-card:hover {
|
|
border-color: var(--border-strong);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.status-process-header {
|
|
@apply flex flex-col gap-1;
|
|
}
|
|
|
|
.status-process-title {
|
|
@apply text-xs font-semibold;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.status-process-meta {
|
|
@apply flex flex-wrap gap-2 text-[11px];
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.status-process-actions {
|
|
@apply grid grid-cols-3 gap-2;
|
|
}
|
|
|
|
/* Empty states */
|
|
.right-panel-empty {
|
|
@apply flex flex-col items-center justify-center text-center gap-2;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.right-panel-empty--left {
|
|
@apply items-start justify-start text-left w-full;
|
|
}
|
|
|
|
.right-panel-empty-text {
|
|
@apply text-xs;
|
|
}
|
|
|
|
/* Dark mode adjustments */
|
|
[data-theme="dark"] .right-panel-tab-active {
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
[data-theme="dark"] .file-list-item-active {
|
|
box-shadow: inset 0 0 0 1px var(--accent-primary), 0 0 0 1px var(--surface-secondary);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme]) .right-panel-tab-active {
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|