mirror of
https://github.com/murashit/codex-panel.git
synced 2026-07-22 06:57:10 +00:00
Reorganize chat CSS modules
This commit is contained in:
murashit
parent
5e3c36830b
commit
6fade82895
6 changed files with 276 additions and 277 deletions
|
|
@ -144,7 +144,8 @@
|
|||
.codex-panel__activity-group > summary {
|
||||
cursor: default;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-ui-small);
|
||||
font-size: var(--codex-panel-secondary-label-size);
|
||||
font-weight: var(--codex-panel-secondary-label-weight);
|
||||
}
|
||||
|
||||
.codex-panel__activity-group > summary:hover {
|
||||
|
|
@ -351,276 +352,3 @@
|
|||
.codex-panel__wikilink {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.codex-panel__work-message {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
margin-bottom: var(--codex-panel-section-gap);
|
||||
padding-left: var(--codex-panel-message-indent);
|
||||
border: 0;
|
||||
border-left: var(--codex-panel-rail);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.codex-panel__work-message .codex-panel__message-role,
|
||||
.codex-panel__activity-group > summary {
|
||||
font-size: var(--codex-panel-secondary-label-size);
|
||||
font-weight: var(--codex-panel-secondary-label-weight);
|
||||
}
|
||||
|
||||
.codex-panel__work-message--warning {
|
||||
border-left-color: var(--codex-panel-color-warning);
|
||||
}
|
||||
|
||||
.codex-panel__work-message--warning > .codex-panel__message-role {
|
||||
color: var(--codex-panel-color-warning);
|
||||
}
|
||||
|
||||
.codex-panel__pending-request-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--codex-panel-item-gap);
|
||||
margin-bottom: var(--codex-panel-edge-padding-x);
|
||||
background: transparent;
|
||||
font-family: var(--font-interface);
|
||||
}
|
||||
|
||||
.codex-panel__pending-request-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--codex-panel-control-gap);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.codex-panel__pending-request-card + .codex-panel__pending-request-card {
|
||||
padding-top: var(--codex-panel-item-gap);
|
||||
border-top: 1px solid var(--codex-panel-border-muted-color);
|
||||
}
|
||||
|
||||
.codex-panel__pending-request-info {
|
||||
min-width: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.codex-panel__pending-request-title {
|
||||
color: var(--text-normal);
|
||||
font-size: var(--font-ui-small);
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
|
||||
.codex-panel__pending-request-body {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-ui-small);
|
||||
line-height: var(--line-height-tight);
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.codex-panel__approval-details {
|
||||
margin-top: var(--codex-panel-control-gap);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-ui-smaller);
|
||||
}
|
||||
|
||||
.codex-panel__pending-request-actions {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--codex-panel-control-gap);
|
||||
}
|
||||
|
||||
.codex-panel__user-input.codex-panel__pending-request-card .codex-panel__pending-request-actions {
|
||||
margin-top: var(--codex-panel-section-gap);
|
||||
}
|
||||
|
||||
.codex-panel__tool-item,
|
||||
.codex-panel__file-change {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
margin-bottom: var(--codex-panel-section-gap);
|
||||
padding-left: var(--codex-panel-message-indent);
|
||||
border: 0;
|
||||
border-left: var(--codex-panel-rail);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.codex-panel__tool-item .codex-panel__message-role,
|
||||
.codex-panel__file-change .codex-panel__message-role,
|
||||
.codex-panel__activity-group > summary {
|
||||
font-size: var(--codex-panel-secondary-label-size);
|
||||
font-weight: var(--codex-panel-secondary-label-weight);
|
||||
}
|
||||
|
||||
.codex-panel__execution--running {
|
||||
border-left-color: var(--codex-panel-color-accent);
|
||||
}
|
||||
|
||||
.codex-panel__execution--completed {
|
||||
border-left-color: var(--codex-panel-color-success);
|
||||
}
|
||||
|
||||
.codex-panel__execution--failed {
|
||||
border-left-color: var(--codex-panel-color-danger);
|
||||
}
|
||||
|
||||
.codex-panel__tool-item--hook:not(.codex-panel__execution) {
|
||||
border-left-color: var(--text-accent);
|
||||
}
|
||||
|
||||
.codex-panel__tool-result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
color: var(--text-muted);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.codex-panel__tool-result--plain .codex-panel__tool-result-header {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.codex-panel__tool-result-details > .codex-panel__tool-result-header:hover,
|
||||
.codex-panel__tool-result-details > .codex-panel__tool-result-header:hover .codex-panel__message-role {
|
||||
color: var(--nav-item-color-hover, var(--text-normal));
|
||||
}
|
||||
|
||||
.codex-panel__tool-result-header .codex-panel__message-role {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.codex-panel__tool-result > .codex-panel__output,
|
||||
.codex-panel__tool-result > .codex-panel-diff-file,
|
||||
.codex-panel__tool-result > .codex-panel__meta-grid,
|
||||
.codex-panel__tool-result-details > .codex-panel__output,
|
||||
.codex-panel__tool-result-details > .codex-panel-diff-file,
|
||||
.codex-panel__tool-result-details > .codex-panel__meta-grid {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.codex-panel__tool-result-details {
|
||||
cursor: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.codex-panel__tool-summary {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-ui-small);
|
||||
cursor: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.codex-panel__tool-result > .codex-panel__tool-summary {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
margin-top: var(--codex-panel-panel-gap);
|
||||
overflow: hidden;
|
||||
line-height: var(--line-height-tight);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.codex-panel__tool-result.is-open > .codex-panel__tool-summary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.codex-panel__task-list,
|
||||
.codex-panel__agent-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--codex-panel-panel-gap);
|
||||
margin: var(--codex-panel-control-gap) 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.codex-panel__task-step,
|
||||
.codex-panel__agent-row {
|
||||
display: grid;
|
||||
grid-template-columns: max-content minmax(0, 1fr);
|
||||
gap: var(--codex-panel-item-gap);
|
||||
min-width: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-ui-small);
|
||||
}
|
||||
|
||||
.codex-panel__task-marker,
|
||||
.codex-panel__agent-thread {
|
||||
color: var(--text-faint);
|
||||
font-family: var(--font-monospace);
|
||||
font-size: var(--font-ui-smaller);
|
||||
}
|
||||
|
||||
.codex-panel__task-step--completed .codex-panel__task-text {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.codex-panel__task-step--inProgress .codex-panel__task-marker,
|
||||
.codex-panel__task-step--inProgress .codex-panel__task-text {
|
||||
color: var(--text-accent);
|
||||
}
|
||||
|
||||
.codex-panel__agent-status {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.codex-panel__agent-activity > .codex-panel__agent-activity-summary {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: var(--line-height-tight);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.codex-panel__agent-activity.is-open > .codex-panel__agent-activity-summary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.codex-panel__agent-detail-section {
|
||||
margin-top: var(--codex-panel-section-gap);
|
||||
}
|
||||
|
||||
.codex-panel__agent-detail-section > pre {
|
||||
margin: var(--codex-panel-item-gap) 0 0;
|
||||
}
|
||||
|
||||
.codex-panel__agent-list--summary {
|
||||
margin-top: var(--codex-panel-panel-gap);
|
||||
}
|
||||
|
||||
.codex-panel__agent-row--more .codex-panel__agent-status {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.codex-panel__output,
|
||||
.codex-panel-diff-file {
|
||||
margin-top: var(--codex-panel-section-gap);
|
||||
}
|
||||
|
||||
.codex-panel__output-title {
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
|
||||
.codex-panel__output pre {
|
||||
max-height: var(--codex-panel-size-output-max-height);
|
||||
margin: var(--codex-panel-item-gap) 0 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;
|
||||
}
|
||||
|
|
|
|||
209
src/styles/32-chat-work-items.css
Normal file
209
src/styles/32-chat-work-items.css
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
.codex-panel__work-message {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
margin-bottom: var(--codex-panel-section-gap);
|
||||
padding-left: var(--codex-panel-message-indent);
|
||||
border: 0;
|
||||
border-left: var(--codex-panel-rail);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.codex-panel__work-message .codex-panel__message-role {
|
||||
font-size: var(--codex-panel-secondary-label-size);
|
||||
font-weight: var(--codex-panel-secondary-label-weight);
|
||||
}
|
||||
|
||||
.codex-panel__work-message--warning {
|
||||
border-left-color: var(--codex-panel-color-warning);
|
||||
}
|
||||
|
||||
.codex-panel__work-message--warning > .codex-panel__message-role {
|
||||
color: var(--codex-panel-color-warning);
|
||||
}
|
||||
|
||||
.codex-panel__tool-item,
|
||||
.codex-panel__file-change {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
margin-bottom: var(--codex-panel-section-gap);
|
||||
padding-left: var(--codex-panel-message-indent);
|
||||
border: 0;
|
||||
border-left: var(--codex-panel-rail);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.codex-panel__tool-item .codex-panel__message-role,
|
||||
.codex-panel__file-change .codex-panel__message-role {
|
||||
font-size: var(--codex-panel-secondary-label-size);
|
||||
font-weight: var(--codex-panel-secondary-label-weight);
|
||||
}
|
||||
|
||||
.codex-panel__execution--running {
|
||||
border-left-color: var(--codex-panel-color-accent);
|
||||
}
|
||||
|
||||
.codex-panel__execution--completed {
|
||||
border-left-color: var(--codex-panel-color-success);
|
||||
}
|
||||
|
||||
.codex-panel__execution--failed {
|
||||
border-left-color: var(--codex-panel-color-danger);
|
||||
}
|
||||
|
||||
.codex-panel__tool-item--hook:not(.codex-panel__execution) {
|
||||
border-left-color: var(--text-accent);
|
||||
}
|
||||
|
||||
.codex-panel__tool-result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
color: var(--text-muted);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.codex-panel__tool-result--plain .codex-panel__tool-result-header {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.codex-panel__tool-result-details > .codex-panel__tool-result-header:hover,
|
||||
.codex-panel__tool-result-details > .codex-panel__tool-result-header:hover .codex-panel__message-role {
|
||||
color: var(--nav-item-color-hover, var(--text-normal));
|
||||
}
|
||||
|
||||
.codex-panel__tool-result-header .codex-panel__message-role {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.codex-panel__tool-result > .codex-panel__output,
|
||||
.codex-panel__tool-result > .codex-panel-diff-file,
|
||||
.codex-panel__tool-result > .codex-panel__meta-grid,
|
||||
.codex-panel__tool-result-details > .codex-panel__output,
|
||||
.codex-panel__tool-result-details > .codex-panel-diff-file,
|
||||
.codex-panel__tool-result-details > .codex-panel__meta-grid {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.codex-panel__tool-result-details {
|
||||
cursor: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.codex-panel__tool-summary {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-ui-small);
|
||||
cursor: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.codex-panel__tool-result > .codex-panel__tool-summary {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
margin-top: var(--codex-panel-panel-gap);
|
||||
overflow: hidden;
|
||||
line-height: var(--line-height-tight);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.codex-panel__tool-result.is-open > .codex-panel__tool-summary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.codex-panel__task-list,
|
||||
.codex-panel__agent-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--codex-panel-panel-gap);
|
||||
margin: var(--codex-panel-control-gap) 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.codex-panel__task-step,
|
||||
.codex-panel__agent-row {
|
||||
display: grid;
|
||||
grid-template-columns: max-content minmax(0, 1fr);
|
||||
gap: var(--codex-panel-item-gap);
|
||||
min-width: 0;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-ui-small);
|
||||
}
|
||||
|
||||
.codex-panel__task-marker,
|
||||
.codex-panel__agent-thread {
|
||||
color: var(--text-faint);
|
||||
font-family: var(--font-monospace);
|
||||
font-size: var(--font-ui-smaller);
|
||||
}
|
||||
|
||||
.codex-panel__task-step--completed .codex-panel__task-text {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.codex-panel__task-step--inProgress .codex-panel__task-marker,
|
||||
.codex-panel__task-step--inProgress .codex-panel__task-text {
|
||||
color: var(--text-accent);
|
||||
}
|
||||
|
||||
.codex-panel__agent-status {
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.codex-panel__agent-activity > .codex-panel__agent-activity-summary {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: var(--line-height-tight);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.codex-panel__agent-activity.is-open > .codex-panel__agent-activity-summary {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.codex-panel__agent-detail-section {
|
||||
margin-top: var(--codex-panel-section-gap);
|
||||
}
|
||||
|
||||
.codex-panel__agent-detail-section > pre {
|
||||
margin: var(--codex-panel-item-gap) 0 0;
|
||||
}
|
||||
|
||||
.codex-panel__agent-list--summary {
|
||||
margin-top: var(--codex-panel-panel-gap);
|
||||
}
|
||||
|
||||
.codex-panel__agent-row--more .codex-panel__agent-status {
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.codex-panel__output,
|
||||
.codex-panel-diff-file {
|
||||
margin-top: var(--codex-panel-section-gap);
|
||||
}
|
||||
|
||||
.codex-panel__output-title {
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
|
||||
.codex-panel__output pre {
|
||||
max-height: var(--codex-panel-size-output-max-height);
|
||||
margin: var(--codex-panel-item-gap) 0 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;
|
||||
}
|
||||
|
|
@ -1,3 +1,64 @@
|
|||
.codex-panel__pending-request-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--codex-panel-item-gap);
|
||||
margin-bottom: var(--codex-panel-edge-padding-x);
|
||||
background: transparent;
|
||||
font-family: var(--font-interface);
|
||||
}
|
||||
|
||||
.codex-panel__pending-request-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: var(--codex-panel-control-gap);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.codex-panel__pending-request-card + .codex-panel__pending-request-card {
|
||||
padding-top: var(--codex-panel-item-gap);
|
||||
border-top: 1px solid var(--codex-panel-border-muted-color);
|
||||
}
|
||||
|
||||
.codex-panel__pending-request-info {
|
||||
min-width: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.codex-panel__pending-request-title {
|
||||
color: var(--text-normal);
|
||||
font-size: var(--font-ui-small);
|
||||
line-height: var(--line-height-tight);
|
||||
}
|
||||
|
||||
.codex-panel__pending-request-body {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-ui-small);
|
||||
line-height: var(--line-height-tight);
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.codex-panel__approval-details {
|
||||
margin-top: var(--codex-panel-control-gap);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-ui-smaller);
|
||||
}
|
||||
|
||||
.codex-panel__pending-request-actions {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--codex-panel-control-gap);
|
||||
}
|
||||
|
||||
.codex-panel__user-input.codex-panel__pending-request-card .codex-panel__pending-request-actions {
|
||||
margin-top: var(--codex-panel-section-gap);
|
||||
}
|
||||
|
||||
.codex-panel__user-input-question {
|
||||
display: grid;
|
||||
gap: var(--codex-panel-control-gap);
|
||||
|
|
@ -9,9 +9,10 @@
|
|||
"23-chat-goal.css",
|
||||
"30-chat-layout.css",
|
||||
"31-chat-messages.css",
|
||||
"32-chat-user-input.css",
|
||||
"33-chat-composer.css",
|
||||
"34-chat-turn-diff-view.css",
|
||||
"32-chat-work-items.css",
|
||||
"33-chat-pending-requests.css",
|
||||
"34-chat-composer.css",
|
||||
"35-chat-turn-diff-view.css",
|
||||
"40-threads-view.css",
|
||||
"50-selection-rewrite.css",
|
||||
"60-settings.css"
|
||||
|
|
|
|||
Loading…
Reference in a new issue