qwen-code/packages/web-shell/client/components/channels/ChannelPairingRequests.module.css
qqqys b0c0cc3338
feat(web-shell): manage pairing approvals (#8081)
* feat(web-shell): manage pairing approvals

* test(web-shell): cover pairing approval failures

* fix(web-shell): avoid stale pairing approval errors

* test(web-shell): cover pairing revoke cancellation

* fix(web-shell): prevent pairing approval races

* fix(web-shell): address review feedback on pairing approvals (#8081)

* fix(web-shell): keep revoke confirm title fallback type-safe (#8081)

---------

Co-authored-by: qwen-code-dev-bot <269191875+qwen-code-dev-bot@users.noreply.github.com>
Co-authored-by: qwen-code-ci-bot <qwen-code-ci-bot@users.noreply.github.com>
2026-07-30 15:58:23 +00:00

185 lines
3 KiB
CSS

.panel {
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--muted) 34%, transparent);
}
.header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.title {
font-size: 12px;
font-weight: 700;
}
.description,
.emptyDescription {
margin-top: 2px;
color: var(--muted-foreground);
font-size: 11px;
line-height: 1.45;
}
.headerActions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 4px;
}
.divider {
height: 1px;
margin-block: 2px;
background: var(--border);
}
.success {
display: flex;
align-items: center;
gap: 7px;
padding: 8px 10px;
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--primary) 8%, transparent);
color: var(--foreground);
font-size: 12px;
}
.success svg {
width: 14px;
height: 14px;
color: var(--primary);
}
.empty {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
border: 1px dashed var(--border);
border-radius: var(--radius-md);
background: var(--card);
}
.empty > svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
color: var(--muted-foreground);
}
.emptyTitle {
font-size: 12px;
font-weight: 650;
}
.list {
display: flex;
flex-direction: column;
gap: 7px;
}
.request {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
padding: 10px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--card);
}
.approval {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 10px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--card);
}
.approvalIdentity {
display: flex;
min-width: 0;
align-items: center;
gap: 8px;
}
.approvalIdentity > svg {
width: 15px;
height: 15px;
flex: 0 0 auto;
color: var(--muted-foreground);
}
.approvalSenderId,
.allowlist {
overflow-wrap: anywhere;
font-family: var(--font-mono);
font-size: 11px;
}
.allowlist {
display: block;
margin-top: 5px;
color: var(--foreground);
}
.requestIdentity {
display: flex;
min-width: 0;
flex-direction: column;
}
.senderName {
overflow: hidden;
font-size: 12px;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.senderId,
.requestTime {
overflow: hidden;
color: var(--muted-foreground);
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.code {
padding: 5px 7px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--muted);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
}
@media (max-width: 520px) {
.request {
grid-template-columns: minmax(0, 1fr) auto;
}
.requestIdentity {
grid-column: 1 / -1;
}
.approval {
align-items: flex-start;
flex-direction: column;
}
}