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.
# 文本
这是一段正文内容样式，以下是不同文本样式效果：**这是加粗文本样式**, 这是下划线样式, *这是斜体字样式*, [这是超链接样式: https://github.com/cayxc/mdmdt](https://github.com/cayxc/mdmdt), `This is a single line code style`, ~~这是删除线效果样式~~, ==这是文字高亮效果==，上下标样式: $\LaTeX$, X^2^, H~2~O, 这是鼠标选中效果 , 键盘键样式：Command+Q 🐳 😀 🇨🇳
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~~, This is the underline style, `This is a single line code style`, keyboard key style: Command+Q, $\LaTeX$ X^2^H~2~O, ==This is the text highlighting effect==, This is the mouse selection effect 🐳 😀 🇨🇳
# 数学公式
直接使用公式：
$$
\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 [!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 ......
# 个性化图文布局
## 单张图片
## 多图并排
图片的个性化排列使用方式是将图片放到一个容器中，该容器为 `` 标签，如下所示:
1. 直接输入`` 然后回车，如下：
2. ```html
```
3. 在 `` 标签中插入图片，如下：
4. ```html
```
**效果预览**：
---
---
## 多张图其他排列方式
一张大图在左，多张小图在右的图片排列，如下：
```html
```
**效果预览**：
---
一张大图在右，多张小图在左的图片排列，如下：
```html
```
**效果预览**：
## 图文并排
图文的个性化排列使用方式是将图片和文字放到一个容器中，该容器为 `` 标签，如下所示:
1. 直接输入 `` 然后回车，如下：
2. ```html
```
3. 在 `` 标签中插入图片和文字，如下：
4. ```html
这是文字在右，图片在左，图片和文字各占总宽度的50%的图文并排的样式。
这是文字在左，图片在右，图片和文字各占总宽度的50%的图文并排的样式。
这是多段文字......
这是文字在右，图片在左，图片和文字各占总宽度的50%的图文并排的样式。
这是多段文字......
这是第1列，这是图片居中，文字在两边的样式
这是第3列，列的宽度比第1列小
```
**效果预览**：
这是单段文字，文字在右，图片在左，图片和文字各占总宽度的50%的图文并排的样式。
---
这是单段文字，文字在左，图片在右，图片和文字各占总宽度的50%的图文并排的样式。
---
这是多段文字......
这是文字在右，图片在左，图片和文字各占总宽度的50%的图文并排的样式。
这是多段文字......
---
这是第1列内容
这是图片居中，两边是文字，且两边文字设置相同宽度的样式
这是第3列内容
这是图片居中，两边是文字，且两边文字设置相同宽度的样式
这是中间是图片，两边是文字的图文样式
需要注意：该列文字内容较多，且未设置宽度。列的宽度比第3列大
这是第3列内容
---
图片和文字，图片设置宽度示例：
```html
这是文字在右，图片在左，且设置图片的宽度（如图片宽可以设置为：200px）的图文并排的样式。
这是文字在左，图片在右，设置图片宽度为 200px 的图文并排的样式！
```
**效果预览**：
---
这是文字在右，图片在左，且设置图片宽度（如图片宽可以设置为：200px）的图文并排的样式。
这是文字在左，图片在右，且设置图片宽度为 200px 的图文并排的样式！
---
> [!Important]
>
> **注意：**
>
> 由于图片排列的容器 `` 采用的是grid布局，会根据 `` 中有几列和每列里的内容自动分配每一列的宽度。
>
> 在进行图片、图片和文字排列时，如果将某一列的宽度设置为 xx%的形式，则该列的实际宽度并不一定是内容区宽度的 xx%，而是 `` 容器中当前列宽度的 xx%，且当前列的宽度还受到了里面内容的影响。
>
> **基于以上原因，建议在单独设置某一列宽度的时候，尽可能采用具体的值（如: style="width: 200px"），不要采用 xx%（如: style="width: 50%"）的形式。**
>
> 示例：
>
> ```html
>
>
>
>
>
>
>
>
>
>
>
> ....
>
> 这是其段落他文字...
>
> 这是多段文字
> 这是其段落他文字...
>
>
> ```
除了以上展示的排列方式，更多的排列形式，还请自行探索 ......
# 图表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;
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;
}
}
/*
* ------------------------
* dark style
* ------------------------
*/
@media (prefers-color-scheme: dark) {
/* colors */
:root {
--bg-color: #1b1b1f;
--bg-color2: rgb(40, 42, 50);
--text-color: #d0d0d0;
--text-grey: rgb(70, 75, 80);
--text-code: #bbc7fd;
--title-color: var(--text-color);
--border-color: var(--text-grey);
--color-1-0-a: rgba(62, 105, 215, 0.3);
--color-1-0-b: rgba(62, 105, 215, 0.12);
--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-0-a: rgba(3, 183, 54, 0.3);
--color-3-0-b: rgba(3, 183, 54, 0.12);
--color-4-0-a: rgba(130, 80, 223, 0.3);
--color-4-0-b: rgba(130, 80, 223, 0.12);
--color-5-0-a: rgba(227, 15, 46, 0.3);
--color-5-0-b: rgba(227, 15, 46, 0.12);
--md-char-color: #667c89ff;
--mermaid-theme: dark;
}
/* scroll style */
::-webkit-scrollbar-thumb {
background: var(--text-grey) !important;
}
::-webkit-scrollbar-track {
background: var(--bg-color2) !important;
}
html,
html * {
scrollbar-width: thin !important;
scrollbar-color: var(--text-grey) var(--bg-color2) !important;
}
strong {
color: #cfdfff;
}
mark {
color: rgb(250, 250, 250);
}
kbd {
background: var(--color-2);
color: rgb(250, 250, 250);
}
body > header,
.md-notification-container {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
.md-notification-container {
border-bottom: 1px solid var(--border-color);
}
#w-traffic-lights > span:not(#w-close):hover {
color: var(--text-color) !important;
}
#megamenu-menu-sidebar {
border-right: 1px solid var(--border-color);
box-shadow: none;
}
.CodeMirror div.CodeMirror-cursor {
border-color: var(--text-color);
}
.export-detail,
.export-item.active,
.export-items-list-control {
background: var(--bg-color2) !important;
}
/*code colors*/
.cm-s-inner .cm-header, .cm-s-inner.cm-header {color: #41cce9;}
}
/*
* ------------------------
* @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: readme.md
================================================
# About Mdmdt theme
#### [中文文档](./readme.zh.md)
**Mdmdt** is an abbreviation for Markdown Minimalism Document Theme, meaning: Markdown Minimalism Document Theme.**Mdmdt** is a deeply customized personalized Typora theme, aimed at creating a **refreshing and minimalist** document style. The **Mdmdt** theme has now been included in the [official Typora theme library](https://theme.typoraio.cn).
Compared to the default theme style, the following aspects have been mainly modified:
1. Simple and comfortable color matching style
2. Modify the title style
3. Modify the table style
4. Modify the reference box style
5. Add rounded corner style to the image
6. Add highlight style to code
7. Modify file tree, outline, and document list styles
8. Automatic follow system's light/dark theme mode (can be set separately for light/dark themes)
9. Modify other UI styles
> [!IMPORTANT]
>
> **Attention:** This theme has only been tested in Windows and MacOS environments, and has not been tested in Linux environments. Please be aware when using it!
# Preview
---
# Personalized graphic layout
This theme provides some personalized graphic and text layout solutions. For specific usage methods, please refer to the "个性化图文布局" chapter in the "**Mdmdt主题演示demo.md**".
**Personalized graphic layout preview:**
# Usage
Using custom themes is very simple, as follows:
1. Open `Preferences` -> `Appearance` -> `Open Theme Folder`
2. Copy the downloaded `mdmdt.css` file to the theme folder.
3. **Exit Typora and reopen**，In the `Menu Bar` -> `Themes`, Select **Mdmdt** theme and complete the theme switch.
> [!NOTE]
>
> **Note:** The mdmdt.css file contains both bright and dark themes, which will automatically switch between bright and dark themes according to the system mode.
##### Use separate Light/Dark theme
If you only want to use a separate bright or dark theme, the method is as follows:
1. Open `Preferences` -> `Appearance` -> `Open Theme Folder`
2. Copy `mdmdt-light.css` or `mdmdt-dark.css ` to the theme folder.
3. **Exit Typora and reopen**，In the `Menu Bar` -> `Themes`, Select **Mdmdt Light** or **Mdmdt Dark** theme and complete the theme switch.
# Modify font
If you are not satisfied with the font, you can refer to the following methods to modify the corresponding font:
1. Modify the text font and find: `font-family: "PingFang SC", "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;` , Then add the font you want to use in the first position after "font-family:", such as: `font-family: "The font name you want to use", "PingFang SC", ..., sans-serif;`; Modify the font of the text in the Windows environment and find: ` body.os-windows{...}`, Modify according to the previous method.
2. Modify the code font and find: `--monospace: "JetBrains Mono", "Source Code Pro", "Fira Code", Consolas, Inconsolata, "Cascadia Code", Monaco, "Ubuntu Mono", monospace;`，Then add the font you want to use in its first position, such as: `--monospace: "The font name you want to use", "JetBrains Mono", ..., monospace;`
**Attention: The prerequisite for changing the font is that the corresponding font is installed on your computer, otherwise the modification is invalid;** If you are not familiar with the "font-family" property of CSS, you can refer to it here: https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family
# Export HTML
To export an HTML file, you can directly select the current theme to export HTML
**If you want to export HTML files with customizable styles, you can use the Mdtht plugin:**
Plugin homepage address: [Mdtht-Github-address](https://github.com/cayxc/Mdtht) [Mdtht-Gitee-address]( https://gitee.com/cayxc/mdtht )
This plugin provides the following rich features:
1. Follow the system to automatically switch between bright and dark color modes.
2. Manually switch between light and dark color modes.
3. Automatically generate table of contents numbers and body area title indexes.
4. You can choose to convert the first title into an article title and center the title.
5. Automatically correct the directory hierarchy based on the position of the titles in the main text.
6. Show/hide directory index numbers.
7. Switch between three types of directory button styles.
8. Automatically track the current reading area location to the current directory and upper level directory.
9. Expand the screwdriver directory with one click.
10. One click expand and collapse the sidebar.
11. Catalog search.
12. Code highlighting.
13. Text Shadow Mode.
Please refer to the plugin homepage for specific details of **mdtht.js** plugin.
**Export mdtht.js as an HTML rendering (Light theme)**
---
**Export mdtht.js as an HTML rendering (Dark theme)**
---
---
🐳 If you like the style of this document, please provide a star 😄， If there are any issues during use, please submit them in a timely manner and I will handle them as soon as I see them.
================================================
FILE: readme.zh.md
================================================
# 关于Mdmdt主题
#### [English Document](./readme.md)
**Mdmdt** 是 markdown minimalism document theme 的缩写，意为：**Markdown极简文档主题**。
**Mdmdt** 是深度定制的个性化Typora主题，其目的是打造一个 **清爽极简** 的文档样式。**Mdmdt** 主题现已收录至 [Typora官方主题库https://theme.typoraio.cn](https://theme.typoraio.cn/).
相比于默认主题风格主要修改了以下几个方面：
1. 简洁舒适的配色风格
2. 修改标题样式
3. 修改表格样式
4. 修改引用框样式
5. 为图片添加圆角样式
6. 代码添加高亮样式
7. 修改文件树、大纲和文档列表样式
8. 自动跟随系统的亮色/暗色主题模式（可单独设置亮/暗主题)
9. 修改其他UI样式
> [!IMPORTANT]
>
> **注意：**该主题只在 Windows 和 MacOS 环境下测试过，Linux环境下未做测试，使用时还请注意！
# 预览
---
# 个性化图文布局
本主题提供了一些个性化图文布局方案，具体使用方法请参考 “**Mdmdt主题演示demo.md**” 中的“个性化图文布局”章节相关内容。
**个性化图文布局预览:**
# 如何使用
使用自定义主题非常简单，方法如下：
1. 打开 `偏好设置` -> `外观` -> `打开主题文件夹`
2. 将下载好的 `mdmdt.css文件` 复制到主题文件夹下
3. **退出 Typora 重新打开**，在 `菜单栏` -> `主题` 选择 **Mdmdt** 主题，完成主题切换。
> [!NOTE]
>
> **注意：**mdmdt.css 文件中包含了亮色和暗色两者主题，会跟随系统模式自动切换亮暗主题。
##### 使用单独的亮色/暗色主题
如果只想使用单独的亮色或暗色主题，方法如下：
1. 打开 `偏好设置` -> `外观` -> `打开主题文件夹`
2. 复制 `mdmdt-light.css` 或者 `mdmdt-dark.css` 到 `主题文件夹下`
3. 重新打开Typora，在 `菜单栏` -> `主题` 选择 **Mdmdt Ligh** 或者 **mdmdt Dark** 主题，完成主题切换。
# 修改字体
如果您对字体不满意，可以参照如下方法修改相应的字体：
1. 修改正文字体，找到：`font-family: "PingFang SC", "Microsoft YaHei", Arial, "Helvetica Neue", Helvetica, sans-serif;` 在 “font-family:” 后第一个位置添加你想使用的字体，如：`font-family: "想使用的字体名称", "PingFang SC", ..., sans-serif;`；Windows环境下修改正文字体，找到：`body.os-windows{...}`，按照前面方式修改。
2. 修改代码字体，找到：`--monospace: "JetBrains Mono", "Source Code Pro", "Fira Code", Consolas, Inconsolata, "Cascadia Code", Monaco, "Ubuntu Mono", monospace;`， 然后在其第一个位置添加你想使用的字体，如：`--monospace: "想使用的字体名称", "JetBrains Mono", ..., monospace;`
**注意：更换字体的前提是你电脑上要安装有相应的字体，否则修改无效**。如果您不了解 CSS 的 "font-family" 属性，可以参考这里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family
# 导出html
想要导出 html 文件可以直接选择当前主题导出 html
**如果想要导出的 html 文件能自定义更多样式，可以使用 Mdtht 插件：**
插件主页地址：[Mdtht-Gitub地址](https://github.com/cayxc/Mdtht) [Mdtht-Gitee地址](https://gitee.com/cayxc/mdtht)
该插件提供了如下丰富功能：
1. 跟随系统自动切换亮色/暗色模式。
2. 手动切换亮色/暗色模式。
3. 自动生成目录编号和正文区标题索引。
4. 可选择将第一个标题转换为文章标题，并将标题居中。
5. 根据正文中标题的位置自动纠正目录层级。
6. 显示/隐藏目录索引编号。
7. 3种目录按钮样式切换。
8. 根据当前阅读区位置自动追踪到所在目录和上层目录。
9. 一键展开收起子目录。
10. 一键展开收起侧边栏。
11. 目录搜索。
12. 代码高亮。
13. 文字阴影模式。
**mdtht.js** 插件具体详情请参考插件主页。
**mdtht.js导出为 html 效果图（亮色）**
---
**mdtht.js导出为 html 效果图（暗色）**
---
---
🐳 如果您喜欢该文档样式风格，还请给一个 star 😄，使用过程中有什么问题请及时提交 issues，看到后我会第一时间处理。
