mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-10 02:24:35 +08:00
1571 lines
28 KiB
CSS
1571 lines
28 KiB
CSS
/* ===================================
|
|
Context Package Card UI (New)
|
|
=================================== */
|
|
.ctx-header-card {
|
|
background: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
padding: 1rem 1.25rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.ctx-header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.ctx-card {
|
|
background: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ctx-card-warning {
|
|
border-color: hsl(var(--warning) / 0.5);
|
|
}
|
|
|
|
.ctx-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.875rem 1rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border-bottom: 1px solid hsl(var(--border));
|
|
}
|
|
|
|
.ctx-card-icon {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.ctx-card-title {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--foreground));
|
|
margin: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.ctx-card-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.ctx-count-badge {
|
|
padding: 0.125rem 0.5rem;
|
|
background: hsl(var(--muted));
|
|
border-radius: 9999px;
|
|
font-size: 0.7rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* Metadata styles - Horizontal chip layout */
|
|
.ctx-meta-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
margin-top: 0.75rem;
|
|
padding: 0.75rem;
|
|
background: hsl(var(--muted) / 0.2);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.ctx-meta-chip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ctx-meta-chip-label {
|
|
font-size: 0.65rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--muted-foreground));
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.ctx-meta-chip-value {
|
|
font-size: 0.8rem;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
code.ctx-meta-chip-value {
|
|
font-family: var(--font-mono);
|
|
background: hsl(var(--background));
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
border: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
.ctx-keywords-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
/* Legacy grid - keep for backwards compatibility */
|
|
.ctx-meta-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
gap: 0.75rem;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.ctx-meta-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.ctx-meta-value-code {
|
|
font-size: 0.75rem;
|
|
font-family: var(--font-mono);
|
|
color: hsl(var(--primary));
|
|
background: hsl(var(--muted) / 0.5);
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.ctx-complexity-badge {
|
|
padding: 0.25rem 0.625rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
}
|
|
|
|
.ctx-complexity-low {
|
|
background: hsl(var(--success) / 0.15);
|
|
color: hsl(142 76% 36%);
|
|
}
|
|
|
|
.ctx-complexity-medium {
|
|
background: hsl(var(--warning) / 0.15);
|
|
color: hsl(38 92% 40%);
|
|
}
|
|
|
|
.ctx-complexity-high {
|
|
background: hsl(var(--destructive) / 0.15);
|
|
color: hsl(0 84% 50%);
|
|
}
|
|
|
|
/* Pattern tags */
|
|
.ctx-pattern-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ctx-pattern-tag {
|
|
padding: 0.375rem 0.75rem;
|
|
background: hsl(var(--primary) / 0.1);
|
|
border: 1px solid hsl(var(--primary) / 0.2);
|
|
color: hsl(var(--primary));
|
|
border-radius: 0.375rem;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Tech Stack section */
|
|
.ctx-stack-section {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
.ctx-stack-section:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.ctx-stack-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.ctx-lang-tag {
|
|
padding: 0.25rem 0.625rem;
|
|
background: hsl(217 91% 60% / 0.15);
|
|
color: hsl(217 91% 50%);
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ctx-framework-tag {
|
|
padding: 0.25rem 0.625rem;
|
|
background: hsl(142 76% 36% / 0.15);
|
|
color: hsl(142 76% 30%);
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ctx-frontend-tag {
|
|
padding: 0.25rem 0.625rem;
|
|
background: hsl(280 68% 60% / 0.15);
|
|
color: hsl(280 68% 45%);
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ctx-backend-tag {
|
|
padding: 0.25rem 0.625rem;
|
|
background: hsl(24 95% 53% / 0.15);
|
|
color: hsl(24 95% 40%);
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ctx-lib-tag {
|
|
padding: 0.25rem 0.625rem;
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--foreground));
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* Conventions section */
|
|
.ctx-conv-section {
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
.ctx-conv-section:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.ctx-conv-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.ctx-conv-items {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ctx-conv-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
padding: 0.5rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.ctx-conv-key {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--primary));
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.ctx-conv-value {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Assets section - New Card Grid Layout */
|
|
.ctx-assets-category {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.ctx-assets-category:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.ctx-assets-cat-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid hsl(var(--border) / 0.3);
|
|
}
|
|
|
|
.ctx-assets-cat-icon {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.ctx-assets-cat-title {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--foreground));
|
|
flex: 1;
|
|
}
|
|
|
|
.ctx-assets-cat-count {
|
|
padding: 0.125rem 0.5rem;
|
|
background: hsl(var(--primary) / 0.1);
|
|
color: hsl(var(--primary));
|
|
border-radius: 9999px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ctx-assets-card-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.ctx-asset-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.ctx-asset-card-path {
|
|
display: inline-block;
|
|
font-size: 0.8rem;
|
|
font-weight: 400;
|
|
color: hsl(var(--foreground));
|
|
padding: 0.5rem 0.75rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border: 1px solid hsl(var(--border) / 0.5);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.ctx-asset-card-badge {
|
|
flex-shrink: 0;
|
|
padding: 0.25rem 0.625rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
text-transform: capitalize;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ctx-relevance-badge {
|
|
background: hsl(142 76% 36% / 0.12);
|
|
color: hsl(142 76% 30%);
|
|
border: 1px solid hsl(142 76% 36% / 0.2);
|
|
}
|
|
|
|
.ctx-role-badge {
|
|
background: hsl(217 91% 60% / 0.1);
|
|
color: hsl(217 91% 45%);
|
|
border: 1px solid hsl(217 91% 60% / 0.2);
|
|
}
|
|
|
|
.ctx-test-badge {
|
|
background: hsl(280 68% 60% / 0.1);
|
|
color: hsl(280 68% 45%);
|
|
border: 1px solid hsl(280 68% 60% / 0.2);
|
|
}
|
|
|
|
/* Legacy list styles - keep for backwards compatibility */
|
|
.ctx-assets-section {
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
.ctx-assets-section:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.ctx-assets-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.ctx-assets-icon {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.ctx-assets-label {
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--foreground));
|
|
flex: 1;
|
|
}
|
|
|
|
.ctx-assets-count {
|
|
padding: 0.125rem 0.5rem;
|
|
background: hsl(var(--muted));
|
|
border-radius: 9999px;
|
|
font-size: 0.65rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.ctx-assets-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.ctx-asset-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
padding: 0.375rem 0.5rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.ctx-asset-path {
|
|
font-size: 0.7rem;
|
|
color: hsl(var(--foreground));
|
|
font-family: var(--font-mono);
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ctx-asset-relevance {
|
|
padding: 0.125rem 0.375rem;
|
|
background: var(--rel-color);
|
|
color: white;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.6rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.ctx-asset-role {
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.6rem;
|
|
font-weight: 500;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.ctx-role-primary {
|
|
background: hsl(var(--primary) / 0.15);
|
|
color: hsl(var(--primary));
|
|
}
|
|
|
|
.ctx-role-secondary {
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.ctx-test-count {
|
|
padding: 0.125rem 0.375rem;
|
|
background: hsl(142 76% 36% / 0.15);
|
|
color: hsl(142 76% 30%);
|
|
border-radius: 0.25rem;
|
|
font-size: 0.6rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.ctx-assets-more {
|
|
font-size: 0.7rem;
|
|
color: hsl(var(--muted-foreground));
|
|
text-align: center;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
/* Dependencies section */
|
|
.ctx-deps-section {
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
.ctx-deps-section:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.ctx-deps-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.ctx-deps-label {
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--foreground));
|
|
flex: 1;
|
|
}
|
|
|
|
.ctx-deps-count {
|
|
padding: 0.125rem 0.5rem;
|
|
background: hsl(var(--muted));
|
|
border-radius: 9999px;
|
|
font-size: 0.65rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.ctx-deps-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.ctx-dep-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.375rem 0.5rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border-radius: 0.25rem;
|
|
font-size: 0.7rem;
|
|
}
|
|
|
|
.ctx-dep-from,
|
|
.ctx-dep-to {
|
|
font-family: var(--font-mono);
|
|
color: hsl(var(--foreground));
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ctx-dep-arrow {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.ctx-dep-type {
|
|
padding: 0.125rem 0.375rem;
|
|
background: hsl(var(--muted));
|
|
border-radius: 0.25rem;
|
|
font-size: 0.6rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.ctx-deps-packages {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.ctx-pkg-tag {
|
|
padding: 0.25rem 0.5rem;
|
|
background: hsl(var(--muted));
|
|
border-radius: 0.25rem;
|
|
font-size: 0.7rem;
|
|
font-family: var(--font-mono);
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.ctx-deps-more {
|
|
font-size: 0.7rem;
|
|
color: hsl(var(--muted-foreground));
|
|
text-align: center;
|
|
padding: 0.25rem;
|
|
}
|
|
|
|
/* Test context section */
|
|
.ctx-test-stats {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.ctx-stat-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0.75rem 1rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border-radius: 0.375rem;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.ctx-stat-value {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: hsl(var(--primary));
|
|
}
|
|
|
|
.ctx-stat-label {
|
|
font-size: 0.65rem;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.ctx-test-frameworks {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.ctx-fw-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
min-width: 100px;
|
|
}
|
|
|
|
.ctx-fw-installed {
|
|
background: hsl(142 76% 36% / 0.1);
|
|
border: 1px solid hsl(142 76% 36% / 0.3);
|
|
}
|
|
|
|
.ctx-fw-missing {
|
|
background: hsl(var(--destructive) / 0.1);
|
|
border: 1px solid hsl(var(--destructive) / 0.3);
|
|
}
|
|
|
|
.ctx-fw-type {
|
|
font-size: 0.65rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ctx-fw-name {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Conflict/Risk section */
|
|
.ctx-risk-badge {
|
|
padding: 0.25rem 0.625rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ctx-risk-low {
|
|
background: hsl(142 76% 36%);
|
|
color: white;
|
|
}
|
|
|
|
.ctx-risk-medium {
|
|
background: hsl(38 92% 50%);
|
|
color: white;
|
|
}
|
|
|
|
.ctx-risk-high {
|
|
background: hsl(0 84% 50%);
|
|
color: white;
|
|
}
|
|
|
|
.ctx-mitigation {
|
|
padding: 0.75rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border-radius: 0.375rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.ctx-mitigation-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
display: block;
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
|
|
.ctx-mitigation-text {
|
|
font-size: 0.8rem;
|
|
color: hsl(var(--foreground));
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.ctx-risk-section {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.ctx-risk-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
display: block;
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
|
|
.ctx-risk-list {
|
|
margin: 0;
|
|
padding-left: 1.25rem;
|
|
font-size: 0.8rem;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.ctx-risk-list li {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.ctx-affected {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.ctx-affected-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
display: block;
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
|
|
.ctx-affected-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.ctx-affected-tag {
|
|
padding: 0.25rem 0.5rem;
|
|
background: hsl(var(--warning) / 0.15);
|
|
color: hsl(38 92% 40%);
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* Mitigation Strategy List */
|
|
.ctx-mitigation-list {
|
|
margin: 0;
|
|
padding-left: 1.5rem;
|
|
font-size: 0.8rem;
|
|
color: hsl(var(--foreground));
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.ctx-mitigation-list li {
|
|
margin-bottom: 0.5rem;
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
.ctx-mitigation-list li:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Dependencies Table */
|
|
.ctx-deps-table {
|
|
border: 1px solid hsl(var(--border) / 0.5);
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.ctx-deps-table-header {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
gap: 1rem;
|
|
padding: 0.625rem 1rem;
|
|
background: hsl(var(--muted) / 0.4);
|
|
border-bottom: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
.ctx-deps-table-header span {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.ctx-deps-table-header .ctx-deps-col-from {
|
|
text-align: left;
|
|
}
|
|
|
|
.ctx-deps-table-header .ctx-deps-col-type {
|
|
text-align: center;
|
|
}
|
|
|
|
.ctx-deps-table-header .ctx-deps-col-to {
|
|
text-align: center;
|
|
}
|
|
|
|
.ctx-deps-table-body {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.ctx-deps-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
gap: 1rem;
|
|
padding: 0.5rem 1rem;
|
|
border-bottom: 1px solid hsl(var(--border) / 0.3);
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.ctx-deps-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.ctx-deps-row:hover {
|
|
background: hsl(var(--muted) / 0.2);
|
|
}
|
|
|
|
.ctx-deps-col-from {
|
|
font-size: 0.8rem;
|
|
color: hsl(var(--foreground));
|
|
word-break: break-word;
|
|
text-align: left;
|
|
}
|
|
|
|
.ctx-deps-col-to {
|
|
font-size: 0.8rem;
|
|
color: hsl(var(--foreground));
|
|
word-break: break-word;
|
|
text-align: center;
|
|
}
|
|
|
|
.ctx-deps-col-type {
|
|
text-align: center;
|
|
}
|
|
|
|
.ctx-deps-type-badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.625rem;
|
|
border-radius: 9999px;
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
background: hsl(var(--muted));
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.ctx-deps-type-composition {
|
|
background: hsl(217 91% 60% / 0.15);
|
|
color: hsl(217 91% 45%);
|
|
}
|
|
|
|
.ctx-deps-type-inheritance {
|
|
background: hsl(142 76% 36% / 0.15);
|
|
color: hsl(142 76% 30%);
|
|
}
|
|
|
|
.ctx-deps-type-produces,
|
|
.ctx-deps-type-provides {
|
|
background: hsl(280 68% 60% / 0.15);
|
|
color: hsl(280 68% 45%);
|
|
}
|
|
|
|
.ctx-deps-type-consumes {
|
|
background: hsl(38 92% 50% / 0.15);
|
|
color: hsl(38 92% 40%);
|
|
}
|
|
|
|
.ctx-deps-type-config-dependency {
|
|
background: hsl(0 84% 60% / 0.12);
|
|
color: hsl(0 84% 45%);
|
|
}
|
|
|
|
.ctx-flow-target code {
|
|
font-size: 0.7rem;
|
|
color: hsl(var(--foreground));
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* Gray text consistency - unified label style */
|
|
.ctx-meta-label,
|
|
.ctx-stack-label,
|
|
.ctx-conv-label,
|
|
.ctx-mitigation-label,
|
|
.ctx-risk-label,
|
|
.ctx-affected-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* ===================================
|
|
Lite Task Drawer Cards
|
|
=================================== */
|
|
.lite-card {
|
|
background: hsl(var(--card));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.lite-card-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));
|
|
}
|
|
|
|
.lite-card-icon {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.lite-card-title {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--foreground));
|
|
margin: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.lite-count-badge {
|
|
padding: 0.125rem 0.5rem;
|
|
background: hsl(var(--primary) / 0.15);
|
|
color: hsl(var(--primary));
|
|
border-radius: 9999px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.lite-card-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Description */
|
|
.lite-description {
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
line-height: 1.6;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Scope */
|
|
.lite-scope-box {
|
|
padding: 0.625rem 0.875rem;
|
|
background: hsl(var(--muted) / 0.5);
|
|
border-radius: 0.375rem;
|
|
border-left: 3px solid hsl(var(--primary));
|
|
}
|
|
|
|
.lite-scope-box code {
|
|
font-size: 0.8rem;
|
|
color: hsl(var(--foreground));
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* Acceptance Checklist */
|
|
.lite-checklist {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.lite-check-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.625rem;
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
.lite-check-item:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.lite-check-icon {
|
|
flex-shrink: 0;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 2px solid hsl(var(--muted-foreground) / 0.4);
|
|
border-radius: 50%;
|
|
font-size: 0.7rem;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.lite-check-text {
|
|
font-size: 0.8rem;
|
|
line-height: 1.5;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Reference */
|
|
.lite-ref-section {
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
.lite-ref-section:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.lite-ref-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--primary));
|
|
text-transform: uppercase;
|
|
display: block;
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
|
|
.lite-ref-value {
|
|
font-size: 0.8rem;
|
|
color: hsl(var(--foreground));
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.lite-ref-files {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.lite-file-tag {
|
|
display: block;
|
|
padding: 0.375rem 0.625rem;
|
|
background: hsl(var(--muted) / 0.5);
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Dependencies */
|
|
.lite-deps-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.lite-dep-tag {
|
|
padding: 0.25rem 0.625rem;
|
|
background: hsl(var(--warning) / 0.15);
|
|
color: hsl(38 92% 40%);
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Implementation Steps */
|
|
.lite-impl-steps {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.lite-impl-step {
|
|
display: flex;
|
|
gap: 0.875rem;
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
.lite-impl-step:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.lite-step-num {
|
|
flex-shrink: 0;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: hsl(var(--primary));
|
|
color: white;
|
|
border-radius: 0.375rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.lite-step-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.lite-step-text {
|
|
margin: 0;
|
|
font-size: 0.8rem;
|
|
line-height: 1.5;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Modification Points */
|
|
.lite-mod-points {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.lite-mod-card {
|
|
padding: 0.875rem 1rem;
|
|
background: hsl(var(--background));
|
|
border: 1px solid hsl(var(--border));
|
|
border-left: 3px solid hsl(var(--primary));
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.lite-mod-header {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.lite-mod-file {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: hsl(var(--primary));
|
|
word-break: break-all;
|
|
}
|
|
|
|
.lite-mod-target {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.375rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.lite-mod-label {
|
|
color: hsl(var(--muted-foreground));
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lite-mod-value {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.lite-mod-change {
|
|
font-size: 0.8rem;
|
|
line-height: 1.5;
|
|
color: hsl(var(--foreground));
|
|
padding-top: 0.375rem;
|
|
border-top: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
/* ==========================================
|
|
SESSION TASK DRAWER STYLES
|
|
========================================== */
|
|
|
|
/* Pre-Analysis Step Meta */
|
|
.lite-step-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-top: 0.375rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.lite-step-label {
|
|
color: hsl(var(--muted-foreground));
|
|
font-weight: 500;
|
|
}
|
|
|
|
.lite-step-value {
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.lite-step-commands {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.lite-cmd-tag {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.625rem;
|
|
background: hsl(var(--muted));
|
|
border-radius: 0.25rem;
|
|
font-size: 0.7rem;
|
|
color: hsl(var(--foreground));
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* Session Implementation Steps */
|
|
.session-impl-steps {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.session-impl-step {
|
|
background: hsl(var(--background));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.session-step-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.75rem 1rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border-bottom: 1px solid hsl(var(--border) / 0.5);
|
|
}
|
|
|
|
.session-step-title {
|
|
flex: 1;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.session-step-desc {
|
|
padding: 0.75rem 1rem;
|
|
font-size: 0.8rem;
|
|
line-height: 1.6;
|
|
color: hsl(var(--muted-foreground));
|
|
border-bottom: 1px solid hsl(var(--border) / 0.3);
|
|
}
|
|
|
|
.session-step-section {
|
|
padding: 0.75rem 1rem;
|
|
border-bottom: 1px solid hsl(var(--border) / 0.3);
|
|
}
|
|
|
|
.session-step-section:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.session-section-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.625rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.session-section-icon {
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Session Modifications List */
|
|
.session-mods-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.session-mod-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.session-mod-change {
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--muted-foreground));
|
|
padding-left: 0.5rem;
|
|
border-left: 2px solid hsl(var(--border));
|
|
}
|
|
|
|
/* Session Logic Flow */
|
|
.session-flow-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.session-flow-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.625rem;
|
|
}
|
|
|
|
.session-flow-num {
|
|
flex-shrink: 0;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: hsl(var(--primary) / 0.15);
|
|
color: hsl(var(--primary));
|
|
border-radius: 50%;
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.session-flow-text {
|
|
font-size: 0.8rem;
|
|
line-height: 1.5;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
/* Session Step Dependencies */
|
|
.session-step-deps {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.625rem 1rem;
|
|
background: hsl(var(--warning) / 0.05);
|
|
}
|
|
|
|
.session-deps-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* Session Files List */
|
|
.session-files-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.375rem;
|
|
}
|
|
|
|
.session-file-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
padding: 0.625rem 0.875rem;
|
|
background: hsl(var(--muted) / 0.3);
|
|
border: 1px solid hsl(var(--border) / 0.5);
|
|
border-radius: 0.375rem;
|
|
text-decoration: none;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.session-file-item:hover {
|
|
background: hsl(var(--muted) / 0.5);
|
|
border-color: hsl(var(--primary) / 0.5);
|
|
}
|
|
|
|
.session-file-icon {
|
|
font-size: 0.875rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.session-file-path {
|
|
flex: 1;
|
|
font-size: 0.8rem;
|
|
color: hsl(var(--foreground));
|
|
word-break: break-all;
|
|
}
|
|
|
|
.session-file-action {
|
|
flex-shrink: 0;
|
|
font-size: 0.75rem;
|
|
color: hsl(var(--primary));
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
}
|
|
|
|
.session-file-item:hover .session-file-action {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Session Test Commands */
|
|
.session-test-commands {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.session-test-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
padding: 0.625rem 0.875rem;
|
|
background: hsl(var(--muted) / 0.2);
|
|
border: 1px solid hsl(var(--border) / 0.5);
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
.session-test-label {
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--primary));
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.session-test-cmd {
|
|
font-size: 0.8rem;
|
|
color: hsl(var(--foreground));
|
|
background: hsl(var(--muted) / 0.5);
|
|
padding: 0.375rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
font-family: var(--font-mono);
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* ==========================================
|
|
TASK STATUS MANAGEMENT
|
|
========================================== */
|
|
|
|
/* Bulk Actions - Inside toolbar */
|
|
.task-bulk-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.bulk-label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: hsl(var(--muted-foreground));
|
|
text-transform: uppercase;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.bulk-action-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.375rem 0.75rem;
|
|
background: hsl(var(--background));
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.375rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
color: hsl(var(--foreground));
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.bulk-action-btn:hover {
|
|
background: hsl(var(--muted));
|
|
border-color: hsl(var(--primary) / 0.5);
|
|
}
|
|
|
|
.bulk-action-btn.completed {
|
|
background: hsl(142 76% 36% / 0.1);
|
|
border-color: hsl(142 76% 36% / 0.3);
|
|
color: hsl(142 76% 30%);
|
|
}
|
|
|
|
.bulk-action-btn.completed:hover {
|
|
background: hsl(142 76% 36% / 0.2);
|
|
}
|
|
|
|
.bulk-icon {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.bulk-divider {
|
|
width: 1px;
|
|
height: 1.5rem;
|
|
background: hsl(var(--border));
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
/* Task Status Control */
|
|
.task-status-control {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.task-status-select {
|
|
padding: 0.375rem 0.625rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
border: 1px solid hsl(var(--border));
|
|
border-radius: 0.375rem;
|
|
background: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
min-width: 120px;
|
|
}
|
|
|
|
.task-status-select:hover {
|
|
border-color: hsl(var(--primary) / 0.5);
|
|
}
|
|
|
|
.task-status-select:focus {
|
|
outline: none;
|
|
border-color: hsl(var(--primary));
|
|
box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
|
|
}
|
|
|
|
.task-status-select.pending {
|
|
background: hsl(var(--muted) / 0.3);
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.task-status-select.in_progress {
|
|
background: hsl(38 92% 50% / 0.15);
|
|
border-color: hsl(38 92% 50% / 0.3);
|
|
color: hsl(38 92% 35%);
|
|
}
|
|
|
|
.task-status-select.completed {
|
|
background: hsl(142 76% 36% / 0.15);
|
|
border-color: hsl(142 76% 36% / 0.3);
|
|
color: hsl(142 76% 30%);
|
|
}
|
|
|
|
/* Toast Notifications */
|
|
.status-toast {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
z-index: 10000;
|
|
animation: toastSlideUp 0.3s ease;
|
|
box-shadow: 0 4px 12px hsl(0 0% 0% / 0.15);
|
|
}
|
|
|
|
.status-toast.success {
|
|
background: hsl(142 76% 36%);
|
|
color: white;
|
|
}
|
|
|
|
.status-toast.error {
|
|
background: hsl(0 72% 51%);
|
|
color: white;
|
|
}
|
|
|
|
.status-toast.info {
|
|
background: hsl(var(--primary));
|
|
color: white;
|
|
}
|
|
|
|
.status-toast.fade-out {
|
|
animation: toastFadeOut 0.3s ease forwards;
|
|
}
|
|
|
|
@keyframes toastSlideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(1rem);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes toastFadeOut {
|
|
to {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(-1rem);
|
|
}
|
|
}
|
|
|
|
/* Task Item Header Adjustments */
|
|
.detail-task-item .task-item-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.detail-task-item .task-title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.detail-task-item .task-title:hover {
|
|
color: hsl(var(--primary));
|
|
}
|
|
|