优化YouMind字体显示:Gemini排版风格,对 AI回复 和 笔记 可视化优化 (无代码折叠)
// ==UserScript==
// @name YouMind Core Styles
// @namespace http://tampermonkey.net/
// @version 1.2
// @description 优化YouMind字体显示:Gemini排版风格,对 AI回复 和 笔记 可视化优化 (无代码折叠)
// @author YouMind User
// @match https://youmind.com/*
// @match https://*.youmind.com/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
(function () {
'use strict';
const css = `
/* 1. 引入 Inter 和 Roboto 字体 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap');
/* 2. 全局基础设定 (Webkit 字体平滑) */
body, #app, .app-container {
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
color: #1f1f1f;
}
/* ==========================================================================
PART A: 基础设置 (对 AI回复 和 用户提问 都生效)
仅统一字体和字号 (Gemini 风格: 16px)
========================================================================== */
.ym-askai-content, /* AI 回复区域 */
.ym-ask-user-content, /* 用户提问区域 */
.prose, /* 通用文章区域 */
.overview-container /* 概览区域 */
{
font-family: "Google Sans", "Inter", "Roboto", sans-serif;
font-size: 16px !important; /* Gemini 标准字号 */
}
/* ==========================================================================
PART B: 排版与布局优化 (针对 AI 回复区 + 笔记编辑器区)
========================================================================== */
/* 扩展选择器:包含笔记编辑器 (.tiptap, .ProseMirror) */
/* 1. 段落 (p) 优化 */
/* 1. 段落 (p) 优化 */
.ym-askai-content p,
.prose p,
.tiptap p,
.ProseMirror p {
line-height: 1.75 !important;
letter-spacing: 0.01em;
margin-bottom: 1.25em !important;
font-weight: 400;
}
/* 2. 列表 (ul, ol) 优化 */
/* Chat View (AI回复区) - 需要 1.5em 缩进 */
.ym-askai-content ul, .ym-askai-content ol,
.prose ul, .prose ol {
padding-left: 1.5em !important;
margin-bottom: 1.25em !important;
list-style-position: outside;
}
/* Note View (编辑器区) - 编辑器自带 LI 缩进,所以容器不要缩进,否则会双倍缩进 */
.tiptap ul, .tiptap ol,
.ProseMirror ul, .ProseMirror ol {
padding-left: 0 !important; /* Fix: 移除容器缩进,解决笔记视图缩进过大问题 */
margin-bottom: 1.25em !important;
list-style-position: outside;
}
/* 3. 列表项 (li) 优化 - 解决拥挤问题 */
/* === 拆分后:AI 对话区域的列表项 === */
.ym-askai-content li,
.prose li {
line-height: 1.75 !important;
margin-bottom: 0.75em !important;
margin-top: 0.25em !important;
font-weight: 400;
}
/* === 拆分后:笔记视图 (Note View) 的列表项 === */
/* 【调试这里】单独调整笔记里的列表间距 */
.tiptap li,
.ProseMirror li {
line-height: 1.75 !important;
margin-bottom: 0.75em !important; /* 建议:笔记里可能希望紧凑一点,试着改小 */
margin-top: 0.25em !important;
font-weight: 400;
}
/* 4. 加粗 (Bold) 强化 - 解决 YouMind 默认太细的问题 */
.ym-askai-content strong, .ym-askai-content b,
.ym-askai-content h1, .ym-askai-content h2, .ym-askai-content h3, .ym-askai-content h4,
.prose strong, .prose b,
.tiptap strong, .tiptap b,
.ProseMirror strong, .ProseMirror b {
font-weight: 700 !important;
color: #0b0b0b !important;
}
/* C. 标题美化:浅蓝下划线 (修复版 + 间距修复) */
/* 包含笔记区域的 H1-H4 */
.ym-askai-content h1, .ym-askai-content h2, .ym-askai-content h3, .ym-askai-content h4,
.tiptap h1, .tiptap h2, .tiptap h3, .tiptap h4,
.ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4 {
display: block !important;
width: fit-content !important; /* 关键:让盒子宽度等于文字宽度 */
margin-top: 1.5em !important;
margin-bottom: 0.75em !important;
/* 关键修复:统一行高为 1.5,让 Note 视图 (原本很挤)
参考 Chat 视图 (较宽松) 的风格,同时保持下划线位置协调 */
line-height: 1.75 !important;
position: relative;
max-width: 100%;
color: #0b0b0b !important;
font-weight: 700 !important;
}
/* 下划线 */
.ym-askai-content h1::after,
.ym-askai-content h2::after,
.ym-askai-content h3::after,
.ym-askai-content h4::after,
.tiptap h1::after, .tiptap h2::after, .tiptap h3::after, .tiptap h4::after {
content: "";
display: block;
width: 100%; /* 填满 fit-content 后的宽度 */
height: 2.5px;
background-color: #bfdbfe; /* 浅蓝色 */
margin-top: -2px; /* 行高变大后,下划线会自动下移,margin 可以适当减小或归零 */
border-radius: 2px;
}
/* 移除之前的 hack,不再需要了 */
.ym-askai-content h1::before,
.ym-askai-content h2::before,
.ym-askai-content h3::before,
.ym-askai-content h4::before {
content: none;
}
/* 6. 防御性 CSS:防止误伤 Flex 布局列表 */
.ym-askai-content li > div.flex {
margin-bottom: 0;
}
/* 7. 脑图节点微调 (可选) */
.react-flow__node {
font-weight: 500 !important;
}
/* ==========================================================================
PART D: Overview / Mindmap 专属紧凑模式
解决:1. 字体还是小 (强制 Headers 16px)
2. 间距大 (减少 Margin)
3. 移除下划线
4. 第一段文字顶格 (无缩进)
========================================================================== */
/* Headers: 强制 16px 并减少间距 */
.overview-container h1,
.overview-container h2,
.overview-container h3,
.overview-container h4 {
font-size: 16px !important; /* 修复:原为 14px,现强制 16px */
display: block !important;
width: fit-content !important;
margin-top: 0.75em !important; /* 修复:原 1.5em 太大 -> 0.75em */
margin-bottom: 0.5em !important; /* 修复:原 0.75em -> 0.5em */
line-height: 1.5 !important;
position: relative;
color: #0b0b0b !important;
font-weight: 700 !important;
}
/* 专门移除 Overview 中的下划线 */
.overview-container h1::after,
.overview-container h2::after,
.overview-container h3::after,
.overview-container h4::after {
content: none !important;
display: none !important;
}
/* 列表和段落:减少间距 */
.overview-container ul, .overview-container ol, .overview-container p {
margin-bottom: 0.5em !important; /* 修复:原 1.25em -> 0.5em */
padding-left: 1.25em !important;
}
/* 修复第一段文字 (简介) 的缩进问题,使其顶格 */
.overview-container > p:first-of-type,
.overview-container p.text-secondary-fg {
padding-left: 0 !important;
margin-left: 0 !important;
}
.overview-container li {
line-height: 1.6 !important;
margin-bottom: 0.25em !important; /* 修复:原 0.75em -> 0.25em */
margin-top: 0 !important;
font-size: 16px !important; /* 确保列表项也是 16px */
}
.overview-container strong, .overview-container b {
font-weight: 700 !important;
color: #0b0b0b !important;
}
/* ==========================================================================
PART E: 引用 (Blockquote) 样式修复
解决:左侧竖线过长(底部留白过多)的问题
========================================================================== */
/* 通用 Blockquote 样式 */
.ym-askai-content blockquote,
.prose blockquote,
.tiptap blockquote,
.ProseMirror blockquote,
blockquote {
border-left: 4px solid #d1d5db !important; /* 加粗并柔和化边框颜色 (Gray-300) */
padding: 8px 0 8px 16px !important; /* 保持 8px 上下内边距,确保线条两端对齐 */
margin: 1.5em 0 !important;
color: #374151 !important; /* 文字颜色 (Gray-700) */
background-color: transparent !important;
}
/* 核心修复:移除最后一段的 margin-bottom,实现垂直居中对齐 */
.ym-askai-content blockquote p:last-child,
.prose blockquote p:last-child,
.tiptap blockquote p:last-child,
.ProseMirror blockquote p:last-child,
blockquote p:last-child {
margin-bottom: 0 !important;
}
/* ==========================================================================
PART F: 表格 (Table) 样式修复
解决:表格容器自带 margin/padding 导致无法顶格的问题
========================================================================== */
/* ==========================================================================
PART F: 表格 (Table) 样式修复
解决:表格容器自带 margin/padding 导致无法顶格的问题
========================================================================== */
/* 1. 强制重置表格容器的间距,但保留内边距以防文字贴边 */
.ym-askai-content .overflow-x-auto,
.prose .overflow-x-auto,
.tiptap .overflow-x-auto,
.ProseMirror .overflow-x-auto {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 16px !important; /* 恢复 16px 内边距,避免文字贴边 */
padding-right: 16px !important;
}
/* 2. 确保表格本身宽度占满 */
table {
width: 100% !important;
margin: 0 !important;
}
/* 3. (可选) 让第一列内容紧贴左侧并没有视觉违和感,通常卡片内需要 Padding
如果用户觉得"来源"二字还是没有对齐"总结",可能是因为容器的圆角背景
现在恢复了 Padding,文字会缩进 16px,这是符合卡片设计的。
如果用户非要文字顶格,可以把下面这行打开:
*/
/*
th:first-child, td:first-child {
padding-left: 0 !important;
}
*/
`;
// 注入样式
if (typeof GM_addStyle !== 'undefined') {
GM_addStyle(css);
} else {
const style = document.createElement('style');
style.textContent = css;
document.head.appendChild(style);
}
})();