sandtable 0.3.0

package/dashboard/css/dashboard.css

@@ -0,0 +1,731 @@
+/* Sandtable Dashboard Styles v0.3 */
+:root {
+  --bg: #f8f9fa;
+  --header-bg: #1a1a2e;
+  --brief-bg: linear-gradient(135deg, #16213e, #0f3460);
+  --card-bg: #ffffff;
+  --border: #e0e0e0;
+  --text: #333333;
+  --text-light: #666666;
+  --text-muted: #999999;
+  --accent: #4EC9B0;
+  --completed: #2e7d32;
+  --in-progress: #e65100;
+  --pending: #999999;
+  --blocked: #c62828;
+  /* v2 additions */
+  --secondary-tag: #7B61FF;
+  --source-link: #569CD6;
+  --past-tab: #95a5a6;
+  --current-tab: #4EC9B0;
+  --future-tab: #3498db;
+  --tab-bg: #ffffff;
+  /* v0.3 time-phase card colors */
+  --past-bg: #e8edf2;       /* 历史：灰蓝 */
+  --current-bg: #fff8e1;     /* 现阶段：暖黄 */
+  --future-bg: #f5f5f5;      /* 未来：浅灰 */
+  --past-border: #b0bec5;
+  --current-border: #ffcc02;
+  --future-border: #d0d0d0;
+  /* v0.3 event type colors */
+  --event-decision: #e53935;
+  --event-spec: #7B61FF;
+  --event-code: #569CD6;
+  --event-test: #4EC9B0;
+  --event-approval: #FF9800;
+  --event-ops: #795548;
+  --event-lesson: #E91E63;
+  /* Priority colors */
+  --priority-must: #e53935;
+  --priority-should: #FF9800;
+  --priority-can: #999;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header */
+#header {
+  background: var(--header-bg);
+  color: #fff;
+  padding: 10px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.header-left { display: flex; align-items: center; gap: 10px; }
+#header h1 { font-size: 18px; font-weight: 600; }
+.header-right { display: flex; align-items: center; gap: 12px; font-size: 13px; }
+.badge {
+  background: rgba(255,255,255,0.15);
+  padding: 2px 10px;
+  border-radius: 10px;
+  font-size: 11px;
+}
+.status-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+  display: inline-block;
+}
+
+/* Brief Bar */
+#brief-bar {
+  background: var(--brief-bg);
+  color: #e0e0e0;
+  padding: 12px 24px;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+}
+#brief-bar strong { color: var(--accent); font-size: 13px; display: block; margin-bottom: 4px; }
+#brief-text { font-size: 13px; line-height: 1.6; }
+
+/* Category Filter Tabs */
+#category-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 24px;
+  background: var(--tab-bg);
+  border-bottom: 1px solid var(--border);
+  flex-wrap: wrap;
+}
+.cat-tab {
+  padding: 5px 14px;
+  border: 1px solid var(--border);
+  background: var(--card-bg);
+  border-radius: 16px;
+  font-size: 12px;
+  cursor: pointer;
+  color: var(--text-light);
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+.cat-tab:hover { background: #e8f5e9; border-color: var(--accent); }
+.cat-tab.active {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+  font-weight: 600;
+}
+.tab-right {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+#element-summary { font-size: 12px; color: var(--text-muted); }
+
+/* Main Content: Dual View */
+#main-content {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+#doc-tree-panel {
+  width: 55%;
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+  padding: 20px;
+}
+#event-stream-panel {
+  width: 45%;
+  overflow-y: auto;
+  padding: 20px;
+  background: #fafafa;
+}
+
+/* Panel Header */
+.panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+.panel-header h2 { font-size: 16px; font-weight: 600; }
+.hint { font-size: 10px; color: #bbb; }
+
+/* Element Card (Timeline) — with time-phase colors */
+.timeline-tree { }
+.element-card {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  margin-bottom: 12px;
+  overflow: hidden;
+}
+.element-card.secondary-element {
+  border-left: 3px solid var(--secondary-tag);
+}
+/* Time-phase card backgrounds */
+.element-card[data-timegroup="past"] {
+  background: var(--past-bg);
+  border-color: var(--past-border);
+}
+.element-card[data-timegroup="current"] {
+  background: var(--current-bg);
+  border-color: var(--current-border);
+}
+.element-card[data-timegroup="future"] {
+  background: var(--future-bg);
+  border-color: var(--future-border);
+}
+
+.element-header {
+  padding: 10px 14px;
+  font-weight: 600;
+  font-size: 13px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.element-header.completed  { background: #e8f5e9; color: var(--completed); }
+.element-header.in_progress { background: #fff3e0; color: var(--in-progress); }
+.element-header.pending    { background: #f5f5f5; color: var(--pending); }
+.element-header.blocked    { background: #ffebee; color: var(--blocked); }
+.element-header.cancelled  { background: #f5f5f5; color: var(--text-muted); }
+.element-header.unknown    { background: #fafafa; color: var(--text-light); }
+
+.element-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  font-weight: 400;
+}
+.element-type-tag {
+  background: #eee;
+  padding: 1px 7px;
+  border-radius: 4px;
+  font-size: 10px;
+  color: var(--text-muted);
+}
+.source-badge {
+  font-size: 10px;
+  background: #e3f2fd;
+  padding: 1px 7px;
+  border-radius: 4px;
+  color: var(--source-link);
+  cursor: pointer;
+  text-decoration: none;
+}
+.source-badge:hover { background: var(--source-link); color: #fff; }
+.element-summary {
+  padding: 6px 14px;
+  font-size: 12px;
+  color: var(--text-light);
+  line-height: 1.5;
+}
+.element-tags { padding: 4px 14px 8px; }
+.tag {
+  display: inline-block;
+  background: #f0f0f0;
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-right: 4px;
+}
+.element-children {
+  border-top: 1px solid #f0f0f0;
+  padding: 4px 14px 8px;
+}
+.sub-element {
+  padding: 4px 0;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-light);
+}
+
+/* Waterfall */
+.waterfall {
+  border-left: 2px solid var(--accent);
+  padding-left: 16px;
+  margin-left: 8px;
+}
+.waterfall-event {
+  margin-bottom: 18px;
+  position: relative;
+}
+.waterfall-event::before {
+  content: '';
+  position: absolute;
+  left: -22px;
+  top: 6px;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+.waterfall-event.secondary::before { background: var(--secondary-tag); }
+.waterfall-date {
+  font-size: 11px;
+  color: var(--accent);
+  margin-bottom: 2px;
+  font-weight: 600;
+}
+.waterfall-marker {
+  display: none;
+}
+.waterfall-body {}
+.waterfall-title {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 3px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.kind-badge {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-weight: 400;
+}
+.kind-badge.primary { background: #e8f5e9; color: var(--completed); }
+.kind-badge.secondary { background: #ede7f6; color: var(--secondary-tag); }
+.waterfall-source {
+  font-size: 11px;
+  color: var(--source-link);
+  margin-bottom: 2px;
+}
+.waterfall-source code {
+  font-size: 10px;
+  background: #f5f5f5;
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+.waterfall-summary {
+  font-size: 12px;
+  color: var(--text-light);
+  line-height: 1.5;
+}
+.waterfall-related {
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+/* Waterfall — Event Stream additions */
+.waterfall-date-header {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
+  padding: 8px 0 4px;
+  margin-left: -16px;
+  padding-left: 16px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 12px;
+}
+.waterfall-date-header:first-child { margin-top: 0; }
+.event-icon { font-size: 14px; margin-right: 4px; }
+.event-time { font-size: 10px; color: var(--text-muted); font-weight: 400; }
+.subtype-tag {
+  font-size: 9px;
+  background: #f0f0f0;
+  padding: 0 5px;
+  border-radius: 3px;
+  color: var(--text-muted);
+  font-weight: 400;
+}
+.waterfall-refs { margin: 3px 0; display: flex; gap: 8px; flex-wrap: wrap; }
+.ref-link {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  text-decoration: none;
+}
+.doc-ref { background: #e3f2fd; color: var(--source-link); }
+.doc-ref:hover { background: var(--source-link); color: #fff; }
+.commit-ref { background: #f5f5f5; color: var(--text-muted); font-family: monospace; }
+.pr-ref { background: #e8f5e9; color: var(--completed); }
+.impact-badge {
+  font-size: 9px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  margin-right: 6px;
+}
+.impact-high { background: #ffebee; color: var(--blocked); font-weight: 600; }
+.impact-medium { background: #fff3e0; color: var(--in-progress); }
+.actor-badge {
+  font-size: 9px;
+  color: var(--text-muted);
+  margin-left: 4px;
+}
+.event-tags { margin-top: 3px; }
+
+/* Must-record event highlight */
+.waterfall-event.must-record {
+  background: #fffef5;
+  border-left-width: 4px !important;
+  padding-left: 4px;
+}
+
+/* Waterfall event highlight (ref jump) */
+.waterfall-event.highlighted {
+  animation: waterfall-flash 1.2s ease-in-out 2;
+}
+@keyframes waterfall-flash {
+  0%, 100% { background: transparent; }
+  50% { background: #fff9c4; }
+}
+
+/* Category section in timeline */
+.category-section { margin-bottom: 16px; }
+.category-header {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.category-header.primary-section {
+  background: #e8f5e9;
+  color: var(--completed);
+}
+.category-header.secondary-section {
+  background: #f5f5f5;
+  color: var(--text-muted);
+}
+.category-count { font-weight: 400; font-size: 11px; }
+
+/* Archived element */
+.element-header.archived {
+  background: #fafafa;
+  color: #999;
+  font-style: italic;
+}
+.element-header.archived::after {
+  content: ' (只读/已停产)';
+  font-size: 10px;
+  font-style: normal;
+  color: #bbb;
+}
+
+/* Time badges */
+.time-badge {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-weight: 500;
+}
+.time-past-badge { background: var(--past-bg); color: #607d8b; }
+.time-current-badge { background: var(--current-bg); color: #e65100; }
+.time-future-badge { background: var(--future-bg); color: #999; }
+
+/* Unknown category badge */
+.unknown-badge {
+  background: #fff3e0;
+  color: var(--in-progress);
+  font-size: 10px;
+  padding: 1px 7px;
+  border-radius: 4px;
+}
+
+/* Footer / Conventions */
+#footer {
+  background: #fafafa;
+  border-top: 1px solid var(--border);
+  padding: 10px 24px;
+  font-size: 12px;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+#conventions-bar { display: flex; gap: 12px; }
+.convention-tag {
+  color: var(--accent);
+  cursor: help;
+  font-weight: 500;
+}
+.convention-tag:hover { text-decoration: underline; }
+.convention-tag.term-tag { color: #CE9178; }
+.conventions-placeholder {
+  color: var(--text-muted);
+  font-style: italic;
+  border: 1px dashed var(--border);
+  padding: 2px 12px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.conventions-placeholder span {
+  color: var(--source-link);
+  cursor: help;
+  font-style: normal;
+}
+.conventions-placeholder span:hover { text-decoration: underline; }
+
+/* Loading / Error */
+.loading { color: var(--text-muted); font-style: italic; padding: 20px; }
+.error { color: var(--blocked); padding: 20px; }
+
+/* ---- v0.3 Event Stream Styles ---- */
+.event-stream {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.event-item {
+  padding: 10px 14px;
+  border-left: 3px solid var(--border);
+  margin-bottom: 6px;
+  border-radius: 4px;
+  background: #fff;
+  position: relative;
+  font-size: 12px;
+}
+.event-item.must-record {
+  border-left-width: 5px;
+  background: #fffef5;
+}
+/* Event type colors */
+.event-item.type-对齐与拍板 { border-left-color: var(--event-decision); }
+.event-item.type-规格演进 { border-left-color: var(--event-spec); }
+.event-item.type-代码变更 { border-left-color: var(--event-code); }
+.event-item.type-测试与质量 { border-left-color: var(--event-test); }
+.event-item.type-审批与交接 { border-left-color: var(--event-approval); }
+.event-item.type-运维与基建 { border-left-color: var(--event-ops); }
+.event-item.type-教训沉淀 { border-left-color: var(--event-lesson); }
+/* Time-phase backgrounds for events */
+.event-item.time-past { background: var(--past-bg); }
+.event-item.time-current { background: var(--current-bg); }
+.event-item.time-future { background: var(--future-bg); }
+
+.event-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 8px;
+}
+.event-item-title {
+  font-weight: 600;
+  flex: 1;
+  line-height: 1.4;
+}
+.event-item-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  font-size: 10px;
+}
+.event-type-badge {
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #fff;
+}
+.badge-decision { background: var(--event-decision); }
+.badge-spec { background: var(--event-spec); }
+.badge-code { background: var(--event-code); }
+.badge-test { background: var(--event-test); }
+.badge-approval { background: var(--event-approval); }
+.badge-ops { background: var(--event-ops); }
+.badge-lesson { background: var(--event-lesson); }
+
+.event-priority-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+.priority-must { background: var(--priority-must); }
+.priority-should { background: var(--priority-should); }
+.priority-can { background: var(--priority-can); }
+
+.event-item-body {
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-size: 10px;
+  color: var(--text-muted);
+}
+.event-time-text {
+  font-family: monospace;
+  color: var(--text-light);
+}
+.event-ref-link {
+  color: var(--source-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.event-ref-link:hover { text-decoration: underline; }
+.event-tag {
+  display: inline-block;
+  background: #f0f0f0;
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 9px;
+}
+.event-actor {
+  color: var(--text-muted);
+  font-style: italic;
+}
+.event-item.highlighted {
+  animation: event-flash 1.2s ease-in-out 2;
+  background: #fff9c4 !important;
+}
+@keyframes event-flash {
+  0%, 100% { background: #fff9c4; }
+  50% { background: #ffe082; }
+}
+.event-impact-high { color: var(--blocked); font-weight: 600; }
+.event-impact-medium { color: var(--in-progress); }
+.event-impact-low { color: var(--text-muted); }
+
+/* Date group header */
+.event-date-group {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text);
+  padding: 12px 0 6px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid var(--border);
+}
+.event-date-group:first-child { margin-top: 0; padding-top: 0; }
+
+/* ---- Floating Panel (Markdown Preview) ---- */
+.floating-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 480px;
+  max-width: 90vw;
+  height: 100vh;
+  background: #fff;
+  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.25s ease;
+}
+.floating-panel.hidden {
+  transform: translateX(100%);
+}
+.floating-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--header-bg);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+}
+.floating-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px 20px;
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--text);
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
+}
+.floating-body h1, .floating-body h2, .floating-body h3 {
+  margin: 12px 0 6px;
+  color: var(--text);
+}
+.floating-body h1 { font-size: 18px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
+.floating-body h2 { font-size: 16px; }
+.floating-body h3 { font-size: 14px; }
+.floating-body code {
+  background: #f5f5f5;
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 12px;
+}
+.floating-body pre {
+  background: #f5f5f5;
+  padding: 10px;
+  border-radius: 6px;
+  overflow-x: auto;
+  font-size: 12px;
+  margin: 8px 0;
+}
+.floating-body blockquote {
+  border-left: 3px solid var(--accent);
+  padding-left: 12px;
+  color: var(--text-light);
+  margin: 8px 0;
+}
+.floating-body table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 12px;
+  margin: 8px 0;
+}
+.floating-body th, .floating-body td {
+  border: 1px solid var(--border);
+  padding: 4px 8px;
+  text-align: left;
+}
+.floating-body th { background: #f5f5f5; }
+.floating-body a { color: var(--source-link); }
+
+.close-btn {
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 22px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+.close-btn:hover { opacity: 0.7; }
+
+/* Overlay behind floating panel */
+#floating-overlay {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100vw; height: 100vh;
+  background: rgba(0,0,0,0.2);
+  z-index: 999;
+}
+#floating-overlay.hidden { display: none; }
+
+/* ---- Milestone hover tooltip ---- */
+.milestone-tooltip {
+  display: none;
+  position: absolute;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 12px;
+  font-size: 11px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  z-index: 100;
+  max-width: 280px;
+  line-height: 1.5;
+}
+.element-header:hover .milestone-tooltip {
+  display: block;
+}
+
+/* ---- Empty State ---- */
+.empty-state {
+  text-align: center;
+  padding: 48px 20px;
+  color: var(--text-muted);
+}
+.empty-state h3 { font-size: 18px; margin-bottom: 8px; }
+.empty-state p { font-size: 13px; max-width: 400px; margin: 0 auto; line-height: 1.6; }