├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ ├── config.yml │ └── feature_request.yml ├── instructions │ └── main.instructions.md └── workflows │ └── ci.yml ├── .gitignore ├── LICENSE ├── README.md ├── docs ├── README_en.md ├── TODO.md ├── demo.md └── onelight.md ├── onelight-dark.css ├── onelight.css └── onelight ├── fonts ├── CascadiaCode.woff2 └── MiaoZi-GuoZhiTi.woff2 ├── img ├── bg.gif ├── bg2.gif ├── bg3.gif ├── bg4.gif └── bg5.gif └── style ├── blockquote.css ├── code.css ├── editor.css ├── font.css ├── list.css ├── table.css └── title ├── title-colorful-dark.css ├── title-colorful.css └── title.css /.github/ISSUE_TEMPLATE/bug_report.yml: -------------------------------------------------------------------------------- 1 | name: Bug 报告 2 | description: 报告主题中的错误或显示问题 3 | labels: 4 | - bug 5 | body: 6 | - type: input 7 | id: theme_version 8 | attributes: 9 | label: 主题版本 10 | description: 请输入你正在使用的主题版本号（如 v1.2.3） 11 | placeholder: v1.2.3 12 | validations: 13 | required: true 14 | - type: input 15 | id: typora_version 16 | attributes: 17 | label: Typora 编辑器版本 18 | description: 请输入你正在使用的 Typora 版本号（如 1.8.7） 19 | placeholder: 1.8.7 20 | validations: 21 | required: false 22 | - type: dropdown 23 | id: platform 24 | attributes: 25 | label: 你的平台 26 | description: 请选择你遇到问题的平台 27 | options: 28 | - Windows 29 | - macOS 30 | - Linux 31 | - 其他 32 | validations: 33 | required: false 34 | - type: textarea 35 | id: description 36 | attributes: 37 | label: 错误描述 38 | description: 请详细描述你遇到的错误或显示问题。 39 | placeholder: 例如：xxx 功能无法正常显示，字体显示异常等，最好附加截图 40 | validations: 41 | required: true 42 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: 讨论区 4 | url: https://github.com/caolib/typora-onelight-theme/discussions 5 | about: 一般问题讨论、使用交流等 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.yml: -------------------------------------------------------------------------------- 1 | name: 功能建议 2 | description: 提出新功能或改进建议 3 | labels: 4 | - enhancement 5 | body: 6 | - type: textarea 7 | id: summary 8 | attributes: 9 | label: 功能概述 10 | description: 请简要说明你希望增加或改进的功能 11 | placeholder: 例如：希望添加新的代码块样式，改进表格显示效果等 12 | validations: 13 | required: true 14 | -------------------------------------------------------------------------------- /.github/instructions/main.instructions.md: -------------------------------------------------------------------------------- 1 | --- 2 | applyTo: '**/*.css' 3 | --- 4 | - 这是一个typora主题项目,项目地址为 https://github.com/caolib/typora-onelight-theme 5 | - onelight.css 是主题的主样式文件,其中导入了其他样式文件,onelight-dark.css 是暗黑主题的样式文件 6 | - onelight.user.css 是用户自定义样式文件,优先级更高,可以添加用户自定义设置 7 | - onelight文件夹下包含了主题的样式、图片和字体等资源 8 | - title是标题样式的相关定义 9 | - code是代码块样式的相关定义 10 | - blockquote是引用块样式的相关定义 11 | - table是表格样式的相关定义 12 | - list是列表样式的相关定义 13 | - editor是编辑器样式的相关定义 14 | - 尽量不要使用!important -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | on: 3 | push: 4 | tags: 5 | - "*" # 监听所有标签的推送 6 | workflow_dispatch: # 允许手动触发 7 | jobs: 8 | release: 9 | runs-on: ubuntu-latest 10 | 11 | steps: 12 | - name: Checkout repository 13 | uses: actions/checkout@v3 14 | with: 15 | fetch-depth: 0 # 获取所有历史记录，以便比较标签 16 | 17 | - name: 获取当前的标签名 18 | id: get_tag_name 19 | run: | 20 | TAG_NAME=${GITHUB_REF##*/} # 获取标签名，去掉 refs/tags/ 21 | echo "TAG_NAME=${TAG_NAME}" >> $GITHUB_ENV # 将标签名存储在环境变量中 22 | 23 | - name: 获取提交信息 24 | id: get_commits 25 | run: | 26 | # 获取上一个标签 27 | PREVIOUS_TAG=$(git describe --tags --abbrev=0 HEAD^ 2>/dev/null || echo "") 28 | CURRENT_TAG=${GITHUB_REF##*/} # GITHUB_REF is refs/tags/ 29 | 30 | # 计算提交数量 31 | if [ -z "$PREVIOUS_TAG" ]; then 32 | echo "No previous tag found. Counting all commits up to ${CURRENT_TAG}." 33 | COMMIT_COUNT=$(git rev-list --count HEAD) 34 | else 35 | echo "Counting commits between ${PREVIOUS_TAG} and ${CURRENT_TAG}." 36 | # Use rev-list --count for direct counting 37 | COMMIT_COUNT=$(git rev-list --count ${PREVIOUS_TAG}..HEAD) 38 | fi 39 | echo "COMMIT_COUNT=${COMMIT_COUNT}" >> $GITHUB_ENV 40 | echo "Calculated commit count: ${COMMIT_COUNT}" 41 | 42 | # 获取提交列表 (用于发布说明) 43 | if [ -z "$PREVIOUS_TAG" ]; then 44 | # 如果没有上一个标签，获取所有提交 45 | ALL_COMMITS=$(git log --pretty=format:"%s|%h" --reverse HEAD) 46 | else 47 | # 获取从上一个标签到现在的所有提交 48 | ALL_COMMITS=$(git log ${PREVIOUS_TAG}..HEAD --pretty=format:"%s|%h" --reverse) 49 | fi 50 | 51 | # 过滤掉包含"Merge branch"、"docs:"和"README"的提交消息 52 | FILTERED_COMMITS=$(echo "$ALL_COMMITS" | grep -v -E "Merge branch|docs:|README") 53 | 54 | # 创建一个关联数组来存储每个提交消息的最新提交哈希 55 | declare -A commit_hashes 56 | 57 | # 遍历所有提交，为每个提交消息保存最新的哈希值 58 | while IFS="|" read -r message hash; do 59 | commit_hashes["$message"]="$hash" 60 | done <<< "$FILTERED_COMMITS" 61 | 62 | # 创建一个有序数组以保持提交的原始顺序 63 | declare -a ordered_messages=() 64 | declare -A seen_messages=() 65 | 66 | # 再次遍历所有提交，但只保留每个消息的第一个实例（保持顺序） 67 | while IFS="|" read -r message hash; do 68 | if [[ -z "${seen_messages[$message]}" ]]; then 69 | ordered_messages+=("$message") 70 | seen_messages["$message"]=1 71 | fi 72 | done <<< "$FILTERED_COMMITS" 73 | 74 | # 构建最终的提交列表，使用最新的哈希值 75 | FINAL_COMMITS="" 76 | for message in "${ordered_messages[@]}"; do 77 | hash="${commit_hashes[$message]}" 78 | FINAL_COMMITS+="- [${hash:0:7}] ${message}"$'\n' 79 | done 80 | 81 | # 直接保存提交信息到文件，保持每行一个提交 82 | echo "$FINAL_COMMITS" > release_notes.txt 83 | 84 | # 添加标题 85 | echo "### Commits" > complete_notes.txt 86 | echo "" >> complete_notes.txt 87 | cat release_notes.txt >> complete_notes.txt 88 | echo "" >> complete_notes.txt 89 | echo "[Full Changelog](https://github.com/caolib/typora-onelight-theme/commits/${{ github.ref }})" >> complete_notes.txt 90 | 91 | # 将提交信息保存到环境变量，用于后续步骤 92 | # 使用EOF方式确保多行文本正确保存 93 | echo "RELEASE_NOTES<> $GITHUB_ENV 94 | cat complete_notes.txt >> $GITHUB_ENV 95 | echo "EOF" >> $GITHUB_ENV 96 | 97 | - name: 打包文件 98 | run: | 99 | echo ${{ env.TAG_NAME }} 100 | zip -r onelight-${{ env.TAG_NAME }}.zip ./onelight.css ./onelight-dark.css ./onelight 101 | 102 | - name: 创建发布 103 | id: release 104 | uses: actions/create-release@v1 105 | with: 106 | tag_name: ${{ github.ref }} 107 | release_name: Release ${{ github.ref }} 108 | body: ${{ env.RELEASE_NOTES }} 109 | prerelease: false 110 | env: 111 | GITHUB_TOKEN: ${{ secrets.PAT_TOKEN }} 112 | 113 | - name: 上传发布文件 114 | uses: actions/upload-release-asset@v1 115 | with: 116 | upload_url: ${{ steps.release.outputs.upload_url }} 117 | asset_path: onelight-${{ env.TAG_NAME }}.zip 118 | asset_name: onelight-${{ env.TAG_NAME }}.zip 119 | asset_content_type: application/zip 120 | env: 121 | GITHUB_TOKEN: ${{ secrets.PAT_TOKEN }} 122 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.github/ 3 | !.github/** 4 | 5 | !onelight.css 6 | !onelight-dark.css 7 | !/onelight/ 8 | !/onelight/** 9 | !/docs/** 10 | !/docs/ 11 | !LICENSE 12 | !README.md 13 | !.gitignore 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 2 | Version 2, December 2004 3 | 4 | Copyright (C) 2004 Sam Hocevar 5 | 6 | Everyone is permitted to copy and distribute verbatim or modified 7 | copies of this license document, and changing it is allowed as long 8 | as the name is changed. 9 | 10 | DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 11 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 12 | 13 | 0. You just DO WHAT THE FUCK YOU WANT TO. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

OneLight Theme For Typora

2 | 3 |

4 | 简体中文 5 | | 6 | English 7 |

8 |

9 | Downloads 10 | Release 11 | License 12 | Stars 13 | Issues 14 | Last Commit 15 | 16 | ci 17 |

18 | 19 | ## 1.概览 20 | 21 | > [!tip] 22 | > **这里有两篇文章使用OneLight主题，可点击查看主题详细效果展示** 23 | > 24 | > 1. **[OneLight](https://bin-sites.pages.dev/onelight)**、**[OneLight-Dark](https://bin-sites.pages.dev/onelight/dark)** 25 | > 2. **[计算机网络](https://bin-sites.pages.dev/net)** 26 | 27 | --- 28 | 29 | ![image-20250531153638583](https://s2.loli.net/2025/05/31/Bzxh8GMVeXnYHPb.png) 30 | 31 | ![image-20250531153718830](https://s2.loli.net/2025/05/31/lN4ZW7GFVAKdw3u.png) 32 | 33 | ![image-20250511190116728](https://s2.loli.net/2025/05/11/dDVoupIWsH9aQxq.png) 34 | 35 | ![image-20250511184920000](https://s2.loli.net/2025/05/11/c51PL9yEfrkOCeF.png) 36 | 37 | ![image-20250511200329113](https://s2.loli.net/2025/05/11/mUofcTY1qNb5OX9.png) 38 | 39 | ![image-20250511185936255](https://s2.loli.net/2025/05/11/ULwkB9dnPiTEpaM.png) 40 | 41 |
展开查看更多截图 42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | 50 | 51 | --- 52 | 53 | ## 2.如何使用 54 | 55 | 下面两种办法视自己方便程度选一种即可 56 | 57 | ### 2.1 下载文件 58 | 59 | > 1. 下载[主题文件压缩包](https://github.com/caolib/typora-onelight-theme/releases) 60 | > 2. 在typora中选择 文件 → 偏好设置 → 外观 → 打开主题文件夹 61 | > 3. 将下载的压缩包解压，将**css文件**和**文件夹**粘贴到typora的主题文件夹themes中 62 | > 4. 重启Typora然后在菜单栏切换主题，大功告成 63 | > 64 | > 这种方法的优点是下载的文件更少，只含有主题必须的文件，缺点是比较麻烦，如果后续想要更新需要重新下载进行替换 65 | 66 | ### 2.2 克隆 67 | 68 | > [!caution] 69 | > 70 | > 1. 同上找到typora的主题文件夹themes，在这个文件夹下打开一个终端 71 | > 72 | > 2. **为了避免克隆到其他分支的无关文件，请一定要使用下面这条命令克隆！！否则你要下载很长时间**（项目fork自官方仓库，提交历史包含了gh-pages分支的记录） 73 | > 74 | > ```shell 75 | > git clone --single-branch https://github.com/caolib/typora-onelight-theme.git 76 | > ``` 77 | > 78 | > 这种方法的优点是比较方便，后续更新只需要`git pull`命令即可获取最新的提交，缺点是clone会将整个项目的文件下载下来，包括一些不必要的md文件等 79 | 80 | --- 81 | 82 | ## 3.关于自定义 83 | 84 | ### 3.1 文件夹结构 85 | 86 | ``` 87 | 📂 themes # Typora 主题根目录 88 | ├── 📂 onelight # OneLight 主题资源目录 89 | │ ├── 📂 fonts # 字体资源目录 90 | │ │ ├── CascadiaCode.woff2 91 | │ │ └── MiaoZi-GuoZhiTi.woff2 92 | │ ├── 📂 img # 图片资源目录 93 | │ │ ├── bg.gif 94 | │ │ ├── bg2.gif 95 | │ │ ├── bg3.gif 96 | │ │ ├── bg4.gif 97 | │ │ └── bg5.gif 98 | │ └── 📂 style # 样式文件目录 99 | │ ├── blockquote.css # 引用块样式定义 100 | │ ├── code.css # 代码块样式定义 101 | │ ├── editor.css # 编辑器样式定义 102 | │ ├── font.css # 字体样式定义 103 | │ ├── list.css # 列表样式定义 104 | │ ├── table.css # 表格样式定义 105 | │ └── 📂 title # 标题样式目录 106 | │ ├── title-colorful.css # 彩色标题样式 107 | │ └── title.css # 默认标题样式 108 | ├── onelight-dark.css # OneLight 暗色主题样式文件 109 | ├── onelight.css # OneLight 主题的主样式文件 110 | └── onelight.user.css # 用户自定义样式文件（仓库中没有，有需可以自己创建，优先级高） 111 | ``` 112 | 113 | ### 3.2 自定义配置 114 | 115 | 如果你想添加一些自己的样式，不建议你直接修改`onelight.css`文件。 116 | 117 | 你可以在`onelight.css`同级目录下新建一个`onelight.user.css`文件，将你的样式放在这个文件，它有更高的优先级，而且你后续要更新只需要更新`onelight.css`，不会覆盖你的样式 118 | 119 | ⚠️暗色主题添加`onelight-dark.user.css`文件 120 | 121 | 如果`onelight.user.css`无效，你可能要添加`!important`提高优先级 122 | 123 | ### 3.2 风格选择 124 | 125 | #### 3.2.1 标题 126 | 127 | ##### 默认风格 128 | 129 | 见第一张截图中的各级标题 130 | 131 | ##### 多彩风格 132 | 133 | ###### 浅色主题 134 | 135 | 如果你想使用多彩风格，你需要在`onelight.user.css`文件**顶部**添加，注意是顶部！ 136 | 137 | ```css 138 | @import './onelight/style/title/title-colorful.css'; 139 | ``` 140 | 141 | ![image-20250531154421564](https://s2.loli.net/2025/05/31/f7IV4CkcFxYP5ur.png) 142 | 143 | ###### 深色主题 144 | 145 | 深色主题请在统计目录创建`onelight-dark.user.css`文件，然后加入下面代码 146 | 147 | ```css 148 | @import './onelight/style/title/title-colorful.css'; 149 | @import './onelight/style/title/title-colorful-dark.css' 150 | ``` 151 | 152 | ## 4.关于字体 153 | 154 | 在`onelight.css`文件设置了默认字体（搜索root），可以自行修改，如果需要导入字体文件，可在`font.css`中配置 155 | ![](https://s2.loli.net/2025/05/31/xO8RQSmHkWTuhXz.png) 156 | 157 | --- 158 | 159 | ## 4.背景图片 160 | 161 | > [!important] 162 | > 163 | > 背景图片在`onelight/img`文件夹下，文件夹下有几张准备好的图片，你也可以添加自己的图片（最好使用透明背景的图片），然后在`editor.css`文件中搜索 `bg.gif`找到下面代码替换图片名 164 | > 165 | > ```css 166 | > content { 167 | > background-color: transparent; 168 | > background-image: url('../img/bg.gif'); 169 | > background-position: 100% 100%; 170 | > background-repeat: no-repeat; 171 | > background-size: 100px auto; 172 | > transition: background-image .5s ease-in-out, background-size .5s ease-in-out 173 | > } 174 | > 175 | > ``` 176 | > 177 | > 178 | 179 | --- 180 | 181 | ## 5.其他 182 | 183 | 喜欢⭐ 如果喜欢主题的话，请给一个star吧，感谢🙏！ 184 | 185 | ✅ 一体化模式下主题效果更佳✨ 186 | 187 | ❓ 有问题可以在 [Issues](https://github.com/caolib/typora-onelight-theme/issues) 提问，欢迎各种意见 188 | 189 | 📄 [docs](https://github.com/caolib/typora-onelight-theme/tree/onelight/docs)文件夹中有示例文章的markdown文件📄 190 | 191 | 🖼️ [img](https://github.com/caolib/typora-onelight-theme/tree/onelight/onelight/img)文件夹中有主题的背景图片，如果不需要可以直接删除 192 | 193 | 194 | 195 | -------------------------------------------------------------------------------- /docs/README_en.md: -------------------------------------------------------------------------------- 1 |

OneLight Theme For Typora

2 | 3 |

4 | 简体中文 5 | | 6 | English 7 |

8 |

9 | Downloads 10 | Release 11 | License 12 | Stars 13 | Issues 14 | Last Commit 15 | 16 | ci 17 |

18 | 19 | 20 | ## 1. Overview 21 | 22 | 23 | > [!tip] 24 | > **Here are two articles using the OneLight theme, click to see detailed theme effect demonstrations** 25 | > 26 | > 1. **[OneLight](https://bin-sites.pages.dev/onelight)**、**[OneLight-Dark](https://bin-sites.pages.dev/onelight/dark)** 27 | > 2. **[Computer Networks](https://bin-sites.pages.dev/net)** 28 | 29 | --- 30 | 31 | ![image-20250531153638583](https://s2.loli.net/2025/05/31/Bzxh8GMVeXnYHPb.png) 32 | 33 | ![image-20250531153718830](https://s2.loli.net/2025/05/31/lN4ZW7GFVAKdw3u.png) 34 | 35 | ![image-20250511190116728](https://s2.loli.net/2025/05/11/dDVoupIWsH9aQxq.png) 36 | 37 | ![image-20250511184920000](https://s2.loli.net/2025/05/11/c51PL9yEfrkOCeF.png) 38 | 39 | ![image-20250511200329113](https://s2.loli.net/2025/05/11/mUofcTY1qNb5OX9.png) 40 | 41 | ![image-20250511185936255](https://s2.loli.net/2025/05/11/ULwkB9dnPiTEpaM.png) 42 | 43 |
Expand to see more screenshots 44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | 52 | --- 53 | 54 | ## 2. How to Use 55 | 56 | ### 2.1 Download Files 57 | 58 | > 1. Download the [theme file package](https://github.com/caolib/typora-onelight-theme/releases) 59 | > 2. In Typora, select File → Preferences → Appearance → Open Theme Folder 60 | > 3. Extract the downloaded package, paste the **CSS files** and **folders** into Typora's theme folder (themes) 61 | > 4. Restart Typora and switch the theme in the menu bar, and you're done 62 | > 63 | > The advantage of this method is that you download fewer files, containing only the necessary theme files. The disadvantage is that it's more complicated, and if you want to update later, you'll need to download and replace the files again. 64 | 65 | ### 2.2 Clone 66 | 67 | > [!caution] 68 | > 69 | > 1. Find Typora's theme folder (themes) as mentioned above, and open a terminal in this folder 70 | > 71 | > 2. **To avoid cloning irrelevant files from other branches, please make sure to use the command below!! Otherwise, you'll have to download for a long time** (The project is forked from the official repository, and the commit history includes records from the gh-pages branch) 72 | > 73 | > ```shell 74 | > git clone --single-branch https://github.com/caolib/typora-onelight-theme.git 75 | > ``` 76 | > 77 | > The advantage of this method is that it's more convenient. For future updates, you only need to use the `git pull` command to get the latest commits. The disadvantage is that cloning will download all the project files, including some unnecessary md files, etc. 78 | 79 | --- 80 | 81 | ## 3. About Customization 82 | 83 | ### 3.1 Folder Structure 84 | 85 | ``` 86 | 📂 themes # Typora theme root directory 87 | ├── 📂 onelight # OneLight theme resource directory 88 | │ ├── 📂 fonts # Font resource directory 89 | │ │ ├── CascadiaCode.woff2 90 | │ │ └── MiaoZi-GuoZhiTi.woff2 91 | │ ├── 📂 img # Image resource directory 92 | │ │ ├── bg.gif 93 | │ │ ├── bg2.gif 94 | │ │ ├── bg3.gif 95 | │ │ ├── bg4.gif 96 | │ │ └── bg5.gif 97 | │ └── 📂 style # Style file directory 98 | │ ├── blockquote.css # Blockquote style definition 99 | │ ├── code.css # Code block style definition 100 | │ ├── editor.css # Editor style definition 101 | │ ├── font.css # Font style definition 102 | │ ├── list.css # List style definition 103 | │ ├── table.css # Table style definition 104 | │ └── 📂 title # Title style directory 105 | │ ├── title-colorful.css # Colorful title style 106 | │ └── title.css # Default title style 107 | ├── onelight-dark.css # OneLight dark theme style file 108 | ├── onelight.css # OneLight theme main style file 109 | └── onelight.user.css # User custom style file (not in repository, create as needed, higher priority) 110 | ``` 111 | 112 | ### 3.2 Custom Configuration 113 | 114 | If you want to add your own styles, it's not recommended to modify the `onelight.css` file directly. 115 | 116 | You can create a new `onelight.user.css` file in the same directory as `onelight.css`, and put your styles in this file. It has higher priority, and when you update later, you only need to update `onelight.css` without overriding your styles. 117 | 118 | ⚠️Add `onelight-dark.user.css` file for dark theme. 119 | 120 | If `onelight.user.css` doesn't work, you may need to add `!important` to increase priority. 121 | 122 | ### 3.3 Style Options 123 | 124 | #### 3.3.1 Headings 125 | 126 | ##### Default Style 127 | 128 | See the headings in the first screenshot 129 | 130 | ##### Colorful Style 131 | 132 | If you want to use the colorful style, you need to add the following at the **top** of the `onelight.user.css` file. Note that it must be at the top! 133 | 134 | ```css 135 | @import './onelight/style/title/title-colorful.css'; 136 | ``` 137 | 138 | ![image-20250531154421564](https://s2.loli.net/2025/05/31/f7IV4CkcFxYP5ur.png) 139 | 140 | ## 4. About Fonts 141 | 142 | Default fonts are set in the `onelight.css` file (search for root), which you can modify as needed. If you need to import font files, you can configure them in the `font.css` file. 143 | ![](https://s2.loli.net/2025/05/31/xO8RQSmHkWTuhXz.png) 144 | 145 | --- 146 | 147 | ## 5. Background Image 148 | 149 | > [!important] 150 | > 151 | > Background images are in the `onelight/img` folder. There are several prepared images in the folder, and you can also add your own images (preferably with transparent backgrounds). Then search for `bg.gif` in the `editor.css` file to find the code below and replace the image name 152 | > 153 | > ```css 154 | > content { 155 | > background-color: transparent; 156 | > background-image: url('../img/bg.gif'); 157 | > background-position: 100% 100%; 158 | > background-repeat: no-repeat; 159 | > background-size: 100px auto; 160 | > transition: background-image .5s ease-in-out, background-size .5s ease-in-out 161 | > } 162 | > 163 | > ``` 164 | > 165 | > 166 | 167 | --- 168 | 169 | ## 6. Other 170 | 171 | Like⭐ If you like this theme, please give it a star, thank you! 🙏 172 | 173 | ✅ The theme works best in integrated mode ✨ 174 | 175 | ❓ If you have any questions, you can ask in [Issues](https://github.com/caolib/typora-onelight-theme/issues). All kinds of feedback are welcome. 176 | 177 | 📄 The [docs](https://github.com/caolib/typora-onelight-theme/tree/onelight/docs) folder contains markdown files of sample articles 📄 178 | 179 | 🖼️ The [img](https://github.com/caolib/typora-onelight-theme/tree/onelight/onelight/img) folder contains background images for the theme. If you don't need them, you can delete them directly. 180 | 181 | [translated by AI] -------------------------------------------------------------------------------- /docs/TODO.md: -------------------------------------------------------------------------------- 1 | - [x] 背景图片显示 2 | - [x] 部分控件背景透明化 3 | - [x] 更好的背景图片显示 4 | - [x] 重构大部分代码，重新整理样式，将样式归类 5 | - [x] 在设置界面添加背景图片 6 | - [x] 公式块样式 7 | - [x] h标题左下角序号 8 | - [x] 合并两个css文件 9 | - [x] 高亮字体等添加左右间距 10 | - [x] 修正有序列表序号问题 11 | - [x] 修正mermaid代码域透明背景 12 | - [x] 表格样式待优化 13 | - [x] github警告框下引用块颜色保持一致 14 | - [x] 左侧大纲只有二级标题没有一级标题时参考线显示异常 15 | - [x] 暗色主题 16 | - [x] 表格行列调整组件会被代码块遮挡 17 | - [x] 将多个样式分为多个css文件 -------------------------------------------------------------------------------- /docs/demo.md: -------------------------------------------------------------------------------- 1 | # OneLight 2 | 3 | [TOC] 4 | 5 | ## 1 二级标题 6 | 7 | ### 1.1 三级标题 8 | 9 | #### 1.1.1 四级标题 10 | 11 | ##### 1.1.1.1 五级标题 12 | 13 | ###### 1.1.1.1.1 六级标题 14 | 15 | ## 2 引用块 16 | 17 | > 关雎 18 | > 19 | > 诗经·国风·周南〔先秦〕 20 | > 21 | > 关关雎鸠，在河之洲。窈窕淑女，君子好逑。 22 | > 参差荇菜，左右流之。窈窕淑女，寤寐求之。 23 | > 求之不得，寤寐思服。悠哉悠哉，辗转反侧。 24 | > 参差荇菜，左右采之。窈窕淑女，琴瑟友之。 25 | > 参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。 26 | 27 | ## 3 GitHub警告框 28 | 29 | > [!NOTE] 30 | > 31 | > 李白行路难·其一 32 | > 33 | > 李白〔唐代〕 34 | > 35 | > 金樽清酒斗十千，玉盘珍羞直万钱。 36 | > 停杯投箸不能食，拔剑四顾心茫然。 37 | > 欲渡黄河冰塞川，将登太行雪满山。 38 | > 闲来垂钓碧溪上，忽复乘舟梦日边。 39 | > 行路难，行路难，多歧路，今安在？ 40 | > 长风破浪会有时，直挂云帆济沧海。 41 | 42 | > [!TIP] 43 | > 44 | > 杜甫春望 45 | > 46 | > 杜甫〔唐代〕 47 | > 48 | > 国破山河在，城春草木深。 49 | > 感时花溅泪，恨别鸟惊心。 50 | > 烽火连三月，家书抵万金。 51 | > 白头搔更短，浑欲不胜簪。 52 | 53 | > [!IMPORTANT] 54 | > 55 | > 问君能有几多愁？恰似一江春水向东流。——李煜《虞美人·春花秋月何时了》 56 | 57 | > [!WARNING] 58 | > 59 | > 醉后不知天在水，满船清梦压星河。——唐温如《题龙阳县青草湖》 60 | 61 | > [!CAUTION] 62 | > 63 | > 洛阳亲友如相问，一片冰心在玉壶。——王昌龄《芙蓉楼送辛渐》 64 | 65 | ## 4 代码块 66 | 67 | ```javascript 68 | export default defineConfig({ 69 | plugins: [ 70 | vue(), 71 | AutoImport({ 72 | resolvers: [ElementPlusResolver()], 73 | }), 74 | Components({ 75 | resolvers: [ElementPlusResolver()], 76 | }), 77 | ], 78 | resolve: { 79 | alias: { 80 | '@': fileURLToPath(new URL('./src', import.meta.url)) 81 | } 82 | }, 83 | //http proxy 84 | server: { 85 | host: 'localhost', 86 | port: 5173, 87 | proxy: { 88 | '/api': { 89 | target: 'http://localhost:8080', //backend 90 | changeOrigin: true, 91 | rewrite: (path) => path.replace(/^\/api/, '') 92 | } 93 | } 94 | }, 95 | }) 96 | ``` 97 | 98 | ## 5 列表 99 | 100 | > 有、无序列表样式来自[dyzj](https://theme.typora.io/theme/dyzj/)主题，感谢作者muggledy 101 | 102 | 无序列表： 103 | 104 | 105 | - 无 106 | - 无序 107 | - 无序列 108 | - 无序列表 109 | 110 | 有序列表： 111 | 112 | 1. 有 113 | 2. 有序 114 | 3. 有序列 115 | 4. 有序列表 116 | 117 | 任务列表： 118 | 119 | - [x] 已完成任务 120 | - [ ] 未完成任务 121 | 122 | ## 6 文本 123 | 124 | | 效果 | 语法 | 快捷键 | 125 | | --------------------------------- | ----------------------------------- | -------------------------------------------------- | 126 | | ==文本高亮== | `==文本高亮==` | 选中文本后双击=键 | 127 | | **加粗** | `**加粗**` | 选中文本后Ctrl B | 128 | | *斜体* | `*斜体*` | 选中文本后Ctrl I | 129 | | ~~删除线~~ | `~~删除线~~` | 选中文本后按住Shift然后双击~ | 130 | | 下划线 | `下划线` | 选中文本后Ctrl U | 131 | | Ctrl | `Ctrl` | 无 | 132 | | 高亮 | `高亮` | 无 | 133 | 134 | ## 7 表格 135 | 136 | | 时间 | 人数 | 地点 | 137 | | :------------------ | :--: | ---: | 138 | | 2024-12-15 12:34:59 | 123 | 上海 | 139 | | 2024-12-15 12:35:03 | 456 | 北京 | 140 | | 2024-12-15 12:35:07 | 789 | 深圳 | 141 | 142 | ## 8 图片 143 | 144 | 图片默认居中显示，可以设置img标签的algin属性调整为左对齐或者右对齐 145 | 146 | 147 | 148 | ` ` 149 | 150 | 社恐威胁气鼓鼓憋笑 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | ## 9 数学公式 163 | 164 | - 行内公式：这是一个数学公式 $\lim\limits_{x \to \infty} \exp(-x)=0$ 165 | 166 | - 行间公式： 167 | 168 | $$ 169 | E_0 = mc^2 \\ 170 | \quad\text{—— Albert Einstein} 171 | $$ 172 | 173 | ## 10 链接 174 | 175 | 可以直接用尖括号包裹链接``或者使用`[链接名](链接地址)` 176 | 177 | 178 | 179 | [typora-onelight-theme](https://github.com/caolib/typora-onelight-theme) 180 | 181 | ## 11 音频 182 | 183 | 186 | ## 12 mermaid 187 | 188 | ```mermaid 189 | flowchart TD 190 | A[Start] --> B{Is it?} 191 | B -->|Yes| C[OK] 192 | C --> D[Rethink] 193 | D --> B 194 | B ---->|No| E[End] 195 | ``` 196 | 197 | ```mermaid 198 | sequenceDiagram 199 | Alice->>John: Hello John, how are you? 200 | John-->>Alice: Great! 201 | Alice-)John: See you later! 202 | ``` 203 | 204 | ```mermaid 205 | xychart-beta 206 | title "Sales Revenue" 207 | x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] 208 | y-axis "Revenue (in $)" 4000 --> 11000 209 | bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] 210 | line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] 211 | ``` 212 | 213 | ```mermaid 214 | gantt 215 | dateFormat HH:mm 216 | axisFormat %H:%M 217 | Initial milestone : milestone, m1, 17:49, 2m 218 | Task A : 10m 219 | Task B : 5m 220 | Final milestone : milestone, m2, 18:08, 4m 221 | ``` 222 | 223 | -------------------------------------------------------------------------------- /docs/onelight.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: theme 3 | title: OneLight 4 | category: theme 5 | homepage: https://github.com/caolib/typora-onelight-theme 6 | download: https://github.com/caolib/typora-onelight-theme/releases 7 | author: caolib 8 | thumbnail: onelight.png 9 | typora-root-url: ../../ 10 | --- 11 | 12 |

OneLight Theme For Typora

13 | 14 |

15 | 简体中文 16 | | 17 | English 18 |

19 | 20 |

21 | Stars Downloads License Release Last Commit 22 |

23 | 24 | 25 | 26 | ![image-20250511190033183](https://s2.loli.net/2025/05/11/tXwTfmnGl65IdNM.png) 27 | ![image-20250511184053268](https://s2.loli.net/2025/05/11/dw8bS9NGp351n7O.png) 28 | ![image-20250511190116728](https://s2.loli.net/2025/05/11/dDVoupIWsH9aQxq.png) 29 | ![image-20250511184920000](https://s2.loli.net/2025/05/11/c51PL9yEfrkOCeF.png) 30 | ![image-20250511200329113](https://s2.loli.net/2025/05/11/mUofcTY1qNb5OX9.png) 31 | ![image-20250511185936255](https://s2.loli.net/2025/05/11/ULwkB9dnPiTEpaM.png) 32 | ![image-2025051123GUxWvkhDE4doF](https://s2.loli.net/2025/05/11/23GUxWvkhDE4doF.png) 33 | ![image-20250511JUrxQsdYvVg6OZe](https://s2.loli.net/2025/05/11/JUrxQsdYvVg6OZe.png) 34 | ![image-20250511aZsAW1kXDBqM2hV](https://s2.loli.net/2025/05/11/aZsAW1kXDBqM2hV.png) 35 | ![image-20250511x35yzoV2GC4vXIU](https://s2.loli.net/2025/05/11/x35yzoV2GC4vXIU.png) 36 | ![image-20250511PrlOStnM3J4Tehz](https://s2.loli.net/2025/05/11/PrlOStnM3J4Tehz.png) 37 | ![image-202505114l1rUvLfhHQCc2g](https://s2.loli.net/2025/05/11/4l1rUvLfhHQCc2g.png) 38 | 39 | --- 40 | 41 | 这里有两篇文章使用OneLight主题（网页效果与typora中使用会有差异！）： 42 | 43 | 1. [OneLight](https://bin-sites.pages.dev/onelight)、[OneLight-Dark](https://bin-sites.pages.dev/onelight/dark) 44 | 2. [计算机网络](https://bin-sites.pages.dev/net/计算机网络) 45 | 46 | [前往github下载](https://github.com/caolib/typora-onelight-theme#2%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8) -------------------------------------------------------------------------------- /onelight-dark.css: -------------------------------------------------------------------------------- 1 | @import "onelight.css"; 2 | 3 | :root { 4 | --bg-color: #282c34; 5 | --code-bg-color: #3a3f4a; 6 | --text-color: #c3c3c3; 7 | --primary-btn-text-color: var(--text-color); 8 | --rawblock-edit-panel-bd: var(--code-bg-color); 9 | --active-file-bg-color: #333333; 10 | --window-border: 1px solid var(--active-file-bg-color); 11 | --active-file-text-color: inherit; 12 | --active-file-border-color: var(--main-red); 13 | --side-bar-bg-color: var(--bg-color); 14 | --item-hover-bg-color: rgb(from var(--bg-color) r g b / 0.8); 15 | --item-hover-text-color: var(--main-red); 16 | --monospace: monospace; 17 | --side-bar-menu-active-tint: var(--main-green); 18 | --outline-color: #7a7a7a; 19 | --tb-border-color: #393e49; 20 | /* ---------------->> 暗化比例 <<---------------- */ 21 | --darken-ratio: 80%; 22 | /* ---------------->> 主题色 <<---------------- */ 23 | --theme-color-original: #166ff3; 24 | --main-red-original: #ff6b6b; 25 | --main-green-original: #2ed573; 26 | --main-purple-original: #c94ae9; 27 | --main-yellow-original: #f9b03d; 28 | --theme-color: color-mix(in srgb, var(--theme-color-original) var(--darken-ratio), black); 29 | --main-red: color-mix(in srgb, var(--main-red-original) var(--darken-ratio), black); 30 | --main-green: color-mix(in srgb, var(--main-green-original) var(--darken-ratio), black); 31 | --main-purple: color-mix(in srgb, var(--main-purple-original) var(--darken-ratio), black); 32 | --main-yellow: color-mix(in srgb, var(--main-yellow-original) var(--darken-ratio), black); 33 | --light-color: #6e6e6e; 34 | --theme-light-color: #353a45; 35 | --code--bg-color: #282c34; 36 | --code--bg-color-light: #3d404e; 37 | --border-color: var(--theme-color); 38 | --border: solid 0.5px var(--theme-color)94; 39 | /* ---------------->> 字体 <<---------------- */ 40 | --main-font-family: "Cascadia Code", "喵字果汁体", consolas, "微软雅黑", "PingFang SC", "Microsoft YaHei", sans-serif; 41 | /* ---------------->> 悬浮 <<---------------- */ 42 | --item-bg-color-red: rgb(from var(--main-red) r g b / 0.22); 43 | --item-bg-color-blue: rgb(from var(--theme-color) r g b / 0.26); 44 | /* ---------------->> 阴影 <<---------------- */ 45 | --box-shadow: 0px 4px 4px rgba(0, 0, 0, .3); 46 | --box-shadow-large: 0 8px 15px rgb(from var(--bg-color) r g b / 0.1); 47 | --drop-shadow: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.5)); 48 | /* ---------------->> 过渡 <<---------------- */ 49 | --transition: box-shadow 0.3s ease, transform 0.3s ease; 50 | --bg-transition: background-color 0.5s ease; 51 | /* ---------------->> 圆角 <<---------------- */ 52 | --radius-small: 5px; 53 | --radius-large: 10px; 54 | --radius-xlarge: 15px; 55 | /* ---------------->> 云母 <<---------------- */ 56 | --mica-bg: rgba(30, 30, 30, 0.75); 57 | --mica-blur: blur(12px) saturate(1.1); 58 | --mica-border: 1px solid rgba(100, 100, 100, 0.15); 59 | --mica-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.2), 60 | inset 0 1px 0 rgba(100, 100, 100, 0.1); 61 | --mica-transition: background-color 0.5s ease, box-shadow 0.5s ease; 62 | /* ---------------->> Alert颜色 <<---------------- */ 63 | --alert-tip-original: #1f883d; 64 | --alert-note-original: #0969da; 65 | --alert-important-original: #8250df; 66 | --alert-caution-original: #cf222e; 67 | --alert-warning-original: #faad14; 68 | } 69 | 70 | /* 目录 */ 71 | p.md-toc-content { 72 | background: var(--code--bg-color-light); 73 | } 74 | 75 | /* 代码块文本 */ 76 | pre.CodeMirror-line>span { 77 | color: var(--text-color); 78 | } 79 | 80 | /* 引用块 */ 81 | #write blockquote { 82 | border: solid 0.5px var(--theme-color-original); 83 | border-left: 5px solid var(--border-color); 84 | border-left-color: var(--border-color) !important; 85 | background: unset; 86 | } 87 | 88 | #write blockquote:hover { 89 | transition: var(--bg-transition); 90 | background: var(--bg-color); 91 | box-shadow: var(--box-shadow-large); 92 | } 93 | 94 | /* Github风格警告框 */ 95 | .md-alert-tip { 96 | --border-color: color-mix(in srgb, var(--alert-tip-original) var(--darken-ratio), black); 97 | } 98 | 99 | .md-alert-note { 100 | --border-color: color-mix(in srgb, var(--alert-note-original) var(--darken-ratio), black); 101 | } 102 | 103 | .md-alert-important { 104 | --border-color: color-mix(in srgb, var(--alert-important-original) var(--darken-ratio), black); 105 | } 106 | 107 | .md-alert-caution { 108 | --border-color: color-mix(in srgb, var(--alert-caution-original) var(--darken-ratio), black); 109 | } 110 | 111 | .md-alert-warning { 112 | --border-color: color-mix(in srgb, var(--alert-warning-original) var(--darken-ratio), black); 113 | } 114 | 115 | .md-alert { 116 | background: unset !important; 117 | box-shadow: unset; 118 | } 119 | 120 | .md-alert:hover { 121 | background: var(--bg-color) !important; 122 | } 123 | 124 | 125 | 126 | /* 代码块 */ 127 | .md-fences { 128 | box-shadow: unset; 129 | } 130 | 131 | /* 行内代码 */ 132 | #write code { 133 | background-color: var(--code-bg-color); 134 | } 135 | 136 | /* 表格 */ 137 | #write table tr th { 138 | color: var(--main-red-original); 139 | } 140 | 141 | 142 | /* 一体化菜单选项 */ 143 | .megamenu-menu-list li a { 144 | color: var(--text-color) !important; 145 | } 146 | 147 | /* 菜单按钮 */ 148 | .dropdown-menu, 149 | .menu-item-container a.menu-style-btn { 150 | background-color: var(--mica-bg) !important; 151 | } 152 | 153 | 154 | /* 一体化菜单背景 */ 155 | .megamenu-content, 156 | .megamenu-opened header { 157 | background: var(--bg-color); 158 | } 159 | 160 | /* 一体化菜单标题 */ 161 | .megamenu-menu-header { 162 | background: var(--bg-color); 163 | } 164 | 165 | /* 最近使用文件列表 */ 166 | #recent-file-panel tbody tr:nth-child(2n-1) { 167 | background-color: unset; 168 | } 169 | 170 | /* 最近使用文件操作按钮 */ 171 | #recent-file-panel-action-btn { 172 | background-color: unset; 173 | } 174 | 175 | 176 | /* 有序列表序号 */ 177 | #write .ol>.li:before, 178 | #write ol>li:before { 179 | color: var(--text-color); 180 | } 181 | 182 | /* 源码切换按钮 */ 183 | .typora-sourceview-on #toggle-sourceview-btn { 184 | background: transparent; 185 | } 186 | 187 | #write h4 { 188 | color: var(--text-color); 189 | } -------------------------------------------------------------------------------- /onelight.css: -------------------------------------------------------------------------------- 1 | @import './onelight/style/list.css'; 2 | @import './onelight/style/blockquote.css'; 3 | @import './onelight/style/editor.css'; 4 | @import './onelight/style/code.css'; 5 | @import './onelight/style/table.css'; 6 | @import './onelight/style/font.css'; 7 | 8 | 9 | @import './onelight/style/title/title.css'; 10 | /* @import './onelight/style/title/title-colorful.css'; */ 11 | 12 | 13 | /* -------------------------------------------------------- */ 14 | 15 | :root { 16 | --bg-color: #f2f2f2; 17 | --code-bg-color: #282c34; 18 | --text-color: black; 19 | --primary-btn-text-color: #fff; 20 | --active-file-bg-color: #eee; 21 | --window-border: 1px solid var(--active-file-bg-color); 22 | --active-file-text-color: inherit; 23 | --active-file-border-color: var(--main-red); 24 | --side-bar-bg-color: var(--bg-color); 25 | --item-hover-bg-color: hsla(0, 0%, 90%, .59); 26 | --item-hover-text-color: var(--main-red); 27 | --monospace: monospace; 28 | --select-text-font-color: white !important; 29 | --select-text-bg-color: #3266D0; 30 | --side-bar-menu-active-tint: var(--main-green); 31 | --outline-color: #a5a5a5; 32 | --tb-border-color: #e8e8e8; 33 | /* ---------------->> 主题色 <<---------------- */ 34 | --theme-color: #166ff3; 35 | --main-red: #ff6b6b; 36 | --main-green: #2ed573; 37 | --main-purple: #c94ae9; 38 | --main-yellow: #f9b03d; 39 | --light-color: #b2b2b2; 40 | --theme-light-color: white; 41 | --code--bg-color: #282c34; 42 | --code--bg-color-light: #3d404e; 43 | --border-color: var(--theme-color); 44 | --border: solid 0.5px var(--theme-color)94; 45 | /* ---------------->> 字体 <<---------------- */ 46 | --main-font-family: "Cascadia Code", "喵字果汁体", consolas, "微软雅黑", "PingFang SC", "Microsoft YaHei", sans-serif; 47 | /* ---------------->> 悬浮 <<---------------- */ 48 | --item-bg-color-red: rgb(from var(--main-red) r g b / 0.22); 49 | --item-bg-color-blue: rgb(from var(--theme-color) r g b / 0.26); 50 | /* ---------------->> 阴影 <<---------------- */ 51 | --box-shadow: 0px 4px 4px rgba(0, 0, 0, .1); 52 | --box-shadow-large: 0 8px 15px rgba(0, 0, 0, .3); 53 | --drop-shadow: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.3)); 54 | /* ---------------->> 过渡 <<---------------- */ 55 | --transition: box-shadow 0.3s ease, transform 0.3s ease; 56 | --bg-transition: background-color 0.5s ease; 57 | /* ---------------->> 左到右透明渐变色 <<---------------- */ 58 | --gradient-color: linear-gradient(to right, var(--theme-light-color), rgba(255, 255, 255, 0)); 59 | /* ---------------->> 圆角 <<---------------- */ 60 | --radius-small: 5px; 61 | --radius-large: 10px; 62 | --radius-xlarge: 15px; 63 | /* ---------------->> 云母 <<---------------- */ 64 | --mica-bg: rgba(255, 255, 255, 0.65); 65 | --mica-blur: blur(12px) saturate(1.3); 66 | --mica-border: 1px solid rgba(255, 255, 255, 0.15); 67 | --mica-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05), 68 | inset 0 1px 0 rgba(255, 255, 255, 0.3); 69 | --mica-transition: background-color 0.5s ease, box-shadow 0.5s ease; 70 | } 71 | 72 | 73 | /* ---------------->> 段落 <<---------------- */ 74 | #write p { 75 | padding: 5px; 76 | margin: 0; 77 | line-height: 26px; 78 | margin-bottom: 3px; 79 | margin-top: 3px; 80 | } 81 | 82 | #write p:not(:has(.md-image)) { 83 | transition: background-color 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease; 84 | } 85 | 86 | /* 仅在p标签不包含图片时应用悬停效果 */ 87 | #write p:not(:has(.md-image)):hover { 88 | box-shadow: var(--box-shadow); 89 | border-radius: var(--radius-large); 90 | background: var(--theme-light-color); 91 | } 92 | 93 | #write p:has(.md-image):hover::before { 94 | display: none; 95 | } 96 | 97 | #write p[align="center"]:hover { 98 | width: inherit; 99 | } 100 | 101 | /* ---------------->> 粗体 <<---------------- */ 102 | #write strong { 103 | color: var(--theme-color); 104 | font-weight: 700 105 | } 106 | 107 | /* ---------------->> 链接 <<---------------- */ 108 | a>span.md-plain, 109 | a.md-url, 110 | a { 111 | margin-left: 1px; 112 | margin-right: 1px; 113 | color: var(--main-purple); 114 | font-weight: 700; 115 | text-decoration: underline; 116 | } 117 | 118 | .md-alert a>span.md-plain, 119 | .md-alert a.md-url, 120 | .md-alert a { 121 | color: var(--main-purple) !important; 122 | } 123 | 124 | /* 目录中取消链接箭头 */ 125 | #write a.md-toc-inner::after { 126 | background: unset; 127 | } 128 | 129 | /* 表格组件取消链接箭头 */ 130 | .md-reset>a::after { 131 | content: none !important; 132 | } 133 | 134 | /* 图片链接取消链接箭头 */ 135 | a:has(img)::after { 136 | display: none !important; 137 | } 138 | 139 | /* 链接箭头 */ 140 | #write a::after { 141 | content: ""; 142 | display: inline-block; 143 | vertical-align: middle; 144 | width: 1.1em; 145 | height: 1.1em; 146 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c94ae9'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E"); 147 | } 148 | 149 | /* ---------------->> 目录项 <<---------------- */ 150 | a.md-toc-inner { 151 | color: var(--main-purple); 152 | } 153 | 154 | #write p.md-toc-content:hover { 155 | width: inherit; 156 | } 157 | 158 | #write code { 159 | background-color: var(--item-hover-bg-color); 160 | color: #eb4c37; 161 | font-family: var(--main-font-family); 162 | font-size: .9rem; 163 | font-size: .9rem; 164 | } 165 | 166 | #write li code, 167 | #write p code, 168 | #write span code { 169 | border-radius: var(--radius-small); 170 | margin: 0 2px; 171 | padding: 2px 4px; 172 | word-break: break-all; 173 | word-wrap: break-word 174 | } 175 | 176 | /* ---------------->> 图片 <<---------------- */ 177 | #write img { 178 | border-left: 0; 179 | border-right: 0; 180 | filter: var(--drop-shadow); 181 | border-radius: var(--radius-small); 182 | display: block; 183 | height: auto; 184 | margin: 0 auto; 185 | max-width: 100%; 186 | transition: var(--transition); 187 | width: auto; 188 | } 189 | 190 | #write img:hover { 191 | box-shadow: var(--box-shadow-large); 192 | } 193 | 194 | /* ---------------->> 脚注 <<---------------- */ 195 | .md-def-name { 196 | padding-right: 3ch; 197 | } 198 | 199 | .md-footnote { 200 | display: inline-flex; 201 | align-items: center; 202 | justify-content: center; 203 | vertical-align: middle; 204 | } 205 | 206 | /* ---------------->> 高亮 <<---------------- */ 207 | mark { 208 | margin-right: 2px; 209 | margin-left: 2px; 210 | border-radius: var(--radius-large); 211 | padding: 2px 5px 2px 5px; 212 | border: 1.5px solid; 213 | background: transparent; 214 | color: var(--main-red); 215 | } 216 | 217 | .md-fences-adv-panel, 218 | .md-math-container, 219 | .md-mathjax-preview { 220 | font-family: var(--main-font-family); 221 | } 222 | 223 | .searchpanel-search-option-btn.active { 224 | animation: colorChange 1s infinite; 225 | color: var(--theme-color) 226 | } 227 | 228 | span#filesearch-case-option-btn:active { 229 | color: var(--theme-color) 230 | } 231 | 232 | .md-inline-math-container mjx-container { 233 | zoom: 1 234 | } 235 | 236 | .md-expand.md-img-loaded>.md-meta>span, 237 | .md-image>.md-meta { 238 | color: var(--theme-color); 239 | font-family: var(--main-font-family) 240 | } 241 | 242 | .outline-item-active { 243 | background: var(--item-bg-color-blue); 244 | border-left: 28px solid transparent; 245 | margin-left: -28px; 246 | margin-right: -28px 247 | } 248 | 249 | .pin-outline #outline-content .outline-active strong, 250 | .pin-outline .outline-active { 251 | color: var(--theme-color); 252 | font-weight: 700 253 | } 254 | 255 | .active-tab-files #info-panel-tab-file .info-panel-tab-border, 256 | .active-tab-outline #info-panel-tab-outline .info-panel-tab-border { 257 | background-color: var(--theme-color) 258 | } 259 | 260 | /* ---------------->> 脚注 <<---------------- */ 261 | #write .md-footnote { 262 | margin-right: 2px; 263 | margin-left: 2px; 264 | line-height: 1; 265 | background: var(--theme-light-color); 266 | color: var(--main-red); 267 | font-weight: 700; 268 | } 269 | 270 | .md-fences:not(.md-focus) .CodeMirror-code>:hover { 271 | background-color: var(--code--bg-color-light) 272 | } 273 | 274 | hr { 275 | background-color: transparent; 276 | border-top: 2px dashed var(--theme-color); 277 | height: 2px 278 | } 279 | 280 | 281 | /* ---------------->> 键盘快捷键 <<---------------- */ 282 | kbd { 283 | font-family: var(--main-font-family); 284 | font-weight: 700 285 | } 286 | 287 | /* ---------------->> 目录 <<---------------- */ 288 | p.md-toc-content { 289 | padding-left: 10px !important; 290 | margin-left: 20px !important; 291 | background: var(--gradient-color); 292 | border-radius: var(--radius-large); 293 | box-shadow: var(--box-shadow); 294 | } 295 | 296 | p.md-toc-content:hover { 297 | transition: var(--bg-transition); 298 | background: var(--theme-light-color); 299 | } 300 | 301 | 302 | .info-panel-tab-title:hover, 303 | .outline-label:hover { 304 | color: var(--theme-color) 305 | } 306 | 307 | .ty-show-search #info-panel-tab-search .info-panel-tab-border { 308 | background-color: var(--theme-color) 309 | } 310 | 311 | .md-notification-content { 312 | background: #ff00001a 313 | } 314 | 315 | .md-task-list-item.task-list-done span { 316 | color: #999; 317 | text-decoration: line-through 318 | } 319 | 320 | 321 | .fa-folder:before, 322 | .md-image-btn:before { 323 | color: var(--main-yellow); 324 | } 325 | 326 | .md-image-btn:before { 327 | font-family: var(--main-font-family) 328 | } 329 | 330 | .md-image-btn, 331 | .modal-content { 332 | background: var(--theme-light-color) 333 | } 334 | 335 | .modal-content, 336 | video { 337 | border-radius: var(--radius-large); 338 | } 339 | 340 | video { 341 | box-shadow: var(--box-shadow-large); 342 | } 343 | 344 | /* ---------------->> 脚注编辑视图 <<---------------- */ 345 | .md-blockmeta { 346 | font-style: normal; 347 | color: gray; 348 | } 349 | 350 | .ty-on-outline-filter .ty-outline-hit { 351 | background: #ff0; 352 | color: red; 353 | font-weight: 700 354 | } 355 | 356 | #file-library-search-input, 357 | #md-searchpanel input { 358 | -webkit-backdrop-filter: blur(10px); 359 | backdrop-filter: blur(10px); 360 | background: rgb(from var(--bg-color) r g b / 0.7); 361 | border-radius: var(--radius-small); 362 | box-shadow: unset 363 | } 364 | 365 | #file-library-search-input:focus, 366 | #md-searchpanel input:focus { 367 | border-color: var(--theme-color); 368 | } 369 | 370 | .btn.focus, 371 | .btn:focus, 372 | .btn:hover { 373 | color: var(--theme-color) 374 | } 375 | 376 | .form-control:focus { 377 | border-color: #c2c2c2; 378 | outline: 0 379 | } 380 | 381 | .code-tooltip .ty-input:focus, 382 | input:focus { 383 | border-color: unset; 384 | box-shadow: unset 385 | } 386 | 387 | /* ---------------->> 脚注链接 <<---------------- */ 388 | .code-tooltip-content a { 389 | color: rgb(145 205 255); 390 | } 391 | 392 | .megamenu-menu-list li a.active, 393 | .megamenu-menu-list:not(.saved) li a:hover { 394 | background-color: var(--item-hover-bg-color); 395 | color: var(--theme-color) 396 | } 397 | 398 | .megamenu-menu { 399 | -webkit-backdrop-filter: blur(10px); 400 | backdrop-filter: blur(10px); 401 | background-color: var(--bg-color); 402 | color: #000 403 | } 404 | 405 | .typora-node.pin-outline #md-searchpanel, 406 | .typora-node.pin-outline .md-notification-container { 407 | -webkit-backdrop-filter: blur(10px); 408 | backdrop-filter: blur(10px); 409 | background: rgb(from var(--bg-color) r g b / 0.7); 410 | } 411 | 412 | 413 | 414 | .menu-item-container a.menu-style-btn { 415 | background: transparent 416 | } 417 | 418 | .ty-menu-shortcut { 419 | font-family: var(--main-font-family); 420 | } 421 | 422 | .btn-primary.active, 423 | .btn-primary.focus, 424 | .btn-primary:active, 425 | .btn-primary:focus, 426 | .btn-primary:hover, 427 | .open>.dropdown-toggle.btn-primary { 428 | color: #fff 429 | } 430 | 431 | .cm-s-inner .cm-header, 432 | .cm-s-inner.cm-header { 433 | color: var(--theme-color) 434 | } 435 | 436 | .outline-item:hover { 437 | background: var(--item-bg-color-red); 438 | border-left: 28px solid transparent; 439 | border-right: 28px solid transparent; 440 | margin-left: -28px; 441 | margin-right: -28px 442 | } 443 | 444 | .file-library-node.file-tree-node.file-library-file-node:hover { 445 | background: var(--item-bg-color-blue) 446 | } 447 | 448 | 449 | /* ---------------->> 高亮标签 <<---------------- */ 450 | span[alt=highlight] { 451 | margin-right: 2px; 452 | margin-left: 2px; 453 | border-radius: var(--radius-large); 454 | padding: 5px; 455 | background: #ff0; 456 | color: red; 457 | box-shadow: var(--box-shadow); 458 | } 459 | 460 | /* ---------------->> 搜索高亮 <<---------------- */ 461 | .cm-search-hit.CodeMirror-selectedtext, 462 | .md-search-hit.md-search-select, 463 | .md-search-select { 464 | padding: 2px 5px 2px 5px; 465 | border-radius: var(--radius-large); 466 | background: #ff0 !important; 467 | color: red !important; 468 | box-shadow: var(--box-shadow); 469 | } 470 | 471 | .md-search-hit { 472 | background: #ff0; 473 | box-shadow: var(--box-shadow); 474 | } 475 | 476 | .cm-search-hit { 477 | background: unset; 478 | color: unset; 479 | } 480 | 481 | 482 | .CodeMirror-gutters { 483 | border-right: unset 484 | } 485 | 486 | 487 | footer.ty-footer { 488 | border-top: 0 489 | } 490 | 491 | pre.md-fences-advanced.md-focus .md-fences-adv-panel { 492 | border: 0 493 | } 494 | 495 | #typora-source .CodeMirror-lines { 496 | background: var(--theme-light-color); 497 | border-radius: var(--radius-large); 498 | max-width: 90% 499 | } 500 | 501 | #typora-source .CodeMirror-lines, 502 | .CodeMirror-wrap .CodeMirror-code pre { 503 | font-family: var(--main-font-family) 504 | } 505 | 506 | .cm-s-typora-default .cm-code, 507 | .cm-s-typora-default .cm-comment { 508 | color: green; 509 | font-family: var(--main-font-family) 510 | } 511 | 512 | .cm-s-inner .cm-tag { 513 | color: var(--main-purple); 514 | } 515 | 516 | .cm-s-typora-default .cm-overlay { 517 | font-family: var(--main-font-family) 518 | } 519 | 520 | .cm-s-typora-default .CodeMirror-activeline-background { 521 | background: hsla(0, 0%, 60%, .2); 522 | left: -60px; 523 | right: -30px 524 | } 525 | 526 | .cm-s-typora-default .cm-atom, 527 | .cm-s-typora-default .cm-number { 528 | color: var(--theme-color) 529 | } 530 | 531 | #typora-source .CodeMirror-activeline .CodeMirror-linenumber, 532 | #typora-source .CodeMirror-linenumber.CodeMirror-linenumber-show { 533 | color: var(--theme-color); 534 | font-family: var(--main-font-family) 535 | } 536 | 537 | .md-html-inline .md-meta, 538 | .md-ruby .md-meta { 539 | font-family: var(--main-font-family) 540 | } 541 | 542 | 543 | .cm-s-typora-default .cm-tag { 544 | color: #ff7800 545 | } 546 | 547 | .cm-s-typora-default .cm-link { 548 | color: var(--main-purple); 549 | font-style: italic; 550 | text-decoration: underline 551 | } -------------------------------------------------------------------------------- /onelight/fonts/CascadiaCode.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caolib/typora-onelight-theme/f07bff6f83aff93a719c4dbb7d0b6262ca9027ee/onelight/fonts/CascadiaCode.woff2 -------------------------------------------------------------------------------- /onelight/fonts/MiaoZi-GuoZhiTi.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caolib/typora-onelight-theme/f07bff6f83aff93a719c4dbb7d0b6262ca9027ee/onelight/fonts/MiaoZi-GuoZhiTi.woff2 -------------------------------------------------------------------------------- /onelight/img/bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caolib/typora-onelight-theme/f07bff6f83aff93a719c4dbb7d0b6262ca9027ee/onelight/img/bg.gif -------------------------------------------------------------------------------- /onelight/img/bg2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caolib/typora-onelight-theme/f07bff6f83aff93a719c4dbb7d0b6262ca9027ee/onelight/img/bg2.gif -------------------------------------------------------------------------------- /onelight/img/bg3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caolib/typora-onelight-theme/f07bff6f83aff93a719c4dbb7d0b6262ca9027ee/onelight/img/bg3.gif -------------------------------------------------------------------------------- /onelight/img/bg4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caolib/typora-onelight-theme/f07bff6f83aff93a719c4dbb7d0b6262ca9027ee/onelight/img/bg4.gif -------------------------------------------------------------------------------- /onelight/img/bg5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caolib/typora-onelight-theme/f07bff6f83aff93a719c4dbb7d0b6262ca9027ee/onelight/img/bg5.gif -------------------------------------------------------------------------------- /onelight/style/blockquote.css: -------------------------------------------------------------------------------- 1 | /* ---------------->> 引用块 <<---------------- */ 2 | #write blockquote { 3 | background: var(--gradient-color); 4 | border-bottom-right-radius: 10px; 5 | border-left: 5px solid var(--border-color); 6 | border-top-right-radius: 10px; 7 | box-shadow: var(--box-shadow); 8 | color: rgb(from var(--text-color) r g b / 0.85); 9 | font-size: .9em; 10 | margin-bottom: 16px; 11 | margin-top: 16px; 12 | overflow: auto; 13 | -webkit-overflow-scrolling: touch; 14 | padding: 10px 10px 10px 20px; 15 | transition: var(--bg-transition) 16 | } 17 | 18 | #write blockquote:hover { 19 | transition: var(--bg-transition); 20 | background: var(--bg-color); 21 | box-shadow: var(--box-shadow-large); 22 | } 23 | 24 | #write blockquote p { 25 | line-height: 26px 26 | } 27 | 28 | 29 | /* ---------------->> 警告框样式 <<---------------- */ 30 | /* ---------------->> 提示 <<---------------- */ 31 | .md-alert { 32 | --border: solid 1px var(--border-color); 33 | background: var(--gradient-color); 34 | border-bottom-right-radius: 10px; 35 | border-top-right-radius: 10px; 36 | box-shadow: var(--box-shadow); 37 | transition: var(--bg-transition); 38 | } 39 | 40 | /* ---------------->> 不同类型的警告框颜色 <<---------------- */ 41 | .md-alert-tip { 42 | --border-color: #1f883d; 43 | } 44 | 45 | .md-alert-note { 46 | --border-color: #0969da; 47 | } 48 | 49 | .md-alert-important { 50 | --border-color: #8250df; 51 | } 52 | 53 | .md-alert-caution { 54 | --border-color: #cf222e; 55 | } 56 | 57 | .md-alert-warning { 58 | --border-color: #faad14; 59 | } 60 | 61 | /* ---------------->> 边框 <<---------------- */ 62 | .md-alert { 63 | border: var(--border); 64 | border-left: 5px solid var(--border-color); 65 | border-left-color: var(--border-color) !important; 66 | } 67 | 68 | /* ---------------->> 悬浮样式 <<---------------- */ 69 | .md-alert:hover { 70 | background: var(--theme-light-color) !important; 71 | box-shadow: var(--box-shadow-large); 72 | } 73 | 74 | /* ---------------->> 警告框下段落悬浮样式重置 <<---------------- */ 75 | blockquote p:hover, 76 | .md-alert p:hover { 77 | background: transparent !important; 78 | box-shadow: unset !important; 79 | } 80 | 81 | /* ---------------->> 警告框内文本颜色 <<---------------- */ 82 | div.md-alert span[md-inline="plain"].md-plain, 83 | span.md-alert-text-container { 84 | color: var(--border-color); 85 | } 86 | 87 | /* ---------------->> 警告框内列表样式 <<---------------- */ 88 | .md-alert li.md-list-item::before, 89 | .md-alert ul li::before, 90 | .md-alert ol li::before { 91 | background: var(--border-color) !important; 92 | } -------------------------------------------------------------------------------- /onelight/style/code.css: -------------------------------------------------------------------------------- 1 | /* ---------------->> mermaid <<---------------- */ 2 | .md-diagram-panel.md-fences-adv-panel { 3 | background: var(--theme-light-color); 4 | } 5 | 6 | pre.md-fences.md-end-block.md-fences-with-lineno.md-diagram.md-fences-advanced.ty-contain-cm { 7 | background: transparent !important; 8 | } 9 | 10 | 11 | 12 | /* ---------------->> 代码框右下角的语言类型显示 <<---------------- */ 13 | pre.md-fences.md-end-block.md-fences-with-lineno.ty-contain-cm::after { 14 | content: attr(lang); 15 | position: absolute; 16 | right: 0; 17 | bottom: 0; 18 | color: #e0e0e0; 19 | padding: 2px 5px; 20 | border-radius: var(--radius-small); 21 | z-index: 20; 22 | } 23 | 24 | 25 | /* ---------------->> 代码块文本 <<---------------- */ 26 | pre.CodeMirror-line>span { 27 | color: var(--light-color); 28 | } 29 | 30 | .md-rawblock-tooltip-name { 31 | color: var(--theme-color); 32 | } 33 | 34 | /* ---------------->> meta代码块 <<---------------- */ 35 | #write>pre.md-meta-block.md-end-block { 36 | background: var(--theme-light-color) !important; 37 | border-radius: var(--radius-large); 38 | box-shadow: var(--box-shadow); 39 | padding: 10px; 40 | transition: var(--transition) 41 | } 42 | 43 | #write>pre.md-meta-block.md-end-block:hover, 44 | #write>pre.md-meta-block.md-end-block:focus { 45 | box-shadow: var(--box-shadow-large); 46 | } 47 | 48 | /* ---------------->> 代码块选中 <<---------------- */ 49 | .CodeMirror-selected, 50 | .CodeMirror-selectedtext { 51 | color: white !important; 52 | background: var(--select-text-bg-color) !important; 53 | } 54 | 55 | /* ---------------->> 代码块 <<---------------- */ 56 | #write pre { 57 | background: var(--code-bg-color) !important; 58 | font-family: var(--main-font-family) 59 | } 60 | 61 | /* ---------------->> 代码语言类型 <<---------------- */ 62 | span.ty-input.ty-input-after.ty-cm-lang-input { 63 | color: white; 64 | } 65 | 66 | pre[lang=flow], 67 | pre[lang=mermaid], 68 | pre[lang=sequence] { 69 | background: var(--theme-light-color); 70 | color: #333 71 | } 72 | 73 | /* ---------------->> 代码块 <<---------------- */ 74 | .md-fences, 75 | code { 76 | border-radius: var(--radius-small); 77 | margin-left: .2em; 78 | margin-right: .2em; 79 | padding: .1em 80 | } 81 | 82 | .md-fences { 83 | background-color: var(--code-bg-color); 84 | box-shadow: 0 4px 10px gray; 85 | color: var(--bg-color); 86 | margin: 0 0 20px; 87 | padding: .4em 1em .3em; 88 | transition: var(--transition) 89 | } 90 | 91 | /* ---------------->> 代码块光标 <<---------------- */ 92 | .CodeMirror div.CodeMirror-cursor { 93 | border-left: 1.5px solid var(--main-green); 94 | /* z-index: 5; */ 95 | } 96 | 97 | 98 | 99 | .cm-s-inner .cm-keyword { 100 | color: var(--main-purple) 101 | } 102 | 103 | .cm-s-inner .cm-operator { 104 | color: #89ddff 105 | } 106 | 107 | .cm-s-inner .cm-variable-2 { 108 | color: #eff 109 | } 110 | 111 | .cm-s-inner .cm-type, 112 | .cm-s-inner .cm-variable-3 { 113 | color: #ea6717 114 | } 115 | 116 | .cm-s-inner .cm-builtin { 117 | color: #ffcb6b 118 | } 119 | 120 | .cm-s-inner .cm-atom { 121 | color: #f78c6c 122 | } 123 | 124 | .cm-s-inner .cm-number { 125 | color: #ff5370 126 | } 127 | 128 | .cm-s-inner .cm-def { 129 | color: #ff8c00 130 | } 131 | 132 | .cm-s-inner .cm-string { 133 | color: #00ad47 134 | } 135 | 136 | .cm-s-inner .cm-string-2 { 137 | color: #f07178 138 | } 139 | 140 | .cm-s-inner .cm-comment { 141 | color: #cdcdcd; 142 | } 143 | 144 | .cm-s-inner .cm-variable { 145 | color: #42a5f5 146 | } 147 | 148 | .cm-s-inner .cm-meta { 149 | color: var(--main-red) 150 | } 151 | 152 | .cm-s-inner .cm-attribute { 153 | color: #e26fff; 154 | } 155 | 156 | .cm-s-inner .cm-property, 157 | .cm-s-inner .cm-qualifier { 158 | color: var(--main-red) 159 | } 160 | 161 | .cm-s-inner .cm-error { 162 | border: solid 0.25px #e9405c; 163 | color: #fff; 164 | } -------------------------------------------------------------------------------- /onelight/style/editor.css: -------------------------------------------------------------------------------- 1 | #write { 2 | letter-spacing: 0; 3 | text-align: left 4 | } 5 | 6 | /* ---------------->> 大纲参考线 <<---------------- */ 7 | .outline-h1::after, 8 | .outline-h2::after, 9 | .outline-h3::after, 10 | .outline-h4::after, 11 | .outline-h5::after, 12 | .outline-h6::after { 13 | content: ""; 14 | height: calc(100% - 25px); 15 | width: 1.3px; 16 | background: transparent; 17 | position: absolute; 18 | top: 25px; 19 | } 20 | 21 | li.outline-item-wrapper.outline-h1.outline-item-open:has(> ul.outline-children > li)::after { 22 | background: var(--outline-color); 23 | left: 6.5px; 24 | } 25 | 26 | li.outline-item-wrapper.outline-h2.outline-item-open:has(> ul.outline-children > li)::after { 27 | background: var(--outline-color); 28 | left: 20px; 29 | } 30 | 31 | li.outline-item-wrapper.outline-h3.outline-item-open:has(> ul.outline-children > li)::after { 32 | background: var(--outline-color); 33 | left: 34px; 34 | } 35 | 36 | li.outline-item-wrapper.outline-h4.outline-item-open:has(> ul.outline-children > li)::after { 37 | background: var(--outline-color); 38 | left: 48.5px; 39 | } 40 | 41 | li.outline-item-wrapper.outline-h5.outline-item-open:has(> ul.outline-children > li)::after { 42 | background: var(--outline-color); 43 | left: 62.5px; 44 | } 45 | 46 | /* ---------------->> 折叠箭头 <<---------------- */ 47 | .outline-expander:before { 48 | font-weight: bold; 49 | } 50 | 51 | 52 | 53 | .cm-s-inner .cm-link, 54 | .cm-s-inner.cm-link { 55 | color: var(--theme-color); 56 | } 57 | 58 | .theme-preview-div:hover { 59 | border-color: var(--main-green); 60 | } 61 | 62 | .theme-preview-div.active>i::before { 63 | color: var(--main-green); 64 | } 65 | 66 | #theme-preview-grid { 67 | max-width: fit-content; 68 | } 69 | 70 | /* ---------------->> 快速打开搜索框高亮结果 <<---------------- */ 71 | .typora-quick-open-item-title>b { 72 | border-radius: var(--radius-small); 73 | padding: 2px; 74 | color: red; 75 | background: yellow; 76 | } 77 | 78 | .typora-quick-open-item.active { 79 | background: var(--item-bg-color-blue); 80 | } 81 | 82 | /* ---------------->> 左侧文档列表 <<---------------- */ 83 | .file-list-item.active { 84 | border-top-right-radius: 10px; 85 | border-bottom-right-radius: 10px; 86 | background: #efefef; 87 | background: var(--item-bg-color-blue); 88 | color: var(--active-file-text-color); 89 | } 90 | 91 | .file-list-item:hover { 92 | color: var(--theme-color); 93 | background: #42a5f514; 94 | } 95 | 96 | /* ---------------->> 滚动条 <<---------------- */ 97 | ::-webkit-scrollbar { 98 | width: 10px; 99 | height: 5px; 100 | } 101 | 102 | ::-webkit-scrollbar:hover { 103 | height: 10px; 104 | width: 10px; 105 | } 106 | 107 | ::-webkit-scrollbar-thumb { 108 | border-radius: var(--radius-small); 109 | background: rgba(0, 0, 0, .1); 110 | width: 10px 111 | } 112 | 113 | /* ---------------->> 一体化-返回按钮 <<---------------- */ 114 | span.megamenu-menu-header-title-back[data-localize=Back]:hover { 115 | color: var(--theme-color); 116 | } 117 | 118 | /* ---------------->> 一体化-主题预览卡片 <<---------------- */ 119 | .theme-preview-div { 120 | cursor: pointer; 121 | } 122 | 123 | 124 | /* ---------------->> 快速打开搜索框 <<---------------- */ 125 | #typora-quick-open { 126 | border-radius: var(--radius-small); 127 | } 128 | 129 | .typora-quick-open-item:hover { 130 | box-shadow: var(--box-shadow); 131 | cursor: pointer; 132 | color: var(--theme-color); 133 | background: var(--theme-light-color); 134 | } 135 | 136 | /* ---------------->> 一体化模式的侧边菜单 <<---------------- */ 137 | ul#megamenu-menu-list { 138 | height: 100%; 139 | background: transparent; 140 | } 141 | 142 | /* ---------------->> 一体化模式最近打开文件列表 <<---------------- */ 143 | .megamenu-menu-panel table { 144 | font-weight: unset; 145 | } 146 | 147 | /* ---------------->> 一体化模式左侧菜单 <<---------------- */ 148 | .megamenu-menu-header { 149 | -webkit-backdrop-filter: blur(10px); 150 | backdrop-filter: blur(10px); 151 | background: #2e2e2e; 152 | border-bottom: unset; 153 | height: 90px; 154 | position: relative; 155 | text-align: center 156 | } 157 | 158 | .ion-android-arrow-back:before { 159 | content: "<-"; 160 | font-family: cascadia code, fira code, var(--main-font-family) 161 | } 162 | 163 | a#megamenu-back-btn:hover { 164 | color: var(--theme-color) 165 | } 166 | 167 | #megamenu-back-btn { 168 | border: 0; 169 | font-size: 25px 170 | } 171 | 172 | /* ---------------->> 一体化模式-已保存 <<---------------- */ 173 | a#m-saved:hover { 174 | cursor: unset; 175 | } 176 | 177 | a#megamenu-clear-recet-documents:hover { 178 | background: transparent; 179 | } 180 | 181 | .megamenu-opened header { 182 | background-image: unset; 183 | } 184 | 185 | /* ---------------->> 一体化模式-打开 <<---------------- */ 186 | .megamenu-menu-panel:not(:first-of-type) { 187 | margin-top: 10px; 188 | } 189 | 190 | /* ---------------->> 一体化模式-打开-最近打开文件列表 <<---------------- */ 191 | ul.dropdown-menu[aria-labelledby="recent-file-panel-action-btn"] { 192 | border-radius: var(--radius-small); 193 | } 194 | 195 | /* ---------------->> 一体化菜单界面背景图片 <<---------------- */ 196 | div#megamenu-section-open { 197 | background-color: transparent; 198 | background-image: url('../img/bg4.gif'); 199 | background-position: 100% 0%; 200 | background-repeat: no-repeat; 201 | background-size: 100px auto; 202 | transition: background-image .5s ease-in-out, background-size .5s ease-in-out; 203 | } 204 | 205 | /* ---------------->> 主界面背景图片 <<---------------- */ 206 | content { 207 | background-color: transparent; 208 | background-image: url('../img/bg.gif'); 209 | background-position: 100% 100%; 210 | background-repeat: no-repeat; 211 | background-size: 100px auto; 212 | transition: background-image .5s ease-in-out, background-size .5s ease-in-out 213 | } 214 | 215 | .context-menu.dropdown-menu>.active>a, 216 | .context-menu.dropdown-menu>li>a:hover, 217 | .menu-style-btn.active { 218 | cursor: pointer; 219 | border-radius: var(--radius-large); 220 | background: var(--item-bg-color-blue); 221 | color: var(--theme-color) 222 | } 223 | 224 | .menu-item-container a.menu-style-btn.active, 225 | .menu-item-container a.menu-style-btn:hover { 226 | background-color: var(--item-bg-color-blue) !important; 227 | } 228 | 229 | .context-menu { 230 | padding-bottom: 0; 231 | } 232 | 233 | .ty-bold:before { 234 | font-weight: bold; 235 | } 236 | 237 | /* ---------------->> 右键菜单 <<---------------- */ 238 | .dropdown-menu, 239 | .menu-item-container a.menu-style-btn { 240 | border-radius: var(--radius-large); 241 | background-color: var(--mica-bg) !important; 242 | backdrop-filter: var(--mica-blur); 243 | -webkit-backdrop-filter: var(--mica-blur); 244 | border: var(--mica-border); 245 | box-shadow: var(--box-shadow); 246 | transition: var(--mica-transition); 247 | } 248 | 249 | .dropdown-menu .divider { 250 | opacity: 0; 251 | } 252 | 253 | /* ---------------->> 任务列表按钮 <<---------------- */ 254 | .ty-check:before { 255 | color: #00bb00; 256 | } 257 | 258 | /* ---------------->> 删除按钮 <<---------------- */ 259 | .ty-delete1:before { 260 | color: var(--main-red); 261 | } 262 | 263 | /* ---------------->> 代码按钮 <<---------------- */ 264 | .ty-code:before { 265 | color: var(--main-purple); 266 | } 267 | 268 | /* ---------------->> 链接按钮 <<---------------- */ 269 | .ty-link-icon:before { 270 | color: var(--theme-color); 271 | } 272 | 273 | /* ---------------->> 左侧文件树 <<---------------- */ 274 | .file-library-node.file-tree-node.file-library-file-node.active, 275 | .file-node-content:hover { 276 | color: var(--theme-color) 277 | } 278 | 279 | .file-library-node:not(.file-node-root):focus>.file-node-content { 280 | outline: unset; 281 | } 282 | 283 | .file-node-content { 284 | cursor: pointer; 285 | } 286 | 287 | .fa-file-text-o:before { 288 | content: '📄'; 289 | } 290 | 291 | /* ---------------->> 显示/隐藏侧边栏 <<---------------- */ 292 | #outline-btn:hover { 293 | color: var(--theme-color) 294 | } 295 | 296 | /* ---------------->> 底部状态栏 <<---------------- */ 297 | #footer-word-count:hover, 298 | .ty-show-spell-check #footer-spell-check, 299 | .ty-show-word-count #footer-word-count { 300 | background: #eee; 301 | color: var(--theme-color); 302 | } 303 | 304 | .footer-item:hover, 305 | .sidebar-footer-item:hover { 306 | color: var(--theme-color); 307 | } 308 | 309 | /* ---------------->> 搜索框 <<---------------- */ 310 | 311 | #md-searchpanel .btn label { 312 | color: var(--theme-color); 313 | font-weight: bold; 314 | } 315 | 316 | div#md-searchpanel { 317 | background: var(--main-bg); 318 | } 319 | 320 | #md-searchpanel .btn { 321 | text-align: center !important; 322 | border-radius: 10px; 323 | background: rgb(from var(--bg-color) r g b / 0.4); 324 | margin: 0 2px; 325 | } 326 | 327 | #md-searchpanel .btn:hover { 328 | background: var(--item-bg-color-blue); 329 | } -------------------------------------------------------------------------------- /onelight/style/font.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Cascadia Code'; 3 | src: url('../fonts/CascadiaCode.woff2') format('woff2'); 4 | font-weight: normal; 5 | font-style: normal; 6 | } 7 | 8 | @font-face { 9 | font-family: '喵字果汁体'; 10 | src: url('../fonts/MiaoZi-GuoZhiTi.woff2') format('woff2'); 11 | font-weight: normal; 12 | font-style: normal; 13 | } 14 | 15 | body, 16 | script, 17 | text, 18 | .md-rawblock-after, 19 | .md-rawblock-before, 20 | code, 21 | pre, 22 | samp, 23 | tt { 24 | font-family: var(--main-font-family); 25 | } -------------------------------------------------------------------------------- /onelight/style/list.css: -------------------------------------------------------------------------------- 1 | /* ---------------->> 列表 <<---------------- */ 2 | #write ol, 3 | #write ul { 4 | margin-bottom: 8px; 5 | margin-top: 8px; 6 | padding-left: 40px !important; 7 | } 8 | 9 | #write ul { 10 | list-style-type: disclosure-closed 11 | } 12 | 13 | #write ul ul { 14 | list-style-type: square 15 | } 16 | 17 | #write ol { 18 | list-style-type: decimal 19 | } 20 | 21 | #write li section { 22 | font-size: .9rem; 23 | font-size: .9rem; 24 | } 25 | 26 | #write .ol .li, 27 | #write .ul .li, 28 | #write ol li, 29 | #write ul li { 30 | list-style-type: none; 31 | margin-bottom: 7px; 32 | margin-top: 7px 33 | } 34 | 35 | /* ---------------->> 无序列表前小圆点 <<---------------- */ 36 | #write .ul>.li:not(.tab):not(.task-list-item):before, 37 | #write ul>li:not(.tab):not(.task-list-item):before { 38 | border-radius: .31em; 39 | content: ""; 40 | height: .62em; 41 | line-height: .42em; 42 | margin-left: -22px; 43 | margin-top: 15px; 44 | width: .62em; 45 | transition: transform 0.3s; 46 | } 47 | 48 | #write .ul>.li:not(.tab):not(.task-list-item):hover:before, 49 | #write ul>li:not(.tab):not(.task-list-item):hover:before { 50 | transform: rotate(360deg) !important; 51 | } 52 | 53 | 54 | /* ---------------->> 二级无序列表前小方块 <<---------------- */ 55 | #write ul>li:not(.tab):not(.task-list-item)>ul>li.md-list-item::before { 56 | border-radius: 0; 57 | transform: rotate(45deg); 58 | } 59 | 60 | /* ---------------->> 三级无序列表前小方块 <<---------------- */ 61 | #write ul>li:not(.tab):not(.task-list-item)>ul>li.md-list-item>ul>li.md-list-item::before { 62 | border-radius: 0; 63 | transform: unset; 64 | } 65 | 66 | /* ---------------->> 四级无序列表前小方块 <<---------------- */ 67 | #write ul>li:not(.tab):not(.task-list-item)>ul>li.md-list-item>ul>li.md-list-item>ul>li.md-list-item::before { 68 | border-radius: 0; 69 | background: transparent; 70 | border: 1.5px solid var(--theme-color); 71 | } 72 | 73 | 74 | #write .ol .li:before, 75 | #write .ul .li:before, 76 | #write ol li:before, 77 | #write ul li:before { 78 | background: var(--theme-color); 79 | position: absolute; 80 | } 81 | 82 | #write .ol .li:first-child, 83 | #write ol li:first-child { 84 | counter-reset: li 85 | } 86 | 87 | #write .ol .li:hover:before, 88 | #write .ul .li:hover:before, 89 | #write ol li:hover:before, 90 | #write ul li:hover:before { 91 | transform: rotate(1turn) 92 | } 93 | 94 | #write .ul>.li:not(.tab):hover:before, 95 | #write ul>li:not(.tab):hover:before { 96 | background-color: var(--main-red); 97 | border-color: transparent; 98 | } 99 | 100 | /* ---------------->> 有序列表前数字 <<---------------- */ 101 | #write .ol>.li:before, 102 | #write ol>li:before { 103 | border-radius: .825em; 104 | color: #fff; 105 | content: counter(li); 106 | counter-increment: li; 107 | font-size: .65em; 108 | height: 1.65em; 109 | line-height: 1.7em; 110 | margin-left: -25px; 111 | margin-top: 10px; 112 | text-align: center; 113 | width: 1.65em; 114 | transition: transform 0.5s; 115 | } 116 | 117 | #write .ol>.li:hover:before, 118 | #write ol>li:hover:before { 119 | transform: rotate(720deg) !important; 120 | } 121 | 122 | #write .ol .li input, 123 | #write .ul .li input, 124 | #write ol li input, 125 | #write ul li input { 126 | margin-bottom: 0; 127 | margin-top: 0 128 | } 129 | 130 | /* ---------------->> todo列表-复选框 <<---------------- */ 131 | 132 | #write input[type=checkbox] { 133 | top: 10px; 134 | position: absolute; 135 | height: 1.2rem; 136 | width: 1.2rem; 137 | margin-left: -1.8em; 138 | } 139 | 140 | /* ---------------->> 删除线 <<---------------- */ 141 | del { 142 | color: grey; 143 | } -------------------------------------------------------------------------------- /onelight/style/table.css: -------------------------------------------------------------------------------- 1 | /* ---------------->> 表格 <<---------------- */ 2 | figure.md-table-fig.table-figure { 3 | border: 0; 4 | box-shadow: var(--box-shadow); 5 | border-radius: var(--radius-large); 6 | } 7 | 8 | /* ---------------->> 表格调节组件 <<---------------- */ 9 | .ty-table-edit { 10 | border-radius: var(--radius-large); 11 | background-color: var(--mica-bg) !important; 12 | backdrop-filter: var(--mica-blur); 13 | border: var(--mica-border); 14 | box-shadow: var(--box-shadow); 15 | transition: var(--mica-transition); 16 | z-index: 999; 17 | } 18 | 19 | /* 删除表格按钮 */ 20 | .ty-delete:before { 21 | color: var(--main-red); 22 | } 23 | 24 | /* ---------------->> 表格行列调整控件 <<---------------- */ 25 | .popover.bottom.md-table-resize-popover { 26 | width: fit-content; 27 | } 28 | 29 | #write td.md-reset { 30 | border: 0; 31 | padding: 0 !important; 32 | } 33 | 34 | .md-grid-board a { 35 | border: 0; 36 | } 37 | 38 | tr.md-reset { 39 | background: var(--theme-light-color) !important; 40 | } 41 | 42 | td.md-reset.md-grid-ext>a { 43 | margin: 0; 44 | padding: 0; 45 | } 46 | 47 | /* ---------------->> 表格行 <<---------------- */ 48 | #write table tr { 49 | background-color: var(--theme-light-color); 50 | border: 0; 51 | } 52 | 53 | /* ---------------->> 斑马纹 <<---------------- */ 54 | #write table tr:nth-child(2n) { 55 | background-color: var(--bg-color); 56 | } 57 | 58 | #write table tr td, 59 | #write table tr th { 60 | border: 0.5px solid var(--tb-border-color); 61 | font-size: .9rem; 62 | line-height: 1.5; 63 | padding: 5px 10px; 64 | } 65 | 66 | /* ---------------->> 表头 <<---------------- */ 67 | #write table tr th { 68 | background-color: #42a5f53d; 69 | color: var(--theme-color); 70 | font-weight: 700 71 | } -------------------------------------------------------------------------------- /onelight/style/title/title-colorful-dark.css: -------------------------------------------------------------------------------- 1 | #write h1 { 2 | font-size: 2.5rem; 3 | font-weight: lighter; 4 | text-align: center; 5 | padding-bottom: 0.3em; 6 | 7 | background: linear-gradient(to right, #51f8a5, #00BFFF, #51f8a5); 8 | /* 还原原来的三色渐变 */ 9 | background-size: 200% 100%; 10 | /* 添加背景尺寸为流动动画做准备 */ 11 | -webkit-background-clip: text; 12 | background-clip: text; 13 | color: transparent; 14 | caret-color: #00BFFF; 15 | 16 | /* 确保渐变效果完整显示 */ 17 | width: fit-content; 18 | margin: 0 auto; 19 | /* 保持居中 */ 20 | 21 | /* 移除水墨效果，添加文字分裂重组效果 */ 22 | position: relative; 23 | 24 | /* 扩大点击区域，减少边界触发问题 */ 25 | padding: 5px; 26 | 27 | /* 消除抖动的关键: 延迟反应 */ 28 | transition: all 0.5s ease; 29 | 30 | /* 非悬浮状态下，渐变流动速度更慢 */ 31 | animation: gradientMove 4s linear infinite; 32 | } 33 | 34 | /* 添加一个额外的选择器，使用更精确的条件防止反复触发动画 */ 35 | #write h1:not(:focus):not(.md-focus):not(.cm-active) { 36 | /* 明确指定保持流动动画，并与主选择器保持一致的速度 */ 37 | animation: gradientMove 4s linear infinite; 38 | } 39 | 40 | /* 悬停选择器，修改为更有冲击力的动画 */ 41 | #write h1:not(:focus):not(.md-focus):not(.cm-active):hover { 42 | /* 同时应用分裂重组动画和更快的渐变流动动画 */ 43 | animation: textSplitReform 1s ease 150ms 1 both, gradientMove 2s linear infinite; 44 | } 45 | 46 | #write h2 { 47 | font-size: 1.7rem; 48 | margin: 1em 0; 49 | border-bottom: none !important; 50 | padding-bottom: 0.2em; 51 | color: inherit; 52 | position: relative; 53 | display: block; 54 | width: auto; 55 | } 56 | 57 | /* Gradient on inner span for H2 text */ 58 | #write h2>span, 59 | #write h2 span.md-plain { 60 | display: inline-block; 61 | background: linear-gradient(to right, #00BFFF, #ff89c4, #00BFFF); 62 | background-size: 200% 100%; 63 | -webkit-background-clip: text; 64 | background-clip: text; 65 | color: transparent; 66 | caret-color: #FF69B4; 67 | animation: gradientMove 6s linear infinite; 68 | } 69 | 70 | #write h2::after { 71 | content: ""; 72 | position: absolute; 73 | left: 0; 74 | width: 100%; 75 | bottom: 0; 76 | height: 2px; 77 | background: linear-gradient(to right, #00BFFF, #ff89c4, #00BFFF); 78 | background-size: 200% 100%; 79 | border-radius: 2px; 80 | transform-origin: left; 81 | transform: scaleX(1); 82 | transition: transform 0.3s ease-in-out; 83 | animation: gradientMove 6s linear infinite; 84 | } 85 | 86 | #write h2:hover::after { 87 | transform: scaleX(0); 88 | } 89 | 90 | #write h3 { 91 | font-size: 1.5rem; 92 | padding-left: 15px; 93 | position: relative; 94 | width: fit-content; 95 | background: linear-gradient(to right, #f8bbff 0%, #7B65C9 25%, #74fbff 50%, #3175f1 75%, #f8bbff 100%); 96 | background-size: 200% 100%; 97 | -webkit-background-clip: text; 98 | background-clip: text; 99 | color: transparent; 100 | caret-color: #7B65C9; 101 | animation: gradientFlowRight 6s linear infinite; 102 | } 103 | 104 | #write h3::after { 105 | content: ""; 106 | position: absolute; 107 | left: 0; 108 | top: 0; 109 | bottom: 0; 110 | width: 4px; 111 | background: linear-gradient(to bottom, #f8bbff 0%, #7B65C9 25%, #74fbff 50%, #bb54d3 75%, #f8bbff 100%); 112 | background-size: 100% 200%; 113 | border-radius: 2px; 114 | height: auto; 115 | transform: scaleY(1); 116 | transform-origin: center; 117 | transition: transform 0.3s ease-out; 118 | animation: gradientFlowDown 6s linear infinite; 119 | } 120 | 121 | #write h3:hover::after { 122 | transform: scaleY(0); 123 | } 124 | 125 | /* 修正为真正从左到右流动的动画 */ 126 | @keyframes gradientFlowRight { 127 | 0% { 128 | background-position: 200% 50%; 129 | } 130 | 131 | 100% { 132 | background-position: 0% 50%; 133 | /* 反向设置使视觉效果从左到右 */ 134 | } 135 | } 136 | 137 | /* 修正为真正从上到下流动的动画 */ 138 | @keyframes gradientFlowDown { 139 | 0% { 140 | background-position: 50% 200%; 141 | } 142 | 143 | 100% { 144 | background-position: 50% 0%; 145 | /* 反向设置使视觉效果从上到下 */ 146 | } 147 | } 148 | 149 | #write h4 { 150 | font-size: 1.3rem; 151 | width: fit-content; 152 | line-height: 1.6; 153 | margin: 20px 0; 154 | padding: 1px 12.5px; 155 | position: relative; 156 | border-radius: 4px; 157 | background: linear-gradient(to right, #3e4ce6, #3949AB, #5E35B1, #7E57C2, #378ec4, #3e4ce6); 158 | background-size: 200% 100%; 159 | animation: gradientFlowRight 8s linear infinite; 160 | transition: transform 0.3s ease, box-shadow 0.5s ease, background 0.8s ease; 161 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 162 | } 163 | 164 | /* 创建H4文字渐变效果 */ 165 | #write h4 span, 166 | #write h4 span.md-plain { 167 | display: inline-block; 168 | background: linear-gradient(to right, #FFFFFF, #E8F5E9, #BBDEFB, #D1C4E9, #E1F5FE, #FFFFFF); 169 | background-size: 200% 100%; 170 | -webkit-background-clip: text; 171 | background-clip: text; 172 | color: transparent; 173 | caret-color: #BBDEFB; 174 | animation: gradientFlowRight 6s linear infinite; 175 | position: relative; 176 | z-index: 1; 177 | text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); 178 | transition: all 0.3s ease; 179 | } 180 | 181 | /* 添加H4悬浮效果 - 字体变为纯白色 */ 182 | #write h4:hover span, 183 | #write h4:hover span.md-plain { 184 | background: none; 185 | color: #FFFFFF; 186 | text-shadow: 0 0 4px rgba(255, 255, 255, 0.4), 0 0 8px rgba(70, 130, 180, 0.6); 187 | animation: none; 188 | transition: all 0.5s ease; 189 | } 190 | 191 | /* 在悬浮时改变背景渐变为暗青色系，并添加扩散光效 */ 192 | #write h4:hover { 193 | background: linear-gradient(to right, #03488d, #004466, #005566, #006666, #007777, #03488d); 194 | background-size: 200% 100%; 195 | animation: gradientFlowRight 3s linear infinite, glowPulse 2s ease-in-out infinite alternate; 196 | box-shadow: 0 0 5px rgba(0, 102, 102, 0.4), 197 | 0 0 15px rgba(0, 102, 102, 0.3), 198 | 0 0 25px rgba(38, 198, 218, 0.3), 199 | 0 0 40px rgba(38, 198, 218, 0.1); 200 | } 201 | 202 | /* 添加脉冲发光动画 */ 203 | @keyframes glowPulse { 204 | 0% { 205 | box-shadow: 0 0 5px rgba(0, 102, 102, 0.4), 206 | 0 0 15px rgba(0, 102, 102, 0.3), 207 | 0 0 25px rgba(38, 198, 218, 0.2); 208 | } 209 | 210 | 50% { 211 | box-shadow: 0 0 8px rgba(0, 102, 102, 0.5), 212 | 0 0 20px rgba(0, 102, 102, 0.4), 213 | 0 0 35px rgba(38, 198, 218, 0.3), 214 | 0 0 50px rgba(38, 198, 218, 0.2); 215 | } 216 | 217 | 100% { 218 | box-shadow: 0 0 5px rgba(0, 102, 102, 0.4), 219 | 0 0 15px rgba(0, 102, 102, 0.3), 220 | 0 0 25px rgba(38, 198, 218, 0.2); 221 | } 222 | } 223 | 224 | /* 确保有动画定义 */ 225 | @keyframes gradientMove { 226 | 0% { 227 | background-position: 0% 50%; 228 | } 229 | 230 | 50% { 231 | background-position: 100% 50%; 232 | } 233 | 234 | 100% { 235 | background-position: 0% 50%; 236 | } 237 | } 238 | 239 | @keyframes gradientMoveVertical { 240 | 0% { 241 | background-position: 50% 0%; 242 | } 243 | 244 | 50% { 245 | background-position: 50% 100%; 246 | } 247 | 248 | 100% { 249 | background-position: 50% 0%; 250 | } 251 | } 252 | 253 | /* 从左到右流动的渐变动画 - 修改为更平滑的过渡 */ 254 | @keyframes flowLeftToRight { 255 | 0% { 256 | background-position: 0% 50%; 257 | } 258 | 259 | 100% { 260 | background-position: 200% 50%; 261 | } 262 | } 263 | 264 | #write h5 { 265 | font-size: 1.3rem; 266 | position: relative; 267 | width: fit-content; 268 | /* 保持文本渐变效果 - 重新分配颜色比例 */ 269 | background: linear-gradient(135deg, 270 | #8424ea 0%, 271 | #5f4ad8 12.5%, 272 | #2575fc 25%, 273 | #6a38d8 37.5%, 274 | #ec38bc 50%, 275 | #6a38d8 62.5%, 276 | #2575fc 75%, 277 | #5f4ad8 87.5%, 278 | #8424ea 100%); 279 | background-size: 200% 100%; 280 | -webkit-background-clip: text; 281 | background-clip: text; 282 | color: transparent; 283 | text-decoration: none; 284 | caret-color: #5a80ff; 285 | padding: 3px 15px; 286 | /* 保留内边距以便添加边框时不会挤压文本 */ 287 | animation: flowLeftToRight 6s ease-in-out infinite reverse; 288 | font-weight: bold; 289 | transition: all 0.3s ease-in-out; 290 | } 291 | 292 | /* 移除默认状态下的所有伪元素 */ 293 | #write h5::before { 294 | content: none; 295 | } 296 | 297 | #write h5::after { 298 | content: none; 299 | } 300 | 301 | /* 悬停效果 - 只在悬停时显示边框并加速动画 */ 302 | #write h5:hover { 303 | transform: scale(1.02); 304 | /* 降低放大效果 */ 305 | animation: flowLeftToRight 3s ease-in-out infinite reverse; 306 | /* 悬停时加速流动 */ 307 | } 308 | 309 | /* 悬停时添加边框效果 */ 310 | #write h5:hover::before { 311 | content: ""; 312 | position: absolute; 313 | top: 0; 314 | left: 0; 315 | right: 0; 316 | bottom: 0; 317 | border-radius: 6px; 318 | /* 使用渐变作为边框的方法一: 使用background-clip - 匹配文本渐变 */ 319 | padding: 2px; 320 | /* 边框宽度 */ 321 | background: linear-gradient(135deg, 322 | #8424ea 0%, 323 | #5f4ad8 12.5%, 324 | #2575fc 25%, 325 | #6a38d8 37.5%, 326 | #ec38bc 50%, 327 | #6a38d8 62.5%, 328 | #2575fc 75%, 329 | #5f4ad8 87.5%, 330 | #8424ea 100%); 331 | background-size: 200% 100%; 332 | -webkit-mask: 333 | linear-gradient(#fff 0 0) content-box, 334 | linear-gradient(#fff 0 0); 335 | mask: 336 | linear-gradient(#fff 0 0) content-box, 337 | linear-gradient(#fff 0 0); 338 | -webkit-mask-composite: xor; 339 | mask-composite: exclude; 340 | /* 应用渐变流动动画 - 也加速 */ 341 | animation: flowLeftToRight 3s ease-in-out infinite reverse; 342 | z-index: -1; 343 | } 344 | 345 | /* 专为H6设计的从左到右流动动画 - 修复卡顿问题 */ 346 | @keyframes h6FlowFixedStutter { 347 | 0% { 348 | background-position: 0% 50%; 349 | } 350 | 351 | 100% { 352 | background-position: 300% 50%; 353 | } 354 | } 355 | 356 | #write h6 { 357 | font-size: 1.2rem; 358 | position: relative; 359 | width: fit-content; 360 | background: linear-gradient(135deg, 361 | #ff6b6b 0%, 362 | #ff8a6b 15%, 363 | #ffd166 30%, 364 | #ffba6b 45%, 365 | #ff6b6b 60%, 366 | #ff8a6b 75%, 367 | #ffd166 90%, 368 | #ff6b6b 100%); 369 | background-size: 300% 100%; 370 | -webkit-background-clip: text; 371 | background-clip: text; 372 | color: transparent; 373 | caret-color: #c70909; 374 | padding: 1px 12.5px; 375 | animation: h6FlowFixedStutter 6s ease-in-out infinite reverse; 376 | transition: all 0.3s ease; 377 | } 378 | 379 | /* 悬停时加速流动 */ 380 | #write h6:hover { 381 | animation: h6FlowFixedStutter 3s ease-in-out infinite reverse; 382 | } 383 | 384 | /* 横线效果使用after伪元素 */ 385 | #write h6::after { 386 | content: ""; 387 | position: absolute; 388 | left: 50%; 389 | bottom: 0; 390 | height: 2px; 391 | width: 0; 392 | background: linear-gradient(135deg, 393 | #ff6b6b 0%, 394 | #ff8a6b 15%, 395 | #ffd166 30%, 396 | #ffba6b 45%, 397 | #ff6b6b 60%, 398 | #ff8a6b 75%, 399 | #ffd166 90%, 400 | #ff6b6b 100%); 401 | background-size: 300% 100%; 402 | transition: all 0.4s ease; 403 | transform: translateX(-50%); 404 | opacity: 0; 405 | animation: h6FlowFixedStutter 6s ease-in-out infinite reverse; 406 | } 407 | 408 | /* 悬停时显示横线，从中间向两边延伸 */ 409 | #write h6:hover::after { 410 | width: 85%; 411 | opacity: 1; 412 | animation: h6FlowFixedStutter 3s ease-in-out infinite reverse; 413 | } 414 | 415 | /* 增强文字分裂重组动画效果 */ 416 | @keyframes textSplitReform { 417 | 0% { 418 | transform: scale(1); 419 | opacity: 1; 420 | } 421 | 422 | 20% { 423 | transform: scale(1.08) rotate(2deg); 424 | /* 增加缩放和旋转效果 */ 425 | opacity: 0.7; 426 | } 427 | 428 | 40% { 429 | transform: scale(0.92) rotate(-2deg); 430 | /* 增加缩放和旋转效果 */ 431 | letter-spacing: 3px; 432 | /* 增加字间距 */ 433 | opacity: 0.85; 434 | } 435 | 436 | 60% { 437 | transform: scale(1.03) rotate(1deg); 438 | letter-spacing: normal; 439 | opacity: 1; 440 | } 441 | 442 | 80% { 443 | transform: scale(0.97) rotate(-0.5deg); 444 | opacity: 0.95; 445 | } 446 | 447 | 100% { 448 | transform: scale(1) rotate(0); 449 | opacity: 1; 450 | } 451 | } -------------------------------------------------------------------------------- /onelight/style/title/title-colorful.css: -------------------------------------------------------------------------------- 1 | /* ---------------->> 标题 <<---------------- */ 2 | 3 | #write h1 { 4 | font-size: 2.5rem; 5 | font-weight: lighter; 6 | text-align: center; 7 | padding-bottom: 0.3em; 8 | 9 | /* 添加绿色和蓝色渐变文字效果 */ 10 | background: linear-gradient(to right, #51f8a5, #00BFFF); 11 | -webkit-background-clip: text; 12 | background-clip: text; 13 | color: transparent; 14 | caret-color: #00BFFF; 15 | /* 恢复光标并使用蓝色 */ 16 | 17 | /* 确保渐变效果完整显示 */ 18 | width: fit-content; 19 | margin: 0 auto; 20 | /* 保持居中 */ 21 | 22 | /* 移除水墨效果，添加文字分裂重组效果 */ 23 | position: relative; 24 | transition: transform 0.3s ease; 25 | 26 | /* 扩大点击区域，减少边界触发问题 */ 27 | padding: 5px; 28 | 29 | /* 添加CSS变量用来跟踪动画状态，防止频繁触发 */ 30 | --animation-active: 0; 31 | 32 | /* 消除抖动的关键: 延迟反应 */ 33 | transition: all 0.5s ease; 34 | } 35 | 36 | /* 添加一个额外的选择器，使用更精确的条件防止反复触发动画 */ 37 | #write h1:not(:focus):not(.md-focus):not(.cm-active) { 38 | /* 默认无动画 */ 39 | animation: none; 40 | } 41 | 42 | /* 悬停选择器，添加长延迟，避免鼠标在边界时的抖动触发问题 */ 43 | #write h1:not(:focus):not(.md-focus):not(.cm-active):hover { 44 | /* 只有当变量为0时才执行动画，相当于防重入锁 */ 45 | animation: textSplitReform 1.2s ease 250ms 1 both; 46 | } 47 | 48 | /* 完全删除普通的hover样式 */ 49 | #write h1:hover { 50 | /* 覆盖任何可能的动画 */ 51 | animation: none; 52 | } 53 | 54 | #write h2 { 55 | font-size: 1.7rem; 56 | margin: 1em 0; 57 | border-bottom: none !important; 58 | padding-bottom: 0.2em; 59 | /* Space for the underline */ 60 | color: inherit; 61 | position: relative; 62 | display: block; 63 | /* Ensure it takes full available width by default */ 64 | width: auto; 65 | /* Or 100% if auto doesn't work as expected with parent constraints */ 66 | /* No transition on H2's width itself */ 67 | } 68 | 69 | /* Gradient on inner span for H2 text */ 70 | #write h2>span, 71 | #write h2 span.md-plain { 72 | display: inline-block; 73 | background: linear-gradient(to right, #00BFFF, #ff89c4, #00BFFF); 74 | background-size: 200% 100%; 75 | -webkit-background-clip: text; 76 | background-clip: text; 77 | color: transparent; 78 | caret-color: #FF69B4; 79 | /* 恢复光标并使用粉色 */ 80 | animation: gradientMove 6s linear infinite; 81 | } 82 | 83 | #write h2::after { 84 | /* Underline */ 85 | content: ""; 86 | position: absolute; 87 | left: 0; 88 | width: 100%; 89 | /* Full width of H2 block */ 90 | bottom: 0; 91 | height: 2px; 92 | background: linear-gradient(to right, #00BFFF, #ff89c4, #00BFFF); 93 | background-size: 200% 100%; 94 | border-radius: 2px; 95 | transform-origin: left center; 96 | /* Transformation starts from the left */ 97 | transform: scaleX(1); 98 | /* Initial state: full width, visible */ 99 | transition: transform 0.3s ease-in-out; 100 | /* Smooth transition for appear/disappear */ 101 | animation: gradientMove 6s linear infinite; 102 | } 103 | 104 | #write h2:hover::after { 105 | /* On hover, underline disappears from left to right */ 106 | transform: scaleX(0); 107 | /* Scale to 0, effectively making it disappear */ 108 | } 109 | 110 | #write h3 { 111 | font-size: 1.5rem; 112 | padding-left: 15px; 113 | position: relative; 114 | width: fit-content; 115 | background: linear-gradient(to right, #b779ff, #ffb7ff, #b779ff); 116 | background-size: 200% 100%; 117 | -webkit-background-clip: text; 118 | background-clip: text; 119 | color: transparent; 120 | caret-color: #FF69B4; 121 | /* 恢复光标并使用粉色 */ 122 | animation: gradientMove 6s linear infinite; 123 | } 124 | 125 | #write h3::after { 126 | content: ""; 127 | position: absolute; 128 | left: 0; 129 | top: 0; 130 | bottom: 0; 131 | width: 4px; 132 | background: linear-gradient(to bottom, #b779ff, #ffb7ff, #b779ff); 133 | background-size: 100% 200%; 134 | border-radius: 2px; 135 | height: auto; 136 | transform: scaleY(1); 137 | transform-origin: center; 138 | transition: transform 0.3s ease-out; 139 | animation: gradientMoveVertical 6s linear infinite; 140 | } 141 | 142 | #write h3:hover::after { 143 | transform: scaleY(0); 144 | } 145 | 146 | #write h4 { 147 | font-size: 1.3rem; 148 | width: fit-content; 149 | color: #424040 !important; 150 | line-height: 1.6; 151 | margin: 20px 0; 152 | padding: 1px 12.5px; 153 | position: relative; 154 | background: linear-gradient(to right, #51f8a5, #00BFFF); 155 | border-radius: 4px; 156 | background-size: 200% 100%; 157 | background-position: 0% 0%; 158 | transition: background-position 0.1s ease-in-out, color 0.3s ease-in-out; 159 | } 160 | 161 | #write h4:hover { 162 | background-position: -100% -100%; 163 | color: white !important; 164 | } 165 | 166 | #write h4::after { 167 | content: none; 168 | } 169 | 170 | #write h5 { 171 | font-size: 1.3rem; 172 | position: relative; 173 | width: fit-content; 174 | background: linear-gradient(to right, #6a99ff, #ff0800); 175 | background-size: 200% 100%; 176 | background-position: 0% 0%; 177 | -webkit-background-clip: text; 178 | background-clip: text; 179 | color: transparent; 180 | transition: background-position 0.1s ease-in-out; 181 | caret-color: #c70909; 182 | padding: 1px 12.5px; 183 | } 184 | 185 | #write h5:hover { 186 | background-position: -100% -100%; 187 | } 188 | 189 | #write h5::after { 190 | content: none; 191 | } 192 | 193 | #write h6 { 194 | font-size: 1.2rem; 195 | font-style: normal !important; 196 | width: fit-content; 197 | background: linear-gradient(to right, #5a80ff, #b445ff); 198 | -webkit-background-clip: text; 199 | background-clip: text; 200 | color: transparent; 201 | text-decoration: none; 202 | /* 移除原来的下划线 */ 203 | caret-color: #5a80ff; 204 | padding: 1px 12.5px; 205 | position: relative; 206 | /* 为伪元素定位做准备 */ 207 | } 208 | 209 | /* 添加自定义渐变下划线 */ 210 | #write h6::after { 211 | content: ""; 212 | position: absolute; 213 | left: 12.5px; 214 | right: 12.5px; 215 | bottom: 0; 216 | height: 2px; 217 | background: linear-gradient(to right, #5a80ff, #b445ff); 218 | background-size: 200% 100%; 219 | border-radius: 1px; 220 | transform: translateY(0.1em); 221 | /* 调整下划线位置 */ 222 | 223 | /* 创建点状效果 */ 224 | background-image: repeating-linear-gradient(to right, 225 | #5a80ff 0%, #b445ff 100%); 226 | background-size: 200% 100%; 227 | -webkit-mask-image: repeating-linear-gradient(to right, 228 | black 0px, black 4px, 229 | transparent 4px, transparent 8px); 230 | mask-image: repeating-linear-gradient(to right, 231 | black 0px, black 4px, 232 | transparent 4px, transparent 8px); 233 | 234 | /* 添加动画 */ 235 | animation: gradientMove 6s linear infinite; 236 | } 237 | 238 | .megamenu-opened header { 239 | background-image: unset; 240 | } 241 | 242 | /* 渐变背景移动动画 */ 243 | @keyframes gradientMove { 244 | 0% { 245 | background-position: 0% 50%; 246 | } 247 | 248 | 50% { 249 | background-position: 100% 50%; 250 | } 251 | 252 | 100% { 253 | background-position: 0% 50%; 254 | } 255 | } 256 | 257 | /* 垂直渐变背景移动动画 (用于H3的竖条) */ 258 | @keyframes gradientMoveVertical { 259 | 0% { 260 | background-position: 50% 0%; 261 | } 262 | 263 | 50% { 264 | background-position: 50% 100%; 265 | } 266 | 267 | 100% { 268 | background-position: 50% 0%; 269 | } 270 | } 271 | 272 | /* 文字分裂重组动画，保持不变 */ 273 | @keyframes textSplitReform { 274 | 0% { 275 | transform: scale(1); 276 | letter-spacing: normal; 277 | opacity: 1; 278 | filter: blur(0px); 279 | } 280 | 281 | 25% { 282 | transform: scale(1.1); 283 | letter-spacing: 5px; 284 | opacity: 0.7; 285 | filter: blur(2px); 286 | } 287 | 288 | 50% { 289 | transform: scale(0.9); 290 | letter-spacing: -3px; 291 | opacity: 0.5; 292 | filter: blur(4px); 293 | } 294 | 295 | 75% { 296 | transform: scale(1.05); 297 | letter-spacing: 2px; 298 | opacity: 0.8; 299 | filter: blur(1px); 300 | } 301 | 302 | 100% { 303 | transform: scale(1); 304 | letter-spacing: normal; 305 | opacity: 1; 306 | filter: blur(0px); 307 | } 308 | } -------------------------------------------------------------------------------- /onelight/style/title/title.css: -------------------------------------------------------------------------------- 1 | /* ---------------->> 标题 <<---------------- */ 2 | #write h2, 3 | #write h3, 4 | #write h4, 5 | #write h5, 6 | #write h6 { 7 | margin: .72em 0; 8 | padding: 0; 9 | position: relative; 10 | font-weight: lighter; 11 | } 12 | 13 | #write h2:hover:before { 14 | bottom: .2rem; 15 | content: "H2" 16 | } 17 | 18 | #write h3:hover:before { 19 | bottom: .2rem; 20 | content: "H3" 21 | } 22 | 23 | #write h4:hover:before { 24 | bottom: .2rem; 25 | content: "H4" 26 | } 27 | 28 | #write h5:hover:before { 29 | bottom: .2rem; 30 | content: "H5" 31 | } 32 | 33 | #write h6:hover:before { 34 | bottom: .2rem; 35 | content: "H6" 36 | } 37 | 38 | #write h2:hover:before, 39 | #write h3:hover:before, 40 | #write h4:hover:before, 41 | #write h5:hover:before, 42 | #write h6:hover:before { 43 | line-height: 25px; 44 | padding: 0 1px 0 1px; 45 | bottom: 0; 46 | color: var(--item-bg-color-blue); 47 | font-size: .9rem; 48 | position: absolute; 49 | right: calc(100% + 3px); 50 | } 51 | 52 | #write h1 { 53 | color: var(--theme-color); 54 | font-size: 2.5rem; 55 | font-weight: lighter; 56 | text-align: center; 57 | padding-bottom: 0.3em; 58 | } 59 | 60 | #write h2 { 61 | color: var(--theme-color); 62 | font-size: 1.7rem; 63 | margin: 1em 0; 64 | border-bottom: 2px solid var(--theme-color); 65 | padding-bottom: 0.2em; 66 | } 67 | 68 | 69 | #write h3 { 70 | font-size: 1.5rem; 71 | color: var(--theme-color); 72 | padding-left: 15px; 73 | position: relative; 74 | } 75 | 76 | #write h3::after { 77 | content: ""; 78 | position: absolute; 79 | left: 0; 80 | top: 0; 81 | bottom: 0; 82 | width: 4px; 83 | background-color: var(--theme-color); 84 | border-radius: 2px; 85 | z-index: 0; 86 | } 87 | 88 | #write h4 { 89 | font-size: 1.2rem; 90 | width: fit-content; 91 | color: white; 92 | line-height: 1.6; 93 | margin: 20px 0; 94 | padding: 1px 12.5px; 95 | position: relative; 96 | background: linear-gradient(to right, var(--theme-color), var(--main-green)); 97 | border-radius: var(--radius-small); 98 | background-size: 200% 100%; 99 | background-position: 0% 0%; 100 | transition: background-position 0.1s ease-in-out, color 0.3s ease-in-out; 101 | } 102 | 103 | #write h4:hover { 104 | background-position: -100% -100%; 105 | } 106 | 107 | #write h5 { 108 | font-size: 1.5rem; 109 | position: relative; 110 | width: fit-content; 111 | background: linear-gradient(to right, var(--theme-color), var(--main-green)); 112 | background-size: 200% 100%; 113 | background-position: 0% 0%; 114 | -webkit-background-clip: text; 115 | background-clip: text; 116 | color: transparent; 117 | transition: background-position 0.1s ease-in-out; 118 | caret-color: #f7ce68; 119 | padding: 1px 12.5px; 120 | } 121 | 122 | #write h5:hover { 123 | background-position: -100% -100%; 124 | } 125 | 126 | #write h6 { 127 | font-size: 1.2rem; 128 | width: fit-content; 129 | background: linear-gradient(to right, #3f5ef8, #8742e7); 130 | -webkit-background-clip: text; 131 | background-clip: text; 132 | color: transparent; 133 | text-decoration-line: underline; 134 | text-decoration-style: dotted; 135 | text-decoration-color: #6a82ff; 136 | text-underline-offset: 0.3em; 137 | text-decoration-thickness: 2px; 138 | caret-color: #6a82ff; 139 | padding: 1px 12.5px; 140 | } --------------------------------------------------------------------------------