* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #1e1e1e;
color: #d4d4d4;
height: 100vh;
overflow: hidden;
}
/* Overlay Scrollbars */
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
*::-webkit-scrollbar-corner {
background: transparent;
}
.app-container {
display: flex;
height: 100vh;
}
.left-pane {
width: 35%;
min-width: 200px;
border-right: 1px solid #3e3e42;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.right-pane {
flex: 1;
display: flex;
overflow: hidden;
}
.right-pane.split-active {
display: flex;
}
.right-pane .task-pane {
width: 50%;
min-width: 200px;
border-right: 1px solid #3e3e42;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.right-pane.split-active .task-pane {
/* border already set above */
}
.right-pane .resource-pane {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
.resize-handle {
width: 8px;
background: transparent;
cursor: col-resize;
flex-shrink: 0;
position: relative;
z-index: 10;
margin-left: -4px;
margin-right: -4px;
}
.resize-handle:hover {
background: rgba(9, 105, 218, 0.3);
}
.resize-handle:active {
background: rgba(9, 105, 218, 0.5);
}
.pane-header {
padding: 16px 20px;
border-bottom: 1px solid #3e3e42;
background: #252526;
min-height: 62px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.pane-header-content {
flex: 1;
min-width: 0;
}
.pane-subtitle {
font-size: 12px;
color: #8b949e;
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pane-title {
font-size: 18px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.pane-title .logo {
width: 22px;
height: 22px;
}
.pane-content {
flex: 1;
overflow-y: auto;
}
.left-pane .pane-content {
padding: 16px;
}
task-filter-bar {
display: block;
margin-bottom: 0;
padding: 12px;
background: #252526;
border-radius: 8px;
border: 1px solid #3e3e42;
}
/* Spotlight Button with Shortcut */
.spotlight-btn {
gap: 6px;
}
.spotlight-btn kbd {
font-size: 11px;
padding: 2px 5px;
background: #3e3e42;
border-radius: 4px;
font-family: system-ui, -apple-system, sans-serif;
color: #ccc;
}
/* Filter Bar */
.filter-bar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.filter-bar.type-filter {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #3e3e42;
}
.filter-label {
font-size: 11px;
color: #888;
text-transform: uppercase;
min-width: 40px;
}
.filter-btn {
padding: 6px 12px;
border: 1px solid #3e3e42;
background: #2d2d30;
color: #d4d4d4;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
transition: all 0.2s;
}
.filter-btn:hover {
background: #3e3e42;
}
.filter-btn.active {
background: #007acc;
border-color: #007acc;
color: white;
}
/* Sort dropdown */
.filter-sort {
display: flex;
align-items: center;
gap: 6px;
margin-left: auto;
}
.filter-sort-label {
font-size: 12px;
color: #8b949e;
}
.filter-sort-select {
padding: 5px 8px;
border: 1px solid #3e3e42;
background: #2d2d30;
color: #d4d4d4;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
}
.filter-sort-select:hover {
background: #3e3e42;
}
.filter-sort-select:focus {
outline: none;
border-color: #007acc;
}
/* Breadcrumb */
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 0;
margin-bottom: 8px;
border-bottom: 1px solid #3e3e42;
font-size: 13px;
}
.breadcrumb-segment {
background: none;
border: none;
color: #888;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.2s;
font-size: 13px;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumb-segment:hover {
background: #2d2d30;
color: #d4d4d4;
}
.breadcrumb-segment:last-child {
color: #d4d4d4;
font-weight: 500;
}
.breadcrumb-separator {
color: #555;
user-select: none;
}
/* Task List */
.task-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.task-item-wrapper {
display: flex;
align-items: stretch;
gap: 4px;
min-width: 0;
}
.task-item-wrapper.child {
margin-left: 16px;
padding-left: 12px;
position: relative;
}
.task-item-wrapper.child::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 8px;
height: 1px;
background: #3e3e42;
}
.task-item-wrapper.child::after {
content: '';
position: absolute;
left: 0;
top: -6px;
bottom: 50%;
width: 1px;
background: #3e3e42;
}
.task-item {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
background: #252526;
border: 1px solid #3e3e42;
border-radius: 6px;
padding: 12px;
cursor: pointer;
transition: all 0.2s;
min-width: 0;
overflow: hidden;
}
.collapse-btn {
background: none;
border: none;
padding: 4px;
cursor: pointer;
color: #888;
display: flex;
align-items: center;
transition: transform 0.2s;
transform: rotate(90deg);
}
.collapse-btn.collapsed {
transform: rotate(0deg);
}
.collapse-btn:hover {
color: #d4d4d4;
}
.child-count {
font-size: 11px;
color: #888;
background: #3e3e42;
padding: 2px 6px;
border-radius: 10px;
}
.enter-icon {
font-size: 14px;
color: #888;
margin-left: auto;
opacity: 0.6;
transition: opacity 0.2s;
}
.task-item.type-epic:hover .enter-icon {
opacity: 1;
color: #007acc;
}
.task-item:hover {
background: #2d2d30;
border-color: #007acc;
}
.task-item.selected {
background: #094771;
border-color: #007acc;
}
.task-item.current-epic {
/* Separator below provides visual distinction */
}
.epic-separator {
display: flex;
align-items: center;
margin: 12px 0;
gap: 12px;
}
.epic-separator::before,
.epic-separator::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(9, 105, 218, 0.3), transparent);
}
.epic-separator::before {
background: linear-gradient(90deg, transparent, rgba(9, 105, 218, 0.3));
}
.epic-separator::after {
background: linear-gradient(90deg, rgba(9, 105, 218, 0.3), transparent);
}
.separator-icon {
width: 10px !important;
height: 10px !important;
flex-shrink: 0;
background: linear-gradient(135deg, #00d4ff, #7b2dff, #ff2d7b) !important;
}
.task-id {
font-size: 11px;
color: #888;
font-family: 'Monaco', monospace;
}
.task-title {
font-size: 13px;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.status-badge {
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
font-weight: 500;
text-transform: uppercase;
flex-shrink: 0;
}
.status-open { background: #1f6feb; color: white; }
.status-in_progress { background: #d97706; color: white; }
.status-blocked { background: #cf222e; color: white; }
.status-done { background: #1a7f37; color: white; }
.status-cancelled { background: #57606a; color: white; }
/* Task Badge */
.task-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: monospace;
font-size: inherit;
color: inherit;
}
/* Task badge gradients */
.task-badge.type-task .task-badge-icon {
background: linear-gradient(135deg, #00d4ff 0%, #7b2dff 100%);
}
.task-badge.type-epic .task-badge-icon {
background: linear-gradient(135deg, #f0b429 0%, #ff6b2d 100%);
}
.task-badge.type-folder .task-badge-icon {
background: linear-gradient(135deg, #3fb950 0%, #1f883d 100%);
}
.task-badge.type-artifact .task-badge-icon {
background: linear-gradient(135deg, #a371f7 0%, #ff2d7b 100%);
}
.task-badge.type-milestone .task-badge-icon {
background: linear-gradient(135deg, #f85149 0%, #ff8c00 100%);
}
.task-badge-icon {
width: 1em;
height: 1em;
}
.task-badge-id {
font-weight: 600;
}
.task-item .task-badge {
color: #888;
}
.type-icon {
margin-right: 6px;
display: inline-flex;
vertical-align: middle;
}
.type-icon.type-epic {
color: #f0b429;
}
.type-icon.type-task {
color: #3b82f6;
}
.type-icon.type-folder {
color: #3fb950;
}
.type-icon.type-artifact {
color: #a371f7;
}
.type-icon.type-milestone {
color: #f85149;
}
/* Due date badge */
.due-date-badge {
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
background: rgba(248, 81, 73, 0.2);
color: #ff8c00;
font-weight: 500;
flex-shrink: 0;
}
.due-date-meta {
color: #ff8c00;
font-weight: 500;
}
/* Content type badge */
.content-type-badge {
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
background: rgba(163, 113, 247, 0.2);
color: #a371f7;
font-weight: 500;
}
/* Breadcrumb type icons */
.breadcrumb-type-icon {
margin-right: 4px;
}
.breadcrumb-type-icon.type-epic { background: linear-gradient(135deg, #f0b429, #ff6b2d); }
.breadcrumb-type-icon.type-folder { background: linear-gradient(135deg, #3fb950, #1f883d); }
.breadcrumb-type-icon.type-milestone { background: linear-gradient(135deg, #f85149, #ff8c00); }
.breadcrumb-type-icon.type-task { background: linear-gradient(135deg, #00d4ff, #7b2dff); }
.breadcrumb-type-icon.type-artifact { background: linear-gradient(135deg, #a371f7, #ff2d7b); }
.epic-icon-inline {
display: inline-flex;
vertical-align: middle;
margin-right: 4px;
color: #f0b429;
}
/* Task Detail */
.task-detail-header {
margin-bottom: 20px;
}
.task-detail-title {
font-size: 24px;
margin-bottom: 8px;
}
.task-meta {
display: flex;
gap: 16px;
font-size: 12px;
color: #888;
}
.task-body {
line-height: 1.6;
}
.task-body h1 { font-size: 22px; margin: 24px 0 12px; }
.task-body h2 { font-size: 18px; margin: 20px 0 10px; }
.task-body h3 { font-size: 16px; margin: 16px 0 8px; }
.task-body ul, .task-body ol { margin: 10px 0 10px 20px; }
.task-body li { margin: 4px 0; }
.task-body p { margin: 10px 0; }
.task-body a { color: #4fc3f7; text-decoration: none; }
.task-body a:hover { text-decoration: underline; }
.task-body code {
background: #2d2d30;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Monaco', monospace;
font-size: 13px;
}
.task-body pre {
background: #2d2d30;
padding: 12px;
border-radius: 6px;
overflow-x: auto;
margin: 12px 0;
}
.task-body pre code {
background: none;
padding: 0;
}
.evidence-section {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid #3e3e42;
}
.evidence-title {
font-size: 14px;
font-weight: 600;
margin-bottom: 8px;
color: #888;
text-transform: uppercase;
}
.evidence-list {
list-style: none;
margin: 0;
}
.evidence-list li {
padding: 8px 0;
font-size: 13px;
border-bottom: 1px solid #3e3e42;
}
.evidence-list li:last-child {
border-bottom: none;
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #888;
}
.empty-state-inline {
text-align: center;
padding: 40px 20px;
color: #888;
}
.empty-state-icon {
font-size: 48px;
margin-bottom: 16px;
}
.error {
background: #5a1d1d;
border: 1px solid #f85149;
padding: 12px;
border-radius: 6px;
margin: 16px;
}
/* Task meta card */
.task-meta-card {
padding: 16px;
margin-bottom: 16px;
background: #161b22;
border: 1px solid #30363d;
border-radius: 8px;
}
.task-header-left {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
#task-pane-header .task-meta-id {
font-family: monospace;
font-size: 14px;
color: #c9d1d9;
font-weight: 600;
}
.task-meta-id {
font-family: monospace;
font-size: 12px;
color: #8b949e;
}
.task-meta-title {
font-size: 24px;
margin: 0 0 8px 0;
font-weight: 600;
}
.task-meta-row {
font-size: 12px;
color: #8b949e;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.task-meta-epic {
display: inline-flex;
align-items: center;
gap: 4px;
}
.task-meta-epic-label {
margin-right: 0;
}
.epic-link {
color: #f0b429;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.epic-link:hover {
text-decoration: underline;
}
.epic-title {
color: #d4d4d4;
}
.task-meta-section {
margin-top: 12px;
font-size: 13px;
}
.task-meta-section-label {
font-weight: 600;
color: #8b949e;
margin-bottom: 4px;
}
.task-meta-section ul {
margin: 0;
padding-left: 20px;
}
.task-meta-section li {
margin: 6px 0;
line-height: 1.4;
}
.blocked-reason-section {
border-left: 3px solid #f85149;
padding-left: 12px;
background: rgba(248, 81, 73, 0.1);
border-radius: 0 6px 6px 0;
padding: 8px 12px;
}
/* md-block with GitHub styling - load after github-markdown.css */
task-detail {
display: block;
min-height: 100%;
}
task-detail .markdown-body {
min-height: 100%;
}
.markdown-body.markdown-body {
padding: 16px;
border-radius: 6px;
}
.markdown-body md-block {
display: block;
}
/* External links */
.markdown-body a[href^="http"]::after {
display: inline;
}
.markdown-body a[href^="http"]::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.2em;
vertical-align: middle;
margin-bottom: 0.2em;
background: currentColor;
opacity: 0.7;
mask-image: url('./icons/external-link.svg');
-webkit-mask-image: url('./icons/external-link.svg');
}
/* Local file links */
.markdown-body a[href^="file://"]::after {
content: "";
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.2em;
vertical-align: middle;
margin-bottom: 0.2em;
background: currentColor;
opacity: 0.7;
mask-image: url('./icons/file.svg');
-webkit-mask-image: url('./icons/file.svg');
}
/* MCP resource links - gradient lightning bolt */
.markdown-body a[href^="mcp://"]::after {
content: "";
display: inline-block;
width: 1.2em;
height: 1.2em;
margin-left: 0.3em;
vertical-align: middle;
margin-bottom: 0.2em;
background: linear-gradient(135deg, #00d4ff 0%, #7b2dff 50%, #ff2d7b 100%);
mask-image: url('./icons/lightning-bolt.svg');
-webkit-mask-image: url('./icons/lightning-bolt.svg');
}
/* Make code elements selectable independently on double-click */
.markdown-body code {
word-break: break-word;
}
/* Outline button style */
.btn-outline {
border: 1px solid #30363d;
border-radius: 6px;
padding: 5px 12px;
color: #c9d1d9;
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-outline svg {
color: #58a6ff;
}
.btn-outline:hover {
background: rgba(56, 139, 253, 0.1);
border-color: #58a6ff;
}
/* Resource Viewer */
.resource-viewer {
flex: 1;
overflow: auto;
background: #1e1e1e;
}
.resource-viewer pre {
background: #1e1e1e;
border: 1px solid #3e3e42;
border-radius: 6px;
padding: 16px;
overflow-x: auto;
font-size: 13px;
line-height: 1.6;
}
.resource-viewer code {
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
color: #d4d4d4;
}
.resource-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #858585;
gap: 12px;
}
.resource-empty-icon {
font-size: 48px;
opacity: 0.5;
}
.resource-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
color: #858585;
}
.resource-error {
padding: 20px;
color: #f48771;
text-align: center;
}
.resource-error-detail {
margin-top: 8px;
font-size: 13px;
color: #858585;
}
/* Frontmatter Metadata */
.frontmatter-meta {
padding: 16px;
margin: 16px;
background: #161b22;
border: 1px solid #30363d;
border-radius: 8px;
}
.frontmatter-list {
display: grid;
gap: 12px;
}
.frontmatter-item {
display: grid;
grid-template-columns: 150px 1fr;
gap: 12px;
align-items: start;
}
.frontmatter-item dt {
font-weight: 600;
color: #8b949e;
font-size: 13px;
text-transform: capitalize;
}
.frontmatter-item dd {
color: #d4d4d4;
font-size: 14px;
word-break: break-word;
}
.frontmatter-item dd ul {
margin: 0;
padding-left: 20px;
}
.frontmatter-item dd pre {
background: #0d1117;
padding: 8px;
border-radius: 4px;
font-size: 12px;
overflow-x: auto;
}
/* URI Section Styles */
.uri-section {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.uri-row {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
}
.uri-label {
color: #8b949e;
font-weight: 500;
min-width: 60px;
}
.uri-value {
flex: 1;
background: #0d1117;
padding: 4px 8px;
border-radius: 4px;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: 11px;
color: #79c0ff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* System Info Modal */
.pane-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal-content {
background: #2d2d30;
border-radius: 8px;
width: 90%;
max-width: 500px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid #3e3e42;
}
.modal-header h2 {
margin: 0;
font-size: 18px;
font-weight: 600;
}
.modal-close {
background: none;
border: none;
color: #8b949e;
font-size: 28px;
cursor: pointer;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.2s;
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.1);
color: #d4d4d4;
}
.modal-body {
padding: 20px;
}
.info-grid {
display: flex;
flex-direction: column;
gap: 16px;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}
.info-label {
font-weight: 600;
color: #8b949e;
min-width: 120px;
}
.info-value {
flex: 1;
text-align: right;
color: #d4d4d4;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.info-value code {
background: #1e1e1e;
padding: 4px 8px;
border-radius: 4px;
font-size: 13px;
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
word-break: break-all;
}
.loading {
text-align: center;
color: #8b949e;
padding: 20px;
}
.error {
color: #f85149;
text-align: center;
padding: 20px;
}
/* Copy Button */
copy-button {
font-family: monospace;
font-weight: 600;
}
/* Spotlight Search */
.header-actions {
display: flex;
gap: 8px;
}
.spotlight-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
}
.spotlight-modal {
background: #2d2d30;
border-radius: 12px;
width: 90%;
max-width: 700px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.spotlight-input-wrapper {
display: flex;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #3e3e42;
gap: 12px;
}
.spotlight-icon {
width: 20px;
height: 20px;
color: #8b949e;
flex-shrink: 0;
}
.spotlight-input {
flex: 1;
background: none;
border: none;
color: #d4d4d4;
font-size: 18px;
outline: none;
}
.spotlight-input::placeholder {
color: #6e7681;
}
.spotlight-hint {
font-size: 12px;
color: #6e7681;
background: #3e3e42;
padding: 4px 8px;
border-radius: 4px;
}
/* Spotlight Controls */
.spotlight-controls {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
border-bottom: 1px solid #3e3e42;
gap: 12px;
}
.spotlight-type-filters {
display: flex;
gap: 4px;
}
.spotlight-filter-btn {
background: transparent;
border: 1px solid #3e3e42;
color: #8b949e;
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
transition: all 0.15s ease;
}
.spotlight-filter-btn:hover {
background: #3e3e42;
color: #d4d4d4;
}
.spotlight-filter-btn.active {
background: #58a6ff;
border-color: #58a6ff;
color: white;
}
.spotlight-sort-controls {
display: flex;
gap: 4px;
}
.spotlight-sort-btn {
background: transparent;
border: none;
color: #6e7681;
padding: 4px 8px;
font-size: 12px;
cursor: pointer;
transition: color 0.15s ease;
}
.spotlight-sort-btn:hover {
color: #d4d4d4;
}
.spotlight-sort-btn.active {
color: #58a6ff;
font-weight: 500;
}
/* Spotlight Status */
.spotlight-status {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 20px;
font-size: 12px;
color: #6e7681;
border-bottom: 1px solid #3e3e42;
min-height: 28px;
}
.spotlight-result-count {
color: #8b949e;
}
.spotlight-loading-indicator {
display: flex;
align-items: center;
}
.spotlight-spinner {
width: 14px;
height: 14px;
border: 2px solid #3e3e42;
border-top-color: #58a6ff;
border-radius: 50%;
animation: spotlight-spin 0.8s linear infinite;
}
@keyframes spotlight-spin {
to { transform: rotate(360deg); }
}
.spotlight-results {
max-height: 450px;
overflow-y: auto;
}
.spotlight-result {
display: flex;
flex-direction: column;
padding: 14px 20px;
gap: 8px;
cursor: pointer;
border-bottom: 1px solid #3e3e42;
}
.spotlight-result:last-child {
border-bottom: none;
}
.spotlight-result:hover,
.spotlight-result.selected {
background: #37373d;
}
.spotlight-result-header {
display: flex;
align-items: center;
gap: 8px;
}
.spotlight-result-title {
flex: 1;
font-weight: 500;
color: #d4d4d4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.spotlight-result-snippet {
background: #252526;
border-radius: 6px;
padding: 10px 12px;
font-size: 13px;
line-height: 1.5;
color: #b0b0b0;
overflow: hidden;
}
.spotlight-result-snippet .snippet-text {
display: block;
max-height: 3.6em; /* ~2-3 lines */
overflow: hidden;
}
.spotlight-result-snippet .snippet-text p {
margin: 0;
}
.spotlight-result-meta {
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
}
.spotlight-result-field {
color: #6e7681;
font-style: italic;
}
.spotlight-match {
background: rgba(255, 213, 0, 0.3);
color: #ffd500;
border-radius: 2px;
padding: 0 2px;
}
.spotlight-empty {
padding: 24px;
text-align: center;
color: #8b949e;
}
/* Spotlight Default Tabs */
.spotlight-default-tabs {
display: none;
}
.spotlight-tabs-header {
display: flex;
gap: 4px;
padding: 10px 20px;
border-bottom: 1px solid #3e3e42;
}
.spotlight-tab-btn {
background: transparent;
border: 1px solid transparent;
color: #8b949e;
padding: 6px 12px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: all 0.15s ease;
}
.spotlight-tab-btn:hover {
background: #3e3e42;
color: #d4d4d4;
}
.spotlight-tab-btn.active {
background: #37373d;
border-color: #58a6ff;
color: #d4d4d4;
}
.spotlight-tabs-content {
max-height: 400px;
overflow-y: auto;
}
.spotlight-tab-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
cursor: pointer;
border-bottom: 1px solid #3e3e42;
transition: background 0.15s;
}
.spotlight-tab-item:last-child {
border-bottom: none;
}
.spotlight-tab-item:hover,
.spotlight-tab-item.selected {
background: #37373d;
}
.spotlight-tab-item-title {
flex: 1;
color: #d4d4d4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.spotlight-tab-empty {
padding: 40px 20px;
text-align: center;
color: #6e7681;
}
.spotlight-tab-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
}
/* Resource-specific spotlight styles */
.spotlight-resource-icon {
font-size: 16px;
margin-right: 4px;
}
.spotlight-result-path {
color: #6e7681;
font-family: monospace;
font-size: 11px;
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.type-badge {
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
font-weight: 500;
text-transform: uppercase;
flex-shrink: 0;
}
.type-badge.type-resource {
background: #8b5cf6;
color: white;
}
/* Activity Panel Styles */
.activity-panel {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.activity-loading,
.activity-error,
.activity-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: #8b949e;
gap: 8px;
}
.activity-empty-icon {
font-size: 32px;
opacity: 0.5;
}
/* Task-scoped filter header */
.activity-filter-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #21262d;
border-bottom: 1px solid #30363d;
flex-shrink: 0;
}
.activity-filter-label {
font-size: 12px;
color: #8b949e;
}
.activity-filter-clear {
margin-left: auto;
padding: 4px 8px;
background: transparent;
border: 1px solid #30363d;
border-radius: 4px;
color: #8b949e;
cursor: pointer;
font-size: 12px;
transition: all 0.15s;
}
.activity-filter-clear:hover {
background: #30363d;
color: #d4d4d4;
}
.activity-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #30363d;
flex-shrink: 0;
}
.activity-title {
font-weight: 600;
color: #d4d4d4;
}
.activity-count {
font-size: 12px;
color: #8b949e;
}
.activity-list {
flex: 1;
overflow-y: auto;
padding: 8px;
}
.activity-item {
background: #252526;
border-radius: 6px;
margin-bottom: 8px;
cursor: pointer;
transition: background 0.15s;
}
.activity-item:hover {
background: #2d2d30;
}
.activity-item.expanded {
background: #2d2d30;
}
.activity-item-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px;
cursor: pointer;
border-radius: 6px;
}
.activity-item-header:hover {
background: #2d2d30;
}
.activity-item.expanded .activity-item-header {
border-radius: 6px 6px 0 0;
}
.activity-item-left {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.activity-item-info {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.activity-item-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
flex-shrink: 0;
margin-left: 12px;
}
.activity-icon {
font-size: 14px;
flex-shrink: 0;
}
.activity-label {
font-weight: 500;
color: #d4d4d4;
flex-shrink: 0;
}
.activity-merged-badge {
font-size: 11px;
font-weight: 500;
color: #58a6ff;
background: rgba(88, 166, 255, 0.15);
padding: 2px 6px;
border-radius: 4px;
margin-left: 6px;
}
.activity-resource {
flex: 1;
color: #8b949e;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.activity-task-link {
color: #58a6ff;
text-decoration: none;
cursor: pointer;
}
.activity-task-link:hover {
text-decoration: underline;
}
.activity-time {
font-size: 12px;
color: #8b949e;
flex-shrink: 0;
}
.activity-date {
font-size: 11px;
color: #6e7681;
}
.activity-actor-inline {
font-size: 12px;
}
.activity-resource-id {
color: #8b949e;
font-size: 12px;
}
.activity-actor-user {
color: #58a6ff;
}
.activity-actor-agent {
color: #a371f7;
}
.activity-expanded {
padding: 8px 12px 12px;
cursor: default;
}
.activity-detail-row {
display: flex;
gap: 8px;
padding: 6px 0;
align-items: flex-start;
}
.activity-detail-label {
color: #8b949e;
font-size: 12px;
min-width: 60px;
flex-shrink: 0;
}
.activity-detail-value {
color: #d4d4d4;
font-size: 13px;
word-break: break-word;
}
.activity-diff {
background: #1e1e1e;
border-radius: 4px;
padding: 8px;
margin-bottom: 8px;
font-family: monospace;
font-size: 12px;
}
.activity-diff-header {
font-weight: 600;
color: #8b949e;
margin-bottom: 4px;
}
.activity-diff-old {
color: #f85149;
white-space: pre-wrap;
word-break: break-all;
}
.activity-diff-new {
color: #3fb950;
white-space: pre-wrap;
word-break: break-all;
}
.activity-details {
margin-top: 8px;
}
.activity-details summary {
cursor: pointer;
color: #8b949e;
font-size: 12px;
padding: 4px 0;
}
.activity-details summary:hover {
color: #d4d4d4;
}
.activity-json {
background: #1e1e1e;
border-radius: 4px;
padding: 8px;
font-size: 11px;
overflow-x: auto;
max-height: 200px;
overflow-y: auto;
color: #d4d4d4;
margin: 4px 0 0;
}
/* Task header right section */
.task-header-right {
display: flex;
align-items: center;
gap: 8px;
}
#task-activity-btn {
padding: 4px 8px;
display: flex;
align-items: center;
gap: 4px;
}
/* Activity button with badge */
.activity-btn-with-badge {
position: relative;
}
.activity-badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 16px;
height: 16px;
padding: 0 4px;
background: #30363d;
color: #8b949e;
font-size: 10px;
font-weight: 600;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
/* Actor display in activity panel */
.activity-actor-user {
color: #58a6ff;
}
.activity-actor-agent {
color: #a371f7;
}
.activity-delegated {
color: #6e7681;
font-style: italic;
}
.activity-context {
color: #6e7681;
font-size: 11px;
}
/* diff2html overrides */
.activity-diff {
border-radius: 6px;
overflow: hidden;
margin-top: 8px;
position: relative; /* Fix for d2h-code-linenumber absolute positioning */
}
.activity-diff .d2h-file-header {
display: none;
}
.activity-diff .d2h-file-wrapper {
margin-bottom: 0;
border: none;
}
.activity-diff .d2h-diff-table {
font-size: 12px;
}
.activity-diff .d2h-code-linenumber {
position: sticky;
left: 0;
}
/* Stacked diffs container */
.activity-diff-stack {
display: flex;
flex-direction: column;
gap: 4px;
}
.activity-diff-stack .activity-diff {
margin-top: 0;
}
/* Day grouping styles */
.activity-day-separator {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 12px;
margin-top: 20px;
margin-bottom: 12px;
position: sticky;
top: 0;
background: #252526;
z-index: 10;
border-bottom: 2px solid #3d444d;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.activity-day-separator:first-child {
margin-top: 0;
}
.activity-day-label {
font-weight: 700;
color: #e6edf3;
font-size: 14px;
letter-spacing: -0.01em;
}
.activity-day-count {
font-size: 11px;
color: #8b949e;
background: #30363d;
padding: 2px 8px;
border-radius: 10px;
font-weight: 500;
}
/* Task grouping in timeline */
.activity-task-group {
margin: 0 8px 12px;
background: #21262d;
border-radius: 8px;
overflow: hidden;
}
.activity-task-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #30363d;
border-bottom: 1px solid #3d444d;
flex-wrap: wrap;
}
.activity-task-title {
color: #d4d4d4;
font-size: 13px;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.activity-task-recent {
color: #6e7681;
font-size: 11px;
margin-left: auto;
flex-shrink: 0;
}
.activity-epic-link {
text-decoration: none;
flex-shrink: 0;
color: #8b949e;
}
.activity-epic-link:hover {
opacity: 0.8;
}
.activity-toggle-btn {
width: 100%;
padding: 8px 12px;
background: #21262d;
border: none;
border-top: 1px solid #30363d;
color: #58a6ff;
font-size: 12px;
cursor: pointer;
text-align: center;
transition: background 0.15s;
}
.activity-toggle-btn:hover {
background: #2d333b;
}
.activity-task-group .activity-item {
border-radius: 0;
margin: 0;
border-bottom: 1px solid #30363d;
}
.activity-task-group .activity-item:last-child {
border-bottom: none;
}
.activity-task-group .activity-item:last-child:has(+ .activity-toggle-btn) {
border-bottom: none;
}
.activity-task-group .activity-item:hover {
background: #2d333b;
}
/* Mode toggle */
.activity-mode-toggle {
display: flex;
gap: 4px;
padding: 8px 12px;
border-bottom: 1px solid #30363d;
flex-shrink: 0;
}
.activity-mode-btn {
padding: 6px 12px;
border: 1px solid #30363d;
background: transparent;
color: #8b949e;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
transition: all 0.15s;
}
.activity-mode-btn:hover {
background: #30363d;
color: #d4d4d4;
}
.activity-mode-btn.active {
background: #238636;
border-color: #238636;
color: white;
}
/* Journal view */
.activity-journal {
display: flex;
flex-direction: column;
height: 100%;
}
.activity-nav {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
border-bottom: 1px solid #30363d;
flex-shrink: 0;
}
.activity-nav-btn {
padding: 6px 10px;
border: 1px solid #30363d;
background: transparent;
color: #8b949e;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
transition: all 0.15s;
}
.activity-nav-btn:hover:not(:disabled) {
background: #30363d;
color: #d4d4d4;
}
.activity-nav-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.activity-nav-today {
margin-left: auto;
background: #238636;
border-color: #238636;
color: white;
}
.activity-nav-today:hover {
background: #2ea043;
}
.activity-nav-date {
flex: 1;
text-align: center;
font-weight: 600;
color: #d4d4d4;
}
.activity-journal-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
color: #8b949e;
gap: 8px;
padding: 40px;
}
.activity-journal-content {
flex: 1;
overflow-y: auto;
padding: 12px;
padding-bottom: 24px;
}
.activity-journal-section {
margin-bottom: 24px;
background: #1e1e1e;
border-radius: 8px;
padding: 12px;
}
.activity-journal-section:last-child {
margin-bottom: 12px;
}
.activity-journal-section-title {
font-weight: 600;
color: #d4d4d4;
font-size: 14px;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #30363d;
}
.activity-journal-list {
list-style: none;
margin: 0;
padding: 0;
}
.activity-journal-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid #252525;
flex-wrap: nowrap;
min-width: 0;
}
.activity-journal-item:last-child {
border-bottom: none;
}
.activity-journal-item task-badge {
flex-shrink: 0;
}
.activity-journal-title {
color: #8b949e;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
/* Epic grouping in journal */
.activity-journal-epic-group {
margin-bottom: 16px;
}
.activity-journal-epic-group:last-child {
margin-bottom: 0;
}
.activity-journal-epic-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0 4px 0;
flex-wrap: nowrap;
}
.activity-journal-epic-header task-badge {
flex-shrink: 0;
}
.activity-journal-epic-title {
font-weight: 500;
color: #d4d4d4;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.activity-journal-epic-group .activity-journal-list {
padding-left: 12px;
border-left: 2px solid #30363d;
margin-left: 4px;
}
.activity-journal-epic-group .activity-journal-item {
padding: 6px 0;
}
