mirror of
https://github.com/murashit/codex-panel.git
synced 2026-07-22 06:57:10 +00:00
443 lines
11 KiB
CSS
443 lines
11 KiB
CSS
.codex-panel__messages {
|
|
box-sizing: border-box;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: var(--codex-panel-edge-padding-x) var(--codex-panel-edge-padding-x) 0;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__history-bar {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: var(--codex-panel-section-gap);
|
|
}
|
|
|
|
.codex-panel__message-flow {
|
|
width: 100%;
|
|
}
|
|
|
|
.codex-panel__approval-details summary,
|
|
.codex-panel__output summary,
|
|
.codex-panel-diff-file summary,
|
|
.codex-panel__output-title {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.codex-panel__approval-details summary,
|
|
.codex-panel__output summary,
|
|
.codex-panel-diff-file summary {
|
|
cursor: default;
|
|
}
|
|
|
|
.codex-panel__approval-details summary:hover,
|
|
.codex-panel__output summary:hover,
|
|
.codex-panel-diff-file summary:hover {
|
|
color: var(--nav-item-color-hover, var(--text-normal));
|
|
}
|
|
|
|
.codex-panel__meta-grid {
|
|
display: grid;
|
|
grid-template-columns: max-content minmax(0, 1fr);
|
|
gap: var(--codex-panel-control-gap) var(--codex-panel-section-gap);
|
|
margin: var(--codex-panel-item-gap) 0;
|
|
font-size: var(--font-ui-smaller);
|
|
cursor: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__meta-grid dt {
|
|
color: var(--text-faint);
|
|
cursor: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__meta-grid dd {
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
cursor: text;
|
|
user-select: text;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.codex-panel__message-block {
|
|
display: flow-root;
|
|
min-width: 0;
|
|
}
|
|
|
|
.codex-panel__message {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
margin-bottom: var(--codex-panel-edge-padding-x);
|
|
padding-left: var(--codex-panel-message-indent);
|
|
border-left: var(--codex-panel-rail-transparent);
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__message-role {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--codex-panel-item-gap);
|
|
margin-bottom: var(--codex-panel-control-gap);
|
|
color: var(--codex-panel-role-label-color);
|
|
font-size: var(--codex-panel-role-label-size);
|
|
font-weight: var(--codex-panel-role-label-weight);
|
|
}
|
|
|
|
.codex-panel__message-action {
|
|
--icon-size: var(--codex-panel-size-icon-xs);
|
|
--icon-stroke: var(--icon-xs-stroke-width, 2px);
|
|
opacity: 0;
|
|
transition: opacity 120ms ease-in-out;
|
|
}
|
|
|
|
.codex-panel__message:hover .codex-panel__message-action,
|
|
.codex-panel__message-role--fork-open .codex-panel__message-action,
|
|
.codex-panel__message-action:focus-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.codex-panel__message--user {
|
|
border-left-color: var(--codex-panel-color-accent);
|
|
}
|
|
|
|
.codex-panel__message--user .codex-panel__message-role {
|
|
color: var(--codex-panel-color-accent);
|
|
}
|
|
|
|
.codex-panel__message--assistant {
|
|
border-left-color: var(--codex-panel-border-color);
|
|
}
|
|
|
|
.codex-panel__message--system,
|
|
.codex-panel__message--tool {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.codex-panel__message--system {
|
|
margin-bottom: var(--codex-panel-section-gap);
|
|
border-left-color: var(--codex-panel-border-color);
|
|
font-family: var(--font-interface);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
.codex-panel__message--system .codex-panel__message-role {
|
|
font-size: var(--codex-panel-secondary-label-size);
|
|
font-weight: var(--codex-panel-secondary-label-weight);
|
|
}
|
|
|
|
.codex-panel__message-content {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
font-family: var(--codex-panel-content-font);
|
|
font-size: var(--codex-panel-content-font-size);
|
|
overflow-wrap: anywhere;
|
|
cursor: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__message--system .codex-panel__message-content {
|
|
color: var(--text-muted);
|
|
font-family: var(--font-interface);
|
|
font-size: var(--font-ui-small);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
.codex-panel__message--system .codex-panel__output {
|
|
margin-top: var(--codex-panel-item-gap);
|
|
}
|
|
|
|
.codex-panel__system-result-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(max-content, 28%) minmax(0, 1fr);
|
|
gap: var(--codex-panel-control-gap) var(--codex-panel-section-gap);
|
|
margin: var(--codex-panel-item-gap) 0 0;
|
|
font-size: var(--font-ui-smaller);
|
|
cursor: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__system-result-heading {
|
|
grid-column: 1 / -1;
|
|
margin-top: var(--codex-panel-item-gap);
|
|
color: var(--text-muted);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
.codex-panel__system-result-heading:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.codex-panel__system-result-key {
|
|
color: var(--text-faint);
|
|
cursor: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__system-result-value {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
cursor: text;
|
|
user-select: text;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.codex-panel__system-result-body {
|
|
grid-column: 1 / -1;
|
|
max-height: var(--codex-panel-size-output-max-height);
|
|
margin: 0;
|
|
padding: var(--codex-panel-section-gap);
|
|
overflow: auto;
|
|
border-radius: var(--codex-panel-code-radius);
|
|
background: var(--codex-panel-code-surface);
|
|
color: var(--code-normal, var(--codex-panel-text-muted));
|
|
font-family: var(--font-monospace);
|
|
font-size: var(--font-smaller);
|
|
cursor: text;
|
|
user-select: text;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.codex-panel__message--system .codex-panel__meta-grid {
|
|
grid-template-columns: minmax(max-content, 28%) minmax(0, 1fr);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.codex-panel__message--review-result {
|
|
border-left-color: var(--codex-panel-color-warning);
|
|
}
|
|
|
|
.codex-panel__message--review-result .codex-panel__message-role {
|
|
color: var(--codex-panel-color-warning);
|
|
}
|
|
|
|
.codex-panel__message--approval-result.codex-panel__execution--completed .codex-panel__message-role {
|
|
color: var(--codex-panel-color-success);
|
|
}
|
|
|
|
.codex-panel__message--approval-result.codex-panel__execution--failed .codex-panel__message-role {
|
|
color: var(--codex-panel-color-danger);
|
|
}
|
|
|
|
.codex-panel__message--user-input-result {
|
|
border-left-color: var(--codex-panel-color-accent);
|
|
}
|
|
|
|
.codex-panel__message--user-input-result .codex-panel__message-role {
|
|
color: var(--codex-panel-color-accent);
|
|
}
|
|
|
|
.codex-panel__reasoning {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
margin: 0 0 var(--codex-panel-section-gap);
|
|
padding-left: var(--codex-panel-message-indent);
|
|
border-left: var(--codex-panel-rail);
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-small);
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
cursor: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__activity-group {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
margin: 0 0 var(--codex-panel-edge-padding-x);
|
|
padding-left: var(--codex-panel-message-indent);
|
|
border-left: var(--codex-panel-rail);
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.codex-panel__activity-group > summary {
|
|
cursor: default;
|
|
color: var(--text-muted);
|
|
font-size: var(--codex-panel-secondary-label-size);
|
|
font-weight: var(--codex-panel-secondary-label-weight);
|
|
}
|
|
|
|
.codex-panel__activity-group > summary:hover {
|
|
color: var(--nav-item-color-hover, var(--text-normal));
|
|
}
|
|
|
|
.codex-panel__activity-group[open] {
|
|
padding-bottom: var(--codex-panel-panel-gap);
|
|
}
|
|
|
|
.codex-panel__activity-group > .codex-panel__message,
|
|
.codex-panel__activity-group > .codex-panel__status-message,
|
|
.codex-panel__activity-group > .codex-panel__reasoning {
|
|
margin-top: var(--codex-panel-section-gap);
|
|
margin-bottom: var(--codex-panel-section-gap);
|
|
}
|
|
|
|
.codex-panel__message-content.markdown-rendered {
|
|
white-space: normal;
|
|
}
|
|
|
|
.codex-panel__message-content.markdown-rendered > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.codex-panel__message-content.markdown-rendered > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.codex-panel__message-content.markdown-rendered pre {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.codex-panel__message-collapse {
|
|
position: relative;
|
|
}
|
|
|
|
.codex-panel__message-content--collapsed {
|
|
position: relative;
|
|
max-height: min(var(--codex-panel-size-message-collapse-max-height), 45vh);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.codex-panel__message-content--collapsed::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: var(--codex-panel-size-message-collapse-fade-height);
|
|
background: linear-gradient(to bottom, transparent, var(--codex-panel-surface));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.codex-panel__message-collapse-details {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: var(--codex-panel-item-gap);
|
|
}
|
|
|
|
.codex-panel__message-collapse-details > summary {
|
|
cursor: default;
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
}
|
|
|
|
.codex-panel__message-collapse-details > summary:hover {
|
|
color: var(--nav-item-color-hover, var(--text-normal));
|
|
}
|
|
|
|
.codex-panel__edited-files,
|
|
.codex-panel__referenced-thread,
|
|
.codex-panel__mentioned-files,
|
|
.codex-panel__auto-reviews {
|
|
margin-top: var(--codex-panel-item-gap);
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
}
|
|
|
|
.codex-panel__referenced-thread-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--codex-panel-control-gap);
|
|
}
|
|
|
|
.codex-panel__edited-files {
|
|
display: block;
|
|
}
|
|
|
|
.codex-panel__edited-files-details {
|
|
display: block;
|
|
}
|
|
|
|
.codex-panel__mentioned-files-details {
|
|
display: block;
|
|
}
|
|
|
|
.codex-panel__edited-files-summary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--codex-panel-control-gap);
|
|
}
|
|
|
|
.codex-panel__edited-files-details > summary,
|
|
.codex-panel__mentioned-files-details > summary,
|
|
.codex-panel__auto-reviews > summary {
|
|
cursor: default;
|
|
}
|
|
|
|
.codex-panel__edited-files-details > summary:hover,
|
|
.codex-panel__mentioned-files-details > summary:hover,
|
|
.codex-panel__auto-reviews > summary:hover {
|
|
color: var(--nav-item-color-hover, var(--text-normal));
|
|
}
|
|
|
|
.codex-panel__open-turn-diff {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
gap: var(--codex-panel-panel-gap);
|
|
width: auto;
|
|
height: auto;
|
|
min-width: 0;
|
|
padding: 0;
|
|
--icon-size: var(--codex-panel-size-icon-xs);
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
line-height: var(--line-height-tight);
|
|
cursor: default;
|
|
}
|
|
|
|
.codex-panel__open-turn-diff svg {
|
|
width: calc(var(--codex-panel-size-icon-xs) - var(--codex-panel-rail-width) / 2);
|
|
height: calc(var(--codex-panel-size-icon-xs) - var(--codex-panel-rail-width) / 2);
|
|
}
|
|
|
|
.codex-panel__open-turn-diff:hover {
|
|
background: transparent;
|
|
color: var(--nav-item-color-hover, var(--text-normal));
|
|
}
|
|
|
|
.codex-panel__open-turn-diff:focus-visible {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.codex-panel__edited-files-separator {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.codex-panel__reasoning-role {
|
|
margin-bottom: var(--codex-panel-panel-gap);
|
|
color: var(--codex-panel-role-label-color);
|
|
font-size: var(--codex-panel-role-label-size);
|
|
font-weight: var(--codex-panel-role-label-weight);
|
|
}
|
|
|
|
.codex-panel__reasoning-content {
|
|
font-family: var(--codex-panel-content-font);
|
|
opacity: 0.92;
|
|
}
|
|
|
|
.codex-panel__reasoning-dots span {
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.codex-panel__reasoning.is-active .codex-panel__reasoning-dots span {
|
|
animation: codex-panel-reasoning-dot 1.2s infinite ease-in-out;
|
|
}
|
|
|
|
.codex-panel__reasoning.is-active .codex-panel__reasoning-dots span:where(:nth-child(2)) {
|
|
animation-delay: 0.18s;
|
|
}
|
|
|
|
.codex-panel__reasoning.is-active .codex-panel__reasoning-dots span:where(:nth-child(3)) {
|
|
animation-delay: 0.36s;
|
|
}
|
|
|
|
.codex-panel__wikilink {
|
|
cursor: default;
|
|
}
|