feat(integrations): add multi-provider board and issue integrations
Add backend integration modules to discover, read, and modify provider-hosted boards, issues, and comments across multiple providers. Expose Tauri commands for board discovery, listing, and card moves, and implement safe issue actions and comment APIs. Wire new Svelte UI components to render boards, issue centers, comments, labels, and assignees, and add sanitized markdown rendering. - Add board discovery, board reading, and card-move APIs - Add Svelte components and styles for integrated board UI - Use marked + DOMPurify for safe markdown rendering
This commit is contained in:
@@ -0,0 +1,253 @@
|
||||
/* Shared visual system for the issue list, native boards and their inspectors. */
|
||||
.issue-center {
|
||||
--issue-muted: var(--color-ink-dim);
|
||||
--issue-canvas: var(--color-surface-solid);
|
||||
--issue-line: var(--color-border-subtle);
|
||||
display:flex;flex:1;min-height:0;min-width:0;flex-direction:column;overflow:hidden;
|
||||
background:var(--issue-canvas);color:var(--color-ink);
|
||||
font:400 13px/1.5 var(--font-sans);
|
||||
-webkit-font-smoothing:antialiased;
|
||||
}
|
||||
.issue-center * {box-sizing:border-box}
|
||||
.issue-center button,.issue-center input {font-family:inherit;font-size:12px;font-weight:400;line-height:1.4}
|
||||
.issue-center button {cursor:pointer;transition:background 140ms,border-color 140ms,color 140ms}
|
||||
.issue-center button:disabled {cursor:default;opacity:.5}
|
||||
.issue-center button:focus-visible,.issue-center input:focus-visible {outline:2px solid var(--color-accent);outline-offset:2px}
|
||||
.issue-center h1,.issue-center h2,.issue-center h3,.issue-center p {margin:0}
|
||||
.issue-center h1 {font-size:20px;font-weight:650;line-height:1.3;letter-spacing:-.4px}
|
||||
.issue-center h2 {font-size:18px;font-weight:600;line-height:1.45;letter-spacing:-.25px;overflow-wrap:anywhere}
|
||||
.issue-center h3 {font-size:12px;font-weight:600;line-height:1.5}
|
||||
.issue-center small {font-size:11px;line-height:1.5;color:var(--issue-muted)}
|
||||
.issue-center .workspace-heading {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 24px 8px;flex-shrink:0}
|
||||
.issue-center .workspace-title {display:flex;align-items:center;gap:13px;min-width:0}
|
||||
.issue-center .workspace-title p {color:var(--issue-muted);font-size:12px;margin-top:4px}
|
||||
.issue-center .workspace-symbol {display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;color:var(--color-accent);border:1px solid color-mix(in srgb,var(--color-accent) 55%,transparent);border-radius:6px;background:color-mix(in srgb,var(--color-accent) 5%,transparent)}
|
||||
.issue-center .workspace-button {display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;padding:6px 10px;white-space:nowrap;border:1px solid var(--color-border);border-radius:4px;background:transparent;color:var(--color-ink-muted);box-shadow:none}
|
||||
.issue-center .workspace-button:hover:not(:disabled) {background:var(--color-surface-hover);border-color:var(--color-border-input);color:var(--color-ink)}
|
||||
.issue-center .workspace-button.active {color:var(--color-accent)}
|
||||
.issue-center .workspace-button svg {flex-shrink:0}
|
||||
.issue-center .icon-button {width:32px;min-width:32px;padding:0}
|
||||
.issue-center .workspace-navigation {display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;padding:0 24px;border-bottom:1px solid var(--issue-line);flex-shrink:0}
|
||||
.issue-center .view-toggle {display:flex;gap:6px;align-self:stretch;margin-left:-12px}
|
||||
.issue-center .view-toggle button {position:relative;min-height:40px;padding:0 14px;background:transparent;border:0;border-radius:0;color:var(--issue-muted);font-weight:550}
|
||||
.issue-center .view-toggle button.active {color:var(--color-accent)}
|
||||
.issue-center .view-toggle button.active:after {position:absolute;content:"";bottom:-1px;left:0;right:0;height:2px;background:var(--color-accent)}
|
||||
.issue-center .view-toggle button:hover {color:var(--color-ink)}
|
||||
.issue-center .source-select {width:190px;flex:0 1 190px}
|
||||
.issue-center .source-select button,.issue-center .state-select button {border-radius:4px;font-size:12px;font-weight:400;min-height:32px;background:transparent}
|
||||
.issue-center .workspace-search {display:flex;align-items:center;gap:9px;min-width:0;height:34px;padding:0 10px;border:1px solid var(--color-border);border-radius:4px;color:var(--issue-muted);background:color-mix(in srgb,var(--color-surface) 35%,transparent)}
|
||||
.issue-center .workspace-search:focus-within {border-color:var(--color-accent)}
|
||||
.issue-center .workspace-search svg {flex-shrink:0}
|
||||
.issue-center .workspace-search input {min-width:0;width:100%;height:100%;border:0;border-radius:0;outline:0;background:transparent;color:var(--color-ink);padding:0}
|
||||
.issue-center input::placeholder {color:var(--issue-muted);opacity:1}
|
||||
.issue-center .workspace-notice {margin:0 24px 12px;padding:10px 12px;border:1px solid var(--issue-line);border-radius:4px;color:var(--color-ink-muted);font-size:12px;overflow-wrap:anywhere}
|
||||
.issue-center .workspace-notice.error {border-color:color-mix(in srgb,#d6a555 45%,transparent);background:color-mix(in srgb,#d6a555 4%,transparent)}
|
||||
.issue-center .workspace-notice p {margin-top:4px;color:var(--issue-muted)}
|
||||
.issue-center .issue-content {display:flex;flex:1;min-height:0;min-width:0;position:relative;overflow:hidden}
|
||||
.issue-center .issue-main {display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}
|
||||
.issue-center .issue-toolbar {display:flex;align-items:center;gap:10px;padding:12px 24px 10px;flex-shrink:0}
|
||||
.issue-center .issue-toolbar .workspace-search {width:360px;max-width:55%;flex:0 1 360px}
|
||||
.issue-center .state-select {flex:0 0 150px;width:150px}
|
||||
.issue-center .issue-list {flex:0 1 auto;min-height:0;overflow:auto;padding:0 24px}
|
||||
.issue-center .issue-table-heading,.issue-center .issue-row {display:grid;grid-template-columns:minmax(0,1fr) 145px 130px;gap:18px;align-items:center;text-align:left}
|
||||
.issue-center .issue-table-heading {min-height:32px;padding:0 14px 0 16px;color:var(--issue-muted);font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.65px;background:color-mix(in srgb,var(--color-surface) 35%,transparent);border-radius:4px 4px 0 0;border-bottom:1px solid var(--issue-line);position:sticky;top:0;z-index:1}
|
||||
.issue-center .issue-row {position:relative;width:100%;min-height:56px;padding:8px 14px 8px 16px;border:0;border-bottom:1px solid var(--issue-line);border-radius:0;color:var(--color-ink);background:transparent;box-shadow:none}
|
||||
.issue-center .issue-row:hover {background:color-mix(in srgb,var(--color-surface-hover) 55%,transparent)}
|
||||
.issue-center .issue-row.selected {background:color-mix(in srgb,var(--color-accent) 9%,transparent);box-shadow:inset 2px 0 var(--color-accent)}
|
||||
.issue-center .issue-identity {display:flex;min-width:0;gap:18px;align-items:center}
|
||||
.issue-center .issue-number {font-family:var(--font-mono);color:var(--issue-muted);font-size:11px;font-weight:400;white-space:nowrap}
|
||||
.issue-center .issue-identity>.issue-number {flex:0 0 44px}
|
||||
.issue-center .issue-text {display:grid;grid-template-columns:minmax(0,320px) auto;gap:3px 12px;flex:1;max-width:465px;min-width:0;align-items:center}
|
||||
.issue-center .issue-text strong {font-size:13px;line-height:1.45;font-weight:550;overflow-wrap:anywhere;grid-column:1}
|
||||
.issue-center .issue-text>small {grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.issue-center .issue-text>.issue-labels {grid-column:2;grid-row:1 / 3;max-width:145px;justify-content:flex-end}
|
||||
.issue-center .issue-status {display:flex;align-items:center;gap:9px;font-size:12px;color:var(--color-ink-muted);min-width:0;overflow-wrap:anywhere}
|
||||
.issue-center .status-dot {display:block;width:13px;height:13px;border:2px solid var(--issue-muted);border-radius:50%;flex:0 0 13px}
|
||||
.issue-center [data-tone="active"] {--status-color:#48cef0}
|
||||
.issue-center [data-tone="review"] {--status-color:#ffb52e}
|
||||
.issue-center [data-tone="done"] {--status-color:#6fe480}
|
||||
.issue-center [data-tone="neutral"] {--status-color:var(--issue-muted)}
|
||||
.issue-center .issue-status .status-dot {border-color:var(--status-color)}
|
||||
.issue-center .issue-person {display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:12px;font-weight:400;color:var(--color-ink-muted)}
|
||||
.issue-center .issue-avatar {display:grid;place-items:center;width:23px;height:23px;flex:0 0 23px;border-radius:50%;border:1px solid color-mix(in srgb,var(--color-ink-muted) 20%,transparent);background:color-mix(in srgb,var(--color-ink-muted) 25%,var(--color-surface));font-size:10px;font-weight:550;color:var(--color-ink)}
|
||||
.issue-center .person-name {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.issue-center .unassigned {color:var(--color-ink-faint)}
|
||||
.issue-center .issue-labels {display:flex;flex-wrap:wrap;gap:4px;min-width:0}
|
||||
.issue-center .issue-label {padding:2px 6px;border-radius:4px;font-size:10px;line-height:1.5;letter-spacing:.1px;color:var(--color-ink-muted);background:var(--color-surface-dim);overflow-wrap:anywhere;font-weight:400}
|
||||
.issue-center .issue-label[data-tone="red"] {background:#9e3d43;color:#fff0f1}
|
||||
.issue-center .issue-label[data-tone="blue"] {background:#3e5699;color:#eef2ff}
|
||||
:root[data-theme="light"] .issue-center .issue-label[data-tone="red"] {color:#972e3c;background:#fbe5e8}
|
||||
:root[data-theme="light"] .issue-center .issue-label[data-tone="blue"] {color:#3753a4;background:#e8edfc}
|
||||
.issue-center .issue-footer {display:flex;justify-content:space-between;gap:16px;padding:12px 24px;color:var(--issue-muted);font-size:11px;flex-shrink:0}
|
||||
.issue-center .load-more {display:flex;margin:18px auto}
|
||||
.issue-center .issue-inspector {flex:0 0 clamp(320px,26vw,420px);width:clamp(320px,26vw,420px);min-width:0;overflow:auto;padding:20px 22px 24px;border-left:1px solid var(--issue-line);background:color-mix(in srgb,var(--color-surface) 20%,var(--issue-canvas))}
|
||||
.issue-center .inspector-top {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;color:var(--issue-muted);font-size:11px;overflow-wrap:anywhere}
|
||||
.issue-center .inspector-top .issue-number {margin-left:6px}
|
||||
.issue-center .close-button {border:0;background:transparent;min-height:24px;width:24px;padding:0;flex-shrink:0}
|
||||
.issue-center .issue-inspector h2 {font-size:20px;font-weight:600;line-height:1.4;letter-spacing:-.3px}
|
||||
.issue-center .inspector-properties {display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:18px 0}
|
||||
.issue-center .inspector-properties>.issue-person:not(:first-child) {padding-left:16px;border-left:1px solid var(--color-border)}
|
||||
.issue-center .inspector-labels {display:flex;flex-direction:column;gap:5px;margin-bottom:20px}
|
||||
.issue-center .inspector-description {border-top:1px solid var(--issue-line);padding-top:18px;margin-top:18px}
|
||||
.issue-center .description {white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.75;color:var(--color-ink-muted);margin-top:8px}
|
||||
.issue-center .inspector-open {margin-top:22px}
|
||||
.issue-center .workspace-empty {display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:56px 24px;color:var(--issue-muted);min-height:250px}
|
||||
.issue-center .workspace-empty p {font-size:12px;max-width:440px;line-height:1.7}
|
||||
.issue-center .workspace-empty h2 {color:var(--color-ink);font-size:16px}
|
||||
.issue-center .empty-symbol {display:grid;place-items:center;width:52px;height:52px;margin-bottom:6px;border:1px solid var(--issue-line);border-radius:12px;color:var(--issue-muted)}
|
||||
.issue-center .board-view {display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
|
||||
.issue-center .board-header {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px 14px;flex-shrink:0}
|
||||
.issue-center .board-title {min-width:0}
|
||||
.issue-center .board-title h2 {font-size:16px;line-height:1.4;font-weight:600;letter-spacing:.05px}
|
||||
.issue-center .board-title small {display:block;margin-top:4px}
|
||||
.issue-center .board-title small>span {padding:0 5px}
|
||||
.issue-center .board-tools {display:flex;align-items:center;gap:9px;flex-shrink:0}
|
||||
.issue-center .board-tools .workspace-search {width:240px}
|
||||
.issue-center .board-connect {padding:18px 24px;flex-shrink:0;border-bottom:1px solid var(--issue-line)}
|
||||
.issue-center .board-connect label {display:block;font-size:11px;color:var(--issue-muted);margin-bottom:7px}
|
||||
.issue-center .board-connect-fields {display:flex;gap:10px}
|
||||
.issue-center .board-connect input {flex:1;min-width:100px;min-height:34px;padding:6px 10px;border:1px solid var(--color-border);border-radius:4px;background:transparent;color:var(--color-ink)}
|
||||
.issue-center .board-notice {font-size:11px;line-height:1.6;padding:0 24px 12px;color:var(--issue-muted);flex-shrink:0}
|
||||
.issue-center .board-body {position:relative;display:flex;flex:1;min-height:0;overflow:hidden}
|
||||
.issue-center .board-columns {display:flex;flex:1;min-width:0;gap:14px;padding:0 24px 20px;overflow:auto;align-items:stretch}
|
||||
.issue-center .board-column {display:flex;flex:1 0 278px;max-width:400px;min-width:0;flex-direction:column;border:0;border-radius:6px;background:color-mix(in srgb,var(--color-surface) 60%,var(--issue-canvas));overflow:hidden}
|
||||
.issue-center .board-column>header {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 12px 12px;flex-shrink:0}
|
||||
.issue-center .board-column h3 {display:flex;align-items:center;gap:9px;min-width:0;font-size:12px;font-weight:600;overflow-wrap:anywhere}
|
||||
.issue-center .column-dot {width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:var(--status-color)}
|
||||
.issue-center .column-count {color:var(--issue-muted);font-size:11px;white-space:nowrap}
|
||||
.issue-center .wip-limit {font-size:10px}
|
||||
.issue-center .column-cards {padding:0 10px 10px;min-height:0;overflow:auto;flex:1}
|
||||
.issue-center .board-card {display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:100%;text-align:left;padding:12px;margin-bottom:9px;border:1px solid var(--color-border);border-radius:6px;box-shadow:0 2px 3px #0000000a;background:var(--issue-canvas);color:var(--color-ink);overflow-wrap:anywhere}
|
||||
.issue-center .board-card:hover {border-color:var(--color-border-input);background:color-mix(in srgb,var(--color-surface) 55%,var(--issue-canvas))}
|
||||
.issue-center .board-card.chosen {border-color:color-mix(in srgb,var(--color-accent) 65%,var(--color-border));background:color-mix(in srgb,var(--color-accent) 5%,var(--issue-canvas))}
|
||||
.issue-center .board-card strong {font-size:13px;line-height:1.5;font-weight:550}
|
||||
.issue-center .card-reference {display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:11px;line-height:1.4}
|
||||
.issue-center .board-card .issue-person {margin-top:3px;font-size:11px}
|
||||
.issue-center .board-card .issue-avatar {width:19px;height:19px;flex-basis:19px;font-size:9px}
|
||||
.issue-center .lane {font-size:10px;line-height:1.5;color:var(--color-accent);font-weight:400}
|
||||
.issue-center .column-empty {padding:28px 12px;text-align:center;color:var(--color-ink-faint);font-size:11px}
|
||||
@media(min-width:1250px) {
|
||||
.issue-center .issue-content:not(.with-details) .issue-table-heading,.issue-center .issue-content:not(.with-details) .issue-row {grid-template-columns:minmax(0,1fr) 180px 160px}
|
||||
}
|
||||
@media(max-width:1150px) {
|
||||
.issue-center .issue-text {display:flex;flex-direction:column;align-items:flex-start;gap:3px}
|
||||
.issue-center .issue-text>.issue-labels {justify-content:flex-start;max-width:none;margin-top:3px}
|
||||
.issue-center .issue-table-heading,.issue-center .issue-row {grid-template-columns:minmax(0,1fr) 110px 100px;gap:12px}
|
||||
.issue-center .issue-identity {gap:10px}
|
||||
.issue-center .issue-inspector {flex-basis:310px;width:310px;padding:18px}
|
||||
.issue-center .board-header {align-items:flex-start;flex-direction:column;gap:14px}
|
||||
.issue-center .board-tools {width:100%}
|
||||
.issue-center .board-tools .workspace-search {flex:1;width:auto}
|
||||
}
|
||||
@media(max-width:800px) {
|
||||
.issue-center .workspace-heading {padding:18px 16px 10px;gap:12px}
|
||||
.issue-center .workspace-title p {max-width:235px}
|
||||
.issue-center .workspace-navigation {padding:0 16px}
|
||||
.issue-center .workspace-symbol {display:none}
|
||||
.issue-center .issue-toolbar {padding:14px 16px 10px;gap:8px;flex-wrap:wrap}
|
||||
.issue-center .issue-toolbar .workspace-search {max-width:none;flex:1 1 190px;width:auto}
|
||||
.issue-center .state-select {flex:0 0 130px;width:130px}
|
||||
.issue-center .issue-list {padding:0 16px}
|
||||
.issue-center .issue-footer {padding:12px 16px;font-size:10px}
|
||||
.issue-center .issue-inspector {position:absolute;inset:0;width:100%;max-width:none;z-index:3;border:0;flex-basis:auto;background:var(--issue-canvas);padding:20px}
|
||||
.issue-center .with-details .issue-main {visibility:hidden}
|
||||
.issue-center .board-header,.issue-center .board-connect {padding:16px}
|
||||
.issue-center .board-tools {flex-wrap:wrap;gap:8px}
|
||||
.issue-center .board-tools .workspace-search {flex:1 1 100%;height:34px}
|
||||
.issue-center .board-columns {padding:0 16px 16px;gap:12px}
|
||||
.issue-center .board-column {flex:0 0 270px}
|
||||
.issue-center .board-notice {padding:0 16px 12px}
|
||||
.issue-center .workspace-notice {margin:0 16px 12px}
|
||||
}
|
||||
@media(max-width:520px) {
|
||||
.issue-center .workspace-title p {font-size:11px;max-width:205px}
|
||||
.issue-center .workspace-heading>.workspace-button {font-size:11px;padding:6px 8px}
|
||||
.issue-center .workspace-heading>.workspace-button>svg {display:none}
|
||||
.issue-center .source-select {flex-basis:155px;width:155px}
|
||||
.issue-center .issue-table-heading,.issue-center .issue-row {grid-template-columns:minmax(0,1fr) 94px;gap:8px}
|
||||
.issue-center .issue-table-heading>span:last-child,.issue-center .issue-row>.issue-person {display:none}
|
||||
.issue-center .issue-identity>.issue-number {display:none}
|
||||
.issue-center .issue-row {padding:12px 10px;min-height:80px}
|
||||
.issue-center .issue-status {font-size:11px;gap:6px}
|
||||
.issue-center .issue-toolbar .workspace-search {flex-basis:100%}
|
||||
.issue-center .board-tools>.workspace-button {font-size:11px;padding:6px 8px}
|
||||
.issue-center .board-connect-fields {flex-wrap:wrap}
|
||||
.issue-center .board-connect input {flex-basis:100%}
|
||||
}
|
||||
@media(prefers-reduced-motion:reduce) {.issue-center button {transition:none}}
|
||||
/* This workspace opts into its compact rounded controls. The app-wide square
|
||||
reset uses !important, so the same priority is needed for these local shapes. */
|
||||
.issue-center :is(.issue-avatar,.status-dot,.column-dot) {border-radius:50% !important}
|
||||
.issue-center :is(.workspace-button,.workspace-search,.issue-label,.source-select button,.state-select button,.board-connect input) {border-radius:4px !important}
|
||||
.issue-center :is(.workspace-symbol,.board-column,.board-card) {border-radius:6px !important}
|
||||
.issue-center .empty-symbol {border-radius:12px !important}
|
||||
|
||||
.issue-center .repository-select {width:190px;flex:0 1 190px;min-width:130px}
|
||||
.issue-center .repository-select button {font-size:12px;min-height:32px;border-radius:4px !important}
|
||||
.issue-center .repository-group-heading {display:flex;align-items:center;gap:9px;padding:14px 16px 9px;color:var(--color-ink-muted);border-bottom:1px solid var(--issue-line)}
|
||||
.issue-center .repository-group-heading strong {overflow-wrap:anywhere}
|
||||
.issue-center .repository-group-heading>span {margin-left:auto;color:var(--issue-muted);font-size:11px}
|
||||
.issue-center .issue-toolbar {flex-wrap:wrap}
|
||||
.issue-center .board-tools {flex-wrap:wrap;justify-content:flex-end;flex-shrink:1}
|
||||
:root[data-theme="light"] .issue-center [data-tone="active"] {--status-color:#0086a8}
|
||||
:root[data-theme="light"] .issue-center [data-tone="review"] {--status-color:#ab6800}
|
||||
:root[data-theme="light"] .issue-center [data-tone="done"] {--status-color:#24853c}
|
||||
@media(max-width:800px) {.issue-center .board-tools {justify-content:flex-start}}
|
||||
|
||||
.issue-center .repository-group-heading {width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--issue-line);border-radius:0;justify-content:flex-start}
|
||||
.issue-center .repository-group-heading:hover {background:var(--color-surface-hover)}
|
||||
.issue-center .repository-group-heading strong {font-size:12px;font-weight:600}
|
||||
.issue-center .repository-group-heading svg {flex-shrink:0}
|
||||
.issue-center .repository-chevron.expanded {transform:rotate(90deg)}
|
||||
|
||||
.issue-center .board-directory {display:flex;align-items:center;gap:10px;padding:12px 24px;flex-wrap:wrap;border-bottom:1px solid var(--issue-line)}
|
||||
.issue-center .board-select {width:360px;max-width:100%;min-width:0}
|
||||
.issue-center .board-discovery-notice {padding:8px 24px;color:var(--issue-muted);font-size:12px;max-height:160px;overflow:auto;flex-shrink:0}
|
||||
.issue-center .board-discovery-notice summary {cursor:pointer}
|
||||
.issue-center .board-discovery-notice p {margin-top:8px;overflow-wrap:anywhere}
|
||||
|
||||
.issue-center .board-column.drop-target {outline:2px solid var(--color-accent);outline-offset:-2px;background:color-mix(in srgb,var(--color-accent) 12%,var(--issue-canvas))}
|
||||
.issue-center .board-card[draggable="true"] {cursor:grab}
|
||||
.issue-center .board-card[draggable="true"]:active {cursor:grabbing}
|
||||
.issue-center .card-move-control {display:flex;flex-direction:column;gap:6px;margin-top:16px}
|
||||
|
||||
/* Overlay drawer follows the PR Center's header, proportions and two-column detail layout. */
|
||||
.issue-center {position:relative}
|
||||
.issue-center .issue-detail-drawer {position:absolute;z-index:20;inset:0 0 0 auto;display:flex;flex-direction:column;width:44%;min-width:min(680px,100%);max-width:100%;height:100%;overflow:hidden;border-left:1px solid var(--color-border);background:color-mix(in srgb,var(--app-bg) 94%,var(--color-surface));box-shadow:-14px 0 30px #0007}
|
||||
.issue-center .issue-detail-header {display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:54px;flex-shrink:0;padding:0 24px;border-bottom:1px solid var(--color-border);background:color-mix(in srgb,var(--app-bg) 78%,var(--color-surface))}
|
||||
.issue-center .issue-detail-header>div {display:flex;align-items:center;gap:9px;min-width:0}
|
||||
.issue-center .issue-detail-header strong {font-size:13px;font-weight:600;overflow-wrap:anywhere}
|
||||
.issue-center .issue-detail-header svg {color:var(--color-accent);flex-shrink:0}
|
||||
.issue-center .issue-detail-header .issue-detail-header-actions {gap:3px;flex-shrink:0}
|
||||
.issue-center .issue-detail-header-actions svg {color:var(--color-ink-muted)}
|
||||
.issue-center .issue-detail-body {display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:18px;padding-left:24px;min-height:0;flex:1;overflow:hidden}
|
||||
.issue-center .issue-detail-main {min-width:0;overflow:auto}
|
||||
.issue-center .issue-detail-title {padding:18px 0 16px;border-bottom:1px solid var(--issue-line)}
|
||||
.issue-center .issue-detail-title>div:first-child {display:flex;align-items:baseline;gap:10px}
|
||||
.issue-center .issue-detail-title>div:first-child>span {color:var(--color-accent);font-size:17px;font-weight:700;flex-shrink:0}
|
||||
.issue-center .issue-detail-title h2 {font-size:19px;line-height:1.3;font-weight:700;min-width:0}
|
||||
.issue-center .issue-detail-summary {display:flex;align-items:center;flex-wrap:wrap;gap:12px;min-height:33px;margin-top:8px}
|
||||
.issue-center .issue-detail-summary .issue-status,.issue-center .issue-detail-summary .issue-person {font-size:10.5px}
|
||||
.issue-center .issue-detail-description {padding:14px 0 18px}
|
||||
.issue-center .issue-detail-description h3 {font-size:11.5px}
|
||||
.issue-center .issue-detail-description .description {font-size:11px;line-height:1.6}
|
||||
.issue-center .issue-detail-sidebar {min-width:0;overflow:auto;padding:28px 17px 16px;border-left:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface) 46%,var(--app-bg))}
|
||||
.issue-center .issue-detail-sidebar .inspector-open {width:100%;margin:0 0 12px;min-height:39px;font-size:11px;color:var(--color-accent);border-color:var(--color-accent)}
|
||||
.issue-center .issue-detail-sidebar section {display:flex;flex-direction:column;gap:11px;padding:17px 0;border-bottom:1px solid var(--issue-line)}
|
||||
.issue-center .issue-detail-sidebar h3 {font-size:11.5px;color:var(--color-ink-muted)}
|
||||
.issue-center .issue-detail-repo {display:flex;align-items:flex-start;gap:8px;font-size:11px;overflow-wrap:anywhere}
|
||||
.issue-center .issue-detail-repo svg {flex-shrink:0}
|
||||
@media(max-width:1280px) {.issue-center .issue-detail-drawer {width:50%;min-width:min(650px,100%)}}
|
||||
@media(max-width:680px) {.issue-center .issue-detail-drawer {width:100%;min-width:0}.issue-center .issue-detail-body {display:block;overflow:auto;padding:0 15px}.issue-center .issue-detail-main {overflow:visible}.issue-center .issue-detail-sidebar {padding:0 0 18px;border-left:0;background:transparent;overflow:visible}}
|
||||
|
||||
.issue-center .issue-comments {padding:14px 0 18px;border-top:1px solid var(--issue-line)}
|
||||
.issue-center .issue-comments>header {display:flex;align-items:center;gap:8px;margin-bottom:12px}
|
||||
.issue-center .issue-comments>header button {margin-left:auto}
|
||||
.issue-center .issue-comment-list {display:flex;flex-direction:column;gap:10px;margin:12px 0}
|
||||
.issue-center .issue-comment-list article {border:1px solid var(--color-border);background:color-mix(in srgb,var(--color-surface) 35%,var(--app-bg))}
|
||||
.issue-center .issue-comment-list article header {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:10px}
|
||||
.issue-center .issue-comment-list time {font-size:9px;color:var(--issue-muted)}
|
||||
.issue-center .issue-comment-list article p {white-space:pre-wrap;overflow-wrap:anywhere;padding:0 12px 12px;font-size:11px;line-height:1.6}
|
||||
.issue-center .comment-error {color:#e0737b;font-size:11px;overflow-wrap:anywhere}
|
||||
|
||||
.issue-center .issue-close-action {width:100%;min-height:39px;margin-bottom:10px;color:#e0737b;border-color:#a74b55;font-size:11px}
|
||||
Reference in New Issue
Block a user