style.css•10.7 kB
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--background-color: #1a1a2e;
--panel-color: #16213e;
--text-color: #f0f0f0;
--accent-color: #4cd137;
--danger-color: #e74c3c;
--border-radius: 8px;
--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--background-color);
color: var(--text-color);
line-height: 1.6;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 20px;
}
h1 {
font-size: 1.8rem;
font-weight: 600;
color: var(--primary-color);
}
.status-bar {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
font-weight: 500;
}
.status-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--accent-color);
box-shadow: 0 0 8px var(--accent-color);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
main {
display: grid;
grid-template-rows: auto 1fr;
grid-template-areas:
"dependency"
"bottom";
gap: 20px;
flex-grow: 1;
}
.task-panel,
.task-details {
background-color: var(--panel-color);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
display: flex;
flex-direction: column;
}
.dependency-view {
grid-area: dependency;
background-color: var(--panel-color);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
display: flex;
flex-direction: column;
}
.bottom-panels {
grid-area: bottom;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
overflow: hidden;
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background-color: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
h2 {
font-size: 1.2rem;
font-weight: 500;
}
select {
background-color: rgba(0, 0, 0, 0.3);
color: var(--text-color);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 5px 10px;
border-radius: 4px;
outline: none;
}
.task-list,
.dependency-graph,
#task-details-content {
padding: 15px;
flex-grow: 1;
overflow-y: auto;
}
.dependency-graph {
min-height: 300px;
}
.task-item {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.task-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background-color: transparent;
transition: background-color 0.3s;
}
.task-item.status-pending::before {
background-color: #f1c40f;
}
.task-item.status-in-progress::before {
background-color: var(--primary-color);
}
.task-item.status-completed::before {
background-color: var(--secondary-color);
}
.task-item:hover {
transform: translateY(-3px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.task-item.selected {
background-color: rgba(52, 152, 219, 0.15);
box-shadow: 0 0 0 2px var(--primary-color);
}
.task-item h3 {
font-size: 1.1rem;
margin-bottom: 5px;
}
.task-meta {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.7);
}
.task-status {
padding: 2px 8px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 500;
}
.status-pending {
background-color: rgba(241, 196, 15, 0.2);
color: #f1c40f;
}
.status-in-progress {
background-color: rgba(52, 152, 219, 0.2);
color: #3498db;
}
.status-completed {
background-color: rgba(46, 204, 113, 0.2);
color: #2ecc71;
}
.placeholder {
text-align: center;
color: rgba(255, 255, 255, 0.5);
padding: 50px 0;
}
.loading {
text-align: center;
padding: 20px;
color: rgba(255, 255, 255, 0.7);
animation: fadeInOut 1.5s infinite;
}
@keyframes fadeInOut {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
.task-details-header {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.task-details-header h3 {
font-size: 1.3rem;
margin-bottom: 5px;
}
.task-details-section {
margin-bottom: 20px;
}
.task-details-section h4 {
font-size: 1rem;
color: var(--primary-color);
margin-bottom: 10px;
}
.dependencies,
.related-files {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.dependency-tag,
.file-tag {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 4px;
padding: 5px 10px;
font-size: 0.8rem;
}
pre {
background-color: rgba(0, 0, 0, 0.3);
padding: 15px;
border-radius: var(--border-radius);
overflow-x: auto;
margin: 10px 0;
font-family: "Consolas", "Monaco", monospace;
font-size: 0.9rem;
}
footer {
margin-top: 20px;
text-align: center;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
padding: 10px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Progress indicator styles */
.progress-indicator {
margin-bottom: 20px;
padding: 15px;
background-color: var(--panel-color);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
.progress-bar-container {
display: flex;
height: 10px;
border-radius: 5px;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.3);
}
.progress-segment {
height: 100%;
transition: width 0.5s ease-in-out;
}
.progress-completed {
background-color: var(--secondary-color);
}
.progress-in-progress {
background-color: var(--primary-color);
}
.progress-pending {
background-color: #f1c40f; /* Consistent with status-pending */
}
.progress-labels {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
}
.progress-labels span {
padding: 2px 5px;
}
.label-completed {
color: var(--secondary-color);
}
.label-in-progress {
color: var(--primary-color);
}
.label-pending {
color: #f1c40f;
}
/* Dependency graph styles */
.dependency-graph svg {
display: block; /* Avoid extra space at bottom */
width: 100%;
height: 100%;
}
.nodes g.node-item circle {
transition: r 0.2s, stroke 0.2s;
/* Set base colors according to type */
}
.nodes g.type-current circle {
fill: var(--primary-color); /* Current selected task */
}
.nodes g.type-dependency circle {
fill: var(--danger-color); /* Prerequisite dependency tasks */
}
.nodes g.type-dependent circle {
fill: var(--secondary-color); /* Subsequent dependent tasks */
}
.nodes g.type-unknown circle {
fill: #7f8c8d; /* Unknown tasks */
}
/* Adjust node opacity or border based on status */
.nodes g.status-completed circle {
opacity: 0.6;
}
.nodes g.status-in-progress circle {
/* Can add special effects like stroke animation */
stroke: var(--accent-color);
stroke-width: 2px;
}
.nodes g.node-item:hover circle {
r: 14; /* Enlarge on hover */
stroke: #fff;
stroke-width: 2.5px;
}
.nodes g.node-item text {
fill: var(--text-color);
font-size: 10px;
pointer-events: none; /* Prevent text from interfering with clicks */
}
/* New: Highlighted node styles */
g.node-item.highlighted circle {
stroke: var(--accent-color) !important; /* Use important flag to ensure override */
stroke-width: 3px !important;
}
@media (max-width: 768px) {
main {
grid-template-rows: auto auto; /* Stack dependency and bottom panels */
grid-template-areas:
"dependency"
"bottom";
}
.bottom-panels {
grid-template-columns: 1fr; /* Stack task list and details */
grid-template-rows: auto auto; /* Or let them take natural height */
}
.task-panel,
.dependency-view,
.task-details {
/* grid-column: 1 / -1; No longer needed */
min-height: 300px; /* Ensure panels have some height */
}
}
/* Filter area styles */
.filters {
display: flex;
gap: 10px;
}
.filters input[type="text"],
.filters select {
background-color: rgba(0, 0, 0, 0.3);
color: var(--text-color);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 5px 10px;
border-radius: 4px;
outline: none;
font-size: 0.9rem;
}
.filters input[type="text"] {
flex-grow: 1; /* Let search box occupy more space */
min-width: 150px;
}
/* Conversation History Styles */
.conversation-history-section {
margin-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 15px;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.toggle-btn {
background-color: rgba(0, 0, 0, 0.3);
color: var(--text-color);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 3px 8px;
border-radius: 4px;
font-size: 0.8rem;
cursor: pointer;
transition: background-color 0.2s;
}
.toggle-btn:hover {
background-color: rgba(52, 152, 219, 0.2);
}
.toggle-btn.collapsed:after {
content: "▼";
margin-left: 5px;
}
.toggle-btn:not(.collapsed):after {
content: "▲";
margin-left: 5px;
}
.section-content.collapsed {
display: none;
}
.conversation-content {
max-height: 300px;
overflow-y: auto;
padding: 10px;
background-color: rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
}
.message {
margin-bottom: 12px;
padding: 10px;
border-radius: 6px;
position: relative;
max-width: 100%;
}
.user-message {
background-color: rgba(52, 152, 219, 0.15);
border-left: 3px solid var(--primary-color);
margin-right: 20px;
}
.assistant-message {
background-color: rgba(46, 204, 113, 0.15);
border-left: 3px solid var(--secondary-color);
margin-left: 20px;
}
.message-header {
display: flex;
align-items: center;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 5px;
flex-wrap: wrap;
}
.message-role {
font-weight: 600;
margin-right: 8px;
}
.message-time {
margin-right: 8px;
font-style: italic;
opacity: 0.8;
}
.tool-name {
background-color: rgba(255, 255, 255, 0.1);
padding: 2px 6px;
border-radius: 3px;
font-size: 0.7rem;
font-family: monospace;
}
.message-content {
white-space: pre-wrap;
word-break: break-word;
font-size: 0.9rem;
}
/* Media queries for responsiveness */
@media (max-width: 768px) {
.message {
margin-left: 0;
margin-right: 0;
}
.conversation-content {
max-height: 250px;
}
}