mirror of
https://github.com/github/awesome-copilot.git
synced 2026-10-14 15:51:45 +00:00
Aaron PowellandCopilot App
8431cac934
Add confirmed column actions using staged feedback on both review boards. Avoid duplicate queued reviews and issue commands, report partial failures, and fetch PR checks separately to prevent bulk GraphQL timeouts. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: dc011747-d114-43af-93e9-7f0036f9b4b7
770 lines
15 KiB
CSS
770 lines
15 KiB
CSS
:root {
|
|
--bg: var(--background-color-default, #ffffff);
|
|
--fg: var(--text-color-default, #1f2328);
|
|
--muted: var(--text-color-muted, #59636e);
|
|
--border: var(--border-color-default, #d1d9e0);
|
|
--focus: var(--color-focus-outline, #0969da);
|
|
--surface: color-mix(in srgb, var(--fg) 4%, var(--bg));
|
|
--surface-raised: color-mix(in srgb, var(--fg) 2%, var(--bg));
|
|
--red: var(--true-color-red, #cf222e);
|
|
--red-muted: var(--true-color-red-muted, color-mix(in srgb, var(--red) 14%, var(--bg)));
|
|
--orange: var(--true-color-orange, #bc4c00);
|
|
--orange-muted: var(--true-color-orange-muted, color-mix(in srgb, var(--orange) 14%, var(--bg)));
|
|
--yellow: var(--true-color-yellow, #9a6700);
|
|
--yellow-muted: var(--true-color-yellow-muted, color-mix(in srgb, var(--yellow) 14%, var(--bg)));
|
|
--green: var(--true-color-green, #1a7f37);
|
|
--green-muted: var(--true-color-green-muted, color-mix(in srgb, var(--green) 14%, var(--bg)));
|
|
--blue: var(--true-color-blue, #0969da);
|
|
--blue-muted: var(--true-color-blue-muted, color-mix(in srgb, var(--blue) 14%, var(--bg)));
|
|
--purple: var(--true-color-purple, #8250df);
|
|
--purple-muted: var(--true-color-purple-muted, color-mix(in srgb, var(--purple) 14%, var(--bg)));
|
|
--radius: 8px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
|
|
font-size: var(--text-body-medium, 14px);
|
|
line-height: var(--leading-body-medium, 20px);
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
margin: 0;
|
|
font-weight: var(--font-weight-semibold, 600);
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--text-title-small, 16px);
|
|
line-height: var(--leading-title-small, 24px);
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--text-title-small, 16px);
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.meta {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: var(--text-body-small, 12px);
|
|
line-height: var(--leading-body-small, 16px);
|
|
}
|
|
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Toolbar */
|
|
.toolbar {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.toolbar-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.search input {
|
|
width: 240px;
|
|
padding: 5px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--bg);
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--surface-raised);
|
|
color: inherit;
|
|
font: inherit;
|
|
font-weight: var(--font-weight-semibold, 600);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.btn:hover:not(:disabled) {
|
|
background: var(--surface);
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.55;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-primary {
|
|
border-color: transparent;
|
|
background: var(--blue);
|
|
color: var(--color-white, #fff);
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: color-mix(in srgb, var(--blue) 88%, black);
|
|
}
|
|
|
|
.btn-danger {
|
|
color: var(--red);
|
|
}
|
|
|
|
.btn-danger.confirming {
|
|
border-color: transparent;
|
|
background: var(--red);
|
|
color: var(--color-white, #fff);
|
|
}
|
|
|
|
.btn-warn {
|
|
color: var(--orange);
|
|
}
|
|
|
|
.btn-warn.confirming {
|
|
border-color: transparent;
|
|
background: var(--orange);
|
|
color: var(--color-white, #fff);
|
|
}
|
|
|
|
.btn-success {
|
|
color: var(--green);
|
|
}
|
|
|
|
.btn-success.confirming {
|
|
border-color: transparent;
|
|
background: var(--green);
|
|
color: var(--color-white, #fff);
|
|
}
|
|
|
|
.btn-small {
|
|
padding: 3px 8px;
|
|
font-size: var(--text-body-small, 12px);
|
|
}
|
|
|
|
.btn-icon {
|
|
padding: 2px 8px;
|
|
border-color: transparent;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Board */
|
|
.board {
|
|
flex: 1;
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: minmax(260px, 1fr);
|
|
gap: 12px;
|
|
padding: 12px 16px 16px;
|
|
overflow-x: auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.column[data-column="unreviewed"] {
|
|
--accent: var(--muted);
|
|
}
|
|
.column[data-column="reviewing"] {
|
|
--accent: var(--purple);
|
|
}
|
|
.column[data-column="close"] {
|
|
--accent: var(--red);
|
|
}
|
|
.column[data-column="request-changes"] {
|
|
--accent: var(--orange);
|
|
}
|
|
.column[data-column="needs-insight"] {
|
|
--accent: var(--yellow);
|
|
}
|
|
.column[data-column="approve"] {
|
|
--accent: var(--green);
|
|
}
|
|
.column[data-column="actioned"] {
|
|
--accent: var(--blue);
|
|
}
|
|
|
|
.column-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 12px 6px;
|
|
font-weight: var(--font-weight-semibold, 600);
|
|
}
|
|
|
|
.column-name {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.column-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
padding: 0 12px 8px;
|
|
}
|
|
|
|
.column-name::before {
|
|
content: "";
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--accent, var(--border));
|
|
}
|
|
|
|
.count {
|
|
min-width: 22px;
|
|
padding: 0 7px;
|
|
border-radius: 999px;
|
|
background: var(--bg);
|
|
color: var(--muted);
|
|
font-size: var(--text-body-small, 12px);
|
|
text-align: center;
|
|
}
|
|
|
|
.column-cards {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
padding: 6px 8px 10px;
|
|
overflow-y: auto;
|
|
border-radius: 0 0 var(--radius) var(--radius);
|
|
transition: background-color 120ms ease-out;
|
|
}
|
|
|
|
.column.drop-target .column-cards {
|
|
background: color-mix(in srgb, var(--accent) 12%, transparent);
|
|
outline: 2px dashed var(--accent);
|
|
outline-offset: -4px;
|
|
}
|
|
|
|
.empty {
|
|
margin: 12px 4px;
|
|
color: var(--muted);
|
|
font-size: var(--text-body-small, 12px);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--bg);
|
|
cursor: pointer;
|
|
transition:
|
|
border-color 120ms ease-out,
|
|
box-shadow 120ms ease-out;
|
|
}
|
|
|
|
.card:hover {
|
|
border-color: color-mix(in srgb, var(--accent, var(--focus)) 60%, var(--border));
|
|
}
|
|
|
|
.card.selected {
|
|
border-color: var(--focus);
|
|
box-shadow: 0 0 0 1px var(--focus);
|
|
}
|
|
|
|
.card.dragging {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.card-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
color: var(--muted);
|
|
font-size: var(--text-body-small, 12px);
|
|
}
|
|
|
|
.card-number {
|
|
flex-shrink: 0;
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
}
|
|
|
|
.card-byline {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.card-title {
|
|
margin: 0;
|
|
font-weight: var(--font-weight-semibold, 600);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.card-rationale {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: var(--text-body-small, 12px);
|
|
line-height: var(--leading-body-small, 16px);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.pills {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.pill {
|
|
padding: 0 6px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--border);
|
|
font-size: 11px;
|
|
line-height: 18px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pill-danger {
|
|
border-color: transparent;
|
|
background: var(--red-muted);
|
|
color: var(--red);
|
|
}
|
|
.pill-warn {
|
|
border-color: transparent;
|
|
background: var(--orange-muted);
|
|
color: var(--orange);
|
|
}
|
|
.pill-caution {
|
|
border-color: transparent;
|
|
background: var(--yellow-muted);
|
|
color: var(--yellow);
|
|
}
|
|
.pill-success {
|
|
border-color: transparent;
|
|
background: var(--green-muted);
|
|
color: var(--green);
|
|
}
|
|
.pill-info {
|
|
border-color: transparent;
|
|
background: var(--blue-muted);
|
|
color: var(--blue);
|
|
}
|
|
.pill-ai {
|
|
border-color: transparent;
|
|
background: var(--purple-muted);
|
|
color: var(--purple);
|
|
}
|
|
|
|
/*
|
|
* GitHub label colours are arbitrary, so blend them toward the current theme's
|
|
* background and foreground. That keeps the hue recognisable while staying
|
|
* legible in both light and dark mode.
|
|
*/
|
|
.label-chip {
|
|
--label: #8250df;
|
|
padding: 0 7px;
|
|
border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--label) 45%, var(--border));
|
|
background: color-mix(in srgb, var(--label) 16%, var(--bg));
|
|
color: color-mix(in srgb, var(--label) 70%, var(--fg));
|
|
font-size: 11px;
|
|
line-height: 18px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.label-chip-more {
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* Drawer */
|
|
.drawer {
|
|
position: fixed;
|
|
inset: 0 0 0 auto;
|
|
width: min(680px, 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-left: 1px solid var(--border);
|
|
background: var(--bg);
|
|
box-shadow: -12px 0 32px color-mix(in srgb, black 18%, transparent);
|
|
transform: translateX(100%);
|
|
visibility: hidden;
|
|
transition:
|
|
transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
|
|
visibility 0s linear 200ms;
|
|
z-index: 10;
|
|
}
|
|
|
|
.drawer.open {
|
|
transform: none;
|
|
visibility: visible;
|
|
transition:
|
|
transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
|
|
visibility 0s;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.drawer,
|
|
.drawer.open {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.drawer-header {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: space-between;
|
|
padding: 14px 16px 8px;
|
|
}
|
|
|
|
.drawer-kicker {
|
|
margin: 0 0 2px;
|
|
color: var(--muted);
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
font-size: var(--text-body-small, 12px);
|
|
}
|
|
|
|
.drawer-labels {
|
|
padding: 0 16px 10px;
|
|
}
|
|
|
|
.drawer-labels:empty {
|
|
display: none;
|
|
}
|
|
|
|
.drawer-controls {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 0 16px 10px;
|
|
font-size: var(--text-body-small, 12px);
|
|
}
|
|
|
|
.drawer-controls select {
|
|
margin-left: 4px;
|
|
padding: 3px 6px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--bg);
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: 4px;
|
|
padding: 0 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.tab {
|
|
padding: 8px 10px;
|
|
border: 0;
|
|
border-bottom: 2px solid transparent;
|
|
background: none;
|
|
color: var(--muted);
|
|
font: inherit;
|
|
font-weight: var(--font-weight-semibold, 600);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tab[aria-selected="true"] {
|
|
border-bottom-color: var(--focus);
|
|
color: var(--fg);
|
|
}
|
|
|
|
.drawer-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 16px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.review-grid {
|
|
display: grid;
|
|
grid-template-columns: max-content 1fr;
|
|
gap: 8px 16px;
|
|
margin: 0;
|
|
}
|
|
|
|
.review-grid dt {
|
|
color: var(--muted);
|
|
font-weight: var(--font-weight-semibold, 600);
|
|
}
|
|
|
|
.review-grid dd {
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.review-grid code,
|
|
.markdown code {
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
font-size: var(--text-code-inline, 12px);
|
|
padding: 1px 4px;
|
|
border-radius: 4px;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.rereview-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin: 0 16px 10px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.rereview-panel[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.notice {
|
|
padding: 12px;
|
|
border-radius: var(--radius);
|
|
background: var(--surface);
|
|
color: var(--muted);
|
|
}
|
|
|
|
.comment {
|
|
margin-bottom: 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.comment-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
align-items: center;
|
|
padding: 6px 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--surface);
|
|
font-size: var(--text-body-small, 12px);
|
|
}
|
|
|
|
.comment-header a {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.comment.collapsed .markdown {
|
|
max-height: 160px;
|
|
overflow: hidden;
|
|
mask-image: linear-gradient(to bottom, black 60%, transparent);
|
|
}
|
|
|
|
.comment-toggle {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.markdown {
|
|
padding: 8px 12px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.markdown img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.markdown pre {
|
|
overflow-x: auto;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
font-size: var(--text-code-inline, 12px);
|
|
}
|
|
|
|
.markdown table {
|
|
border-collapse: collapse;
|
|
display: block;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.markdown th,
|
|
.markdown td {
|
|
padding: 4px 8px;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.markdown a {
|
|
color: var(--blue);
|
|
}
|
|
|
|
/* File and check lists */
|
|
.row-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 5px 8px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.row:nth-child(odd) {
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.row-name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
font-size: var(--text-code-inline, 12px);
|
|
}
|
|
|
|
.row-stat {
|
|
flex-shrink: 0;
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.row-stat .add {
|
|
color: var(--green);
|
|
}
|
|
|
|
.row-stat .del {
|
|
color: var(--red);
|
|
}
|
|
|
|
.state-dot {
|
|
flex-shrink: 0;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--muted);
|
|
}
|
|
|
|
.state-dot[data-state="success"] {
|
|
background: var(--green);
|
|
}
|
|
.state-dot[data-state="failure"] {
|
|
background: var(--red);
|
|
}
|
|
.state-dot[data-state="pending"] {
|
|
background: var(--yellow);
|
|
}
|
|
|
|
.drawer-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding: 12px 16px 14px;
|
|
border-top: 1px solid var(--border);
|
|
background: var(--surface-raised);
|
|
}
|
|
|
|
.footer-label {
|
|
font-size: var(--text-body-small, 12px);
|
|
font-weight: var(--font-weight-semibold, 600);
|
|
}
|
|
|
|
.footer-note {
|
|
margin: 0;
|
|
font-size: var(--text-body-small, 12px);
|
|
line-height: var(--leading-body-small, 16px);
|
|
color: var(--text-color-muted, #59636e);
|
|
}
|
|
|
|
.drawer-footer textarea,
|
|
.rereview-panel textarea {
|
|
width: 100%;
|
|
resize: vertical;
|
|
padding: 6px 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--bg);
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
.footer-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Toasts */
|
|
.toasts {
|
|
position: fixed;
|
|
bottom: 16px;
|
|
left: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
z-index: 20;
|
|
}
|
|
|
|
.toast {
|
|
max-width: 420px;
|
|
padding: 8px 12px;
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--border);
|
|
background: var(--bg);
|
|
box-shadow: 0 6px 20px color-mix(in srgb, black 15%, transparent);
|
|
}
|
|
|
|
.toast.error {
|
|
border-color: var(--red);
|
|
color: var(--red);
|
|
}
|
|
|
|
.toast a {
|
|
color: var(--blue);
|
|
}
|