mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +08:00
3588 lines
68 KiB
CSS
3588 lines
68 KiB
CSS
/* ==========================================
|
|
ISSUE MANAGER STYLES
|
|
========================================== */
|
|
|
|
/* Issue Manager Container */
|
|
.issue-manager {
|
|
width: 100%;
|
|
}
|
|
|
|
.issue-manager.loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 300px;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* Issue Header */
|
|
.issue-header {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* View Toggle (Issues/Queue) */
|
|
.issue-view-toggle {
|
|
display: inline-flex;
|
|
background: hsl(var(--muted));
|
|
border-radius: 0.5rem;
|
|
padding: 0.25rem;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.issue-view-toggle button {
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: hsl(var(--muted-foreground));
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.issue-view-toggle button:hover {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.issue-view-toggle button.active {
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
box-shadow: 0 1px 2px hsl(var(--foreground) / 0.05);
|
|
}
|
|
|
|
/* Issues Grid */
|
|
.issues-section {
|
|
margin-bottom: 2rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.issues-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
|
gap: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.issues-empty-state,
|
|
.issue-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 200px;
|
|
text-align: center;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.issue-empty svg {
|
|
margin-bottom: 1rem;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Issue Filters */
|
|
.issue-filters {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.issue-filter-btn {
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: hsl(var(--muted-foreground));
|
|
background: hsl(var(--muted));
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.issue-filter-btn:hover {
|
|
background: hsl(var(--muted) / 0.8);
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.issue-filter-btn.active {
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
}
|
|
|
|
/* Issue Card */
|
|
.issue-card {
|
|
position: relative;
|
|
background: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.issue-card:hover {
|
|
border-color: hsl(var(--primary));
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08);
|
|
}
|
|
|
|
/* Archived Issue Card */
|
|
.issue-card.archived {
|
|
opacity: 0.9;
|
|
background: linear-gradient(135deg, hsl(var(--muted) / 0.2), hsl(var(--muted) / 0.4));
|
|
border-style: dashed;
|
|
border-color: hsl(var(--border) / 0.7);
|
|
}
|
|
|
|
.issue-card.archived:hover {
|
|
opacity: 1;
|
|
border-color: hsl(var(--primary) / 0.5);
|
|
}
|
|
|
|
.issue-card.archived .issue-title {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.issue-archived-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.125rem 0.5rem;
|
|
background: hsl(210 40% 96%);
|
|
color: hsl(215 16% 47%);
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
border-radius: 9999px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
.issue-archived-badge i {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Dark mode archived badge */
|
|
:root[data-theme="dark"] .issue-archived-badge,
|
|
.dark .issue-archived-badge {
|
|
background: hsl(217 33% 17%);
|
|
color: hsl(215 20% 65%);
|
|
}
|
|
|
|
/* Archived footer with timestamp */
|
|
.issue-archived-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
margin-top: 0.75rem;
|
|
padding-top: 0.625rem;
|
|
border-top: 1px dashed hsl(var(--border) / 0.5);
|
|
font-size: 0.6875rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.issue-archived-footer i {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.issue-card-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.issue-card-id {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.issue-card-title,
|
|
.issue-title {
|
|
font-weight: 600;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.4;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.issue-card-meta,
|
|
.issue-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 0.75rem;
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.issue-card-stats {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.issue-card-stat {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* Issue Status Badges */
|
|
.issue-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
.issue-status.registered {
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.issue-status.planning {
|
|
background: hsl(38 92% 50% / 0.15);
|
|
color: hsl(38 92% 50%);
|
|
}
|
|
|
|
.issue-status.planned {
|
|
background: hsl(217 91% 60% / 0.15);
|
|
color: hsl(217 91% 60%);
|
|
}
|
|
|
|
.issue-status.queued {
|
|
background: hsl(262 83% 58% / 0.15);
|
|
color: hsl(262 83% 58%);
|
|
}
|
|
|
|
.issue-status.executing {
|
|
background: hsl(45 93% 47% / 0.15);
|
|
color: hsl(45 93% 47%);
|
|
}
|
|
|
|
.issue-status.completed {
|
|
background: hsl(var(--success) / 0.15);
|
|
color: hsl(var(--success));
|
|
}
|
|
|
|
.issue-status.failed {
|
|
background: hsl(var(--destructive) / 0.15);
|
|
color: hsl(var(--destructive));
|
|
}
|
|
|
|
/* Issue Failure Info */
|
|
.issue-failure-info {
|
|
margin-top: 0.75rem;
|
|
padding: 0.5rem 0.75rem;
|
|
background: hsl(var(--destructive) / 0.08);
|
|
border: 1px solid hsl(var(--destructive) / 0.2);
|
|
border-radius: 0.375rem;
|
|
border-left: 3px solid hsl(var(--destructive));
|
|
}
|
|
|
|
.issue-failure-info .failure-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
color: hsl(var(--destructive));
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.issue-failure-info .failure-label {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.issue-failure-info .failure-task {
|
|
font-family: var(--font-mono);
|
|
background: hsl(var(--destructive) / 0.15);
|
|
padding: 0 0.25rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.6875rem;
|
|
}
|
|
|
|
.issue-failure-info .failure-message {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.25rem;
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.issue-failure-info .failure-type {
|
|
font-family: var(--font-mono);
|
|
color: hsl(var(--destructive) / 0.8);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.issue-failure-info .failure-text {
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Failure History Detail */
|
|
.failure-history-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.failure-history-item {
|
|
padding: 0.75rem;
|
|
background: hsl(var(--destructive) / 0.06);
|
|
border: 1px solid hsl(var(--destructive) / 0.15);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.failure-history-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
color: hsl(var(--destructive));
|
|
}
|
|
|
|
.failure-history-count {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.failure-history-timestamp {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.failure-history-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.failure-history-task,
|
|
.failure-history-error {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.failure-history-message pre {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.failure-history-stacktrace {
|
|
margin-top: 0.375rem;
|
|
}
|
|
|
|
.failure-history-stacktrace summary {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.failure-history-stacktrace pre {
|
|
margin: 0;
|
|
background: hsl(var(--background));
|
|
padding: 0.5rem;
|
|
border-radius: 0.25rem;
|
|
border: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.detail-label-sm {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: hsl(var(--muted-foreground));
|
|
min-width: 60px;
|
|
}
|
|
|
|
/* Priority Badges */
|
|
.issue-priority {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.issue-priority.critical {
|
|
background: hsl(0 84% 60% / 0.15);
|
|
color: hsl(0 84% 60%);
|
|
}
|
|
|
|
.issue-priority.high {
|
|
background: hsl(25 95% 53% / 0.15);
|
|
color: hsl(25 95% 53%);
|
|
}
|
|
|
|
.issue-priority.medium {
|
|
background: hsl(45 93% 47% / 0.15);
|
|
color: hsl(45 93% 47%);
|
|
}
|
|
|
|
.issue-priority.low {
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* ==========================================
|
|
QUEUE VIEW STYLES
|
|
========================================== */
|
|
|
|
.queue-section {
|
|
width: 100%;
|
|
}
|
|
|
|
.queue-timeline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.queue-empty-state,
|
|
.queue-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 200px;
|
|
text-align: center;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.queue-empty svg,
|
|
.queue-empty > i {
|
|
margin-bottom: 1rem;
|
|
opacity: 0.5;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.queue-empty-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.queue-empty-toolbar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding: 0.5rem 0;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.queue-empty-container .queue-empty {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.queue-empty-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--foreground));
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.queue-empty-hint {
|
|
font-size: 0.875rem;
|
|
color: hsl(var(--muted-foreground));
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.queue-create-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.625rem 1.25rem;
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.queue-create-btn:hover {
|
|
background: hsl(var(--primary) / 0.9);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Queue Toolbar */
|
|
.queue-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
padding: 0.75rem 1rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.queue-stats {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.queue-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Command Box */
|
|
.command-option {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.command-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem;
|
|
background: hsl(var(--muted) / 0.5);
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.command-text {
|
|
flex: 1;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.875rem;
|
|
color: hsl(var(--foreground));
|
|
word-break: break-all;
|
|
}
|
|
|
|
.command-info {
|
|
padding: 0.75rem;
|
|
background: hsl(var(--primary) / 0.05);
|
|
border-radius: 0.375rem;
|
|
border-left: 3px solid hsl(var(--primary));
|
|
}
|
|
|
|
/* Issue ID */
|
|
.issue-id {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
background: hsl(var(--muted));
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
/* Execution Group */
|
|
.queue-group {
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.75rem;
|
|
overflow: hidden;
|
|
margin-bottom: 1rem;
|
|
box-shadow: 0 1px 3px hsl(var(--foreground) / 0.04);
|
|
}
|
|
|
|
.queue-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.875rem 1.25rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.queue-group-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.queue-group-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.queue-group-badge.parallel {
|
|
background: hsl(142 71% 45% / 0.15);
|
|
color: hsl(142 71% 45%);
|
|
}
|
|
|
|
.queue-group-badge.sequential {
|
|
background: hsl(262 83% 58% / 0.15);
|
|
color: hsl(262 83% 58%);
|
|
}
|
|
|
|
.queue-group-count {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.queue-group-items {
|
|
padding: 0.75rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
min-height: 60px;
|
|
}
|
|
|
|
/* Parallel group items display horizontally */
|
|
.queue-group.parallel .queue-group-items {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Queue Item */
|
|
.queue-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
background: hsl(var(--background));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.queue-item:hover {
|
|
border-color: hsl(var(--primary));
|
|
box-shadow: 0 2px 4px hsl(var(--foreground) / 0.05);
|
|
}
|
|
|
|
.queue-item[draggable="true"] {
|
|
cursor: grab;
|
|
}
|
|
|
|
.queue-item[draggable="true"]:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.queue-item-drag-handle {
|
|
display: flex;
|
|
align-items: center;
|
|
color: hsl(var(--muted-foreground));
|
|
cursor: grab;
|
|
}
|
|
|
|
.queue-item-drag-handle:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.queue-item-order {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
min-width: 2.5rem;
|
|
}
|
|
|
|
.queue-item-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.queue-item-id {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.queue-item-title {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.queue-item-issue {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.queue-item-priority {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
padding: 0.125rem 0.375rem;
|
|
background: hsl(var(--muted));
|
|
border-radius: 0.25rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* Queue Item Status */
|
|
.queue-item-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.queue-item-status.pending {
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.queue-item-status.running {
|
|
background: hsl(217 91% 60% / 0.15);
|
|
color: hsl(217 91% 60%);
|
|
}
|
|
|
|
.queue-item-status.completed {
|
|
background: hsl(var(--success) / 0.15);
|
|
color: hsl(var(--success));
|
|
}
|
|
|
|
.queue-item-status.failed {
|
|
background: hsl(var(--destructive) / 0.15);
|
|
color: hsl(var(--destructive));
|
|
}
|
|
|
|
/* Drag and Drop States */
|
|
.queue-item.dragging {
|
|
opacity: 0.5;
|
|
border: 2px dashed hsl(var(--primary));
|
|
}
|
|
|
|
.queue-item.drag-over {
|
|
border-color: hsl(var(--primary));
|
|
background: hsl(var(--primary) / 0.05);
|
|
}
|
|
|
|
.queue-group-items.drag-over {
|
|
background: hsl(var(--primary) / 0.03);
|
|
}
|
|
|
|
/* Arrow connector between sequential items */
|
|
.queue-group.sequential .queue-item:not(:last-child)::after {
|
|
content: '';
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
border-top: 8px solid hsl(var(--muted-foreground) / 0.3);
|
|
position: absolute;
|
|
bottom: -12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.queue-group.sequential .queue-item {
|
|
position: relative;
|
|
}
|
|
|
|
/* ==========================================
|
|
ISSUE DETAIL PANEL
|
|
========================================== */
|
|
|
|
.issue-detail-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: hsl(var(--foreground) / 0.4);
|
|
z-index: 999;
|
|
animation: fadeIn 0.15s ease-out;
|
|
}
|
|
|
|
.issue-detail-panel {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
width: 560px;
|
|
max-width: 100%;
|
|
height: 100vh;
|
|
background: hsl(var(--background));
|
|
border-left: 1px solid hsl(var(--border));
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
animation: slideInPanel 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes slideInPanel {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.issue-detail-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 1.25rem 1.5rem;
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.issue-detail-header-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.issue-detail-id {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.issue-detail-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin-top: 0.25rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.issue-detail-title.editable {
|
|
cursor: text;
|
|
padding: 0.25rem 0.5rem;
|
|
margin: 0.25rem -0.5rem 0;
|
|
border-radius: 0.375rem;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.issue-detail-title.editable:hover {
|
|
background: hsl(var(--muted) / 0.5);
|
|
}
|
|
|
|
.issue-detail-title.editable:focus {
|
|
outline: none;
|
|
border-color: hsl(var(--primary));
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
.issue-detail-close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 0.375rem;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
color: hsl(var(--muted-foreground));
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.issue-detail-close:hover {
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.issue-detail-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.issue-detail-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.issue-detail-section-title {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: hsl(var(--muted-foreground));
|
|
margin-bottom: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.issue-detail-section-title button {
|
|
padding: 0.25rem;
|
|
border-radius: 0.25rem;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
color: hsl(var(--muted-foreground));
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.issue-detail-section-title button:hover {
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Context / Description */
|
|
.issue-detail-context {
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
color: hsl(var(--foreground));
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.issue-detail-context.editable {
|
|
padding: 0.75rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border-radius: 0.5rem;
|
|
border: 1px solid transparent;
|
|
cursor: text;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.issue-detail-context.editable:hover {
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
.issue-detail-context.editable:focus {
|
|
outline: none;
|
|
border-color: hsl(var(--primary));
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
/* Solutions List */
|
|
.solution-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.solution-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.solution-item:hover {
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
|
|
.solution-item.bound {
|
|
border-color: hsl(var(--success));
|
|
background: hsl(var(--success) / 0.05);
|
|
}
|
|
|
|
.solution-item-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 0.375rem;
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.solution-item.bound .solution-item-icon {
|
|
background: hsl(var(--success) / 0.15);
|
|
color: hsl(var(--success));
|
|
}
|
|
|
|
.solution-item-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.solution-item-name {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.solution-item-meta {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* Task List */
|
|
.task-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.task-item {
|
|
padding: 0.75rem 1rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.task-item:hover {
|
|
border-color: hsl(var(--primary) / 0.5);
|
|
}
|
|
|
|
.task-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.task-item-id {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.6875rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.task-item-title {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.task-item-scope {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.task-item-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Task Action Badge (Create, Update, etc) */
|
|
.task-action-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.task-action-badge.create {
|
|
background: hsl(142 71% 45% / 0.15);
|
|
color: hsl(142 71% 45%);
|
|
}
|
|
|
|
.task-action-badge.update {
|
|
background: hsl(217 91% 60% / 0.15);
|
|
color: hsl(217 91% 60%);
|
|
}
|
|
|
|
.task-action-badge.implement {
|
|
background: hsl(262 83% 58% / 0.15);
|
|
color: hsl(262 83% 58%);
|
|
}
|
|
|
|
.task-action-badge.configure {
|
|
background: hsl(45 93% 47% / 0.15);
|
|
color: hsl(45 93% 47%);
|
|
}
|
|
|
|
.task-action-badge.refactor {
|
|
background: hsl(25 95% 53% / 0.15);
|
|
color: hsl(25 95% 53%);
|
|
}
|
|
|
|
.task-action-badge.test {
|
|
background: hsl(199 89% 48% / 0.15);
|
|
color: hsl(199 89% 48%);
|
|
}
|
|
|
|
.task-action-badge.delete {
|
|
background: hsl(var(--destructive) / 0.15);
|
|
color: hsl(var(--destructive));
|
|
}
|
|
|
|
/* Task Status Dropdown */
|
|
.task-status-select {
|
|
font-size: 0.6875rem;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
border: 1px solid hsl(var(--border));
|
|
background: hsl(var(--background));
|
|
cursor: pointer;
|
|
}
|
|
|
|
.task-status-select:focus {
|
|
outline: none;
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
|
|
/* Modification Points */
|
|
.modification-points {
|
|
margin-top: 0.5rem;
|
|
padding-top: 0.5rem;
|
|
border-top: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
.modification-point {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
font-size: 0.75rem;
|
|
padding: 0.25rem 0;
|
|
}
|
|
|
|
.modification-point-file {
|
|
font-family: var(--font-mono);
|
|
color: hsl(var(--primary));
|
|
}
|
|
|
|
.modification-point-change {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* Implementation Steps */
|
|
.implementation-steps {
|
|
margin-top: 0.5rem;
|
|
padding-left: 1rem;
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.implementation-steps li {
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
/* Acceptance Criteria */
|
|
.acceptance-criteria {
|
|
margin-top: 0.5rem;
|
|
padding-left: 1rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.acceptance-criteria li {
|
|
margin: 0.25rem 0;
|
|
color: hsl(var(--success));
|
|
}
|
|
|
|
/* ==========================================
|
|
CONFLICTS SECTION
|
|
========================================== */
|
|
|
|
.conflicts-section {
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.conflict-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
background: hsl(45 93% 47% / 0.1);
|
|
border: 1px solid hsl(45 93% 47% / 0.3);
|
|
border-radius: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.conflict-item.resolved {
|
|
background: hsl(var(--success) / 0.05);
|
|
border-color: hsl(var(--success) / 0.3);
|
|
}
|
|
|
|
.conflict-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: 9999px;
|
|
background: hsl(45 93% 47% / 0.2);
|
|
color: hsl(45 93% 47%);
|
|
}
|
|
|
|
.conflict-item.resolved .conflict-icon {
|
|
background: hsl(var(--success) / 0.2);
|
|
color: hsl(var(--success));
|
|
}
|
|
|
|
.conflict-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.conflict-file {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.conflict-tasks {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.conflict-resolution {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* ==========================================
|
|
FILTER BAR
|
|
========================================== */
|
|
|
|
.issue-filter-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.issue-filter-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.issue-filter-group label {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.issue-filter-select {
|
|
font-size: 0.8125rem;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
border: 1px solid hsl(var(--border));
|
|
background: hsl(var(--background));
|
|
cursor: pointer;
|
|
}
|
|
|
|
.issue-filter-select:focus {
|
|
outline: none;
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
|
|
/* ==========================================
|
|
RESPONSIVE ADJUSTMENTS
|
|
========================================== */
|
|
|
|
@media (max-width: 768px) {
|
|
.issues-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.issue-detail-panel {
|
|
width: 100%;
|
|
}
|
|
|
|
.queue-group.parallel .queue-group-items {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.issue-filter-bar {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.issue-view-toggle {
|
|
width: 100%;
|
|
}
|
|
|
|
.issue-view-toggle button {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.queue-item {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.queue-item-content {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* ==========================================
|
|
ANIMATIONS
|
|
========================================== */
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.animate-pulse {
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Line clamp utility */
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Badge styles */
|
|
.issue-card .badge,
|
|
.queue-item .badge {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ==========================================
|
|
TOOLBAR & SEARCH
|
|
========================================== */
|
|
|
|
.issue-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
padding: 0.75rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border-radius: 0.5rem;
|
|
border: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.issue-search {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
min-width: 200px;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.issue-search > i:first-child {
|
|
position: absolute;
|
|
left: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.issue-search input {
|
|
width: 100%;
|
|
padding: 0.5rem 2rem 0.5rem 2.25rem;
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.375rem;
|
|
background: hsl(var(--background));
|
|
font-size: 0.875rem;
|
|
color: hsl(var(--foreground));
|
|
transition: border-color 0.15s ease;
|
|
}
|
|
|
|
.issue-search input:focus {
|
|
outline: none;
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
|
|
.issue-search input::placeholder {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.issue-search-clear {
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
border: none;
|
|
border-radius: 9999px;
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.issue-search-clear:hover {
|
|
background: hsl(var(--destructive) / 0.1);
|
|
color: hsl(var(--destructive));
|
|
}
|
|
|
|
/* Search Highlight */
|
|
.search-highlight {
|
|
background: hsl(45 93% 47% / 0.3);
|
|
color: inherit;
|
|
padding: 0 2px;
|
|
border-radius: 2px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Search Suggestions Dropdown */
|
|
.search-suggestions {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
margin-top: 0.25rem;
|
|
background: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
z-index: 50;
|
|
display: none;
|
|
}
|
|
|
|
.search-suggestions.show {
|
|
display: block;
|
|
}
|
|
|
|
.search-suggestion-item {
|
|
padding: 0.625rem 0.875rem;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid hsl(var(--border) / 0.5);
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.search-suggestion-item:hover,
|
|
.search-suggestion-item.selected {
|
|
background: hsl(var(--muted));
|
|
}
|
|
|
|
.search-suggestion-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.suggestion-id {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
color: hsl(var(--muted-foreground));
|
|
margin-bottom: 0.125rem;
|
|
}
|
|
|
|
.suggestion-title {
|
|
font-size: 0.8125rem;
|
|
color: hsl(var(--foreground));
|
|
line-height: 1.3;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ==========================================
|
|
CREATE BUTTON
|
|
========================================== */
|
|
|
|
.issue-create-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.5rem 1rem;
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.issue-create-btn:hover {
|
|
background: hsl(var(--primary) / 0.9);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.issue-create-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* ==========================================
|
|
ISSUE STATS
|
|
========================================== */
|
|
|
|
.issue-stats {
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
/* ==========================================
|
|
EMPTY STATE (CENTERED)
|
|
========================================== */
|
|
|
|
.issue-empty-container {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.issue-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.issue-empty > i,
|
|
.issue-empty > svg {
|
|
color: hsl(var(--muted-foreground));
|
|
opacity: 0.5;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.issue-empty-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--foreground));
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.issue-empty-hint {
|
|
font-size: 0.875rem;
|
|
color: hsl(var(--muted-foreground));
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.issue-empty-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.625rem 1.25rem;
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.issue-empty-btn:hover {
|
|
background: hsl(var(--primary) / 0.9);
|
|
}
|
|
|
|
/* ==========================================
|
|
MODAL STYLES
|
|
========================================== */
|
|
|
|
.issue-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.issue-modal.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.issue-modal-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: hsl(var(--foreground) / 0.5);
|
|
animation: fadeIn 0.15s ease-out;
|
|
}
|
|
|
|
.issue-modal-content {
|
|
position: relative;
|
|
width: 90%;
|
|
max-width: 480px;
|
|
background: hsl(var(--background));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 20px 40px hsl(var(--foreground) / 0.15);
|
|
animation: modalSlideIn 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes modalSlideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.issue-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.issue-modal-header h3 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.issue-modal-body {
|
|
padding: 1.25rem;
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.issue-modal-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 0.75rem;
|
|
padding: 1rem 1.25rem;
|
|
border-top: 1px solid hsl(var(--border));
|
|
background: hsl(var(--muted) / 0.3);
|
|
}
|
|
|
|
/* ==========================================
|
|
FORM STYLES
|
|
========================================== */
|
|
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 0.8125rem;
|
|
font-weight: 500;
|
|
color: hsl(var(--foreground));
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group textarea,
|
|
.form-group select {
|
|
width: 100%;
|
|
padding: 0.625rem 0.75rem;
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.375rem;
|
|
background: hsl(var(--background));
|
|
font-size: 0.875rem;
|
|
color: hsl(var(--foreground));
|
|
transition: border-color 0.15s ease;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group textarea:focus,
|
|
.form-group select:focus {
|
|
outline: none;
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
|
|
.form-group input::placeholder,
|
|
.form-group textarea::placeholder {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.form-group textarea {
|
|
resize: vertical;
|
|
min-height: 80px;
|
|
}
|
|
|
|
.form-group select {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Input with action button */
|
|
.input-with-action {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.input-with-action input {
|
|
flex: 1;
|
|
}
|
|
|
|
.input-with-action .btn-icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ==========================================
|
|
BUTTON STYLES
|
|
========================================== */
|
|
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375rem;
|
|
padding: 0.5rem 1rem;
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: hsl(var(--primary) / 0.9);
|
|
}
|
|
|
|
.btn-secondary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.375rem;
|
|
padding: 0.5rem 1rem;
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--foreground));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.375rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: hsl(var(--muted) / 0.8);
|
|
}
|
|
|
|
.btn-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
padding: 0;
|
|
background: transparent;
|
|
color: hsl(var(--muted-foreground));
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-icon:hover {
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* ==========================================
|
|
DETAIL PANEL ENHANCEMENTS
|
|
========================================== */
|
|
|
|
.issue-detail-content {
|
|
padding: 1.25rem;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.detail-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.detail-label {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: hsl(var(--muted-foreground));
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.detail-editable {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.detail-value {
|
|
flex: 1;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.detail-context {
|
|
position: relative;
|
|
}
|
|
|
|
.detail-pre {
|
|
font-family: inherit;
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
color: hsl(var(--foreground));
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
padding: 0.75rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.btn-edit {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
padding: 0;
|
|
background: transparent;
|
|
color: hsl(var(--muted-foreground));
|
|
border: none;
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-edit:hover {
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--primary));
|
|
}
|
|
|
|
/* Solutions List */
|
|
.solutions-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.solution-item {
|
|
padding: 0.75rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.375rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.solution-item:hover {
|
|
border-color: hsl(var(--primary) / 0.5);
|
|
}
|
|
|
|
.solution-item.bound {
|
|
border-color: hsl(var(--success));
|
|
background: hsl(var(--success) / 0.05);
|
|
}
|
|
|
|
.solution-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.solution-id {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.solution-bound-badge {
|
|
display: inline-flex;
|
|
padding: 0.125rem 0.375rem;
|
|
background: hsl(var(--success) / 0.15);
|
|
color: hsl(var(--success));
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.solution-tasks {
|
|
margin-left: auto;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.solution-tasks-list {
|
|
margin-top: 0.75rem;
|
|
padding-top: 0.75rem;
|
|
border-top: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
/* Tasks List */
|
|
.tasks-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.task-item-detail {
|
|
padding: 0.75rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.task-title-detail {
|
|
font-size: 0.875rem;
|
|
color: hsl(var(--foreground));
|
|
margin-top: 0.375rem;
|
|
}
|
|
|
|
/* Edit Mode */
|
|
.edit-input,
|
|
.edit-textarea {
|
|
width: 100%;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid hsl(var(--primary));
|
|
border-radius: 0.375rem;
|
|
background: hsl(var(--background));
|
|
font-size: 0.875rem;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.edit-input:focus,
|
|
.edit-textarea:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.edit-textarea {
|
|
resize: vertical;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.edit-actions {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.btn-save,
|
|
.btn-cancel {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-save {
|
|
background: hsl(var(--success) / 0.15);
|
|
color: hsl(var(--success));
|
|
}
|
|
|
|
.btn-save:hover {
|
|
background: hsl(var(--success) / 0.25);
|
|
}
|
|
|
|
.btn-cancel {
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.btn-cancel:hover {
|
|
background: hsl(var(--destructive) / 0.1);
|
|
color: hsl(var(--destructive));
|
|
}
|
|
|
|
/* ==========================================
|
|
QUEUE ENHANCEMENTS
|
|
========================================== */
|
|
|
|
.queue-info {
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.queue-items {
|
|
padding: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* Parallel items use CSS Grid for uniform sizing */
|
|
.queue-items.parallel {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.queue-items.parallel .queue-item {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"id id delete"
|
|
"issue issue issue"
|
|
"solution solution solution";
|
|
grid-template-columns: 1fr 1fr auto;
|
|
grid-template-rows: auto auto 1fr;
|
|
align-items: start;
|
|
padding: 0.75rem;
|
|
min-height: 90px;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
/* Card content layout */
|
|
.queue-items.parallel .queue-item .queue-item-id {
|
|
grid-area: id;
|
|
font-size: 0.875rem;
|
|
font-weight: 700;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.queue-items.parallel .queue-item .queue-item-issue {
|
|
grid-area: issue;
|
|
font-size: 0.6875rem;
|
|
color: hsl(var(--muted-foreground));
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.queue-items.parallel .queue-item .queue-item-solution {
|
|
grid-area: solution;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: hsl(var(--foreground));
|
|
align-self: end;
|
|
}
|
|
|
|
/* Hide extra elements in parallel view */
|
|
.queue-items.parallel .queue-item .queue-item-files,
|
|
.queue-items.parallel .queue-item .queue-item-priority,
|
|
.queue-items.parallel .queue-item .queue-item-deps,
|
|
.queue-items.parallel .queue-item .queue-item-task {
|
|
display: none;
|
|
}
|
|
|
|
/* Delete button positioned in corner */
|
|
.queue-items.parallel .queue-item .queue-item-delete {
|
|
grid-area: delete;
|
|
justify-self: end;
|
|
padding: 0.125rem;
|
|
opacity: 0;
|
|
}
|
|
|
|
.queue-group-type {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
padding: 0.25rem 0.625rem;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.queue-group-type.parallel {
|
|
color: hsl(142 71% 40%);
|
|
background: hsl(142 71% 45% / 0.1);
|
|
}
|
|
|
|
.queue-group-type.sequential {
|
|
color: hsl(262 83% 50%);
|
|
background: hsl(262 83% 58% / 0.1);
|
|
}
|
|
|
|
/* Queue Item Status Colors - Enhanced visual distinction */
|
|
|
|
/* Pending - Default subtle state */
|
|
.queue-item.pending,
|
|
.queue-item:not(.ready):not(.executing):not(.completed):not(.failed):not(.blocked) {
|
|
border-color: hsl(var(--border));
|
|
background: hsl(var(--card));
|
|
}
|
|
|
|
/* Ready - Blue tint, ready to execute */
|
|
.queue-item.ready {
|
|
border-color: hsl(199 89% 48%);
|
|
background: hsl(199 89% 48% / 0.06);
|
|
border-left: 3px solid hsl(199 89% 48%);
|
|
}
|
|
|
|
/* Executing - Amber with pulse animation */
|
|
.queue-item.executing {
|
|
border-color: hsl(38 92% 50%);
|
|
background: hsl(38 92% 50% / 0.08);
|
|
border-left: 3px solid hsl(38 92% 50%);
|
|
animation: executing-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes executing-pulse {
|
|
0%, 100% { box-shadow: 0 0 0 0 hsl(38 92% 50% / 0.3); }
|
|
50% { box-shadow: 0 0 8px 2px hsl(38 92% 50% / 0.2); }
|
|
}
|
|
|
|
/* Completed - Green success state */
|
|
.queue-item.completed {
|
|
border-color: hsl(142 71% 45%);
|
|
background: hsl(142 71% 45% / 0.06);
|
|
border-left: 3px solid hsl(142 71% 45%);
|
|
}
|
|
|
|
/* Failed - Red error state */
|
|
.queue-item.failed {
|
|
border-color: hsl(0 84% 60%);
|
|
background: hsl(0 84% 60% / 0.06);
|
|
border-left: 3px solid hsl(0 84% 60%);
|
|
}
|
|
|
|
/* Queue Item Failure Info */
|
|
.queue-item-failure {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
color: hsl(var(--destructive));
|
|
background: hsl(var(--destructive) / 0.1);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
max-width: 250px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.queue-item-failure i {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.queue-item-failure .failure-type {
|
|
font-family: var(--font-mono);
|
|
font-weight: 500;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.queue-item-failure .failure-msg {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* Hide failure in parallel view to save space */
|
|
.queue-items.parallel .queue-item .queue-item-failure {
|
|
display: none;
|
|
}
|
|
|
|
/* Blocked - Purple/violet blocked state */
|
|
.queue-item.blocked {
|
|
border-color: hsl(262 83% 58%);
|
|
background: hsl(262 83% 58% / 0.05);
|
|
border-left: 3px solid hsl(262 83% 58%);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Priority indicator */
|
|
.issue-priority {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
/* Conflicts list */
|
|
.conflicts-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.conflict-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.5rem 0.75rem;
|
|
background: hsl(45 93% 47% / 0.1);
|
|
border: 1px solid hsl(45 93% 47% / 0.3);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.conflict-file {
|
|
color: hsl(var(--primary));
|
|
}
|
|
|
|
.conflict-tasks {
|
|
flex: 1;
|
|
}
|
|
|
|
.conflict-status {
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.conflict-status.pending {
|
|
background: hsl(45 93% 47% / 0.15);
|
|
color: hsl(45 93% 47%);
|
|
}
|
|
|
|
.conflict-status.resolved {
|
|
background: hsl(var(--success) / 0.15);
|
|
color: hsl(var(--success));
|
|
}
|
|
|
|
/* ==========================================
|
|
RESPONSIVE TOOLBAR
|
|
========================================== */
|
|
|
|
@media (max-width: 640px) {
|
|
.issue-toolbar {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.issue-search {
|
|
max-width: none;
|
|
}
|
|
|
|
.issue-filters {
|
|
justify-content: flex-start;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
|
|
/* ==========================================
|
|
SOLUTION DETAIL MODAL
|
|
========================================== */
|
|
|
|
.solution-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.solution-modal.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.solution-modal-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: hsl(var(--foreground) / 0.6);
|
|
animation: fadeIn 0.15s ease-out;
|
|
}
|
|
|
|
.solution-modal-content {
|
|
position: relative;
|
|
width: 90%;
|
|
max-width: 720px;
|
|
max-height: 85vh;
|
|
background: hsl(var(--background));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 25px 50px hsl(var(--foreground) / 0.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
animation: modalSlideIn 0.2s ease-out;
|
|
}
|
|
|
|
.solution-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.solution-modal-title h3 {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--foreground));
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.solution-modal-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.solution-modal-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
/* Solution Overview Stats */
|
|
.solution-overview {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
padding: 1rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border-radius: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.solution-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.solution-stat-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.solution-stat-label {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* Solution Detail Section */
|
|
.solution-detail-section {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.solution-detail-section:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.solution-detail-section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--foreground));
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* Solution Tasks Detail */
|
|
.solution-tasks-detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.solution-task-card {
|
|
background: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.solution-task-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.75rem 1rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
cursor: pointer;
|
|
transition: background 0.15s ease;
|
|
}
|
|
|
|
.solution-task-header:hover {
|
|
background: hsl(var(--muted) / 0.5);
|
|
}
|
|
|
|
.solution-task-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.solution-task-index {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--muted-foreground));
|
|
min-width: 1.5rem;
|
|
}
|
|
|
|
.solution-task-id {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.task-expand-icon {
|
|
transition: transform 0.2s ease;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.solution-task-title {
|
|
padding: 0.75rem 1rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: hsl(var(--foreground));
|
|
border-top: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
.solution-task-details {
|
|
padding: 0.75rem 1rem;
|
|
border-top: 1px solid hsl(var(--border));
|
|
background: hsl(var(--muted) / 0.15);
|
|
}
|
|
|
|
.solution-task-scope {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
padding: 0.5rem;
|
|
background: hsl(var(--primary) / 0.1);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.solution-task-scope-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.solution-task-subtitle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--muted-foreground));
|
|
margin-bottom: 0.5rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
.solution-task-mod-points,
|
|
.solution-task-impl-steps,
|
|
.solution-task-acceptance,
|
|
.solution-task-deps {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.solution-task-list,
|
|
.solution-impl-list,
|
|
.solution-acceptance-list {
|
|
margin: 0;
|
|
padding-left: 1.25rem;
|
|
font-size: 0.8125rem;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.solution-task-list li,
|
|
.solution-impl-list li,
|
|
.solution-acceptance-list li {
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
.solution-mod-point {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.mod-point-file {
|
|
color: hsl(var(--primary));
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.mod-point-change {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.solution-deps-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.solution-dep-tag {
|
|
padding: 0.125rem 0.5rem;
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* ==========================================
|
|
LIFECYCLE PHASE BADGES
|
|
========================================== */
|
|
|
|
.phase-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.phase-badge.phase-1 {
|
|
background: hsl(217 91% 60% / 0.2);
|
|
color: hsl(217 91% 60%);
|
|
}
|
|
|
|
.phase-badge.phase-2 {
|
|
background: hsl(262 83% 58% / 0.2);
|
|
color: hsl(262 83% 58%);
|
|
}
|
|
|
|
.phase-badge.phase-3 {
|
|
background: hsl(25 95% 53% / 0.2);
|
|
color: hsl(25 95% 53%);
|
|
}
|
|
|
|
.phase-badge.phase-4 {
|
|
background: hsl(142 71% 45% / 0.2);
|
|
color: hsl(142 71% 45%);
|
|
}
|
|
|
|
.phase-badge.phase-5 {
|
|
background: hsl(199 89% 48% / 0.2);
|
|
color: hsl(199 89% 48%);
|
|
}
|
|
|
|
/* ==========================================
|
|
QUEUE STATS GRID
|
|
========================================== */
|
|
|
|
.queue-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.queue-stats-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.queue-stats-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
.queue-stat-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem 1.25rem;
|
|
background: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.75rem;
|
|
text-align: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.queue-stat-card:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 2px 8px hsl(var(--foreground) / 0.06);
|
|
}
|
|
|
|
.queue-stat-card .queue-stat-value {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
color: hsl(var(--foreground));
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.queue-stat-card .queue-stat-label {
|
|
font-size: 0.6875rem;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
margin-top: 0.375rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Pending - Slate/Gray with subtle blue tint */
|
|
.queue-stat-card.pending {
|
|
border-color: hsl(215 20% 65% / 0.4);
|
|
background: linear-gradient(135deg, hsl(215 20% 95%) 0%, hsl(var(--card)) 100%);
|
|
}
|
|
|
|
.queue-stat-card.pending .queue-stat-value {
|
|
color: hsl(215 20% 45%);
|
|
}
|
|
|
|
.queue-stat-card.pending .queue-stat-label {
|
|
color: hsl(215 20% 55%);
|
|
}
|
|
|
|
/* Executing - Amber/Orange - attention-grabbing */
|
|
.queue-stat-card.executing {
|
|
border-color: hsl(38 92% 50% / 0.5);
|
|
background: linear-gradient(135deg, hsl(38 92% 95%) 0%, hsl(45 93% 97%) 100%);
|
|
}
|
|
|
|
.queue-stat-card.executing .queue-stat-value {
|
|
color: hsl(38 92% 40%);
|
|
}
|
|
|
|
.queue-stat-card.executing .queue-stat-label {
|
|
color: hsl(38 70% 45%);
|
|
}
|
|
|
|
/* Completed - Green - success indicator */
|
|
.queue-stat-card.completed {
|
|
border-color: hsl(142 71% 45% / 0.5);
|
|
background: linear-gradient(135deg, hsl(142 71% 95%) 0%, hsl(142 50% 97%) 100%);
|
|
}
|
|
|
|
.queue-stat-card.completed .queue-stat-value {
|
|
color: hsl(142 71% 35%);
|
|
}
|
|
|
|
.queue-stat-card.completed .queue-stat-label {
|
|
color: hsl(142 50% 40%);
|
|
}
|
|
|
|
/* Failed - Red - error indicator */
|
|
.queue-stat-card.failed {
|
|
border-color: hsl(0 84% 60% / 0.5);
|
|
background: linear-gradient(135deg, hsl(0 84% 95%) 0%, hsl(0 70% 97%) 100%);
|
|
}
|
|
|
|
.queue-stat-card.failed .queue-stat-value {
|
|
color: hsl(0 84% 45%);
|
|
}
|
|
|
|
.queue-stat-card.failed .queue-stat-label {
|
|
color: hsl(0 60% 50%);
|
|
}
|
|
|
|
/* ==========================================
|
|
QUEUE INFO CARDS
|
|
========================================== */
|
|
|
|
.queue-info-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.queue-info-label {
|
|
font-size: 0.6875rem;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.queue-info-value {
|
|
font-size: 0.875rem;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Queue Status Badge */
|
|
.queue-status-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.queue-status-badge.active {
|
|
background: hsl(217 91% 60% / 0.15);
|
|
color: hsl(217 91% 60%);
|
|
}
|
|
|
|
.queue-status-badge.completed {
|
|
background: hsl(var(--success) / 0.15);
|
|
color: hsl(var(--success));
|
|
}
|
|
|
|
.queue-status-badge.failed {
|
|
background: hsl(var(--destructive) / 0.15);
|
|
color: hsl(var(--destructive));
|
|
}
|
|
|
|
.queue-status-badge.archived {
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* ==========================================
|
|
SOLUTION TASK SECTIONS
|
|
========================================== */
|
|
|
|
.solution-task-section {
|
|
margin-bottom: 0.75rem;
|
|
padding-bottom: 0.75rem;
|
|
border-bottom: 1px solid hsl(var(--border) / 0.3);
|
|
}
|
|
|
|
.solution-task-section:last-child {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* ==========================================
|
|
TEST SECTION STYLES
|
|
========================================== */
|
|
|
|
.test-subsection,
|
|
.acceptance-subsection {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.test-subsection:last-child,
|
|
.acceptance-subsection:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.test-label,
|
|
.acceptance-label {
|
|
display: block;
|
|
font-size: 0.6875rem;
|
|
font-weight: 500;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.test-list {
|
|
margin: 0;
|
|
padding-left: 1.25rem;
|
|
font-size: 0.8125rem;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.test-list li {
|
|
margin: 0.125rem 0;
|
|
}
|
|
|
|
.test-commands,
|
|
.verification-commands {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.test-command,
|
|
.verification-command {
|
|
display: block;
|
|
padding: 0.375rem 0.625rem;
|
|
background: hsl(var(--muted) / 0.5);
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.25rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--foreground));
|
|
word-break: break-all;
|
|
}
|
|
|
|
.coverage-target {
|
|
font-size: 0.6875rem;
|
|
font-weight: 400;
|
|
color: hsl(var(--muted-foreground));
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
/* ==========================================
|
|
COMMIT INFO STYLES
|
|
========================================== */
|
|
|
|
.commit-info {
|
|
background: hsl(var(--muted) / 0.3);
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.375rem;
|
|
padding: 0.625rem;
|
|
}
|
|
|
|
.commit-type {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.commit-type-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.commit-type-badge.feat {
|
|
background: hsl(142 71% 45% / 0.15);
|
|
color: hsl(142 71% 45%);
|
|
}
|
|
|
|
.commit-type-badge.fix {
|
|
background: hsl(0 84% 60% / 0.15);
|
|
color: hsl(0 84% 60%);
|
|
}
|
|
|
|
.commit-type-badge.refactor {
|
|
background: hsl(262 83% 58% / 0.15);
|
|
color: hsl(262 83% 58%);
|
|
}
|
|
|
|
.commit-type-badge.test {
|
|
background: hsl(199 89% 48% / 0.15);
|
|
color: hsl(199 89% 48%);
|
|
}
|
|
|
|
.commit-type-badge.docs {
|
|
background: hsl(45 93% 47% / 0.15);
|
|
color: hsl(45 93% 47%);
|
|
}
|
|
|
|
.commit-type-badge.chore {
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.commit-scope {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.commit-breaking {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.125rem 0.375rem;
|
|
background: hsl(var(--destructive) / 0.15);
|
|
color: hsl(var(--destructive));
|
|
border-radius: 0.25rem;
|
|
font-size: 0.625rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.commit-message {
|
|
margin: 0;
|
|
padding: 0.5rem;
|
|
background: hsl(var(--background));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.25rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--foreground));
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Modification Point Target */
|
|
.mod-point-target {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--primary));
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* JSON Toggle */
|
|
.solution-json-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.375rem;
|
|
color: hsl(var(--muted-foreground));
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.solution-json-toggle:hover {
|
|
background: hsl(var(--muted) / 0.5);
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.solution-json-content {
|
|
margin-top: 0.5rem;
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.375rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.solution-json-pre {
|
|
margin: 0;
|
|
padding: 1rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
line-height: 1.5;
|
|
color: hsl(var(--foreground));
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Responsive Solution Modal */
|
|
@media (max-width: 640px) {
|
|
.solution-modal-content {
|
|
max-height: 95vh;
|
|
margin: 0.5rem;
|
|
}
|
|
|
|
.solution-overview {
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.solution-stat {
|
|
min-width: 80px;
|
|
}
|
|
}
|
|
|
|
/* ==========================================
|
|
QUEUE HISTORY MODAL
|
|
========================================== */
|
|
|
|
.queue-history-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.queue-history-item {
|
|
padding: 1rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.queue-history-item:hover {
|
|
background: hsl(var(--muted) / 0.5);
|
|
border-color: hsl(var(--primary) / 0.3);
|
|
}
|
|
|
|
.queue-history-item.active {
|
|
border-color: hsl(var(--primary));
|
|
background: hsl(var(--primary) / 0.1);
|
|
}
|
|
|
|
.queue-history-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.queue-history-id {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.queue-active-badge {
|
|
padding: 0.125rem 0.5rem;
|
|
font-size: 0.625rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.queue-history-status {
|
|
padding: 0.125rem 0.5rem;
|
|
font-size: 0.75rem;
|
|
border-radius: 0.25rem;
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.queue-history-status.active {
|
|
background: hsl(142 76% 36% / 0.2);
|
|
color: hsl(142 76% 36%);
|
|
}
|
|
|
|
.queue-history-status.completed {
|
|
background: hsl(142 76% 36% / 0.2);
|
|
color: hsl(142 76% 36%);
|
|
}
|
|
|
|
.queue-history-status.archived {
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.queue-history-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.queue-history-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* Queue Detail View */
|
|
.queue-detail-view {
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.queue-detail-header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.queue-detail-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.queue-detail-stats .stat-item {
|
|
text-align: center;
|
|
padding: 0.75rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.queue-detail-stats .stat-value {
|
|
display: block;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.queue-detail-stats .stat-label {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.queue-detail-stats .stat-item.completed .stat-value {
|
|
color: hsl(142 76% 36%);
|
|
}
|
|
|
|
.queue-detail-stats .stat-item.pending .stat-value {
|
|
color: hsl(48 96% 53%);
|
|
}
|
|
|
|
.queue-detail-stats .stat-item.failed .stat-value {
|
|
color: hsl(0 84% 60%);
|
|
}
|
|
|
|
.queue-detail-groups {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.queue-group-section {
|
|
background: hsl(var(--muted) / 0.2);
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.queue-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem 1rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
font-weight: 500;
|
|
}
|
|
|
|
.queue-group-items {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.queue-detail-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 0.25rem;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.queue-detail-item:hover {
|
|
background: hsl(var(--muted) / 0.3);
|
|
}
|
|
|
|
.queue-detail-item.completed {
|
|
border-left-color: hsl(142 76% 36%);
|
|
}
|
|
|
|
.queue-detail-item.pending {
|
|
border-left-color: hsl(48 96% 53%);
|
|
}
|
|
|
|
.queue-detail-item.executing {
|
|
border-left-color: hsl(217 91% 60%);
|
|
}
|
|
|
|
.queue-detail-item.failed {
|
|
border-left-color: hsl(0 84% 60%);
|
|
}
|
|
|
|
.queue-detail-item .item-main {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.queue-detail-item .item-id {
|
|
min-width: 50px;
|
|
color: hsl(var(--muted-foreground));
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.queue-detail-item .item-title {
|
|
flex: 1;
|
|
color: hsl(var(--foreground));
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.queue-detail-item .item-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding-left: calc(50px + 0.75rem);
|
|
}
|
|
|
|
.queue-detail-item .item-issue {
|
|
color: hsl(var(--primary));
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.queue-detail-item .item-status {
|
|
padding: 0.125rem 0.5rem;
|
|
font-size: 0.75rem;
|
|
border-radius: 0.25rem;
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.queue-detail-item .item-status.completed {
|
|
background: hsl(142 76% 36% / 0.2);
|
|
color: hsl(142 76% 36%);
|
|
}
|
|
|
|
.queue-detail-item .item-status.pending {
|
|
background: hsl(48 96% 53% / 0.2);
|
|
color: hsl(48 96% 53%);
|
|
}
|
|
|
|
.queue-detail-item .item-status.executing {
|
|
background: hsl(217 91% 60% / 0.2);
|
|
color: hsl(217 91% 60%);
|
|
}
|
|
|
|
.queue-detail-item .item-status.failed {
|
|
background: hsl(0 84% 60% / 0.2);
|
|
color: hsl(0 84% 60%);
|
|
}
|
|
|
|
/* Small Buttons */
|
|
.btn-sm {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.75rem;
|
|
border-radius: 0.25rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-sm.btn-primary {
|
|
background: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
}
|
|
|
|
.btn-sm.btn-primary:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.btn-sm.btn-secondary {
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.btn-sm.btn-secondary:hover {
|
|
background: hsl(var(--muted) / 0.8);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.queue-detail-stats {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.queue-history-meta {
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
}
|
|
|
|
/* ==========================================
|
|
MULTI-QUEUE CARDS VIEW
|
|
========================================== */
|
|
|
|
/* Queue Cards Header */
|
|
.queue-cards-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* Queue Cards Grid */
|
|
.queue-cards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* Individual Queue Card */
|
|
.queue-card {
|
|
position: relative;
|
|
background: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.75rem;
|
|
padding: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.queue-card:hover {
|
|
border-color: hsl(var(--primary) / 0.5);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px hsl(var(--foreground) / 0.08);
|
|
}
|
|
|
|
.queue-card.active {
|
|
border-color: hsl(var(--primary));
|
|
background: hsl(var(--primary) / 0.05);
|
|
}
|
|
|
|
.queue-card.merged {
|
|
opacity: 0.6;
|
|
border-style: dashed;
|
|
}
|
|
|
|
.queue-card.merged:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Queue Card Header */
|
|
.queue-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.queue-card-id {
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.queue-card-badges {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Queue Card Stats - Progress Bar */
|
|
.queue-card-stats {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.queue-card-stats .progress-bar {
|
|
height: 6px;
|
|
background: hsl(var(--muted));
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.queue-card-stats .progress-fill {
|
|
height: 100%;
|
|
background: hsl(var(--primary));
|
|
border-radius: 3px;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.queue-card-stats .progress-fill.completed {
|
|
background: hsl(var(--success, 142 76% 36%));
|
|
}
|
|
|
|
.queue-card-progress {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Queue Card Meta */
|
|
.queue-card-meta {
|
|
display: flex;
|
|
gap: 1rem;
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* Queue Card Actions */
|
|
.queue-card-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
padding-top: 0.75rem;
|
|
border-top: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
/* Queue Detail Header */
|
|
.queue-detail-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.queue-detail-title {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.queue-detail-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Queue Item Delete Button */
|
|
.queue-item-delete {
|
|
margin-left: auto;
|
|
padding: 0.25rem;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
color: hsl(var(--muted-foreground));
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.queue-item:hover .queue-item-delete {
|
|
opacity: 1;
|
|
}
|
|
|
|
.queue-item-delete:hover {
|
|
color: hsl(var(--destructive, 0 84% 60%));
|
|
background: hsl(var(--destructive, 0 84% 60%) / 0.1);
|
|
}
|
|
|
|
/* Queue Error State */
|
|
.queue-error {
|
|
padding: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Responsive adjustments for queue cards */
|
|
@media (max-width: 640px) {
|
|
.queue-cards-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.queue-cards-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.queue-detail-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.queue-detail-title {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* ==========================================
|
|
WARNING BUTTON STYLE
|
|
========================================== */
|
|
|
|
.btn-warning,
|
|
.btn-secondary.btn-warning {
|
|
color: hsl(38 92% 40%);
|
|
border-color: hsl(38 92% 50% / 0.5);
|
|
background: hsl(38 92% 50% / 0.08);
|
|
}
|
|
|
|
.btn-warning:hover,
|
|
.btn-secondary.btn-warning:hover {
|
|
background: hsl(38 92% 50% / 0.15);
|
|
border-color: hsl(38 92% 50%);
|
|
}
|
|
|
|
.btn-danger,
|
|
.btn-secondary.btn-danger,
|
|
.btn-sm.btn-danger {
|
|
color: hsl(var(--destructive));
|
|
border-color: hsl(var(--destructive) / 0.5);
|
|
background: hsl(var(--destructive) / 0.08);
|
|
}
|
|
|
|
.btn-danger:hover,
|
|
.btn-secondary.btn-danger:hover,
|
|
.btn-sm.btn-danger:hover {
|
|
background: hsl(var(--destructive) / 0.15);
|
|
border-color: hsl(var(--destructive));
|
|
}
|
|
|
|
/* Issue Detail Actions */
|
|
.issue-detail-actions {
|
|
margin-top: 1rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.issue-detail-actions .flex {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Active queue badge enhancement */
|
|
.queue-active-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.125rem 0.5rem;
|
|
font-size: 0.6875rem;
|
|
font-weight: 600;
|
|
color: hsl(142 71% 35%);
|
|
background: hsl(142 71% 45% / 0.15);
|
|
border: 1px solid hsl(142 71% 45% / 0.3);
|
|
border-radius: 9999px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
/* ==========================================
|
|
SPLIT QUEUE MODAL STYLES
|
|
========================================== */
|
|
|
|
.split-queue-modal-content {
|
|
max-width: 600px;
|
|
width: 90%;
|
|
}
|
|
|
|
.split-queue-controls {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.split-queue-issues {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.split-queue-issue-group {
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.split-queue-issue-group:hover {
|
|
background: hsl(var(--muted) / 0.5);
|
|
border-color: hsl(var(--primary) / 0.3);
|
|
}
|
|
|
|
.split-queue-issue-header {
|
|
margin-bottom: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
.split-queue-issue-header label {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.split-queue-issue-header input[type="checkbox"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.split-queue-solutions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.split-queue-solutions label {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
padding: 0.25rem;
|
|
border-radius: 0.25rem;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.split-queue-solutions label:hover {
|
|
background: hsl(var(--muted) / 0.5);
|
|
}
|
|
|
|
.split-queue-solutions input[type="checkbox"] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Checkbox styles */
|
|
.split-queue-modal-content input[type="checkbox"] {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.25rem;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.split-queue-modal-content input[type="checkbox"]:hover {
|
|
border-color: hsl(var(--primary));
|
|
}
|
|
|
|
.split-queue-modal-content input[type="checkbox"]:checked {
|
|
background-color: hsl(var(--primary));
|
|
border-color: hsl(var(--primary));
|
|
}
|