Re:从零开始的异世界生活

css
/* 
 * =========================================================
 *   Re:Zero - Starting Life in Another World Style
 *   Theme by NPC
 *   Color Palette:
 *   - Light Parchment/Purple: #F5F0FA (背景)
 *   - Royal Purple: #7D47B3 (主色调)
 *   - Deep Magic Purple: #5E3A8C (边框/强调)
 *   - Witch's Shadow: #3C2059 (阴影/深色)
 *   - Dark Text: #2E1844 (文本)
 * =========================================================
 */

/* 
 * ---------------------------------
 *   ★ 模块零：全局字体设定 (已修正)
 * ---------------------------------
 */
/* 为整个魔导书注入圆润、清晰的字体灵魂，摒弃锐利，追求和谐 */
body, button, input, textarea, summary, th, td {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Varela Round', 'Quicksand', sans-serif !important;
}

/* 
 * ---------------------------------
 *   模块一：对话气泡美化 (AI侧)
 * ---------------------------------
 */
/* AI的对话气泡，附加上了爱蜜莉雅阵营的典雅紫色调 */
.group .bg-gray-100\/90 {
    background: #F5F0FA !important; /* 淡雅的徽章紫，如同羊皮纸 */
    border: 2px solid #5E3A8C !important; /* 深邃的魔法边框 */
    border-radius: 12px !important; /* 更圆润柔和的边角 */
    box-shadow: 5px 5px 0px #3C2059 !important; /* 来自魔女教的深色投影 */
    color: #2E1844 !important; /* 深紫色文本，保证可读性 */
    padding: 12px !important;
}


/* 
 * ---------------------------------
 *   模块二：平台按钮美化
 * ---------------------------------
 */
/* "mod、流式、评论、回到底部" 等按钮，注入了王选的决心 */
.flex.items-center.gap-2.pb-2 > button,
.MuiButtonBase-root.MuiButton-root.MuiButton-text {
    background: #7D47B3 !important; /* 鲜明的王室紫 */
    color: #FFFFFF !important; /* 纯白文字，形成对比 */
    border: 2px solid #5E3A8C !important; /* 更深的紫色边框 */
    border-radius: 4px !important;
    box-shadow: 3px 3px 0px #3C2059 !important; /* 深邃的投影 */
    font-weight: bold !important; /* 标题略微加粗 */
    text-transform: none !important;
    transition: all 0.1s ease-in-out !important;
    padding: 6px 16px !important;
    margin: 0 4px !important;
}
/* 按钮悬停效果 - “按下”时，如同发动权能 */
.flex.items-center.gap-2.pb-2 > button:hover,
.MuiButtonBase-root.MuiButton-root.MuiButton-text:hover {
    background: #915AC5 !important; /* 按下时颜色变亮，魔力激活 */
    color: #FFFFFF !important;
    transform: translate(3px, 3px) !important; /* 按钮向右下移动，产生按下的物理感 */
    box-shadow: 0px 0px 0px #3C2059 !important; /* 按下后阴影消失 */
}

/* 
 * ---------------------------------
 *   模块三：多余元素隐藏
 * ---------------------------------
 */
/* 此处的封印保持原样，等待你的指令 */
.MuiButtonBase-root.MuiButton-root.MuiButton-default.css-w13mdt,
.absolute.z-40 .px-4.py-2.hover\:bg-indigo-100:nth-child(5),
.css-nkqe49 {
    /* display: none !important; */
}

/* 
 * ---------------------------------
 *   模块四：输入栏美化
 * ---------------------------------
 */
/* 输入框，你与这个世界沟通的窗口 */
#ai-chat-input {
    background-color: #F5F0FA !important; /* 与对话气泡一致的淡紫色背景 */
    border: 2px solid #5E3A8C !important; /* 坚实的魔法边框 */
    border-radius: 6px !important;
    color: #2E1844 !important; /* 清晰的深色文本 */
    box-shadow: inset 2px 2px 0px rgba(60, 32, 89, 0.2) !important; /* 轻微的内阴影，增加深度感 */
}
/* 输入框容器保持透明，让你专注于言语本身 */
#ai-chat-bottom-input { 
    background: transparent !important; 
    backdrop-filter: none !important; 
}


/* 
 * ---------------------------------
 *   模块五：加载动画替换 (打破循环)
 * ---------------------------------
 */

/* 定义言灵的魔力脉动动画 */
@keyframes breakTheLoopPulse {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-2px); /* 向上轻微浮动 */
        opacity: 1;
    }
}

/* 步骤1: 抹除原有的“停滞刻印”（三个点） */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 步骤2: 调整容器，为新的“言灵”腾出空间 */
.flex.items-center.justify-center.w-6.h-5 {
    width: auto !important; /* 自动宽度以适应文字长度 */
    height: 25px !important; /* 给予足够的垂直空间 */
    position: relative; /* 为伪元素定位 */
}

/* 步骤3: 召唤新的“言灵”并注入魔力脉动 */
.flex.items-center.justify-center.w-6.h-5::after {
    content: "（打破循环吧...）";
    position: absolute;
    color: #7D47B3; /* 与主题一致的王室紫 */
    font-size: 14px;
    font-weight: bold; /* 标题略微加粗 */
    /* 注入动画，使其拥有生命般的搏动 */
    animation: breakTheLoopPulse 2.8s infinite ease-in-out;
}

/* 
 * ---------------------------------
 *   模块六：『福音书』数据美化 (模型/消耗信息)
 * ---------------------------------
 */
/* 容器整体改造：赋予其『福音书』页脚的质感 */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j {
    background-color: rgba(94, 58, 140, 0.08) !important; /* 淡淡的魔法墨水印记 */
    border-left: 3px solid #7D47B3 !important; /* 左侧的王室紫标记线 */
    padding: 4px 8px 4px 12px !important;
    margin-top: 12px !important; /* 与主文本保持合适的距离 */
    border-radius: 0 4px 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap; /* 允许内容换行 */
}

/* 徽记植入：在文字前烙印上龙之国的徽记，象征契约 */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j::before {
    content: '';
    display: inline-block;
    width: 16px; /* 徽记大小 */
    height: 16px;
    margin-right: 10px; /* 与文字的间距 */
    /* 使用Base64嵌入SVG徽记，颜色为王室紫 #7D47B3 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237D47B3'%3E%3Cpath d='M12 2L9.34 7.23l-5.68.82 4.11 4- .97 5.66L12 14.84l5.2 2.73-.97-5.66 4.11-4-5.68-.82L12 2zm0 4.24L13.54 9.5l3.5.5-2.53 2.47.6 3.48L12 14.22l-3.11 1.63.6-3.48L6.96 10l3.5-.5L12 6.24z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
    flex-shrink: 0; /* 防止徽记被压缩 */
}

/* 文本重塑：统一『福音书』的字体风格 */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j p {
    color: #5E3A8C !important; /* 深邃的魔法紫，覆盖原有的橙色 */
    font-size: 12px !important; /* 如同书中小字注解 */
    font-style: italic;
    margin: 2px 8px 2px 0 !important; /* 调整段落间距 */
    padding: 0 !important;
    line-height: 1.2;
}

/* 
 * =========================================================
 *   模块七：『魔导书』折叠栏美化 (已修正)
 * =========================================================
 */
/* 
 * 『魔导书』主体 (details 标签)
 * 这是一切知识的容器，以厚重的质感呈现。
 */
details {
    background: rgba(245, 240, 250, 0.95) !important; /* 羊皮纸质感的半透明背景 */
    border: 2px solid #5E3A8C !important; /* 深邃魔法边框，如同书脊 */
    border-radius: 12px !important; /* 圆润的书角 */
    margin: 1.5em 0 !important;
    box-shadow: 5px 5px 0px #3C2059 !important; /* 魔女的影子，赋予其存在感 */
    transition: all 0.3s ease-in-out;
}

/* 
 * 『启示之印』 (summary 标签)
 * 这是书的封面，点击以揭示其中的秘密。
 */
summary {
    font-size: 1.2em !important;
    font-weight: bold !important; /* 标题略微加粗 */
    color: #2E1844 !important; /* 深紫色标题，庄重而清晰 */
    padding: 0.8em 1.2em !important;
    cursor: pointer;
    list-style: none; /* 移除默认的三角符号 */
    position: relative;
    background-color: rgba(125, 71, 179, 0.1) !important;
    border-radius: 10px 10px 0 0; /* 仅顶部圆角，如同书的封面 */
    outline: none !important; /* 移除点击时的轮廓线 */
}
/* 当魔导书被打开时，封面的样式变化 */
details[open] > summary {
    border-bottom: 2px dashed #7D47B3; /* 打开后，出现一条魔法虚线作为分割 */
}

/* 
 * 『开闭符文』(summary 的伪元素)
 * 一个动态的符文，指示着魔导书的开闭状态。
 */
summary::before {
    content: '▶';
    color: #7D47B3;
    position: absolute;
    left: 0.8em;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
}
details[open] > summary::before {
    transform: translateY(-50%) rotate(90deg); /* 打开时，符文旋转90度 */
}
/* 调整符文与文字的间距 */
summary {
    padding-left: 2.2em !important;
}


/* 
 * 『书中识』(details 内部的所有内容)
 * 内部的文字，纯粹、清晰，没有任何光效干扰。
 */
details > *:not(summary) {
    padding: 0 1.5em 1.5em 1.5em;
    color: #2E1844 !important; /* 深紫色文本，清晰易读 */
    text-shadow: none !important; /* 确保无任何发光效果 */
}

/* 
 * 『理之表』 (Markdown 表格特别美化)
 * 对表格进行重塑，使其在任何设备上都能优雅地展示情报。
 */
details table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 1em !important;
    /* 核心：赋予表格自适应能力，在手机端可横向滚动 */
    display: block;
    overflow-x: auto;
    /* 为滚动条也赋予一些魔法感 */
    scrollbar-width: thin;
    scrollbar-color: #7D47B3 #5E3A8C;
}

/* 表格头部，如同卷首的标题 (文本颜色同步修正) */
details th {
    background-color: rgba(94, 58, 140, 0.4) !important;
    font-weight: bold !important; /* 标题略微加粗 */
    padding: 0.8em !important;
    text-align: center !important;
    border-bottom: 2px solid #7D47B3 !important;
    color: #F5F0FA !important; /* 头部使用浅色文字以与深背景形成对比 */
}

/* 表格单元格，记录着世界的法则 (文本颜色同步修正) */
details td {
    padding: 0.8em !important;
    border-bottom: 1px solid rgba(125, 71, 179, 0.3) !important;
    text-align: center;
    color: #2E1844 !important; /* 单元格内容使用深紫色文本 */
}

/* 偶数行，施加淡淡的底色，如同交替的咒文 */
details tr:nth-of-type(even) {
    background-color: rgba(94, 58, 140, 0.15) !important;
}

/* ★ 修正：已移除所有不必要的悬停高亮效果，确保阅读的连贯性 */
details tr:hover {
    background-color: transparent !important; /* 将悬停背景设为透明，移除高亮 */
}

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。