白应蝶
只要疯狂长出血肉，爱不爱，在不在意，我说了算<style>
/* 1. 字体引入与全局文本样式 */
@import url('https://static.zeoseven.com/zsft/256/main/result.css');
@import url("https://fontsapi-storage.zeoseven.com/111/main/result.css");
/* 全局字体统一 */
body, input, textarea, select, button, .mes_text, .mes_block, pre, h1, h2, h3, h4, h5, h6, .title_restorable {
font-family: "Huiwen-Mincho";
font-weight: normal;
color: rgba(220, 220, 210, 1); /* 主文本色 */
}
/* 代码块字体 */
code {
font-family: "点点像素体-圆形";
font-weight: normal;
color: #d1b3c4;
}
/* 特殊文本样式 */
/* 斜体文本 */
i, em, .italics {
color: rgba(140, 140, 140, 1);
font-style: italic;
}
/* 下划线文本 */
u, .underline {
color: rgba(188, 231, 207, 1);
text-decoration: none;
position: relative;
}
u::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 4px;
background: #BCE7CF;
opacity: 0.8;
clip-path: polygon(0 50%, 10% 80%, 20% 30%, 30% 70%, 40% 40%, 50% 60%, 60% 30%, 70% 80%, 80% 40%, 90% 70%, 100% 50%);
}
/* 引用文本 */
q, blockquote {
color: rgba(126, 117, 126, 1);
text-shadow: 0 0 7px #c89bb0, 0 0 10px #9b7c90;
padding: 0 8px;
}
/* 删除线文本 */
del {
text-decoration: none;
position: relative;
padding: 2px 5px;
}
del::before, del::after {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background: #966188;
opacity: 0.9;
}
del::before { transform: translateY(-2px) rotate(3deg); }
del::after { transform: translateY(2px) rotate(-3deg); height: 3px; }
/* 加粗文本 */
strong, b {
font-weight: 700;
color: #b69bad;
text-shadow: 3px 1px 5px rgba(41, 25, 37, 0.45);
}
/* 2. 全局布局与容器样式 */
/* Flex/Grid 间距统一 */
*[style*="display: flex"],
*[style*="display: grid"],
.flex-container,
[class*="flex"] {
gap: 8px;
box-sizing: border-box;
}
/* 页面背景基础 */
body {
background: transparent;
min-height: 100vh;
padding: 0;
margin: 0;
}
/* 顶部工具栏 */
#top-bar {
height: var(--topBarBlockSize);
width: 100%;
border-radius: 0;
box-shadow: 0 2px 15px 0 rgba(156, 156, 156, 0.3); /* 阴影色 */
backdrop-filter: none;
background: rgba(80, 71, 80, 0.1); /* 模糊色调基础 */
position: relative;
z-index: 3005;
}
/* 顶部设置容器 */
#top-settings-holder {
display: flex;
height: 100%;
justify-content: center;
margin: 0;
width: auto;
}
/* 功能菜单抽屉 */
.drawer {
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 0.8%;
}
.drawer-icon {
font-size: 1.2em;
transform: translateY(2.5px);
cursor: pointer;
}
.drawer-icon:active::before {
animation: shake 0.3s ease-in-out;
}
@keyframes shake {
0% { transform: translateY(2px) rotate(0deg); }
25% { transform: translateY(2px) rotate(-5deg); }
50% { transform: translateY(2px) rotate(5deg); }
75% { transform: translateY(2px) rotate(-5deg); }
100% { transform: translateY(2px) rotate(0deg); }
}
.drawer-content {
position: absolute;
top: var(--topBarBlockSize);
width: auto;
max-width: 300px;
height: calc(100dvh - var(--bottomInputAreaHeight));
padding: 1.2%;
overflow-y: scroll;
box-shadow: 0 2px 15px 0 rgba(156, 156, 156, 0.3);
background: rgba(80, 71, 80, 0.2);
border-top: 2px solid #9b7c90;
}
/* 3. 聊天核心区域样式 */
/* 聊天容器基础 */
#sheld {
padding: 0 10px;
box-sizing: border-box;
}
#chat {
max-height: calc(100dvh - var(--topBarBlockSize) - 20px);
overflow-y: scroll;
margin: 0 6px;
padding-right: 5px;
background: none;
/* 上下渐变遮罩 */
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50px, black calc(100% - 30px), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, black 30px, black calc(100% - 20px), transparent 100%);
}
/* 消息整体容器 */
.mes {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
border: none;
background: transparent;
margin: 8px 0;
}
/* 头像容器（居中） */
.mesAvatarWrapper {
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
height: 120px;
min-height: 120px;
padding: 20px 0;
position: relative;
}
.mesAvatarWrapper .avatar {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #9b7c90;
margin: 0;
z-index: 1;
}
/* 消息ID/计时器/令牌计数 */
.mesIDDisplay, .mes_timer, .tokenCounterDisplay {
display: contents;
color: #FFFFFF;
text-align: center;
min-height: 20px;
}
.mesAvatarWrapper .mesIDDisplay > *,
.mesAvatarWrapper .mes_timer > *,
.mesAvatarWrapper .tokenCounterDisplay > * {
display: inline-block;
margin-right: 10px;
}
/* 消息名称栏 */
#chat .ch_name {
font-size: 20px;
padding: calc(var(--mainFontSize) * 0.3) 0;
width: calc(98% - 20px);
max-width: calc(98% - 20px);
text-align: center;
position: relative;
margin-bottom: 8px;
}
#chat .ch_name::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(to right, rgba(160, 160, 160, 0.2), rgba(236, 193, 221, 0.6), rgba(160, 160, 160, 0.2));
}
/* 消息气泡（用户/机器人区分） */
/* 用户消息 */
.mes[is_user='true'] .mesAvatarWrapper {
background-color: #5e5f5f;
border-radius: 10px 10px 0 0;
width: 100%;
}
.mes[is_user='true'] .mes_block {
width: 100%;
background: linear-gradient(to bottom, #5e5f5f, #7b5c70) !important;
border: none;
border-radius: 0 0 10px 10px;
padding: calc(var(--mainFontSize) * 0.5);
margin: 0;
}
/* 机器人消息 */
.mes:not([is_user='true']) .mesAvatarWrapper {
background-color: #2A2A2A;
border-radius: 10px 10px 0 0;
width: 100%;
}
.mes:not([is_user='true']) .mes_block {
width: 100%;
background: linear-gradient(to bottom, #2A2A2A, #676767) !important;
border: none;
border-radius: 0 0 10px 10px;
padding: calc(var(--mainFontSize) * 0.5);
margin: 0;
}
/* 消息文本容器 */
.mes_text {
margin: 10px 10px 30px;
display: block;
text-align: justify;
line-height: 1.6;
user-select: text;
z-index: 9999;
}
/* 4. 输入框区域样式 */
/* 输入框变量定义 */
:root {
--form-border-radius: 12px;
--form-border-color: rgb(160, 141, 147);
--form-background: linear-gradient(to bottom, #232323, #705667);
--form-opacity: 0.65;
--form-text-color: #E0E0E0;
}
/* 输入框容器 */
#form_sheld {
margin: 0;
padding: 0 6px 5px;
}
#send_form {
border: 2px solid var(--form-border-color);
border-radius: var(--form-border-radius);
background: var(--form-background);
backdrop-filter: blur(5px);
opacity: var(--form-opacity);
transition: all 0.6s ease;
margin-bottom: 5px;
}
#send_form:hover {
opacity: 0.85;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}
#send_form:focus-within {
opacity: 1;
}
/* 文本输入框 */
#send_textarea {
border: 0 !important;
background: transparent;
color: var(--form-text-color);
font-size: calc(var(--mainFontSize) * 0.9);
padding: 8px 12px;
min-height: 50px;
max-height: 100px;
width: 100%;
box-sizing: border-box;
}
#send_textarea::placeholder {
color: var(--form-text-color);
opacity: 0.7;
font-size: 14px;
}
/* 功能按钮区（左侧） */
#leftSendForm {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 5px;
opacity: var(--form-opacity);
transition: opacity 0.3s ease;
}
#leftSendForm:hover {
opacity: 0.85;
}
#leftSendForm > * {
color: var(--form-text-color);
cursor: pointer;
}
/* 额外功能区（非快捷回复） */
#nonQRFormItems {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
padding: 5px 10px;
opacity: var(--form-opacity);
border: none;
backdrop-filter: blur(5px);
}
#nonQRFormItems:hover {
opacity: 0.85;
}
/* 发送按钮（图标替换） */
#send_but {
width: 22px !important;
height: 22px !important;
background: none !important;
background-image: url('https://files.catbox.moe/h6bdea.png') !important;
background-size: contain !important;
background-position: center !important;
background-repeat: no-repeat !important;
border: none;
cursor: pointer;
}
#send_but::before, #send_but > * {
opacity: 0 !important;
display: none !important;
}
/* 菜单/拓展按钮（图标替换） */
#options_button {
width: 22px !important;
height: 22px !important;
background-image: url('https://files.catbox.moe/6wg795.png') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
}
#extensionsMenuButton {
width: 22px !important;
height: 22px !important;
background-image: url('https://files.catbox.moe/jelfmp.png') !important;
background-size: contain !important;
background-repeat: no-repeat !important;
}
#options_button::before, #extensionsMenuButton::before,
#options_button > *, #extensionsMenuButton > * {
opacity: 0 !important;
display: none !important;
}
/* 5. 组件细节样式 */
/* 滚动条美化 */
::-webkit-scrollbar {
width: 5px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(200, 200, 200, 0.5);
border-radius: 3px;
opacity: 0.5;
transition: all 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(200, 200, 200, 0.8);
opacity: 1;
}
/* 滑杆样式 */
input[type="range"], .neo-range-slider {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: linear-gradient(to right, #7e7f7f, #9b7c90);
border-radius: 3px;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
input[type="range"]:hover, .neo-range-slider:hover {
filter: brightness(1.2);
}
/* 滑杆滑块 */
input[type="range"]::-webkit-slider-thumb,
.neo-range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
background: rgba(200, 200, 200, 0.8);
border-radius: 50%;
border: 1px solid rgba(200, 200, 200, 0.8);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
margin-top: -5px;
transition: transform 0.3s ease;
}
input[type="range"]::-webkit-slider-thumb:hover,
.neo-range-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
}
/* 按钮基础样式 */
.menu_button {
background-color: rgb(79 61 73);
border: 1px solid rgba(212, 212, 212, 0.3);
border-radius: 6px;
color: #ffffffc3;
padding: 6px 12px;
cursor: pointer;
transition: background 0.3s ease, filter 0.3s ease;
}
.menu_button:hover {
filter: brightness(1.2);
background-color: rgb(79 61 73);
}
/* 确认按钮 */
.menu_button.popup-button-ok, #dialogue_popup_ok {
background-color: rgb(79 61 73) !important;
border: 1px solid rgba(212, 212, 212, 0.3) !important;
color: #ffffffc3 !important;
font-weight: bold;
}
/* 单选/多选框 */
input[type="radio"] {
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
input[type="radio"]:checked {
background-color: rgba(255, 255, 255, 0.4);
}
input[type="radio"]:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
}
input[type="checkbox"] {
appearance: none;
width: 16px;
height: 16px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
input[type="checkbox"]:checked {
background-color: rgba(255, 255, 255, 0.4);
}
/* 代码块样式 */
code.hljs {
display: block;
background: linear-gradient(to bottom, #826778, #5b4652);
border: 2px solid rgba(60, 41, 56, 0.5);
border-radius: 10px;
padding: 15px;
box-shadow: inset 0 0 5px rgba(91, 70, 82, 0.5);
filter: sepia(0.2) contrast(1.2);
}
/* 6. 响应式适配（小屏幕） */
@media screen and (max-width: 1000px) {
/* 顶部抽屉 */
.drawer {
padding: 0 5px !important;
}
.drawer-icon {
font-size: calc(var(--mainFontSize) * 1.5);
}
.drawer-content {
min-width: 100% !important;
padding: 15px !important;
height: calc(100dvh - var(--topBarBlockSize) + 5px) !important;
}
/* 聊天区域 */
#sheld {
padding: 0;
}
#chat {
margin: 0;
padding-right: 0;
}
/* 输入框区域 */
#send_form {
border: 0 !important;
border-top: 1.25px solid rgba(160, 141, 147, 0.5) !important;
border-radius: 10px 10px 0 0;
margin-bottom: 0 !important;
}
#nonQRFormItems {
display: grid !important;
grid-template-columns: 1fr 1fr;
grid-template-areas: "textarea textarea" "left right";
gap: 0;
padding: 0;
}
#send_textarea {
grid-area: textarea;
height: 50px;
min-height: 50px;
max-height: 100px;
margin-bottom: 0 !important;
}
#leftSendForm {
grid-area: left;
justify-content: left !important;
gap: 15px !important;
margin-bottom: 5px !important;
}
#rightSendForm {
grid-area: right;
justify-content: right !important;
gap: 15px !important;
margin-bottom: 5px !important;
}
/* 隐藏滚动条 */
* {
scrollbar-width: none;
-ms-overflow-style: none;
}
*::-webkit-scrollbar {
display: none;
}
}
</style>
