551a2a3c1e
The GitHub/GitLab import detail panel had no inset of its own, so it sat flush against the window's left edge while FN-8015's resize gutter left a gap on the right only — "Preview" was clipped and the whole header read as misaligned on both the desktop window and the mobile sheet. Give the panel a symmetric inset, letting that existing gutter supply the right side rather than overriding it (which would push the inner scrollbar back into the resize hot zone the gutter protects). Also in the header: `space-between` spread three children apart and flung "Close issue" into the middle, so the label now takes the free space and the two actions stay grouped as a pair. Both actions size from one rule instead of each inheriting its own .btn defaults, at a 40px touch target on mobile where Import is the sheet's primary action. "Preview" becomes a muted eyebrow matching the existing ISSUE #NNNN label. Fix title truncation while here: `.floating-window__title` declared text-overflow: ellipsis but was display:flex, which made the text an anonymous flex item that text-overflow cannot act on, so titles hard-cut mid-word. Every caller passes a plain string, so a block box makes the existing declaration work as written. Finally, the detail title bar kept the raw upstream title while the card below showed the translation — one item displaying two different titles at once. Both now read importTranslation.display.title, gated on activeTab to match translateSelection so an item's number is never paired with the other tab's title. The existing translation test now asserts both surfaces in both directions; it fails without this change. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1425 lines
33 KiB
CSS
1425 lines
33 KiB
CSS
/* === GitHub Import Modal ===
|
|
Note: Some hardcoded colors below (e.g. #238636, #2ea043, #f0883e, #1f6feb)
|
|
are intentional GitHub brand colors and should NOT be replaced with design tokens. */
|
|
/* Compact Toolbar Layout */
|
|
.github-import-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-md);
|
|
padding: var(--space-md) var(--space-lg);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.github-import-toolbar__zone {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.github-import-toolbar__zone--remote {
|
|
flex: 0 0 auto;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.github-import-toolbar__zone--filter {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.github-import-toolbar__zone--filter input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
color: var(--text);
|
|
padding: var(--space-sm) var(--space-md);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.github-import-toolbar__zone--filter input:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
|
|
outline: none;
|
|
}
|
|
|
|
.github-import-toolbar__zone--filter input:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.github-import-toolbar__zone--filter input::placeholder {
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
.github-import-toolbar__zone--action {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.github-import-toolbar__loading {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.github-import-toolbar__no-remote {
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Remote pill for single remote */
|
|
.github-import-remote-pill {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.github-import-remote-pill__name {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.github-import-remote-pill__repo {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* Remote select dropdown */
|
|
.github-import-remote-select select {
|
|
min-width: 180px;
|
|
padding: var(--space-sm) var(--space-md);
|
|
font-size: 13px;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
color: var(--text);
|
|
}
|
|
|
|
.github-import-remote-select select:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
|
|
}
|
|
|
|
/* Load button */
|
|
.github-import-load-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-sm);
|
|
min-height: 36px;
|
|
padding: var(--space-sm) var(--space-md);
|
|
}
|
|
|
|
.github-import-load-button span {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.github-import-list-pane {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.github-import-list-pane .issue-main,
|
|
.github-import-list-pane .issue-heading-row {
|
|
min-width: 0;
|
|
}
|
|
.github-import-list-pane .issue-title {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.github-import-list-pane .issue-labels {
|
|
flex-wrap: wrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*
|
|
FNXC:GitHubImport 2026-07-15-18:20:
|
|
The detail panel is the FloatingWindow's only child and owns its own inset — without one the Preview header rendered flush against the window's left edge while FN-8015's resize gutter left a lone gap on the right, so the header read as mis-aligned on both the desktop window and the mobile sheet.
|
|
padding-inline-end is deliberately 0: FN-8015 already reserves var(--space-lg) of inline-end margin on the shared .floating-window__body to hold a hosted scrollbar clear of the east/north-east/south-east resize hot zones, and that gutter supplies this panel's right inset. Matching padding-inline-start to the same token makes the inset symmetric without overriding the shared body (which would push the inner scroller back into the hot zone).
|
|
If that body gutter ever changes token, change padding-inline-start with it.
|
|
Padding lives on the panel rather than the pane content so header, toast, and scrolling body share one inset and the header divider is inset with them.
|
|
*/
|
|
.github-import-detail-panel {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: var(--space-lg);
|
|
padding-inline-end: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*
|
|
FNXC:GitHubImport 2026-07-15-18:20:
|
|
Header is one label + a right-aligned action cluster. The label takes the free space (margin-inline-end:auto) rather than the container using space-between, so Close issue and Import stay grouped as a pair at the end instead of Close issue being flung into the middle whenever both actions render.
|
|
*/
|
|
.github-import-pane-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding-bottom: var(--space-sm);
|
|
margin-bottom: var(--space-md);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
/*
|
|
FNXC:GitHubImport 2026-07-15-18:20:
|
|
"Preview" / "Issues" is a section label, not a peer of the issue title inside the card. The muted uppercase eyebrow matches .preview-meta so the two read as one type system, and it stops the label competing with the primary Import action for emphasis.
|
|
*/
|
|
.github-import-pane-header h4 {
|
|
margin-inline-end: auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/*
|
|
FNXC:GitHubImport 2026-07-15-18:20:
|
|
Both header actions size from one rule so the secondary Close issue and the primary Import share a baseline and an identical height — previously each inherited only .btn/.btn-primary defaults and rendered visibly mismatched. min-height keeps the pair a comfortable target without growing the header past the single-line label.
|
|
*/
|
|
.github-import-pane-header .btn {
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-xs);
|
|
min-height: 30px;
|
|
padding: 0 var(--space-md);
|
|
font-size: 12px;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/*
|
|
FNXC:GitHubImport 2026-06-23-03:15:
|
|
Transient inline toast confirming issue close. Sits directly under the preview header; success/error use theme tokens only. Auto-dismisses via component timer.
|
|
*/
|
|
.github-import-close-toast {
|
|
margin-bottom: var(--space-sm);
|
|
padding: var(--space-xs) var(--space-sm);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.github-import-close-toast--success {
|
|
border-color: var(--color-success);
|
|
color: var(--color-success);
|
|
}
|
|
|
|
.github-import-close-toast--error {
|
|
border-color: var(--color-error);
|
|
color: var(--color-error);
|
|
}
|
|
|
|
/*
|
|
FNXC:GitHubImportTranslate 2026-07-14-12:00:
|
|
Opt-in translation banner for import preview when content language differs from the dashboard locale.
|
|
Compact row under metadata so title/body stay readable; error uses the same token language as the close toast.
|
|
*/
|
|
.github-import-translate {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
margin: var(--space-sm) 0;
|
|
padding: var(--space-sm) var(--space-md);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: color-mix(in srgb, var(--accent) 8%, var(--surface));
|
|
}
|
|
|
|
.github-import-translate__row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.github-import-translate__icon {
|
|
flex: 0 0 auto;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.github-import-translate__message {
|
|
flex: 1 1 12rem;
|
|
min-width: 0;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
color: var(--text);
|
|
}
|
|
|
|
.github-import-translate__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.github-import-translate__action,
|
|
.github-import-translate__dismiss {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.github-import-translate__error {
|
|
font-size: 12px;
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.github-import-pane-content {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Wider modal for two-pane layout */
|
|
.modal.github-import-modal {
|
|
width: min(90vw, 1200px);
|
|
max-width: 95vw;
|
|
min-width: 480px;
|
|
height: 80vh;
|
|
min-height: 480px;
|
|
max-height: calc(100dvh - var(--overlay-padding-top, 10vh) - 16px);
|
|
overflow: hidden;
|
|
resize: both;
|
|
}
|
|
|
|
.github-import-modal__header {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.github-import-modal__subtitle {
|
|
margin-top: var(--space-xs);
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.github-import-modal__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
padding: var(--space-lg) var(--space-xl);
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.github-import-modal__actions {
|
|
align-items: center;
|
|
}
|
|
|
|
/*
|
|
FNXC:ImportTasks 2026-06-22-12:45:
|
|
The Import Tasks sub-header tab bar should match the Artifacts view's button bar: plain body row, tokenized border/surface buttons, todo-accent active state, and no card-like filled strip under the main header.
|
|
*/
|
|
.github-import-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: 0;
|
|
border-bottom: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.github-import-tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-xs) var(--space-sm);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.github-import-tab:hover:not(:disabled) {
|
|
background: var(--card-hover);
|
|
color: var(--text);
|
|
}
|
|
|
|
.github-import-tab.active {
|
|
color: var(--todo);
|
|
border-color: var(--todo);
|
|
background: color-mix(in srgb, var(--todo) 12%, transparent);
|
|
}
|
|
|
|
.github-import-tab:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.github-import-filter-hint {
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.pull-branch-info {
|
|
display: block;
|
|
margin-top: 2px;
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-family: var(--font-mono, monospace);
|
|
}
|
|
|
|
.preview-branch {
|
|
margin-bottom: var(--space-sm);
|
|
padding: var(--space-sm);
|
|
background: var(--surface);
|
|
border-radius: var(--radius-sm);
|
|
font-size: 12px;
|
|
font-family: var(--font-mono, monospace);
|
|
}
|
|
|
|
.preview-branch strong {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Legacy section styles - kept for compatibility */
|
|
.github-import-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
padding: var(--space-lg);
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.github-import-section__header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.github-import-section__header h4 {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
.github-import-section__helper {
|
|
margin-top: var(--space-xs);
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.github-import-repository-pill {
|
|
min-width: 180px;
|
|
padding: var(--space-sm) var(--space-md);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
text-align: right;
|
|
}
|
|
|
|
.github-import-repository-pill__label {
|
|
display: block;
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.github-import-repository-pill__value {
|
|
display: block;
|
|
margin-top: 2px;
|
|
color: var(--text);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.github-import-controls-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.github-import-form-group {
|
|
margin-top: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.github-import-form-group:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.github-import-form-group--remote {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.github-import-form-group--action {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.github-import-remote-card {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
padding: var(--space-md);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.github-import-remote-card__eyebrow {
|
|
color: var(--text-muted);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.github-import-remote-card__title {
|
|
margin-top: 2px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.github-import-remote-card__title span {
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.github-import-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--color-success);
|
|
border-radius: var(--radius-lg);
|
|
color: var(--color-success);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.github-import-command {
|
|
display: block;
|
|
padding: var(--space-sm) var(--space-md);
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
color: var(--text);
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.form-error {
|
|
margin: var(--space-md) 0;
|
|
padding: var(--space-sm) var(--space-md);
|
|
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
|
border: 1px solid var(--color-error);
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-error);
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.github-import-banner {
|
|
margin: 0;
|
|
}
|
|
|
|
.github-import-section--results,
|
|
.github-import-section--preview {
|
|
min-height: 100%;
|
|
}
|
|
|
|
.github-import-results-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: var(--space-sm);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.github-import-results-meta span {
|
|
padding: var(--space-xs) var(--space-sm);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface);
|
|
}
|
|
|
|
/*
|
|
FNXC:GitHubImport 2026-07-15-16:30:
|
|
Hide imported must remain a compact, reachable control beside loaded-result metadata and within the GitLab toolbar, including
|
|
when either layout wraps on mobile. Token-based spacing keeps it consistent with the surrounding import controls.
|
|
*/
|
|
.github-import-hide-imported {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.github-import-hide-imported input {
|
|
margin: 0;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
.github-import-state {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-md);
|
|
padding: var(--space-md);
|
|
border: 1px dashed var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.github-import-state strong {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.github-import-state span {
|
|
display: block;
|
|
margin-top: 2px;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.github-import-state--loading {
|
|
border-style: solid;
|
|
}
|
|
|
|
.github-import-state--warning {
|
|
border-style: solid;
|
|
}
|
|
|
|
.github-import-state--error {
|
|
border-style: solid;
|
|
border-color: var(--color-error);
|
|
}
|
|
|
|
.github-import-state--error strong {
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.github-import-state--empty,
|
|
.github-import-state--idle {
|
|
border-color: var(--border);
|
|
}
|
|
|
|
.issues-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: none;
|
|
overflow-y: auto;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.issue-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-md);
|
|
padding: var(--space-md);
|
|
border-bottom: 1px solid var(--border);
|
|
cursor: pointer;
|
|
transition:
|
|
background var(--transition-fast),
|
|
border-color var(--transition-fast),
|
|
box-shadow var(--transition-fast);
|
|
}
|
|
|
|
.issue-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.issue-item input[type="radio"] {
|
|
margin-top: 2px;
|
|
flex-shrink: 0;
|
|
accent-color: var(--in-progress);
|
|
}
|
|
|
|
.issue-item.imported input[type="radio"] {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.issue-item:hover:not(.imported) {
|
|
background: var(--card-hover);
|
|
}
|
|
|
|
.issue-item.selected {
|
|
background: color-mix(in srgb, var(--in-progress) 12%, transparent);
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--in-progress) 35%, transparent);
|
|
}
|
|
|
|
.issue-item.imported {
|
|
opacity: 0.65;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.issue-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.issue-heading-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
}
|
|
|
|
.issue-number {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.issue-title {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.issue-labels {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: var(--space-sm);
|
|
}
|
|
|
|
.label-chip {
|
|
padding: 3px 8px;
|
|
font-size: 11px;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.imported-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
align-self: center;
|
|
padding: 4px 10px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
border: 1px solid var(--color-success);
|
|
border-radius: var(--radius-lg);
|
|
color: var(--color-success);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.issue-preview {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-lg);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
|
|
.preview-meta {
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.preview-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.preview-body {
|
|
font-size: 13px;
|
|
color: var(--text-muted);
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/*
|
|
FNXC:GitHubImport 2026-06-22-18:30:
|
|
Full-body preview metadata row (state badge, author, GitHub link) plus the markdown body wrapper.
|
|
The markdown variant must NOT pre-wrap/clamp — MailboxMessageContent emits real block elements (p, ul, pre, table), so reset the plain-text white-space and let the body take full height; the preview pane already owns the vertical scroll.
|
|
*/
|
|
.preview-metadata {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.preview-state-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: capitalize;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.preview-state-badge--open {
|
|
color: var(--color-success, var(--accent));
|
|
border-color: color-mix(in srgb, var(--color-success, var(--accent)) 40%, transparent);
|
|
}
|
|
|
|
.preview-state-badge--closed {
|
|
color: var(--color-error, var(--text-muted));
|
|
border-color: color-mix(in srgb, var(--color-error, var(--text-muted)) 40%, transparent);
|
|
}
|
|
|
|
.preview-state-badge--merged {
|
|
color: var(--accent);
|
|
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
|
|
}
|
|
|
|
.preview-author {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.preview-url {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.preview-url:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.preview-labels {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.preview-body--markdown {
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
color: var(--text);
|
|
}
|
|
|
|
.preview-body--markdown :where(p, ul, ol, pre, table, blockquote, h1, h2, h3, h4) {
|
|
margin: 0 0 var(--space-sm);
|
|
}
|
|
|
|
.preview-body--markdown :where(p, ul, ol, pre, table, blockquote, h1, h2, h3, h4):last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/*
|
|
FNXC:GitHubImport 2026-06-23-01:00:
|
|
Checks + Comments sections live below the PR body in the scrollable preview pane. Theme tokens only — check pills color via --success/--danger/--warning/--text-muted, mirroring the preview-state-badge token fallbacks.
|
|
*/
|
|
.github-import-pr-checks,
|
|
.github-import-pr-comments {
|
|
margin-top: var(--space-md);
|
|
padding-top: var(--space-md);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.preview-section-heading {
|
|
margin: 0 0 var(--space-sm);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.preview-detail-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
color: var(--text-muted);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.preview-detail-error {
|
|
color: var(--color-error, var(--text-muted));
|
|
font-size: 12px;
|
|
}
|
|
|
|
.preview-detail-empty {
|
|
color: var(--text-dim);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.github-import-pr-checks__list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.github-import-pr-check-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.github-import-pr-check-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
min-width: 64px;
|
|
justify-content: center;
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: capitalize;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
}
|
|
|
|
.github-import-pr-check-pill--success {
|
|
color: var(--color-success, var(--accent));
|
|
border-color: color-mix(in srgb, var(--color-success, var(--accent)) 40%, transparent);
|
|
}
|
|
|
|
.github-import-pr-check-pill--failure {
|
|
color: var(--color-error, var(--text-muted));
|
|
border-color: color-mix(in srgb, var(--color-error, var(--text-muted)) 40%, transparent);
|
|
}
|
|
|
|
.github-import-pr-check-pill--pending {
|
|
color: var(--color-warning, var(--accent));
|
|
border-color: color-mix(in srgb, var(--color-warning, var(--accent)) 40%, transparent);
|
|
}
|
|
|
|
.github-import-pr-check-pill--neutral {
|
|
color: var(--text-muted);
|
|
border-color: color-mix(in srgb, var(--text-muted) 40%, transparent);
|
|
}
|
|
|
|
.github-import-pr-check-name {
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
word-break: break-word;
|
|
}
|
|
|
|
a.github-import-pr-check-name:hover {
|
|
color: var(--accent);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.github-import-pr-comments__list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.github-import-pr-comment {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-sm) var(--space-md);
|
|
background: var(--card);
|
|
}
|
|
|
|
.github-import-pr-comment__author {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.github-import-pr-comment__body {
|
|
color: var(--text);
|
|
}
|
|
|
|
/*
|
|
FNXC:GitHubImport 2026-06-23-03:30:
|
|
Per-comment meta row: avatar, author, human/bot badge, and a readable timestamp. The active comment briefly highlights when reached via prev/next nav.
|
|
Across the thread: a top filter (All/Human/Bot) and prev/next chevrons live in the comments header. Theme tokens only.
|
|
*/
|
|
.github-import-pr-comment__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
margin-bottom: var(--space-xs);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.github-import-comment__avatar {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
flex: 0 0 auto;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.github-import-comment__avatar-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.github-import-comment__type-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
padding: 1px 6px;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.github-import-comment__type-badge--human {
|
|
color: var(--text-muted);
|
|
border-color: color-mix(in srgb, var(--text-muted) 40%, transparent);
|
|
}
|
|
|
|
.github-import-comment__type-badge--bot {
|
|
color: var(--color-warning, var(--accent));
|
|
border-color: color-mix(in srgb, var(--color-warning, var(--accent)) 40%, transparent);
|
|
}
|
|
|
|
.github-import-comment__time {
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
margin-left: auto;
|
|
}
|
|
|
|
.github-import-pr-comment--active {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
transition: outline-color 0.3s ease;
|
|
}
|
|
|
|
.github-import-pr-comments__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.github-import-comments-nav {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.github-import-comments-nav__pos {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
min-width: 36px;
|
|
text-align: center;
|
|
}
|
|
|
|
.github-import-comments-nav__btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.github-import-comments-nav__btn:hover:not(:disabled) {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.github-import-comments-nav__btn:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.github-import-comments-filter {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin: 0 0 var(--space-sm);
|
|
padding: 2px;
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.github-import-comments-filter__chip {
|
|
padding: 2px 10px;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: var(--radius-sm);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.github-import-comments-filter__chip:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.github-import-comments-filter__chip.active {
|
|
background: var(--accent);
|
|
color: var(--accent-text, #fff);
|
|
}
|
|
|
|
/* Light theme overrides for GitHub import components */
|
|
[data-theme="light"] .github-import-tabs {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
[data-theme="light"] .github-import-tab.active {
|
|
background: var(--card);
|
|
border-color: var(--border);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
[data-theme="light"] .github-import-toolbar {
|
|
background: var(--bg-secondary);
|
|
border-bottom-color: var(--border);
|
|
}
|
|
|
|
[data-theme="light"] .github-import-toolbar__zone--filter input {
|
|
background: var(--card);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
[data-theme="light"] .github-import-toolbar__zone--filter input:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--in-progress) 15%, transparent);
|
|
}
|
|
|
|
[data-theme="light"] .issues-list {
|
|
background: var(--card);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
[data-theme="light"] .issue-item:hover:not(.imported) {
|
|
background: var(--card-hover);
|
|
}
|
|
|
|
[data-theme="light"] .issue-item.selected {
|
|
background: color-mix(in srgb, var(--in-progress) 8%, transparent);
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--in-progress) 30%, transparent);
|
|
}
|
|
|
|
[data-theme="light"] .issue-item.imported input[type="radio"] {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
[data-theme="light"] .github-import-state {
|
|
background: var(--bg-secondary);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
[data-theme="light"] .issue-preview {
|
|
background: var(--bg-secondary);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
[data-theme="light"] .label-chip {
|
|
background: var(--bg-secondary);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
/* Responsive breakpoints */
|
|
@media (max-width: 640px) {
|
|
/* Full-screen sheet on mobile — drop overlay padding so the modal
|
|
actually fills the viewport instead of being pushed below it.
|
|
FNXC:GitHubImport 2026-06-22-16:00: scope the viewport-takeover to the
|
|
NON-embedded (dialog) presentation via :not(.github-import-modal--embedded).
|
|
The embedded view lives inside the main-content pane (between the mobile
|
|
Header and MobileNavBar); without the guard its base .github-import-modal
|
|
class matched these 100vw/100dvh rules and covered the whole screen. The
|
|
embedded panel keeps its own 100%-of-pane sizing from the embedded block
|
|
below. */
|
|
.modal-overlay:has(.github-import-modal:not(.github-import-modal--embedded)) {
|
|
padding-top: 0;
|
|
align-items: stretch;
|
|
justify-content: stretch;
|
|
}
|
|
|
|
.modal.github-import-modal:not(.github-import-modal--embedded) {
|
|
width: 100vw;
|
|
min-width: 0;
|
|
max-width: 100vw;
|
|
height: 100dvh;
|
|
min-height: 0;
|
|
max-height: 100dvh;
|
|
margin: 0;
|
|
border: none;
|
|
border-radius: 0;
|
|
resize: none;
|
|
}
|
|
|
|
.github-import-modal__body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
padding: var(--space-md);
|
|
gap: var(--space-md);
|
|
}
|
|
|
|
.github-import-toolbar {
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-sm);
|
|
}
|
|
|
|
.github-import-toolbar__zone--remote {
|
|
flex: 1 1 100%;
|
|
order: 1;
|
|
}
|
|
|
|
.github-import-toolbar__zone--filter {
|
|
flex: 1 1 auto;
|
|
order: 2;
|
|
min-width: 140px;
|
|
}
|
|
|
|
.github-import-toolbar__zone--action {
|
|
flex: 0 0 auto;
|
|
order: 3;
|
|
}
|
|
|
|
.github-import-remote-select select {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.github-import-section {
|
|
padding: var(--space-md);
|
|
}
|
|
|
|
.github-import-section__header {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.github-import-repository-pill {
|
|
width: 100%;
|
|
min-width: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.github-import-controls-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.github-import-results-meta {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
|
|
.issue-item {
|
|
flex-wrap: wrap;
|
|
min-height: 36px;
|
|
}
|
|
|
|
.imported-badge {
|
|
align-self: flex-start;
|
|
margin-left: 28px;
|
|
}
|
|
|
|
.issues-list {
|
|
max-height: 50vh;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
@keyframes github-import-spinner-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/*
|
|
FNXC:RightDockEmbedding 2026-06-22-00:00:
|
|
Right-dock redesign renders the GitHub import surface inline in the main content area instead of as a fixed popup overlay.
|
|
The embedded root is a plain flow box that fills the host; the inner shell sheds overlay-only chrome (fixed sizing, box-shadow, rounded corners, resize) and fills 100% so the main panel owns the frame. No close button is rendered in embedded mode.
|
|
*/
|
|
.github-import-embedded.right-dock-embedded-view {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
/*
|
|
FNXC:ImportTasks 2026-06-22-16:05:
|
|
Import Tasks is a full main-content view, not a modal card. Match Skills/other view bodies by letting the host read as the dashboard background while the shared header owns the surface band.
|
|
*/
|
|
background: var(--bg);
|
|
}
|
|
|
|
/*
|
|
FNXC:ViewHeader 2026-06-23-04:15:
|
|
Embedded root drops its uniform --space-lg padding so the header can span edge-to-edge like the canonical ViewHeader; the body re-applies a horizontal inset below. This keeps the resizable list/preview/comments work intact (only the outer padding moves to the body).
|
|
*/
|
|
.github-import-modal.github-import-modal--embedded {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
max-width: none;
|
|
min-width: 0;
|
|
max-height: none;
|
|
min-height: 0;
|
|
position: static;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
resize: none;
|
|
padding: 0;
|
|
background: var(--bg);
|
|
border: none;
|
|
}
|
|
|
|
/*
|
|
FNXC:ViewHeader 2026-06-23-04:15:
|
|
Import Tasks embedded header now adopts the canonical ViewHeader chrome — edge-to-edge --surface bg, no bottom divider, --space-lg/--space-xl padding, and the shared --view-header-min-height (≈61px border-box) — so it matches Agents/Mailbox/Missions/Automations height + padding exactly. (Previously a plain padding-bottom title row with no surface/min-height.)
|
|
*/
|
|
.github-import-modal__embedded-header {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-md);
|
|
min-height: var(--view-header-min-height);
|
|
padding: var(--space-lg) var(--space-xl);
|
|
background: var(--surface);
|
|
border-bottom: none;
|
|
}
|
|
|
|
.github-import-modal__embedded-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
min-width: 0;
|
|
margin: 0;
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* FNXC:ViewHeader 2026-06-23-04:15: Canonical --todo leading-icon tint at size 20, matching every other view header. */
|
|
.github-import-modal__embedded-title svg {
|
|
flex-shrink: 0;
|
|
color: var(--todo);
|
|
}
|
|
|
|
/* Body re-applies the horizontal + bottom inset the now-edge-to-edge header no longer provides. */
|
|
.github-import-modal--embedded .github-import-modal__body {
|
|
padding: var(--space-lg) var(--space-xl) var(--space-lg);
|
|
background: var(--bg);
|
|
}
|
|
|
|
.github-import-gitlab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-3);
|
|
min-height: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.github-import-gitlab__workspace {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: var(--spacing-3);
|
|
min-height: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
.github-import-provider,
|
|
.github-import-gitlab .github-import-toolbar {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.github-import-gitlab__workspace {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/*
|
|
FNXC:GitHubImport 2026-07-15-18:20:
|
|
This is the breakpoint where the detail FloatingWindow becomes a full-screen sheet. The panel's var(--space-lg) inset already reads as a conventional mobile gutter, so only the actions change: they grow to a 40px touch target because the desktop 30px pair is a mouse-sized hit area and Import is the sheet's primary action.
|
|
*/
|
|
.github-import-pane-header .btn {
|
|
min-height: 40px;
|
|
padding: 0 var(--space-md);
|
|
font-size: 13px;
|
|
}
|
|
}
|