fix(ui): refine sidebar and personal space styling
This commit is contained in:
parent
611fcdd6d3
commit
0b6b39f262
@ -105,7 +105,7 @@ function confirmSelection() {
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-radius: 18px;
|
||||
padding: 24px 28px;
|
||||
box-shadow: 0 20px 50px rgba(33, 24, 14, 0.25);
|
||||
box-shadow: none;
|
||||
border: 1px solid rgba(118, 103, 84, 0.25);
|
||||
}
|
||||
.exp-header {
|
||||
@ -144,16 +144,16 @@ function confirmSelection() {
|
||||
padding: 16px 14px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s ease;
|
||||
box-shadow: 0 8px 18px rgba(61, 57, 41, 0.06);
|
||||
box-shadow: none;
|
||||
background: #fff;
|
||||
}
|
||||
.mode-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 16px 30px rgba(61, 57, 41, 0.12);
|
||||
box-shadow: none;
|
||||
}
|
||||
.mode-card.active {
|
||||
border-color: #da7756;
|
||||
box-shadow: 0 18px 36px rgba(218, 119, 86, 0.25);
|
||||
box-shadow: none;
|
||||
}
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
|
||||
@ -343,6 +343,7 @@
|
||||
</button>
|
||||
<div
|
||||
:class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
|
||||
:style="activeDropdown ? floatingMenuStyle : undefined"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
@ -395,6 +396,7 @@
|
||||
</button>
|
||||
<div
|
||||
:class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
|
||||
:style="activeDropdown ? floatingMenuStyle : undefined"
|
||||
>
|
||||
<button
|
||||
v-for="option in filteredModelOptions"
|
||||
@ -437,6 +439,7 @@
|
||||
</button>
|
||||
<div
|
||||
:class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
|
||||
:style="activeDropdown ? floatingMenuStyle : undefined"
|
||||
>
|
||||
<button
|
||||
v-for="option in runModeOptions"
|
||||
@ -514,6 +517,7 @@
|
||||
</button>
|
||||
<div
|
||||
:class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
|
||||
:style="activeDropdown ? floatingMenuStyle : undefined"
|
||||
>
|
||||
<button
|
||||
v-for="option in themeOptions"
|
||||
@ -594,13 +598,14 @@
|
||||
</button>
|
||||
<div
|
||||
:class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
|
||||
:style="activeDropdown ? floatingMenuStyle : undefined"
|
||||
>
|
||||
<button
|
||||
v-for="option in blockDisplayOptions"
|
||||
:key="option.id"
|
||||
type="button"
|
||||
class="settings-menu-option"
|
||||
:class="{ selected: form.block_display_mode === option.value }"
|
||||
:class="{ selected: currentBlockDisplayMode === option.value }"
|
||||
@click="selectBlockDisplayMode(option.value)"
|
||||
>
|
||||
<strong>{{ option.label }}</strong
|
||||
@ -638,6 +643,7 @@
|
||||
</button>
|
||||
<div
|
||||
:class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
|
||||
:style="activeDropdown ? floatingMenuStyle : undefined"
|
||||
>
|
||||
<button
|
||||
v-for="option in permissionModeOptions"
|
||||
@ -1106,6 +1112,7 @@
|
||||
</button>
|
||||
<div
|
||||
:class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
|
||||
:style="activeDropdown ? floatingMenuStyle : undefined"
|
||||
>
|
||||
<button
|
||||
v-for="option in imageCompressionOptions"
|
||||
@ -1276,7 +1283,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue';
|
||||
import { ref, computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { usePersonalizationStore } from '@/stores/personalization';
|
||||
import { useResourceStore } from '@/stores/resource';
|
||||
@ -1310,7 +1317,8 @@ const {
|
||||
skillsCatalog,
|
||||
thinkingIntervalDefault,
|
||||
thinkingIntervalRange,
|
||||
recentConversationsPromptLimitRange
|
||||
recentConversationsPromptLimitRange,
|
||||
experiments
|
||||
} = storeToRefs(personalization);
|
||||
|
||||
type IconKey = keyof typeof ICONS;
|
||||
@ -1372,23 +1380,62 @@ const personalTabs = computed(() => {
|
||||
|
||||
const activeTab = ref<PersonalTab>('general');
|
||||
const activeDropdown = ref<string | null>(null);
|
||||
const floatingMenuStyle = ref<Record<string, string>>({});
|
||||
|
||||
const activeTabLabel = computed(() => {
|
||||
return personalTabs.value.find((tab) => tab.id === activeTab.value)?.label || '常规';
|
||||
});
|
||||
|
||||
const toggleDropdown = (key: string) => {
|
||||
const updateFloatingMenuPosition = async () => {
|
||||
if (!activeDropdown.value || typeof window === 'undefined') {
|
||||
floatingMenuStyle.value = {};
|
||||
return;
|
||||
}
|
||||
await nextTick();
|
||||
const button = document.querySelector<HTMLElement>(
|
||||
'.settings-select-wrap.open .settings-select-button'
|
||||
);
|
||||
if (!button) {
|
||||
return;
|
||||
}
|
||||
const rect = button.getBoundingClientRect();
|
||||
const menuWidth = Math.min(300, Math.max(240, window.innerWidth - 32));
|
||||
const left = Math.max(16, Math.min(rect.right - menuWidth, window.innerWidth - menuWidth - 16));
|
||||
const top = Math.max(16, Math.min(rect.bottom + 10, window.innerHeight - 80));
|
||||
floatingMenuStyle.value = {
|
||||
position: 'fixed',
|
||||
top: `${Math.round(top)}px`,
|
||||
left: `${Math.round(left)}px`,
|
||||
right: 'auto',
|
||||
width: `${Math.round(menuWidth)}px`,
|
||||
zIndex: '2147483647'
|
||||
};
|
||||
};
|
||||
|
||||
const toggleDropdown = async (key: string) => {
|
||||
activeDropdown.value = activeDropdown.value === key ? null : key;
|
||||
await updateFloatingMenuPosition();
|
||||
};
|
||||
|
||||
const closeDropdown = () => {
|
||||
activeDropdown.value = null;
|
||||
floatingMenuStyle.value = {};
|
||||
};
|
||||
|
||||
const settingsTabIconStyle = (icon: IconKey) => ({
|
||||
'--icon-src': `url(${ICONS[icon]})`
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', updateFloatingMenuPosition);
|
||||
window.addEventListener('scroll', updateFloatingMenuPosition, true);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', updateFloatingMenuPosition);
|
||||
window.removeEventListener('scroll', updateFloatingMenuPosition, true);
|
||||
});
|
||||
|
||||
type RunModeValue = 'fast' | 'thinking' | 'deep' | null;
|
||||
type PermissionModeValue = 'readonly' | 'approval' | 'auto_approval' | 'unrestricted';
|
||||
type CompressionField =
|
||||
@ -1487,9 +1534,11 @@ const communicationStyleLabel = computed(() => {
|
||||
return form.value.communication_style === 'human_like' ? '拟人' : '默认';
|
||||
});
|
||||
|
||||
const currentBlockDisplayMode = computed(() => experiments.value.blockDisplayMode);
|
||||
|
||||
const blockDisplayLabel = computed(() => {
|
||||
return (
|
||||
blockDisplayOptions.find((option) => option.value === form.value.block_display_mode)?.label ||
|
||||
blockDisplayOptions.find((option) => option.value === currentBlockDisplayMode.value)?.label ||
|
||||
'堆叠动画'
|
||||
);
|
||||
});
|
||||
@ -2176,14 +2225,12 @@ const applyThemeOption = async (theme: ThemeKey) => {
|
||||
overflow-y: auto;
|
||||
overflow-x: visible;
|
||||
padding-right: 18px;
|
||||
padding-bottom: 28px;
|
||||
padding-bottom: 86px;
|
||||
scroll-padding-bottom: 86px;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.settings-redesign-scroll:has(.settings-select-wrap.open) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.settings-redesign-tabs::-webkit-scrollbar,
|
||||
.settings-redesign-scroll::-webkit-scrollbar,
|
||||
@ -2300,9 +2347,9 @@ const applyThemeOption = async (theme: ThemeKey) => {
|
||||
}
|
||||
|
||||
.settings-floating-menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 10px);
|
||||
position: fixed;
|
||||
right: auto;
|
||||
top: auto;
|
||||
width: 300px;
|
||||
max-height: min(420px, 60vh);
|
||||
overflow: auto;
|
||||
@ -2313,7 +2360,7 @@ const applyThemeOption = async (theme: ThemeKey) => {
|
||||
box-shadow: var(--settings-floating-menu-shadow);
|
||||
opacity: 1;
|
||||
backdrop-filter: none;
|
||||
z-index: 10000;
|
||||
z-index: 2147483647;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -2435,7 +2482,7 @@ const applyThemeOption = async (theme: ThemeKey) => {
|
||||
.settings-number-row input:focus,
|
||||
.settings-compression-grid input:focus {
|
||||
border-color: var(--claude-text-secondary);
|
||||
box-shadow: 0 0 0 4px rgba(128, 128, 128, 0.11);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.settings-input-stack {
|
||||
@ -2608,7 +2655,7 @@ const applyThemeOption = async (theme: ThemeKey) => {
|
||||
}
|
||||
|
||||
.settings-toggle-row input:checked + .fancy-check .fancy-path {
|
||||
stroke: var(--claude-accent);
|
||||
stroke: var(--claude-text-secondary);
|
||||
stroke-dasharray: 70.5096664428711 9999999;
|
||||
stroke-dashoffset: -262.2723388671875;
|
||||
}
|
||||
|
||||
@ -269,7 +269,7 @@
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
|
||||
box-shadow: none;
|
||||
backdrop-filter: blur(8px);
|
||||
pointer-events: auto;
|
||||
min-width: 480px;
|
||||
@ -398,17 +398,17 @@
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 6px 16px rgba(61, 57, 41, 0.08);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.scroll-lock-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 9px 20px rgba(61, 57, 41, 0.12);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.scroll-lock-toggle.locked .scroll-lock-btn {
|
||||
border-color: var(--claude-accent);
|
||||
box-shadow: 0 0 10px var(--claude-highlight);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.scroll-lock-btn svg {
|
||||
@ -477,7 +477,7 @@
|
||||
border-radius: 18px;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
box-shadow: 0 12px 28px rgba(61, 57, 41, 0.08);
|
||||
box-shadow: none;
|
||||
color: var(--claude-text);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
@ -485,7 +485,7 @@
|
||||
}
|
||||
|
||||
.user-message .message-text {
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
background: #f5f5f5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
@ -588,7 +588,7 @@
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--claude-border);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 12px 28px rgba(61, 57, 41, 0.08);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.collapsible-header {
|
||||
@ -711,7 +711,7 @@
|
||||
border: 1px solid var(--claude-border);
|
||||
border-radius: 16px;
|
||||
background: var(--claude-card);
|
||||
box-shadow: var(--claude-shadow);
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
@ -927,7 +927,7 @@ body[data-theme='dark'] .more-icon {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
box-shadow: var(--claude-shadow);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.chat-inline-card__body {
|
||||
@ -982,7 +982,7 @@ body[data-theme='dark'] .more-icon {
|
||||
object-fit: contain;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--claude-border);
|
||||
box-shadow: var(--claude-shadow);
|
||||
box-shadow: none;
|
||||
background: var(--claude-card);
|
||||
}
|
||||
|
||||
@ -1090,7 +1090,7 @@ show-html:not([data-rendered='1']) {
|
||||
border: 1px solid var(--claude-border);
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
box-shadow: var(--claude-shadow);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
show_html:not([data-rendered='1'])[ratio='1:1'],
|
||||
@ -1169,7 +1169,7 @@ show-html:not([data-rendered='1'])[ratio='3:4'] {
|
||||
border: 1px solid var(--claude-border);
|
||||
border-radius: 12px;
|
||||
background: var(--theme-surface-soft);
|
||||
box-shadow: var(--theme-shadow-soft);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.text-output .text-content .md-table-scroll > table,
|
||||
@ -1258,7 +1258,7 @@ show-html:not([data-rendered='1'])[ratio='3:4'] {
|
||||
border-radius: 10px;
|
||||
background: var(--theme-surface-soft);
|
||||
border-left: 4px solid var(--claude-accent);
|
||||
box-shadow: inset 0 0 0 1px var(--claude-border);
|
||||
box-shadow: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
@ -214,7 +214,7 @@ body[data-theme='dark'] {
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--theme-control-border);
|
||||
background: var(--theme-surface-soft);
|
||||
box-shadow: var(--theme-shadow-mid);
|
||||
box-shadow: none;
|
||||
color: var(--claude-text);
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
@ -269,7 +269,7 @@ body[data-theme='dark'] {
|
||||
border: 1px solid var(--theme-control-border);
|
||||
border-radius: 14px;
|
||||
background: var(--theme-surface-soft);
|
||||
box-shadow: var(--theme-shadow-mid);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.permission-switcher__menu--split {
|
||||
@ -375,7 +375,7 @@ body[data-theme='dark'] {
|
||||
border-radius: var(--stadium-radius);
|
||||
border: 1px solid rgba(15, 23, 42, 0.12);
|
||||
background: #ffffff;
|
||||
box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
|
||||
box-shadow: none;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
transition:
|
||||
@ -388,24 +388,19 @@ body[data-theme='dark'] {
|
||||
padding-bottom: 16px;
|
||||
min-height: calc(var(--stadium-radius) * 2.7);
|
||||
border-color: rgba(15, 23, 42, 0.2);
|
||||
box-shadow: 0 26px 70px rgba(15, 23, 42, 0.22);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.stadium-shell.is-focused,
|
||||
.stadium-shell.has-text {
|
||||
border-color: var(--claude-accent);
|
||||
box-shadow:
|
||||
0 2px 22px var(--claude-highlight),
|
||||
0 0 30px var(--claude-highlight),
|
||||
0 22px 60px rgba(15, 23, 42, 0.22);
|
||||
border-color: rgba(15, 23, 42, 0.12);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.stadium-shell.is-multiline.is-focused,
|
||||
.stadium-shell.is-multiline.has-text {
|
||||
box-shadow:
|
||||
0 2px 28px var(--claude-highlight),
|
||||
0 0 36px var(--claude-highlight),
|
||||
0 32px 86px rgba(15, 23, 42, 0.28);
|
||||
border-color: rgba(15, 23, 42, 0.2);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.input-stack {
|
||||
@ -581,7 +576,7 @@ body[data-theme='dark'] {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid var(--claude-border);
|
||||
border-radius: 18px;
|
||||
box-shadow: var(--claude-shadow);
|
||||
box-shadow: none;
|
||||
z-index: 30;
|
||||
pointer-events: auto;
|
||||
}
|
||||
@ -640,7 +635,7 @@ body[data-theme='dark'] {
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--claude-border);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: var(--claude-shadow);
|
||||
box-shadow: none;
|
||||
z-index: 31;
|
||||
}
|
||||
|
||||
@ -799,7 +794,7 @@ body[data-theme='dark'] {
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border: 1px solid var(--claude-border);
|
||||
border-radius: 12px;
|
||||
box-shadow: var(--claude-shadow);
|
||||
box-shadow: none;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -2847,14 +2847,14 @@ body[data-theme='light'] {
|
||||
|
||||
.experiment-visual {
|
||||
background: var(--theme-surface-card);
|
||||
box-shadow: var(--theme-shadow-soft);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.stadium-shell.is-focused,
|
||||
.stadium-shell.has-text,
|
||||
.stadium-shell.is-multiline.is-focused,
|
||||
.stadium-shell.is-multiline.has-text {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 按钮背景色 - 使用浅灰色 */
|
||||
@ -3004,14 +3004,14 @@ body[data-theme='dark'] {
|
||||
|
||||
.experiment-visual {
|
||||
background: var(--theme-surface-card);
|
||||
box-shadow: var(--theme-shadow-soft);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.stadium-shell.is-focused,
|
||||
.stadium-shell.has-text,
|
||||
.stadium-shell.is-multiline.is-focused,
|
||||
.stadium-shell.is-multiline.has-text {
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* 输入栏 - 改为灰黑色 */
|
||||
@ -3023,7 +3023,7 @@ body[data-theme='dark'] {
|
||||
.stadium-shell.is-focused,
|
||||
.stadium-shell.has-text {
|
||||
background: #2a2a2a;
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* 输入框文字颜色 */
|
||||
@ -3377,7 +3377,7 @@ body[data-theme='dark'] {
|
||||
/* 用户消息块 - 使用浅灰色 */
|
||||
.user-message .message-text {
|
||||
background: #2a2a2a;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* AI 消息块 - 使用浅灰色 */
|
||||
@ -3421,17 +3421,17 @@ body[data-theme='dark'] {
|
||||
.scroll-lock-btn {
|
||||
background: #2a2a2a;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.scroll-lock-btn:hover {
|
||||
background: #353535;
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.scroll-lock-toggle.locked .scroll-lock-btn {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.scroll-lock-toggle.locked .scroll-lock-btn img {
|
||||
@ -3444,7 +3444,7 @@ body[data-theme='dark'] {
|
||||
|
||||
/* 左侧面板头部（文件/待办事项/子智能体标签栏） */
|
||||
.sidebar-header {
|
||||
background: #1a1a1a;
|
||||
background: var(--claude-left-rail);
|
||||
}
|
||||
|
||||
/* 移动端审批面板 - 移除所有背景让内容顶头 */
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
align-items: stretch;
|
||||
flex-shrink: 0;
|
||||
margin-left: 52px;
|
||||
background: var(--claude-left-rail);
|
||||
}
|
||||
|
||||
/* 侧边栏 */
|
||||
@ -67,11 +68,11 @@
|
||||
}
|
||||
|
||||
.compact-status-card {
|
||||
background: var(--claude-panel);
|
||||
background: var(--claude-left-rail);
|
||||
border: 1px solid var(--claude-border);
|
||||
border-radius: 18px;
|
||||
padding: 14px 16px;
|
||||
box-shadow: 0 12px 30px rgba(61, 57, 41, 0.12);
|
||||
box-shadow: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -249,9 +250,9 @@
|
||||
border-bottom: 1px solid var(--claude-border);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
background: var(--claude-left-rail);
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(16px);
|
||||
backdrop-filter: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
@ -309,10 +310,10 @@
|
||||
}
|
||||
|
||||
.sidebar-panel-card {
|
||||
background: var(--claude-panel);
|
||||
background: var(--claude-left-rail);
|
||||
border: 1px solid var(--claude-border);
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 12px 30px rgba(61, 57, 41, 0.12);
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -330,7 +331,7 @@
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
background: var(--claude-sidebar);
|
||||
background: var(--claude-left-rail);
|
||||
padding: 6px 12px 24px;
|
||||
border-radius: 0 0 18px 18px;
|
||||
border-top: 1px solid rgba(118, 103, 84, 0.12);
|
||||
@ -352,7 +353,7 @@
|
||||
border: 1px solid rgba(118, 103, 84, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 6px 8px;
|
||||
box-shadow: 0 6px 18px rgba(61, 57, 41, 0.12);
|
||||
box-shadow: none;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
@ -457,7 +458,7 @@
|
||||
border: 1px solid rgba(118, 103, 84, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
@ -471,11 +472,11 @@
|
||||
|
||||
.sub-agent-card:hover {
|
||||
border-color: #6c5ce7;
|
||||
box-shadow: 0 6px 16px rgba(108, 92, 231, 0.15);
|
||||
box-shadow: none;
|
||||
|
||||
[data-theme='dark'] & {
|
||||
border-color: #8b7ce7;
|
||||
box-shadow: 0 6px 16px rgba(139, 124, 231, 0.25);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -531,7 +532,7 @@
|
||||
color: var(--claude-text-secondary);
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
|
||||
border: 1px dashed var(--claude-border);
|
||||
text-align: center;
|
||||
|
||||
@ -562,7 +563,7 @@
|
||||
margin: 0 auto;
|
||||
border-radius: 12px;
|
||||
border: 1px dashed var(--claude-border-strong);
|
||||
background: var(--theme-surface-muted);
|
||||
background: color-mix(in srgb, var(--claude-left-rail) 90%, var(--theme-surface-strong) 10%);
|
||||
padding: 10px 12px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -616,7 +617,7 @@
|
||||
.host-workspace-card {
|
||||
width: 100%;
|
||||
border: 1px solid var(--theme-control-border);
|
||||
background: var(--theme-surface-soft);
|
||||
background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
@ -685,12 +686,12 @@
|
||||
}
|
||||
|
||||
[data-theme='dark'] .host-workspace-header-box {
|
||||
background: rgba(30, 30, 30, 0.78);
|
||||
background: var(--claude-left-rail);
|
||||
border-color: rgba(160, 160, 160, 0.45);
|
||||
}
|
||||
|
||||
[data-theme='dark'] .host-workspace-card {
|
||||
background: #1f1f1f;
|
||||
background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #222222;
|
||||
@ -735,7 +736,7 @@
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
color: var(--claude-text);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
|
||||
}
|
||||
|
||||
.todo-task.done {
|
||||
@ -843,7 +844,7 @@
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(15, 23, 42, 0.08);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
|
||||
box-shadow: none;
|
||||
z-index: 3000;
|
||||
min-width: 180px;
|
||||
padding: 6px 0;
|
||||
@ -917,11 +918,11 @@
|
||||
top: 0;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
background: var(--theme-surface-strong, #ffffff);
|
||||
background: var(--claude-left-rail);
|
||||
border: 1px solid var(--claude-border);
|
||||
border-radius: 14px;
|
||||
padding: 6px;
|
||||
box-shadow: var(--theme-shadow-soft);
|
||||
box-shadow: none;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
|
||||
@ -150,6 +150,10 @@
|
||||
height: 29px;
|
||||
}
|
||||
|
||||
.conversation-menu-btn .chat-icon svg {
|
||||
transform: translateY(3px);
|
||||
}
|
||||
|
||||
.pencil-icon svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@ -420,7 +424,7 @@ body[data-theme='dark'] .conversation-sidebar .conversation-item.active:focus-wi
|
||||
border: 1px solid var(--claude-border);
|
||||
border-radius: 14px;
|
||||
background: var(--theme-surface-strong, #fff);
|
||||
box-shadow: var(--theme-shadow-soft);
|
||||
box-shadow: none;
|
||||
opacity: 0;
|
||||
transform: translateY(-4px) scale(0.98);
|
||||
pointer-events: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user