hansjone/oclaw
1
0
Fork 0
mirror of https://github.com/hansjone/oclaw.git synced 2026-10-11 09:20:49 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Restyle chat model picker as a themed custom dropdown.

Browse source 
Drop the bordered native select chrome and open a soft popup that follows light/dark theme tokens.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
oliver 2026-08-11 05:05:52 +08:00
parent 746570dfc9
commit 2a52349668
3 changed files with 164 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

84
interfaces/admin/static/chat.html
View file

@ -337,55 +337,87 @@
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 2px 4px 8px;
gap: 4px;
padding: 0 2px 6px;
}
.chat-composer-chip,
.chat-composer-chip--select {
appearance: none;
-webkit-appearance: none;
height: 30px;
min-height: 30px;
max-height: 30px;
padding: 0 12px;
height: 28px;
min-height: 28px;
max-height: 28px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid var(--ds-border, rgba(148, 163, 184, 0.28));
background-color: var(--ds-surface-2, #152033);
color: var(--ds-text, #e2e8f0);
border: none;
background-color: transparent;
color: var(--ds-text-muted, rgba(148, 163, 184, 0.92));
font-size: 12px;
font-weight: 500;
line-height: 1;
box-sizing: border-box;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.chat-composer-chip--select {
min-width: 148px;
max-width: 240px;
padding-right: 28px;
background-color: var(--ds-surface-2, #152033);
min-width: 0;
max-width: 220px;
width: auto;
padding-right: 22px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
background-color: transparent;
background-image:
linear-gradient(45deg, transparent 50%, var(--ds-text-muted, rgba(148, 163, 184, 0.85)) 50%),
linear-gradient(135deg, var(--ds-text-muted, rgba(148, 163, 184, 0.85)) 50%, transparent 50%);
linear-gradient(45deg, transparent 50%, var(--ds-text-muted, rgba(148, 163, 184, 0.7)) 50%),
linear-gradient(135deg, var(--ds-text-muted, rgba(148, 163, 184, 0.7)) 50%, transparent 50%);
background-position:
calc(100% - 14px) calc(50% - 2px),
calc(100% - 9px) calc(50% - 2px);
background-size: 5px 5px, 5px 5px;
calc(100% - 10px) calc(50% - 1.5px),
calc(100% - 6px) calc(50% - 1.5px);
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
}
.chat-composer-chip--select option {
background-color: var(--ds-surface, #0f172a);
color: var(--ds-text, #e2e8f0);
}
.chat-composer-chip:hover,
.chat-composer-chip--select:hover {
background-color: var(--ds-menu-hover-bg, rgba(148, 163, 184, 0.16));
border-color: var(--ds-accent-border, rgba(94, 179, 255, 0.35));
background-color: var(--ds-menu-hover-bg, rgba(148, 163, 184, 0.12));
color: var(--ds-text, #e2e8f0);
}
.chat-composer-chip:focus-visible,
.chat-composer-chip--select:focus-visible {
outline: none;
border-color: var(--ds-accent-border-strong, rgba(94, 179, 255, 0.5));
box-shadow: 0 0 0 2px var(--ds-accent-soft, rgba(94, 179, 255, 0.2));
background-color: var(--ds-accent-soft, rgba(94, 179, 255, 0.14));
color: var(--ds-text, #e2e8f0);
box-shadow: none;
}
.chat-model-select {
position: relative;
display: inline-flex;
max-width: 100%;
}
.chat-model-select-pop {
border-radius: 12px;
padding: 6px;
min-width: 11rem;
max-width: min(320px, calc(100vw - 16px));
max-height: min(320px, 50vh);
overflow-y: auto;
border: 1px solid var(--ds-border, rgba(148, 163, 184, 0.18));
background: var(--ds-panel, var(--ds-surface, #0f172a));
box-shadow: var(--ds-pop-shadow, 0 12px 32px rgba(2, 6, 23, 0.45));
}
.chat-model-select-pop .chat-sess-menu-item {
border-radius: 8px;
padding: 9px 12px;
font-size: 13px;
line-height: 1.35;
}
.chat-model-select-pop .chat-sess-menu-item--active {
background: var(--ds-accent-soft, rgba(59, 130, 246, 0.18));
color: var(--ds-text, #e2e8f0);
font-weight: 600;
}
.chat-model-select-pop .chat-sess-menu-item--active:hover {
background: var(--ds-accent-soft, rgba(59, 130, 246, 0.22));
}
.chat-composer-shell {
border-radius: 12px;