/* Task Detail Panel - Modern Design */
:root {
--vscode-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
--card-border-radius: 8px;
--transition-speed: 0.2s;
--sidebar-width: 350px;
--header-height: 60px;
}
* {
box-sizing: border-box;
}
body {
font-family: var(--vscode-font-family);
font-size: 13px;
color: var(--vscode-foreground);
background-color: var(--vscode-editor-background);
margin: 0;
padding: 0;
line-height: 1.6;
overflow-x: hidden;
}
/* Main Container */
.main-container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Breadcrumb Navigation */
.breadcrumb-navigation {
padding: 12px 20px;
background: var(--vscode-editor-background);
border-bottom: 1px solid var(--vscode-widget-border);
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
overflow-x: auto;
white-space: nowrap;
}
.breadcrumb-item {
color: var(--vscode-foreground);
text-decoration: none;
opacity: 0.8;
transition: opacity var(--transition-speed);
display: flex;
align-items: center;
gap: 4px;
}
.breadcrumb-item:hover {
opacity: 1;
text-decoration: underline;
}
.breadcrumb-current {
font-weight: 500;
opacity: 1;
}
.breadcrumb-navigation .codicon {
font-size: 10px;
opacity: 0.5;
}
/* Content Layout */
.content-layout {
display: flex;
flex: 1;
gap: 20px;
padding: 20px;
max-width: 1600px;
margin: 0 auto;
width: 100%;
}
.main-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.sidebar {
width: var(--sidebar-width);
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Card Component */
.card {
background: var(--vscode-editor-background);
border: 1px solid var(--vscode-widget-border);
border-radius: var(--card-border-radius);
padding: 20px;
box-shadow: var(--card-shadow);
transition: box-shadow var(--transition-speed);
}
.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Header Section */
.header {
position: relative;
padding: 24px;
}
.header-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
width: fit-content;
}
.status-badge.status-completed {
background: rgba(73, 177, 100, 0.1);
color: var(--vscode-testing-iconPassed);
border: 1px solid rgba(73, 177, 100, 0.3);
}
.status-badge.status-in-progress {
background: rgba(0, 122, 204, 0.1);
color: var(--vscode-debugIcon-pauseForeground);
border: 1px solid rgba(0, 122, 204, 0.3);
}
.status-badge.status-pending {
background: rgba(255, 255, 255, 0.05);
color: var(--vscode-foreground);
border: 1px solid var(--vscode-widget-border);
}
.task-title {
font-size: 28px;
font-weight: 600;
margin: 0;
line-height: 1.3;
}
.task-title span[contenteditable] {
outline: none;
padding: 4px 8px;
margin: -4px -8px;
border-radius: 4px;
transition: background-color var(--transition-speed);
display: inline-block;
}
.task-title span[contenteditable]:hover {
background-color: var(--vscode-editor-hoverHighlightBackground);
}
.task-title span[contenteditable]:focus {
background-color: var(--vscode-editor-selectionBackground);
box-shadow: 0 0 0 2px var(--vscode-focusBorder);
}
.task-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.priority-badge,
.due-date-badge,
.project-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
background: var(--vscode-button-secondaryBackground);
border: 1px solid var(--vscode-widget-border);
}
.priority-badge.priority-yuksek {
background: rgba(244, 135, 113, 0.1);
color: var(--vscode-editorError-foreground);
border-color: rgba(244, 135, 113, 0.3);
}
.priority-badge.priority-orta {
background: rgba(255, 200, 0, 0.1);
color: var(--vscode-editorWarning-foreground);
border-color: rgba(255, 200, 0, 0.3);
}
.priority-badge.priority-dusuk {
background: rgba(0, 122, 204, 0.1);
color: var(--vscode-editorInfo-foreground);
border-color: rgba(0, 122, 204, 0.3);
}
.due-date-badge.overdue {
background: rgba(244, 135, 113, 0.1);
color: var(--vscode-editorError-foreground);
border-color: rgba(244, 135, 113, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.7; }
100% { opacity: 1; }
}
/* Description Section */
.description-section {
position: relative;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.section-header h3 {
font-size: 16px;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.editor-mode-toggle {
display: flex;
gap: 4px;
background: var(--vscode-editor-background);
padding: 2px;
border-radius: 6px;
border: 1px solid var(--vscode-widget-border);
}
.mode-btn {
background: transparent;
border: none;
color: var(--vscode-foreground);
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
gap: 4px;
opacity: 0.7;
transition: all var(--transition-speed);
}
.mode-btn:hover {
opacity: 1;
background: var(--vscode-button-secondaryHoverBackground);
}
.mode-btn.active {
background: var(--vscode-button-secondaryBackground);
opacity: 1;
}
/* Enhanced Markdown Editor */
.markdown-editor.enhanced {
border: 1px solid var(--vscode-widget-border);
border-radius: 6px;
overflow: hidden;
background: var(--vscode-input-background);
}
.editor-toolbar {
background: var(--vscode-editorWidget-background);
border-bottom: 1px solid var(--vscode-widget-border);
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.toolbar-group {
display: flex;
gap: 2px;
}
.toolbar-separator {
width: 1px;
height: 24px;
background: var(--vscode-widget-border);
opacity: 0.5;
}
.toolbar-spacer {
flex: 1;
}
.editor-toolbar button {
background: transparent;
border: 1px solid transparent;
color: var(--vscode-foreground);
padding: 6px 8px;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
opacity: 0.8;
transition: all var(--transition-speed);
gap: 2px;
}
.editor-toolbar button:hover {
background: var(--vscode-toolbar-hoverBackground);
border-color: var(--vscode-widget-border);
opacity: 1;
}
.toolbar-status {
display: flex;
align-items: center;
gap: 8px;
}
.save-status {
font-size: 12px;
color: var(--vscode-descriptionForeground);
display: flex;
align-items: center;
gap: 4px;
}
.editor-container {
display: flex;
min-height: 300px;
}
.editor-pane,
.preview-pane {
flex: 1;
padding: 16px;
}
.editor-content {
width: 100%;
min-height: 100%;
border: none;
background: transparent;
color: var(--vscode-editor-foreground);
font-family: var(--vscode-editor-font-family, "Consolas, 'Courier New', monospace");
font-size: 14px;
line-height: 1.8;
resize: none;
outline: none;
}
.preview-content {
font-size: 14px;
line-height: 1.8;
}
.preview-content h1,
.preview-content h2,
.preview-content h3 {
margin-top: 24px;
margin-bottom: 16px;
font-weight: 600;
}
.preview-content code {
background: var(--vscode-textBlockQuote-background);
padding: 2px 6px;
border-radius: 3px;
font-family: var(--vscode-editor-font-family);
font-size: 13px;
}
.preview-content pre {
background: var(--vscode-textBlockQuote-background);
padding: 16px;
border-radius: 6px;
overflow-x: auto;
}
.preview-content img {
max-width: 100%;
height: auto;
border-radius: 6px;
}
/* Tags Section */
.tags-section h3 {
font-size: 16px;
font-weight: 600;
margin: 0 0 12px 0;
display: flex;
align-items: center;
gap: 8px;
}
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.tag {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--vscode-badge-background);
color: var(--vscode-badge-foreground);
padding: 6px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
transition: all var(--transition-speed);
}
.tag:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tag-remove {
background: transparent;
border: none;
color: inherit;
padding: 0;
margin-left: 4px;
cursor: pointer;
opacity: 0.6;
transition: opacity var(--transition-speed);
display: flex;
align-items: center;
}
.tag-remove:hover {
opacity: 1;
}
.tag-add {
background: transparent;
border: 2px dashed var(--vscode-widget-border);
color: var(--vscode-foreground);
padding: 6px 12px;
border-radius: 16px;
font-size: 12px;
cursor: pointer;
opacity: 0.6;
transition: all var(--transition-speed);
display: inline-flex;
align-items: center;
gap: 4px;
}
.tag-add:hover {
opacity: 1;
border-style: solid;
background: var(--vscode-button-secondaryBackground);
}
/* Quick Actions */
.quick-actions h3 {
font-size: 14px;
font-weight: 600;
margin: 0 0 12px 0;
}
.actions-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.quick-action-btn {
background: var(--vscode-button-secondaryBackground);
border: 1px solid var(--vscode-widget-border);
color: var(--vscode-foreground);
padding: 12px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
transition: all var(--transition-speed);
}
.quick-action-btn:hover {
background: var(--vscode-button-secondaryHoverBackground);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.quick-action-btn .codicon {
font-size: 16px;
}
.quick-action-btn.danger {
color: var(--vscode-editorError-foreground);
}
.quick-action-btn.danger:hover {
background: rgba(244, 135, 113, 0.1);
border-color: rgba(244, 135, 113, 0.3);
}
/* Hierarchy Section */
.hierarchy-section h3 {
font-size: 14px;
font-weight: 600;
margin: 0 0 16px 0;
display: flex;
align-items: center;
gap: 8px;
}
.progress-overview {
display: flex;
gap: 20px;
margin-bottom: 20px;
padding: 16px;
background: var(--vscode-editor-background);
border-radius: 8px;
border: 1px solid var(--vscode-widget-border);
}
.circular-progress {
width: 80px;
height: 80px;
flex-shrink: 0;
position: relative;
}
.circular-chart {
transform: rotate(-90deg);
}
.percentage-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
font-weight: 700;
color: var(--vscode-foreground);
}
.circle-bg {
fill: none;
stroke: var(--vscode-widget-border);
stroke-width: 3;
}
.circle {
fill: none;
stroke: var(--vscode-progressBar-background);
stroke-width: 3;
stroke-linecap: round;
animation: progress 1s ease-out;
}
@keyframes progress {
from {
stroke-dasharray: 0, 100;
}
}
.percentage {
fill: var(--vscode-foreground);
font-size: 16px;
font-weight: 700;
text-anchor: middle;
dominant-baseline: middle;
}
.progress-details {
flex: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.stat-item {
text-align: center;
}
.stat-value {
display: block;
font-size: 20px;
font-weight: 600;
margin-bottom: 4px;
}
.stat-label {
font-size: 11px;
color: var(--vscode-descriptionForeground);
text-transform: uppercase;
}
.stat-item.success .stat-value {
color: var(--vscode-testing-iconPassed);
}
.stat-item.warning .stat-value {
color: var(--vscode-editorWarning-foreground);
}
/* Task Tree */
.task-tree {
margin-bottom: 16px;
font-size: 13px;
}
.tree-item {
display: flex;
align-items: center;
padding: 8px;
margin: 2px 0;
border-radius: 4px;
transition: background-color var(--transition-speed);
}
.tree-item:hover {
background: var(--vscode-list-hoverBackground);
}
.tree-item.current {
background: var(--vscode-list-activeSelectionBackground);
color: var(--vscode-list-activeSelectionForeground);
}
.tree-item.child {
margin-left: 24px;
}
.tree-icon {
width: 16px;
margin-right: 4px;
opacity: 0.6;
}
.tree-content {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
}
.tree-status {
margin-left: auto;
font-size: 14px;
}
.tree-status.completed {
color: var(--vscode-testing-iconPassed);
}
.tree-status.in-progress {
color: var(--vscode-debugIcon-pauseForeground);
}
.tree-badge {
background: var(--vscode-badge-background);
color: var(--vscode-badge-foreground);
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
}
.hierarchy-actions {
display: flex;
gap: 8px;
}
.action-button.small {
padding: 6px 12px;
font-size: 12px;
}
/* Dependencies Section */
.dependencies-section h3 {
font-size: 14px;
font-weight: 600;
margin: 0 0 12px 0;
display: flex;
align-items: center;
gap: 8px;
}
.dependency-stats {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
padding: 12px;
background: var(--vscode-editor-background);
border-radius: 6px;
border: 1px solid var(--vscode-widget-border);
}
.dependency-stats .stat-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.dependency-stats .stat-label {
color: var(--vscode-descriptionForeground);
}
.dependency-stats .stat-value {
font-weight: 600;
margin-left: auto;
}
.dependency-stats .stat-warning {
color: var(--vscode-editorWarning-foreground);
margin-left: 8px;
}
.dependency-stats .stat-success {
color: var(--vscode-testing-iconPassed);
margin-left: 8px;
}
.dependency-list.compact {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.dependency-list.compact h4 {
font-size: 12px;
font-weight: 600;
margin: 0 0 8px 0;
color: var(--vscode-descriptionForeground);
}
.dependency-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px;
background: var(--vscode-editor-background);
border: 1px solid var(--vscode-widget-border);
border-radius: 6px;
transition: all var(--transition-speed);
}
.dependency-item:hover {
border-color: var(--vscode-focusBorder);
transform: translateX(2px);
}
.dep-status {
font-size: 14px;
width: 20px;
text-align: center;
}
.dep-status.completed {
color: var(--vscode-testing-iconPassed);
}
.dep-status.in-progress {
color: var(--vscode-debugIcon-pauseForeground);
}
.dep-status.pending {
color: var(--vscode-foreground);
opacity: 0.6;
}
.dep-title {
flex: 1;
font-size: 12px;
font-weight: 500;
}
.link-button {
background: transparent;
border: none;
color: var(--vscode-textLink-foreground);
cursor: pointer;
padding: 4px;
font-size: 14px;
display: flex;
align-items: center;
opacity: 0.6;
transition: opacity var(--transition-speed);
}
.link-button:hover {
opacity: 1;
}
.add-button {
width: 100%;
background: transparent;
border: 2px dashed var(--vscode-widget-border);
color: var(--vscode-foreground);
padding: 10px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
opacity: 0.6;
transition: all var(--transition-speed);
}
.add-button:hover {
opacity: 1;
border-style: solid;
background: var(--vscode-button-secondaryBackground);
}
/* Activity Timeline */
.activity-section h3 {
font-size: 14px;
font-weight: 600;
margin: 0 0 12px 0;
display: flex;
align-items: center;
gap: 8px;
}
.activity-timeline.compact {
position: relative;
padding-left: 24px;
}
.activity-timeline.compact::before {
content: '';
position: absolute;
left: 7px;
top: 0;
bottom: 0;
width: 2px;
background: var(--vscode-widget-border);
}
.timeline-item {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
position: relative;
}
.timeline-icon {
position: absolute;
left: -24px;
width: 16px;
height: 16px;
background: var(--vscode-editor-background);
border: 2px solid var(--vscode-widget-border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
.timeline-content {
flex: 1;
}
.timeline-title {
font-weight: 500;
margin-bottom: 2px;
font-size: 12px;
}
.timeline-time {
font-size: 11px;
color: var(--vscode-descriptionForeground);
}
/* Empty State */
.empty-state {
text-align: center;
padding: 24px;
color: var(--vscode-descriptionForeground);
font-size: 12px;
}
.empty-state .codicon {
font-size: 32px;
opacity: 0.3;
display: block;
margin-bottom: 12px;
}
/* Responsive Design */
@media (max-width: 1200px) {
.content-layout {
flex-direction: column;
}
.sidebar {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.content-layout {
padding: 12px;
gap: 12px;
}
.card {
padding: 16px;
}
.task-title {
font-size: 24px;
}
.actions-grid {
grid-template-columns: 1fr;
}
.progress-overview {
flex-direction: column;
text-align: center;
}
.progress-details {
grid-template-columns: 1fr;
gap: 8px;
}
.editor-toolbar {
overflow-x: auto;
flex-wrap: nowrap;
}
.editor-container {
flex-direction: column;
}
.editor-pane,
.preview-pane {
width: 100% !important;
}
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card {
animation: fadeIn 0.3s ease-out;
}
/* Scrollbar Styling */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--vscode-scrollbarSlider-background);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--vscode-scrollbarSlider-hoverBackground);
}
/* Focus States */
button:focus-visible,
.tag-add:focus-visible,
.add-button:focus-visible {
outline: 2px solid var(--vscode-focusBorder);
outline-offset: 2px;
}
/* Loading State */
.loading {
opacity: 0.5;
pointer-events: none;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--vscode-foreground);
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
