ChoChoX/dsh-plugin-model-enhancer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: full light & dark theme adaptation for codex slider, model picker, and pill island

Browse Source
This commit is contained in:
ChoChoX
2026-09-09 09:41:28 +08:00
parent 80bd332529
commit cda806666f
2 changed files with 296 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build-client.cjs
+148 -47
View File
@@ -66,7 +66,7 @@ const enhancedModelListEditorCode = `
};
}
// CSS styles
// CSS styles (Light & Dark Theme adaptive via DSH tokens and body[data-ds-dark-theme])
const ENHANCER_CSS = \`
.VOzbGW_modelRow, .zGbnIq_modelRow, div[class*="modelRow"] {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 28px 28px auto !important;
@@ -109,9 +109,9 @@ const enhancedModelListEditorCode = `
font-weight: 500;
border-radius: 6px;
cursor: pointer;
border: 1px solid var(--dsw-alias-border-l2, rgba(255,255,255,0.12));
background: var(--dsw-alias-surface-l1, transparent);
color: var(--dsw-alias-label-secondary, #999);
border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.15));
background: transparent;
color: var(--dsw-alias-label-secondary, #61666b);
display: inline-flex;
align-items: center;
justify-content: center;
@@ -120,9 +120,18 @@ const enhancedModelListEditorCode = `
margin-left: 2px;
}
.me-action-btn:hover:not(:disabled) {
background: var(--dsw-alias-surface-l2, rgba(255,255,255,0.06));
background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05));
color: var(--dsw-alias-label-primary, #0f1115);
border-color: var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.25));
}
body[data-ds-dark-theme] .me-action-btn {
border-color: var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
color: var(--dsw-alias-label-secondary, #999);
}
body[data-ds-dark-theme] .me-action-btn:hover:not(:disabled) {
background: var(--dsw-alias-surface-l2, rgba(255, 255, 255, 0.06));
color: var(--dsw-alias-label-primary, #fff);
border-color: var(--dsw-alias-border-l1, rgba(255,255,255,0.25));
border-color: var(--dsw-alias-border-l1, rgba(255, 255, 255, 0.25));
}
.me-action-btn:disabled {
opacity: 0.4;
@@ -132,12 +141,16 @@ const enhancedModelListEditorCode = `
margin-top: 10px;
padding: 12px 14px;
border-radius: 8px;
background: var(--dsw-alias-surface-l1, rgba(255,255,255,0.02));
border: 1px solid var(--dsw-alias-border-l3, rgba(255,255,255,0.08));
background: var(--dsw-alias-bg-module-platform, rgba(0, 0, 0, 0.02));
border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.08));
display: flex;
flex-direction: column;
gap: 12px;
}
body[data-ds-dark-theme] .me-advanced-container {
background: var(--dsw-alias-surface-l1, rgba(255, 255, 255, 0.02));
border-color: var(--dsw-alias-border-l3, rgba(255, 255, 255, 0.08));
}
.me-advanced-row {
display: flex;
flex-direction: column;
@@ -151,7 +164,7 @@ const enhancedModelListEditorCode = `
.me-section-title {
font-size: 12px;
font-weight: 500;
color: var(--dsw-alias-label-secondary, #aaa);
color: var(--dsw-alias-label-secondary, #888);
}
.me-checkbox-group {
display: flex;
@@ -170,16 +183,16 @@ const enhancedModelListEditorCode = `
}
.me-checkbox-label input[type="checkbox"] {
cursor: pointer;
accent-color: var(--dsw-alias-button-primary-fill, #4e80ee);
accent-color: var(--dsw-alias-button-primary-fill, #2563eb);
}
.me-effort-tag {
font-size: 11px;
line-height: 16px;
padding: 2px 7px;
border-radius: 4px;
background: var(--dsw-alias-surface-l2, rgba(255,255,255,0.06));
border: 1px solid var(--dsw-alias-border-l3, rgba(255,255,255,0.1));
color: var(--dsw-alias-label-secondary, #aaa);
background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05));
border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
color: var(--dsw-alias-label-secondary, #666);
cursor: pointer;
display: inline-flex;
align-items: center;
@@ -187,12 +200,20 @@ const enhancedModelListEditorCode = `
transition: all 120ms ease;
user-select: none;
}
body[data-ds-dark-theme] .me-effort-tag {
background: var(--dsw-alias-surface-l2, rgba(255, 255, 255, 0.06));
border-color: var(--dsw-alias-border-l3, rgba(255, 255, 255, 0.1));
color: var(--dsw-alias-label-secondary, #aaa);
}
.me-effort-tag.active {
background: rgba(157, 125, 250, 0.15);
border-color: rgba(157, 125, 250, 0.4);
color: #b59fff;
background: rgba(147, 105, 245, 0.15);
border-color: rgba(147, 105, 245, 0.4);
color: #7c3aed;
font-weight: 500;
}
body[data-ds-dark-theme] .me-effort-tag.active {
color: #b59fff;
}
.me-diff-table {
width: 100%;
border-collapse: collapse;
@@ -200,19 +221,29 @@ const enhancedModelListEditorCode = `
font-size: 13px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--dsw-alias-border-l2, rgba(255,255,255,0.12));
border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
}
body[data-ds-dark-theme] .me-diff-table {
border-color: var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.12));
}
.me-diff-table th, .me-diff-table td {
padding: 9px 12px;
border-bottom: 1px solid var(--dsw-alias-border-l3, rgba(255,255,255,0.08));
border-bottom: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.08));
text-align: left;
}
body[data-ds-dark-theme] .me-diff-table th, body[data-ds-dark-theme] .me-diff-table td {
border-bottom-color: var(--dsw-alias-border-l3, rgba(255, 255, 255, 0.08));
}
.me-diff-table th {
background: var(--dsw-alias-surface-l2, rgba(255,255,255,0.04));
color: var(--dsw-alias-label-secondary, #999);
background: var(--dsw-alias-bg-module-platform, rgba(0, 0, 0, 0.04));
color: var(--dsw-alias-label-secondary, #666);
font-weight: 500;
font-size: 12px;
}
body[data-ds-dark-theme] .me-diff-table th {
background: var(--dsw-alias-surface-l2, rgba(255, 255, 255, 0.04));
color: var(--dsw-alias-label-secondary, #999);
}
.me-diff-table tr:last-child td {
border-bottom: none;
}
@@ -221,7 +252,7 @@ const enhancedModelListEditorCode = `
font-weight: 500;
}
.me-val-old {
color: var(--dsw-alias-label-tertiary, #777);
color: var(--dsw-alias-label-tertiary, #888);
text-decoration: line-through;
margin-right: 6px;
}
@@ -244,11 +275,15 @@ const enhancedModelListEditorCode = `
padding: 2px 4px;
height: 28px;
border-radius: 14px;
border: 1px solid var(--dsw-alias-border-l3, rgba(255, 255, 255, 0.1));
background: var(--dsw-alias-surface-l1, rgba(255, 255, 255, 0.03));
border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
background: var(--dsw-alias-bg-module-platform, rgba(0, 0, 0, 0.03));
margin-right: 6px;
flex-shrink: 0;
}
body[data-ds-dark-theme] .me-pill-island {
border-color: var(--dsw-alias-border-l3, rgba(255, 255, 255, 0.1));
background: var(--dsw-alias-surface-l1, rgba(255, 255, 255, 0.03));
}
.me-pill-btn {
box-sizing: border-box;
width: 22px;
@@ -256,7 +291,7 @@ const enhancedModelListEditorCode = `
border-radius: 50% !important;
border: none;
background: transparent;
color: var(--dsw-alias-label-secondary, #999);
color: var(--dsw-alias-label-secondary, #61666b);
display: inline-flex;
align-items: center;
justify-content: center;
@@ -265,7 +300,14 @@ const enhancedModelListEditorCode = `
padding: 0;
}
.me-pill-btn:hover:not(:disabled) {
background: var(--dsw-alias-surface-l2, rgba(255,255,255,0.08)) !important;
background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.07)) !important;
color: var(--dsw-alias-label-primary, #0f1115);
}
body[data-ds-dark-theme] .me-pill-btn {
color: var(--dsw-alias-label-secondary, #999);
}
body[data-ds-dark-theme] .me-pill-btn:hover:not(:disabled) {
background: var(--dsw-alias-surface-l2, rgba(255, 255, 255, 0.08)) !important;
color: var(--dsw-alias-label-primary, #fff);
}
.me-pill-btn:disabled {
@@ -294,7 +336,7 @@ const enhancedModelListEditorCode = `
border-radius: 14px;
border: 1px solid transparent;
background: transparent !important;
color: var(--dsw-alias-label-primary, #e0e0e0);
color: var(--dsw-alias-label-primary, inherit);
font-size: 12px;
font-weight: 500;
cursor: pointer;
@@ -303,6 +345,10 @@ const enhancedModelListEditorCode = `
.me-codex-trigger:hover:not(:disabled),
.me-codex-trigger.active-open {
background: transparent !important;
border-color: var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.16)) !important;
}
body[data-ds-dark-theme] .me-codex-trigger:hover:not(:disabled),
body[data-ds-dark-theme] .me-codex-trigger.active-open {
border-color: var(--dsw-alias-border-l2, rgba(255, 255, 255, 0.16)) !important;
}
.me-codex-trigger-chevron {
@@ -313,6 +359,7 @@ const enhancedModelListEditorCode = `
transform: rotate(180deg);
}
/* POPUP CONTAINER (ADAPTIVE LIGHT & DARK) */
.me-codex-popup {
position: absolute;
bottom: calc(100% + 8px);
@@ -320,11 +367,18 @@ const enhancedModelListEditorCode = `
width: 290px;
padding: 16px;
border-radius: 16px;
background: var(--dsw-alias-surface-overlay, #1b1c21);
box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 0 0 1px var(--dsw-alias-border-l3, rgba(255,255,255,0.08));
background: var(--dsw-specific-menu, #ffffff);
border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.1));
box-shadow: var(--dsw-shadow-lv3, 0 8px 24px rgba(0, 0, 0, 0.12));
z-index: 1000;
user-select: none;
font-family: inherit;
color: var(--dsw-alias-label-primary, #0f1115);
}
body[data-ds-dark-theme] .me-codex-popup {
background: #1b1c21;
border-color: var(--dsw-alias-border-l3, rgba(255, 255, 255, 0.08));
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--dsw-alias-border-l3, rgba(255, 255, 255, 0.08));
color: var(--dsw-alias-label-primary, #fff);
}
.me-codex-topbar {
@@ -336,7 +390,7 @@ const enhancedModelListEditorCode = `
.me-codex-icon-btn {
background: none;
border: none;
color: var(--dsw-alias-label-secondary, #8a8d9b);
color: var(--dsw-alias-label-secondary, #61666b);
cursor: pointer;
display: inline-flex;
align-items: center;
@@ -346,8 +400,15 @@ const enhancedModelListEditorCode = `
transition: all 120ms ease;
}
.me-codex-icon-btn:hover {
color: var(--dsw-alias-label-primary, #0f1115);
background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.06));
}
body[data-ds-dark-theme] .me-codex-icon-btn {
color: var(--dsw-alias-label-secondary, #8a8d9b);
}
body[data-ds-dark-theme] .me-codex-icon-btn:hover {
color: var(--dsw-alias-label-primary, #fff);
background: var(--dsw-alias-surface-l2, rgba(255,255,255,0.06));
background: var(--dsw-alias-surface-l2, rgba(255, 255, 255, 0.06));
}
.me-codex-center {
display: flex;
@@ -358,24 +419,30 @@ const enhancedModelListEditorCode = `
.me-codex-effort-title {
font-size: 15px;
font-weight: 600;
color: var(--dsw-alias-button-primary-fill, #3b82f6);
color: var(--dsw-alias-button-primary-fill, #2563eb);
display: flex;
align-items: center;
gap: 4px;
}
.me-codex-model-name {
font-size: 12px;
color: var(--dsw-alias-label-secondary, #8a8d9b);
color: var(--dsw-alias-label-secondary, #61666b);
margin-top: 1px;
display: flex;
align-items: center;
gap: 3px;
}
.me-codex-model-name:hover {
color: var(--dsw-alias-label-primary, #0f1115);
}
body[data-ds-dark-theme] .me-codex-model-name {
color: var(--dsw-alias-label-secondary, #8a8d9b);
}
body[data-ds-dark-theme] .me-codex-model-name:hover {
color: var(--dsw-alias-label-primary, #e0e0e0);
}
/* SLIDER TRACK & THUMB (DSH COMPLIANT: NO CLIP, CALC MARGINS, SOFT SKY-BLUE FILL) */
/* SLIDER TRACK & THUMB (LIGHT & DARK ADAPTIVE) */
.me-slider-track-wrap {
position: relative;
height: 38px;
@@ -388,9 +455,12 @@ const enhancedModelListEditorCode = `
width: 100%;
height: 26px;
border-radius: 13px;
background: var(--dsw-alias-surface-l2, rgba(255, 255, 255, 0.08));
background: rgba(0, 0, 0, 0.07);
position: relative;
}
body[data-ds-dark-theme] .me-slider-track {
background: var(--dsw-alias-surface-l2, rgba(255, 255, 255, 0.08));
}
.me-slider-active-fill {
position: absolute;
left: 0;
@@ -416,9 +486,12 @@ const enhancedModelListEditorCode = `
width: 5px;
height: 5px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
background: rgba(0, 0, 0, 0.22);
transition: background 120ms ease;
}
body[data-ds-dark-theme] .me-slider-dot {
background: rgba(255, 255, 255, 0.35);
}
.me-slider-dot.lit {
background: #ffffff;
box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
@@ -430,22 +503,32 @@ const enhancedModelListEditorCode = `
height: 32px;
border-radius: 50%;
background: #ffffff;
border: 1px solid rgba(56, 189, 248, 0.3);
box-shadow: 0 3px 10px rgba(0,0,0,0.45), 0 0 10px rgba(56, 189, 248, 0.3);
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);
transform: translate(-50%, -50%) scale(1);
pointer-events: none;
transition: left 120ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 160ms ease;
}
.me-slider-track-wrap:hover .me-slider-thumb {
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 14px rgba(56, 189, 248, 0.45);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22), 0 0 10px rgba(56, 189, 248, 0.3);
}
.me-slider-track-wrap:active .me-slider-thumb {
transform: translate(-50%, -50%) scale(1.15);
box-shadow: 0 5px 18px rgba(0,0,0,0.6), 0 0 18px rgba(56, 189, 248, 0.55);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 14px rgba(56, 189, 248, 0.4);
}
body[data-ds-dark-theme] .me-slider-thumb {
border: 1px solid rgba(56, 189, 248, 0.3);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), 0 0 10px rgba(56, 189, 248, 0.3);
}
body[data-ds-dark-theme] .me-slider-track-wrap:hover .me-slider-thumb {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 14px rgba(56, 189, 248, 0.45);
}
body[data-ds-dark-theme] .me-slider-track-wrap:active .me-slider-thumb {
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6), 0 0 18px rgba(56, 189, 248, 0.55);
}
/* MODEL PICKER LIST VIEW INSIDE POPUP (DISTINCT GROUP HEADERS & NESTED INDENT) */
/* MODEL PICKER LIST VIEW INSIDE POPUP (LIGHT & DARK ADAPTIVE) */
.me-model-picker-list {
max-height: 240px;
overflow-y: auto;
@@ -458,7 +541,10 @@ const enhancedModelListEditorCode = `
.me-model-group-section {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--dsw-alias-border-l3, rgba(255, 255, 255, 0.08));
border-top: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.08));
}
body[data-ds-dark-theme] .me-model-group-section {
border-top-color: var(--dsw-alias-border-l3, rgba(255, 255, 255, 0.08));
}
.me-model-group-section:first-child {
margin-top: 0;
@@ -467,7 +553,7 @@ const enhancedModelListEditorCode = `
}
.me-model-picker-group {
font-size: 11px;
color: #60a5fa;
color: #2563eb;
font-weight: 600;
padding: 4px 8px;
text-transform: uppercase;
@@ -475,10 +561,14 @@ const enhancedModelListEditorCode = `
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(59, 130, 246, 0.08);
background: rgba(37, 99, 235, 0.08);
border-radius: 4px;
margin-bottom: 4px;
}
body[data-ds-dark-theme] .me-model-picker-group {
color: #60a5fa;
background: rgba(59, 130, 246, 0.08);
}
.me-model-picker-item {
box-sizing: border-box;
width: 100%;
@@ -486,7 +576,7 @@ const enhancedModelListEditorCode = `
border-radius: 8px;
background: transparent;
border: none;
color: var(--dsw-alias-label-primary, #e2e8f0);
color: var(--dsw-alias-label-primary, #0f1115);
font-size: 13px;
text-align: left;
cursor: pointer;
@@ -496,13 +586,24 @@ const enhancedModelListEditorCode = `
transition: all 120ms ease;
}
.me-model-picker-item:hover {
background: var(--dsw-alias-surface-l2, rgba(255,255,255,0.06));
color: #fff;
background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.05));
color: var(--dsw-alias-label-primary, #000);
}
.me-model-picker-item.active {
background: rgba(37, 99, 235, 0.1);
color: #2563eb;
font-weight: 500;
}
body[data-ds-dark-theme] .me-model-picker-item {
color: var(--dsw-alias-label-primary, #e2e8f0);
}
body[data-ds-dark-theme] .me-model-picker-item:hover {
background: var(--dsw-alias-surface-l2, rgba(255, 255, 255, 0.06));
color: #fff;
}
body[data-ds-dark-theme] .me-model-picker-item.active {
background: rgba(56, 189, 248, 0.12);
color: #38bdf8;
font-weight: 500;
}
\`;
if (typeof document !== "undefined" && !document.querySelector("style[data-plugin='dsh-model-enhancer']")) {