@matt82198/aesop 0.1.0-beta.5 → 0.1.0

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

@@ -1,572 +0,0 @@
-/**
- * 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);
-}