claude-code-workflow 6.0.4 → 6.1.0

package/ccw/src/templates/dashboard-css/03-tasks.css

@@ -0,0 +1,512 @@
+/* ===================================
+   Tasks Tab Content
+   =================================== */
+
+.tasks-tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Task Toolbar - Combined Stats & Actions */
+.task-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  background: hsl(var(--muted) / 0.2);
+  border: 1px solid hsl(var(--border) / 0.5);
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.toolbar-divider {
+  width: 1px;
+  height: 1.5rem;
+  background: hsl(var(--border));
+  flex-shrink: 0;
+}
+
+.task-stats-bar {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.task-stat {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 9999px;
+  font-size: 0.8rem;
+  font-weight: 500;
+}
+
+.task-stat.completed {
+  border-color: hsl(142 76% 36% / 0.4);
+  background: hsl(142 76% 36% / 0.1);
+  color: hsl(142 76% 30%);
+}
+
+.task-stat.in-progress {
+  border-color: hsl(38 92% 50% / 0.4);
+  background: hsl(38 92% 50% / 0.1);
+  color: hsl(38 92% 40%);
+}
+
+.task-stat.pending {
+  border-color: hsl(var(--border));
+  background: hsl(var(--muted) / 0.3);
+  color: hsl(var(--muted-foreground));
+}
+
+/* Responsive: Stack toolbar on smaller screens */
+@media (max-width: 768px) {
+  .task-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+
+  .toolbar-divider {
+    width: 100%;
+    height: 1px;
+  }
+
+  .task-stats-bar {
+    justify-content: center;
+  }
+
+  .task-bulk-actions {
+    justify-content: center;
+  }
+}
+
+.tasks-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Task Item */
+.detail-task-item {
+  display: flex;
+  flex-direction: column;
+  padding: 0.875rem 1rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  border-left: 3px solid hsl(var(--muted-foreground));
+  transition: all 0.15s ease;
+}
+
+.detail-task-item:hover {
+  background: hsl(var(--hover));
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
+}
+
+.detail-task-item.completed {
+  border-left-color: hsl(var(--success));
+}
+
+.detail-task-item.in_progress {
+  border-left-color: hsl(var(--warning));
+}
+
+.detail-task-item.pending {
+  border-left-color: hsl(var(--muted-foreground));
+}
+
+/* Status-based background colors for task cards */
+.detail-task-item.status-completed {
+  background: hsl(var(--success) / 0.08);
+}
+
+.detail-task-item.status-completed:hover {
+  background: hsl(var(--success) / 0.12);
+}
+
+.detail-task-item.status-in_progress {
+  background: hsl(var(--warning) / 0.08);
+}
+
+.detail-task-item.status-in_progress:hover {
+  background: hsl(var(--warning) / 0.12);
+}
+
+.detail-task-item.status-pending {
+  background: hsl(var(--muted-foreground) / 0.05);
+}
+
+.detail-task-item.status-pending:hover {
+  background: hsl(var(--muted-foreground) / 0.08);
+}
+
+.task-item-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.task-status-icon {
+  font-size: 1rem;
+  width: 1.5rem;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.detail-task-item.completed .task-status-icon {
+  color: hsl(var(--success));
+}
+
+.detail-task-item.in_progress .task-status-icon {
+  color: hsl(var(--warning));
+}
+
+.task-id-badge {
+  padding: 0.125rem 0.5rem;
+  background: hsl(var(--muted));
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-family: var(--font-mono);
+  font-weight: 500;
+  color: hsl(var(--foreground));
+  flex-shrink: 0;
+}
+
+.task-item-header .task-title {
+  flex: 1;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+}
+
+.task-status-badge {
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.task-status-badge.completed {
+  background: hsl(var(--success-light));
+  color: hsl(var(--success));
+}
+
+.task-status-badge.in_progress {
+  background: hsl(var(--warning-light));
+  color: hsl(var(--warning));
+}
+
+.task-status-badge.pending {
+  background: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+}
+
+/* Full Task Item (expanded view) */
+.detail-task-item-full {
+  display: flex;
+  flex-direction: column;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.5rem;
+  border-left: 3px solid hsl(var(--muted-foreground));
+  overflow: hidden;
+}
+
+.detail-task-item-full.completed {
+  border-left-color: hsl(var(--success));
+}
+
+.detail-task-item-full.in_progress {
+  border-left-color: hsl(var(--warning));
+}
+
+.task-item-header-full {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: hsl(var(--card));
+  transition: background 0.15s;
+}
+
+.task-item-header-full:hover {
+  background: hsl(var(--hover));
+}
+
+/* Empty State */
+.tab-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 2rem;
+  text-align: center;
+}
+
+.empty-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.empty-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  margin-bottom: 0.5rem;
+}
+
+.empty-text {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Tab Error */
+.tab-error {
+  padding: 2rem;
+  text-align: center;
+  color: hsl(var(--destructive));
+  background: hsl(var(--destructive) / 0.1);
+  border-radius: 0.5rem;
+}
+
+/* Collapsible Sections */
+.collapsible-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: hsl(var(--muted));
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.collapsible-header:hover {
+  background: hsl(var(--hover));
+}
+
+.collapsible-icon {
+  transition: transform 0.2s;
+}
+
+.collapsible-header.open .collapsible-icon {
+  transform: rotate(90deg);
+}
+
+.collapsible-content {
+  padding: 1rem;
+  display: none;
+}
+
+.collapsible-content.open {
+  display: block;
+}
+
+/* ===================================
+   Task Drawer (Sidebar Panel)
+   =================================== */
+
+.drawer-overlay {
+  display: none;
+}
+
+.drawer-overlay.active {
+  display: block;
+}
+
+.drawer-task-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+}
+
+.drawer-tabs {
+  display: flex;
+  gap: 0.25rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid hsl(var(--border));
+  overflow-x: auto;
+}
+
+.drawer-tab {
+  padding: 0.625rem 1rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: 0.875rem;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.drawer-tab:hover {
+  color: hsl(var(--foreground));
+  background: hsl(var(--hover));
+}
+
+.drawer-tab.active {
+  color: hsl(var(--primary));
+  border-bottom-color: hsl(var(--primary));
+}
+
+.drawer-tab-content {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.drawer-panel {
+  display: none;
+}
+
+.drawer-panel.active {
+  display: block;
+}
+
+.drawer-section {
+  margin-bottom: 1.5rem;
+}
+
+.drawer-section-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  margin: 0 0 0.75rem 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.empty-section {
+  padding: 1rem;
+  text-align: center;
+  color: hsl(var(--muted-foreground));
+  font-size: 0.875rem;
+  background: hsl(var(--muted));
+  border-radius: 0.375rem;
+  margin-bottom: 1rem;
+}
+
+/* Steps List */
+.steps-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.step-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.375rem;
+}
+
+.step-number {
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  border-radius: 50%;
+  font-size: 0.75rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.step-content {
+  flex: 1;
+  font-size: 0.875rem;
+  color: hsl(var(--foreground));
+  line-height: 1.5;
+}
+
+.step-description {
+  font-size: 0.8rem;
+  color: hsl(var(--muted-foreground));
+  margin-top: 0.25rem;
+}
+
+/* Files List */
+.files-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: hsl(var(--muted));
+  border-radius: 0.25rem;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  color: hsl(var(--foreground));
+}
+
+.file-icon {
+  font-size: 0.875rem;
+  flex-shrink: 0;
+}
+
+/* Test Commands */
+.test-commands {
+  margin-top: 1rem;
+}
+
+.command-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: hsl(220 13% 18%);
+  color: hsl(142 71% 60%);
+  border-radius: 0.25rem;
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  margin-bottom: 0.375rem;
+}
+
+/* Flowchart Container */
+.flowchart-container {
+  min-height: 300px;
+  background: hsl(var(--muted));
+  border-radius: 0.5rem;
+  padding: 1rem;
+  overflow: auto;
+}
+
+.flowchart-container svg {
+  max-width: 100%;
+}
+
+/* JSON View */
+.json-view {
+  background: hsl(var(--muted));
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  font-size: 0.75rem;
+  line-height: 1.6;
+  color: hsl(var(--foreground));
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+