@zettelgeist/cli 0.1.0

package/dist/viewer-bundle/board.css

@@ -0,0 +1,370 @@
+.zg-board {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(220px, 1fr);
+  gap: 1rem;
+  overflow-x: auto;
+  padding-bottom: 1rem;
+}
+
+.zg-column {
+  background: var(--pico-card-background-color, #f5f5f5);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-height: 120px;
+  min-width: 0;
+}
+
+.zg-column-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  border-bottom: 1px solid var(--pico-muted-border-color, #ddd);
+  padding-bottom: 0.5rem;
+}
+
+.zg-column-header h3 {
+  font-size: 0.8rem;
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1;
+}
+
+button.zg-column-add {
+  flex: 0 0 auto;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  margin: 0;
+  border: 1px dashed var(--zg-btn-border, #d0d7de);
+  border-radius: 0.25rem;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1.1rem;
+  line-height: 1;
+  color: var(--zg-btn-fg, #57606a);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+button.zg-column-add:hover,
+button.zg-column-add:focus-visible {
+  border-color: var(--zg-btn-fg-hover, #1095c1);
+  color: var(--zg-btn-fg-hover, #1095c1);
+  border-style: solid;
+}
+
+.zg-column-count {
+  font-size: 0.75rem;
+  background: var(--pico-muted-color, #999);
+  color: white;
+  padding: 0.125rem 0.5rem;
+  border-radius: 1rem;
+  min-width: 1.5rem;
+  text-align: center;
+}
+
+.zg-column-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.zg-card {
+  --zg-card-accent: var(--pico-muted-border-color, #ddd);
+  background: var(--pico-background-color, white);
+  border: 1px solid var(--pico-muted-border-color, #ddd);
+  border-left: 3px solid var(--zg-card-accent);
+  border-radius: 0.375rem;
+  padding: 0.6rem 0.75rem;
+  cursor: pointer;
+  transition: box-shadow 0.15s, transform 0.15s;
+}
+
+.zg-card:hover {
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  transform: translateY(-1px);
+}
+
+.zg-card[data-status='draft']       { --zg-card-accent: #9ca3af; }
+.zg-card[data-status='planned']     { --zg-card-accent: #60a5fa; }
+.zg-card[data-status='in-progress'] { --zg-card-accent: #f59e0b; }
+.zg-card[data-status='in-review']   { --zg-card-accent: #8b5cf6; }
+.zg-card[data-status='done']        { --zg-card-accent: #10b981; }
+.zg-card[data-status='blocked']     { --zg-card-accent: var(--zg-color-blocked, #c0392b); }
+.zg-card[data-status='cancelled']   { --zg-card-accent: var(--zg-color-cancelled, #7f8c8d); }
+
+.zg-card-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.25rem;
+  margin-bottom: 0.35rem;
+}
+
+.zg-card-name {
+  font-size: 0.9rem;
+  font-weight: 600;
+  margin: 0;
+  word-break: break-word;
+  flex: 1;
+  min-width: 0;
+}
+
+button.zg-card-edit,
+button.zg-card-delete {
+  flex-shrink: 0;
+  width: auto;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 0.9rem;
+  line-height: 1;
+  padding: 0.1rem 0.3rem;
+  margin: 0;
+  color: var(--zg-btn-fg, #57606a);
+  border-radius: 0.2rem;
+  transition: color 0.15s, background 0.15s;
+}
+button.zg-card-edit:hover,
+button.zg-card-edit:focus-visible {
+  color: var(--zg-btn-fg-hover, #1095c1);
+  background: transparent;
+}
+button.zg-card-delete:hover,
+button.zg-card-delete:focus-visible {
+  color: var(--zg-color-blocked, #c0392b);
+  background: transparent;
+}
+
+.zg-card-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-top: 0.4rem;
+}
+
+.zg-badge {
+  font-size: 0.65rem;
+  padding: 0.1rem 0.4rem;
+  border-radius: 0.25rem;
+  background: var(--pico-muted-border-color, #e5e7eb);
+  color: var(--pico-color, #444);
+  text-decoration: none;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.zg-badge-pr {
+  background: rgba(16, 185, 129, 0.15);
+  color: #047857;
+}
+.zg-badge-pr:hover {
+  background: rgba(16, 185, 129, 0.25);
+  text-decoration: underline;
+}
+.zg-badge-branch {
+  background: rgba(96, 165, 250, 0.18);
+  color: #1d4ed8;
+  font-family: var(--pico-font-family-monospace, ui-monospace, monospace);
+}
+
+.zg-card-meta {
+  font-size: 0.75rem;
+  color: var(--pico-muted-color, #666);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.zg-card-progress {
+  flex: 1;
+  height: 4px;
+  background: var(--pico-muted-border-color, #e5e7eb);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.zg-card-progress-bar {
+  height: 100%;
+  background: var(--zg-card-accent);
+  transition: width 0.2s ease;
+}
+
+.zg-card-blocked {
+  display: block;
+  font-size: 0.7rem;
+  color: var(--zg-color-blocked, #c0392b);
+  margin-top: 0.25rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zg-error {
+  color: var(--zg-color-blocked, #c0392b);
+  padding: 1rem;
+}
+
+@media (max-width: 768px) {
+  .zg-board {
+    grid-auto-flow: row;
+    grid-auto-columns: auto;
+    grid-template-columns: 1fr;
+    overflow-x: visible;
+  }
+}
+
+.zg-column-drop-target {
+  outline: 3px dashed var(--pico-primary, #1095c1);
+  outline-offset: -3px;
+}
+
+.zg-card[draggable='true'] {
+  cursor: grab;
+}
+
+.zg-card[draggable='true']:active {
+  cursor: grabbing;
+}
+
+.zg-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.zg-modal {
+  background: var(--pico-background-color, white);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  max-width: 500px;
+  width: 90%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.zg-modal-wide {
+  max-width: 600px;
+}
+
+.zg-edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.zg-edit-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.zg-edit-label {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--pico-muted-color, #555);
+}
+
+.zg-edit-input {
+  width: 100%;
+  padding: 0.45rem 0.55rem;
+  border: 1px solid var(--pico-muted-border-color, #ddd);
+  border-radius: 0.375rem;
+  font: inherit;
+  font-size: 0.9rem;
+  background: var(--pico-background-color, white);
+  color: inherit;
+}
+.zg-edit-input:focus {
+  outline: 2px solid var(--pico-primary, #1095c1);
+  outline-offset: -1px;
+}
+
+.zg-modal h3 {
+  margin: 0 0 0.5rem 0;
+}
+
+.zg-modal-label {
+  display: block;
+  margin: 1rem 0 0.5rem 0;
+}
+
+.zg-modal-textarea {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--pico-muted-border-color, #ddd);
+  border-radius: 0.375rem;
+  font-family: inherit;
+  font-size: 0.9rem;
+  resize: vertical;
+}
+
+input.zg-modal-input {
+  width: 100%;
+  padding: 0.5rem 0.6rem;
+  margin: 0.5rem 0 0;
+  font-size: 0.95rem;
+  font-family: inherit;
+  border: 1px solid var(--pico-muted-border-color, #ddd);
+  border-radius: 0.375rem;
+  background: var(--pico-background-color, #fff);
+  color: inherit;
+  box-sizing: border-box;
+}
+input.zg-modal-input:focus {
+  outline: 2px solid var(--pico-primary, #1095c1);
+  outline-offset: -1px;
+}
+
+button.zg-modal-destructive {
+  background: var(--zg-color-blocked, #c0392b);
+}
+
+.zg-modal-error {
+  color: var(--zg-color-blocked, #c0392b);
+  font-size: 0.875rem;
+  margin: 0.5rem 0 0 0;
+}
+
+.zg-modal-buttons {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+  margin-top: 1rem;
+}
+
+.zg-modal-cancel,
+.zg-modal-confirm {
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+.zg-modal-cancel {
+  background: var(--pico-muted-color, #999);
+  color: white;
+  border: none;
+}
+
+.zg-modal-confirm {
+  background: var(--pico-primary, #1095c1);
+  color: white;
+  border: none;
+}