紫色MuMu记事本

全局美化样例

这里提供一个完整的样式风格统一的全局美化模版，可根据上方的教程参考使用。

<!-- mufy 全局美化 聊天背景-->
<style>
    /* 聊天背景 */
    #mufy_background_image{
        background-image: url('https://cdn.mufy.ai/images/8f724d01-8b9f-4c2b-1783-217bb6eadf00/public') !important;
    }
 
    /* 聊天背景遮罩 */
    #mufy_background_overlay{
        background-color: rgba(0, 0, 0, 0) !important;
    }
</style>
 
<!-- mufy 全局美化 顶部栏-->
<style>
    /* 顶部栏背景*/
    #mufy_chat_header {
        background: #7C8AFA;
    }
 
    /* 返回按钮 */
    #mufy_back_button{
        color: #FEC7FE;       
    }
 
    /* 关注按钮 */
    #mufy_header_follow_btn{
        border-radius: 4px;
        background: #6253D5;
        box-shadow: 0 -4px 0 0 #4D42A4 inset;
    }
 
    /* 亮度按钮 */
    #mufy_header_clarity_btn{
        border-radius: 4px;
        background: #3D4293;
        box-shadow: 0 -4px 0 0 #33367C inset;
    }
 
    #mufy_header_clarity_btn svg {
        color: #dda4e0;
    }
 
    /* 消息按钮 */
    #mufy_header_message_btn{
        border-radius: 4px;
        background: #3D4293;
        box-shadow: 0 -4px 0 0 #33367C inset;
    }
 
    #mufy_header_message_btn svg {
        color: #94d1e7;
    }
 
    /* 更多按钮 */
    #mufy_header_more_btn{
        border-radius: 4px;
        background: #3D4293;
        box-shadow: 0 -4px 0 0 #33367C inset;
    }
 
    #mufy_header_more_btn svg {
        color: #c0e49d;
    }
</style>
 
<!-- mufy 全局美化 输入框-->
<style>
    /* 输入框容器 */
    #mufy_chat_input_container{
        width: 100%;
        padding: 12px;
        background: #7C8AFA;
    }
 
    /* 输入框框体 */
    #mufy_chat_input_box{
        border-radius: 16px;
        color: #2e3033;
        background: #6A76DA;
    }
 
    /* 输入框内文字 */
    #mufy_chat_input_box textarea {
        color: #ffffff;
    }
 
    /* 重说按钮 */
      #mufy_chat_input_replay_btn{
        border-radius: 12px;
        background: #FEC7FE;
        color: #895289;
    }
 
    /* 模型按钮 */
        #mufy_chat_input_model_btn{
        background: #323779;
        box-shadow: 0 -4px 0 0 #33367C inset;
    }
</style>
 
<!-- mufy 全局美化 作者的话-->
<style>
    /* 作者的话 */
    #mufy_author_note{
        border-radius: 12px;
        border: 1px solid #B4B8FF;
        background: rgba(255, 245, 235, 0.20);
        box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.20);
        color: #ffffffbe;
    }
 
    /* 字体 */
    #mufy_author_note pre {
        color: #ffffff;
    }
</style>
 
<!-- mufy 全局美化 聊天操作-->
<style>
    /* 按钮 */
    #mufy_message_actions_btn {
        fill: #3D4293;
        filter: drop-shadow(0 4px 0 #33367C);
    }
 
    /* 容器 */
    #mufy_message_actions_box{
        border-radius: 20px;
        background: #7C8AFA;
    }
 
    /* 删除 */
    #mufy_message_actions_delete{
        color: #ffffff
    }
 
    /* 编辑 */
    #mufy_message_actions_edit{
        color: #ffffff
    }
 
    /* 复制 */
    #mufy_message_actions_copy{
        color: #ffffff
    }
</style>
 
<!-- mufy 聊天美化 气泡框-->
<style>
    @import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');
 
    /* AI气泡框 */
    .mufy_ai_message_bubble {
        font-family: 'ZCOOL KuaiLe', cursive;
        font-size: 16px;
        position: relative;
        border-radius: 14px;
        border: 1px solid #5A5FD3;
        background: #7379FA;
        box-shadow: 0 0 10px 0 #6E69FF;
        padding: 10px;
    }
 
    .mufy_ai_message_bubble::before,
    .mufy_ai_message_bubble::after {
        content: "";
        position: absolute;
        background-size: cover;
        background-repeat: no-repeat;
    }
 
    .mufy_ai_message_bubble::before {
        width: 26px;
        height: 26px;
        top: -8px;
        left: -8px;
        background-image: url('https://cdn.mufy.ai/images/af681643-e41c-4a34-2cf5-71d23cb5d100/public');
    }
 
    .mufy_ai_message_bubble::after {
        width: 22px;
        height: 22px;
        bottom: -7px;
        right: -7px;
        background-image: url('https://cdn.mufy.ai/images/3f82e030-7c03-4f0d-222e-9a23fe14ea00/public');
    }
 
    /* 左上角星星展示 */
    img[src='/chat-star.png'] {
        display: none !important;
    }
 
    /* 用户气泡框 */
    .mufy_user_message_bubble{
        font-size: 16px;
        font-family: 'ZCOOL KuaiLe', cursive;
        color: #90578E;
        border-radius: 14px;
        border: 1px solid #C39CC3;
        background: #FFD2FF;
    }
</style>
 
<!-- mufy 聊天美化 系统设定-->
<style>
    .mufy_message_system{
        border-radius: 12px;
        border: 1px solid #B4B8FF;
        background: rgba(255, 245, 235, 0.20);
        box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.20);
        color: #ffffffbe;
    }
</style>
 
<!-- mufy 聊天美化 心理叙述-->
<style>
    .mufy_message_narration{
        font-weight: 600;
        -webkit-text-fill-color: transparent;
        background-image: linear-gradient(90deg, #fff5bf 0%, #b6eaff 100%) !important;
    }
</style>
 
<!-- mufy 聊天美化 代码块-->
<style>
    .mufy_code_block{
        color: rgba(222, 212, 255, 0.7);
        border-radius: 14px;
        border: 1px solid #5F66CB;
        background: #3E4391;
    }
 
    .mufy_code_block::before {
        content: "";
        position: absolute;
        top: -13px;
        left: -12px;
        width: 40px;
        height: 40px;
        background-image: url('https://cdn.mufy.ai/images/908a76a7-bb74-40aa-bf61-bb00dbeb5100/public');
        background-size: cover;
        background-position: center;
    }
 
    /* 右下角的图片 */
    .mufy_code_block::after {
        content: "";
        position: absolute;
        bottom: -10px;
        right: -10px;
        width: 50px;
        height: 30px;
        background-image: url('https://cdn.mufy.ai/images/8c328e56-2e2d-44b2-006b-ce93c7658200/public');
        background-size: cover;
        background-position: center;
    }
 
    .mufy_code_block svg {
        display: none !important;
    }
</style>
 
<!-- mufy 聊天美化 加重句-->
<style>
    .mufy_emphasis_text{
    font-weight: 800; 
    background-image: none !important;
    background-color: #F7B9FD !important; 
}
 
</style>
 
<!-- mufy 聊天美化 状态栏-->
<style>
    details summary {
        padding: 4px 12px;
        width: fit-content;
        border-radius: 14px;
        border: 1px solid rgba(90, 95, 211, 0.10);
        background: rgba(115, 121, 250, 0.30);
        box-shadow: 0 0 10px 0 rgba(110, 105, 255, 0.80);
    }
 
    details li {
        color: #414792;
    }
</style>