YouMind Core Styles

优化YouMind字体显示:Gemini排版风格,对 AI回复 和 笔记 可视化优化 (无代码折叠)

スクリプトをインストールするには、Tampermonkey, GreasemonkeyViolentmonkey のような拡張機能のインストールが必要です。

You will need to install an extension such as Tampermonkey to install this script.

スクリプトをインストールするには、TampermonkeyViolentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、TampermonkeyUserscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください
// ==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);
    }

})();