@cliangdev/flux-plugin 0.2.0 → 0.3.0

package/src/dashboard/public/styles.css

@@ -0,0 +1,807 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f5f5f5;
+  --bg-tertiary: #e8e8e8;
+  --text-primary: #1a1a1a;
+  --text-secondary: #666666;
+  --border-color: #ddd;
+  --accent-color: #0066cc;
+  --link-color: #0066cc;
+  --success-color: #28a745;
+  --warning-color: #e69500;
+  --danger-color: #dc3545;
+  --sidebar-width: 280px;
+  --header-height: 48px;
+  --code-bg: #f6f8fa;
+  --selected-bg: #0066cc;
+  --hover-bg: #e8e8e8;
+}
+
+/* VSCode-inspired dark theme */
+[data-theme="dark"] {
+  --bg-primary: #1e1e1e;
+  --bg-secondary: #252526;
+  --bg-tertiary: #2d2d2d;
+  --text-primary: #d4d4d4;
+  --text-secondary: #9d9d9d;
+  --border-color: #3c3c3c;
+  --accent-color: #6cb6ff;
+  --link-color: #58a6ff;
+  --success-color: #89d185;
+  --warning-color: #cca700;
+  --danger-color: #f14c4c;
+  --code-bg: #1e1e1e;
+  --selected-bg: #094771;
+  --hover-bg: #2a2d2e;
+}
+
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--text-primary);
+  background: var(--bg-primary);
+}
+
+/* Header */
+#header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--header-height);
+  background: var(--bg-primary);
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  z-index: 100;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.logo {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.header-center {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+#search {
+  padding: 6px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  width: 200px;
+}
+
+#status-filter {
+  padding: 6px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+#theme-toggle {
+  background: none;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+#theme-toggle:hover {
+  background: var(--bg-secondary);
+}
+
+#connection-status {
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+#connection-status.connected {
+  color: var(--success-color);
+}
+
+#connection-status.reconnecting {
+  color: var(--warning-color);
+}
+
+#connection-status.disconnected {
+  color: var(--danger-color);
+}
+
+/* Main Layout */
+#main {
+  display: flex;
+  margin-top: var(--header-height);
+  height: calc(100vh - var(--header-height));
+}
+
+/* Sidebar */
+#sidebar {
+  width: var(--sidebar-width);
+  min-width: 200px;
+  max-width: 500px;
+  border-right: 1px solid var(--border-color);
+  overflow-y: auto;
+  background: var(--bg-secondary);
+  position: relative;
+  flex-shrink: 0;
+}
+
+#sidebar-resize {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 4px;
+  height: 100%;
+  cursor: col-resize;
+  background: transparent;
+  z-index: 10;
+}
+
+#sidebar-resize:hover,
+#sidebar-resize.dragging {
+  background: var(--accent-color);
+}
+
+#sidebar section {
+  padding: 12px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+#sidebar h3 {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  margin-bottom: 8px;
+}
+
+/* Tags */
+#tags-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.tag-pill {
+  padding: 4px 8px;
+  background: var(--bg-tertiary);
+  border-radius: 12px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.tag-pill:hover {
+  background: var(--border-color);
+}
+
+.tag-pill.active {
+  background: var(--selected-bg);
+  color: #ffffff;
+}
+
+.tag-count {
+  opacity: 0.7;
+  margin-left: 4px;
+}
+
+/* Tree */
+#tree {
+  font-size: 13px;
+}
+
+.tree-node {
+  cursor: pointer;
+  user-select: none;
+}
+
+.tree-node-content {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px;
+  gap: 6px;
+  border-radius: 4px;
+}
+
+.tree-node-content:hover {
+  background: var(--hover-bg);
+}
+
+.tree-node-content.selected {
+  background: var(--selected-bg);
+  color: #ffffff;
+}
+
+.tree-expand {
+  width: 16px;
+  text-align: center;
+  font-size: 10px;
+}
+
+.tree-status {
+  font-size: 10px;
+}
+
+.tree-status.pending {
+  color: var(--text-secondary);
+}
+.tree-status.in-progress {
+  color: var(--warning-color);
+}
+.tree-status.completed {
+  color: var(--success-color);
+}
+
+.tree-ref {
+  font-weight: 500;
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+.tree-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tree-children {
+  margin-left: 16px;
+}
+
+.tree-children.collapsed {
+  display: none;
+}
+
+/* Content Panel */
+#content-panel {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+#content-header {
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+#content-header:empty {
+  display: none;
+}
+
+#content-header h1 {
+  font-size: 20px;
+  margin-bottom: 8px;
+}
+
+.content-meta {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.content-meta span {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Markdown Content */
+#content-body {
+  line-height: 1.6;
+}
+
+#content-body h1,
+#content-body h2,
+#content-body h3,
+#content-body h4 {
+  margin-top: 24px;
+  margin-bottom: 12px;
+}
+
+#content-body h1 {
+  font-size: 24px;
+}
+#content-body h2 {
+  font-size: 20px;
+}
+#content-body h3 {
+  font-size: 16px;
+}
+
+#content-body p {
+  margin-bottom: 12px;
+}
+
+#content-body ul,
+#content-body ol {
+  margin-bottom: 12px;
+  padding-left: 24px;
+}
+
+#content-body li {
+  margin-bottom: 4px;
+}
+
+#content-body code {
+  background: var(--bg-secondary);
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 13px;
+}
+
+#content-body pre {
+  background: var(--bg-secondary);
+  padding: 16px;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin-bottom: 12px;
+}
+
+#content-body pre code {
+  padding: 0;
+  background: none;
+}
+
+#content-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 12px;
+}
+
+#content-body th,
+#content-body td {
+  border: 1px solid var(--border-color);
+  padding: 8px 12px;
+  text-align: left;
+}
+
+#content-body th {
+  background: var(--bg-secondary);
+}
+
+#content-body blockquote {
+  border-left: 4px solid var(--accent-color);
+  padding-left: 16px;
+  margin-left: 0;
+  color: var(--text-secondary);
+}
+
+#content-body a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+#content-body a:hover {
+  text-decoration: underline;
+}
+
+/* Empty State */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  color: var(--text-secondary);
+  text-align: center;
+}
+
+.empty-state p:first-child {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+/* Acceptance Criteria */
+.criteria-list {
+  margin-top: 16px;
+}
+
+.criteria-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--bg-tertiary);
+}
+
+.criteria-checkbox {
+  margin-top: 2px;
+}
+
+.criteria-text {
+  flex: 1;
+}
+
+.criteria-met {
+  color: var(--success-color);
+}
+
+/* Progress Bar */
+.progress-bar {
+  height: 8px;
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-top: 8px;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--success-color);
+  transition: width 0.3s;
+}
+
+/* Dependencies */
+.dependencies {
+  margin-top: 16px;
+  padding: 12px;
+  background: var(--bg-secondary);
+  border-radius: 6px;
+}
+
+.dependencies h4 {
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.dependency-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.dependency-status {
+  font-size: 12px;
+}
+
+/* Form elements in dark mode */
+#search,
+#status-filter {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+/* VSCode Dark+ inspired syntax highlighting */
+[data-theme="dark"] .hljs {
+  background: var(--bg-secondary);
+  color: #d4d4d4;
+}
+
+[data-theme="dark"] .hljs-keyword,
+[data-theme="dark"] .hljs-selector-tag {
+  color: #569cd6;
+}
+
+[data-theme="dark"] .hljs-literal,
+[data-theme="dark"] .hljs-number {
+  color: #b5cea8;
+}
+
+[data-theme="dark"] .hljs-string,
+[data-theme="dark"] .hljs-doctag,
+[data-theme="dark"] .hljs-regexp {
+  color: #ce9178;
+}
+
+[data-theme="dark"] .hljs-title,
+[data-theme="dark"] .hljs-section,
+[data-theme="dark"] .hljs-selector-id {
+  color: #dcdcaa;
+}
+
+[data-theme="dark"] .hljs-name,
+[data-theme="dark"] .hljs-tag,
+[data-theme="dark"] .hljs-selector-class {
+  color: #4ec9b0;
+}
+
+[data-theme="dark"] .hljs-type,
+[data-theme="dark"] .hljs-built_in,
+[data-theme="dark"] .hljs-class {
+  color: #4ec9b0;
+}
+
+[data-theme="dark"] .hljs-attribute,
+[data-theme="dark"] .hljs-variable,
+[data-theme="dark"] .hljs-template-variable {
+  color: #9cdcfe;
+}
+
+[data-theme="dark"] .hljs-comment,
+[data-theme="dark"] .hljs-quote {
+  color: #6a9955;
+}
+
+[data-theme="dark"] .hljs-deletion {
+  color: #ce9178;
+  background: #5a2020;
+}
+
+[data-theme="dark"] .hljs-addition {
+  color: #b5cea8;
+  background: #203520;
+}
+
+[data-theme="dark"] .hljs-meta {
+  color: #c586c0;
+}
+
+[data-theme="dark"] .hljs-link {
+  color: #4fc1ff;
+}
+
+/* Dependency Graph Toggle Button */
+#dep-graph-toggle {
+  background: none;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 6px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+#dep-graph-toggle:hover {
+  background: var(--bg-secondary);
+}
+
+#dep-graph-icon {
+  font-size: 12px;
+  color: var(--accent-color);
+}
+
+/* Dependency Graph Overlay */
+#dep-graph-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#dep-graph-overlay.hidden {
+  display: none;
+}
+
+#dep-graph-container {
+  background: var(--bg-primary);
+  border-radius: 8px;
+  width: 90vw;
+  height: 85vh;
+  max-width: 1200px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+#dep-graph-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+#dep-graph-header h2 {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+
+#dep-graph-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+#dep-type-filter {
+  padding: 6px 12px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
+#dep-graph-close {
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: var(--text-secondary);
+  padding: 4px 8px;
+  line-height: 1;
+}
+
+#dep-graph-close:hover {
+  color: var(--text-primary);
+}
+
+#dep-graph-content {
+  flex: 1;
+  overflow: auto;
+  padding: 20px;
+}
+
+#dep-graph-svg {
+  display: block;
+  margin: 0 auto;
+}
+
+#dep-graph-legend {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding: 12px 20px;
+  border-top: 1px solid var(--border-color);
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.legend-box {
+  width: 14px;
+  height: 10px;
+  border-radius: 2px;
+}
+
+.legend-box.pending {
+  background: var(--text-secondary);
+}
+
+.legend-box.in-progress {
+  background: var(--warning-color);
+}
+
+.legend-box.completed {
+  background: var(--success-color);
+}
+
+.legend-arrow {
+  color: var(--text-secondary);
+}
+
+/* SVG Graph Styles */
+#dep-graph-svg .node {
+  cursor: pointer;
+}
+
+#dep-graph-svg .node-box {
+  stroke-width: 2px;
+  rx: 6;
+  ry: 6;
+}
+
+#dep-graph-svg .node-box.pending {
+  fill: var(--bg-secondary);
+  stroke: var(--text-secondary);
+}
+
+#dep-graph-svg .node-box.in-progress {
+  fill: color-mix(in srgb, var(--warning-color) 15%, var(--bg-secondary));
+  stroke: var(--warning-color);
+}
+
+#dep-graph-svg .node-box.completed {
+  fill: color-mix(in srgb, var(--success-color) 15%, var(--bg-secondary));
+  stroke: var(--success-color);
+}
+
+#dep-graph-svg .node:hover .node-box {
+  stroke-width: 3px;
+  filter: brightness(1.1);
+}
+
+#dep-graph-svg .node-ref {
+  font-size: 11px;
+  font-weight: 600;
+  fill: var(--text-primary);
+  pointer-events: none;
+  text-anchor: start;
+}
+
+#dep-graph-svg .node-title {
+  font-size: 10px;
+  fill: var(--text-primary);
+  pointer-events: none;
+  text-anchor: start;
+}
+
+#dep-graph-svg .node-status {
+  font-size: 9px;
+  font-weight: 500;
+  text-transform: capitalize;
+  pointer-events: none;
+  text-anchor: start;
+}
+
+#dep-graph-svg .node-status.pending {
+  fill: var(--text-secondary);
+}
+
+#dep-graph-svg .node-status.in-progress {
+  fill: var(--warning-color);
+}
+
+#dep-graph-svg .node-status.completed {
+  fill: var(--success-color);
+}
+
+#dep-graph-svg .edge {
+  stroke: var(--text-secondary);
+  stroke-width: 2px;
+  fill: none;
+}
+
+#dep-graph-svg .edge.circular {
+  stroke: var(--danger-color);
+  stroke-dasharray: 4, 2;
+}
+
+#dep-graph-svg .edge-dot {
+  fill: var(--text-secondary);
+}
+
+#dep-graph-svg .edge-dot.circular {
+  fill: var(--danger-color);
+}
+
+/* Empty state for no dependencies */
+.dep-graph-empty {
+  text-align: center;
+  color: var(--text-secondary);
+  padding: 60px;
+}
+
+.dep-graph-empty p:first-child {
+  font-size: 48px;
+  margin-bottom: 16px;
+}