mirror of
https://github.com/Youzini-afk/ST-Bionic-Memory-Ecology.git
synced 2026-05-15 22:30:38 +08:00
fix(ui): theme-aware config inputs and color-scheme for light panels
Made-with: Cursor
This commit is contained in:
25
style.css
25
style.css
@@ -41,6 +41,12 @@
|
||||
transform: translateY(12px) scale(0.98);
|
||||
transition: transform 0.25s ease;
|
||||
resize: both;
|
||||
/* 默认暗色表单范式;亮色主题见 :root[data-bme-color-scheme="light"] */
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root[data-bme-color-scheme="light"] #st-bme-panel {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
#st-bme-panel-overlay.active #st-bme-panel {
|
||||
@@ -1266,8 +1272,9 @@
|
||||
.bme-config-input,
|
||||
.bme-config-textarea {
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-sizing: border-box;
|
||||
background-color: var(--bme-surface-high);
|
||||
border: 1px solid var(--bme-border);
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
color: var(--bme-on-surface);
|
||||
@@ -1276,7 +1283,7 @@
|
||||
transition:
|
||||
border-color 0.15s,
|
||||
box-shadow 0.15s,
|
||||
background 0.15s;
|
||||
background-color 0.15s;
|
||||
}
|
||||
|
||||
.bme-config-input:focus,
|
||||
@@ -1287,8 +1294,10 @@
|
||||
|
||||
.bme-config-input:disabled,
|
||||
.bme-config-textarea:disabled {
|
||||
background: rgba(255, 255, 255, 0.035);
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
background-color: var(--bme-surface-low);
|
||||
color: var(--bme-on-surface-dim);
|
||||
border-color: var(--bme-border);
|
||||
opacity: 0.85;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -1874,7 +1883,7 @@
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bme-border);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
@@ -1893,7 +1902,7 @@
|
||||
}
|
||||
|
||||
.bme-range-input::-webkit-slider-thumb:hover {
|
||||
box-shadow: 0 0 0 4px rgba(233, 69, 96, 0.15);
|
||||
box-shadow: 0 0 0 4px var(--bme-primary-dim);
|
||||
}
|
||||
|
||||
.bme-range-input::-moz-range-thumb {
|
||||
@@ -1907,7 +1916,7 @@
|
||||
|
||||
.bme-range-input::-moz-range-track {
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bme-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
|
||||
@@ -169,6 +169,9 @@ export const THEMES = {
|
||||
},
|
||||
};
|
||||
|
||||
/** 使用亮色 color-scheme 的面板主题(原生 number/select 等控件配色) */
|
||||
export const LIGHT_PANEL_THEMES = new Set(['paperDawn', 'glacierSky']);
|
||||
|
||||
/**
|
||||
* 将主题配色应用为 CSS 变量
|
||||
* @param {string} themeName - crimson | cyan | amber | violet | paperDawn | glacierSky
|
||||
@@ -209,6 +212,10 @@ export function applyTheme(themeName, root = null) {
|
||||
el.style.setProperty(key, value);
|
||||
}
|
||||
el.setAttribute('data-bme-theme', themeName);
|
||||
el.setAttribute(
|
||||
'data-bme-color-scheme',
|
||||
LIGHT_PANEL_THEMES.has(themeName) ? 'light' : 'dark',
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user