murashit_codex-panel/src/styles/40-threads-view.css
2026-06-21 20:11:49 +09:00

171 lines
4.5 KiB
CSS

.codex-panel-threads {
display: flex;
flex-direction: column;
height: 100%;
color: var(--codex-panel-text-normal);
font-family: var(--font-interface);
}
.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__empty {
box-sizing: border-box;
min-height: var(--codex-panel-size-nav-item);
padding: var(--nav-item-padding, var(--codex-panel-control-gap) var(--codex-panel-item-gap));
color: var(--codex-panel-text-faint);
font-size: var(--font-ui-small);
}
.codex-panel-threads__toolbar {
flex: 0 0 auto;
}
.codex-panel-threads__list {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--nav-item-margin-bottom, var(--codex-panel-panel-gap));
min-height: 0;
padding: var(--size-4-1) var(--size-4-3);
overflow: auto;
}
.codex-panel-threads__row {
text-align: start;
}
.codex-panel-threads__row-main {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
--codex-panel-threads-row-title-color: currentcolor;
}
.codex-panel-threads__row-main::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-main:hover .codex-panel-threads__row-title,
.codex-panel-threads__row-main:focus .codex-panel-threads__row-title {
color: var(--nav-item-color-hover, var(--text-normal));
}
.codex-panel-threads__row--selected {
--codex-panel-threads-row-title-color: var(--nav-item-color-active, var(--text-normal));
}
.codex-panel-threads__row--selected .codex-panel-threads__row-title {
color: var(--nav-item-color-active, var(--text-normal));
font-weight: var(--nav-item-weight-active, var(--font-medium));
}
.codex-panel-threads__row--pending {
--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--offline {
--codex-panel-threads-gutter-color: var(--text-muted);
}
.codex-panel-threads__row--open {
--codex-panel-threads-gutter-color: var(--codex-panel-border-muted-color);
}
.codex-panel-threads__row--pending::before,
.codex-panel-threads__row--running::before,
.codex-panel-threads__row--draft::before,
.codex-panel-threads__row--offline::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 .codex-panel-ui__nav-row-action {
padding: var(--codex-panel-panel-gap);
}
.codex-panel-threads__row-main,
.codex-panel-threads__row-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.codex-panel-threads__row-title {
display: block;
color: var(--codex-panel-threads-row-title-color);
font-size: var(--font-ui-small);
font-weight: var(--nav-item-weight, var(--font-normal));
line-height: var(--line-height-tight);
}
.codex-panel-threads__actions {
display: flex;
align-items: center;
gap: var(--codex-panel-item-gap);
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__rename-form {
display: flex;
align-items: center;
box-sizing: border-box;
min-width: 0;
width: 100%;
min-height: var(--nav-item-size, var(--codex-panel-size-nav-item));
padding-right: calc(var(--codex-panel-size-icon-s) + var(--codex-panel-panel-gap) * 2 + var(--codex-panel-item-gap));
}
.codex-panel-threads__rename-field {
display: flex;
flex: 1 1 auto;
align-items: center;
min-width: 0;
min-height: var(--nav-item-size, var(--codex-panel-size-nav-item));
overflow: visible;
font-size: var(--font-ui-small);
font-weight: var(--nav-item-weight, var(--font-normal));
line-height: var(--line-height-tight);
}
.codex-panel-threads__rename-actions {
opacity: 1;
}
.codex-panel-threads__row--archive-confirming .codex-panel-threads__actions {
opacity: 1;
}
.codex-panel-threads__rename-input {
flex: 1 1 auto;
line-height: var(--line-height-tight);
}