Memory-Bridge/style.css at main · TheIanLi/Memory-Bridge · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
/* ===== Shell：隐藏 Streamlit 默认控件 ===== */
[data-testid="stAppDeployButton"],
.stAppDeployButton,
#MainMenu,
footer,
[data-testid="stFooter"] {
    display: none !important;
    visibility: hidden !important;
}


/* ===== 全局背景与字体 ===== */
[data-testid="stAppViewContainer"],
[data-testid="stApp"],
.stApp {
    background-color: #212121 !important;
}

section.main > div.block-container {
    padding-top: 0.15rem;
    max-width: 720px;
}


/* ===== 侧边栏 ===== */
[data-testid="stSidebar"] {
    background-color: #1A1A1A !important;
}


/* ===== 顶部标题栏 ===== */
[data-testid="stHeader"] {
    background-color: rgba(33, 33, 33, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid #2C2C2E !important;
    z-index: 999999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: 50px !important;
}

/* 汉堡菜单按钮：始终可见 */
[data-testid="collapsedControl"],
[data-testid="stSidebarCollapsedControl"] {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    z-index: 9999999 !important;
}
[data-testid="collapsedControl"] svg {
    display: none !important;
}
[data-testid="collapsedControl"]::before {
    content: "\2630" !important;
    font-size: 20px;
    color: #a8a8a8;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-testid="collapsedControl"]:hover::after {
    content: "收起/展开菜单";
    position: absolute;
    left: 40px;
    background: #242424;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
}


/* ===== 聊天气泡 ===== */
.mb-bubble {
    display: inline-block !important;
    max-width: 75% !important;
    padding: 10px 14px !important;
    word-wrap: break-word !important;
    line-height: 1.6 !important;
    font-size: 15px !important;
}

/* 用户气泡：Telegram 深蓝，右下小圆角 */
.mb-bubble.mb-user {
    background-color: #2B5278 !important;
    color: #FFFFFF !important;
    border-radius: 16px 16px 4px 16px !important;
}

/* AI 气泡：深色底，左下小圆角 */
.mb-bubble.mb-ai {
    background-color: #182533 !important;
    color: #F0F0F0 !important;
    border-radius: 16px 16px 16px 4px !important;
}

/* 用户消息容器：右对齐 */
[data-testid="stChatMessage"]:has(.mb-user) [data-testid="stMarkdownContainer"] {
    text-align: right !important;
}

/* AI 消息容器：左对齐 */
[data-testid="stChatMessage"]:has(.mb-ai) [data-testid="stMarkdownContainer"] {
    text-align: left !important;
}

/* 用户消息行：头像移到右边（反转 flex 方向） */
[data-testid="stChatMessage"]:has(.mb-user) {
    flex-direction: row-reverse !important;
    background-color: transparent !important;
}

/* AI 消息行：头像保持左边 */
[data-testid="stChatMessage"]:has(.mb-ai) {
    flex-direction: row !important;
    background-color: transparent !important;
}

/* 清除所有聊天消息行的背景色（包括内层容器） */
[data-testid="stChatMessage"],
[data-testid="stChatMessage"] > div {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* ===== 输入框 ===== */
/* 底部容器背景融入页面 */
[data-testid="stBottom"] > div {
    background: #212121 !important;
    border-top: none !important;
}

[data-testid="stChatInput"] {
    background-color: #2B2B2B !important;
    border: none !important;
    border-radius: 24px !important;
}

[data-testid="stChatInput"]:focus-within {
    border: none !important;
    box-shadow: none !important;
}

[data-testid="stChatInput"] textarea {
    color: #E0E0E0 !important;
}

[data-testid="stChatInput"] textarea::placeholder {
    color: #777777 !important;
}

/* 发送按钮 */
[data-testid="stChatInput"] button {
    color: #888888 !important;
    background: transparent !important;
}
[data-testid="stChatInput"] button:hover {
    color: #CCCCCC !important;
}


/* ===== 空状态引导页 ===== */
/* 样式在 app.py 中通过内联 HTML 处理 */


/* ===== 对话框/弹窗 ===== */
/* Streamlit 原生 st.dialog 组件，暂无需覆盖 */