mirror of
https://github.com/murashit/codex-panel.git
synced 2026-07-22 17:30:31 +00:00
2091 lines
56 KiB
CSS
2091 lines
56 KiB
CSS
.codex-panel,
|
|
.codex-panel-settings,
|
|
.codex-panel-threads,
|
|
.codex-panel-selection-rewrite {
|
|
--codex-panel-control-icon-size: var(--icon-m, 18px);
|
|
--codex-panel-radius-pill: 999px;
|
|
--codex-panel-size-icon-s: var(--icon-s, 16px);
|
|
--codex-panel-size-icon-xs: var(--icon-xs, 14px);
|
|
--codex-panel-size-nav-item: var(--nav-item-size, 28px);
|
|
--codex-panel-size-settings-archived-list-max-height: 360px;
|
|
--codex-panel-size-settings-hook-list-max-height: 420px;
|
|
--codex-panel-size-toolbar-panel-max-height: 232px;
|
|
--codex-panel-size-toolbar-status-panel-max-height: 384px;
|
|
--codex-panel-size-message-collapse-max-height: 360px;
|
|
--codex-panel-size-message-collapse-fade-height: 72px;
|
|
--codex-panel-size-output-max-height: 420px;
|
|
--codex-panel-size-selection-rewrite-width: 520px;
|
|
--codex-panel-size-selection-rewrite-max-height: 560px;
|
|
--codex-panel-size-selection-rewrite-panel-margin: calc(var(--codex-panel-section-gap) * 3);
|
|
--codex-panel-size-selection-rewrite-preview-max-height: 180px;
|
|
--codex-panel-size-selection-rewrite-diff-max-height: 300px;
|
|
--codex-panel-size-selection-rewrite-debug-max-height: 160px;
|
|
--codex-panel-size-user-input-text-min-height: 26px;
|
|
--codex-panel-size-composer-input-max-height: 208px;
|
|
--codex-panel-size-composer-suggestions-max-height: 168px;
|
|
--codex-panel-icon-button-inline-size: calc(var(--codex-panel-control-icon-size) + var(--codex-panel-item-gap) * 2);
|
|
--codex-panel-icon-button-block-size: calc(var(--codex-panel-control-icon-size) + var(--codex-panel-control-gap) * 2);
|
|
--codex-panel-status-dot-size: var(--codex-panel-section-gap);
|
|
--codex-panel-meter-bar-height: var(--codex-panel-control-gap);
|
|
--codex-panel-composer-control-size: var(--codex-panel-icon-button-block-size);
|
|
--codex-panel-composer-min-height: calc((var(--codex-panel-composer-control-size) * 2) + var(--codex-panel-control-gap));
|
|
--codex-panel-status-bar-clearance: var(--status-bar-height, calc(var(--codex-panel-section-gap) * 3));
|
|
--codex-panel-bottom-safe-area: max(env(safe-area-inset-bottom, 0px), var(--codex-panel-status-bar-clearance));
|
|
--codex-panel-toolbar-text-color: var(--text-muted);
|
|
--codex-panel-toolbar-text-size: var(--font-ui-small);
|
|
--codex-panel-toolbar-meta-size: var(--font-ui-smaller);
|
|
--codex-panel-toolbar-line-height: var(--line-height-tight);
|
|
--codex-panel-content-font: var(--font-text);
|
|
--codex-panel-content-font-size: calc(var(--font-text-size, 16px) * 0.9375);
|
|
--codex-panel-compact-line-height: var(--line-height-tight);
|
|
--codex-panel-surface: var(--background-primary);
|
|
--codex-panel-code-surface: var(--code-background, var(--background-secondary));
|
|
--codex-panel-border-color: var(--background-modifier-border);
|
|
--codex-panel-border-muted-color: var(--background-modifier-border-hover);
|
|
--codex-panel-text-normal: var(--text-normal);
|
|
--codex-panel-text-muted: var(--text-muted);
|
|
--codex-panel-text-faint: var(--text-faint);
|
|
--codex-panel-color-accent: var(--interactive-accent);
|
|
--codex-panel-color-success: var(--text-success);
|
|
--codex-panel-color-warning: var(--text-warning);
|
|
--codex-panel-color-danger: var(--text-error);
|
|
--codex-panel-status-ring-faint: color-mix(in srgb, var(--codex-panel-text-faint) 12%, transparent);
|
|
--codex-panel-status-ring-success: color-mix(in srgb, var(--codex-panel-color-success) 12%, transparent);
|
|
--codex-panel-status-ring-accent: color-mix(in srgb, var(--codex-panel-color-accent) 14%, transparent);
|
|
--codex-panel-edge-padding-x: var(--size-4-3, 12px);
|
|
--codex-panel-toolbar-button-gap: var(--size-2-1, 2px);
|
|
--codex-panel-section-gap: var(--size-4-2, 8px);
|
|
--codex-panel-item-gap: var(--size-2-3, 6px);
|
|
--codex-panel-control-gap: var(--size-2-2, 4px);
|
|
--codex-panel-panel-gap: var(--size-2-1, 2px);
|
|
--codex-panel-toolbar-panel-row-gap: var(--codex-panel-control-gap);
|
|
--codex-panel-message-indent: calc(var(--codex-panel-section-gap) + var(--codex-panel-panel-gap));
|
|
--codex-panel-section-label-color: var(--codex-panel-text-faint);
|
|
--codex-panel-section-label-size: var(--font-ui-smaller);
|
|
--codex-panel-section-label-weight: var(--font-semibold);
|
|
--codex-panel-section-label-line-height: var(--codex-panel-compact-line-height);
|
|
--codex-panel-section-label-padding: 0 var(--codex-panel-section-gap) var(--codex-panel-control-gap);
|
|
--codex-panel-section-label-block-padding: var(--codex-panel-item-gap) var(--codex-panel-section-gap) var(--codex-panel-panel-gap);
|
|
--codex-panel-role-label-color: var(--codex-panel-text-faint);
|
|
--codex-panel-role-label-size: var(--font-ui-smaller);
|
|
--codex-panel-role-label-weight: var(--font-semibold);
|
|
--codex-panel-item-title-color: var(--codex-panel-text-normal);
|
|
--codex-panel-item-title-size: var(--font-ui-small);
|
|
--codex-panel-item-title-weight: var(--font-semibold);
|
|
--codex-panel-secondary-label-size: var(--font-ui-smaller);
|
|
--codex-panel-secondary-label-weight: var(--font-medium);
|
|
--codex-panel-card-radius: var(--radius-s);
|
|
--codex-panel-control-radius: var(--clickable-icon-radius, var(--codex-panel-card-radius));
|
|
--codex-panel-code-radius: var(--codex-panel-card-radius);
|
|
--codex-panel-rail-width: 2px;
|
|
--codex-panel-rail: var(--codex-panel-rail-width) solid var(--codex-panel-border-color);
|
|
--codex-panel-rail-transparent: var(--codex-panel-rail-width) solid transparent;
|
|
--codex-panel-border: var(--border-width, 1px) solid var(--codex-panel-border-color);
|
|
--codex-panel-divider: 1px solid var(--codex-panel-border-color);
|
|
--codex-panel-divider-muted: 1px solid var(--codex-panel-border-muted-color);
|
|
}
|
|
|
|
.codex-panel-threads {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
color: var(--codex-panel-text-normal);
|
|
font-family: var(--font-interface);
|
|
}
|
|
|
|
.codex-panel-threads__row-title-line,
|
|
.codex-panel-threads__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--codex-panel-item-gap);
|
|
}
|
|
|
|
.codex-panel-threads__status,
|
|
.codex-panel-threads__empty {
|
|
color: var(--codex-panel-text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
.codex-panel-threads__toolbar {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.codex-panel-threads__list {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
padding: var(--codex-panel-control-gap);
|
|
overflow: auto;
|
|
}
|
|
|
|
.codex-panel-threads__row {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
min-height: var(--codex-panel-size-nav-item);
|
|
padding: var(--nav-item-padding, var(--codex-panel-control-gap) var(--codex-panel-item-gap));
|
|
border: 0;
|
|
border-radius: var(--nav-item-radius, var(--codex-panel-card-radius));
|
|
background: transparent;
|
|
color: var(--nav-item-color, var(--text-muted));
|
|
text-align: start;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.codex-panel-threads__row::before {
|
|
position: absolute;
|
|
top: var(--codex-panel-control-gap);
|
|
bottom: var(--codex-panel-control-gap);
|
|
left: var(--codex-panel-section-gap);
|
|
width: var(--codex-panel-rail-width);
|
|
content: "";
|
|
}
|
|
|
|
.codex-panel-threads__row:hover,
|
|
.codex-panel-threads__row:focus-within {
|
|
background: var(--background-modifier-hover);
|
|
color: var(--nav-item-color-hover, var(--text-normal));
|
|
}
|
|
|
|
.codex-panel-threads__row--needs-input,
|
|
.codex-panel-threads__row--approval {
|
|
--codex-panel-threads-gutter-color: color-mix(in srgb, var(--codex-panel-color-warning) 72%, transparent);
|
|
}
|
|
|
|
.codex-panel-threads__row--running {
|
|
--codex-panel-threads-gutter-color: color-mix(in srgb, var(--codex-panel-color-accent) 68%, transparent);
|
|
}
|
|
|
|
.codex-panel-threads__row--draft {
|
|
--codex-panel-threads-gutter-color: color-mix(in srgb, var(--codex-panel-color-accent) 36%, transparent);
|
|
}
|
|
|
|
.codex-panel-threads__row--open {
|
|
--codex-panel-threads-gutter-color: var(--codex-panel-border-muted-color);
|
|
}
|
|
|
|
.codex-panel-threads__row--needs-input::before,
|
|
.codex-panel-threads__row--approval::before,
|
|
.codex-panel-threads__row--running::before,
|
|
.codex-panel-threads__row--draft::before,
|
|
.codex-panel-threads__row--open::before {
|
|
background: var(--codex-panel-threads-gutter-color);
|
|
}
|
|
|
|
.codex-panel-threads__row--renaming {
|
|
cursor: default;
|
|
}
|
|
|
|
.codex-panel-threads__row--renaming:focus-within {
|
|
box-shadow: 0 0 0 2px var(--interactive-accent);
|
|
}
|
|
|
|
.codex-panel-threads__row-title-line,
|
|
.codex-panel-threads__row-title {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.codex-panel-threads__row-title {
|
|
font-size: var(--font-ui-small);
|
|
font-weight: var(--nav-item-weight, var(--font-normal));
|
|
}
|
|
|
|
.codex-panel-threads__actions {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: var(--codex-panel-item-gap);
|
|
transform: translateY(-50%);
|
|
flex-wrap: nowrap;
|
|
opacity: 0;
|
|
}
|
|
|
|
.codex-panel-threads__row:hover .codex-panel-threads__actions,
|
|
.codex-panel-threads__row:focus-within .codex-panel-threads__actions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.codex-panel-threads__icon-button {
|
|
flex: 0 0 auto;
|
|
padding: var(--codex-panel-control-gap);
|
|
}
|
|
|
|
.codex-panel-threads__toolbar-button {
|
|
--icon-size: var(--codex-panel-control-icon-size);
|
|
--icon-stroke: var(--icon-m-stroke-width, 1.75px);
|
|
}
|
|
|
|
.codex-panel-threads__row-button {
|
|
--icon-size: var(--codex-panel-size-icon-s);
|
|
--icon-stroke: var(--icon-s-stroke-width, 1.75px);
|
|
}
|
|
|
|
.codex-panel-threads__icon-button svg {
|
|
width: var(--icon-size);
|
|
height: var(--icon-size);
|
|
stroke-width: var(--icon-stroke);
|
|
}
|
|
|
|
.codex-panel-threads__rename-form {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--codex-panel-toolbar-button-gap);
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.codex-panel-threads__rename-input {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--nav-item-color-active, var(--text-normal));
|
|
font-size: var(--font-ui-small);
|
|
font-weight: var(--nav-item-weight, var(--font-normal));
|
|
line-height: var(--line-height-tight);
|
|
overflow-wrap: anywhere;
|
|
white-space: nowrap;
|
|
outline: none;
|
|
cursor: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel {
|
|
box-sizing: border-box;
|
|
container-type: inline-size;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
color: var(--codex-panel-text-normal);
|
|
}
|
|
|
|
.codex-panel-ui__toolbar-control {
|
|
box-sizing: border-box;
|
|
--icon-size: var(--codex-panel-control-icon-size);
|
|
--icon-stroke: var(--icon-m-stroke-width, 1.75px);
|
|
min-width: var(--codex-panel-icon-button-inline-size);
|
|
width: auto;
|
|
height: auto;
|
|
padding: var(--codex-panel-control-gap) var(--codex-panel-item-gap);
|
|
border: 0;
|
|
border-radius: var(--codex-panel-control-radius);
|
|
}
|
|
|
|
.codex-panel-ui__icon-button {
|
|
box-sizing: border-box;
|
|
--icon-size: var(--codex-panel-control-icon-size);
|
|
--icon-stroke: var(--icon-m-stroke-width, 1.75px);
|
|
min-width: var(--codex-panel-composer-control-size);
|
|
width: auto;
|
|
height: auto;
|
|
padding: var(--codex-panel-control-gap);
|
|
border-radius: var(--codex-panel-control-radius);
|
|
}
|
|
|
|
.codex-panel-ui__toolbar-control svg,
|
|
.codex-panel-ui__icon-button svg {
|
|
width: var(--icon-size);
|
|
height: var(--icon-size);
|
|
stroke-width: var(--icon-stroke);
|
|
}
|
|
|
|
.codex-panel-ui__icon-button:disabled {
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.codex-panel-ui__text-input {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
font-family: var(--codex-panel-content-font);
|
|
font-size: var(--codex-panel-content-font-size);
|
|
resize: none;
|
|
}
|
|
|
|
.codex-panel-ui__action-stack {
|
|
height: 100%;
|
|
align-self: end;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
gap: var(--codex-panel-control-gap);
|
|
}
|
|
|
|
.workspace-leaf-content[data-type="codex-panel-view"] .view-content.codex-panel {
|
|
padding: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.codex-panel__toolbar {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: var(--codex-panel-section-gap);
|
|
}
|
|
|
|
.codex-panel__toolbar-primary {
|
|
display: flex;
|
|
gap: var(--codex-panel-toolbar-button-gap);
|
|
align-items: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
.codex-panel__meter-compact-label,
|
|
.codex-panel__context-compact-label,
|
|
.codex-panel__runtime-model-value,
|
|
.codex-panel__limit-panel-label,
|
|
.codex-panel__limit-panel-value,
|
|
.codex-panel__limit-panel-reset,
|
|
.codex-panel__toolbar-panel-label,
|
|
.codex-panel__toolbar-panel-meta,
|
|
.codex-panel__suggestion-label,
|
|
.codex-panel__suggestion-detail {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.codex-panel__runtime-area {
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.codex-panel__auto-review-toggle {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.codex-panel__runtime-strip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--codex-panel-toolbar-button-gap);
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.codex-panel__runtime-icon {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.codex-panel__auto-review-toggle.is-active,
|
|
.codex-panel__runtime-icon.is-active {
|
|
color: var(--icon-color-active);
|
|
background: var(--background-modifier-active-hover);
|
|
}
|
|
|
|
.codex-panel .clickable-icon.codex-panel__runtime-model {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
min-width: calc(var(--codex-panel-icon-button-inline-size) * 3);
|
|
max-width: calc(var(--codex-panel-icon-button-inline-size) * 5);
|
|
gap: var(--codex-panel-control-gap);
|
|
padding: var(--codex-panel-control-gap) var(--codex-panel-item-gap);
|
|
border: 0;
|
|
appearance: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
color: var(--text-muted);
|
|
font: inherit;
|
|
font-size: var(--codex-panel-toolbar-text-size);
|
|
line-height: var(--codex-panel-toolbar-line-height);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.codex-panel .clickable-icon.codex-panel__runtime-model:hover,
|
|
.codex-panel .clickable-icon.codex-panel__runtime-model.is-active {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.codex-panel .clickable-icon.codex-panel__runtime-model.is-active {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.codex-panel .clickable-icon.codex-panel__runtime-model:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.codex-panel__runtime-model-value {
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
color: var(--codex-panel-toolbar-text-color);
|
|
}
|
|
|
|
.codex-panel__runtime-picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--codex-panel-toolbar-panel-row-gap);
|
|
}
|
|
|
|
.codex-panel .menu-item.codex-panel__toolbar-panel-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4-2);
|
|
width: 100%;
|
|
min-width: 0;
|
|
height: auto;
|
|
padding: var(--size-4-1) var(--size-4-2);
|
|
border: 0;
|
|
border-radius: var(--radius-s);
|
|
appearance: none;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
color: var(--codex-panel-toolbar-text-color);
|
|
font: inherit;
|
|
font-size: var(--codex-panel-toolbar-text-size);
|
|
line-height: var(--codex-panel-toolbar-line-height);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.codex-panel__toolbar-panel-check {
|
|
flex: 0 0 auto;
|
|
min-width: var(--codex-panel-size-icon-s);
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.codex-panel__toolbar-panel-check svg {
|
|
width: var(--codex-panel-size-icon-s);
|
|
height: var(--codex-panel-size-icon-s);
|
|
}
|
|
|
|
.codex-panel__toolbar-panel-label,
|
|
.codex-panel__toolbar-panel-meta {
|
|
min-width: 0;
|
|
}
|
|
|
|
.codex-panel__toolbar-panel-label {
|
|
flex: 1 1 auto;
|
|
color: var(--codex-panel-toolbar-text-color);
|
|
}
|
|
|
|
.codex-panel__toolbar-panel-meta {
|
|
flex: 0 1 auto;
|
|
color: var(--text-faint);
|
|
font-size: var(--codex-panel-toolbar-meta-size);
|
|
}
|
|
|
|
.codex-panel .menu-item.codex-panel__toolbar-panel-item:hover:not(:where(:disabled, .is-disabled)),
|
|
.codex-panel .menu-item.codex-panel__toolbar-panel-item.selected,
|
|
.codex-panel .menu-item.codex-panel__toolbar-panel-item.is-selected,
|
|
.codex-panel .menu-item.codex-panel__toolbar-panel-item.is-active {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.codex-panel .menu-item.codex-panel__toolbar-panel-item:hover:not(:where(:disabled, .is-disabled)) {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.codex-panel .menu-item.codex-panel__toolbar-panel-item.is-disabled {
|
|
cursor: default;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.codex-panel .menu-item.codex-panel__toolbar-panel-item:disabled {
|
|
cursor: default;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.codex-panel__runtime-picker-empty {
|
|
padding: calc(var(--codex-panel-control-gap) + var(--codex-panel-panel-gap)) var(--codex-panel-section-gap)
|
|
calc(var(--codex-panel-control-gap) + var(--codex-panel-panel-gap))
|
|
calc(var(--codex-panel-size-icon-s) + var(--codex-panel-section-gap) * 2);
|
|
color: var(--text-faint);
|
|
font-size: var(--codex-panel-toolbar-text-size);
|
|
}
|
|
|
|
.codex-panel__runtime-picker-label {
|
|
padding: var(--size-4-1) var(--size-4-2) var(--size-2-1) calc(var(--codex-panel-size-icon-s) + var(--size-4-2) * 2);
|
|
color: var(--text-faint);
|
|
font-size: var(--codex-panel-toolbar-meta-size);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.codex-panel-settings__section,
|
|
.codex-panel-settings__dynamic-section {
|
|
margin-top: var(--size-4-6);
|
|
}
|
|
|
|
.codex-panel-settings__section-heading.setting-item-heading,
|
|
.codex-panel-settings__dynamic-section-heading.setting-item-heading {
|
|
margin-bottom: var(--size-4-2);
|
|
}
|
|
|
|
.codex-panel-settings__dynamic-section-status {
|
|
padding: 0 var(--size-4-4);
|
|
}
|
|
|
|
.codex-panel-settings__section-status {
|
|
padding: 0 var(--size-4-4);
|
|
}
|
|
|
|
.codex-panel-settings__dynamic-list-summary {
|
|
padding: 0 var(--size-4-4);
|
|
margin: 0 0 var(--size-2-3);
|
|
}
|
|
|
|
.codex-panel-settings__dynamic-list {
|
|
margin: var(--size-2-3) 0 0;
|
|
overflow: auto;
|
|
border: var(--codex-panel-border);
|
|
border-radius: var(--codex-panel-card-radius);
|
|
background: var(--codex-panel-surface);
|
|
}
|
|
|
|
.codex-panel-settings__archived-list {
|
|
max-height: min(var(--codex-panel-size-settings-archived-list-max-height), 45vh);
|
|
}
|
|
|
|
.codex-panel-settings__hook-list {
|
|
max-height: min(var(--codex-panel-size-settings-hook-list-max-height), 50vh);
|
|
}
|
|
|
|
.codex-panel-settings__dynamic-row.setting-item {
|
|
margin: 0;
|
|
padding: var(--size-4-2) var(--size-4-3);
|
|
border: 0;
|
|
border-top: var(--codex-panel-border);
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.codex-panel-settings__dynamic-row.setting-item:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.codex-panel-settings__dynamic-row .setting-item-info {
|
|
min-width: 0;
|
|
}
|
|
|
|
.codex-panel-settings__dynamic-row .setting-item-name,
|
|
.codex-panel-settings__dynamic-row .setting-item-description {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.codex-panel-settings__hook-hash {
|
|
overflow: hidden;
|
|
padding-top: var(--size-2-1);
|
|
color: var(--text-faint);
|
|
font-family: var(--font-monospace);
|
|
font-size: var(--font-ui-smaller);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.codex-panel-settings__hook-warning {
|
|
color: var(--codex-panel-color-warning);
|
|
}
|
|
|
|
.codex-panel-settings__hook-error {
|
|
color: var(--codex-panel-color-danger);
|
|
}
|
|
|
|
.codex-panel__status-dot {
|
|
cursor: pointer;
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.codex-panel__status-dot::before {
|
|
content: "";
|
|
width: var(--codex-panel-status-dot-size);
|
|
height: var(--codex-panel-status-dot-size);
|
|
border-radius: var(--codex-panel-radius-pill);
|
|
background: var(--codex-panel-text-faint);
|
|
box-shadow: 0 0 0 3px var(--codex-panel-status-ring-faint);
|
|
}
|
|
|
|
.codex-panel__status-dot--connected::before {
|
|
background: var(--codex-panel-color-success);
|
|
box-shadow: 0 0 0 3px var(--codex-panel-status-ring-success);
|
|
}
|
|
|
|
.codex-panel__status-dot--running::before {
|
|
background: var(--codex-panel-color-accent);
|
|
box-shadow: 0 0 0 3px var(--codex-panel-status-ring-accent);
|
|
}
|
|
|
|
.codex-panel__status-dot-diagnostic {
|
|
position: absolute;
|
|
top: var(--codex-panel-control-gap);
|
|
right: var(--codex-panel-control-gap);
|
|
width: var(--codex-panel-item-gap);
|
|
height: var(--codex-panel-item-gap);
|
|
border: var(--border-width, 1px) solid var(--codex-panel-surface);
|
|
border-radius: var(--codex-panel-radius-pill);
|
|
}
|
|
|
|
.codex-panel__status-dot-diagnostic--warning {
|
|
background: var(--codex-panel-color-warning);
|
|
}
|
|
|
|
.codex-panel__status-dot-diagnostic--error {
|
|
background: var(--codex-panel-color-danger);
|
|
}
|
|
|
|
.codex-panel__meter-compact {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--codex-panel-item-gap);
|
|
height: var(--codex-panel-icon-button-block-size);
|
|
min-width: 0;
|
|
max-width: calc(var(--codex-panel-icon-button-inline-size) * 3);
|
|
padding: 0 var(--codex-panel-panel-gap);
|
|
color: var(--codex-panel-toolbar-text-color);
|
|
font-size: var(--codex-panel-toolbar-text-size);
|
|
line-height: var(--codex-panel-toolbar-line-height);
|
|
}
|
|
|
|
.codex-panel__context-compact {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.codex-panel__context-compact + .codex-panel__status-dot {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.codex-panel__meter-compact-bar {
|
|
flex: 0 0 calc(var(--codex-panel-icon-button-inline-size) + var(--size-4-1, 4px));
|
|
height: var(--codex-panel-meter-bar-height);
|
|
overflow: hidden;
|
|
border-radius: var(--codex-panel-radius-pill);
|
|
background: var(--codex-panel-border-color);
|
|
}
|
|
|
|
.codex-panel__meter-compact-fill {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: var(--codex-panel-color-success);
|
|
}
|
|
|
|
.codex-panel__meter-compact--warn .codex-panel__meter-compact-fill {
|
|
background: var(--codex-panel-color-warning);
|
|
}
|
|
|
|
.codex-panel__meter-compact--danger .codex-panel__meter-compact-fill {
|
|
background: var(--codex-panel-color-danger);
|
|
}
|
|
|
|
.codex-panel__toolbar-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--codex-panel-panel-gap);
|
|
max-height: min(var(--codex-panel-size-toolbar-panel-max-height), 45vh);
|
|
overflow: auto;
|
|
margin-top: var(--codex-panel-item-gap);
|
|
padding: var(--codex-panel-item-gap) 0 0;
|
|
border-top: var(--codex-panel-divider);
|
|
background: transparent;
|
|
}
|
|
|
|
.codex-panel__toolbar-panel--status {
|
|
max-height: min(var(--codex-panel-size-toolbar-status-panel-max-height), 55vh);
|
|
cursor: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__status-panel-items {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--codex-panel-toolbar-panel-row-gap);
|
|
}
|
|
|
|
.codex-panel__limit-panel {
|
|
margin-top: var(--codex-panel-panel-gap);
|
|
padding-top: var(--codex-panel-item-gap);
|
|
border-top: var(--codex-panel-divider-muted);
|
|
}
|
|
|
|
.codex-panel__limit-panel-title {
|
|
padding: var(--codex-panel-section-label-padding);
|
|
color: var(--codex-panel-section-label-color);
|
|
font-size: var(--codex-panel-section-label-size);
|
|
font-weight: var(--codex-panel-section-label-weight);
|
|
line-height: var(--codex-panel-section-label-line-height);
|
|
}
|
|
|
|
.codex-panel__limit-panel-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--codex-panel-panel-gap);
|
|
cursor: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__limit-panel-row {
|
|
display: grid;
|
|
grid-template-columns: 2.5em 4ch minmax(64px, 1fr) 9.5em;
|
|
gap: var(--codex-panel-control-gap);
|
|
align-items: center;
|
|
padding: var(--codex-panel-control-gap) var(--codex-panel-section-gap);
|
|
}
|
|
|
|
.codex-panel__limit-panel-label,
|
|
.codex-panel__limit-panel-value,
|
|
.codex-panel__limit-panel-reset {
|
|
min-width: 0;
|
|
color: var(--codex-panel-text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
line-height: var(--codex-panel-compact-line-height);
|
|
cursor: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__limit-panel-value {
|
|
text-align: right;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.codex-panel__limit-panel-reset {
|
|
color: var(--codex-panel-text-faint);
|
|
}
|
|
|
|
.codex-panel__limit-panel-meter {
|
|
height: var(--codex-panel-meter-bar-height);
|
|
margin: 0 var(--codex-panel-panel-gap);
|
|
overflow: hidden;
|
|
border-radius: var(--codex-panel-radius-pill);
|
|
background: var(--codex-panel-border-color);
|
|
}
|
|
|
|
.codex-panel__limit-panel-fill {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: var(--codex-panel-color-success);
|
|
}
|
|
|
|
.codex-panel__limit-panel-row--warn .codex-panel__limit-panel-fill {
|
|
background: var(--codex-panel-color-warning);
|
|
}
|
|
|
|
.codex-panel__limit-panel-row--danger .codex-panel__limit-panel-fill {
|
|
background: var(--codex-panel-color-danger);
|
|
}
|
|
|
|
.codex-panel__limit-panel-row--warn .codex-panel__limit-panel-value {
|
|
color: var(--codex-panel-color-warning);
|
|
}
|
|
|
|
.codex-panel__limit-panel-row--danger .codex-panel__limit-panel-value {
|
|
color: var(--codex-panel-color-danger);
|
|
}
|
|
|
|
.codex-panel__connection-diagnostics {
|
|
margin-top: var(--codex-panel-panel-gap);
|
|
padding-top: var(--codex-panel-item-gap);
|
|
border-top: var(--codex-panel-divider-muted);
|
|
}
|
|
|
|
.codex-panel__connection-diagnostics-title {
|
|
padding: var(--codex-panel-section-label-padding);
|
|
color: var(--codex-panel-section-label-color);
|
|
font-size: var(--codex-panel-section-label-size);
|
|
font-weight: var(--codex-panel-section-label-weight);
|
|
line-height: var(--codex-panel-section-label-line-height);
|
|
}
|
|
|
|
.codex-panel__connection-diagnostics-section {
|
|
padding: var(--codex-panel-section-label-block-padding);
|
|
color: var(--codex-panel-section-label-color);
|
|
font-size: var(--codex-panel-section-label-size);
|
|
font-weight: var(--codex-panel-section-label-weight);
|
|
line-height: var(--codex-panel-section-label-line-height);
|
|
}
|
|
|
|
.codex-panel__connection-diagnostics-title + .codex-panel__connection-diagnostics-section {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.codex-panel__connection-diagnostics-list {
|
|
margin: 0;
|
|
cursor: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__connection-diagnostics-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
|
|
gap: var(--codex-panel-section-gap);
|
|
padding: var(--codex-panel-control-gap) var(--codex-panel-section-gap);
|
|
}
|
|
|
|
.codex-panel__connection-diagnostics-row dt,
|
|
.codex-panel__connection-diagnostics-row dd {
|
|
margin: 0;
|
|
min-width: 0;
|
|
font-size: var(--font-ui-smaller);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
.codex-panel__connection-diagnostics-row dt {
|
|
color: var(--codex-panel-text-faint);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.codex-panel__connection-diagnostics-row dd {
|
|
color: var(--codex-panel-text-muted);
|
|
overflow-wrap: anywhere;
|
|
cursor: text;
|
|
user-select: text;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.codex-panel__connection-diagnostics-row--warning dd {
|
|
color: var(--codex-panel-color-warning);
|
|
}
|
|
|
|
.codex-panel__connection-diagnostics-row--error dd {
|
|
color: var(--codex-panel-color-danger);
|
|
}
|
|
|
|
.codex-panel__body {
|
|
flex: 1 1 auto;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.codex-panel__slot {
|
|
min-width: 0;
|
|
}
|
|
|
|
.codex-panel__slot--messages {
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.codex-panel__config {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
padding: var(--codex-panel-section-gap);
|
|
border-bottom: var(--codex-panel-divider);
|
|
color: var(--codex-panel-text-muted);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.codex-panel__toolbar-panel .codex-panel__config {
|
|
margin-top: var(--codex-panel-panel-gap);
|
|
padding: var(--codex-panel-item-gap) 0 0;
|
|
border-top: var(--codex-panel-divider-muted);
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.codex-panel__toolbar-panel .codex-panel__config-title {
|
|
padding: var(--codex-panel-section-label-padding);
|
|
color: var(--codex-panel-section-label-color);
|
|
font-size: var(--codex-panel-section-label-size);
|
|
font-weight: var(--codex-panel-section-label-weight);
|
|
line-height: var(--codex-panel-section-label-line-height);
|
|
}
|
|
|
|
.codex-panel__toolbar-panel .codex-panel__config-list {
|
|
margin: 0;
|
|
overflow: visible;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.codex-panel__toolbar-panel .codex-panel__config-section {
|
|
padding: var(--codex-panel-section-label-block-padding);
|
|
border-top: 0;
|
|
color: var(--codex-panel-section-label-color);
|
|
font-size: var(--codex-panel-section-label-size);
|
|
font-weight: var(--codex-panel-section-label-weight);
|
|
line-height: var(--codex-panel-section-label-line-height);
|
|
}
|
|
|
|
.codex-panel__toolbar-panel .codex-panel__config-section:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.codex-panel__toolbar-panel .codex-panel__config-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
|
|
gap: var(--codex-panel-section-gap);
|
|
padding: var(--codex-panel-control-gap) var(--codex-panel-section-gap);
|
|
border-top: 0;
|
|
}
|
|
|
|
.codex-panel__toolbar-panel .codex-panel__config-row dt,
|
|
.codex-panel__toolbar-panel .codex-panel__config-row dd {
|
|
font-size: var(--font-ui-smaller);
|
|
line-height: var(--codex-panel-compact-line-height);
|
|
cursor: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__config-title,
|
|
.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:hover,
|
|
.codex-panel__output summary:hover,
|
|
.codex-panel-diff-file summary:hover {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.codex-panel__config-list {
|
|
margin: var(--codex-panel-section-gap) 0 0;
|
|
overflow: hidden;
|
|
border: var(--codex-panel-border);
|
|
border-radius: var(--codex-panel-card-radius);
|
|
background: var(--codex-panel-surface);
|
|
}
|
|
|
|
.codex-panel__config-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(82px, 34%) minmax(0, 1fr);
|
|
gap: var(--codex-panel-section-gap);
|
|
align-items: start;
|
|
padding: var(--codex-panel-control-gap) var(--codex-panel-section-gap);
|
|
border-top: var(--codex-panel-divider-muted);
|
|
}
|
|
|
|
.codex-panel__config-row:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.codex-panel__config-section {
|
|
padding: var(--codex-panel-section-label-block-padding);
|
|
border-top: var(--codex-panel-divider-muted);
|
|
color: var(--codex-panel-section-label-color);
|
|
font-size: var(--codex-panel-section-label-size);
|
|
font-weight: var(--codex-panel-section-label-weight);
|
|
line-height: var(--codex-panel-section-label-line-height);
|
|
}
|
|
|
|
.codex-panel__config-section:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.codex-panel__config-row dt,
|
|
.codex-panel__config-row dd {
|
|
margin: 0;
|
|
min-width: 0;
|
|
font-size: var(--font-ui-smaller);
|
|
line-height: var(--codex-panel-compact-line-height);
|
|
}
|
|
|
|
.codex-panel__config-row dt {
|
|
color: var(--codex-panel-text-faint);
|
|
}
|
|
|
|
.codex-panel__config-row dd {
|
|
color: var(--codex-panel-text-muted);
|
|
overflow-wrap: anywhere;
|
|
cursor: text;
|
|
user-select: text;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.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__threads {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--codex-panel-toolbar-panel-row-gap);
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
max-height: none;
|
|
overflow-x: hidden;
|
|
overflow-y: visible;
|
|
}
|
|
|
|
.codex-panel__thread-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
gap: var(--codex-panel-panel-gap);
|
|
align-items: center;
|
|
min-width: 0;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.codex-panel__thread-row:hover,
|
|
.codex-panel__thread-row:focus-within {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.codex-panel .menu-item.codex-panel__thread:hover:not(:where(:disabled, .is-disabled)),
|
|
.codex-panel .menu-item.codex-panel__thread.selected,
|
|
.codex-panel .menu-item.codex-panel__thread.is-selected {
|
|
background: transparent;
|
|
}
|
|
|
|
.codex-panel__thread-row--renaming {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.codex-panel__thread-rename {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto auto auto;
|
|
gap: var(--codex-panel-panel-gap);
|
|
align-items: center;
|
|
min-width: 0;
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.codex-panel__thread-rename:focus-within {
|
|
box-shadow: 0 0 0 2px var(--interactive-accent);
|
|
}
|
|
|
|
.codex-panel__thread-rename-input {
|
|
width: 100%;
|
|
min-width: 0;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: var(--nav-item-color-active, var(--text-normal));
|
|
font-size: var(--codex-panel-toolbar-text-size);
|
|
line-height: var(--codex-panel-toolbar-line-height);
|
|
overflow-wrap: anywhere;
|
|
white-space: nowrap;
|
|
outline: none;
|
|
cursor: text;
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__thread {
|
|
min-height: var(--codex-panel-size-nav-item);
|
|
margin: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.codex-panel__thread-action {
|
|
--icon-size: var(--codex-panel-size-icon-s);
|
|
--icon-stroke: var(--icon-s-stroke-width, 1.75px);
|
|
flex: 0 0 auto;
|
|
min-width: calc(var(--codex-panel-size-icon-s) + var(--codex-panel-control-gap) * 2);
|
|
padding: var(--codex-panel-control-gap);
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
.codex-panel__thread-row:hover .codex-panel__thread-action,
|
|
.codex-panel__thread-row:focus-within .codex-panel__thread-action,
|
|
.codex-panel__thread-action:focus-visible {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
.codex-panel__thread-action:disabled {
|
|
visibility: visible;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.codex-panel__thread--empty {
|
|
color: var(--text-faint);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.codex-panel__messages {
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-anchor: none;
|
|
padding: var(--codex-panel-edge-padding-x) var(--codex-panel-edge-padding-x);
|
|
user-select: text;
|
|
}
|
|
|
|
.codex-panel__history-bar {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: var(--codex-panel-section-gap);
|
|
}
|
|
|
|
.codex-panel__message {
|
|
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-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--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__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__activity-group {
|
|
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: pointer;
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.codex-panel__activity-group > summary:hover {
|
|
color: 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__work-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 {
|
|
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-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 {
|
|
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: pointer;
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
}
|
|
|
|
.codex-panel__message-collapse-details > summary:hover {
|
|
color: 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__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);
|
|
}
|
|
|
|
.codex-panel__open-turn-diff:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
.codex-panel__open-turn-diff:focus-visible {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.codex-panel__edited-files-separator {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
.codex-panel__reasoning {
|
|
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__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:where(.is-active) .codex-panel__reasoning-dots span:nth-child(2) {
|
|
animation-delay: 0.18s;
|
|
}
|
|
|
|
.codex-panel__reasoning:where(.is-active) .codex-panel__reasoning-dots span:nth-child(3) {
|
|
animation-delay: 0.36s;
|
|
}
|
|
|
|
@keyframes codex-panel-reasoning-dot {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
40% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.codex-panel__wikilink {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.codex-panel__work-message {
|
|
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.setting-item {
|
|
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.setting-item + .codex-panel__pending-request-card.setting-item {
|
|
padding-top: var(--codex-panel-item-gap);
|
|
border-top: 1px solid var(--codex-panel-border-muted-color);
|
|
}
|
|
|
|
.codex-panel__pending-request-info.setting-item-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.setting-item-control {
|
|
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 {
|
|
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: pointer;
|
|
}
|
|
|
|
.codex-panel__tool-result--plain .codex-panel__tool-result-header {
|
|
cursor: text;
|
|
}
|
|
|
|
.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-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,
|
|
.codex-panel-diff {
|
|
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;
|
|
}
|
|
|
|
.codex-panel__output pre {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.codex-panel-diff {
|
|
white-space: pre;
|
|
}
|
|
|
|
.codex-panel-diff__line {
|
|
display: block;
|
|
border-left: 2px solid transparent;
|
|
padding-left: var(--codex-panel-item-gap);
|
|
}
|
|
|
|
.codex-panel-diff__line--added {
|
|
border-left-color: var(--codex-panel-color-success);
|
|
color: var(--codex-panel-text-normal);
|
|
}
|
|
|
|
.codex-panel-diff__line--removed {
|
|
border-left-color: var(--codex-panel-color-danger);
|
|
color: var(--codex-panel-text-normal);
|
|
}
|
|
|
|
.codex-panel-diff__line--hunk {
|
|
color: var(--text-accent);
|
|
}
|
|
|
|
.codex-panel-diff__line--file {
|
|
color: var(--codex-panel-text-normal);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
|
|
.codex-panel-diff__line--context {
|
|
color: var(--codex-panel-text-muted);
|
|
}
|
|
|
|
.codex-panel-chat-turn-diff {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--codex-panel-edge-padding-x);
|
|
padding: calc(var(--codex-panel-section-gap) * 2);
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.codex-panel-chat-turn-diff__header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--codex-panel-section-gap);
|
|
}
|
|
|
|
.codex-panel-chat-turn-diff__title-block {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.codex-panel-chat-turn-diff__title {
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: var(--font-semibold);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
.codex-panel-chat-turn-diff__meta,
|
|
.codex-panel-chat-turn-diff__files,
|
|
.codex-panel-chat-turn-diff__empty {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.codex-panel-chat-turn-diff__copy {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.codex-panel-chat-turn-diff__files {
|
|
margin: 0;
|
|
}
|
|
|
|
.codex-panel-chat-turn-diff__files ul {
|
|
margin-block: var(--codex-panel-control-gap) 0;
|
|
}
|
|
|
|
.codex-panel-chat-turn-diff__diff.codex-panel-diff {
|
|
max-height: none;
|
|
margin: 0;
|
|
overflow: visible;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.codex-panel-selection-rewrite {
|
|
position: fixed;
|
|
z-index: var(--layer-popover, 30);
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--codex-panel-section-gap);
|
|
width: min(var(--codex-panel-size-selection-rewrite-width), calc(100vw - var(--codex-panel-size-selection-rewrite-panel-margin)));
|
|
max-height: min(
|
|
var(--codex-panel-size-selection-rewrite-max-height),
|
|
calc(100vh - var(--codex-panel-size-selection-rewrite-panel-margin))
|
|
);
|
|
padding: var(--codex-panel-section-gap);
|
|
overflow: auto;
|
|
border: var(--codex-panel-border);
|
|
border-radius: var(--radius-m);
|
|
background: var(--codex-panel-surface);
|
|
box-shadow: var(--shadow-s);
|
|
color: var(--codex-panel-text-normal);
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__prompt-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: var(--codex-panel-section-gap);
|
|
align-items: stretch;
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__instruction {
|
|
min-height: var(--codex-panel-composer-min-height);
|
|
max-height: min(var(--codex-panel-size-selection-rewrite-preview-max-height), 30vh);
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__result-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: var(--codex-panel-section-gap);
|
|
align-items: start;
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__result-row.is-hidden,
|
|
.codex-panel-selection-rewrite__diff:empty {
|
|
display: none;
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__icon-button.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__status {
|
|
color: var(--codex-panel-text-muted);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__status:empty {
|
|
display: none;
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__status.is-active {
|
|
color: var(--codex-panel-text-faint);
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__status-dots span {
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__status.is-active .codex-panel-selection-rewrite__status-dots span {
|
|
animation: codex-panel-reasoning-dot 1.2s infinite ease-in-out;
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__status:where(.is-active) .codex-panel-selection-rewrite__status-dots span:nth-child(2) {
|
|
animation-delay: 0.18s;
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__status:where(.is-active) .codex-panel-selection-rewrite__status-dots span:nth-child(3) {
|
|
animation-delay: 0.36s;
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__stream-preview {
|
|
box-sizing: border-box;
|
|
max-height: min(var(--codex-panel-size-selection-rewrite-preview-max-height), 28vh);
|
|
margin: 0;
|
|
padding: var(--codex-panel-item-gap) var(--codex-panel-section-gap);
|
|
overflow: auto;
|
|
border-left: var(--codex-panel-rail);
|
|
color: var(--codex-panel-text-muted);
|
|
font-family: var(--font-monospace);
|
|
font-size: var(--font-smaller);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__stream-preview.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__diff-body {
|
|
box-sizing: border-box;
|
|
max-height: min(var(--codex-panel-size-selection-rewrite-diff-max-height), 38vh);
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: var(--codex-panel-item-gap) var(--codex-panel-section-gap);
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__debug {
|
|
color: var(--codex-panel-text-muted);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__debug.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.codex-panel-selection-rewrite__debug pre {
|
|
max-height: var(--codex-panel-size-selection-rewrite-debug-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(--codex-panel-text-muted);
|
|
font-family: var(--font-monospace);
|
|
font-size: var(--font-smaller);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.codex-panel__user-input-question {
|
|
display: grid;
|
|
gap: var(--codex-panel-control-gap);
|
|
margin-top: var(--codex-panel-item-gap);
|
|
}
|
|
|
|
.codex-panel__user-input-header {
|
|
color: var(--codex-panel-item-title-color);
|
|
font-size: var(--codex-panel-item-title-size);
|
|
font-weight: var(--codex-panel-item-title-weight);
|
|
}
|
|
|
|
.codex-panel__user-input-prompt {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-small);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
.codex-panel__user-input-answer {
|
|
display: grid;
|
|
gap: var(--codex-panel-control-gap);
|
|
margin-top: calc(var(--codex-panel-section-gap) - var(--codex-panel-control-gap));
|
|
}
|
|
|
|
.codex-panel__user-input-option {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: max-content minmax(0, 1fr);
|
|
gap: var(--codex-panel-control-gap) var(--codex-panel-item-gap);
|
|
align-items: start;
|
|
padding: 0 var(--codex-panel-control-gap);
|
|
border-radius: var(--radius-s);
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-small);
|
|
line-height: var(--line-height-tight);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.codex-panel__user-input-radio {
|
|
grid-column: 1;
|
|
align-self: start;
|
|
margin: var(--codex-panel-panel-gap) 0 0;
|
|
}
|
|
|
|
.codex-panel__user-input-option-description {
|
|
grid-column: 2;
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
}
|
|
|
|
.codex-panel__user-input-text {
|
|
width: 100%;
|
|
min-height: var(--codex-panel-size-user-input-text-min-height);
|
|
min-width: 0;
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
.codex-panel__user-input-other-text {
|
|
grid-column: 2;
|
|
}
|
|
|
|
.codex-panel__composer {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
gap: var(--codex-panel-section-gap);
|
|
padding: var(--codex-panel-section-gap) var(--codex-panel-edge-padding-x)
|
|
calc(var(--codex-panel-section-gap) + var(--codex-panel-bottom-safe-area));
|
|
}
|
|
|
|
.codex-panel__composer-input {
|
|
min-height: var(--codex-panel-composer-min-height);
|
|
max-height: min(var(--codex-panel-size-composer-input-max-height), 40vh);
|
|
}
|
|
|
|
.codex-panel__composer-action {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.codex-panel__composer-action.is-interrupt {
|
|
color: var(--icon-color-focused);
|
|
}
|
|
|
|
.codex-panel__composer-action.is-steer {
|
|
color: var(--icon-color-active);
|
|
}
|
|
|
|
.codex-panel__composer-suggestions.suggestion-container {
|
|
position: absolute;
|
|
right: var(--codex-panel-edge-padding-x);
|
|
bottom: calc(100% - var(--codex-panel-control-gap));
|
|
left: var(--codex-panel-edge-padding-x);
|
|
z-index: var(--layer-popover, 30);
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: auto;
|
|
max-height: min(var(--codex-panel-size-composer-suggestions-max-height), 36vh);
|
|
overflow-y: auto;
|
|
margin: 0;
|
|
border: var(--codex-panel-border);
|
|
border-radius: var(--codex-panel-card-radius);
|
|
background: var(--codex-panel-surface);
|
|
box-shadow: var(--shadow-s);
|
|
}
|
|
|
|
.codex-panel__composer-suggestion.suggestion-item {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: var(--codex-panel-panel-gap);
|
|
width: 100%;
|
|
line-height: var(--codex-panel-compact-line-height);
|
|
text-align: left;
|
|
}
|
|
|
|
.codex-panel__composer-suggestion.suggestion-item.is-selected {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.codex-panel__suggestion-label,
|
|
.codex-panel__suggestion-detail {
|
|
display: block;
|
|
min-width: 0;
|
|
}
|
|
|
|
.codex-panel__suggestion-label {
|
|
color: var(--codex-panel-item-title-color);
|
|
font-size: var(--codex-panel-item-title-size);
|
|
font-weight: var(--codex-panel-item-title-weight);
|
|
}
|
|
|
|
.codex-panel__suggestion-detail {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
line-height: var(--line-height-tight);
|
|
}
|
|
|
|
.codex-panel__composer-suggestion.is-selected .codex-panel__suggestion-label {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
@container (max-width: 280px) {
|
|
.codex-panel__toolbar-primary {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.codex-panel__runtime-strip {
|
|
gap: var(--codex-panel-panel-gap);
|
|
}
|
|
|
|
.codex-panel__runtime-model {
|
|
min-width: 0;
|
|
max-width: calc(var(--codex-panel-icon-button-inline-size) * 3);
|
|
padding: 0 var(--codex-panel-item-gap);
|
|
}
|
|
|
|
.codex-panel__runtime-area {
|
|
order: 3;
|
|
flex: 1 1 100%;
|
|
}
|
|
|
|
.codex-panel__meter-compact {
|
|
min-width: 0;
|
|
height: var(--codex-panel-control-icon-size);
|
|
padding-left: 0;
|
|
}
|
|
|
|
.codex-panel__meter-compact-label {
|
|
max-width: calc(var(--codex-panel-icon-button-inline-size) * 2);
|
|
}
|
|
|
|
.codex-panel__meter-compact-bar {
|
|
flex-basis: calc(var(--codex-panel-icon-button-inline-size) + calc(var(--codex-panel-section-gap) * 2));
|
|
}
|
|
|
|
.codex-panel__composer {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: var(--codex-panel-control-gap);
|
|
}
|
|
|
|
.codex-panel__composer-actions {
|
|
height: auto;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|