Showing preview only (246K chars total). Download the full file or copy to clipboard to get everything.
Repository: cayxc/Mdmdt
Branch: main
Commit: a2f7d357144e
Files: 8
Total size: 233.1 KB
Directory structure:
gitextract_o4j_tx36/
├── .gitignore
├── LICENSE
├── Mdmdt主题演示demo.md
├── mdmdt-dark.css
├── mdmdt-light.css
├── mdmdt.css
├── readme.md
└── readme.zh.md
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
.DS_Store
.idea/
================================================
FILE: LICENSE
================================================
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [cayxc]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
================================================
FILE: Mdmdt主题演示demo.md
================================================
# 关于Mdmdt主题
**Mdmdt **是 markdown minimalism document theme 的缩写，意为: **Markdown极简文档主题**。
**Mdmdt**[^1]是深度定制的个性化Typora主题，其目的是打造一个**清爽极简**的文档样式。
> [!NOte]
>
> **注意：**mdmdt.css 文件中包含了亮色和暗色两者主题，会跟随系统模式自动切换亮暗主题。 `This is a single line code style`
>
> **Attention:** The MDMDT.CSS file contains both light and dark themes, which will automatically switch between light and dark themes according to the system mode.
# 文本
这是一段正文内容样式，以下是不同文本样式效果：**这是加粗文本样式**, <u>这是下划线样式</u>, *这是斜体字样式*, [这是超链接样式: https://github.com/cayxc/mdmdt](https://github.com/cayxc/mdmdt), `This is a single line code style`, ~~这是删除线效果样式~~, ==这是文字高亮效果==，上下标样式: $\LaTeX$, X^2^, H~2~O, <span style='background:var(--color-2-0-c)'> 这是鼠标选中效果 </span>, 键盘键样式：<kbd>Command+Q</kbd> 🐳 😀 🇨🇳
This is a text content style and the following are the effects of different text styles: **This is a bold text style**, [This is a hyperlink style: https://github.com/cayxc/mdmdt](https://github.com/cayxc/mdmdt), *This is the italic font style*, ~~This is the strikethrough effect style~~, <u>This is the underline style</u>, `This is a single line code style`, keyboard key style: <kbd>Command+Q</kbd>, $\LaTeX$ X^2^H~2~O, ==This is the text highlighting effect==, <span style='background:var(--color-2-0-c)'>This is the mouse selection effect</span> 🐳 😀 🇨🇳
<!-- 这是注释内容......, This is the annotation content -->
# 数学公式
直接使用公式：
$$
\begin{aligned} I &=\int_0^{ct}\frac{r}{\sqrt{c^2t^2 -r^2}}\int_0^{2\pi} m^2(m+n) d\theta dr\&=\int_0^{ct}\frac{r}{\sqrt{c^2t^2 -r^2}}\end{aligned}
$$
$$ 代入公式得到： $$ $$u(t,x,y) = (3x+y) c^2 t^2 + x^2(x+y)$$
$$
u(t,x,y) = \frac{1}{2\pi c} \frac{\part}{\part t} \iint\limits_{r<ct} \frac{m^2(m+n)}{\sqrt{c^2t^2 -r^2 }}dmdn
$$
# 列表
这些是列表样式效果:
1. 这是有序列表 A
2. 这是有序列表 B
- This is Item 1.
- This is Item 2.
- [x] Something is Not TODO.
- [ ] Something is DONE.
---
1. 这是有序列表 A
2. 这是有序列表 B
1. 这是有序列表 A
2. 这是有序列表 B
- This is Item 1.
- This is Item 2.
- This is Item 1.
- This is Item 2.
---
这是嵌套列表样式：
1. 这是有序列表 A
2. 这是有序列表 B
- This is Item 1.
- This is Item 2.
- [x] Something is Not TODO.
- [ ] Something is DONE.
- 这是有序列表 A
- 这是有序列表 B
1. This is Item 1.
2. This is Item 2.
- [ ] Something is Not TODO.
- [x] Something is DONE.
# 代码
单行代码样式：`composer require --dev barryvdh/laravel-ide-helper`
大段代码块样式：
```javascript
/**
* ----------------------------------------
* 设置递增的 level 编号
* ----------------------------------------
* @param tag obj 标签对象
*/
setLevelNumber(tag){
try {
if ((typeof tag) != 'object') {
throw 'setLevelNumber() 调用时参数类型错误，必须是一个h标签的对象集合！';
}
let str = tag.id;
if (str.lastIndexOf('.') == -1) { //如果是一级目录形式 level-1000
let newValue = parseInt(str.slice(6)) + 1;
return 'level-' + newValue;
}
} catch (err) {
return err;
}
}
```
# 表格样式
| Left-Aligned | Center Aligned | Right Aligned |
| :---------------------- | :------------------------------------------: | ------------: |
| This is the first line | `this is code` some wordy text and some code | $160 |
| This is the second line | some code: `this is code` centered | $1200.99 |
| This is the third line | These are some texts | $125.5 |
# 引用文本框
> [!NOTE]
>
> This is a Note text box ...... `this is code style`
>
> > This is a Note text box ......
> [!TIP]
>
> - `this is code` This is a Tip text box ......
>
> - ```bash
> these are codes...
> ...
> ```
>
> - This is a Tip text box ......
>
> 1. This is itemA
> 1. This is itemB
> 1. This is itemC
> [!IMPORTANT]
>
> This is a Important text box ......
>
> [!WARNING]
>
> This is a Warning text box ......
> [!CAUTION]
>
> `this is code` This is a Caution text box ......
# 个性化图文布局
## 单张图片
<img src="./img/mdmdt.png" />
## 多图并排
图片的个性化排列使用方式是将图片放到一个容器中，该容器为 `<section>` 标签，如下所示:
1. 直接输入`<section>` 然后回车，如下：
2. ```html
<section>
</section>
```
3. 在 `<section>` 标签中插入图片，如下：
4. ```html
<section>
<!-- 想要几张图并排，就在此处插入几个 <img> 标签: <img src="图片的相对路径/绝对路径"></img> -->
<img src="./img/mdmdt-code.png"></img>
<img src="./img/mdmdt-source.png" style="width: 200px"></img> <!-- 单独设置图片的宽度为200px -->
<img src="./img/mdmdt-title.png"></img>
</section>
```
**效果预览**：
<section>
<img src="./img/mdmdt-math.png"></img>
<img src="./img/mdmdt-list.png"></img>
</section>
---
<section>
<img src="./img/mdmdt-code.png"></img>
<img src="./img/mdmdt-ui-1.png" style="width: 200px"></img>
<img src="./img/mdmdt-title.png"></img>
</section>
---
## 多张图其他排列方式
一张大图在左，多张小图在右的图片排列，如下：
```html
<!-- 一张大图在左，多张小图在右 -->
<section>
<img src="./img/mdmdt-ui-1.png"></img> <!-- 这是第1列 -->
<span style="width: 240px"> <!-- 这是第2列 -->
<img src="./img/mdmdt-ui-2.png"></img>
<img src="./img/mdmdt-code.png"></img>
<img src="./img/mdtht-dark.png"></img>
</span>
</section>
```
**效果预览**：
<section>
<img src="./img/mdtht-light.png"></img>
<span style="width: 240px">
<img src="./img/mdmdt-ui-1.png"></img>
<img src="./img/mdmdt-code.png"></img>
<img src="./img/mdtht-dark.png"></img>
</span>
</section>
---
一张大图在右，多张小图在左的图片排列，如下：
```html
<!-- 一张大图在右，多张小图在左 -->
<section>
<span style="width: 240px"> <!-- 这是第1列 -->
<img src="./img/mdmdt-ui-2.png"></img>
<img src="./img/mdmdt-code.png"></img>
<img src="./img/mdtht-dark.png"></img>
</span>
<img src="./img/mdmdt-ui-1.png"></img> <!-- 这是第2列 -->
</section>
```
**效果预览**：
<section>
<span style="width: 240px">
<img src="./img/mdmdt-ui-1.png"></img>
<img src="./img/mdmdt-ui-2.png"></img>
<img src="./img/mdtht-dark.png"></img>
</span>
<img src="./img/mdtht-light.png"></img>
</section>
## 图文并排
图文的个性化排列使用方式是将图片和文字放到一个容器中，该容器为 `<section>` 标签，如下所示:
1. 直接输入 `<section>` 然后回车，如下：
2. ```html
<section>
</section>
```
3. 在 `<section>` 标签中插入图片和文字，如下：
4. ```html
<!-- 图片和单段文字排列示例 -->
<section>
<img src="./img/mdmdt-title.png"></img> <!-- 这是第1列 -->
<span>这是文字在右，图片在左，图片和文字各占总宽度的50%的图文并排的样式。</span> <!-- 这是第2列 -->
</section>
<!-- 图片和单段文字排列示例 -->
<section>
<span>这是文字在左，图片在右，图片和文字各占总宽度的50%的图文并排的样式。</span>
<img src="./img/mdmdt-title.png"></img>
</section>
<!-- 图片和多段文字排列示例 -->
<section>
<img src="./img/mdmdt-title.png"></img> <!-- 这是第1列 -->
<span style="width: 150px"> <!-- 这是第2列，且单独设置该列的宽度为150px -->
<span>这是多段文字......</span>
<span>这是文字在右，图片在左，图片和文字各占总宽度的50%的图文并排的样式。</span>
<span>这是多段文字......</span>
</span>
</section>
<!-- 图片居中，文字在两边的排列示例 -->
<section>
<span>这是第1列，这是图片居中，文字在两边的样式</span> <!-- 这是第1列 -->
<img src="./img/mdtht-dark.png"></img> <!-- 这是第2列, 单独设置图片的宽度为200px -->
<span>这是第3列，列的宽度比第1列小</span> <!-- 这是第3列 -->
</section>
```
**效果预览**：
<section>
<img src="./img/mdmdt-title.png"></img>
<span>这是单段文字，文字在右，图片在左，图片和文字各占总宽度的50%的图文并排的样式。</span>
</section>
---
<section>
<span>这是单段文字，文字在左，图片在右，图片和文字各占总宽度的50%的图文并排的样式。</span> <!-- 这是第1列 -->
<img src="./img/mdmdt-title.png"></img> <!-- 这是第2列 -->
</section>
---
<section>
<img src="./img/mdmdt-title.png"></img>
<span>
<span>这是多段文字......</span>
<span>这是文字在右，图片在左，图片和文字各占总宽度的50%的图文并排的样式。</span>
<span>这是多段文字......</span>
</span>
</section>
---
<section>
<span>这是第1列内容<br>这是图片居中，两边是文字，且两边文字设置相同宽度的样式</span> <!-- 这是第1列 -->
<img src="./img/mdtht-dark.png"></img> <!-- 这是第2列 -->
<span>这是第3列内容<br>这是图片居中，两边是文字，且两边文字设置相同宽度的样式</span> <!-- 这是第3列 -->
</section>
<section>
<span>这是中间是图片，两边是文字的图文样式<br>需要注意：该列文字内容较多，且未设置宽度。<strong>列的宽度比第3列大</strong></span>
<img src="./img/mdtht-dark.png"></img>
<span>这是第3列内容</span>
</section>
---
图片和文字，图片设置宽度示例：
```html
<!-- 这是文字在右，图片在左的示例 -->
<section>
<img src="./img/mdmdt-title.png" style="width:200px"></img>
<span>这是文字在右，图片在左，且设置图片的宽度（如图片宽可以设置为：200px）的图文并排的样式。</span>
</section>
<!-- 这是文字在左，图片在右的示例 -->
<section>
<span>这是文字在左，图片在右，设置图片宽度为 200px 的图文并排的样式！</span>
<img src="./img/mdmdt-title.png" style="width:200px"></img>
</section>
```
**效果预览**：
---
<section>
<img src="./img/mdmdt-title.png" style="width:200px"></img>
<span>这是文字在右，图片在左，且设置图片宽度（如图片宽可以设置为：200px）的图文并排的样式。</span>
</section>
<section>
<span>这是文字在左，图片在右，且设置图片宽度为 200px 的图文并排的样式！</span>
<img src="./img/mdmdt-title.png" style="width:200px"></img>
</section>
---
> [!Important]
>
> **注意：**
>
> 由于图片排列的容器 `<section>` 采用的是grid布局，会根据 `<section>` 中有几列和每列里的内容自动分配每一列的宽度。
>
> 在进行图片、图片和文字排列时，如果将某一列的宽度设置为 xx%的形式，则该列的实际宽度并<u>不一定是内容区宽度的 xx%</u>，而是 `<section>` 容器中当前列宽度的 xx%，且当前列的宽度还受到了里面内容的影响。
>
> **基于以上原因，建议在单独设置某一列宽度的时候，尽可能采用具体的值（如: style="width: 200px"），不要采用 xx%（如: style="width: 50%"）的形式。**
>
> 示例：
>
> ```html
> <!-- <section> 排列图片的容器，宽度为内容区（也就是书写区）的宽度 -->
> <section>
> <!-- 此时是2列 -->
> <img src="./img/mdtht-dark.png"></img>
> <!-- 此处的 width:50% ，实际只有内容区宽度的25%（一共2列，每一列宽度50%，50%*50% => 25%）-->
> <img src="./img/mdtht-dark.png" style="width:50%"></img>
> </section>
>
> <section>
> <!-- 此时是3列： img, span, span -->
> <img src="./img/mdmdt-title.png"></img> <!-- 第1列 -->
> <span>....</span> <!-- 第2列 -->
> <span> <!-- 第3列 -->
> <span>这是其段落他文字...</span>
> <!-- 此处的 width:50% ，实际只有内容区宽度的16.5%（一共3列，每一列宽度33.33%，33.33%*50% => 16.65%）-->
> <span style="width:50%">这是多段文字</span>
> <span>这是其段落他文字...</span>
> </span>
> </section>
> ```
除了以上展示的排列方式，更多的排列形式，还请自行探索 ......
# 图表Mermaid
以下是 **Mermaid图表** 部分示例，更多图表类型请参考：[Mermaid图表](https://mermaid.js.org)
```mermaid
flowchart LR
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
```mermaid
stateDiagram-v2
[*] --> Active
state Active {
[*] --> NumLockOff
NumLockOff --> NumLockOn : EvNumLockPressed
NumLockOn --> NumLockOff : EvNumLockPressed
--
[*] --> CapsLockOff
CapsLockOff --> CapsLockOn : EvCapsLockPressed
CapsLockOn --> CapsLockOff : EvCapsLockPressed
--
[*] --> ScrollLockOff
ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
}
```
```mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :until isadded
Functionality added :milestone, isadded, 2014-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
```
## Flowchart
## Sequence Diagram
## State Diagram
# 一级标题1
## 二级标题2
### 三级标题3
#### 四级标题4
##### 五级标题5
###### 六级标题6
# TOC目录
以下是 [TOC] 目录样式
[TOC]
================================================
FILE: mdmdt-dark.css
================================================
/*
* ------------------------------------------------------------------------
* mdmdt-dark.css
* (c) 2024-2025
* Author: cayxc
* Homepage: https://gitee.com/cayxc/mdmdt https://github.com/cayxc/Mdmdt
* License: Apache-2.0
* ------------------------------------------------------------------------
*/
:root {
--bg-color: #1b1b1f;
--bg-color2: rgb(40, 42, 50);
--text-color: #d0d0d0;
--text-grey: #464b50;
--text-code: #bbc7fd;
--title-color: var(--text-color);
--border-color: var(--text-grey);
--color-1: #3e69d7;
--color-1-0-a: rgba(62, 105, 215, 0.3);
--color-1-0-b: rgba(62, 105, 215, 0.12);
--color-2: #f59102;
--color-2-0-a: rgba(245, 145, 2, 0.3);
--color-2-0-b: rgba(245, 145, 2, 0.12);
--color-2-0-c: rgba(245, 145, 2, 0.4);
--color-3: #03b736;
--color-3-0-a: rgba(3, 183, 54, 0.3);
--color-3-0-b: rgba(3, 183, 54, 0.12);
--color-4: #8250df;
--color-4-0-a: rgba(130, 80, 223, 0.3);
--color-4-0-b: rgba(130, 80, 223, 0.12);
--color-5: #e30f2e;
--color-5-0-a: rgba(227, 15, 46, 0.3);
--color-5-0-b: rgba(227, 15, 46, 0.12);
--md-char-color: #667c89ff;
--meta-content-color: var(--md-char-color);
--primary-color: var(--color-1);
--primary-btn-border-color: var(--bg-color2);
--primary-btn-text-color: var(--text-color);
--window-border: 1px solid var(--border-color);
--active-file-bg-color: var(--bg-color2);
--active-file-text-color: var(--color-1);
--active-file-border-color: var(--color-1);
--side-bar-bg-color: var(--bg-color);
--item-hover-bg-color: var(--bg-color2);
--item-hover-text-color: var(--color-1);
--select-text-bg-color: var(--color-1-0-a);
--monospace: "JetBrains Mono", "Source Code Pro", "Fira Code", Consolas, Inconsolata, "Cascadia Code", Monaco, "Ubuntu Mono", monospace;
--mermaid-theme: dark; /*or base, dark, forest, neutral, night */
--mermaid-font-family: "trebuchet ms", verdana, arial, sans-serif;
--mermaid-sequence-numbers: on;
--mermaid-flowchart-curve: linear;
--mermaid--gantt-left-padding: 75;
}
html {
height: 100vh;
background-color: var(--bg-color);
font-size: 16px !important;
color: var(--text-color);
-webkit-font-smoothing: antialiased;
scroll-behavior: smooth;
scroll-padding: 14px;
}
body {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.6;
letter-spacing: 0.6px;
font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;
background: var(--bg-color);
overflow-x: hidden;
}
body.os-windows {
font-family: "Microsoft YaHei UI", "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;
letter-spacing: 1px;
}
* {
tab-size: 4;
-webkit-tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
}
/*
* ------------------------
* scroll style
* ------------------------
*/
::-webkit-scrollbar,
::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
border-radius: 4px !important;
background: var(--text-grey) !important;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
background: var(--bg-color2) !important;
}
html,
html * {
scrollbar-color: var(--text-grey) var(--bg-color2) !important;
scrollbar-width: thin !important;
}
/*
* -----------------------------------
* h1 ~ h6, header
* p, strong, dl, em, u, kbd, hr, mark
* -----------------------------------
*/
h1, h2, h3, h4, h5, h6 {
position: relative;
line-height: 1.5;
margin: 32px 0 18px;
color: var(--title-color);
letter-spacing: 2px;
}
h1 {
font-size: 32px;
border-bottom: 1px solid var(--border-color);
}
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
#write > h1 + *,
#write > h2 + *,
#write > h3 + *,
#write > h4 + *,
#write > h5 + *,
#write > h6 + * {
margin-top: 18px !important;
}
#write > h1::before,
#write > h2::before,
#write > h3::before,
#write > h4::before,
#write > h5::before,
#write > h6::before,
#write > h1.md-focus::before,
#write > h2.md-focus::before,
#write > h3.md-focus::before,
#write > h4.md-focus::before,
#write > h5.md-focus::before,
#write > h6.md-focus::before {
display: none;
position: absolute;
left: -36px;
height: 20px;
padding-left: 6px;
padding-right: 3px;
border: 1px solid var(--color-1);
border-radius: 4px;
font-size: 12px;
font-weight: 700;
color: var(--color-1);
}
#write > h1::before,
#write > h1.md-focus::before {
content: 'h1';
top: 15px;
}
#write > h2::before,
#write > h2.md-focus::before {
content: 'h2';
top: 10.5px;
}
#write > h3::before,
#write > h3.md-focus::before {
content: 'h3';
top: 8px;
}
#write > h4::before,
#write > h4.md-focus::before {
content: 'h4';
top: 5.5px;
}
#write > h5::before,
#write > h5.md-focus::before {
content: 'h5';
top: 4px;
}
#write > h6::before,
#write > h6.md-focus::before {
content: 'h6';
top: 2.5px;
}
#write > h1:hover::before,
#write > h2:hover::before,
#write > h3:hover::before,
#write > h4:hover::before,
#write > h5:hover::before,
#write > h6:hover::before {
display: block;
}
hr {
height: 1px;
box-sizing: border-box;
background: var(--border-color);
border: none;
}
p {
margin-top: 16px;
margin-bottom: -5px;
white-space: pre-wrap;
}
#write > p + p {
margin-top: 24px;
}
p:has(span.md-image) {
margin-bottom: 0;
}
strong {
font-weight: 800;
color: #cfdfff;
}
u {
text-underline-offset: 4px;
text-decoration-thickness: 1.5px;
}
em {
font-weight: 400;
}
del {
color: var(--text-grey);
text-decoration: line-through;
text-decoration-color: var(--color-5);
-moz-text-decoration-color: var(--color-5);
}
mark {
border-radius: 5px;
background-color: var(--color-1);
padding: 0 4px;
color: rgb(250, 250, 250);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/*
* ------------------------
* a, link
* ------------------------
*/
a {
position: relative;
font-weight: 500;
text-decoration: none;
color: var(--color-1);
font-size: 16px;
text-underline-offset: 4px;
}
a:hover,
.md-link a:hover,
.footnotes a:hover {
color: var(--color-2);
text-decoration: underline;
cursor: pointer !important;
}
/*以下写法是防止导出pdf时再标题或代码块部分生成链接图标*/
#write p a,
#write table a,
#write blockquote a,
#write .md-alert a,
#write li a {
padding-left: 2px;
}
#write p a::before,
#write table a::before,
#write blockquote a::before,
#write .md-alert a::before,
#write li a::before {
content: "";
display: inline-block;
position: relative;
top: 2px;
right: 2px;
z-index: 30;
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQxNDk2OTA4OTA2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE1NjgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTIyNy44NCAyMS41MDRjLTQxLjQ3MiA3LjY4LTk3LjI4IDM3Ljg4OC0xMzAuMDQ4IDcwLjY1NkM0Ny42MTYgMTQyLjg0OCAyMC40OCAyMDcuMzYgMjAuNDggMjc2Ljk5MmMwIDc1Ljc3NiAxOC45NDQgMTIzLjM5MiA3Ni4yODggMTkzLjAyNCAzMC4yMDggMzUuODQgMTA1Ljk4NCAxMDguNTQ0IDExNy4yNDggMTEyLjY0IDIuNTYgMC41MTIgNi42NTYtMTQuMzM2IDguNzA0LTMzLjI4IDIuMDQ4LTE4Ljk0NCA3LjY4LTQ4LjEyOCAxMy4zMTItNjQgMTUuODcyLTQ4LjEyOCAxNC4zMzYtNTMuNzYtMjYuNjI0LTkzLjY5NkMxNjQuODY0IDM0Ny42NDggMTQ4LjQ4IDMxNS4zOTIgMTQ4LjQ4IDI3My40MDhjMC05OC44MTYgMTAzLjQyNC0xNjEuMjggMTg1Ljg1Ni0xMTMuMTUyIDExLjc3NiA3LjE2OCA3MS4xNjggNjMuNDg4IDEzMi42MDggMTI0LjkyOCAxMjAuODMyIDEyMS44NTYgMTIwLjMyIDEyMS4zNDQgMTE1LjcxMiAxNzcuMTUyLTEuNTM2IDE5LjQ1Ni03LjY4IDM0LjgxNi0yMC45OTIgNTUuODA4LTIyLjAxNiAzNC4zMDQtMjUuMDg4IDYyLjk3Ni04LjcwNCA4OS42IDEyLjI4OCAyMC40OCAyNS42IDI3LjY0OCA1My4yNDggMjguNjcyIDMyLjc2OCAxLjUzNiA1NC4yNzItMTUuODcyIDc4Ljg0OC02Mi45NzYgMjQuNTc2LTQ2LjU5MiAzMi4yNTYtNzYuOCAzMi4yNTYtMTI2LjQ2NCAwLTUzLjc2LTE1Ljg3Mi0xMDAuODY0LTUyLjIyNC0xNTUuMTM2LTIwLjk5Mi0zMC43Mi0xNjIuODE2LTE3My41NjgtMjEwLjk0NC0yMTEuOTY4QzM4NS41MzYgMjUuMDg4IDMxMC4yNzIgNS42MzIgMjI3Ljg0IDIxLjUwNHoiIGZpbGw9IiMzZTY5ZDciIHAtaWQ9IjE1NjkiPjwvcGF0aD48cGF0aCBkPSJNMzkxLjY4IDM5MS42OGMtMjQuMDY0IDExLjI2NC0zMS4yMzIgMTguNDMyLTUxLjIgNTUuMjk2LTI0LjA2NCA0NC4wMzItMzMuMjggNzguMzM2LTMzLjc5MiAxMjggMCA1NS4yOTYgMTUuMzYgMTAxLjg4OCA1Mi4yMjQgMTU3LjE4NCAyMS41MDQgMzIuMjU2IDE3Ny4xNTIgMTg2Ljg4IDIxOS42NDggMjE5LjEzNiAzOS40MjQgMjkuMTg0IDc4LjMzNiA0Ni4wOCAxMjQuNDE2IDUzLjI0OCAxNTcuMTg0IDI0LjA2NCAzMDAuNTQ0LTk4LjgxNiAzMDAuNTQ0LTI1Ny41MzYgMC03NS43NzYtMTguOTQ0LTEyMy4zOTItNzYuMjg4LTE5My4wMjQtMzAuMjA4LTM1Ljg0LTEwNS45ODQtMTA4LjU0NC0xMTcuMjQ4LTExMi42NC0yLjU2LTAuNTEyLTYuNjU2IDE0LjMzNi04LjcwNCAzMy4yOC0yLjA0OCAxOC45NDQtNy42OCA0OC4xMjgtMTMuMzEyIDY0LTE1Ljg3MiA0OC4xMjgtMTQuMzM2IDUzLjc2IDI2LjYyNCA5My42OTYgNDQuNTQ0IDQ0LjAzMiA2MC45MjggNzYuMjg4IDYwLjkyOCAxMTguMjcyIDAgOTguODE2LTEwMy40MjQgMTYxLjI4LTE4NS44NTYgMTEzLjE1Mi0xMS43NzYtNy4xNjgtNzEuMTY4LTYzLjQ4OC0xMzIuNjA4LTEyNC45MjgtMTIwLjgzMi0xMjEuODU2LTEyMC4zMi0xMjEuMzQ0LTExNS43MTItMTc3LjE1MiAxLjUzNi0xOS40NTYgNy42OC0zNC44MTYgMjAuOTkyLTU1LjgwOCAxNC4zMzYtMjIuMDE2IDE4Ljk0NC0zNC4zMDQgMTguOTQ0LTUxLjIgMC0yMy41NTItMTMuODI0LTUxLjItMjkuMTg0LTU5LjM5Mi0xNy45Mi05LjIxNi00NS4wNTYtMTAuNzUyLTYwLjQxNi0zLjU4NHoiIGZpbGw9IiMzZTY5ZDciIHAtaWQ9IjE1NzAiPjwvcGF0aD48L3N2Zz4=");
}
#write a:hover::before {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQxNDk3MDE4MTgyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjExMDciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTIyNy44NCAyMS41MDRjLTQxLjQ3MiA3LjY4LTk3LjI4IDM3Ljg4OC0xMzAuMDQ4IDcwLjY1NkM0Ny42MTYgMTQyLjg0OCAyMC40OCAyMDcuMzYgMjAuNDggMjc2Ljk5MmMwIDc1Ljc3NiAxOC45NDQgMTIzLjM5MiA3Ni4yODggMTkzLjAyNCAzMC4yMDggMzUuODQgMTA1Ljk4NCAxMDguNTQ0IDExNy4yNDggMTEyLjY0IDIuNTYgMC41MTIgNi42NTYtMTQuMzM2IDguNzA0LTMzLjI4IDIuMDQ4LTE4Ljk0NCA3LjY4LTQ4LjEyOCAxMy4zMTItNjQgMTUuODcyLTQ4LjEyOCAxNC4zMzYtNTMuNzYtMjYuNjI0LTkzLjY5NkMxNjQuODY0IDM0Ny42NDggMTQ4LjQ4IDMxNS4zOTIgMTQ4LjQ4IDI3My40MDhjMC05OC44MTYgMTAzLjQyNC0xNjEuMjggMTg1Ljg1Ni0xMTMuMTUyIDExLjc3NiA3LjE2OCA3MS4xNjggNjMuNDg4IDEzMi42MDggMTI0LjkyOCAxMjAuODMyIDEyMS44NTYgMTIwLjMyIDEyMS4zNDQgMTE1LjcxMiAxNzcuMTUyLTEuNTM2IDE5LjQ1Ni03LjY4IDM0LjgxNi0yMC45OTIgNTUuODA4LTIyLjAxNiAzNC4zMDQtMjUuMDg4IDYyLjk3Ni04LjcwNCA4OS42IDEyLjI4OCAyMC40OCAyNS42IDI3LjY0OCA1My4yNDggMjguNjcyIDMyLjc2OCAxLjUzNiA1NC4yNzItMTUuODcyIDc4Ljg0OC02Mi45NzYgMjQuNTc2LTQ2LjU5MiAzMi4yNTYtNzYuOCAzMi4yNTYtMTI2LjQ2NCAwLTUzLjc2LTE1Ljg3Mi0xMDAuODY0LTUyLjIyNC0xNTUuMTM2LTIwLjk5Mi0zMC43Mi0xNjIuODE2LTE3My41NjgtMjEwLjk0NC0yMTEuOTY4QzM4NS41MzYgMjUuMDg4IDMxMC4yNzIgNS42MzIgMjI3Ljg0IDIxLjUwNHoiIGZpbGw9IiNmNTkxMDIiIHAtaWQ9IjExMDgiPjwvcGF0aD48cGF0aCBkPSJNMzkxLjY4IDM5MS42OGMtMjQuMDY0IDExLjI2NC0zMS4yMzIgMTguNDMyLTUxLjIgNTUuMjk2LTI0LjA2NCA0NC4wMzItMzMuMjggNzguMzM2LTMzLjc5MiAxMjggMCA1NS4yOTYgMTUuMzYgMTAxLjg4OCA1Mi4yMjQgMTU3LjE4NCAyMS41MDQgMzIuMjU2IDE3Ny4xNTIgMTg2Ljg4IDIxOS42NDggMjE5LjEzNiAzOS40MjQgMjkuMTg0IDc4LjMzNiA0Ni4wOCAxMjQuNDE2IDUzLjI0OCAxNTcuMTg0IDI0LjA2NCAzMDAuNTQ0LTk4LjgxNiAzMDAuNTQ0LTI1Ny41MzYgMC03NS43NzYtMTguOTQ0LTEyMy4zOTItNzYuMjg4LTE5My4wMjQtMzAuMjA4LTM1Ljg0LTEwNS45ODQtMTA4LjU0NC0xMTcuMjQ4LTExMi42NC0yLjU2LTAuNTEyLTYuNjU2IDE0LjMzNi04LjcwNCAzMy4yOC0yLjA0OCAxOC45NDQtNy42OCA0OC4xMjgtMTMuMzEyIDY0LTE1Ljg3MiA0OC4xMjgtMTQuMzM2IDUzLjc2IDI2LjYyNCA5My42OTYgNDQuNTQ0IDQ0LjAzMiA2MC45MjggNzYuMjg4IDYwLjkyOCAxMTguMjcyIDAgOTguODE2LTEwMy40MjQgMTYxLjI4LTE4NS44NTYgMTEzLjE1Mi0xMS43NzYtNy4xNjgtNzEuMTY4LTYzLjQ4OC0xMzIuNjA4LTEyNC45MjgtMTIwLjgzMi0xMjEuODU2LTEyMC4zMi0xMjEuMzQ0LTExNS43MTItMTc3LjE1MiAxLjUzNi0xOS40NTYgNy42OC0zNC44MTYgMjAuOTkyLTU1LjgwOCAxNC4zMzYtMjIuMDE2IDE4Ljk0NC0zNC4zMDQgMTguOTQ0LTUxLjIgMC0yMy41NTItMTMuODI0LTUxLjItMjkuMTg0LTU5LjM5Mi0xNy45Mi05LjIxNi00NS4wNTYtMTAuNzUyLTYwLjQxNi0zLjU4NHoiIGZpbGw9IiNmNTkxMDIiIHAtaWQ9IjExMDkiPjwvcGF0aD48L3N2Zz4=");
}
sup a,
a.reversefootnote {
padding-left: 0 !important;
}
sup a::before,
a.reversefootnote::before,
.md-toc-content .md-toc-item > a::before {
display: none;
width: 0 !important;
height: 0 !important;
background-image: none !important;
}
a:hover {
color: var(--color-2);
}
.footnotes,
.footnotes a {
font-size: 14px;
text-decoration: none;
}
.footnotes .md-def-name::before,
.footnotes .md-def-name::after {
color: var(--text-color);
}
.footnotes .md-def-url,
.md-link .md-url {
text-decoration: none;
color: var(--color-1);
}
/*
* ------------------------
* ul, ol
* ------------------------
*/
ul, ol {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
}
#write > p + ul,
#write > p + ol,
blockquote > ul,
blockquote > ol,
.md-alert > ul,
.md-alert > ol{
margin-top: 11px;
}
ul {
padding-left: 36px;
}
ol {
padding-left: 40px;
}
ol ol {
margin-left: -7px;
}
ol > li > ul {
margin-left: -7px;
}
ul > li > ol {
margin-left: -2px;
}
ul > li > p {
margin: 0 0 0 -2px;
}
ol > li > p {
margin: 0 0 0 -6px;
}
ul > .task-list-item > input {
margin-left: -22px;
}
#write li {
margin-top: 6px;
}
li > p {
margin: -5px 0;
}
#write li img,
#write li pre,
#write li figure,
#write li blockquote,
#write li .md-alert {
margin-top: 11px !important;
margin-bottom: 11px !important;
}
#write li pre pre,
#write li .md-image {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/*
* ------------------------
* image
* ------------------------
*/
img,
span.md-image {
margin: 16px auto 0 auto !important;
border-radius: 8px !important;
border: none !important;
color: var(--md-char-color);
}
p.md-focus span.md-image {
background: var(--color-1-0-b);
box-shadow: 0 0 3px var(--border-color);
}
p.md-focus span.md-image {
margin-top: 0;
}
span.md-image,
span.md-image span.md-content,
span.md-image span.md-image-src-span,
span.md-image span.md-image-before-src,
span.md-image span.md-image-after-src,
span.md-image span.md-image-input-src-btn,
span.md-image span.md-image-pick-file-btn,
span.md-image span.md-before::before,
span.md-image span.md-image-input-src-btn::before,
span.md-image span.md-image-pick-file-btn::before {
color: var(--color-1);
}
span.md-image-btn {
background: var(--bg-color2);
}
span.md-image-btn:hover::before {
color: var(--bg-color) !important;
}
span.md-image span.md-image-pick-file-btn {
border-left-color: var(--border-color);
}
.typora-export #write section:has(img),
.md-htmlblock-container section:has(img) {
display: grid;
grid-gap: 16px;
justify-content: flex-start;
align-items: center;
grid-template-columns: repeat(auto-fit, minmax(16px, auto));
grid-auto-rows: minmax(16px, auto);
}
.typora-export #write > section:has(img) {
margin-top: 16px;
}
.typora-export #write section img,
.md-htmlblock-container section img {
margin: 0 !important;
}
.typora-export #write section:has(img) span,
.md-htmlblock-container section:has(img) span {
display: block;
margin: 8px 0;
}
.typora-export #write section span > img,
.md-htmlblock-container section span > img {
margin: 8px 0 !important;
}
.typora-export #write section span > img:first-of-type,
.md-htmlblock-container section span > img:first-of-type {
margin-top: 0 !important;
}
.typora-export #write section span > img:last-of-type,
.md-htmlblock-container section span > img:last-of-type {
margin-bottom: 0 !important;
}
.typora-export #write > section:has(img):hover,
.md-htmlblock-container > section:has(img):hover{
border-radius: 8px;
background: var(--bg-color2);
padding: 16px;
transition: padding .3s linear;
-webkit-transition: padding .3s linear;
}
/*
* ------------------------
* code
* ------------------------
*/
code {
border-radius: 4px;
background: var(--color-1-0-a);
padding: 3px 5px;
color: var(--text-code);
font-size: 14px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
h1 code {
font-size: 26px;
}
h2 code {
font-size: 22px;
}
h3 code {
font-size: 18px;
}
h4 code {
font-size: 16px;
}
.outline-content .outline-item code {
font-size: 11px;
padding: 2px 4px;
border-radius: 3px;
vertical-align: middle;
}
/*
* ------------------------
* pre
* ------------------------
*/
pre {
margin-top: 16px;
margin-bottom: 0;
box-sizing: border-box;
background: var(--bg-color2) !important;
border-radius: 8px;
font-size: 14px !important;
color: var(--text-code);
}
pre pre {
background: transparent !important;
padding: 5px 10px;
border: none;
}
pre .CodeMirror-wrap {
padding: 16px 16px 16px 0;
}
pre .CodeMirror-wrap .CodeMirror-scroll {
overflow-x: auto;
}
pre .CodeMirror-sizer {
padding-left: 4px;
}
pre .CodeMirror-gutters {
background: var(--bg-color2);
border-color: var(--border-color);
}
/*
* ------------------------
* blockquote
* ------------------------
*/
blockquote,
.md-alert {
margin-top: 16px !important;
margin-bottom: 0;
padding: 16px;
background: var(--color-1-0-b);
box-sizing: border-box;
border-radius: 8px;
border-left: 4px solid var(--color-1);
border-right: 0.1px solid transparent;
border-bottom: 0.1px solid transparent;
border-top: 0.1px solid transparent;
}
blockquote > *:first-child,
.md-alert > *:first-child {
margin-top: 0 !important;
}
blockquote > *:last-child,
.md-alert > *:last-child {
margin-bottom: 0 !important;
}
.md-alert.md-alert-note {
border-left-color: var(--color-1);
background: var(--color-1-0-b);
color: var(--color-1);
}
.md-alert.md-alert-note .md-alert-text-note {
color: var(--color-1);
}
.md-alert.md-alert-caution {
border-left-color: var(--color-2);
background: var(--color-2-0-b);
color: var(--color-2);
}
.md-alert.md-alert-caution .md-alert-text-caution {
color: var(--color-2);
}
.md-alert.md-alert-tip {
border-left-color: var(--color-3);
background: var(--color-3-0-b);
color: var(--color-3);
}
.md-alert.md-alert-tip .md-alert-text-tip {
color: var(--color-3);
}
.md-alert.md-alert-important {
border-left-color: var(--color-4);
background: var(--color-4-0-b);
color: var(--color-4);
}
.md-alert.md-alert-important .md-alert-text-important {
color: var(--color-4);
}
.md-alert.md-alert-warning {
border-left-color: var(--color-5);
background: var(--color-5-0-b);
color: var(--color-5);
}
.md-alert.md-alert-warning .md-alert-text-warning {
color: var(--color-5);
}
/*
* ------------------------
* sup, sub, kbd
* ------------------------
*/
sup, sub {
font-size: 12px;
}
sup.md-footnote {
background: transparent;
padding: 0 2px;
color: var(--color-1);
}
sup.md-footnote:hover {
color: var(--color-2);
cursor: pointer;
}
kbd {
display: inline-block;
border: none;
border-image: none;
border-radius: 5px;
background: var(--color-2);
padding: 0 6px;
box-shadow: none;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
font-size: 14px;
font-weight: 900;
color: rgb(250, 250, 250);
}
::selection {
background: var(--color-2-0-c);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/*
* ------------------------
* table
* ------------------------
*/
table,
figure {
width: 100%;
margin-bottom: 0;
border-radius: 8px;
padding: 0 !important;
border-collapse: separate;
border-spacing: 0;
}
figure {
margin-top: 16px !important;
}
table {
margin-top: 0;
border: 1px solid var(--border-color) !important;
overflow: hidden;
}
table thead tr th {
background: var(--bg-color2);
}
table tbody tr:nth-child(even) td {
background: var(--bg-color2);
}
table tbody tr:nth-child(odd) td {
background: var(--bg-color);
}
table tr th, table tr td {
padding: 10px !important;
white-space: pre-wrap !important;
}
table tr td,
table thead tr th {
border-left: 1px solid var(--border-color) !important;
}
table tbody tr td:first-of-type,
table thead tr th:first-of-type {
border-left: none !important;
}
.md-grid-board-wrap table {
border: none !important;
border-radius: 0;
}
.md-grid-board-wrap table tr th,
.md-grid-board-wrap table tr td {
padding: 0 !important;
}
#md-grid-width,
#md-grid-height {
text-align: center !important;
padding: 1px 0;
}
button#md-resize-grid {
display: block !important;
width: 100%;
margin: 5px auto 0;
color: var(--bg-color);
}
button#md-resize-grid:hover {
color: var(--color-1);
border-color: var(--color-1);
}
.ty-table-edit {
margin-left: 0;
}
.md-tooltip-remove {
position: absolute;
z-index: 200;
margin-top: -28px !important;
background: var(--bg-color);
}
.md-tooltip-remove .md-delete-table {
margin-right: 10px !important;
}
.md-table-resize-popover .md-reset > a::before {
display: none !important;
}
/*
* ------------------------
* btn
* ------------------------
*/
.btn,
.btn-default,
.long-btn {
border-radius: 5px !important;
border: 1px solid var(--border-color) !important;
background: var(--bg-color2) !important;
outline: none !important;
}
.btn-primary {
background: var(--color-1) !important;
border-color: var(--color-1) !important;
color: #fff;
}
.btn:hover,
.long-btn:hover {
background: var(--color-1-0-b) !important;
border-color: var(--color-1) !important;
color: var(--color-1);
}
.btn:focus,
.long-btn:focus {
outline: none !important;
}
.btn {
margin-right: 5px !important;
}
.btn:last-of-type {
margin-right: 0;
}
.dropdown-toggle::after {
font-size: 14px;
}
.dropdown-toggle:hover::after {
color: var(--color-1);
}
/*
* ------------------------
* select
* ------------------------
*/
select {
border-radius: 6px !important;
border: 1px solid var(--border-color) !important;
padding: 6px !important;
}
option {
background: var(--bg-color);
}
/*
* ------------------------
* textarea
* ------------------------
*/
textarea {
outline: none;
padding: 16px;
border-radius: 8px;
border-color: var(--border-color);
background: var(--bg-color) !important;
color: var(--text-color) !important;
}
#write textarea {
margin-top: 14px !important;
margin-bottom: 0;
}
/*
* ------------------------
* input
* ------------------------
*/
html input,
input {
position: relative;
border-radius: 5px !important;
border: 1px solid var(--border-color);
outline: none !important;
padding: 0 6px;
line-height: 1.2;
}
html input:focus,
html textarea:focus,
html input[type="number"]:focus,
html input[type="search"]:focus,
html input[type="text"]:focus {
border-color: var(--color-1) !important;
box-shadow: none !important;
outline: none !important;
}
input::placeholder {
font-size: 14px;
color: var(--text-grey) !important;
}
/*input checkbox*/
input[type="checkbox"],
input[type="radio"] {
margin-right: 10px !important;
margin-bottom: -2px !important;
width: 14px !important;
height: 14px !important;
box-sizing: border-box;
background: transparent !important;
border: 1px solid var(--border-color) !important;
border-radius: 3px !important;
padding: 0 !important;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
list-style: none;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background: var(--color-1) !important;
border-color: transparent !important;
}
input[type="checkbox"]:checked::after {
content: "";
display: block;
position: absolute;
bottom: 2.5px;
left: 3.5px;
width: 5px;
height: 9px;
box-sizing: border-box;
background: transparent;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
}
input[type="radio"] {
border-radius: 50% !important;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border: 1px solid var(--border-color) !important;
}
input[type="radio"]:checked::after {
content: "";
display: block;
margin: 3.5px auto;
width: 5px;
height: 5px;
box-sizing: border-box;
background: #fff;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
/*
* ------------------------
* header
* ------------------------
*/
body > header {
background: var(--bg-color) !important;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
/*
* ------------------------
* md-htmlblock
* md-mathblock
* ------------------------
*/
.md-htmlblock-panel,
.md-htmlblock-container,
.md-htmlblock-container .md-htmlblock-panel-placeholder {
background: transparent;
}
.md-htmlblock-container,
.md-math-container {
border-radius: 8px;
background: var(--bg-color);
overflow: auto;
}
.md-math-container {
width: 100%;
padding: 16px;
}
.md-rawblock-on-edit .md-htmlblock-panel,
.md-rawblock-on-edit .md-mathblock-panel {
border-radius: 8px;
background: var(--bg-color2);
padding: 16px;
}
.md-mathblock-panel .md-rawblock-control {
background: transparent;
}
.md-mathblock-panel .code-tooltip {
margin: 14px 6px 0;
box-shadow: none;
border-top: 1px solid var(--border-color);
border-radius: 0;
}
.code-tooltip {
box-shadow: none;
}
.code-tooltip .ty-input {
border-color: var(--border-color);
}
.md-rawblock-on-edit .md-rawblock-input {
padding: 0;
background: transparent;
}
.md-rawblock .md-rawblock-tooltip {
float: right;
margin-top: -11px;
height: auto;
border-radius: 5px;
background: var(--bg-color2);
animation: none !important;
}
.md-rawblock .md-rawblock-tooltip span {
padding-top: 4px;
padding-bottom: 4px;
}
.md-rawblock .md-rawblock-tooltip-edit-btn:hover {
background: transparent;
}
.md-htmlblock:hover .md-htmlblock-container,
.md-htmlblock:hover .md-rawblock-tooltip,
.md-math-block:hover .md-math-container,
.md-math-block:hover .md-rawblock-tooltip,
.md-rawblock-on-edit:hover .md-rawblock-tooltip {
background: var(--bg-color2);
}
.md-inline-math script {
color: #f9007c;
}
/*
* ------------------------
* #write
* ------------------------
*/
#write {
margin: 0 auto;
width: 100%;
max-width: 1424px;
min-width: 300px;
padding: 32px 112px;
overflow: auto;
/* scroll-behavior: smooth;
scroll-padding: 16px;*/
}
#write > *:first-child {
margin-top: 0;
}
span.md-comment {
color: var(--md-char-color);
opacity: 1;
}
.md-image-btn.selected, .md-image-btn:hover {
background: var(--color-1);
}
#write pre.md-meta-block:empty:before {
color: var(--text-code);
}
/*
* ------------------------
* typora-source
* ------------------------
*/
#typora-source .CodeMirror-sizer {
padding-right: 0 !important;
}
#typora-source .CodeMirror-lines {
margin: 0 auto;
max-width: 1424px;
min-width: 300px;
padding: 32px 112px;
}
#typora-source .CodeMirror-lines pre {
border: none !important;
background: var(--bg-color) !important;
padding: 8px 16px !important;
font-size: 16px !important;
}
#typora-source .CodeMirror-activeline pre {
background: var(--bg-color2) !important;
border-radius: 6px;
}
#typora-source .CodeMirror-activeline .CodeMirror-linebackground {
background: transparent !important;
}
#typora-source .CodeMirror-lines .cm-header {
color: var(--color-2);
}
.CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
border-left: 3px solid var(--color-2);
}
.CodeMirror div.CodeMirror-cursor {
border-color: var(--text-color);
}
.cm-s-typora-default .cm-header, .cm-s-typora-default .cm-property,
.cm-s-typora-default .cm-link {
color: var(--color-2);
}
.cm-s-inner .cm-comment, .cm-s-inner.cm-comment, .cm-overlay {
color: var(--md-char-color);
}
.cm-s-typora-default .cm-string {
color: var(--color-1);
}
.cm-s-typora-default .cm-code, .cm-s-typora-default .cm-comment {
color: var(--text-code);
}
.cm-s-typora-default .cm-tag {
color: #e31570;
}
.cm-attribute {
color: var(--color-2);
}
/*
* ------------------------
* #toc-dropmenu
* ------------------------
*/
#toc-dropmenu {
top: calc(var(--title-bar-height) + 8px) !important;
right: 18px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
#toc-dropmenu #pin-outline-btn {
display: inline-block;
top: 10px;
}
#toc-dropmenu .divider {
margin-bottom: 0;
}
/*
* ------------------------
* sidebar
* toc-content
* ------------------------
*/
.os-windows #sidebar-content {
margin-top: -1px;
border-top: 1px solid var(--border-color);
}
.os-windows .ty-show-outline-filter #sidebar-content .sidebar-content-content {
margin-top: -4px;
}
.os-windows .ty-show-search #sidebar-content .sidebar-content-content {
margin-top: -7px;
}
.sidebar-tabs {
padding: 0 2px;
}
.outline-content {
overflow: auto !important;
padding: 14px 14px 14px 17px;
font-size: 14px !important;
}
.os-windows .outline-content {
padding-top: 15px;
}
.outline-content li {
position: relative;
z-index: 30;
}
.outline-content > li:first-of-type::before {
top: 0;
}
.outline-content li ul {
position: relative;
z-index: 48;
margin-left: 18px;
margin-top: 0 !important;
}
.no-collapse-outline .outline-content li ul {
margin-left: 21px;
}
.outline-content li .outline-item {
position: relative;
z-index: 50;
margin: 0 0 3px 7px;
width: calc(100% - 4px);
border-radius: 5px;
border: none;
line-height: 1;
padding: 0 0 0 4px;
}
.outline-item > .outline-expander {
display: block;
float: left;
width: auto;
height: 0;
background: transparent;
padding-left: 0;
}
.outline-item > .outline-expander:before {
margin-top: 10px;
margin-left: -2px;
background: transparent;
padding: 0 4px 0 2px;
font-size: 10px;
}
.outline-content li .outline-label {
display: inline-block;
border-radius: 4px;
padding: 7px 7px 7px 8px;
font-size: 14px !important;
line-height: 1.2;
overflow-wrap: normal;
word-wrap: normal;
word-break: keep-all;
white-space: nowrap;
text-decoration: none;
}
.outline-item-single .outline-label,
.outline-item-single.outline-item-open .outline-label,
.no-collapse-outline .outline-content li .outline-label {
padding-left: 0 !important;
}
.outline-item > .outline-expander:hover + .outline-label,
.outline-item-open > .outline-item > .outline-label {
padding-left: 11px;
}
.no-collapse-outline .outline-item-open > .outline-item > .outline-label {
padding-left: 0 !important;
}
.outline-item-active > .outline-expander:hover + .outline-label,
.outline-item-open > .outline-item-active > .outline-label {
padding-left: 12px;
}
.outline-item-active > .outline-expander,
.outline-item-active > .outline-label {
font-weight: 900;
}
.outline-content li .outline-item::before {
content: '';
position: absolute;
z-index: 38;
left: -10px;
top: -27.5px;
width: 10px;
height: calc(50% + 28px);
background: transparent;
border-left: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.os-windows .outline-content li .outline-item::before {
top: -28.5px;
}
.outline-content > li:first-of-type > .outline-item::before {
top: calc(50% - 1px);
height: calc(50% + 15px);
border-left: 1px solid var(--border-color);
border-top: 1px solid var(--border-color);
border-bottom: none;
border-top-left-radius: 3px;
border-bottom-left-radius: 0;
}
.outline-children > li:first-child > .outline-item::before,
.outline-content > li:nth-child(2) > .outline-item::before {
top: -11px;
height: calc(50% + 12px);
}
.os-windows .outline-children > li:first-child > .outline-item::before,
.os-windows .outline-content > li:nth-child(2) > .outline-item::before {
top: -13px;
height: calc(50% + 13px);
}
.no-collapse-outline .outline-children > li:first-child > .outline-item::before,
.no-collapse-outline .outline-content > li:nth-child(2) > .outline-item::before {
top: -8px;
height: calc(50% + 8px);
}
.outline-content > li:last-child > .outline-item::before,
.outline-children > li:last-child > .outline-item::before {
border-bottom-left-radius: 3px;
}
.no-collapse-outline .outline-item-wrapper > .outline-children::before,
.outline-item-open > .outline-children::before {
content: '';
position: absolute;
left: -21px;
top: -26px;
width: 1px;
height: calc(100% + 12px);
background: transparent;
border-left: 1px solid var(--border-color);
}
.no-collapse-outline .outline-item-wrapper > .outline-children::before {
left: -24px;
}
.no-collapse-outline .outline-content > li.outline-item-wrapper:first-child > .outline-children::before,
.outline-content > li.outline-item-open:first-child > .outline-children::before {
top: -15px;
}
.outline-content > li:only-of-type > .outline-item::before,
.no-collapse-outline .outline-item-wrapper:last-of-type > .outline-children::before,
.no-collapse-outline .outline-children > li.outline-item-wrapper:last-child > .outline-children::before,
.outline-item-open:last-of-type > .outline-children::before,
.outline-children > li.outline-item-open:last-child > .outline-children::before {
display: none;
}
.outline-content > li:only-of-type {
margin-left: -8px;
}
li > .outline-item-active:before,
.outline-item:hover::before,
.outline-item-active > .outline-item::before {
width: 7px !important;
}
li > .outline-item-active,
li > .outline-item:hover,
.outline-item-active > .outline-item {
margin-left: 4px !important;
padding-left: 7px !important;
}
li > .outline-item-active::before,
li > .outline-item:hover::before,
.outline-item-active > .outline-item::before {
left: -7px !important;
}
.outline-item:hover,
.outline-item:hover > .outline-label,
.outline-item-active,
.outline-item-active > .outline-label {
background: var(--bg-color2) !important;
}
.outline-item-active > .outline-label,
.outline-item-active > .outline-expander::before {
color: var(--color-1);
}
.ty-on-outline-filter .outline-content .outline-item::before,
.ty-on-outline-filter .outline-content .outline-item::after {
display: none;
}
.ty-on-outline-filter .outline-content > li > ul,
.ty-on-outline-filter .outline-content .outline-item {
margin-left: 0;
}
/* .oultine-item search result */
.outline-content:has(.ty-outline-hit) {
padding-left: 14px;
}
.outline-content li:has(.ty-outline-hit) *::before,
.outline-content li:has(.ty-outline-hit) *::after {
content: '';
display: none;
}
.outline-content li:has(.ty-outline-hit) .outline-item {
margin-left: 1px !important;
width: calc(100% - 1px);
padding-left: 0 !important;
}
.outline-content li:has(.ty-outline-hit) .outline-item > .outline-label {
padding: 8px 10px !important;
}
/*
* --------------------------
* file-library-list
* file-library-search-result
* --------------------------
*/
#file-library-list,
#file-library-search-result {
padding: 14px;
}
/*ty-search-item*/
#file-library-list .file-list-item,
#file-library-search-result .ty-search-item {
margin-bottom: 8px;
border: 1px solid transparent;
border-bottom-color: var(--border-color);
}
#file-library-list .file-list-item {
padding-left: 14px;
padding-right: 14px;
}
#file-library-list .file-list-item.active,
#file-library-search-result .ty-search-item.active {
border-radius: 5px;
border: 1px solid var(--color-1);
}
#file-library-list .file-list-item.active {
padding: 6px 12px;
}
#file-library-search-result .ty-search-item.active {
padding: 6px 12px 6px 0;
}
#file-library-list .file-list-item:first-of-type.active,
#file-library-search-result .ty-search-item:first-of-type.active {
margin-top: 0;
}
#file-library-list .file-list-item:hover,
#file-library-search-result .ty-search-item:hover {
border-radius: 5px;
background: var(--bg-color2);
border-color: var(--border-color);
}
#file-library-list .file-list-item:hover {
color: var(--color-1);
}
#file-library-list .file-list-item:hover + .file-list-item:not(.active),
#file-library-list .file-list-item.active + .file-list-item:not(.active),
#file-library-search-result .ty-search-item:hover + .ty-search-item:not(.active),
#file-library-search-result .ty-search-item.active + .ty-search-item:not(.active) {
border-top: 1px solid var(--border-color);
}
#file-library-list .file-list-item.active:hover,
#file-library-search-result .ty-search-item.active:hover {
border-color: var(--color-1);
}
#file-library-search-result .ty-search-item.active {
color: var(--text-color);
}
#file-library-search-result .ty-search-item.active .ty-search-item-line {
white-space: pre-wrap;
word-break: break-word;
}
.file-list-item-time {
margin-right: 0;
padding-right: 0;
}
.file-list-item-count {
margin-right: 0;
border-radius: 3px;
padding: 0 6px;
}
#file-library-search-result .ty-search-item.active .file-list-item-count {
padding-right: 0;
}
#sidebar-loading-template {
display: none;
margin-bottom: 5px;
border-radius: 5px;
padding: 8px;
}
.ty-file-search-match-text {
background-color: var(--color-2-0-c);
}
/*
* ------------------------
* file-library-tree
* ------------------------
*/
#file-library-tree {
box-sizing: border-box;
padding-top: 8px;
padding-left: 14px;
padding-right: 14px;
}
.file-node-root {
position: relative;
margin-left: 0 !important;
padding-left: 0 !important;
}
.file-tree-node {
margin-bottom: 1px;
}
.file-node-children {
margin-left: 12px;
}
.file-node-root > .file-node-children {
margin-left: -2px;
}
.file-tree-node > .file-node-content > .file-node-open-state + .file-node-icon {
margin-left: 4px;
}
.file-node-expanded > .file-node-content > .file-node-open-state + .file-node-icon,
.file-node-collapsed > .file-node-content > .file-node-open-state + .file-node-icon {
margin-left: 3px;
}
.fa-folder:before,
.fa-folder:after,
.fa-caret-right,
.fa-caret-down {
color: var(--text-grey);
}
.file-node-content .file-node-open-state {
position: relative;
padding-left: 3px;
}
.file-node-expanded .file-node-content .file-node-open-state {
padding-left: 3px;
}
.file-node-content .file-node-open-state::after {
content: "";
position: absolute;
z-index: 20;
left: 0;
top: -21px;
width: 8px;
height: 32px;
border-left: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
background: transparent;
}
.file-node-expanded > .file-node-content .file-node-open-state::after {
left: -12px;
top: -21px;
width: 7px;
}
.file-node-root > .file-node-content .file-node-open-state::after {
display: none;
}
.file-tree-node:first-child > .file-node-content .file-node-open-state::after {
top: -11px;
height: 22px;
}
.file-node-expanded:first-child > .file-node-content .file-node-open-state::after {
top: -11px;
}
.file-tree-node:last-child > .file-node-content .file-node-open-state::after {
border-bottom-left-radius: 3px;
}
.file-node-collapsed > .file-node-content .fa-caret-right {
margin-left: 9px;
}
.file-node-expanded {
margin-left: 8px;
border-left: 1px solid var(--border-color);
}
.file-tree-node:last-child {
border-left-color: transparent;
}
.file-node-expanded > .file-node-content {
margin-left: 3px;
}
.file-node-root > .file-node-content {
margin-left: 0;
}
.file-node-content {
position: relative;
padding-top: 3px;
}
.file-node-content::after {
content: '';
display: none;
position: absolute;
z-index: -1;
left: 6px;
top: 0;
width: calc(100% - 10px);
height: 29px;
background: var(--bg-color2);
border-radius: 5px;
}
.file-library-file-node:hover > .file-node-content::after,
.file-tree-node.active > .file-node-content::after {
display: block;
}
.file-library-file-node:hover > .file-node-content > .file-node-open-state:after,
.file-tree-node.active > .file-node-content > .file-node-open-state:after {
width: 6px;
}
.file-node-background {
display: none !important;
}
.file-library-node:not(.file-node-root):focus > .file-node-content {
outline: none;
}
/*
* ------------------------
* TOC md-toc
* ------------------------
*/
.md-toc {
margin: 16px 0 0 0;
font-size: 14px;
}
.md-toc-content {
position: relative;
margin: 0 0 0 3px;
padding: 0;
}
.md-toc-content:before {
content: '';
position: absolute;
left: 0;
top: 12px;
width: 1px;
height: calc(100% - 30px);
border-left: 1px solid var(--border-color);
}
.md-toc:focus .md-toc-content {
margin: 0 !important;
border: none !important;
}
.md-toc-content .md-toc-item {
position: relative;
padding-bottom: 8px;
}
.md-toc-content .md-toc-item:before {
content: '';
position: absolute;
top: 8px;
left: -2px;
width: 5px;
height: 5px;
background: var(--border-color);
border-radius: 50%;
}
.md-toc-content .md-toc-h1::before {
background: var(--color-1);
}
.md-toc-item a.md-toc-inner:hover {
text-decoration: none;
}
.md-toc-item:has(a.md-toc-inner:hover)::before {
background: var(--color-2);
}
.md-toc-item a.md-toc-inner:hover code {
background: var(--color-2-0-a);
color: var(--color-2);
}
.md-toc-item a {
padding-left: 18px !important;
}
#write div.md-toc-tooltip {
z-index: 100;
top: -52px;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 3px 0;
}
.md-toc-content .md-toc-h1 a {
padding-left: 20px;
}
#write div.md-toc-tooltip .md-delete-toc {
margin: 0 !important;
padding: 0 10px;
background: var(--bg-color);
}
#write div.md-toc-tooltip .md-delete-toc:hover {
background: var(--bg-color2);
color: var(--color-1);
}
/*
* ------------------------
* code colors
* ------------------------
*/
.cm-s-inner {
background-color: transparent !important;
color: var(--text-code);
}
.cm-s-inner .CodeMirror-gutters {
border-right-color: var(--border-color);
color: var(--text-code);
}
.cm-s-inner .CodeMirror-guttermarker,
.cm-s-inner .CodeMirror-guttermarker-subtle,
.cm-s-inner .CodeMirror-linenumber {
color: var(--md-char-color);
}
.cm-s-inner .CodeMirror-cursor {
border-left: 1px solid var(--border-color);
}
.cm-s-inner div.CodeMirror-selected,
.cm-s-inner.CodeMirror-focused div.CodeMirror-selected,
.cm-s-inner .CodeMirror-line::selection,
.cm-s-inner .CodeMirror-line > span::selection,
.cm-s-inner .CodeMirror-line > span > span::selection,
.cm-s-inner .CodeMirror-line::-moz-selection,
.cm-s-inner .CodeMirror-line > span::-moz-selection,
.cm-s-inner .CodeMirror-line > span > span::-moz-selection {
background: var(--color-2-0-c);
}
.cm-s-inner .CodeMirror-activeline-background { background: transparent; }
.cm-s-inner .cm-keyword { color: #bb59fd; }
.cm-s-inner .cm-operator { color: #40d7ec; }
.cm-s-inner .cm-variable { color: #f4395dff; }
.cm-s-inner .cm-variable-2 { color: #e2785f; }
.cm-s-inner .cm-variable-3 { color: #6083ff; }
.cm-s-inner .cm-builtin { color: #f61d78; }
.cm-s-inner .cm-atom { color: #fa5336; }
.cm-s-inner .cm-number { color: #f59102; }
.cm-s-inner .cm-def { color: #3876eb; }
.cm-s-inner .cm-string { color: #02be74; }
.cm-s-inner .cm-string-2 { color: #0a790a; }
.cm-s-inner .cm-comment,
.cm-s-inner .cm-meta { color: var(--md-char-color); }
.cm-s-inner .cm-attribute { color: #c08b01; }
.cm-s-inner .cm-property { color: #1b9f72; }
.cm-s-inner .cm-qualifier { color: #dc7b45; }
.cm-s-inner .cm-tag { color: #e32e73; }
.cm-s-inner .cm-tag.cm-bracket {color: #0c9bd3;}
.cm-s-inner .cm-header, .cm-s-inner.cm-header {color: #41cce9;}
.cm-s-inner .CodeMirror-matchingbracket {
text-decoration: underline;
color: var(--text-code) !important;
}
/* apply to code fences with plan text*/
.md-fences {
background-color: var(--bg-color2);
color: var(--text-grey);
}
.md-fences .code-tooltip {
z-index: 50;
right: 0 !important;
bottom: -28px !important;
padding: 0;
border-radius: 5px;
background-color: var(--bg-color2);
color: var(--text-color);
}
.md-fences .code-tooltip input,
.md-fences .code-tooltip span {
margin: 0;
padding: 3px;
border-radius: 5px;
}
/**
* --------------------------------------
* unibody-window
* Control UI on Windows/Linux (optional)
* --------------------------------------
*/
.unibody-window #write ul,
.typora-export #write ul {
padding-left: 34px;
}
.unibody-window #write ol,
.typora-export #write ol {
padding-left: 36px;
}
.unibody-window #write ul ul,
.unibody-window #write ol ol,
.unibody-window #write ul > li > ol,
.unibody-window #write ol > li > ul,
.typora-export #write ul ul,
.typora-export #write ol ol,
.typora-export #write ul > li > ol,
.typora-export #write ol > li > ul {
margin-left: 0;
}
.unibody-window #write ul > li > p {
margin: 0;
}
.unibody-window #write ol > li > p,
.typora-export #write ol > li > p {
margin: 0 0 0 -2px;
}
.unibody-window #write ul > .task-list-item > input,
.typora-export #write ul > .task-list-item > input {
margin-left: -22px;
}
.unibody-window .long-btn {
border-radius: 8px !important;
}
/* .dropdown-menu */
.dropdown-menu {
margin-top: 4px;
padding: 8px !important;
border-radius: 8px !important;
border: 1px solid var(--border-color);
}
#recent-file-panel-search-input,
.megamenu-menu-panel .btn,
.dropdown-menu li a,
.dropdown-menu li:hover {
border-radius: 5px !important;
}
.ty-spell-check-panel-item {
margin-bottom: 4px;
border-radius: 5px;
}
.btn-split-group .dropdown-menu {
margin-top: 0;
}
.dropdown-menu li a {
font-size: 14px;
}
.dropdown-menu table th,
.dropdown-menu table td {
padding: 5px !important;
}
.dropdown-menu li:hover > a,
.dropdown-menu li > span > a:hover,
#sidebar-files-menu li:hover > a,
#close-sidebar-menu-btn:hover {
background: var(--bg-color2) !important;
color: var(--color-1) !important;
}
.dropdown-menu li > span > a:hover {
background: var(--color-1-0-b) !important;
box-shadow: inset 0 0 0 1px var(--color-1), inset 0 -1px 0 var(--color-1);
}
.dropdown-menu li.file-action-item,
.dropdown-menu li.file-sort-item,
.dropdown-menu li.file-sort-item + li {
margin-top: 0;
border-radius: 0 !important;
}
/* .toolbar-icon */
.unibody-window .long-btn:hover span,
.unibody-window .long-btn:hover i,
.megamenu-menu-panel .btn:hover,
#megamenu-menu-header-title:hover,
.toolbar-icon:hover,
#megamenu-back-btn:hover i {
color: var(--color-1);
text-decoration: none;
}
.unibody-window .long-btn:hover,
.megamenu-menu-panel .btn:hover,
#megamenu-back-btn:hover {
border-color: var(--color-1);
background: var(--bg-color2);
}
#w-titlebar-left {
margin-top: 3px;
}
#w-traffic-lights span {
background: transparent !important;
border-radius: 0 !important;
border: none !important;
}
#w-traffic-lights .btn {
margin: 0 !important;
}
#w-traffic-lights #w-min,
#w-traffic-lights #w-close,
#w-traffic-lights #w-max {
padding-top: 8px;
padding-left: 18px;
}
#w-traffic-lights #w-close {
border-top-right-radius: 8px !important;
}
#w-max-group.w-show-more > #w-full,
#w-max-group.w-show-more > #w-pin {
display: block !important;
background: var(--bg-color2) !important;
}
#w-max-group *,
#w-max-group.w-show-more > #w-full *,
#w-max-group.w-show-more > #w-pin * {
color: var(--text-color) !important;
}
#w-max-group.w-show-more > #w-pin {
border-bottom-left-radius: 5px !important;
border-bottom-right-radius: 5px !important;
}
#w-traffic-lights > span:not(#w-close):hover {
background: var(--bg-color2) !important;
color: var(--text-color);
}
#w-traffic-lights #w-close:hover {
background: var(--color-5) !important;
color: white !important;
}
#w-max-group.w-show-more > #w-full:hover *,
#w-max-group.w-show-more > #w-pin:hover * {
color: var(--color-1) !important;
}
/* #megamenu-content, #megamenu-menu-sidebar */
.unibody-window #megamenu-menu-sidebar {
--bg-color: #1b1b1f;
--bg-color2: rgb(40, 42, 50);
--border-color: rgb(60, 62, 70);
background: var(--bg-color);
border-right: 1px solid var(--border-color);
overflow: hidden;
}
#megamenu-menu-sidebar .megamenu-menu-list {
border: none;
}
.megamenu-section {
margin-top: 12px;
}
.megamenu-menu-panel h1 {
margin-top: 32px;
margin-bottom: 32px;
font-size: 30px;
line-height: 30px;
}
#megamenu-section-about h1 {
text-align: center;
}
.megamenu-menu-panel h2 {
font-size: 26px;
line-height: 26px;
}
.megamenu-menu-panel .btn {
padding: 6px 12px;
}
.megamenu-menu-panel .long-btn {
padding: 10px 12px;
text-align: center;
}
.megamenu-content {
padding-right: 30px;
padding-top: 26px;
background: var(--bg-color);
}
.megamenu-menu-panel #recent-file-panel .dropdown-menu {
margin-top: 4px;
}
#open-theme-folder-btn {
margin-top: 32px;
}
.megamenu-menu-header {
border-color: var(--border-color);
}
.megamenu-menu-header #megamenu-back-btn {
margin-left: 10px;
border-radius: 6px;
border-width: 2px;
}
.megamenu-menu-header #megamenu-back-btn > i {
display: block;
font-size: 16px;
line-height: 28px;
}
.megamenu-menu-header #megamenu-menu-header-title:hover {
color: var(--color-1);
}
#megamenu-menu-list {
padding: 0 8px;
}
.megamenu-menu-list li {
margin-top: 6px;
}
.megamenu-menu-list li a {
display: block;
border-radius: 5px;
border: 1px solid transparent;
font-size: 16px;
line-height: 34px;
}
.megamenu-menu-list li a .fa {
display: inline-block;
margin-left: 0;
margin-right: 0;
opacity: 1;
font-size: 18px;
line-height: 38px;
}
.megamenu-menu-list li a .fa + span {
margin-left: 14px;
}
.megamenu-menu-list li #m-saved .fa {
font-size: 20px;
line-height: 36px !important;
color: var(--color-1);
}
.megamenu-menu-list li a:hover,
.megamenu-menu-list li a.active:hover {
background: var(--bg-color2) !important;
border: 1px solid var(--color-1);
color: var(--color-1) !important;
}
.megamenu-menu-list li a.active {
background: var(--bg-color2);
color: var(--color-1) !important;
}
@media (max-width: 768px) {
#megamenu-back-btn {
margin-left: 0 !important;
}
.dropdown-menu {
padding: 8px !important;
}
}
#recent-file-panel-action-btn-container {
margin-right: 0;
}
#recent-file-panel-search-input {
width: calc(100% - 55px);
}
#megamenu-clear-recet-documents {
background: var(--bg-color2);
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
}
#megamenu-clear-recet-documents:hover {
color: var(--color-1);
}
.ty-show-search #info-panel-tab-search .info-panel-tab-border,
.ty-show-search #info-panel-tab-search .info-panel-tab-border,
.active-tab-files #info-panel-tab-file .info-panel-tab-border,
.active-tab-outline #info-panel-tab-outline .info-panel-tab-border {
height: 3px;
border-radius: 2px;
}
.megamenu-menu-panel {
scrollbar-width: none !important;
}
#theme-preview-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
justify-content: space-between;
grid-gap: 32px;
max-width: 100%;
}
@media (max-width: 1440px) {
#theme-preview-grid {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
@media (max-width: 1200px) {
#theme-preview-grid {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 992px) {
#theme-preview-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
#theme-preview-grid {
grid-template-columns: 1fr;
}
}
.theme-preview-div {
margin: 0;
box-sizing: border-box;
overflow: hidden;
padding: 5px;
border: 3px solid var(--border-color);
border-radius: 10px;
color: var(--color-1);
}
.theme-preview-content {
width: 100%;
height: 100%;
border-radius: 6px;
}
.theme-preview-div:hover {
border-color: var(--color-2);
}
.theme-preview-div.active {
border-color: var(--color-1);
}
.theme-preview-div .fa,
#outline-btn:hover {
color: var(--color-1) !important;
}
/* context menu */
.context-menu {
padding: 6px !important;
border-radius: 6px !important;
border: 1px solid var(--border-color);
}
.ext-context-menu {
margin: -4px 1px 0 1px;
}
.context-menu li a {
display: inline-block;
width: 100%;
border-radius: 6px !important;
}
.context-menu > .active a {
color: var(--color-1) !important;
}
.tb43e-d6bd-dbe4y {
background: var(--bg-color2);
}
/*
* ------------------------
* UI-controls
* dialogs
* ------------------------
*/
.form-control {
padding: 6px;
}
/* alert-msg */
#searchpanel-msg {
margin-top: 2px;
margin-bottom: 8px;
background: var(--color-1-0-a);
}
.alert.alert-warning,
.alert.alert-warning * {
color: var(--color-1) !important;
}
#md-searchpanel {
padding-top: 7px;
}
#md-searchpanel input,
#md-replace-type-label,
#search-panel-replace-btn,
.modal-dialog,
.modal-title,
.modal-content {
border-radius: 5px;
}
.modal-content {
padding: 8px;
border-radius: 8px;
}
#sidebar-files-menu li a {
padding-top: 5px;
padding-bottom: 5px;
}
#sidebar-files-menu .file-action-item {
line-height: 30px;
}
.ty-sidebar-search-panel {
padding-left: 14px !important;
padding-right: 14px !important;
}
#file-library-search-panel {
padding-top: 3px;
padding-bottom: 11px;
border-bottom: 1px solid var(--border-color) !important;
}
#file-library-search-input {
top: 4px;
width: 100% !important;
border-radius: 0 !important;
}
#file-library-search-input,
.native-window #file-library-search-input {
height: 28px;
border-radius: 5px !important;
font-size: 12px;
}
#ty-sidebar-search-panel .searchpanel-search-option-btn {
top: 12px;
}
#close-outline-filter-btn {
top: 12px;
right: 15px;
border: none !important;
background: transparent !important;
}
#sidebar-content #file-library-search-panel .searchpanel-search-option-btn {
top: 12px;
}
/* #root .window */
.window,
.window label {
font-size: 13px !important;
}
.window .window-header h2 {
font-size: 15px !important;
}
.window .nav-group-item {
margin: 14px 0;
font-size: 15px !important;
}
.window pre {
padding: 16px;
}
#ty-tooltip,
.ty-tooltip.shown {
padding: 6px 12px;
background: var(--bg-color2);
border-radius: 6px;
color: var(--text-color);
}
/* content footer */
footer.ty-footer,
.ty-footer .footer-item {
height: 24px;
border-top: none;
}
.ty-footer .footer-item {
margin-left: 3px;
margin-top: -5px;
border-radius: 5px;
background: var(--border-color) !important;
line-height: 24px;
}
.ty-footer #footer-word-count {
margin-right: -2px;
}
.typora-sourceview-on #toggle-sourceview-btn {
margin-left: 0;
}
#dict-install-dialog + div {
bottom: 3px !important;
}
#footer-word-count-info {
padding: 6px;
border-radius: 5px;
border: 1px solid var(--border-color);
}
#footer-word-count-info table {
border-radius: 0;
}
#footer-word-count-info table tr > td:first-of-type {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#footer-word-count-info table tr > td:last-of-type {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.export-item.active,
.export-items-list-control {
border-radius: 3px !important;
}
.nav-group-item {
border-radius: 6px !important;
}
.input-group table,
.export-detail {
border-radius: 6px !important;
}
.export-detail .file-input input {
height: 30px !important;
padding-left: 8px !important;
border-color: var(--border-color) !important;
}
.search-input {
padding: 6px 12px !important;
border-color: var(--border-color) !important;
}
.label-input-group div {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.label-input-group div pre {
border-radius: 6px !important;
font-size: 14px !important;
}
.input-group-content {
border-radius: 6px !important;
}
.input-group-content table {
margin-top: 4px;
}
.label-hint svg {
margin-right: 3px;
}
.export-detail .input-group-content > .row {
margin-right: 16px;
}
.export-detail,
.export-item.active,
.export-items-list-control {
background: var(--bg-color2) !important;
}
.export-item.active {
color: var(--color-1) !important;
}
.md-show-hint::after {
background: var(--bg-color2) !important;
border-radius: 3px;
box-shadow: 0 0 3px var(--color-1) !important;
}
/**
* ---------------------------------
* Control UI on Mac (optional)
* ---------------------------------
*/
.sidebar-tab-btn {
margin-top: 12px !important;
color: var(--title-color);
font-size: 16px !important;
line-height: 20px !important;
vertical-align: middle;
}
.sidebar-tab-btn:hover {
color: var(--color-1);
}
.mac-os .ty-show-search .ty-tab-wrapper {
border-bottom: 1px solid var(--border-color);
}
.mac-os #sidebar-search-btn span::before {
font-size: 18px;
}
.mac-os #ty-sidebar-search-tabs input {
top: 0;
margin-right: 0;
padding: 0;
border-top: none;
border-right: none;
border-left: none;
border-radius: 0 !important;
border-bottom-width: 1px;
}
.mac-os #ty-sidebar-search-tabs .searchpanel-search-option-btn {
top: 14px;
}
.mac-os #ty-sidebar-search-tabs #ty-sidebar-search-back-btn {
margin-top: 14px !important;
}
.mac-os #ty-sidebar-search-tabs .sidebar-tab-btn {
width: 25px !important;
padding-right: 8px;
}
.mac-os #ty-sidebar-search-tabs #filesearch-regexp-option-btn {
right: 12px;
}
.mac-os #ty-sidebar-search-tabs #filesearch-word-option-btn {
right: 35px;
}
.mac-os #ty-sidebar-search-tabs #filesearch-case-option-btn {
right: 58px;
}
#ty-sidebar-footer .sidebar-footer-item {
padding-top: 4px;
padding-bottom: 4px;
}
.os-windows #ty-sidebar-footer .sidebar-footer-item {
padding-top: 0;
padding-bottom: 0;
}
#typora-quick-open {
padding: 12px;
background-color: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 8px;
}
.typora-quick-open-item,
.md-hover-tip .code-tooltip-content {
border-radius: 5px;
overflow-x: auto;
}
.code-tooltip.md-hover-tip,
.md-hover-tip .code-tooltip-content,
.md-arrow::after {
border-bottom-color: var(--color-1) !important;
background: var(--color-1) !important;
box-shadow: 0 1px 4px var(--color-1) !important;
}
.md-hover-tip .code-tooltip-content:hover a {
color: var(--color-2) !important;
}
/*
* ------------------------
* .ty-preferences
* ------------------------
*/
.sidebar {
position: relative;
}
.sidebar:after {
content: '';
display: block;
position: absolute;
width: 1px;
height: 100%;
right: -24px;
top: 0;
border-left: 1px solid var(--border-color);
}
.ty-preferences a {
font-size: 12px !important;
text-decoration: none;
color: var(--color-1);
}
.ty-preferences a:hover {
text-decoration: underline;
color: var(--color-2);
}
/*search style*/
#searchpanel-search-group .ty-search-panel-row {
padding-top: 0;
}
#searchpanel-search-group .searchpanel-search-option-btn {
top: 3px;
background: var(--bg-color);
}
#searchpanel-search-group .searchpanel-search-option-btn:hover {
color: var(--color-1);
}
.ty-search-panel-row .btn {
line-height: 14px;
}
.ty-search-panel-row .ion-close-round,
.ty-search-panel-row .ty-upload {
padding-right: 8px !important;
padding-left: 4px !important;
}
#search-panel-next,
#search-panel-replace-btn {
left: 3px;
}
#search-panel-replaceall-btn,
#search-panel-replace-btn {
padding-right: 4px !important;
padding-left: 4px !important;
text-align: center !important;
}
.ty-on-outline-filter .ty-outline-hit {
color: var(--color-2);
}
.md-search-hit {
background: var(--color-2-0-c) !important;
color: #070909 !important;
}
.md-search-select {
background: var(--color-2) !important;
color: #070909 !important;
}
/* md-notification-container */
.md-notification-container {
padding-top: calc(var(--title-bar-height) + 10px) !important;
background: var(--bg-color);
border-bottom: 1px solid var(--border-color);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.1);
font-size: 14px;
}
.native-window.os-windows .md-notification-container,
.mac-os .md-notification-container {
padding-top: 1px !important;
}
.md-notification-container #md-notification::before {
top: 8px;
font-size: 16px;
}
#md-notification .md-notification-content {
padding-bottom: 4px;
}
#md-notification p {
margin: 4px 0;
white-space: nowrap;
}
#md-notification > p:last-of-type {
margin-bottom: 8px;
}
#md-notification > p:only-of-type {
margin-bottom: 0;
}
.md-notification-container .btn {
margin: 0;
}
#md-notification .typora-search-spinner,
#md-notification .typora-export-spinner {
top: 5px !important;
}
.unibody-window #md-searchpanel .btn {
line-height: 24px !important;
}
#md-notification .typora-search-spinner > div,
#md-notification .typora-export-spinner > div {
background: var(--color-1);
}
/* 打字机模式提示 */
#md-notification .ty-enter-mode-warning-body + div {
display: flex;
display: -webkit-flex;
}
#md-notification label {
align-self: center;
}
#md-notification label > input {
margin-top: 0;
}
/*
* ------------------------
* diagram
* ------------------------
*/
.md-diagram .md-diagram-panel {
border-radius: 8px;
border-color: transparent !important;
background: var(--bg-color2);
}
pre.md-focus .md-diagram-panel {
margin-top: 4px;
}
/*
* ------------------------
* export html
* ------------------------
*/
body.typora-export {
padding: 0;
}
.typora-export code {
padding: 2px 4px;
}
.typora-export .typora-export-content {
display: flex;
display: -webkit-flex;
width: 100vw;
max-width: 1920px;
margin: 0 auto;
justify-content: center;
}
.typora-export #write {
margin: 0;
}
/* sidebar */
#typora-sidebar {
border-right-color: var(--border-color);
}
.typora-export-sidebar {
margin-right: 0;
margin-top: 0;
}
.typora-export-sidebar > .outline-content {
height: 100vh;
border-right: 1px solid var(--border-color);
padding-top: 14px;
padding-bottom: 14px;
overflow: auto;
}
.no-collapse-outline .typora-export-sidebar .outline-item-wrapper > ul li,
.typora-export-sidebar .outline-item-open > ul li {
margin-left: 1px;
}
.typora-export-no-collapse-outline .outline-expander {
display: none;
}
.typora-export-no-collapse-outline .outline-item-wrapper > .outline-children::before {
content: '';
position: absolute;
left: -24px;
top: -20px;
width: 1px;
height: calc(100% + 12px);
background: transparent;
border-left: 1px solid var(--border-color);
}
.typora-export-no-collapse-outline .outline-content li ul {
margin-left: 21px;
}
.typora-export-no-collapse-outline .outline-item-wrapper:last-of-type > .outline-children::before,
.typora-export-no-collapse-outline .outline-children > li.outline-item-wrapper:last-child > .outline-children::before {
display: none;
}
.typora-export-no-collapse-outline .outline-children > li:first-child > .outline-item::before,
.typora-export-no-collapse-outline .outline-content > li:nth-child(2) > .outline-item::before {
top: -9px;
height: calc(50% + 9px);
}
.typora-export-no-collapse-outline .outline-content > li.outline-item-wrapper:first-child > .outline-children::before {
top: -15px;
}
.typora-export .outline-expander::before,
.typora-export .outline-expander:hover::before,
.no-collapse-outline .typora-export .outline-item-wrapper > .outline-item > .outline-expander::before,
.typora-export .outline-item-open > .outline-item-wrapper > .outline-expander::before {
content: "" !important;
width: 7px;
height: 7px;
box-sizing: border-box;
padding: 0;
background: transparent;
border-top: 1.5px solid var(--text-color);
border-right: 1.5px solid var(--text-color);
z-index: 50;
}
.typora-export .outline-item-wrapper > .outline-item > .outline-expander::before,
.typora-export .outline-item-wrapper:not(.outline-item-open) > .outline-item > .outline-expander::before {
margin-top: 13px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.typora-export .outline-expander:hover::before,
.typora-export .outline-item-wrapper:not(.outline-item-open) > .outline-item > .outline-expander:hover::before,
.typora-export .outline-item-open > .outline-item > .outline-expander::before {
margin-left: 2px;
margin-top: 11px;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
}
.typora-export .outline-expander:hover::before {
margin-left: -2px;
}
.typora-export .outline-item:hover {
margin-right: 0;
}
.typora-export .outline-item-active {
background: transparent !important;
}
.typora-export .outline-item-active > .outline-item,
.typora-export .outline-item-active > .outline-item > .outline-label {
background: var(--bg-color2) !important;
color: var(--color-1);
}
.typora-export .outline-content li .outline-label {
padding-left: 9px;
}
.typora-export li.outline-item-open > .outline-item > .outline-label,
.typora-export .outline-item-wrapper:not(.outline-item-open) > .outline-item > .outline-expander:hover + .outline-label {
padding-left: 13px;
}
.typora-export-no-collapse-outline .outline-content li .outline-label {
padding-left: 0 !important;
}
.typora-export .outline-item:hover .outline-label {
color: var(--text-color);
}
.typora-export-sidebar .outline-content li > .outline-item:hover > .outline-expander::before {
border-color: var(--text-color);
}
.typora-export-sidebar .outline-item-active > .outline-item > .outline-expander::before {
border-width: 2px !important;
border-color: var(--color-1);
}
/*
* ------------------------
* @media screen
* ------------------------
*/
@media screen and (min-width: 1921px) {
.typora-export-show-outline #write {
max-width: 1312px;
padding-right: 0;
}
}
@media screen and (min-width: 1725px) {
.typora-export .outline-content {
padding-left: 5px;
}
}
@media screen and (max-width: 1724px) {
.typora-export-show-outline #write {
max-width: 1672px;
}
#write,
#typora-source .CodeMirror-lines,
.typora-export-show-outline #write {
padding: 32px 96px;
}
.typora-export-sidebar,
.typora-export-sidebar > .outline-content {
width: 280px;
}
}
@media screen and (max-width: 1440px) {
.typora-export-show-outline #write {
max-width: 1620px;
}
#write,
#typora-source .CodeMirror-lines,
.typora-export-show-outline #write {
padding: 32px 80px;
}
.typora-export-sidebar,
.typora-export-sidebar > .outline-content {
width: 260px;
}
}
@media screen and (max-width: 1200px) {
.typora-export-sidebar,
.typora-export-sidebar > .outline-content {
width: 240px;
}
#write,
#typora-source .CodeMirror-lines,
.typora-export-show-outline #write {
padding: 32px 80px;
}
}
@media screen and (max-width: 992px) {
.typora-export-sidebar,
.typora-export-sidebar > .outline-content {
display: block !important;
}
#write,
#typora-source .CodeMirror-lines,
.typora-export-show-outline #write {
padding: 32px 60px;
}
}
@media screen and (max-width: 768px) {
.typora-export-sidebar {
display: none !important;
}
#write,
.typora-export-show-outline #write {
padding: 32px;
}
h1.md-focus::before,
h2.md-focus::before,
h3.md-focus::before,
h4.md-focus::before,
h5.md-focus::before,
h6.md-focus::before,
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
left: -30px;
}
}
/*
* ------------------------
* @media print
* ------------------------
*/
@media print {
html,
body,
body #write,
body content,
body .typora-export-content {
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important; /*解决浏览器打印只有一页问题*/
padding: 0 !important;
border: none !important;
}
body .typora-export-sidebar {
display: none !important;
width: 0 !important;
}
::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
body,
body * {
scrollbar-width: none !important;
}
table,
pre,
img,
blockquote,
section,
.md-alert{
page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 {
margin: 24pt 0 12pt;
}
h1 {
font-size: 24pt;
}
h2 {
font-size: 21pt;
}
h3 {
font-size: 18pt;
}
h4 {
font-size: 15pt;
}
h5 {
font-size: 13.5pt;
}
h6 {
font-size: 12pt;
}
p {
font-size: 12pt;
margin: 12pt 0;
}
@page {
margin: 15mm !important;
size: auto;
/*谷歌浏览器打印设置*/
@top-center {
content: '';
font-size: 9pt;
}
@bottom-center {
content: counter(page) '/' counter(pages);
font-size: 9pt;
}
}
}
================================================
FILE: mdmdt-light.css
================================================
/*
* ------------------------------------------------------------------------
* mdmdt-light.css
* (c) 2024-2025
* Author: cayxc
* Homepage: https://gitee.com/cayxc/mdmdt https://github.com/cayxc/Mdmdt
* License: Apache-2.0
* ------------------------------------------------------------------------
*/
:root {
/*--bg-color: rgb(250, 250, 250);*/
--bg-color: rgb(250, 250, 252);
--bg-color2: rgb(236, 236, 238);
--text-color: #000;
--text-grey: #666;
--text-code: #2f479f;
--title-color: #070909;
--border-color: #d2d2d2;
--color-1: #3e69d7;
--color-1-0-a: rgba(62, 105, 215, 0.15);
--color-1-0-b: rgba(62, 105, 215, 0.06);
--color-2: #f59102;
--color-2-0-a: rgba(245, 145, 2, 0.15);
--color-2-0-b: rgba(245, 145, 2, 0.06);
--color-2-0-c: rgba(245, 145, 2, 0.3);
--color-3: #03b736;
--color-3-0-a: rgba(3, 183, 54, 0.15);
--color-3-0-b: rgba(3, 183, 54, 0.06);
--color-4: #8250df;
--color-4-0-a: rgba(130, 80, 223, 0.15);
--color-4-0-b: rgba(130, 80, 223, 0.06);
--color-5: #e30f2e;
--color-5-0-a: rgba(227, 15, 46, 0.15);
--color-5-0-b: rgba(227, 15, 46, 0.06);
--md-char-color: rgba(72, 93, 108, 0.75);
--meta-content-color: var(--md-char-color);
--primary-color: var(--color-1);
--primary-btn-border-color: var(--bg-color2);
--primary-btn-text-color: var(--text-color);
--window-border: 1px solid var(--border-color);
--active-file-bg-color: var(--bg-color2);
--active-file-text-color: var(--color-1);
--active-file-border-color: var(--color-1);
--side-bar-bg-color: var(--bg-color);
--item-hover-bg-color: var(--bg-color2);
--item-hover-text-color: var(--color-1);
--select-text-bg-color: var(--color-1-0-a);
--monospace: "JetBrains Mono", "Source Code Pro", "Fira Code", Consolas, Inconsolata, "Cascadia Code", Monaco, "Ubuntu Mono", monospace;
/*--mermaid-theme: neutral;*/ /*or base, dark, forest, neutral, night*/
--mermaid-font-family: "trebuchet ms", verdana, arial, sans-serif;
--mermaid-sequence-numbers: on;
--mermaid-flowchart-curve: linear;
--mermaid--gantt-left-padding: 75;
}
html {
height: 100vh;
background-color: var(--bg-color);
font-size: 16px !important;
color: var(--text-color);
-webkit-font-smoothing: antialiased;
scroll-behavior: smooth;
scroll-padding: 14px;
}
body {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.6;
letter-spacing: 0.6px;
font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;
background: var(--bg-color);
overflow-x: hidden;
}
body.os-windows {
font-family: "Microsoft YaHei UI", "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;
letter-spacing: 1px;
}
* {
tab-size: 4;
-webkit-tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
}
/*
* ------------------------
* scroll style
* ------------------------
*/
::-webkit-scrollbar,
::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
border-radius: 4px !important;
background: var(--border-color) !important;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
background: var(--bg-color2) !important;
}
html,
html * {
scrollbar-color: var(--border-color) var(--bg-color2) !important;
scrollbar-width: thin !important;
}
/*
* -----------------------------------
* h1 ~ h6, header
* p, strong, dl, em, u, kbd, hr, mark
* -----------------------------------
*/
h1, h2, h3, h4, h5, h6 {
position: relative;
line-height: 1.5;
margin: 32px 0 18px;
color: var(--title-color);
letter-spacing: 2px;
}
h1 {
font-size: 32px;
border-bottom: 1px solid var(--border-color);
}
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
#write > h1 + *,
#write > h2 + *,
#write > h3 + *,
#write > h4 + *,
#write > h5 + *,
#write > h6 + * {
margin-top: 18px !important;
}
#write > h1::before,
#write > h2::before,
#write > h3::before,
#write > h4::before,
#write > h5::before,
#write > h6::before,
#write > h1.md-focus::before,
#write > h2.md-focus::before,
#write > h3.md-focus::before,
#write > h4.md-focus::before,
#write > h5.md-focus::before,
#write > h6.md-focus::before {
display: none;
position: absolute;
left: -36px;
height: 20px;
padding-left: 6px;
padding-right: 3px;
border: 1px solid var(--color-1);
border-radius: 4px;
font-size: 12px;
font-weight: 700;
color: var(--color-1);
}
#write > h1::before,
#write > h1.md-focus::before {
content: 'h1';
top: 15px;
}
#write > h2::before,
#write > h2.md-focus::before {
content: 'h2';
top: 10.5px;
}
#write > h3::before,
#write > h3.md-focus::before {
content: 'h3';
top: 8px;
}
#write > h4::before,
#write > h4.md-focus::before {
content: 'h4';
top: 5.5px;
}
#write > h5::before,
#write > h5.md-focus::before {
content: 'h5';
top: 4px;
}
#write > h6::before,
#write > h6.md-focus::before {
content: 'h6';
top: 2.5px;
}
#write > h1:hover::before,
#write > h2:hover::before,
#write > h3:hover::before,
#write > h4:hover::before,
#write > h5:hover::before,
#write > h6:hover::before {
display: block;
}
hr {
height: 1px;
box-sizing: border-box;
background: var(--border-color);
border: none;
}
p {
margin-top: 16px;
margin-bottom: -5px;
white-space: pre-wrap;
}
#write > p + p {
margin-top: 24px;
}
p:has(span.md-image) {
margin-bottom: 0;
}
strong {
font-weight: 800;
color: var(--title-color);
}
u {
text-underline-offset: 4px;
text-decoration-thickness: 1.5px;
}
em {
font-weight: 400;
}
del {
color: var(--text-grey);
text-decoration: line-through;
text-decoration-color: var(--color-5);
-moz-text-decoration-color: var(--color-5);
}
mark {
border-radius: 5px;
background-color: var(--color-1);
padding: 0 4px;
color: var(--bg-color);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/*
* ------------------------
* a, link
* ------------------------
*/
a {
position: relative;
font-weight: 500;
text-decoration: none;
color: var(--color-1);
font-size: 16px;
text-underline-offset: 4px;
}
a:hover,
.md-link a:hover,
.footnotes a:hover {
color: var(--color-2);
text-decoration: underline;
cursor: pointer !important;
}
/*以下写法是防止导出pdf时再标题或代码块部分生成链接图标*/
#write p a,
#write table a,
#write blockquote a,
#write .md-alert a,
#write li a {
padding-left: 2px;
}
#write p a::before,
#write table a::before,
#write blockquote a::before,
#write .md-alert a::before,
#write li a::before {
content: "";
display: inline-block;
position: relative;
top: 2px;
right: 2px;
z-index: 30;
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQxNDk2OTA4OTA2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE1NjgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTIyNy44NCAyMS41MDRjLTQxLjQ3MiA3LjY4LTk3LjI4IDM3Ljg4OC0xMzAuMDQ4IDcwLjY1NkM0Ny42MTYgMTQyLjg0OCAyMC40OCAyMDcuMzYgMjAuNDggMjc2Ljk5MmMwIDc1Ljc3NiAxOC45NDQgMTIzLjM5MiA3Ni4yODggMTkzLjAyNCAzMC4yMDggMzUuODQgMTA1Ljk4NCAxMDguNTQ0IDExNy4yNDggMTEyLjY0IDIuNTYgMC41MTIgNi42NTYtMTQuMzM2IDguNzA0LTMzLjI4IDIuMDQ4LTE4Ljk0NCA3LjY4LTQ4LjEyOCAxMy4zMTItNjQgMTUuODcyLTQ4LjEyOCAxNC4zMzYtNTMuNzYtMjYuNjI0LTkzLjY5NkMxNjQuODY0IDM0Ny42NDggMTQ4LjQ4IDMxNS4zOTIgMTQ4LjQ4IDI3My40MDhjMC05OC44MTYgMTAzLjQyNC0xNjEuMjggMTg1Ljg1Ni0xMTMuMTUyIDExLjc3NiA3LjE2OCA3MS4xNjggNjMuNDg4IDEzMi42MDggMTI0LjkyOCAxMjAuODMyIDEyMS44NTYgMTIwLjMyIDEyMS4zNDQgMTE1LjcxMiAxNzcuMTUyLTEuNTM2IDE5LjQ1Ni03LjY4IDM0LjgxNi0yMC45OTIgNTUuODA4LTIyLjAxNiAzNC4zMDQtMjUuMDg4IDYyLjk3Ni04LjcwNCA4OS42IDEyLjI4OCAyMC40OCAyNS42IDI3LjY0OCA1My4yNDggMjguNjcyIDMyLjc2OCAxLjUzNiA1NC4yNzItMTUuODcyIDc4Ljg0OC02Mi45NzYgMjQuNTc2LTQ2LjU5MiAzMi4yNTYtNzYuOCAzMi4yNTYtMTI2LjQ2NCAwLTUzLjc2LTE1Ljg3Mi0xMDAuODY0LTUyLjIyNC0xNTUuMTM2LTIwLjk5Mi0zMC43Mi0xNjIuODE2LTE3My41NjgtMjEwLjk0NC0yMTEuOTY4QzM4NS41MzYgMjUuMDg4IDMxMC4yNzIgNS42MzIgMjI3Ljg0IDIxLjUwNHoiIGZpbGw9IiMzZTY5ZDciIHAtaWQ9IjE1NjkiPjwvcGF0aD48cGF0aCBkPSJNMzkxLjY4IDM5MS42OGMtMjQuMDY0IDExLjI2NC0zMS4yMzIgMTguNDMyLTUxLjIgNTUuMjk2LTI0LjA2NCA0NC4wMzItMzMuMjggNzguMzM2LTMzLjc5MiAxMjggMCA1NS4yOTYgMTUuMzYgMTAxLjg4OCA1Mi4yMjQgMTU3LjE4NCAyMS41MDQgMzIuMjU2IDE3Ny4xNTIgMTg2Ljg4IDIxOS42NDggMjE5LjEzNiAzOS40MjQgMjkuMTg0IDc4LjMzNiA0Ni4wOCAxMjQuNDE2IDUzLjI0OCAxNTcuMTg0IDI0LjA2NCAzMDAuNTQ0LTk4LjgxNiAzMDAuNTQ0LTI1Ny41MzYgMC03NS43NzYtMTguOTQ0LTEyMy4zOTItNzYuMjg4LTE5My4wMjQtMzAuMjA4LTM1Ljg0LTEwNS45ODQtMTA4LjU0NC0xMTcuMjQ4LTExMi42NC0yLjU2LTAuNTEyLTYuNjU2IDE0LjMzNi04LjcwNCAzMy4yOC0yLjA0OCAxOC45NDQtNy42OCA0OC4xMjgtMTMuMzEyIDY0LTE1Ljg3MiA0OC4xMjgtMTQuMzM2IDUzLjc2IDI2LjYyNCA5My42OTYgNDQuNTQ0IDQ0LjAzMiA2MC45MjggNzYuMjg4IDYwLjkyOCAxMTguMjcyIDAgOTguODE2LTEwMy40MjQgMTYxLjI4LTE4NS44NTYgMTEzLjE1Mi0xMS43NzYtNy4xNjgtNzEuMTY4LTYzLjQ4OC0xMzIuNjA4LTEyNC45MjgtMTIwLjgzMi0xMjEuODU2LTEyMC4zMi0xMjEuMzQ0LTExNS43MTItMTc3LjE1MiAxLjUzNi0xOS40NTYgNy42OC0zNC44MTYgMjAuOTkyLTU1LjgwOCAxNC4zMzYtMjIuMDE2IDE4Ljk0NC0zNC4zMDQgMTguOTQ0LTUxLjIgMC0yMy41NTItMTMuODI0LTUxLjItMjkuMTg0LTU5LjM5Mi0xNy45Mi05LjIxNi00NS4wNTYtMTAuNzUyLTYwLjQxNi0zLjU4NHoiIGZpbGw9IiMzZTY5ZDciIHAtaWQ9IjE1NzAiPjwvcGF0aD48L3N2Zz4=");
}
#write a:hover::before {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQxNDk3MDE4MTgyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjExMDciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTIyNy44NCAyMS41MDRjLTQxLjQ3MiA3LjY4LTk3LjI4IDM3Ljg4OC0xMzAuMDQ4IDcwLjY1NkM0Ny42MTYgMTQyLjg0OCAyMC40OCAyMDcuMzYgMjAuNDggMjc2Ljk5MmMwIDc1Ljc3NiAxOC45NDQgMTIzLjM5MiA3Ni4yODggMTkzLjAyNCAzMC4yMDggMzUuODQgMTA1Ljk4NCAxMDguNTQ0IDExNy4yNDggMTEyLjY0IDIuNTYgMC41MTIgNi42NTYtMTQuMzM2IDguNzA0LTMzLjI4IDIuMDQ4LTE4Ljk0NCA3LjY4LTQ4LjEyOCAxMy4zMTItNjQgMTUuODcyLTQ4LjEyOCAxNC4zMzYtNTMuNzYtMjYuNjI0LTkzLjY5NkMxNjQuODY0IDM0Ny42NDggMTQ4LjQ4IDMxNS4zOTIgMTQ4LjQ4IDI3My40MDhjMC05OC44MTYgMTAzLjQyNC0xNjEuMjggMTg1Ljg1Ni0xMTMuMTUyIDExLjc3NiA3LjE2OCA3MS4xNjggNjMuNDg4IDEzMi42MDggMTI0LjkyOCAxMjAuODMyIDEyMS44NTYgMTIwLjMyIDEyMS4zNDQgMTE1LjcxMiAxNzcuMTUyLTEuNTM2IDE5LjQ1Ni03LjY4IDM0LjgxNi0yMC45OTIgNTUuODA4LTIyLjAxNiAzNC4zMDQtMjUuMDg4IDYyLjk3Ni04LjcwNCA4OS42IDEyLjI4OCAyMC40OCAyNS42IDI3LjY0OCA1My4yNDggMjguNjcyIDMyLjc2OCAxLjUzNiA1NC4yNzItMTUuODcyIDc4Ljg0OC02Mi45NzYgMjQuNTc2LTQ2LjU5MiAzMi4yNTYtNzYuOCAzMi4yNTYtMTI2LjQ2NCAwLTUzLjc2LTE1Ljg3Mi0xMDAuODY0LTUyLjIyNC0xNTUuMTM2LTIwLjk5Mi0zMC43Mi0xNjIuODE2LTE3My41NjgtMjEwLjk0NC0yMTEuOTY4QzM4NS41MzYgMjUuMDg4IDMxMC4yNzIgNS42MzIgMjI3Ljg0IDIxLjUwNHoiIGZpbGw9IiNmNTkxMDIiIHAtaWQ9IjExMDgiPjwvcGF0aD48cGF0aCBkPSJNMzkxLjY4IDM5MS42OGMtMjQuMDY0IDExLjI2NC0zMS4yMzIgMTguNDMyLTUxLjIgNTUuMjk2LTI0LjA2NCA0NC4wMzItMzMuMjggNzguMzM2LTMzLjc5MiAxMjggMCA1NS4yOTYgMTUuMzYgMTAxLjg4OCA1Mi4yMjQgMTU3LjE4NCAyMS41MDQgMzIuMjU2IDE3Ny4xNTIgMTg2Ljg4IDIxOS42NDggMjE5LjEzNiAzOS40MjQgMjkuMTg0IDc4LjMzNiA0Ni4wOCAxMjQuNDE2IDUzLjI0OCAxNTcuMTg0IDI0LjA2NCAzMDAuNTQ0LTk4LjgxNiAzMDAuNTQ0LTI1Ny41MzYgMC03NS43NzYtMTguOTQ0LTEyMy4zOTItNzYuMjg4LTE5My4wMjQtMzAuMjA4LTM1Ljg0LTEwNS45ODQtMTA4LjU0NC0xMTcuMjQ4LTExMi42NC0yLjU2LTAuNTEyLTYuNjU2IDE0LjMzNi04LjcwNCAzMy4yOC0yLjA0OCAxOC45NDQtNy42OCA0OC4xMjgtMTMuMzEyIDY0LTE1Ljg3MiA0OC4xMjgtMTQuMzM2IDUzLjc2IDI2LjYyNCA5My42OTYgNDQuNTQ0IDQ0LjAzMiA2MC45MjggNzYuMjg4IDYwLjkyOCAxMTguMjcyIDAgOTguODE2LTEwMy40MjQgMTYxLjI4LTE4NS44NTYgMTEzLjE1Mi0xMS43NzYtNy4xNjgtNzEuMTY4LTYzLjQ4OC0xMzIuNjA4LTEyNC45MjgtMTIwLjgzMi0xMjEuODU2LTEyMC4zMi0xMjEuMzQ0LTExNS43MTItMTc3LjE1MiAxLjUzNi0xOS40NTYgNy42OC0zNC44MTYgMjAuOTkyLTU1LjgwOCAxNC4zMzYtMjIuMDE2IDE4Ljk0NC0zNC4zMDQgMTguOTQ0LTUxLjIgMC0yMy41NTItMTMuODI0LTUxLjItMjkuMTg0LTU5LjM5Mi0xNy45Mi05LjIxNi00NS4wNTYtMTAuNzUyLTYwLjQxNi0zLjU4NHoiIGZpbGw9IiNmNTkxMDIiIHAtaWQ9IjExMDkiPjwvcGF0aD48L3N2Zz4=");
}
sup a,
a.reversefootnote {
padding-left: 0 !important;
}
sup a::before,
a.reversefootnote::before,
.md-toc-content .md-toc-item > a::before {
display: none;
width: 0 !important;
height: 0 !important;
background-image: none !important;
}
a:hover {
color: var(--color-2);
}
.footnotes,
.footnotes a {
font-size: 14px;
text-decoration: none;
}
.footnotes .md-def-name::before,
.footnotes .md-def-name::after {
color: var(--text-color);
}
.footnotes .md-def-url,
.md-link .md-url {
text-decoration: none;
color: var(--color-1);
}
/*
* ------------------------
* ul, ol
* ------------------------
*/
ul, ol {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
}
#write > p + ul,
#write > p + ol,
blockquote > ul,
blockquote > ol,
.md-alert > ul,
.md-alert > ol{
margin-top: 11px;
}
ul {
padding-left: 36px;
}
ol {
padding-left: 40px;
}
ol ol {
margin-left: -7px;
}
ol > li > ul {
margin-left: -7px;
}
ul > li > ol {
margin-left: -2px;
}
ul > li > p {
margin: 0 0 0 -2px;
}
ol > li > p {
margin: 0 0 0 -6px;
}
ul > .task-list-item > input {
margin-left: -22px;
}
#write li {
margin-top: 6px;
}
li > p {
margin: -5px 0;
}
#write li img,
#write li pre,
#write li figure,
#write li blockquote,
#write li .md-alert {
margin-top: 11px !important;
margin-bottom: 11px !important;
}
#write li pre pre,
#write li .md-image {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/*
* ------------------------
* image
* ------------------------
*/
img,
span.md-image {
margin: 16px auto 0 auto !important;
border-radius: 8px !important;
border: none !important;
color: var(--md-char-color);
}
p.md-focus span.md-image {
background: var(--color-1-0-b);
box-shadow: 0 0 3px var(--border-color);
}
p.md-focus span.md-image {
margin-top: 0;
}
span.md-image,
span.md-image span.md-content,
span.md-image span.md-image-src-span,
span.md-image span.md-image-before-src,
span.md-image span.md-image-after-src,
span.md-image span.md-image-input-src-btn,
span.md-image span.md-image-pick-file-btn,
span.md-image span.md-before::before,
span.md-image span.md-image-input-src-btn::before,
span.md-image span.md-image-pick-file-btn::before {
color: var(--color-1);
}
span.md-image-btn {
background: var(--bg-color2);
}
span.md-image-btn:hover::before {
color: var(--bg-color) !important;
}
span.md-image span.md-image-pick-file-btn {
border-left-color: var(--border-color);
}
.typora-export #write section:has(img),
.md-htmlblock-container section:has(img) {
display: grid;
grid-gap: 16px;
justify-content: flex-start;
align-items: center;
grid-template-columns: repeat(auto-fit, minmax(16px, auto));
grid-auto-rows: minmax(16px, auto);
}
.typora-export #write > section:has(img) {
margin-top: 16px;
}
.typora-export #write section img,
.md-htmlblock-container section img {
margin: 0 !important;
}
.typora-export #write section:has(img) span,
.md-htmlblock-container section:has(img) span {
display: block;
margin: 8px 0;
}
.typora-export #write section span > img,
.md-htmlblock-container section span > img {
margin: 8px 0 !important;
}
.typora-export #write section span > img:first-of-type,
.md-htmlblock-container section span > img:first-of-type {
margin-top: 0 !important;
}
.typora-export #write section span > img:last-of-type,
.md-htmlblock-container section span > img:last-of-type {
margin-bottom: 0 !important;
}
.typora-export #write > section:has(img):hover,
.md-htmlblock-container > section:has(img):hover{
border-radius: 8px;
background: var(--bg-color2);
padding: 16px;
transition: padding .3s linear;
-webkit-transition: padding .3s linear;
}
/*
* ------------------------
* code
* ------------------------
*/
code {
border-radius: 4px;
background: var(--color-1-0-a);
padding: 3px 5px;
color: var(--text-code);
font-size: 14px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
h1 code {
font-size: 26px;
}
h2 code {
font-size: 22px;
}
h3 code {
font-size: 18px;
}
h4 code {
font-size: 16px;
}
.outline-content .outline-item code {
font-size: 11px;
padding: 2px 4px;
border-radius: 3px;
vertical-align: middle;
}
/*
* ------------------------
* pre
* ------------------------
*/
pre {
margin-top: 16px;
margin-bottom: 0;
box-sizing: border-box;
background: var(--bg-color2) !important;
border-radius: 8px;
font-size: 14px !important;
color: var(--text-code);
}
pre pre {
background: transparent !important;
padding: 5px 10px;
border: none;
}
pre .CodeMirror-wrap {
padding: 16px 16px 16px 0;
}
pre .CodeMirror-wrap .CodeMirror-scroll {
overflow-x: auto;
}
pre .CodeMirror-sizer {
padding-left: 4px;
}
pre .CodeMirror-gutters {
background: var(--bg-color2);
border-color: var(--border-color);
}
/*
* ------------------------
* blockquote
* ------------------------
*/
blockquote,
.md-alert {
margin-top: 16px !important;
margin-bottom: 0;
padding: 16px;
background: var(--color-1-0-b);
box-sizing: border-box;
border-radius: 8px;
border-left: 4px solid var(--color-1);
border-right: 0.1px solid transparent;
border-bottom: 0.1px solid transparent;
border-top: 0.1px solid transparent;
}
blockquote > *:first-child,
.md-alert > *:first-child {
margin-top: 0 !important;
}
blockquote > *:last-child,
.md-alert > *:last-child {
margin-bottom: 0 !important;
}
.md-alert.md-alert-note {
border-left-color: var(--color-1);
background: var(--color-1-0-b);
color: var(--color-1);
}
.md-alert.md-alert-note .md-alert-text-note {
color: var(--color-1);
}
.md-alert.md-alert-caution {
border-left-color: var(--color-2);
background: var(--color-2-0-b);
color: var(--color-2);
}
.md-alert.md-alert-caution .md-alert-text-caution {
color: var(--color-2);
}
.md-alert.md-alert-tip {
border-left-color: var(--color-3);
background: var(--color-3-0-b);
color: var(--color-3);
}
.md-alert.md-alert-tip .md-alert-text-tip {
color: var(--color-3);
}
.md-alert.md-alert-important {
border-left-color: var(--color-4);
background: var(--color-4-0-b);
color: var(--color-4);
}
.md-alert.md-alert-important .md-alert-text-important {
color: var(--color-4);
}
.md-alert.md-alert-warning {
border-left-color: var(--color-5);
background: var(--color-5-0-b);
color: var(--color-5);
}
.md-alert.md-alert-warning .md-alert-text-warning {
color: var(--color-5);
}
/*
* ------------------------
* sup, sub, kbd
* ------------------------
*/
sup, sub {
font-size: 12px;
}
sup.md-footnote {
background: transparent;
padding: 0 2px;
color: var(--color-1);
}
sup.md-footnote:hover {
color: var(--color-2);
cursor: pointer;
}
kbd {
display: inline-block;
border: none;
border-image: none;
border-radius: 5px;
background: var(--title-color);
padding: 0 6px;
box-shadow: none;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
font-size: 14px;
font-weight: 900;
color: var(--bg-color);
}
::selection {
background: var(--color-2-0-c);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/*
* ------------------------
* table
* ------------------------
*/
table,
figure {
width: 100%;
margin-bottom: 0;
border-radius: 8px;
padding: 0 !important;
border-collapse: separate;
border-spacing: 0;
}
figure {
margin-top: 16px !important;
}
table {
margin-top: 0;
border: 1px solid var(--border-color) !important;
overflow: hidden;
}
table thead tr th {
background: var(--bg-color2);
}
table tbody tr:nth-child(even) td {
background: var(--bg-color2);
}
table tbody tr:nth-child(odd) td {
background: var(--bg-color);
}
table tr th, table tr td {
padding: 10px !important;
white-space: pre-wrap !important;
}
table tr td,
table thead tr th {
border-left: 1px solid var(--border-color) !important;
}
table tbody tr td:first-of-type,
table thead tr th:first-of-type {
border-left: none !important;
}
.md-grid-board-wrap table {
border: none !important;
border-radius: 0;
}
.md-grid-board-wrap table tr th,
.md-grid-board-wrap table tr td {
padding: 0 !important;
}
#md-grid-width,
#md-grid-height {
text-align: center !important;
padding: 1px 0;
}
button#md-resize-grid {
display: block !important;
width: 100%;
margin: 5px auto 0;
color: var(--bg-color);
}
button#md-resize-grid:hover {
color: var(--color-1);
border-color: var(--color-1);
}
.ty-table-edit {
margin-left: 0;
}
.md-tooltip-remove {
position: absolute;
z-index: 200;
margin-top: -28px !important;
background: var(--bg-color);
}
.md-tooltip-remove .md-delete-table {
margin-right: 10px !important;
}
.md-table-resize-popover .md-reset > a::before {
display: none !important;
}
/*
* ------------------------
* btn
* ------------------------
*/
.btn,
.btn-default,
.long-btn {
border-radius: 5px !important;
border: 1px solid var(--border-color) !important;
background: var(--bg-color2) !important;
outline: none !important;
}
.btn-primary {
background: var(--color-1) !important;
border-color: var(--color-1) !important;
color: #fff;
}
.btn:hover,
.long-btn:hover {
background: var(--color-1-0-b) !important;
border-color: var(--color-1) !important;
color: var(--color-1);
}
.btn:focus,
.long-btn:focus {
outline: none !important;
}
.btn {
margin-right: 5px !important;
}
.btn:last-of-type {
margin-right: 0;
}
.dropdown-toggle::after {
font-size: 14px;
}
.dropdown-toggle:hover::after {
color: var(--color-1);
}
/*
* ------------------------
* select
* ------------------------
*/
select {
border-radius: 6px !important;
border: 1px solid var(--border-color) !important;
padding: 6px !important;
}
option {
background: var(--bg-color);
}
/*
* ------------------------
* textarea
* ------------------------
*/
textarea {
outline: none;
padding: 16px;
border-radius: 8px;
border-color: var(--border-color);
background: var(--bg-color) !important;
color: var(--text-color) !important;
}
#write textarea {
margin-top: 14px !important;
margin-bottom: 0;
}
/*
* ------------------------
* input
* ------------------------
*/
html input,
input {
position: relative;
border-radius: 5px !important;
border: 1px solid var(--border-color);
outline: none !important;
padding: 0 6px;
line-height: 1.2;
}
html input:focus,
html textarea:focus,
html input[type="number"]:focus,
html input[type="search"]:focus,
html input[type="text"]:focus {
border-color: var(--color-1) !important;
box-shadow: none !important;
outline: none !important;
}
input::placeholder {
font-size: 14px;
color: var(--text-grey) !important;
}
/*input checkbox*/
input[type="checkbox"],
input[type="radio"] {
margin-right: 10px !important;
margin-bottom: -2px !important;
width: 14px !important;
height: 14px !important;
box-sizing: border-box;
background: transparent !important;
border: 1px solid var(--border-color) !important;
border-radius: 3px !important;
padding: 0 !important;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
list-style: none;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background: var(--color-1) !important;
border-color: transparent !important;
}
input[type="checkbox"]:checked::after {
content: "";
display: block;
position: absolute;
bottom: 2.5px;
left: 3.5px;
width: 5px;
height: 9px;
box-sizing: border-box;
background: transparent;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
}
input[type="radio"] {
border-radius: 50% !important;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border: 1px solid var(--border-color) !important;
}
input[type="radio"]:checked::after {
content: "";
display: block;
margin: 3.5px auto;
width: 5px;
height: 5px;
box-sizing: border-box;
background: #fff;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
/*
* ------------------------
* header
* ------------------------
*/
body > header {
background: var(--bg-color) !important;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15) !important;
}
/*
* ------------------------
* md-htmlblock
* md-mathblock
* ------------------------
*/
.md-htmlblock-panel,
.md-htmlblock-container,
.md-htmlblock-container .md-htmlblock-panel-placeholder {
background: transparent;
}
.md-htmlblock-container,
.md-math-container {
border-radius: 8px;
background: var(--bg-color);
overflow: auto;
}
.md-math-container {
width: 100%;
padding: 16px;
}
.md-rawblock-on-edit .md-htmlblock-panel,
.md-rawblock-on-edit .md-mathblock-panel {
border-radius: 8px;
background: var(--bg-color2);
padding: 16px;
}
.md-mathblock-panel .md-rawblock-control {
background: transparent;
}
.md-mathblock-panel .code-tooltip {
margin: 14px 6px 0;
box-shadow: none;
border-top: 1px solid var(--border-color);
border-radius: 0;
}
.code-tooltip {
box-shadow: none;
}
.code-tooltip .ty-input {
border-color: var(--border-color);
}
.md-rawblock-on-edit .md-rawblock-input {
padding: 0;
background: transparent;
}
.md-rawblock .md-rawblock-tooltip {
float: right;
margin-top: -11px;
height: auto;
border-radius: 5px;
background: var(--bg-color2);
animation: none !important;
}
.md-rawblock .md-rawblock-tooltip span {
padding-top: 4px;
padding-bottom: 4px;
}
.md-rawblock .md-rawblock-tooltip-edit-btn:hover {
background: transparent;
}
.md-htmlblock:hover .md-htmlblock-container,
.md-htmlblock:hover .md-rawblock-tooltip,
.md-math-block:hover .md-math-container,
.md-math-block:hover .md-rawblock-tooltip,
.md-rawblock-on-edit:hover .md-rawblock-tooltip {
background: var(--bg-color2);
}
.md-inline-math script {
color: #f9007c;
}
/*
* ------------------------
* #write
* ------------------------
*/
#write {
margin: 0 auto;
width: 100%;
max-width: 1424px;
min-width: 300px;
padding: 32px 112px;
overflow: auto;
/* scroll-behavior: smooth;
scroll-padding: 16px;*/
}
#write > *:first-child {
margin-top: 0;
}
span.md-comment {
color: var(--md-char-color);
opacity: 1;
}
.md-image-btn.selected, .md-image-btn:hover {
background: var(--color-1);
}
#write pre.md-meta-block:empty:before {
color: var(--text-code);
}
/*
* ------------------------
* typora-source
* ------------------------
*/
#typora-source .CodeMirror-sizer {
padding-right: 0 !important;
}
#typora-source .CodeMirror-lines {
margin: 0 auto;
max-width: 1424px;
min-width: 300px;
padding: 32px 112px;
}
#typora-source .CodeMirror-lines pre {
border: none !important;
background: var(--bg-color) !important;
padding: 8px 16px !important;
font-size: 16px !important;
}
#typora-source .CodeMirror-activeline pre {
background: var(--bg-color2) !important;
border-radius: 6px;
}
#typora-source .CodeMirror-activeline .CodeMirror-linebackground {
background: transparent !important;
}
#typora-source .CodeMirror-lines .cm-header {
color: var(--color-2);
}
.CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
border-left: 3px solid var(--color-2);
}
.cm-s-typora-default .cm-header, .cm-s-typora-default .cm-property,
.cm-s-typora-default .cm-link {
color: var(--color-2);
}
.cm-s-inner .cm-comment, .cm-s-inner.cm-comment, .cm-overlay {
color: var(--md-char-color);
}
.cm-s-typora-default .cm-string {
color: var(--color-1);
}
.cm-s-typora-default .cm-code, .cm-s-typora-default .cm-comment {
color: var(--text-code);
}
.cm-s-typora-default .cm-tag {
color: #e31570;
}
.cm-attribute {
color: var(--color-2);
}
/*
* ------------------------
* #toc-dropmenu
* ------------------------
*/
#toc-dropmenu {
top: calc(var(--title-bar-height) + 8px) !important;
right: 18px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
#toc-dropmenu #pin-outline-btn {
display: inline-block;
top: 10px;
}
#toc-dropmenu .divider {
margin-bottom: 0;
}
/*
* ------------------------
* sidebar
* toc-content
* ------------------------
*/
.os-windows #sidebar-content {
margin-top: -1px;
border-top: 1px solid var(--border-color);
}
.os-windows .ty-show-outline-filter #sidebar-content .sidebar-content-content {
margin-top: -4px;
}
.os-windows .ty-show-search #sidebar-content .sidebar-content-content {
margin-top: -7px;
}
.sidebar-tabs {
padding: 0 2px;
}
.outline-content {
overflow: auto !important;
padding: 14px 14px 14px 17px;
font-size: 14px !important;
}
.os-windows .outline-content {
padding-top: 15px;
}
.outline-content li {
position: relative;
z-index: 30;
}
.outline-content > li:first-of-type::before {
top: 0;
}
.outline-content li ul {
position: relative;
z-index: 48;
margin-left: 18px;
margin-top: 0 !important;
}
.no-collapse-outline .outline-content li ul {
margin-left: 21px;
}
.outline-content li .outline-item {
position: relative;
z-index: 50;
margin: 0 0 3px 7px;
width: calc(100% - 4px);
border-radius: 5px;
border: none;
line-height: 1;
padding: 0 0 0 4px;
}
.outline-item > .outline-expander {
display: block;
float: left;
width: auto;
height: 0;
background: transparent;
padding-left: 0;
}
.outline-item > .outline-expander:before {
margin-top: 10px;
margin-left: -2px;
background: transparent;
padding: 0 4px 0 2px;
font-size: 10px;
}
.outline-content li .outline-label {
display: inline-block;
border-radius: 4px;
padding: 7px 7px 7px 8px;
font-size: 14px !important;
line-height: 1.2;
overflow-wrap: normal;
word-wrap: normal;
word-break: keep-all;
white-space: nowrap;
text-decoration: none;
}
.outline-item-single .outline-label,
.outline-item-single.outline-item-open .outline-label,
.no-collapse-outline .outline-content li .outline-label {
padding-left: 0 !important;
}
.outline-item > .outline-expander:hover + .outline-label,
.outline-item-open > .outline-item > .outline-label {
padding-left: 11px;
}
.no-collapse-outline .outline-item-open > .outline-item > .outline-label {
padding-left: 0 !important;
}
.outline-item-active > .outline-expander:hover + .outline-label,
.outline-item-open > .outline-item-active > .outline-label {
padding-left: 12px;
}
.outline-item-active > .outline-expander,
.outline-item-active > .outline-label {
font-weight: 900;
}
.outline-content li .outline-item::before {
content: '';
position: absolute;
z-index: 38;
left: -10px;
top: -27.5px;
width: 10px;
height: calc(50% + 28px);
background: transparent;
border-left: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.os-windows .outline-content li .outline-item::before {
top: -28.5px;
}
.outline-content > li:first-of-type > .outline-item::before {
top: calc(50% - 1px);
height: calc(50% + 15px);
border-left: 1px solid var(--border-color);
border-top: 1px solid var(--border-color);
border-bottom: none;
border-top-left-radius: 3px;
border-bottom-left-radius: 0;
}
.outline-children > li:first-child > .outline-item::before,
.outline-content > li:nth-child(2) > .outline-item::before {
top: -11px;
height: calc(50% + 12px);
}
.os-windows .outline-children > li:first-child > .outline-item::before,
.os-windows .outline-content > li:nth-child(2) > .outline-item::before {
top: -13px;
height: calc(50% + 13px);
}
.no-collapse-outline .outline-children > li:first-child > .outline-item::before,
.no-collapse-outline .outline-content > li:nth-child(2) > .outline-item::before {
top: -8px;
height: calc(50% + 8px);
}
.outline-content > li:last-child > .outline-item::before,
.outline-children > li:last-child > .outline-item::before {
border-bottom-left-radius: 3px;
}
.no-collapse-outline .outline-item-wrapper > .outline-children::before,
.outline-item-open > .outline-children::before {
content: '';
position: absolute;
left: -21px;
top: -26px;
width: 1px;
height: calc(100% + 12px);
background: transparent;
border-left: 1px solid var(--border-color);
}
.no-collapse-outline .outline-item-wrapper > .outline-children::before {
left: -24px;
}
.no-collapse-outline .outline-content > li.outline-item-wrapper:first-child > .outline-children::before,
.outline-content > li.outline-item-open:first-child > .outline-children::before {
top: -15px;
}
.outline-content > li:only-of-type > .outline-item::before,
.no-collapse-outline .outline-item-wrapper:last-of-type > .outline-children::before,
.no-collapse-outline .outline-children > li.outline-item-wrapper:last-child > .outline-children::before,
.outline-item-open:last-of-type > .outline-children::before,
.outline-children > li.outline-item-open:last-child > .outline-children::before {
display: none;
}
.outline-content > li:only-of-type {
margin-left: -8px;
}
li > .outline-item-active:before,
.outline-item:hover::before,
.outline-item-active > .outline-item::before {
width: 7px !important;
}
li > .outline-item-active,
li > .outline-item:hover,
.outline-item-active > .outline-item {
margin-left: 4px !important;
padding-left: 7px !important;
}
li > .outline-item-active::before,
li > .outline-item:hover::before,
.outline-item-active > .outline-item::before {
left: -7px !important;
}
.outline-item:hover,
.outline-item:hover > .outline-label,
.outline-item-active,
.outline-item-active > .outline-label {
background: var(--bg-color2) !important;
}
.outline-item-active > .outline-label,
.outline-item-active > .outline-expander::before {
color: var(--color-1);
}
.ty-on-outline-filter .outline-content .outline-item::before,
.ty-on-outline-filter .outline-content .outline-item::after {
display: none;
}
.ty-on-outline-filter .outline-content > li > ul,
.ty-on-outline-filter .outline-content .outline-item {
margin-left: 0;
}
/* .oultine-item search result */
.outline-content:has(.ty-outline-hit) {
padding-left: 14px;
}
.outline-content li:has(.ty-outline-hit) *::before,
.outline-content li:has(.ty-outline-hit) *::after {
content: '';
display: none;
}
.outline-content li:has(.ty-outline-hit) .outline-item {
margin-left: 1px !important;
width: calc(100% - 1px);
padding-left: 0 !important;
}
.outline-content li:has(.ty-outline-hit) .outline-item > .outline-label {
padding: 8px 10px !important;
}
/*
* --------------------------
* file-library-list
* file-library-search-result
* --------------------------
*/
#file-library-list,
#file-library-search-result {
padding: 14px;
}
/*ty-search-item*/
#file-library-list .file-list-item,
#file-library-search-result .ty-search-item {
margin-bottom: 8px;
border: 1px solid transparent;
border-bottom-color: var(--border-color);
}
#file-library-list .file-list-item {
padding-left: 14px;
padding-right: 14px;
}
#file-library-list .file-list-item.active,
#file-library-search-result .ty-search-item.active {
border-radius: 5px;
border: 1px solid var(--color-1);
}
#file-library-list .file-list-item.active {
padding: 6px 12px;
}
#file-library-search-result .ty-search-item.active {
padding: 6px 12px 6px 0;
}
#file-library-list .file-list-item:first-of-type.active,
#file-library-search-result .ty-search-item:first-of-type.active {
margin-top: 0;
}
#file-library-list .file-list-item:hover,
#file-library-search-result .ty-search-item:hover {
border-radius: 5px;
background: var(--bg-color2);
border-color: var(--border-color);
}
#file-library-list .file-list-item:hover {
color: var(--color-1);
}
#file-library-list .file-list-item:hover + .file-list-item:not(.active),
#file-library-list .file-list-item.active + .file-list-item:not(.active),
#file-library-search-result .ty-search-item:hover + .ty-search-item:not(.active),
#file-library-search-result .ty-search-item.active + .ty-search-item:not(.active) {
border-top: 1px solid var(--border-color);
}
#file-library-list .file-list-item.active:hover,
#file-library-search-result .ty-search-item.active:hover {
border-color: var(--color-1);
}
#file-library-search-result .ty-search-item.active {
color: var(--text-color);
}
#file-library-search-result .ty-search-item.active .ty-search-item-line {
white-space: pre-wrap;
word-break: break-word;
}
.file-list-item-time {
margin-right: 0;
padding-right: 0;
}
.file-list-item-count {
margin-right: 0;
border-radius: 3px;
padding: 0 6px;
}
#file-library-search-result .ty-search-item.active .file-list-item-count {
padding-right: 0;
}
#sidebar-loading-template {
display: none;
margin-bottom: 5px;
border-radius: 5px;
padding: 8px;
}
.ty-file-search-match-text {
background-color: var(--color-2-0-c);
}
/*
* ------------------------
* file-library-tree
* ------------------------
*/
#file-library-tree {
box-sizing: border-box;
padding-top: 8px;
padding-left: 14px;
padding-right: 14px;
}
.file-node-root {
position: relative;
margin-left: 0 !important;
padding-left: 0 !important;
}
.file-tree-node {
margin-bottom: 1px;
}
.file-node-children {
margin-left: 12px;
}
.file-node-root > .file-node-children {
margin-left: -2px;
}
.file-tree-node > .file-node-content > .file-node-open-state + .file-node-icon {
margin-left: 4px;
}
.file-node-expanded > .file-node-content > .file-node-open-state + .file-node-icon,
.file-node-collapsed > .file-node-content > .file-node-open-state + .file-node-icon {
margin-left: 3px;
}
.fa-folder:before,
.fa-folder:after,
.fa-caret-right,
.fa-caret-down {
color: var(--text-grey);
}
.file-node-content .file-node-open-state {
position: relative;
padding-left: 3px;
}
.file-node-expanded .file-node-content .file-node-open-state {
padding-left: 3px;
}
.file-node-content .file-node-open-state::after {
content: "";
position: absolute;
z-index: 20;
left: 0;
top: -21px;
width: 8px;
height: 32px;
border-left: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
background: transparent;
}
.file-node-expanded > .file-node-content .file-node-open-state::after {
left: -12px;
top: -21px;
width: 7px;
}
.file-node-root > .file-node-content .file-node-open-state::after {
display: none;
}
.file-tree-node:first-child > .file-node-content .file-node-open-state::after {
top: -11px;
height: 22px;
}
.file-node-expanded:first-child > .file-node-content .file-node-open-state::after {
top: -11px;
}
.file-tree-node:last-child > .file-node-content .file-node-open-state::after {
border-bottom-left-radius: 3px;
}
.file-node-collapsed > .file-node-content .fa-caret-right {
margin-left: 9px;
}
.file-node-expanded {
margin-left: 8px;
border-left: 1px solid var(--border-color);
}
.file-tree-node:last-child {
border-left-color: transparent;
}
.file-node-expanded > .file-node-content {
margin-left: 3px;
}
.file-node-root > .file-node-content {
margin-left: 0;
}
.file-node-content {
position: relative;
padding-top: 3px;
}
.file-node-content::after {
content: '';
display: none;
position: absolute;
z-index: -1;
left: 6px;
top: 0;
width: calc(100% - 10px);
height: 29px;
background: var(--bg-color2);
border-radius: 5px;
}
.file-library-file-node:hover > .file-node-content::after,
.file-tree-node.active > .file-node-content::after {
display: block;
}
.file-library-file-node:hover > .file-node-content > .file-node-open-state:after,
.file-tree-node.active > .file-node-content > .file-node-open-state:after {
width: 6px;
}
.file-node-background {
display: none !important;
}
.file-library-node:not(.file-node-root):focus > .file-node-content {
outline: none;
}
/*
* ------------------------
* TOC md-toc
* ------------------------
*/
.md-toc {
margin: 16px 0 0 0;
font-size: 14px;
}
.md-toc-content {
position: relative;
margin: 0 0 0 3px;
padding: 0;
}
.md-toc-content:before {
content: '';
position: absolute;
left: 0;
top: 12px;
width: 1px;
height: calc(100% - 30px);
border-left: 1px solid var(--border-color);
}
.md-toc:focus .md-toc-content {
margin: 0 !important;
border: none !important;
}
.md-toc-content .md-toc-item {
position: relative;
padding-bottom: 8px;
}
.md-toc-content .md-toc-item:before {
content: '';
position: absolute;
top: 8px;
left: -2px;
width: 5px;
height: 5px;
background: var(--border-color);
border-radius: 50%;
}
.md-toc-content .md-toc-h1::before {
background: var(--color-1);
}
.md-toc-item a.md-toc-inner:hover {
text-decoration: none;
}
.md-toc-item:has(a.md-toc-inner:hover)::before {
background: var(--color-2);
}
.md-toc-item a.md-toc-inner:hover code {
background: var(--color-2-0-a);
color: var(--color-2);
}
.md-toc-item a {
padding-left: 18px !important;
}
#write div.md-toc-tooltip {
z-index: 100;
top: -52px;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 3px 0;
}
.md-toc-content .md-toc-h1 a {
padding-left: 20px;
}
#write div.md-toc-tooltip .md-delete-toc {
margin: 0 !important;
padding: 0 10px;
background: var(--bg-color);
}
#write div.md-toc-tooltip .md-delete-toc:hover {
background: var(--bg-color2);
color: var(--color-1);
}
/*
* ------------------------
* code colors
* ------------------------
*/
.cm-s-inner {
background-color: transparent !important;
color: var(--text-code);
}
.cm-s-inner .CodeMirror-gutters {
border-right-color: var(--border-color);
color: var(--text-code);
}
.cm-s-inner .CodeMirror-guttermarker,
.cm-s-inner .CodeMirror-guttermarker-subtle,
.cm-s-inner .CodeMirror-linenumber {
color: var(--md-char-color);
}
.cm-s-inner .CodeMirror-cursor {
border-left: 1px solid var(--border-color);
}
.cm-s-inner div.CodeMirror-selected,
.cm-s-inner.CodeMirror-focused div.CodeMirror-selected,
.cm-s-inner .CodeMirror-line::selection,
.cm-s-inner .CodeMirror-line > span::selection,
.cm-s-inner .CodeMirror-line > span > span::selection,
.cm-s-inner .CodeMirror-line::-moz-selection,
.cm-s-inner .CodeMirror-line > span::-moz-selection,
.cm-s-inner .CodeMirror-line > span > span::-moz-selection {
background: var(--color-2-0-c);
}
.cm-s-inner .CodeMirror-activeline-background { background: transparent; }
.cm-s-inner .cm-keyword { color: #bb59fd; }
.cm-s-inner .cm-operator { color: #40d7ec; }
.cm-s-inner .cm-variable { color: #f4395dff; }
.cm-s-inner .cm-variable-2 { color: #e2785f; }
.cm-s-inner .cm-variable-3 { color: #6083ff; }
.cm-s-inner .cm-builtin { color: #f61d78; }
.cm-s-inner .cm-atom { color: #fa5336; }
.cm-s-inner .cm-number { color: #f59102; }
.cm-s-inner .cm-def { color: #3876eb; }
.cm-s-inner .cm-string { color: #02be74; }
.cm-s-inner .cm-string-2 { color: #0a790a; }
.cm-s-inner .cm-comment,
.cm-s-inner .cm-meta { color: var(--md-char-color); }
.cm-s-inner .cm-attribute { color: #c08b01; }
.cm-s-inner .cm-property { color: #1b9f72; }
.cm-s-inner .cm-qualifier { color: #dc7b45; }
.cm-s-inner .cm-tag { color: #e32e73; }
.cm-s-inner .cm-tag.cm-bracket {color: #0c9bd3;}
.cm-s-inner .cm-header, .cm-s-inner.cm-header {color: #401df1;}
.cm-s-inner .CodeMirror-matchingbracket {
text-decoration: underline;
color: var(--text-code) !important;
}
/* apply to code fences with plan text*/
.md-fences {
background-color: var(--bg-color2);
color: var(--text-grey);
}
.md-fences .code-tooltip {
z-index: 50;
right: 0 !important;
bottom: -28px !important;
padding: 0;
border-radius: 5px;
background-color: var(--bg-color2);
color: var(--text-color);
}
.md-fences .code-tooltip input,
.md-fences .code-tooltip span {
margin: 0;
padding: 3px;
border-radius: 5px;
}
/**
* --------------------------------------
* unibody-window
* Control UI on Windows/Linux (optional)
* --------------------------------------
*/
.unibody-window #write ul,
.typora-export #write ul {
padding-left: 34px;
}
.unibody-window #write ol,
.typora-export #write ol {
padding-left: 36px;
}
.unibody-window #write ul ul,
.unibody-window #write ol ol,
.unibody-window #write ul > li > ol,
.unibody-window #write ol > li > ul,
.typora-export #write ul ul,
.typora-export #write ol ol,
.typora-export #write ul > li > ol,
.typora-export #write ol > li > ul {
margin-left: 0;
}
.unibody-window #write ul > li > p {
margin: 0;
}
.unibody-window #write ol > li > p,
.typora-export #write ol > li > p {
margin: 0 0 0 -2px;
}
.unibody-window #write ul > .task-list-item > input,
.typora-export #write ul > .task-list-item > input {
margin-left: -22px;
}
.unibody-window .long-btn {
border-radius: 8px !important;
}
/* .dropdown-menu */
.dropdown-menu {
margin-top: 4px;
padding: 8px !important;
border-radius: 8px !important;
border: 1px solid var(--border-color);
}
#recent-file-panel-search-input,
.megamenu-menu-panel .btn,
.dropdown-menu li a,
.dropdown-menu li:hover {
border-radius: 5px !important;
}
.ty-spell-check-panel-item {
margin-bottom: 4px;
border-radius: 5px;
}
.btn-split-group .dropdown-menu {
margin-top: 0;
}
.dropdown-menu li a {
font-size: 14px;
}
.dropdown-menu table th,
.dropdown-menu table td {
padding: 5px !important;
}
.dropdown-menu li:hover > a,
.dropdown-menu li > span > a:hover,
#sidebar-files-menu li:hover > a,
#close-sidebar-menu-btn:hover {
background: var(--bg-color2) !important;
color: var(--color-1) !important;
}
.dropdown-menu li > span > a:hover {
background: var(--color-1-0-b) !important;
box-shadow: inset 0 0 0 1px var(--color-1), inset 0 -1px 0 var(--color-1);
}
.dropdown-menu li.file-action-item,
.dropdown-menu li.file-sort-item,
.dropdown-menu li.file-sort-item + li {
margin-top: 0;
border-radius: 0 !important;
}
/* .toolbar-icon */
.unibody-window .long-btn:hover span,
.unibody-window .long-btn:hover i,
.megamenu-menu-panel .btn:hover,
#megamenu-menu-header-title:hover,
.toolbar-icon:hover,
#megamenu-back-btn:hover i {
color: var(--color-1);
text-decoration: none;
}
.unibody-window .long-btn:hover,
.megamenu-menu-panel .btn:hover,
#megamenu-back-btn:hover {
border-color: var(--color-1);
background: var(--bg-color2);
}
#w-titlebar-left {
margin-top: 3px;
}
#w-traffic-lights span {
background: transparent !important;
border-radius: 0 !important;
border: none !important;
}
#w-traffic-lights .btn {
margin: 0 !important;
}
#w-traffic-lights #w-min,
#w-traffic-lights #w-close,
#w-traffic-lights #w-max {
padding-top: 8px;
padding-left: 18px;
}
#w-traffic-lights #w-close {
border-top-right-radius: 8px !important;
}
#w-max-group.w-show-more > #w-full,
#w-max-group.w-show-more > #w-pin {
display: block !important;
background: var(--bg-color2) !important;
}
#w-max-group *,
#w-max-group.w-show-more > #w-full *,
#w-max-group.w-show-more > #w-pin * {
color: var(--text-color) !important;
}
#w-max-group.w-show-more > #w-pin {
border-bottom-left-radius: 5px !important;
border-bottom-right-radius: 5px !important;
}
#w-traffic-lights > span:not(#w-close):hover {
background: var(--bg-color2) !important;
color: var(--text-color);
}
#w-traffic-lights #w-close:hover {
background: var(--color-5) !important;
color: white !important;
}
#w-max-group.w-show-more > #w-full:hover *,
#w-max-group.w-show-more > #w-pin:hover * {
color: var(--color-1) !important;
}
/* #megamenu-content, #megamenu-menu-sidebar */
.unibody-window #megamenu-menu-sidebar {
--bg-color: #1b1b1f;
--bg-color2: rgb(40, 42, 50);
--border-color: rgb(60, 62, 70);
background: var(--bg-color);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
overflow: hidden;
}
#megamenu-menu-sidebar .megamenu-menu-list {
border: none;
}
.megamenu-section {
margin-top: 12px;
}
.megamenu-menu-panel h1 {
margin-top: 32px;
margin-bottom: 32px;
font-size: 30px;
line-height: 30px;
}
#megamenu-section-about h1 {
text-align: center;
}
.megamenu-menu-panel h2 {
font-size: 26px;
line-height: 26px;
}
.megamenu-menu-panel .btn {
padding: 6px 12px;
}
.megamenu-menu-panel .long-btn {
padding: 10px 12px;
text-align: center;
}
.megamenu-content {
padding-right: 30px;
padding-top: 26px;
background: var(--bg-color);
}
.megamenu-menu-panel #recent-file-panel .dropdown-menu {
margin-top: 4px;
}
#open-theme-folder-btn {
margin-top: 32px;
}
.megamenu-menu-header {
border-color: var(--border-color);
}
.megamenu-menu-header #megamenu-back-btn {
margin-left: 10px;
border-radius: 6px;
border-width: 2px;
}
.megamenu-menu-header #megamenu-back-btn > i {
display: block;
font-size: 16px;
line-height: 28px;
}
.megamenu-menu-header #megamenu-menu-header-title:hover {
color: var(--color-1);
}
#megamenu-menu-list {
padding: 0 8px;
}
.megamenu-menu-list li {
margin-top: 6px;
}
.megamenu-menu-list li a {
display: block;
border-radius: 5px;
border: 1px solid transparent;
font-size: 16px;
line-height: 34px;
}
.megamenu-menu-list li a .fa {
display: inline-block;
margin-left: 0;
margin-right: 0;
opacity: 1;
font-size: 18px;
line-height: 38px;
}
.megamenu-menu-list li a .fa + span {
margin-left: 14px;
}
.megamenu-menu-list li #m-saved .fa {
font-size: 20px;
line-height: 36px !important;
color: var(--color-1);
}
.megamenu-menu-list li a:hover,
.megamenu-menu-list li a.active:hover {
background: var(--bg-color2) !important;
border: 1px solid var(--color-1);
color: var(--color-1) !important;
}
.megamenu-menu-list li a.active {
background: var(--bg-color2);
color: var(--color-1) !important;
}
@media (max-width: 768px) {
#megamenu-back-btn {
margin-left: 0 !important;
}
.dropdown-menu {
padding: 8px !important;
}
}
#recent-file-panel-action-btn-container {
margin-right: 0;
}
#recent-file-panel-search-input {
width: calc(100% - 55px);
}
#megamenu-clear-recet-documents {
background: var(--bg-color2);
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
}
#megamenu-clear-recet-documents:hover {
color: var(--color-1);
}
.ty-show-search #info-panel-tab-search .info-panel-tab-border,
.ty-show-search #info-panel-tab-search .info-panel-tab-border,
.active-tab-files #info-panel-tab-file .info-panel-tab-border,
.active-tab-outline #info-panel-tab-outline .info-panel-tab-border {
height: 3px;
border-radius: 2px;
}
.megamenu-menu-panel {
scrollbar-width: none !important;
}
#theme-preview-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
justify-content: space-between;
grid-gap: 32px;
max-width: 100%;
}
@media (max-width: 1440px) {
#theme-preview-grid {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
@media (max-width: 1200px) {
#theme-preview-grid {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 992px) {
#theme-preview-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
#theme-preview-grid {
grid-template-columns: 1fr;
}
}
.theme-preview-div {
margin: 0;
box-sizing: border-box;
overflow: hidden;
padding: 5px;
border: 3px solid var(--border-color);
border-radius: 10px;
color: var(--color-1);
}
.theme-preview-content {
width: 100%;
height: 100%;
border-radius: 6px;
}
.theme-preview-div:hover {
border-color: var(--color-2);
}
.theme-preview-div.active {
border-color: var(--color-1);
}
.theme-preview-div .fa,
#outline-btn:hover {
color: var(--color-1) !important;
}
/* context menu */
.context-menu {
padding: 6px !important;
border-radius: 6px !important;
border: 1px solid var(--border-color);
}
.ext-context-menu {
margin: -4px 1px 0 1px;
}
.context-menu li a {
display: inline-block;
width: 100%;
border-radius: 6px !important;
}
.context-menu > .active a {
color: var(--color-1) !important;
}
.tb43e-d6bd-dbe4y {
background: var(--bg-color2);
}
/*
* ------------------------
* UI-controls
* dialogs
* ------------------------
*/
.form-control {
padding: 6px;
}
/* alert-msg */
#searchpanel-msg {
margin-top: 2px;
margin-bottom: 8px;
background: var(--color-1-0-a);
}
.alert.alert-warning,
.alert.alert-warning * {
color: var(--color-1) !important;
}
#md-searchpanel {
padding-top: 7px;
}
#md-searchpanel input,
#md-replace-type-label,
#search-panel-replace-btn,
.modal-dialog,
.modal-title,
.modal-content {
border-radius: 5px;
}
.modal-content {
padding: 8px;
border-radius: 8px;
}
#sidebar-files-menu li a {
padding-top: 5px;
padding-bottom: 5px;
}
#sidebar-files-menu .file-action-item {
line-height: 30px;
}
.ty-sidebar-search-panel {
padding-left: 14px !important;
padding-right: 14px !important;
}
#file-library-search-panel {
padding-top: 3px;
padding-bottom: 11px;
border-bottom: 1px solid var(--border-color) !important;
}
#file-library-search-input {
top: 4px;
width: 100% !important;
border-radius: 0 !important;
}
#file-library-search-input,
.native-window #file-library-search-input {
height: 28px;
border-radius: 5px !important;
font-size: 12px;
}
#ty-sidebar-search-panel .searchpanel-search-option-btn {
top: 12px;
}
#close-outline-filter-btn {
top: 12px;
right: 15px;
border: none !important;
background: transparent !important;
}
#sidebar-content #file-library-search-panel .searchpanel-search-option-btn {
top: 12px;
}
/* #root .window */
.window,
.window label {
font-size: 13px !important;
}
.window .window-header h2 {
font-size: 15px !important;
}
.window .nav-group-item {
margin: 14px 0;
font-size: 15px !important;
}
.window pre {
padding: 16px;
}
#ty-tooltip,
.ty-tooltip.shown {
padding: 6px 12px;
background: var(--bg-color2);
border-radius: 6px;
color: var(--text-color);
}
/* content footer */
footer.ty-footer,
.ty-footer .footer-item {
height: 24px;
border-top: none;
}
.ty-footer .footer-item {
margin-left: 3px;
margin-top: -5px;
border-radius: 5px;
background: var(--border-color) !important;
line-height: 24px;
}
.ty-footer #footer-word-count {
margin-right: -2px;
}
.typora-sourceview-on #toggle-sourceview-btn {
margin-left: 0;
}
#dict-install-dialog + div {
bottom: 3px !important;
}
#footer-word-count-info {
padding: 6px;
border-radius: 5px;
border: 1px solid var(--border-color);
}
#footer-word-count-info table {
border-radius: 0;
}
#footer-word-count-info table tr > td:first-of-type {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#footer-word-count-info table tr > td:last-of-type {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.export-item.active,
.export-items-list-control {
border-radius: 3px !important;
}
.nav-group-item {
border-radius: 6px !important;
}
.input-group table,
.export-detail {
border-radius: 6px !important;
}
.export-detail .file-input input {
height: 30px !important;
padding-left: 8px !important;
border-color: var(--border-color) !important;
}
.search-input {
padding: 6px 12px !important;
border-color: var(--border-color) !important;
}
.label-input-group div {
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.label-input-group div pre {
border-radius: 6px !important;
font-size: 14px !important;
}
.input-group-content {
border-radius: 6px !important;
}
.input-group-content table {
margin-top: 4px;
}
.label-hint svg {
margin-right: 3px;
}
.export-detail .input-group-content > .row {
margin-right: 16px;
}
.export-detail,
.export-item.active {
color: var(--text-color) !important;
}
.export-item.active {
color: var(--color-1) !important;
}
.md-show-hint::after {
background: var(--bg-color2) !important;
border-radius: 3px;
box-shadow: 0 0 3px var(--color-1) !important;
}
/**
* ---------------------------------
* Control UI on Mac (optional)
* ---------------------------------
*/
.sidebar-tab-btn {
margin-top: 12px !important;
color: var(--title-color);
font-size: 16px !important;
line-height: 20px !important;
vertical-align: middle;
}
.sidebar-tab-btn:hover {
color: var(--color-1);
}
.mac-os .ty-show-search .ty-tab-wrapper {
border-bottom: 1px solid var(--border-color);
}
.mac-os #sidebar-search-btn span::before {
font-size: 18px;
}
.mac-os #ty-sidebar-search-tabs input {
top: 0;
margin-right: 0;
padding: 0;
border-top: none;
border-right: none;
border-left: none;
border-radius: 0 !important;
border-bottom-width: 1px;
}
.mac-os #ty-sidebar-search-tabs .searchpanel-search-option-btn {
top: 14px;
}
.mac-os #ty-sidebar-search-tabs #ty-sidebar-search-back-btn {
margin-top: 14px !important;
}
.mac-os #ty-sidebar-search-tabs .sidebar-tab-btn {
width: 25px !important;
padding-right: 8px;
}
.mac-os #ty-sidebar-search-tabs #filesearch-regexp-option-btn {
right: 12px;
}
.mac-os #ty-sidebar-search-tabs #filesearch-word-option-btn {
right: 35px;
}
.mac-os #ty-sidebar-search-tabs #filesearch-case-option-btn {
right: 58px;
}
#ty-sidebar-footer .sidebar-footer-item {
padding-top: 4px;
padding-bottom: 4px;
}
.os-windows #ty-sidebar-footer .sidebar-footer-item {
padding-top: 0;
padding-bottom: 0;
}
#typora-quick-open {
padding: 12px;
background-color: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 8px;
}
.typora-quick-open-item,
.md-hover-tip .code-tooltip-content {
border-radius: 5px;
overflow-x: auto;
}
.code-tooltip.md-hover-tip,
.md-hover-tip .code-tooltip-content,
.md-arrow::after {
border-bottom-color: var(--color-1) !important;
background: var(--color-1) !important;
box-shadow: 0 1px 4px var(--color-1) !important;
}
.md-hover-tip .code-tooltip-content:hover a {
color: var(--color-2) !important;
}
/*
* ------------------------
* .ty-preferences
* ------------------------
*/
.sidebar {
position: relative;
}
.sidebar:after {
content: '';
display: block;
position: absolute;
width: 1px;
height: 100%;
right: -24px;
top: 0;
border-left: 1px solid var(--border-color);
}
.ty-preferences a {
font-size: 12px !important;
text-decoration: none;
color: var(--color-1);
}
.ty-preferences a:hover {
text-decoration: underline;
color: var(--color-2);
}
/*search style*/
#searchpanel-search-group .ty-search-panel-row {
padding-top: 0;
}
#searchpanel-search-group .searchpanel-search-option-btn {
top: 3px;
background: var(--bg-color);
}
#searchpanel-search-group .searchpanel-search-option-btn:hover {
color: var(--color-1);
}
.ty-search-panel-row .btn {
line-height: 14px;
}
.ty-search-panel-row .ion-close-round,
.ty-search-panel-row .ty-upload {
padding-right: 8px !important;
padding-left: 4px !important;
}
#search-panel-next,
#search-panel-replace-btn {
left: 3px;
}
#search-panel-replaceall-btn,
#search-panel-replace-btn {
padding-right: 4px !important;
padding-left: 4px !important;
text-align: center !important;
}
.ty-on-outline-filter .ty-outline-hit {
color: var(--color-2);
}
.md-search-hit {
background: var(--color-2-0-c) !important;
color: #070909 !important;
}
.md-search-select {
background: var(--color-2) !important;
color: #070909 !important;
}
/* md-notification-container */
.md-notification-container {
padding-top: calc(var(--title-bar-height) + 10px) !important;
background: var(--bg-color);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15);
font-size: 14px;
}
.native-window.os-windows .md-notification-container,
.mac-os .md-notification-container {
padding-top: 1px !important;
}
.md-notification-container #md-notification::before {
top: 8px;
font-size: 16px;
}
#md-notification .md-notification-content {
padding-bottom: 4px;
}
#md-notification p {
margin: 4px 0;
white-space: nowrap;
}
#md-notification > p:last-of-type {
margin-bottom: 8px;
}
#md-notification > p:only-of-type {
margin-bottom: 0;
}
.md-notification-container .btn {
margin: 0;
}
#md-notification .typora-search-spinner,
#md-notification .typora-export-spinner {
top: 5px !important;
}
.unibody-window #md-searchpanel .btn {
line-height: 24px !important;
}
#md-notification .typora-search-spinner > div,
#md-notification .typora-export-spinner > div {
background: var(--color-1);
}
/* 打字机模式提示 */
#md-notification .ty-enter-mode-warning-body + div {
display: flex;
display: -webkit-flex;
}
#md-notification label {
align-self: center;
}
#md-notification label > input {
margin-top: 0;
}
/*
* ------------------------
* diagram
* ------------------------
*/
.md-diagram .md-diagram-panel {
border-radius: 8px;
border-color: transparent !important;
background: var(--bg-color2);
}
pre.md-focus .md-diagram-panel {
margin-top: 4px;
}
/*
* ------------------------
* export html
* ------------------------
*/
body.typora-export {
padding: 0;
}
.typora-export code {
padding: 2px 4px;
}
.typora-export .typora-export-content {
display: flex;
display: -webkit-flex;
width: 100vw;
max-width: 1920px;
margin: 0 auto;
justify-content: center;
}
.typora-export #write {
margin: 0;
}
/* sidebar */
#typora-sidebar {
border-right-color: var(--border-color);
}
.typora-export-sidebar {
margin-right: 0;
margin-top: 0;
}
.typora-export-sidebar > .outline-content {
height: 100vh;
border-right: 1px solid var(--border-color);
padding-top: 14px;
padding-bottom: 14px;
overflow: auto;
}
.no-collapse-outline .typora-export-sidebar .outline-item-wrapper > ul li,
.typora-export-sidebar .outline-item-open > ul li {
margin-left: 1px;
}
.typora-export-no-collapse-outline .outline-expander {
display: none;
}
.typora-export-no-collapse-outline .outline-item-wrapper > .outline-children::before {
content: '';
position: absolute;
left: -24px;
top: -20px;
width: 1px;
height: calc(100% + 12px);
background: transparent;
border-left: 1px solid var(--border-color);
}
.typora-export-no-collapse-outline .outline-content li ul {
margin-left: 21px;
}
.typora-export-no-collapse-outline .outline-item-wrapper:last-of-type > .outline-children::before,
.typora-export-no-collapse-outline .outline-children > li.outline-item-wrapper:last-child > .outline-children::before {
display: none;
}
.typora-export-no-collapse-outline .outline-children > li:first-child > .outline-item::before,
.typora-export-no-collapse-outline .outline-content > li:nth-child(2) > .outline-item::before {
top: -9px;
height: calc(50% + 9px);
}
.typora-export-no-collapse-outline .outline-content > li.outline-item-wrapper:first-child > .outline-children::before {
top: -15px;
}
.typora-export .outline-expander::before,
.typora-export .outline-expander:hover::before,
.no-collapse-outline .typora-export .outline-item-wrapper > .outline-item > .outline-expander::before,
.typora-export .outline-item-open > .outline-item-wrapper > .outline-expander::before {
content: "" !important;
width: 7px;
height: 7px;
box-sizing: border-box;
padding: 0;
background: transparent;
border-top: 1.5px solid var(--text-color);
border-right: 1.5px solid var(--text-color);
z-index: 50;
}
.typora-export .outline-item-wrapper > .outline-item > .outline-expander::before,
.typora-export .outline-item-wrapper:not(.outline-item-open) > .outline-item > .outline-expander::before {
margin-top: 13px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.typora-export .outline-expander:hover::before,
.typora-export .outline-item-wrapper:not(.outline-item-open) > .outline-item > .outline-expander:hover::before,
.typora-export .outline-item-open > .outline-item > .outline-expander::before {
margin-left: 2px;
margin-top: 11px;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
}
.typora-export .outline-expander:hover::before {
margin-left: -2px;
}
.typora-export .outline-item:hover {
margin-right: 0;
}
.typora-export .outline-item-active {
background: transparent !important;
}
.typora-export .outline-item-active > .outline-item,
.typora-export .outline-item-active > .outline-item > .outline-label {
background: var(--bg-color2) !important;
color: var(--color-1);
}
.typora-export .outline-content li .outline-label {
padding-left: 9px;
}
.typora-export li.outline-item-open > .outline-item > .outline-label,
.typora-export .outline-item-wrapper:not(.outline-item-open) > .outline-item > .outline-expander:hover + .outline-label {
padding-left: 13px;
}
.typora-export-no-collapse-outline .outline-content li .outline-label {
padding-left: 0 !important;
}
.typora-export .outline-item:hover .outline-label {
color: var(--text-color);
}
.typora-export-sidebar .outline-content li > .outline-item:hover > .outline-expander::before {
border-color: var(--text-color);
}
.typora-export-sidebar .outline-item-active > .outline-item > .outline-expander::before {
border-width: 2px !important;
border-color: var(--color-1);
}
/*
* ------------------------
* @media screen
* ------------------------
*/
@media screen and (min-width: 1921px) {
.typora-export-show-outline #write {
max-width: 1312px;
padding-right: 0;
}
}
@media screen and (min-width: 1725px) {
.typora-export .outline-content {
padding-left: 5px;
}
}
@media screen and (max-width: 1724px) {
.typora-export-show-outline #write {
max-width: 1672px;
}
#write,
#typora-source .CodeMirror-lines,
.typora-export-show-outline #write {
padding: 32px 96px;
}
.typora-export-sidebar,
.typora-export-sidebar > .outline-content {
width: 280px;
}
}
@media screen and (max-width: 1440px) {
.typora-export-show-outline #write {
max-width: 1620px;
}
#write,
#typora-source .CodeMirror-lines,
.typora-export-show-outline #write {
padding: 32px 80px;
}
.typora-export-sidebar,
.typora-export-sidebar > .outline-content {
width: 260px;
}
}
@media screen and (max-width: 1200px) {
.typora-export-sidebar,
.typora-export-sidebar > .outline-content {
width: 240px;
}
#write,
#typora-source .CodeMirror-lines,
.typora-export-show-outline #write {
padding: 32px 80px;
}
}
@media screen and (max-width: 992px) {
.typora-export-sidebar,
.typora-export-sidebar > .outline-content {
display: block !important;
}
#write,
#typora-source .CodeMirror-lines,
.typora-export-show-outline #write {
padding: 32px 60px;
}
}
@media screen and (max-width: 768px) {
.typora-export-sidebar {
display: none !important;
}
#write,
.typora-export-show-outline #write {
padding: 32px;
}
h1.md-focus::before,
h2.md-focus::before,
h3.md-focus::before,
h4.md-focus::before,
h5.md-focus::before,
h6.md-focus::before,
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
left: -30px;
}
}
/*
* ------------------------
* @media print
* ------------------------
*/
@media print {
html,
body,
body #write,
body content,
body .typora-export-content {
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important; /*解决浏览器打印只有一页问题*/
padding: 0 !important;
border: none !important;
}
body .typora-export-sidebar {
display: none !important;
width: 0 !important;
}
::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
body,
body * {
scrollbar-width: none !important;
}
table,
pre,
img,
blockquote,
section,
.md-alert{
page-break-inside: avoid;
}
h1, h2, h3, h4, h5, h6 {
margin: 24pt 0 12pt;
}
h1 {
font-size: 24pt;
}
h2 {
font-size: 21pt;
}
h3 {
font-size: 18pt;
}
h4 {
font-size: 15pt;
}
h5 {
font-size: 13.5pt;
}
h6 {
font-size: 12pt;
}
p {
font-size: 12pt;
margin: 12pt 0;
}
@page {
margin: 15mm !important;
size: auto;
/*谷歌浏览器打印设置*/
@top-center {
content: '';
font-size: 9pt;
}
@bottom-center {
content: counter(page) '/' counter(pages);
font-size: 9pt;
}
}
}
================================================
FILE: mdmdt.css
================================================
/*
* ------------------------------------------------------------------------
* mdmdt.css
* (c) 2024-2025
* Author: cayxc
* Homepage: https://gitee.com/cayxc/mdmdt https://github.com/cayxc/Mdmdt
* License: Apache-2.0
* ------------------------------------------------------------------------
*/
:root {
/*--bg-color: rgb(250, 250, 250);*/
--bg-color: rgb(250, 250, 252);
--bg-color2: rgb(236, 236, 238);
--text-color: #000;
--text-grey: #666;
--text-code: #2f479f;
--title-color: #070909;
--border-color: #d2d2d2;
--color-1: #3e69d7;
--color-1-0-a: rgba(62, 105, 215, 0.15);
--color-1-0-b: rgba(62, 105, 215, 0.06);
--color-2: #f59102;
--color-2-0-a: rgba(245, 145, 2, 0.15);
--color-2-0-b: rgba(245, 145, 2, 0.06);
--color-2-0-c: rgba(245, 145, 2, 0.3);
--color-3: #03b736;
--color-3-0-a: rgba(3, 183, 54, 0.15);
--color-3-0-b: rgba(3, 183, 54, 0.06);
--color-4: #8250df;
--color-4-0-a: rgba(130, 80, 223, 0.15);
--color-4-0-b: rgba(130, 80, 223, 0.06);
--color-5: #e30f2e;
--color-5-0-a: rgba(227, 15, 46, 0.15);
--color-5-0-b: rgba(227, 15, 46, 0.06);
--md-char-color: rgba(72, 93, 108, 0.75);
--meta-content-color: var(--md-char-color);
--primary-color: var(--color-1);
--primary-btn-border-color: var(--bg-color2);
--primary-btn-text-color: var(--text-color);
--window-border: 1px solid var(--border-color);
--active-file-bg-color: var(--bg-color2);
--active-file-text-color: var(--color-1);
--active-file-border-color: var(--color-1);
--side-bar-bg-color: var(--bg-color);
--item-hover-bg-color: var(--bg-color2);
--item-hover-text-color: var(--color-1);
--select-text-bg-color: var(--color-1-0-a);
--monospace: "JetBrains Mono", "Source Code Pro", "Fira Code", Consolas, Inconsolata, "Cascadia Code", Monaco, "Ubuntu Mono", monospace;
/*--mermaid-theme: neutral;*/ /*or base, dark, forest, neutral, night*/
--mermaid-font-family: "trebuchet ms", verdana, arial, sans-serif;
--mermaid-sequence-numbers: on;
--mermaid-flowchart-curve: linear;
--mermaid--gantt-left-padding: 75;
}
html {
height: 100vh;
background-color: var(--bg-color);
font-size: 16px !important;
color: var(--text-color);
-webkit-font-smoothing: antialiased;
scroll-behavior: smooth;
scroll-padding: 14px;
}
body {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.6;
letter-spacing: 0.6px;
font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;
background: var(--bg-color);
overflow-x: hidden;
}
body.os-windows {
font-family: "Microsoft YaHei UI", "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;
letter-spacing: 1px;
}
* {
tab-size: 4;
-webkit-tab-size: 4;
-moz-tab-size: 4;
-o-tab-size: 4;
}
/*
* ------------------------
* scroll style
* ------------------------
*/
::-webkit-scrollbar,
::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
border-radius: 4px !important;
background: var(--border-color) !important;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
background: var(--bg-color2) !important;
}
html,
html * {
scrollbar-color: var(--border-color) var(--bg-color2) !important;
scrollbar-width: thin !important;
}
/*
* -----------------------------------
* h1 ~ h6, header
* p, strong, dl, em, u, kbd, hr, mark
* -----------------------------------
*/
h1, h2, h3, h4, h5, h6 {
position: relative;
line-height: 1.5;
margin: 32px 0 18px;
color: var(--title-color);
letter-spacing: 2px;
}
h1 {
font-size: 32px;
border-bottom: 1px solid var(--border-color);
}
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
#write > h1 + *,
#write > h2 + *,
#write > h3 + *,
#write > h4 + *,
#write > h5 + *,
#write > h6 + * {
margin-top: 18px !important;
}
#write > h1::before,
#write > h2::before,
#write > h3::before,
#write > h4::before,
#write > h5::before,
#write > h6::before,
#write > h1.md-focus::before,
#write > h2.md-focus::before,
#write > h3.md-focus::before,
#write > h4.md-focus::before,
#write > h5.md-focus::before,
#write > h6.md-focus::before {
display: none;
position: absolute;
left: -36px;
height: 20px;
padding-left: 6px;
padding-right: 3px;
border: 1px solid var(--color-1);
border-radius: 4px;
font-size: 12px;
font-weight: 700;
color: var(--color-1);
}
#write > h1::before,
#write > h1.md-focus::before {
content: 'h1';
top: 15px;
}
#write > h2::before,
#write > h2.md-focus::before {
content: 'h2';
top: 10.5px;
}
#write > h3::before,
#write > h3.md-focus::before {
content: 'h3';
top: 8px;
}
#write > h4::before,
#write > h4.md-focus::before {
content: 'h4';
top: 5.5px;
}
#write > h5::before,
#write > h5.md-focus::before {
content: 'h5';
top: 4px;
}
#write > h6::before,
#write > h6.md-focus::before {
content: 'h6';
top: 2.5px;
}
#write > h1:hover::before,
#write > h2:hover::before,
#write > h3:hover::before,
#write > h4:hover::before,
#write > h5:hover::before,
#write > h6:hover::before {
display: block;
}
hr {
height: 1px;
box-sizing: border-box;
background: var(--border-color);
border: none;
}
p {
margin-top: 16px;
margin-bottom: -5px;
white-space: pre-wrap !important;
}
#write > p + p {
margin-top: 24px;
}
p:has(span.md-image) {
margin-bottom: 0;
}
strong {
font-weight: 800;
color: var(--title-color);
}
u {
text-underline-offset: 4px;
text-decoration-thickness: 1.5px;
}
em {
font-weight: 400;
}
del {
color: var(--text-grey);
text-decoration: line-through;
text-decoration-color: var(--color-5);
-moz-text-decoration-color: var(--color-5);
}
mark {
border-radius: 5px;
background-color: var(--color-1);
padding: 0 4px;
color: var(--bg-color);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/*
* ------------------------
* a, link
* ------------------------
*/
a {
position: relative;
font-weight: 500;
text-decoration: none;
color: var(--color-1);
font-size: 16px;
text-underline-offset: 4px;
}
a:hover,
.md-link a:hover,
.footnotes a:hover {
color: var(--color-2);
text-decoration: underline;
cursor: pointer !important;
}
/*以下写法是防止导出pdf时再标题或代码块部分生成链接图标*/
#write p a,
#write table a,
#write blockquote a,
#write .md-alert a,
#write li a {
padding-left: 2px;
}
#write p a::before,
#write table a::before,
#write blockquote a::before,
#write .md-alert a::before,
#write li a::before {
content: "";
display: inline-block;
position: relative;
top: 2px;
right: 2px;
z-index: 30;
width: 14px;
height: 14px;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQxNDk2OTA4OTA2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE1NjgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTIyNy44NCAyMS41MDRjLTQxLjQ3MiA3LjY4LTk3LjI4IDM3Ljg4OC0xMzAuMDQ4IDcwLjY1NkM0Ny42MTYgMTQyLjg0OCAyMC40OCAyMDcuMzYgMjAuNDggMjc2Ljk5MmMwIDc1Ljc3NiAxOC45NDQgMTIzLjM5MiA3Ni4yODggMTkzLjAyNCAzMC4yMDggMzUuODQgMTA1Ljk4NCAxMDguNTQ0IDExNy4yNDggMTEyLjY0IDIuNTYgMC41MTIgNi42NTYtMTQuMzM2IDguNzA0LTMzLjI4IDIuMDQ4LTE4Ljk0NCA3LjY4LTQ4LjEyOCAxMy4zMTItNjQgMTUuODcyLTQ4LjEyOCAxNC4zMzYtNTMuNzYtMjYuNjI0LTkzLjY5NkMxNjQuODY0IDM0Ny42NDggMTQ4LjQ4IDMxNS4zOTIgMTQ4LjQ4IDI3My40MDhjMC05OC44MTYgMTAzLjQyNC0xNjEuMjggMTg1Ljg1Ni0xMTMuMTUyIDExLjc3NiA3LjE2OCA3MS4xNjggNjMuNDg4IDEzMi42MDggMTI0LjkyOCAxMjAuODMyIDEyMS44NTYgMTIwLjMyIDEyMS4zNDQgMTE1LjcxMiAxNzcuMTUyLTEuNTM2IDE5LjQ1Ni03LjY4IDM0LjgxNi0yMC45OTIgNTUuODA4LTIyLjAxNiAzNC4zMDQtMjUuMDg4IDYyLjk3Ni04LjcwNCA4OS42IDEyLjI4OCAyMC40OCAyNS42IDI3LjY0OCA1My4yNDggMjguNjcyIDMyLjc2OCAxLjUzNiA1NC4yNzItMTUuODcyIDc4Ljg0OC02Mi45NzYgMjQuNTc2LTQ2LjU5MiAzMi4yNTYtNzYuOCAzMi4yNTYtMTI2LjQ2NCAwLTUzLjc2LTE1Ljg3Mi0xMDAuODY0LTUyLjIyNC0xNTUuMTM2LTIwLjk5Mi0zMC43Mi0xNjIuODE2LTE3My41NjgtMjEwLjk0NC0yMTEuOTY4QzM4NS41MzYgMjUuMDg4IDMxMC4yNzIgNS42MzIgMjI3Ljg0IDIxLjUwNHoiIGZpbGw9IiMzZTY5ZDciIHAtaWQ9IjE1NjkiPjwvcGF0aD48cGF0aCBkPSJNMzkxLjY4IDM5MS42OGMtMjQuMDY0IDExLjI2NC0zMS4yMzIgMTguNDMyLTUxLjIgNTUuMjk2LTI0LjA2NCA0NC4wMzItMzMuMjggNzguMzM2LTMzLjc5MiAxMjggMCA1NS4yOTYgMTUuMzYgMTAxLjg4OCA1Mi4yMjQgMTU3LjE4NCAyMS41MDQgMzIuMjU2IDE3Ny4xNTIgMTg2Ljg4IDIxOS42NDggMjE5LjEzNiAzOS40MjQgMjkuMTg0IDc4LjMzNiA0Ni4wOCAxMjQuNDE2IDUzLjI0OCAxNTcuMTg0IDI0LjA2NCAzMDAuNTQ0LTk4LjgxNiAzMDAuNTQ0LTI1Ny41MzYgMC03NS43NzYtMTguOTQ0LTEyMy4zOTItNzYuMjg4LTE5My4wMjQtMzAuMjA4LTM1Ljg0LTEwNS45ODQtMTA4LjU0NC0xMTcuMjQ4LTExMi42NC0yLjU2LTAuNTEyLTYuNjU2IDE0LjMzNi04LjcwNCAzMy4yOC0yLjA0OCAxOC45NDQtNy42OCA0OC4xMjgtMTMuMzEyIDY0LTE1Ljg3MiA0OC4xMjgtMTQuMzM2IDUzLjc2IDI2LjYyNCA5My42OTYgNDQuNTQ0IDQ0LjAzMiA2MC45MjggNzYuMjg4IDYwLjkyOCAxMTguMjcyIDAgOTguODE2LTEwMy40MjQgMTYxLjI4LTE4NS44NTYgMTEzLjE1Mi0xMS43NzYtNy4xNjgtNzEuMTY4LTYzLjQ4OC0xMzIuNjA4LTEyNC45MjgtMTIwLjgzMi0xMjEuODU2LTEyMC4zMi0xMjEuMzQ0LTExNS43MTItMTc3LjE1MiAxLjUzNi0xOS40NTYgNy42OC0zNC44MTYgMjAuOTkyLTU1LjgwOCAxNC4zMzYtMjIuMDE2IDE4Ljk0NC0zNC4zMDQgMTguOTQ0LTUxLjIgMC0yMy41NTItMTMuODI0LTUxLjItMjkuMTg0LTU5LjM5Mi0xNy45Mi05LjIxNi00NS4wNTYtMTAuNzUyLTYwLjQxNi0zLjU4NHoiIGZpbGw9IiMzZTY5ZDciIHAtaWQ9IjE1NzAiPjwvcGF0aD48L3N2Zz4=");
}
#write a:hover::before {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzQxNDk3MDE4MTgyIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjExMDciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTIyNy44NCAyMS41MDRjLTQxLjQ3MiA3LjY4LTk3LjI4IDM3Ljg4OC0xMzAuMDQ4IDcwLjY1NkM0Ny42MTYgMTQyLjg0OCAyMC40OCAyMDcuMzYgMjAuNDggMjc2Ljk5MmMwIDc1Ljc3NiAxOC45NDQgMTIzLjM5MiA3Ni4yODggMTkzLjAyNCAzMC4yMDggMzUuODQgMTA1Ljk4NCAxMDguNTQ0IDExNy4yNDggMTEyLjY0IDIuNTYgMC41MTIgNi42NTYtMTQuMzM2IDguNzA0LTMzLjI4IDIuMDQ4LTE4Ljk0NCA3LjY4LTQ4LjEyOCAxMy4zMTItNjQgMTUuODcyLTQ4LjEyOCAxNC4zMzYtNTMuNzYtMjYuNjI0LTkzLjY5NkMxNjQuODY0IDM0Ny42NDggMTQ4LjQ4IDMxNS4zOTIgMTQ4LjQ4IDI3My40MDhjMC05OC44MTYgMTAzLjQyNC0xNjEuMjggMTg1Ljg1Ni0xMTMuMTUyIDExLjc3NiA3LjE2OCA3MS4xNjggNjMuNDg4IDEzMi42MDggMTI0LjkyOCAxMjAuODMyIDEyMS44NTYgMTIwLjMyIDEyMS4zNDQgMTE1LjcxMiAxNzcuMTUyLTEuNTM2IDE5LjQ1Ni03LjY4IDM0LjgxNi0yMC45OTIgNTUuODA4LTIyLjAxNiAzNC4zMDQtMjUuMDg4IDYyLjk3Ni04LjcwNCA4OS42IDEyLjI4OCAyMC40OCAyNS42IDI3LjY0OCA1My4yNDggMjguNjcyIDMyLjc2OCAxLjUzNiA1NC4yNzItMTUuODcyIDc4Ljg0OC02Mi45NzYgMjQuNTc2LTQ2LjU5MiAzMi4yNTYtNzYuOCAzMi4yNTYtMTI2LjQ2NCAwLTUzLjc2LTE1Ljg3Mi0xMDAuODY0LTUyLjIyNC0xNTUuMTM2LTIwLjk5Mi0zMC43Mi0xNjIuODE2LTE3My41NjgtMjEwLjk0NC0yMTEuOTY4QzM4NS41MzYgMjUuMDg4IDMxMC4yNzIgNS42MzIgMjI3Ljg0IDIxLjUwNHoiIGZpbGw9IiNmNTkxMDIiIHAtaWQ9IjExMDgiPjwvcGF0aD48cGF0aCBkPSJNMzkxLjY4IDM5MS42OGMtMjQuMDY0IDExLjI2NC0zMS4yMzIgMTguNDMyLTUxLjIgNTUuMjk2LTI0LjA2NCA0NC4wMzItMzMuMjggNzguMzM2LTMzLjc5MiAxMjggMCA1NS4yOTYgMTUuMzYgMTAxLjg4OCA1Mi4yMjQgMTU3LjE4NCAyMS41MDQgMzIuMjU2IDE3Ny4xNTIgMTg2Ljg4IDIxOS42NDggMjE5LjEzNiAzOS40MjQgMjkuMTg0IDc4LjMzNiA0Ni4wOCAxMjQuNDE2IDUzLjI0OCAxNTcuMTg0IDI0LjA2NCAzMDAuNTQ0LTk4LjgxNiAzMDAuNTQ0LTI1Ny41MzYgMC03NS43NzYtMTguOTQ0LTEyMy4zOTItNzYuMjg4LTE5My4wMjQtMzAuMjA4LTM1Ljg0LTEwNS45ODQtMTA4LjU0NC0xMTcuMjQ4LTExMi42NC0yLjU2LTAuNTEyLTYuNjU2IDE0LjMzNi04LjcwNCAzMy4yOC0yLjA0OCAxOC45NDQtNy42OCA0OC4xMjgtMTMuMzEyIDY0LTE1Ljg3MiA0OC4xMjgtMTQuMzM2IDUzLjc2IDI2LjYyNCA5My42OTYgNDQuNTQ0IDQ0LjAzMiA2MC45MjggNzYuMjg4IDYwLjkyOCAxMTguMjcyIDAgOTguODE2LTEwMy40MjQgMTYxLjI4LTE4NS44NTYgMTEzLjE1Mi0xMS43NzYtNy4xNjgtNzEuMTY4LTYzLjQ4OC0xMzIuNjA4LTEyNC45MjgtMTIwLjgzMi0xMjEuODU2LTEyMC4zMi0xMjEuMzQ0LTExNS43MTItMTc3LjE1MiAxLjUzNi0xOS40NTYgNy42OC0zNC44MTYgMjAuOTkyLTU1LjgwOCAxNC4zMzYtMjIuMDE2IDE4Ljk0NC0zNC4zMDQgMTguOTQ0LTUxLjIgMC0yMy41NTItMTMuODI0LTUxLjItMjkuMTg0LTU5LjM5Mi0xNy45Mi05LjIxNi00NS4wNTYtMTAuNzUyLTYwLjQxNi0zLjU4NHoiIGZpbGw9IiNmNTkxMDIiIHAtaWQ9IjExMDkiPjwvcGF0aD48L3N2Zz4=");
}
sup a,
a.reversefootnote {
padding-left: 0 !important;
}
sup a::before,
a.reversefootnote::before,
.md-toc-content .md-toc-item > a::before {
display: none;
width: 0 !important;
height: 0 !important;
background-image: none !important;
}
a:hover {
color: var(--color-2);
}
.footnotes,
.footnotes a {
font-size: 14px;
text-decoration: none;
}
.footnotes .md-def-name::before,
.footnotes .md-def-name::after {
color: var(--text-color);
}
.footnotes .md-def-url,
.md-link .md-url {
text-decoration: none;
color: var(--color-1);
}
/*
* ------------------------
* ul, ol
* ------------------------
*/
ul, ol {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
}
#write > p + ul,
#write > p + ol,
blockquote > ul,
blockquote > ol,
.md-alert > ul,
.md-alert > ol{
margin-top: 11px;
}
ul {
padding-left: 36px;
}
ol {
padding-left: 40px;
}
ol ol {
margin-left: -7px;
}
ol > li > ul {
margin-left: -7px;
}
ul > li > ol {
margin-left: -2px;
}
ul > li > p {
margin: 0 0 0 -2px;
}
ol > li > p {
margin: 0 0 0 -6px;
}
ul > .task-list-item > input {
margin-left: -22px;
}
#write li {
margin-top: 6px;
}
li > p {
margin: -5px 0;
}
#write li img,
#write li pre,
#write li figure,
#write li blockquote,
#write li .md-alert {
margin-top: 11px !important;
margin-bottom: 11px !important;
}
#write li pre pre,
#write li .md-image {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/*
* ------------------------
* image
* ------------------------
*/
img,
span.md-image {
margin: 16px auto 0 auto !important;
border-radius: 8px !important;
border: none !important;
color: var(--md-char-color);
}
p.md-focus span.md-image {
background: var(--color-1-0-b);
box-shadow: 0 0 3px var(--border-color);
}
p.md-focus span.md-image {
margin-top: 0;
}
span.md-image,
span.md-image span.md-content,
span.md-image span.md-image-src-span,
span.md-image span.md-image-before-src,
span.md-image span.md-image-after-src,
span.md-image span.md-image-input-src-btn,
span.md-image span.md-image-pick-file-btn,
span.md-image span.md-before::before,
span.md-image span.md-image-input-src-btn::before,
span.md-image span.md-image-pick-file-btn::before {
color: var(--color-1);
}
span.md-image-btn {
background: var(--bg-color2);
}
span.md-image-btn:hover::before {
color: var(--bg-color) !important;
}
span.md-image span.md-image-pick-file-btn {
border-left-color: var(--border-color);
}
.typora-export #write section:has(img),
.md-htmlblock-container section:has(img) {
display: grid;
grid-gap: 16px;
justify-content: flex-start;
align-items: center;
grid-template-columns: repeat(auto-fit, minmax(16px, auto));
grid-auto-rows: minmax(16px, auto);
}
.typora-export #write > section:has(img) {
margin-top: 16px;
}
.typora-export #write section img,
.md-htmlblock-container section img {
margin: 0 !important;
}
.typora-export #write section:has(img) span,
.md-htmlblock-container section:has(img) span {
display: block;
margin: 8px 0;
}
.typora-export #write section span > img,
.md-htmlblock-container section span > img {
margin: 8px 0 !important;
}
.typora-export #write section span > img:first-of-type,
.md-htmlblock-container section span > img:first-of-type {
margin-top: 0 !important;
}
.typora-export #write section span > img:last-of-type,
.md-htmlblock-container section span > img:last-of-type {
margin-bottom: 0 !important;
}
.typora-export #write > section:has(img):hover,
.md-htmlblock-container > section:has(img):hover{
border-radius: 8px;
background: var(--bg-color2);
padding: 16px;
transition: padding .3s linear;
-webkit-transition: padding .3s linear;
}
/*
* ------------------------
* code
* ------------------------
*/
code {
border-radius: 4px;
background: var(--color-1-0-a);
padding: 3px 5px;
color: var(--text-code);
font-size: 14px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
h1 code {
font-size: 26px;
}
h2 code {
font-size: 22px;
}
h3 code {
font-size: 18px;
}
h4 code {
font-size: 16px;
}
.outline-content .outline-item code {
font-size: 11px;
padding: 2px 4px;
border-radius: 3px;
vertical-align: middle;
}
/*
* ------------------------
* pre
* ------------------------
*/
pre {
margin-top: 16px;
margin-bottom: 0;
box-sizing: border-box;
background: var(--bg-color2) !important;
border-radius: 8px;
font-size: 14px !important;
color: var(--text-code);
}
pre pre {
background: transparent !important;
padding: 5px 10px;
border: none;
}
pre .CodeMirror-wrap {
padding: 16px 16px 16px 0;
}
pre .CodeMirror-wrap .CodeMirror-scroll {
overflow-x: auto;
}
pre .CodeMirror-sizer {
padding-left: 4px;
}
pre .CodeMirror-gutters {
background: var(--bg-color2);
border-color: var(--border-color);
}
/*
* ------------------------
* blockquote
* ------------------------
*/
blockquote,
.md-alert {
margin-top: 16px !important;
margin-bottom: 0;
padding: 16px;
background: var(--color-1-0-b);
box-sizing: border-box;
border-radius: 8px;
border-left: 4px solid var(--color-1);
border-right: 0.1px solid transparent;
border-bottom: 0.1px solid transparent;
border-top: 0.1px solid transparent;
}
blockquote > *:first-child,
.md-alert > *:first-child {
margin-top: 0 !important;
}
blockquote > *:last-child,
.md-alert > *:last-child {
margin-bottom: 0 !important;
}
.md-alert.md-alert-note {
border-left-color: var(--color-1);
background: var(--color-1-0-b);
color: var(--color-1);
}
.md-alert.md-alert-note .md-alert-text-note {
color: var(--color-1);
}
.md-alert.md-alert-caution {
border-left-color: var(--color-2);
background: var(--color-2-0-b);
color: var(--color-2);
}
.md-alert.md-alert-caution .md-alert-text-caution {
color: var(--color-2);
}
.md-alert.md-alert-tip {
border-left-color: var(--color-3);
background: var(--color-3-0-b);
color: var(--color-3);
}
.md-alert.md-alert-tip .md-alert-text-tip {
color: var(--color-3);
}
.md-alert.md-alert-important {
border-left-color: var(--color-4);
background: var(--color-4-0-b);
color: var(--color-4);
}
.md-alert.md-alert-important .md-alert-text-important {
color: var(--color-4);
}
.md-alert.md-alert-warning {
border-left-color: var(--color-5);
background: var(--color-5-0-b);
color: var(--color-5);
}
.md-alert.md-alert-warning .md-alert-text-warning {
color: var(--color-5);
}
/*
* ------------------------
* sup, sub, kbd
* ------------------------
*/
sup, sub {
font-size: 12px;
}
sup.md-footnote {
background: transparent;
padding: 0 2px;
color: var(--color-1);
}
sup.md-footnote:hover {
color: var(--color-2);
cursor: pointer;
}
kbd {
display: inline-block;
border: none;
border-image: none;
border-radius: 5px;
background: var(--title-color);
padding: 0 6px;
box-shadow: none;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
font-size: 14px;
font-weight: 900;
color: var(--bg-color);
}
::selection {
background: var(--color-2-0-c);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/*
* ------------------------
* table
* ------------------------
*/
table,
figure {
width: 100%;
margin-bottom: 0;
border-radius: 8px;
padding: 0 !important;
border-collapse: separate;
border-spacing: 0;
}
figure {
margin-top: 16px !important;
}
table {
margin-top: 0;
border: 1px solid var(--border-color) !important;
overflow: hidden;
}
table thead tr th {
background: var(--bg-color2);
}
table tbody tr:nth-child(even) td {
background: var(--bg-color2);
}
table tbody tr:nth-child(odd) td {
background: var(--bg-color);
}
table tr th, table tr td {
padding: 10px !important;
white-space: pre-wrap !important;
}
table tr td,
table thead tr th {
border-left: 1px solid var(--border-color) !important;
}
table tbody tr td:first-of-type,
table thead tr th:first-of-type {
border-left: none !important;
}
.md-grid-board-wrap table {
border: none !important;
border-radius: 0;
}
.md-grid-board-wrap table tr th,
.md-grid-board-wrap table tr td {
padding: 0 !important;
}
#md-grid-width,
#md-grid-height {
text-align: center !important;
padding: 1px 0;
}
button#md-resize-grid {
display: block !important;
width: 100%;
margin: 5px auto 0;
color: var(--bg-color);
}
button#md-resize-grid:hover {
color: var(--color-1);
border-color: var(--color-1);
}
.ty-table-edit {
margin-left: 0;
}
.md-tooltip-remove {
position: absolute;
z-index: 200;
margin-top: -28px !important;
background: var(--bg-color);
}
.md-tooltip-remove .md-delete-table {
margin-right: 10px !important;
}
.md-table-resize-popover .md-reset > a::before {
display: none !important;
}
/*
* ------------------------
* btn
* ------------------------
*/
.btn,
.btn-default,
.long-btn {
border-radius: 5px !important;
border: 1px solid var(--border-color) !important;
background: var(--bg-color2) !important;
outline: none !important;
}
.btn-primary {
background: var(--color-1) !important;
border-color: var(--color-1) !important;
color: #fff;
}
.btn:hover,
.long-btn:hover {
background: var(--color-1-0-b) !important;
border-color: var(--color-1) !important;
color: var(--color-1);
}
.btn:focus,
.long-btn:focus {
outline: none !important;
}
.btn {
margin-right: 5px !important;
}
.btn:last-of-type {
margin-right: 0;
}
.dropdown-toggle::after {
font-size: 14px;
}
.dropdown-toggle:hover::after {
color: var(--color-1);
}
/*
* ------------------------
* select
* ------------------------
*/
select {
border-radius: 6px !important;
border: 1px solid var(--border-color) !important;
padding: 6px !important;
}
option {
background: var(--bg-color);
}
/*
* ------------------------
* textarea
* ------------------------
*/
textarea {
outline: none;
padding: 16px;
border-radius: 8px;
border-color: var(--border-color);
background: var(--bg-color) !important;
color: var(--text-color) !important;
}
#write textarea {
margin-top: 14px !important;
margin-bottom: 0;
}
/*
* ------------------------
* input
* ------------------------
*/
html input,
input {
position: relative;
border-radius: 5px !important;
border: 1px solid var(--border-color);
outline: none !important;
padding: 0 6px;
line-height: 1.2;
}
html input:focus,
html textarea:focus,
html input[type="number"]:focus,
html input[type="search"]:focus,
html input[type="text"]:focus {
border-color: var(--color-1) !important;
box-shadow: none !important;
outline: none !important;
}
input::placeholder {
font-size: 14px;
color: var(--text-grey) !important;
}
/*input checkbox*/
input[type="checkbox"],
input[type="radio"] {
margin-right: 10px !important;
margin-bottom: -2px !important;
width: 14px !important;
height: 14px !important;
box-sizing: border-box;
background: transparent !important;
border: 1px solid var(--border-color) !important;
border-radius: 3px !important;
padding: 0 !important;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
list-style: none;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background: var(--color-1) !important;
border-color: transparent !important;
}
input[type="checkbox"]:checked::after {
content: "";
display: block;
position: absolute;
bottom: 2.5px;
left: 3.5px;
width: 5px;
height: 9px;
box-sizing: border-box;
background: transparent;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
}
input[type="radio"] {
border-radius: 50% !important;
-webkit-border-radius: 50% !important;
-moz-border-radius: 50% !important;
border: 1px solid var(--border-color) !important;
}
input[type="radio"]:checked::after {
content: "";
display: block;
margin: 3.5px auto;
width: 5px;
height: 5px;
box-sizing: border-box;
background: #fff;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
/*
* ------------------------
* header
* ------------------------
*/
body > header {
background: var(--bg-color) !important;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15) !important;
}
/*
* ------------------------
* md-htmlblock
* md-mathblock
* ------------------------
*/
.md-htmlblock-panel,
.md-htmlblock-container,
.md-htmlblock-container .md-htmlblock-panel-placeholder {
background: transparent;
}
.md-htmlblock-container,
.md-math-container {
border-radius: 8px;
background: var(--bg-color);
overflow: auto;
}
.md-math-container {
width: 100%;
padding: 16px;
}
.md-rawblock-on-edit .md-htmlblock-panel,
.md-rawblock-on-edit .md-mathblock-panel {
border-radius: 8px;
background: var(--bg-color2);
padding: 16px;
}
.md-mathblock-panel .md-rawblock-control {
background: transparent;
}
.md-mathblock-panel .code-tooltip {
margin: 14px 6px 0;
box-shadow: none;
border-top: 1px solid var(--border-color);
border-radius: 0;
}
.code-tooltip {
box-shadow: none;
}
.code-tooltip .ty-input {
border-color: var(--border-color);
}
.md-rawblock-on-edit .md-rawblock-input {
padding: 0;
background: transparent;
}
.md-rawblock .md-rawblock-tooltip {
float: right;
margin-top: -11px;
height: auto;
border-radius: 5px;
background: var(--bg-color2);
animation: none !important;
}
.md-rawblock .md-rawblock-tooltip span {
padding-top: 4px;
padding-bottom: 4px;
}
.md-rawblock .md-rawblock-tooltip-edit-btn:hover {
background: transparent;
}
.md-htmlblock:hover .md-htmlblock-container,
.md-htmlblock:hover .md-rawblock-tooltip,
.md-math-block:hover .md-math-container,
.md-math-block:hover .md-rawblock-tooltip,
.md-rawblock-on-edit:hover .md-rawblock-tooltip {
background: var(--bg-color2);
}
.md-inline-math script {
color: #f9007c;
}
/*
* ------------------------
* #write
* ------------------------
*/
#write {
margin: 0 auto;
width: 100%;
max-width: 1424px;
min-width: 300px;
padding: 32px 112px;
overflow: auto;
/* scroll-behavior: smooth;
scroll-padding: 16px;*/
}
#write > *:first-child {
margin-top: 0;
}
span.md-comment {
color: var(--md-char-color);
opacity: 1;
}
.md-image-btn.selected, .md-image-btn:hover {
background: var(--color-1);
}
#write pre.md-meta-block:empty:before {
color: var(--text-code);
}
/*
* ------------------------
* typora-source
* ------------------------
*/
#typora-source .CodeMirror-sizer {
padding-right: 0 !important;
}
#typora-source .CodeMirror-lines {
margin: 0 auto;
max-width: 1424px;
min-width: 300px;
padding: 32px 112px;
}
#typora-source .CodeMirror-lines pre {
border: none !important;
background: var(--bg-color) !important;
padding: 8px 16px !important;
font-size: 16px !important;
}
#typora-source .CodeMirror-activeline pre {
background: var(--bg-color2) !important;
border-radius: 6px;
}
#typora-source .CodeMirror-activeline .CodeMirror-linebackground {
background: transparent !important;
}
#typora-source .CodeMirror-lines .cm-header {
color: var(--color-2);
}
.CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
border-left: 3px solid var(--color-2);
}
.cm-s-typora-default .cm-header, .cm-s-typora-default .cm-property,
.cm-s-typora-default .cm-link {
color: var(--color-2);
}
.cm-s-inner .cm-comment, .cm-s-inner.cm-comment, .cm-overlay {
color: var(--md-char-color);
}
.cm-s-typora-default .cm-string {
color: var(--color-1);
}
.cm-s-typora-default .cm-code, .cm-s-typora-default .cm-comment {
color: var(--text-code);
}
.cm-s-typora-default .cm-tag {
color: #e31570;
}
.cm-attribute {
color: var(--color-2);
}
/*
* ------------------------
* #toc-dropmenu
* ------------------------
*/
#toc-dropmenu {
top: calc(var(--title-bar-height) + 8px) !important;
right: 18px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
#toc-dropmenu #pin-outline-btn {
display: inline-block;
top: 10px;
}
#toc-dropmenu .divider {
margin-bottom: 0;
}
/*
* ------------------------
* sidebar
* toc-content
* ------------------------
*/
.os-windows #sidebar-content {
margin-top: -1px;
border-top: 1px solid var(--border-color);
}
.os-windows .ty-show-outline-filter #sidebar-content .sidebar-content-content {
margin-top: -4px;
}
.os-windows .ty-show-search #sidebar-content .sidebar-content-content {
margin-top: -7px;
}
.sidebar-tabs {
padding: 0 2px;
}
.outline-content {
overflow: auto !important;
padding: 14px 14px 14px 17px;
font-size: 14px !important;
}
.os-windows .outline-content {
padding-top: 15px;
}
.outline-content li {
position: relative;
z-index: 30;
}
.outline-content > li:first-of-type::before {
top: 0;
}
.outline-content li ul {
position: relative;
z-index: 48;
margin-left: 18px;
margin-top: 0 !important;
}
.no-collapse-outline .outline-content li ul {
margin-left: 21px;
}
.outline-content li .outline-item {
position: relative;
z-index: 50;
margin: 0 0 3px 7px;
width: calc(100% - 4px);
border-radius: 5px;
border: none;
line-height: 1;
padding: 0 0 0 4px;
}
.outline-item > .outline-expander {
display: block;
float: left;
width: auto;
height: 0;
background: transparent;
padding-left: 0;
}
.outline-item > .outline-expander:before {
margin-top: 10px;
margin-left: -2px;
background: transparent;
padding: 0 4px 0 2px;
font-size: 10px;
}
.outline-content li .outline-label {
display: inline-block;
border-radius: 4px;
padding: 7px 7px 7px 8px;
font-size: 14px !important;
line-height: 1.2;
overflow-wrap: normal;
word-wrap: normal;
word-break: keep-all;
white-space: nowrap;
text-decoration: none;
}
.outline-item-single .outline-label,
.outline-item-single.outline-item-open .outline-label,
.no-collapse-outline .outline-content li .outline-label {
padding-left: 0 !important;
}
.outline-item > .outline-expander:hover + .outline-label,
.outline-item-open > .outline-item > .outline-label {
padding-left: 11px;
}
.no-collapse-outline .outline-item-open > .outline-item > .outline-label {
padding-left: 0 !important;
}
.outline-item-active > .outline-expander:hover + .outline-label,
.outline-item-open > .outline-item-active > .outline-label {
padding-left: 12px;
}
.outline-item-active > .outline-expander,
.outline-item-active > .outline-label {
font-weight: 900;
}
.outline-content li .outline-item::before {
content: '';
position: absolute;
z-index: 38;
left: -10px;
top: -27.5px;
width: 10px;
height: calc(50% + 28px);
background: transparent;
border-left: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.os-windows .outline-content li .outline-item::before {
top: -28.5px;
}
.outline-content > li:first-of-type > .outline-item::before {
top: calc(50% - 1px);
height: calc(50% + 15px);
border-left: 1px solid var(--border-color);
border-top: 1px solid var(--border-color);
border-bottom: none;
border-top-left-radius: 3px;
border-bottom-left-radius: 0;
}
.outline-children > li:first-child > .outline-item::before,
.outline-content > li:nth-child(2) > .outline-item::before {
top: -11px;
height: calc(50% + 12px);
}
.os-windows .outline-children > li:first-child > .outline-item::before,
.os-windows .outline-content > li:nth-child(2) > .outline-item::before {
top: -13px;
height: calc(50% + 13px);
}
.no-collapse-outline .outline-children > li:first-child > .outline-item::before,
.no-collapse-outline .outline-content > li:nth-child(2) > .outline-item::before {
top: -8px;
height: calc(50% + 8px);
}
.outline-content > li:last-child > .outline-item::before,
.outline-children > li:last-child > .outline-item::before {
border-bottom-left-radius: 3px;
}
.no-collapse-outline .outline-item-wrapper > .outline-children::before,
.outline-item-open > .outline-children::before {
content: '';
position: absolute;
left: -21px;
top: -26px;
width: 1px;
height: calc(100% + 12px);
background: transparent;
border-left: 1px solid var(--border-color);
}
.no-collapse-outline .outline-item-wrapper > .outline-children::before {
left: -24px;
}
.no-collapse-outline .outline-content > li.outline-item-wrapper:first-child > .outline-children::before,
.outline-content > li.outline-item-open:first-child > .outline-children::before {
top: -15px;
}
.outline-content > li:only-of-type > .outline-item::before,
.no-collapse-outline .outline-item-wrapper:last-of-type > .outline-children::before,
.no-collapse-outline .outline-children > li.outline-item-wrapper:last-child > .outline-children::before,
.outline-item-open:last-of-type > .outline-children::before,
.outline-children > li.outline-item-open:last-child > .outline-children::before {
display: none;
}
.outline-content > li:only-of-type {
margin-left: -8px;
}
li > .outline-item-active:before,
.outline-item:hover::before,
.outline-item-active > .outline-item::before {
width: 7px !important;
}
li > .outline-item-active,
li > .outline-item:hover,
.outline-item-active > .outline-item {
margin-left: 4px !important;
padding-left: 7px !important;
}
li > .outline-item-active::before,
li > .outline-item:hover::before,
.outline-item-active > .outline-item::before {
left: -7px !important;
}
.outline-item:hover,
.outline-item:hover > .outline-label,
.outline-item-active,
.outline-item-active > .outline-label {
background: var(--bg-color2) !important;
}
.outline-item-active > .outline-label,
.outline-item-active > .outline-expander::before {
color: var(--color-1);
}
.ty-on-outline-filter .outline-content .outline-item::before,
.ty-on-outline-filter .outline-content .outline-item::after {
display: none;
}
.ty-on-outline-filter .outline-content > li > ul,
.ty-on-outline-filter .outline-content .outline-item {
margin-left: 0;
}
/* .oultine-item search result */
.outline-content:has(.ty-outline-hit) {
padding-left: 14px;
}
.outline-content li:has(.ty-outline-hit) *::before,
.outline-content li:has(.ty-outline-hit) *::after {
content: '';
display: none;
}
.outline-content li:has(.ty-outline-hit) .outline-item {
margin-left: 1px !important;
width: calc(100% - 1px);
padding-left: 0 !important;
}
.outline-content li:has(.ty-outline-hit) .outline-item > .outline-label {
padding: 8px 10px !important;
}
/*
* --------------------------
* file-library-list
* file-library-search-result
* --------------------------
*/
#file-library-list,
#file-library-search-result {
padding: 14px;
}
/*ty-search-item*/
#file-library-list .file-list-item,
#file-library-search-result .ty-search-item {
margin-bottom: 8px;
border: 1px solid transparent;
border-bottom-color: var(--border-color);
}
#file-library-list .file-list-item {
padding-left: 14px;
padding-right: 14px;
}
#file-library-list .file-list-item.active,
#file-library-search-result .ty-search-item.active {
border-radius: 5px;
border: 1px solid var(--color-1);
}
#file-library-list .file-list-item.active {
padding: 6px 12px;
}
#file-library-search-result .ty-search-item.active {
padding: 6px 12px 6px 0;
}
#file-library-list .file-list-item:first-of-type.active,
#file-library-search-result .ty-search-item:first-of-type.active {
margin-top: 0;
}
#file-library-list .file-list-item:hover,
#file-library-search-result .ty-search-item:hover {
border-radius: 5px;
background: var(--bg-color2);
border-color: var(--border-color);
}
#file-library-list .file-list-item:hover {
color: var(--color-1);
}
#file-library-list .file-list-item:hover + .file-list-item:not(.active),
#file-library-list .file-list-item.active + .file-list-item:not(.active),
#file-library-search-result .ty-search-item:hover + .ty-search-item:not(.active),
#file-library-search-result .ty-search-item.active + .ty-search-item:not(.active) {
border-top: 1px solid var(--border-color);
}
#file-library-list .file-list-item.active:hover,
#file-library-search-result .ty-search-item.active:hover {
border-color: var(--color-1);
}
#file-library-search-result .ty-search-item.active {
color: var(--text-color);
}
#file-library-search-result .ty-search-item.active .ty-search-item-line {
white-space: pre-wrap;
word-break: break-word;
}
.file-list-item-time {
margin-right: 0;
padding-right: 0;
}
.file-list-item-count {
margin-right: 0;
border-radius: 3px;
padding: 0 6px;
}
#file-library-search-result .ty-search-item.active .file-list-item-count {
padding-right: 0;
}
#sidebar-loading-template {
display: none;
margin-bottom: 5px;
border-radius: 5px;
padding: 8px;
}
.ty-file-search-match-text {
background-color: var(--color-2-0-c);
}
/*
* ------------------------
* file-library-tree
* ------------------------
*/
#file-library-tree {
box-sizing: border-box;
padding-top: 8px;
padding-left: 14px;
padding-right: 14px;
}
.file-node-root {
position: relative;
margin-left: 0 !important;
padding-left: 0 !important;
}
.file-tree-node {
margin-bottom: 1px;
}
.file-node-children {
margin-left: 12px;
}
.file-node-root > .file-node-children {
margin-left: -2px;
}
.file-tree-node > .file-node-content > .file-node-open-state + .file-node-icon {
margin-left: 4px;
}
.file-node-expanded > .file-node-content > .file-node-open-state + .file-node-icon,
.file-node-collapsed > .file-node-content > .file-node-open-state + .file-node-icon {
margin-left: 3px;
}
.fa-folder:before,
.fa-folder:after,
.fa-caret-right,
.fa-caret-down {
color: var(--text-grey);
}
.file-node-content .file-node-open-state {
position: relative;
padding-left: 3px;
}
.file-node-expanded .file-node-content .file-node-open-state {
padding-left: 3px;
}
.file-node-content .file-node-open-state::after {
content: "";
position: absolute;
z-index: 20;
left: 0;
top: -21px;
width: 8px;
height: 32px;
border-left: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
background: transparent;
}
.file-node-expanded > .file-node-content .file-node-open-state::after {
left: -12px;
top: -21px;
width: 7px;
}
.file-node-root > .file-node-content .file-node-open-state::after {
display: none;
}
.file-tree-node:first-child > .file-node-content .file-node-open-state::after {
top: -11px;
height: 22px;
}
.file-node-expanded:first-child > .file-node-content .file-node-open-state::after {
top: -11px;
}
.file-tree-node:last-child > .file-node-content .file-node-open-state::after {
border-bottom-left-radius: 3px;
}
.file-node-collapsed > .file-node-content .fa-caret-right {
margin-left: 9px;
}
.file-node-expanded {
margin-left: 8px;
border-left: 1px solid var(--border-color);
}
.file-tree-node:last-child {
border-left-color: transparent;
}
.file-node-expanded > .file-node-content {
margin-left: 3px;
}
.file-node-root > .file-node-content {
margin-left: 0;
}
.file-node-content {
position: relative;
padding-top: 3px;
}
.file-node-content::after {
content: '';
display: none;
position: absolute;
z-index: -1;
left: 6px;
top: 0;
width: calc(100% - 10px);
height: 29px;
background: var(--bg-color2);
border-radius: 5px;
}
.file-library-file-node:hover > .file-node-content::after,
.file-tree-node.active > .file-node-content::after {
display: block;
}
.file-library-file-node:hover > .file-node-content > .file-node-open-state:after,
.file-tree-node.active > .file-node-content > .file-node-open-state:after {
width: 6px;
}
.file-node-background {
display: none !important;
}
.file-library-node:not(.file-node-root):focus > .file-node-content {
outline: none;
}
/*
* ------------------------
* TOC md-toc
* ------------------------
*/
.md-toc {
margin: 16px 0 0 0;
font-size: 14px;
}
.md-toc-content {
position: relative;
margin: 0 0 0 3px;
padding: 0;
}
.md-toc-content:before {
content: '';
position: absolute;
left: 0;
top: 12px;
width: 1px;
height: calc(100% - 30px);
border-left: 1px solid var(--border-color);
}
.md-toc:focus .md-toc-content {
margin: 0 !important;
border: none !important;
}
.md-toc-content .md-toc-item {
position: relative;
padding-bottom: 8px;
}
.md-toc-content .md-toc-item:before {
content: '';
position: absolute;
top: 8px;
gitextract_o4j_tx36/ ├── .gitignore ├── LICENSE ├── Mdmdt主题演示demo.md ├── mdmdt-dark.css ├── mdmdt-light.css ├── mdmdt.css ├── readme.md └── readme.zh.md
Condensed preview — 8 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (255K chars).
[
{
"path": ".gitignore",
"chars": 18,
"preview": ".DS_Store\n.idea/\n\n"
},
{
"path": "LICENSE",
"chars": 10777,
"preview": " Apache License\n Version 2.0, January 2004\n "
},
{
"path": "Mdmdt主题演示demo.md",
"chars": 11890,
"preview": "# 关于Mdmdt主题\n**Mdmdt **是 markdown minimalism document theme 的缩写，意为: **Markdown极简文档主题**。\n**Mdmdt**[^1]是深度定制的个性化Typora主题，其目"
},
{
"path": "mdmdt-dark.css",
"chars": 68099,
"preview": "/*\n * ------------------------------------------------------------------------\n * mdmdt-dark.css\n * (c) 2024-2025\n * Aut"
},
{
"path": "mdmdt-light.css",
"chars": 67961,
"preview": "/*\n * ------------------------------------------------------------------------\n * mdmdt-light.css\n * (c) 2024-2025\n * Au"
},
{
"path": "mdmdt.css",
"chars": 70039,
"preview": "/*\n * ------------------------------------------------------------------------\n * mdmdt.css\n * (c) 2024-2025\n * Author: "
},
{
"path": "readme.md",
"chars": 6242,
"preview": "\n# About Mdmdt theme\n\n![Languages](https://img.shields.io/badge/languages-CSS-F34B"
},
{
"path": "readme.zh.md",
"chars": 3629,
"preview": "\n# 关于Mdmdt主题\n\n\n"
}
]
About this extraction
This page contains the full source code of the cayxc/Mdmdt GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 8 files (233.1 KB), approximately 77.2k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.