@matt82198/aesop 0.1.0-beta.3 → 0.1.0-beta.5

package/ui/web/src/styles/work.css

@@ -0,0 +1,572 @@
+/**
+ * Work view styling — tracker board, cards, form, backlog panel.
+ * Uses design tokens from theme.css; supports light/dark themes.
+ */
+
+/* ---- Work view layout ---- */
+.work-view {
+  padding: var(--space-4);
+}
+
+.work-container {
+  display: grid;
+  grid-template-columns: 1fr 300px;
+  gap: var(--space-6);
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+}
+
+@media (max-width: 1200px) {
+  .work-container {
+    grid-template-columns: 1fr;
+  }
+
+  .work-sidebar {
+    order: 2;
+  }
+}
+
+/* ---- Board header ---- */
+.board-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-4);
+}
+
+.board-header h2 {
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+}
+
+.add-item-button {
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-accent);
+  color: var(--color-text-inverse);
+  border: none;
+  border-radius: var(--radius-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: background-color var(--transition-normal);
+}
+
+.add-item-button:hover {
+  background: var(--color-accent-emphasis);
+}
+
+.add-item-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---- Form container ---- */
+.form-container {
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  margin-bottom: var(--space-4);
+}
+
+/* ---- Tracker form ---- */
+.tracker-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.form-group label {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+  color: var(--color-text);
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+  padding: var(--space-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text);
+  font-size: var(--font-size-sm);
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+  border-color: var(--color-accent);
+}
+
+.form-group input:disabled,
+.form-group select:disabled,
+.form-group textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.tracker-form button {
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-accent);
+  color: var(--color-text-inverse);
+  border: none;
+  border-radius: var(--radius-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: background-color var(--transition-normal);
+}
+
+.tracker-form button:hover:not(:disabled) {
+  background: var(--color-accent-emphasis);
+}
+
+.tracker-form button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.form-error {
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-status-error-bg);
+  color: var(--color-status-error);
+  border-radius: var(--radius-sm);
+  border-left: 3px solid var(--color-status-error);
+}
+
+.form-success {
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-status-ok-bg);
+  color: var(--color-status-ok);
+  border-radius: var(--radius-sm);
+  border-left: 3px solid var(--color-status-ok);
+}
+
+/* ---- Tracker board ---- */
+.tracker-board {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+
+.lanes-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-3);
+}
+
+@media (max-width: 1600px) {
+  .lanes-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .lanes-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ---- Tracker lane ---- */
+.tracker-lane {
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-3);
+  min-height: 300px;
+}
+
+.lane-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-3);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-bold);
+}
+
+.lane-count {
+  display: inline-block;
+  padding: var(--space-1) var(--space-2);
+  background: var(--color-accent);
+  color: var(--color-text-inverse);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+}
+
+.lane-badge {
+  display: inline-block;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  white-space: nowrap;
+}
+
+.lane-badge--active {
+  background: var(--color-accent);
+  color: var(--color-text-inverse);
+}
+
+.lane-badge--empty {
+  background: var(--color-bg-inset);
+  color: var(--color-text-muted);
+}
+
+.lane-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.lane-empty {
+  text-align: center;
+  color: var(--color-text-muted);
+  padding: var(--space-4);
+  font-style: italic;
+}
+
+/* ---- Tracker card ---- */
+.tracker-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  padding: var(--space-3);
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow var(--transition-normal);
+}
+
+.tracker-card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.tracker-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+
+.tracker-card-title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  flex: 1;
+}
+
+.priority-chip {
+  display: inline-block;
+  padding: var(--space-1) var(--space-2);
+  color: var(--color-text-inverse);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.tracker-card-title {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-tight);
+  margin: 0;
+}
+
+.expand-button {
+  background: transparent;
+  border: none;
+  padding: var(--space-1);
+  cursor: pointer;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+}
+
+.expand-button:hover {
+  color: var(--color-text);
+}
+
+/* ---- Tracker card tags ---- */
+.tracker-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  margin-bottom: var(--space-2);
+}
+
+.tag {
+  display: inline-block;
+  padding: var(--space-1) var(--space-2);
+  background: var(--color-bg-inset);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+
+/* ---- Tracker card details ---- */
+.tracker-card-details {
+  background: var(--color-bg-inset);
+  border-top: 1px solid var(--color-border);
+  margin: var(--space-2) 0;
+  padding: var(--space-2) 0;
+}
+
+.detail-section {
+  padding: var(--space-2) 0;
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.detail-section:last-child {
+  border-bottom: none;
+}
+
+.detail-label {
+  display: block;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  margin-bottom: var(--space-1);
+}
+
+.detail-section p,
+.detail-section time,
+.detail-section a,
+.detail-section code {
+  font-size: var(--font-size-sm);
+  color: var(--color-text);
+}
+
+.detail-section a {
+  word-break: break-all;
+}
+
+.pr-link-inert {
+  display: block;
+  padding: var(--space-1) var(--space-2);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  color: var(--color-status-error);
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+/* ---- Tracker card actions ---- */
+.tracker-card-actions {
+  display: flex;
+  gap: var(--space-1);
+  margin-top: var(--space-2);
+}
+
+.tracker-card-actions button {
+  flex: 1;
+  padding: var(--space-1) var(--space-2);
+  background: var(--color-accent);
+  color: var(--color-text-inverse);
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: background-color var(--transition-normal);
+}
+
+.tracker-card-actions button:hover:not(:disabled) {
+  background: var(--color-accent-emphasis);
+}
+
+.tracker-card-actions button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---- Card error message ---- */
+.card-error {
+  padding: var(--space-2);
+  background: var(--color-status-error-bg);
+  color: var(--color-status-error);
+  border-radius: var(--radius-sm);
+  border-left: 3px solid var(--color-status-error);
+  margin-top: var(--space-2);
+  font-size: var(--font-size-sm);
+}
+
+/* ---- Archived summary ---- */
+.archived-summary {
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-3);
+  margin-top: var(--space-4);
+}
+
+.archived-summary h3 {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--space-2);
+}
+
+.archived-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.archived-item {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+  padding: var(--space-2);
+  background: var(--color-surface);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-sm);
+}
+
+.archived-title {
+  flex: 1;
+  color: var(--color-text-muted);
+  text-decoration: line-through;
+}
+
+.archived-priority {
+  padding: var(--space-1) var(--space-2);
+  background: var(--color-bg-inset);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-text-muted);
+}
+
+/* ---- Backlog panel ---- */
+.backlog-panel {
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-3);
+  position: sticky;
+  top: calc(var(--header-height) + var(--space-3));
+}
+
+.backlog-panel h3 {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--space-3);
+}
+
+.empty-state {
+  color: var(--color-text-muted);
+  text-align: center;
+  padding: var(--space-3);
+  font-style: italic;
+}
+
+.backlog-tier {
+  margin-bottom: var(--space-3);
+}
+
+.tier-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-2);
+}
+
+.tier-header h4 {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  margin: 0;
+}
+
+.tier-counts {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+
+.tier-progress-bar {
+  display: flex;
+  height: 6px;
+  background: var(--color-bg-inset);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  margin-bottom: var(--space-2);
+}
+
+.progress-segment {
+  flex: 0 0 auto;
+  height: 100%;
+  transition: width var(--transition-normal);
+}
+
+.progress-segment.done {
+  background: var(--color-status-ok);
+}
+
+.progress-segment.inflight {
+  background: var(--color-status-warn);
+}
+
+.progress-segment.todo {
+  background: var(--color-status-neutral);
+}
+
+.tier-items-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  max-height: 250px;
+  overflow-y: auto;
+  position: relative;
+}
+
+.tier-items-list::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 20px;
+  background: linear-gradient(to bottom, transparent, var(--color-bg-subtle));
+  pointer-events: none;
+}
+
+.backlog-item {
+  display: flex;
+  gap: var(--space-2);
+  align-items: flex-start;
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--font-size-xs);
+  background: var(--color-surface);
+  border-radius: var(--radius-sm);
+  word-break: break-word;
+}
+
+.item-status {
+  font-size: var(--font-size-sm);
+  flex-shrink: 0;
+}
+
+.item-tag {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-accent);
+  flex-shrink: 0;
+  min-width: fit-content;
+}
+
+.item-title {
+  flex: 1;
+  color: var(--color-text);
+}