diff --git a/build-client.cjs b/build-client.cjs index 8265a17..04c0db5 100644 --- a/build-client.cjs +++ b/build-client.cjs @@ -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']")) { diff --git a/lib/client.js b/lib/client.js index d91dc8e..91f1b7f 100644 --- a/lib/client.js +++ b/lib/client.js @@ -709,7 +709,7 @@ window.__ModuleLoader__.load({ }; } - // 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; @@ -752,9 +752,9 @@ window.__ModuleLoader__.load({ 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; @@ -763,9 +763,18 @@ window.__ModuleLoader__.load({ 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; @@ -775,12 +784,16 @@ window.__ModuleLoader__.load({ 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; @@ -794,7 +807,7 @@ window.__ModuleLoader__.load({ .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; @@ -813,16 +826,16 @@ window.__ModuleLoader__.load({ } .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; @@ -830,12 +843,20 @@ window.__ModuleLoader__.load({ 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; @@ -843,19 +864,29 @@ window.__ModuleLoader__.load({ 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; } @@ -864,7 +895,7 @@ window.__ModuleLoader__.load({ 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; } @@ -887,11 +918,15 @@ window.__ModuleLoader__.load({ 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; @@ -899,7 +934,7 @@ window.__ModuleLoader__.load({ 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; @@ -908,7 +943,14 @@ window.__ModuleLoader__.load({ 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 { @@ -937,7 +979,7 @@ window.__ModuleLoader__.load({ 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; @@ -946,6 +988,10 @@ window.__ModuleLoader__.load({ .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 { @@ -956,6 +1002,7 @@ window.__ModuleLoader__.load({ transform: rotate(180deg); } + /* POPUP CONTAINER (ADAPTIVE LIGHT & DARK) */ .me-codex-popup { position: absolute; bottom: calc(100% + 8px); @@ -963,11 +1010,18 @@ window.__ModuleLoader__.load({ 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 { @@ -979,7 +1033,7 @@ window.__ModuleLoader__.load({ .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; @@ -989,8 +1043,15 @@ window.__ModuleLoader__.load({ 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; @@ -1001,24 +1062,30 @@ window.__ModuleLoader__.load({ .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; @@ -1031,9 +1098,12 @@ window.__ModuleLoader__.load({ 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; @@ -1059,9 +1129,12 @@ window.__ModuleLoader__.load({ 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); @@ -1073,22 +1146,32 @@ window.__ModuleLoader__.load({ 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; @@ -1101,7 +1184,10 @@ window.__ModuleLoader__.load({ .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; @@ -1110,7 +1196,7 @@ window.__ModuleLoader__.load({ } .me-model-picker-group { font-size: 11px; - color: #60a5fa; + color: #2563eb; font-weight: 600; padding: 4px 8px; text-transform: uppercase; @@ -1118,10 +1204,14 @@ window.__ModuleLoader__.load({ 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%; @@ -1129,7 +1219,7 @@ window.__ModuleLoader__.load({ 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; @@ -1139,13 +1229,24 @@ window.__ModuleLoader__.load({ 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']")) {