:root {
? ? /********************************* Text alignment 文本對齊方式 *************************************
? ? **************************************************************************************************
? ? * - left:? ? ? ? Align Left? ? ? ? 左對齊
? ? * - right:? ? ? ? Align right? ? ? ? 右對齊
? ? * - center:? ? ? Align center? ? ? 居中對齊
? ? * - justify:? ? ? Align justify? ? ? 兩端對齊
? ? * - justify-all:? Align justify-all? 全部兩端對齊
? ? * - start:? ? ? ? Align start? ? ? ? 行首對齊
? ? * - end:? ? ? ? ? Align end? ? ? ? ? 行尾對齊
? ? **************************************************************************************************/
? ? --text-align: justify;
? ? /************************* Interactive animation configuration 交互動畫配置 ************************
? ? **************************************************************************************************
? ? ** 1.To use interactive animations, first set --use-dynamic-effect` to 1, Then adjust other
? ? **? configuration items as needed.
? ? ** 2.To turn off all interactive animations, set `--use-dynamic-effect` to 0
? ? **? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? set `--list-ol-text-style` to italic
? ? *
? ? ** 1.若要使用交互動畫, 請先將 `--use-dynamic-effect` 設置為 1, 然后根據需要調整其他配置項
? ? ** 2.若要關閉全部交互動畫, 請將 `--use-dynamic-effect` 設置為 0?
? ? **? ? ? ? ? ? ? ? ? ? ? ? ? ? `--list-ol-text-style` 設置為 italic
? ? *
? ? * 其余配置項請根據需要自行配置
? ? * - 0: Close 關閉
? ? * - 1: Open 開啟
? ? **************************************************************************************************/
? ? /* Use/Close interactive animations 使用/關閉交互動畫 */
? ? --use-dynamic-effect: 1;
? ? /* H1 interactive effect 一級標題交互效果 */
? ? --h1-hover-effect: 1;
? ? /* H2 interactive effect 二級標題交互效果 */
? ? --h2-after-effect: 1;
? ? /* H3 H4 H5 H6 interactive effect 三,四,五,六級標題交互效果 */
? ? --h3-6-hover-effect: 1;
? ? /* Paragraph interactive effect 段落交互效果 */
? ? --p-hover-effect: 1;
? ? /* Image interactive effect 圖片交互效果 */
? ? --img-hover-effect: 1;
? ? /* Blockquote interactive effect 引用塊交互效果 */
? ? --blockquote-hover-effect: 1;
? ? /* Alert interactive effect 提示框交互效果 */
? ? --alert-hover-effect: 1;
? ? /* Strong text interactive effect 粗體文本交互效果 */
? ? --strong-hover-effect: 1;
? ? /* Italic text interactive effect 斜體文本交互效果 */
? ? --em-hover-effect: 1;
? ? /* Underline interactive effect 下劃線交互效果 */
? ? --u-hover-effect: 1;
? ? /* Marked text interactive effect 高亮文本交互效果 */
? ? --mark-hover-effect: 1;
? ? /* Deleted text interactive effect 刪除線交互效果 */
? ? --del-hover-effect: 1;
? ? /* Inline code block interactive effect 內聯代碼塊交互效果 */
? ? --code-hover-effect: 1;
? ? /* Code block interactive effect 代碼塊交互效果 */
? ? --fence-hover-effect: 1;
? ? /* List interactive effect 列表交互效果
? ? * The following two values need to be changed synchronously
? ? * 下面兩個值需同步更改 0-italic or 1-normal */
? ? --list-marker-effect: 1;
? ? --list-ol-text-style: normal;
? ? /* Divider interactive effect 分割線交互效果 */
? ? --hr-hover-effect: 1;
? ? /* Table interactive effect 表格交互效果 */
? ? --table-hover-effect: 1;
? ? /*************************** Theme color configuration 主題顏色配置 ********************************
? ? **************************************************************************************************
? ? * -
? ? **************************************************************************************************/
? ? --body-text-color: #282c34;
? ? --content-write-bg-color: #fefefe;
? ? --selection-color: #def2e8;
? ? --write-h1-before-bg: linear-gradient(90deg, rgba(152, 251, 152, 0), #e8f4ee, rgba(152, 251, 152, 0));
? ? --write-h2-after-bg: linear-gradient(90deg, rgba(106, 158, 69, 0), #3ea174, rgba(106, 158, 69, 0));
? ? --p-hover-bg-color: rgba(123, 181, 147, calc(0.1 * var(--p-hover-effect) * var(--use-dynamic-effect)));
? ? --ul-marker-color: #087725;
? ? --ulul-marker-color: #087725;
? ? --ululul-marker-color: #087725;
? ? --ol-hover-marker-color:rgb(0, calc(100 * var(--list-marker-effect) * var(--use-dynamic-effect)), 0);
? ? --blockquote-border-color: #2f845e;
? ? --blockquote-bg-color: #e8f4eb;
? ? --blockquote-hover-border-color: #2f845e;
? ? --blockquote-thead-bg-color: #3b9457;
? ? --blockquote-thead-text-color: #3b3b3b4e;
? ? --blockquote-td-bg-color: #fafafa;
? ? --alert-tip-border-color: #1F883D;
? ? --alert-tip-bg-color: #e8f4eb;
? ? --alert-tip-hover-border-color: #1F883D;
? ? --alert-tip-thead-bg-color: #3b9457;
? ? --alert-tip-thead-text-color: #fafbfa;
? ? --alert-caution-border-color: #CF222E;
? ? --alert-caution-bg-color: #f5ecec;
? ? --alert-caution-hover-border-color: #CF222E;
? ? --alert-caution-hover-bg-color: #cf222d0a;
? ? --alter-caution-selection-bg-color: #cf222d17;
? ? --alert-caution-text-color: #CF222E;
? ? --alert-caution-thead-bg-color: #d83c46;
? ? --alert-caution-thead-text-color: #fafbfa;
? ? --alert-caution-td-hover-bg-color: #f5ecec;
? ? --alert-caution-list-item-marker-color: #CF222E;
? ? --alert-warning-border-color: #9A6700;
? ? --alert-warning-bg-color: #f4f1e9;
? ? --alert-warning-hover-border-color: #9A6700;
? ? --alert-warning-hover-bg-color: #9a67000a;
? ? --alert-warning-selection-bg-color: #9a670017;
? ? --alert-warning-text-color: #9A6700;
? ? --alert-warning-thead-bg-color: #b7831c;
? ? --alert-warning-thead-text-color: #fafbfa;
? ? --alert-warning-list-item-marker-color: #9A6700;
? ? --alert-important-border-color: #8250DF;
? ? --alert-important-bg-color: #eae6f2;
? ? --alert-important-hover-border-color: #8250DF;
? ? --alert-important-hover-bg-color: #8250df0a;
? ? --alert-important-selection-bg-color: #8250df17;
? ? --alert-important-text-color: #8250DF;
? ? --alert-important-thead-bg-color: #8250DF;
? ? --alert-important-thead-text-color: #fafbfa;
? ? --alert-important-list-item-marker-color: #8250DF;
? ? --alert-note-border-color: #0969DA;
? ? --alert-note-bg-color: #e5ebf1;
? ? --alert-note-hover-border-color: #0969DA;
? ? --alert-note-hover-bg-color: #0969da0a;
? ? --alert-note-selection-bg-color: #0969da17;
? ? --alert-note-text-color: #0969DA;
? ? --alert-note-thead-bg-color: #0969DA;
? ? --alert-note-thead-text-color: #fafbfa;
? ? --alert-note-list-item-marker-color: #0969DA;
? ? --alert-code-bg-color: #67676716;
? ? --alert-code-3circle-1: #fc625d;
? ? --alert-code-3circle-2: #fdbc40;
? ? --alert-code-3circle-3: #34c759;
? ? --alert-td-bg-color: #fafafa;
? ? --hr-bg-image: linear-gradient(90deg, #5ea67c, #2f845e, #5ea67c);
? ? --hr-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
? ? --table-border-color: #e0e0e0;
? ? --table-td-hover-bg: rgba(239, 245, 242, calc(0.7 * var(--table-hover-effect))) calc(var(--table-hover-effect) * 100%);
? ? --blockquote-td-hover-bg: rgba(239, 245, 242, calc(0.7 * var(--table-hover-effect))) calc(var(--table-hover-effect) * 100%);
? ? --alert-tip-td-hover-bg: rgba(239, 245, 242, calc(0.7 * var(--table-hover-effect))) calc(var(--table-hover-effect) * 100%);
? ? --alert-caution-td-hover-bg: rgba(245, 236, 236, calc(0.7 * var(--table-hover-effect))) calc(var(--table-hover-effect) * 100%);
? ? --alert-warning-td-hover-bg: rgba(245, 241, 236, calc(0.7 * var(--table-hover-effect))) calc(var(--table-hover-effect) * 100%);
? ? --alert-important-td-hover-bg: rgba(236, 236, 245, calc(0.7 * var(--table-hover-effect))) calc(var(--table-hover-effect) * 100%);
? ? --alert-note-td-hover-bg: rgba(236, 236, 245, calc(0.7 * var(--table-hover-effect))) calc(var(--table-hover-effect) * 100%);
? ? --table-thead-bg-color: #eff5f2;
? ? --table-thead-text-color: #06621e;
? ? --table-tbody-border-color: #e8f4ee;
? ? --table-edit-bg-color: #ffffff;
? ? --table-edit-hover-bg-color: #e8f4ee;
? ? --table-webkit-box-shadow-color1: rgba(0, 0, 0, 0.16);
? ? --table-webkit-box-shadow-color2: rgba(0, 0, 0, 0.12);
? ? --table-reset-bg-color: #ffffff;
? ? --table-reset-input-color: #282c34;
? ? --table-some-border-top-color: #eee;
? ? --table-meta-block-bg-color: #eaf3ec;
? ? --table-meta-block-color: #3f8a5f;
? ? --task-list-border-color: #737373;
? ? --task-list-bg-color: #ffffff;
? ? --task-list-input-after-border-color: #fff;
? ? --task-list-input-checked-bg-color: #399b6f;
? ? --task-list-done-color: #999;
? ? --math-html-webkit-box-shadow-color1: rgba(0, 0, 0, 0.16);
? ? --math-html-webkit-box-shadow-color2: rgba(0, 0, 0, 0.12);
? ? --math-html-rawblock-bg-color: #f5f6f7;
? ? --math-html-rawblock-control-bg-color: #f5f6f7;
? ? --math-html-rawblock-tooltip-bg-color: #f5f6f7;
? ? --math-html-rawblock-input-color: #282c34;
? ? --math-html-rawblock-gutter-bg-color: #f5f6f7;
? ? --math-html-rawblock-selected-bg-color: #bac6e9;
? ? --math-html-rawblock-selected-bg-color2: #def2e8;
? ? --strong-color: #06621e;
? ? --em-color: #000000;
? ? --em-hover-color: #006400;
? ? --u-border-color: rgb(9, 156, 70);
? ? --code-bg-color: rgba(221, 235, 213, 0.5);
? ? --code-color: #359d09;
? ? --code-hover-bg-color: rgba(221, 235, 213, calc(0.5 + 0.5 * var(--code-hover-effect) * var(--use-dynamic-effect)));
? ? --del-color: rgba(50, 100, 50, 0.5);
? ? --del-text-decoration-color:rgba(76, 175, 80, 0.7);
? ? --del-hover-color: rgba(50, 100, 50, calc(0.5 + 0.5 * var(--del-hover-effect) * var(--use-dynamic-effect)));
? ? --del-hover-text-decoration-color: rgba(76, 175, 80, calc(0.7 + 0.3 * var(--del-hover-effect) * var(--use-dynamic-effect)));
? ? --mark-bg-color: #aee6c3;
? ? --mark-hover-bg-color: rgba(174, 230, 195, calc(1 - 0.5 * var(--mark-hover-effect) * var(--use-dynamic-effect)));
? ? --a-color: #0c8f94;
? ? --a-hover-color: #02502a;
? ? --code-fences-color: #2f4f4f;
? ? --code-fences-bg-color: #ffffff;
? ? --code-fences-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
? ? --code-fences-before-bg: #015e19;
? ? --code-fences-before-box-shadow: 20px 0 #068f28, 40px 0 rgb(116, 219, 38);
? ? --code-fences-3circle-1: #fc625d;
? ? --code-fences-3circle-2: #fdbc40;
? ? --code-fences-3circle-3: #34c759;
? ? --cm-s-inner-linenumber-color: #2f845e;
? ? --scrollbar-track-bg: #fafafa;
? ? --scrollbar-thumb-bg: linear-gradient(to top right, #4aad23, #1b5b3e) !important;
? ? --quick-open-bg-color: #fff;
? ? --quick-open-color: #282c34;
? ? --quick-open-item-active-bg-color: #bac6e9;
? ? --quick-open-category-border-color: #eee;
? ? --modal-dialog-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
? ? --modal-dialog-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
? ? --modal-dialog-bg-color: #f5f6f7;
? ? --modal-dialog-btn-default-hover-bg-color: #bac6e9;
? ? --preferences-color: #282c34;
? ? --preference-sidebar-nav-group-item-active-color: #efefef;
? ? --preference-sidebar-nav-group-item-active-bg-color: #2f845e;
? ? --html-for-mac-sidebar-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
? ? --html-for-mac-sidebar-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
? ? --notification-bg-color: #fff;
? ? --notification-hover-bg-color: #bac6e9;
? ? --menu-sidebar-color: #282c34;
? ? --menu-sidebar-list-border-color: #2f353a;
? ? --menu-sidebar-list-bg-color: #2f353a;
? ? --menu-sidebar-li-a-color: #e3dede;
? ? --menu-sidebar-li-a-active-hover-color: #3e4249;
? ? --megamenu-content-color: #000;
? ? --sidebar-bg-color: #2f845e;
? ? --sidebar-content-file-list-item-border-color: #eee;
? ? --sidebar-content-file-list-item-active-bg-color: rgba(66, 185, 131, 0.1);
? ? --sidebar-content-file-list-item-active-border-color: #2f845e;
? ? --sidebar-content-file-list-item-search-pannel-border-color: #eee;
? ? --sidebar-content-file-list-item-search-pannel-search-option-btn-bg-color: #fff;
? ? --file-tree-node-hover-border-color: #2f845e;
? ? --file-tree-node-hover-bg-color: rgba(66, 185, 131, 0.1);
? ? --file-tree-node-active-border-color: #2f845e;
? ? --file-tree-node-active-bg-color: rgba(66, 185, 131, 0.1);
? ? --file-library-file-node-hover-border-color: #2f845e;
? ? --file-library-file-node-hover-bg-color: rgba(66, 185, 131, 0.1);
? ? --outline-item-hover-bg-color: #e8f4ee;
? ? --sidebar-footer-border-color: #eee;
? ? --sidebar-footer-hover-bg-color: #caebdb;
? ? --sidebar-files-menu-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
? ? --sidebar-files-menu-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
? ? --dropdown-menu-border-color: #eee;
? ? --dropdown-menu-li-a-color: #282c34;
? ? --dropdown-menu-li-a-hover-color: #e8f4ee;
? ? --dropdown-menu-divider-border-color: #fff;
? ? --toc-bg-color: #fff;
? ? --toc-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
? ? --toc-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
? ? --toc-hover-bg-color: #caebdb;
? ? --auto-suggest-container-bg-color: #d4eee1;
? ? --source-color: #6a6a6a;
? ? --source-cm-header-color: #428bca;
? ? --source-cm-atom-color: #777777;
}
content #write {
? ? background-color: var(--content-write-bg-color);
? ? max-width: 95%;
? ? margin: 0 auto;
? ? padding-bottom: 7.5rem;
}
content #write p {
? ? word-spacing: 0.1rem;
? ? line-height: 1.9rem;
? ? margin: 3px;
}
content #write ol li {
? ? padding-left: 0.5rem;
}
content #write>h5.md-focus:before {
? ? top: 2px;
}
::-moz-selection {
? ? background-color: var(--selection-color);
}
::selection {
? ? background-color: var(--selection-color);
}
/* h1-h3 */
#write h1,
#write h2,
#write h3 {
? ? font-style: normal;
}
#write h1,
#write h2 {
? ? text-align: center;
? ? margin-top: 2rem;
? ? margin-bottom: 1rem;
}
#write h1 {
? ? font-size: 2.4rem;
? ? position: relative;
? ? overflow: hidden;
? ? transition: transform 0.4s ease;
}
#write h1:before {
? ? content: "";
? ? position: absolute;
? ? top: 0;
? ? left: 0;
? ? width: 100%;
? ? height: 100%;
? ? background: var(--write-h1-before-bg);
? ? transition: transform 0.4s ease;
? ? transform: scaleX(0);
? ? transform-origin: center;
? ? z-index: -1;
? ? display: calc(var(--h1-hover-effect) * var(--use-dynamic-effect));
}
#write h1:hover {
? ? transform: scale(calc(1 + 0.1 * var(--h1-hover-effect) * var(--use-dynamic-effect)));
}
#write h1:hover:before {
? ? transform: scaleX(calc(var(--h1-hover-effect) * var(--use-dynamic-effect)));
}
#write h2 {
? ? font-size: 2rem;
? ? position: relative;
? ? padding-bottom: 0rem;
? ? font-weight: bold;
? ? margin-bottom: 0rem;
}
#write h2:after {
? ? content: "";
? ? display: block;
? ? width: 30rem;
? ? height: 2.5px;
? ? margin: 0.5rem auto 0;
? ? background: var(--write-h2-after-bg);
? ? border-radius: 10px;
? ? transform: scaleX(0);
? ? transition: transform 0.4s ease, background 0.4s ease;
}
#write h2:hover:after {
? ? transform: scaleX(calc(1 * var(--h2-after-effect) * var(--use-dynamic-effect)));
}
#write h3 {
? ? font-size: 1.8rem;
}
#write h4 {
? ? font-size: 1.5rem;
}
#write h5 {
? ? font-size: 1.3rem;
}
#write h6 {
? ? font-size: 1.2rem;
}
#write h3,
#write h4,
#write h5,
#write h6 {
? ? position: relative;
? ? margin-top: 1.0rem;
? ? margin-bottom: 0.5rem;
? ? transition: transform 0.3s ease;
}
#write h3:hover,
#write h4:hover,
#write h5:hover,
#write h6:hover {
? ? transform: scale(calc(1 + 0.01 * var(--h3-6-hover-effect) * var(--use-dynamic-effect)));
}
/* image */
img {
? ? border-radius: 10px;
? ? max-width: 100%;
? ? display: block;
? ? margin: 1em auto;
? ? transition: transform 0.15s ease, border-radius 0.15s ease;
}
img:hover {
? ? transform: scale(calc(1 + 0.01 * var(--img-hover-effect) * var(--use-dynamic-effect)));
? ? border-radius: calc(10px - 10px * var(--img-hover-effect) * var(--use-dynamic-effect));
}
/* paragraph */
p {
? ? font-size: 1rem;
? ? padding: 0 0.3rem;
? ? transition: all 0.25s ease;
}
p:not(:has(img)):hover {
? ? background-color: var(--p-hover-bg-color);
}
p.md-toc-content:hover {
? ? padding-left: 20px;
}
/* ul ol */
ul,
ol {
? ? padding-left: 1.5rem;
}
ul:first-child,
ol:first-child {
? ? margin-top: 0;
}
ul:last-child,
ol:last-child {
? ? margin-bottom: 0;
}
body {
? font-family: "LXGW WenKai", sans-serif !important;
}
@keyframes bounce {
? ? 0%,
? ? 100% {
? ? ? ? transform: scale(1);
? ? }
? ? 50% {
? ? ? ? transform: scale(calc(1 + 0.3 * var(--list-marker-effect) * var(--use-dynamic-effect)));
? ? }
}
ul .md-list-item::marker {
? ? list-style-type: disc;
? ? font-size: 27px !important;
? ? color: var(--ul-marker-color);
? ? transition: transform 0.3s;
}
ul .md-list-item:hover::marker {
? ? animation: bounce 0.6s ease-in-out;
}
ul ul .md-list-item::marker {
? ? list-style-type: circle;
? ? font-size: 27px;
? ? color: var(--ulul-marker-color);
? ? font-weight: bold;
? ? transition: transform 0.3s;
}
ul ul .md-list-item:hover::marker {
? ? animation: bounce 0.6s ease-in-out;
}
ul ul ul .md-list-item::marker {
? ? list-style-type: square;
? ? font-size: 27px;
? ? color: var(--ululul-marker-color);
? ? transition: transform 0.3s;
}
ul ul ul .md-list-item:hover::marker {
? ? animation: bounce 0.6s ease-in-out;
}
ol .md-list-item::marker {
? ? font-family: "Times New Roman", Times, serif;
? ? font-size: 20px;
? ? font-style: italic;
? ? transition: font-weight 0.2s ease, font-style 0.2s ease, color 0.2s ease, font-size 0.2s ease;
}
ol .md-list-item:hover::marker {
? ? font-style: var(--list-ol-text-style);
? ? font-weight: calc(500 + 100 * var(--list-marker-effect) * var(--use-dynamic-effect));
? ? font-size: calc(20px + 3px * var(--list-marker-effect) * var(--use-dynamic-effect));
? ? color: var(--ol-hover-marker-color);
}
/* blockquote */
blockquote {
? ? padding: 0.5rem 1rem;
? ? border-left: 8px solid var(--blockquote-border-color);
? ? background-color: var(--blockquote-bg-color);
? ? border-radius: 7px;
? ? transition: box-shadow 0.3s ease, border-radius 0.3s ease, border-left 0.3s ease;
}
blockquote p {
? ? margin: 0.1rem 0;
}
blockquote:hover {
? ? border-left: calc(8px + 1px * var(--blockquote-hover-effect) * var(--use-dynamic-effect)) solid var(--blockquote-hover-border-color);
? ? box-shadow: calc(0px + 1px * var(--blockquote-hover-effect) * var(--use-dynamic-effect)) calc(1px + 1px * var(--blockquote-hover-effect) * var(--use-dynamic-effect)) calc(3px + 3px * var(--blockquote-hover-effect) * var(--use-dynamic-effect)) rgba(0, 0, 0, calc(0.15 * var(--blockquote-hover-effect) * var(--use-dynamic-effect)));
? ? border-radius: calc(7px + 8px * var(--blockquote-hover-effect) * var(--use-dynamic-effect));
}
blockquote table thead,
blockquote .md-table-fig .md-table thead {
? ? background-color: var(--blockquote-thead-bg-color);
? ? color: var(--blockquote-thead-text-color);
}
blockquote td {
? ? background-color: var(--blockquote-td-bg-color);
}
.md-alert.md-alert-tip {
? ? padding: 0.5rem 1rem;
? ? border-left: 8px solid var(--alert-tip-border-color);
? ? background-color: var(--alert-tip-bg-color);
? ? border-radius: 7px;
? ? transition: box-shadow 0.3s ease, border-radius 0.3s ease, border-left 0.3s ease;
}
.md-alert.md-alert-tip:hover {
? ? border-left: calc(8px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) solid var(--alert-tip-hover-border-color);
? ? box-shadow: calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(1px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(3px + 3px * var(--alert-hover-effect) * var(--use-dynamic-effect)) rgba(0, 0, 0, calc(0.15 * var(--alert-hover-effect) * var(--use-dynamic-effect)));
? ? border-radius: calc(7px + 8px * var(--alert-hover-effect) * var(--use-dynamic-effect));
}
.md-alert.md-alert-tip table thead,
.md-alert.md-alert-tip .md-table-fig .md-table thead {
? ? background-color: var(--alert-tip-thead-bg-color);
? ? color: var(--alert-tip-thead-text-color);
}
.md-alert.md-alert-caution {
? ? padding: 0.5rem 1rem;
? ? border-left: 8px solid var(--alert-caution-border-color);
? ? background-color: var(--alert-caution-bg-color);
? ? border-radius: 7px;
? ? transition: box-shadow 0.3s ease, border-radius 0.3s ease, border-left 0.3s ease;
}
.md-alert.md-alert-caution:hover {
? ? border-left: calc(8px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) solid var(--alert-caution-hover-border-color);
? ? box-shadow: calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(1px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(3px + 3px * var(--alert-hover-effect) * var(--use-dynamic-effect)) rgba(0, 0, 0, calc(0.15 * var(--alert-hover-effect) * var(--use-dynamic-effect)));
? ? border-radius: calc(7px + 8px * var(--alert-hover-effect) * var(--use-dynamic-effect));
}
.md-alert.md-alert-caution p:hover {
? ? background-color: var(--alert-caution-hover-bg-color);
}
.md-alert.md-alert-caution ::selection {
? ? background-color: var(--alter-caution-selection-bg-color);
}
.md-alert.md-alert-caution strong,
.md-alert.md-alert-caution em,
.md-alert.md-alert-caution code,
.md-alert.md-alert-caution a {
? ? color: var(--alert-caution-text-color);
}
.md-alert.md-alert-caution table thead,
.md-alert.md-alert-caution .md-table-fig .md-table thead {
? ? background-color: var(--alert-caution-thead-bg-color);
? ? color: var(--alert-caution-thead-text-color);
}
.md-alert.md-alert-caution td:hover {
? ? background-color: var(--alert-caution-td-hover-bg-color);
}
.md-alert.md-alert-caution ul .md-list-item::marker,
.md-alert.md-alert-caution ul ul .md-list-item::marker,
.md-alert.md-alert-caution ul ul .md-list-item::marker,
.md-alert.md-alert-caution ol .md-list-item:hover::marker {
? ? color: var(--alert-caution-list-item-marker-color);
}
.md-alert.md-alert-warning {
? ? padding: 0.5rem 1rem;
? ? border-left: 8px solid var(--alert-warning-border-color);
? ? background-color: var(--alert-warning-bg-color);
? ? border-radius: 7px;
? ? transition: box-shadow 0.3s ease, border-radius 0.3s ease, border-left 0.3s ease;
}
.md-alert.md-alert-warning:hover {
? ? border-left: calc(8px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) solid var(--alert-warning-hover-border-color);
? ? box-shadow: calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(1px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(3px + 3px * var(--alert-hover-effect) * var(--use-dynamic-effect)) rgba(0, 0, 0, calc(0.15 * var(--alert-hover-effect) * var(--use-dynamic-effect)));
? ? border-radius: calc(7px + 8px * var(--alert-hover-effect) * var(--use-dynamic-effect));
}
.md-alert.md-alert-warning p:hover {
? ? background-color: var(--alert-warning-hover-bg-color);
}
.md-alert.md-alert-warning ::selection {
? ? background-color: var(--alert-warning-selection-bg-color);
}
.md-alert.md-alert-warning strong,
.md-alert.md-alert-warning em,
.md-alert.md-alert-warning code,
.md-alert.md-alert-warning a {
? ? color: var(--alert-warning-text-color);
}
.md-alert.md-alert-warning table thead,
.md-alert.md-alert-warning .md-table-fig .md-table thead {
? ? background-color: var(--alert-warning-thead-bg-color);
? ? color: var(--alert-warning-thead-text-color);
}
.md-alert.md-alert-warning ul .md-list-item::marker,
.md-alert.md-alert-warning ul ul .md-list-item::marker,
.md-alert.md-alert-warning ul ul .md-list-item::marker,
.md-alert.md-alert-warning ol .md-list-item:hover::marker {
? ? color: var(--alert-warning-list-item-marker-color);
}
.md-alert.md-alert-important {
? ? padding: 0.5rem 1rem;
? ? border-left: 8px solid var(--alert-important-border-color);
? ? background-color: var(--alert-important-bg-color);
? ? border-radius: 7px;
? ? transition: box-shadow 0.3s ease, border-radius 0.3s ease, border-left 0.3s ease;
}
.md-alert.md-alert-important:hover {
? ? border-left: calc(8px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) solid var(--alert-important-hover-border-color);
? ? box-shadow: calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(1px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(3px + 3px * var(--alert-hover-effect) * var(--use-dynamic-effect)) rgba(0, 0, 0, calc(0.15 * var(--alert-hover-effect) * var(--use-dynamic-effect)));
? ? border-radius: calc(7px + 8px * var(--alert-hover-effect) * var(--use-dynamic-effect));
}
.md-alert.md-alert-important p:hover {
? ? background-color: var(--alert-important-hover-bg-color);
}
.md-alert.md-alert-important ::selection {
? ? background-color: var(--alert-important-selection-bg-color);
}
.md-alert.md-alert-important strong,
.md-alert.md-alert-important em,
.md-alert.md-alert-important code,
.md-alert.md-alert-important a {
? ? color: var(--alert-important-text-color);
}
.md-alert.md-alert-important table thead,
.md-alert.md-alert-important .md-table-fig .md-table thead {
? ? background-color: var(--alert-important-thead-bg-color);
? ? color: var(--alert-important-thead-text-color);
}
.md-alert.md-alert-important ul .md-list-item::marker,
.md-alert.md-alert-important ul ul .md-list-item::marker,
.md-alert.md-alert-important ul ul .md-list-item::marker,
.md-alert.md-alert-important ol .md-list-item:hover::marker {
? ? color: var(--alert-important-list-item-marker-color);
}
.md-alert.md-alert-note {
? ? padding: 0.5rem 1rem;
? ? border-left: 8px solid var(--alert-note-border-color);
? ? background-color: var(--alert-note-bg-color);
? ? border-radius: 7px;
? ? transition: box-shadow 0.3s ease, border-radius 0.3s ease, border-left 0.3s ease;
}
.md-alert.md-alert-note:hover {
? ? border-left: calc(8px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) solid var(--alert-note-hover-border-color);
? ? box-shadow: calc(0px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(1px + 1px * var(--alert-hover-effect) * var(--use-dynamic-effect)) calc(3px + 3px * var(--alert-hover-effect) * var(--use-dynamic-effect)) rgba(0, 0, 0, calc(0.15 * var(--alert-hover-effect) * var(--use-dynamic-effect)));
? ? border-radius: calc(7px + 8px * var(--alert-hover-effect) * var(--use-dynamic-effect));
}
.md-alert.md-alert-note p:hover {
? ? background-color: var(--alert-note-hover-bg-color);
}?
.md-alert.md-alert-note ::selection {
? ? background-color: var(--alert-note-selection-bg-color);
}
.md-alert.md-alert-note strong,
.md-alert.md-alert-note em,
.md-alert.md-alert-note code,
.md-alert.md-alert-note a {
? ? color: var(--alert-note-text-color);
}
.md-alert.md-alert-note table thead,
.md-alert.md-alert-note .md-table-fig .md-table thead {
? ? background-color: var(--alert-note-thead-bg-color);
? ? color: var(--alert-note-thead-text-color);
}
.md-alert.md-alert-note ul .md-list-item::marker,
.md-alert.md-alert-note ul ul .md-list-item::marker,
.md-alert.md-alert-note ul ul .md-list-item::marker,
.md-alert.md-alert-note ol .md-list-item:hover::marker {
? ? color: var(--alert-note-list-item-marker-color);
}
.md-alert p {
? ? margin: 0.1rem 0;
}
blockquote code,
.md-alert.md-alert-tip code,
.md-alert.md-alert-caution code,
.md-alert.md-alert-warning code,
.md-alert.md-alert-important code,
.md-alert.md-alert-note code {
? ? background-color: var(--alert-code-bg-color);
}
.md-alert.md-alert-tip .md-fences::before,
.md-alert.md-alert-caution .md-fences::before,
.md-alert.md-alert-warning .md-fences::before,
.md-alert.md-alert-important .md-fences::before,
.md-alert.md-alert-note .md-fences::before {
? ? background: var(--alert-code-3circle-1);
? ? box-shadow: 20px 0 var(--alert-code-3circle-2), 40px 0 var(--alert-code-3circle-3);
}
blockquote td,
.md-alert.md-alert-tip td,
.md-alert.md-alert-caution td,
.md-alert.md-alert-warning td,
.md-alert.md-alert-important td,
.md-alert.md-alert-note td {
? ? background-color: var(--alert-td-bg-color);
}
.md-alert-text-container {
? ? font-size: 20px;
}
/* horizontal line */
hr {
? ? position: relative;
? ? margin-top: 2rem;
? ? margin-bottom: 2rem;
? ? border: none;
? ? border-top: 2px solid transparent;
? ? background-image: var(--hr-bg-image);
? ? height: 1.5px;
? ? overflow: visible;
? ? color: #abb2bf;
? ? opacity: 0.8;
? ? border-radius: 5px;
? ? box-shadow: var(--hr-box-shadow);
? ? animation: dashAnimation 0.5s ease-in-out;
? ? transition: transform 0.3s ease, background-position 0.3s ease, height 0.3s ease;
? ? background-size: 200% 100%;
? ? background-position: 0 0;
}
hr:hover {
? ? background-position: calc(100% * var(--hr-hover-effect) * var(--use-dynamic-effect)), 0;
? ? transform: scale(calc(1 + 0.02 * var(--hr-hover-effect) * var(--use-dynamic-effect)));
? ? height: calc(1.5px + 1px * var(--hr-hover-effect) * var(--use-dynamic-effect));
}
@keyframes dashAnimation {
? ? 0% {
? ? ? ? width: calc(100% - 100% * var(--hr-hover-effect) * var(--use-dynamic-effect));
? ? ? ? opacity: calc(1 - 1 * var(--hr-hover-effect) * var(--use-dynamic-effect));
? ? }
? ? 100% {
? ? ? ? width: 100%;
? ? ? ? opacity: 1;
? ? }
}
/* table */
table,
.md-table-fig .md-table {
? ? border: 1px solid var(--table-border-color);
? ? border-radius: 10px;
? ? border-collapse: separate;
? ? overflow: hidden;
}
table th,
table td,
.md-table-fig .md-table th,
.md-table-fig .md-table td {
? ? padding: 10px 16px;
? ? border-top: 1px solid var(--table-border-color);
? ? border: 0.5px solid var(--table-border-color);
? ? transition: all 0.3s ease;
}
table th,
.md-table-fig .md-table th {
? ? border-bottom: 1px solid var(--table-border-color);
? ? border-top: 0;
}
table td:hover,
.md-table-fig .md-table td:hover {
? ? background: var(--table-td-hover-bg);
? ? transition: all calc(0.3s * var(--table-hover-effect)) ease;
}
blockquote td:hover {
? ? background: var(--blockquote-td-hover-bg);
}
.md-alert.md-alert-tip td:hover {
? ? background: var(--alert-tip-td-hover-bg);
}
.md-alert.md-alert-caution td:hover {
? ? background: var(--alert-caution-td-hover-bg);
}
.md-alert.md-alert-warning td:hover {
? ? background: var(--alert-warning-td-hover-bg);
}
.md-alert.md-alert-important td:hover {
? ? background: var(--alert-important-td-hover-bg);
}
.md-alert.md-alert-note td:hover {
? ? background: var(--alert-note-td-hover-bg);
}
table thead,
.md-table-fig .md-table thead {
? ? background-color: var(--table-thead-bg-color);
? ? color: var(--table-thead-text-color);
}
table tbody+tbody,
.md-table-fig .md-table tbody+tbody {
? ? border-top: 2px solid var(--table-tbody-border-color);
}
.md-table-fig .md-table-edit {
? ? background-color: var(--table-edit-bg-color);
}
.md-table-fig .md-table-edit .btn-default:hover {
? ? background-color: var(--table-edit-hover-bg-color);
}
.md-table-fig .md-table-edit .md-table-resize-popover {
? ? -webkit-box-shadow: 0 2px 5px 0 var(--table-webkit-box-shadow-color1), 0 2px 10px 0 var(--table-webkit-box-shadow-color2);
? ? box-shadow: 0 2px 5px 0 var(--table-webkit-box-shadow-color1), 0 2px 10px 0 var(--table-webkit-box-shadow-color2);
? ? border: none;
? ? padding: 0;
? ? background-color: transparent;
}
.md-table-fig .md-table-edit .md-table-resize-popover .arrow {
? ? top: -10px;
}
.md-table-fig .md-table-edit .md-table-resize-popover .arrow::after {
? ? border-bottom-color: var(--table-border-color);
}
.md-table-fig .md-table-edit .md-table-resize-popover .md-reset {
? ? border-radius: 10px;
? ? background-color: var(--table-reset-bg-color);
}
.md-table-fig .md-table-edit .md-table-resize-popover .md-reset input {
? ? color: var(--table-reset-input-color) !important;
}
.md-table-fig .md-table-edit .md-table-resize-popover .md-reset input#md-grid-width,
.md-table-fig .md-table-edit .md-table-resize-popover .md-reset input#md-grid-height {
? ? text-align: center;
}
.md-table-fig .md-table-edit .md-table-resize-popover .popover-title {
? ? border-top: 1px solid var(--table-some-border-top-color);
}
/* yaml front matter */
#write pre.md-meta-block {
? ? background: var(--table-meta-block-bg-color);
? ? color: var(--table-meta-block-color);
? ? border: 0;
? ? border-radius: 6px;
? ? line-height: 1.3rem;
? ? padding: 0.5rem 1.5rem;
? ? margin-top: -1rem;
? ? margin-bottom: 2rem;
}
/* table of contents */
.md-toc {
? ? margin-bottom: 1.25rem;
}
/* task list */
.md-task-list-item>input::before {
? ? content: "";
? ? position: absolute;
? ? top: -1.5px;
? ? left: -3.5px;
? ? border-radius: 50%;
? ? width: 20px;
? ? height: 20px;
? ? border: 1px solid var(--task-list-border-color);
? ? background: var(--task-list-bg-color);
? ? -webkit-transition: background-color 200ms ease-in-out;
? ? transition: background-color 200ms ease-in-out;
}
.md-task-list-item>input::after {
? ? content: "";
? ? position: absolute;
? ? top: 5px;
? ? left: 1px;
? ? width: 0.6rem;
? ? height: 0.3rem;
? ? border:2px solid var(--task-list-input-after-border-color);
? ? border-top: 0;
? ? border-right: 0;
? ? -webkit-transform: rotate(-45deg);
? ? transform: rotate(-45deg);
? ? opacity: 0;
? ? -webkit-transition: opacity 200ms ease-in-out;
? ? transition: opacity 200ms ease-in-out;
}
.md-task-list-item>input:checked::before {
? ? background-color: var(--task-list-input-checked-bg-color);
? ? border: none;
}
.md-task-list-item>input:checked::after {
? ? opacity: 1;
}
.md-task-list-item.task-list-done {
? ? text-decoration: line-through;
? ? color: var(--task-list-done-color);
}
/* footnote */
.footnotes {
? ? font-size: 1rem;
}
/* math,html block common */
.mathjax-block[contenteditable="false"]:active,
.mathjax-block[contenteditable="false"]:focus,
.md-htmlblock[contenteditable="false"]:active,
.md-htmlblock[contenteditable="false"]:focus {
? ? -webkit-box-shadow: 0 2px 5px 0 var(--math-html-webkit-box-shadow-color1), 0 2px 10px 0 var(--math-html-webkit-box-shadow-color2);
? ? box-shadow: 0 2px 5px 0 var(--math-html-webkit-box-shadow-color1), 0 2px 10px 0 var(--math-html-webkit-box-shadow-color2);
}
.mathjax-block:hover .md-rawblock-container,
.mathjax-block:hover .md-rawblock-tooltip,
.md-htmlblock:hover .md-rawblock-container,
.md-htmlblock:hover .md-rawblock-tooltip {
? ? background-color: var(--math-html-rawblock-bg-color);
? ? -webkit-animation: showRawBlockTooltip 0s linear;
? ? animation: showRawBlockTooltip 0s linear;
}
.mathjax-block:hover .md-rawblock-container,
.md-htmlblock:hover .md-rawblock-container {
? ? border-radius: 6px 0 6px 6px;
}
.mathjax-block .md-rawblock-control,
.md-htmlblock .md-rawblock-control {
? ? background-color: var(--math-html-rawblock-control-bg-color);
}
.mathjax-block .md-rawblock-tooltip,
.md-htmlblock .md-rawblock-tooltip {
? ? background-color: var(--math-html-rawblock-tooltip-bg-color);
? ? -webkit-animation: showRawBlockTooltip 0s linear;
? ? animation: showRawBlockTooltip 0s linear;
? ? border-radius: 4px 4px 0 0;
}
/* math block */
.mathjax-block .md-mathblock-panel .code-tooltip[contenteditable="false"] {
? ? -webkit-box-shadow: none;
? ? box-shadow: none;
}
.mathjax-block .md-mathblock-panel .md-rawblock-before {
? ? padding-top: 6px;
? ? border-top-left-radius: 6px;
}
.mathjax-block .md-mathblock-panel .md-rawblock-after {
? ? padding-bottom: 6px;
}
.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner {
? ? color: var(--math-html-rawblock-input-color);
}
.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-lines {
? ? color: var(--math-html-rawblock-input-color);
}
.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-gutters {
? ? background-color: var(--math-html-rawblock-gutter-bg-color);
}
.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-selected,
.mathjax-block .md-mathblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-selectedtext {
? ? background-color: var(--math-html-rawblock-selected-bg-color) !important;
}
.mathjax-block .md-math-container {
? ? padding-top: 10px;
? ? padding-bottom: 10px;
}
/* html block */
.md-htmlblock .md-htmlblock-panel {
? ? border-radius: 10px;
? ? border-top-right-radius: 0;
? ? padding-left: 6px;
? ? padding-right: 6px;
}
.md-htmlblock .md-htmlblock-panel .md-rawblock-input {
? ? padding-top: 14px;
? ? padding-bottom: 10px;
}
.md-htmlblock .md-htmlblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-selected,
.md-htmlblock .md-htmlblock-panel .md-rawblock-input .cm-s-inner .CodeMirror-selectedtext {
? ? background-color: var(--math-html-rawblock-selected-bg-color2) !important;
}
/* strong */
strong {
? ? font-weight: bold;
? ? color: var(--strong-color);
? ? font-size: 1.05rem;
? ? transition: font-size 0.3s ease, padding 0.3s ease;
? ? display: inline-block;
? ? margin: 0 2px;
}
strong:hover {
? ? font-size: calc(1.05rem + 0.05rem * var(--strong-hover-effect) * var(--use-dynamic-effect));
? ? padding: calc(0px + 3px * var(--strong-hover-effect) * var(--use-dynamic-effect));
}
/* emphasis */
em {
? ? background-color: inherit;
? ? color: var(--em-color);
? ? transition: all 0.3s ease;
? ? padding-left: 1px;
? ? padding-right: 1px;
}
em:hover {
? ? color: var(--em-hover-color);
? ? font-weight: calc(500 + 100 * var(--em-hover-effect) * var(--use-dynamic-effect));
? ? padding-left: calc(1px + 2px * var(--em-hover-effect) * var(--use-dynamic-effect));
? ? padding-right: calc(1px + 2px * var(--em-hover-effect) * var(--use-dynamic-effect));
}
/* underline */
u {
? ? background-color: inherit;
? ? color: inherit;
? ? text-decoration: none;
? ? border-bottom: 2px solid var(--u-border-color);
? ? padding-bottom: 2.5px;
? ? transition: all 0.3s ease;
}
u:hover {
? ? border: calc(2px * var(--u-hover-effect) * var(--use-dynamic-effect)) solid var(--u-border-color);
? ? padding: calc(0px + 4px * var(--u-hover-effect) * var(--use-dynamic-effect));
? ? margin: calc(0px + 4px * var(--u-hover-effect) * var(--use-dynamic-effect));
? ? border-radius: calc(0px + 7px * var(--u-hover-effect) * var(--use-dynamic-effect));
? ? border-bottom: 2px solid var(--u-border-color);
? ? padding-bottom: 2.5px;
}
/* code */
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
? ? font-size: inherit;
}
code {
? ? background-color: var(--code-bg-color);
? ? color: var(--code-color);
? ? font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
? ? font-size: 1rem;
? ? font-weight: 550;
? ? margin: 0 2px;
? ? padding: 3px 3px 1px;
? ? border-radius: 7px;
? ? transition: all 0.3s ease;
? ? z-index: -1;
}
code:hover {
? ? background-color: var(--code-hover-bg-color);
? ? font-weight: calc(550 + 150 * var(--code-hover-effect) * var(--use-dynamic-effect));
? ? padding: 3px 3px calc(1px + 2px * var(--code-hover-effect) * var(--use-dynamic-effect));
}
/* strike */
del {
? ? color: var(--del-color);
? ? text-decoration: line-through;
? ? text-decoration-color: var(--del-text-decoration-color);
? ? text-decoration-thickness: 1.5px;
? ? font-style: italic;
? ? opacity: 0.8;
? ? transition: color 0.3s ease, opacity 0.3s ease;
}
del:hover {
? ? color: var(--del-hover-color);
? ? opacity: calc(0.8 + 0.2 * var(--del-hover-effect) * var(--use-dynamic-effect));
? ? text-decoration-color: var(--del-hover-text-decoration-color);
}
/* hightlight */
mark {
? ? font-weight: 500;
? ? background-color: var(--mark-bg-color);
? ? color: inherit;
? ? margin: 0 2px;
? ? padding: 3px 3px 2.5px;
? ? border-radius: 0px;
? ? transition: all 0.3s ease
}
mark:hover {
? ? border-radius: calc(0px + 7px * var(--mark-hover-effect) * var(--use-dynamic-effect));
? ? background-color: var(--mark-hover-bg-color);
? ? padding: 3px 3px calc(2.5px + 1.5px * var(--mark-hover-effect) * var(--use-dynamic-effect));
}
/* hyperlink */
a {
? ? background-color: inherit;
? ? color: var(--a-color);
? ? text-decoration: none;
? ? transition: color 0.3s ease;
}
a:hover {
? ? text-decoration: underline;
? ? color: var(--a-hover-color);
}
a img {
? ? border: none;
}
/* code fences */
.md-fences {
? ? max-height:250px;
? ? overflow-y:auto;
? ? font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
? ? color: var(--code-fences-color);
? ? background-color: var(--code-fences-bg-color);
? ? padding: 17px;
? ? padding-top: 32px;
? ? border-radius: 10px;
? ? box-shadow: var(--code-fences-box-shadow);
? ? transition: transform 0.3s ease, box-shadow 0.3s ease;
? ? position: relative;
}
.md-fences::before {
? ? background: var(--code-fences-before-bg);
? ? border-radius: 50%;
? ? box-shadow: var(--code-fences-before-box-shadow);
? ? content: ' ';
? ? height: 12px;
? ? width: 12px;
? ? position: absolute;
? ? left: 13px;
? ? top: 12px;
? ? transition: all 0.3s ease;
}
/* 1. Scale animation */
/* @keyframes bounce-code {
? ? 0%, 100% {
? ? ? ? transform: scale(1);
? ? }
? ? 50% {
? ? ? ? transform: scale(1.01);
? ? }
} */
/* 2. Displacement Animation */
@keyframes bounce-code {
? ? 0%,
? ? 100% {
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? ? ? transform: translate(0, 0);
? ? }
? ? 50% {
? ? ? ? transform: translate(calc(-3px * var(--fence-hover-effect) * var(--use-dynamic-effect)), calc(-3px * var(--fence-hover-effect) * var(--use-dynamic-effect)));
? ? }
}
.md-fences:hover {
? ? animation: bounce-code 0.5s ease-in-out;
? ? box-shadow: 0 calc(1px + 1px * var(--fence-hover-effect) * var(--use-dynamic-effect)) calc(3px + 1px * var(--fence-hover-effect) * var(--use-dynamic-effect)) rgba(0, 0, 0, calc(0.15 + 0.05 * var(--fence-hover-effect) * var(--use-dynamic-effect)));
}
.md-fences:hover::before {
? ? background: var(--code-fences-3circle-1);
? ? box-shadow: 20px 0 var(--code-fences-3circle-2), 40px 0 var(--code-fences-3circle-3);
}
.code-tooltip[contenteditable="false"] {
? ? border-radius: 7px;
}
.cm-s-inner .CodeMirror-linenumber {
? ? margin-left: 7px;
? ? margin-right: 3px;
? ? color: var(--cm-s-inner-linenumber-color);
}
/* 關鍵字 */
.cm-s-inner .cm-keyword {
? ? color: #222fa7;
? ? font-weight: bold;
}
/* 操作符 */
.cm-s-inner .cm-operator {
? ? color: #006400;
}
/* 變量 */
.cm-s-inner .cm-variable {
? ? color: #239d37;
? ? font-weight: bold;
}
/* 函數參數 */
.cm-s-inner .cm-variable-2 {
? ? color: #108979;
}
/* 類名 */
.cm-s-inner .cm-variable-3 {
? ? color: #183da2;
? ? font-weight: bold;
? ? font-style: italic;
}
/* 內建函數 */
.cm-s-inner .cm-builtin {
? ? color: #006400;
? ? font-style: italic;
}
/* 常量 */
.cm-s-inner .cm-atom {
? ? color: #3b8f8f;
}
/* 數字 */
.cm-s-inner .cm-number {
? ? color: #3e19cf;
}
/* 函數定義 */
.cm-s-inner .cm-def {
? ? color: #10623e;
? ? font-weight: bold;
}
/* 字符串 */
.cm-s-inner .cm-string {
? ? color: #0264bf;
? ? font-style: italic;
}
/* 模板字符串 */
.cm-s-inner .cm-string-2 {
? ? color: #6b8e23;
}
/* 注釋 */
.cm-s-inner .cm-comment {
? ? color: #6a737d;
? ? font-style: italic;
}
/* HTML 標簽 */
.cm-s-inner .cm-tag {
? ? color: #042c99;
}
/* HTML 標簽屬性 */
.cm-s-inner .cm-attribute {
? ? color: #2b34e3;
}
/* CSS 屬性 */
.cm-s-inner .cm-property {
? ? color: #2e8b57;
}
/* 選擇器 */
.cm-s-inner .cm-qualifier {
? ? color: #2e8b57;
}
/* 元信息 */
.cm-s-inner .cm-meta {
? ? color: #099f8b;
? ? font-weight: bold;
? ? font-style: italic;
}
/* 鏈接 */
.cm-s-inner .cm-link {
? ? color: #1565c0;
? ? text-decoration: underline;
}
/* 錯誤信息 */
.cm-s-inner .cm-error {
? ? color: #d32f2f;
? ? background-color: #fdd;
}
/* 布爾值 */
.cm-s-inner .cm-boolean {
? ? color: #228b22;
? ? font-weight: bold;
}
/* 類型 */
.cm-s-inner .cm-type {
? ? color: #1565c0;
? ? font-weight: bold;
}
/* 標題 */
.cm-s-inner .cm-header {
? ? color: #2e8b57;
? ? font-weight: bold;
}
/* 引用 */
.cm-s-inner .cm-quote {
? ? color: #3503a8;
? ? font-style: italic;
}
/* scrollbar */
::-webkit-scrollbar {
? ? width: 8px;
}
::-webkit-scrollbar-track {
? ? background: var(--scrollbar-track-bg);
}
::-webkit-scrollbar-thumb {
? ? background: var(--scrollbar-thumb-bg);
? ? border-radius: 5px;
}
/* find dialog */
#typora-quick-open {
? ? background-color: var(--quick-open-bg-color);
? ? color: var(--quick-open-color);
}
#typora-quick-open .typora-quick-open-item.active {
? ? background-color: var(--quick-open-item-active-bg-color) !important;
}
#typora-quick-open .ty-quick-open-category-title {
? ? border-top: 1px solid var(--quick-open-category-border-color) !important;
}
/* modal dialog */
#common-dialog .modal-dialog .modal-content {
? ? -webkit-box-shadow: var(--modal-dialog-webkit-box-shadow);
? ? box-shadow: var(--modal-dialog-box-shadow);
? ? background-color: var(--modal-dialog-bg-color);
? ? border: none;
? ? border-radius: 6px;
}
#common-dialog .modal-dialog .modal-content .modal-footer .btn-default:hover {
? ? background-color: var(--modal-dialog-btn-default-hover-bg-color) !important;
}
/* preferences */
.ty-preferences {
? ? font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
? ? color: var(--preferences-color);
}
.ty-preferences .window-header h2 {
? ? font-size: 1.6rem;
}
.ty-preferences .sidebar {
? ? font-size: 1.4rem;
}
.ty-preferences .sidebar .nav-group-item.active,
.ty-preferences .sidebar .nav-group-item:active {
? ? color: var(--preference-sidebar-nav-group-item-active-color);
? ? background-color: var(--preference-sidebar-nav-group-item-active-bg-color);
}
/* sidebar includes file-tree,articles and outline*/
.html-for-mac #typora-sidebar {
? ? -webkit-box-shadow: var(--html-for-mac-sidebar-webkit-box-shadow);
? ? box-shadow: var(--html-for-mac-sidebar-box-shadow);
}
/* focus mode/typewriter mode notification? */
#md-notification {
? ? background-color: var(--notification-bg-color) !important;
}
#md-notification #ty-surpress-mode-warning-close-btn:hover {
? ? background-color: var(--notification-hover-bg-color) !important;
}
/* Unibody sidebar */
#megamenu-menu-sidebar {
? ? color: var(--menu-sidebar-color);
? ? font-size: 1rem;
}
#megamenu-menu-sidebar #megamenu-menu-list {
? ? border-top-color: var(--menu-sidebar-list-border-color);
? ? background-color: var(--menu-sidebar-list-bg-color);
}
#megamenu-menu-sidebar #megamenu-menu-list li a {
? ? color: var(--menu-sidebar-li-a-color) !important;
}
#megamenu-menu-sidebar #megamenu-menu-list li a.active,
#megamenu-menu-sidebar #megamenu-menu-list li a:hover {
? ? background-color: var(--menu-sidebar-li-a-active-hover-color) !important;
}
#megamenu-menu-sidebar #megamenu-menu-list li a#m-saved {
? ? background-color: transparent !important;
}
.megamenu-opened .megamenu-menu {
? ? left: 0;
}
#megamenu-content {
? ? color: var(--megamenu-content-color);
}
/* sidebar */
#typora-sidebar .info-panel-tab-wrapper .info-panel-tab .info-panel-tab-border {
? ? background-color: var(--sidebar-bg-color);
? ? border-radius: 4px;
}
#typora-sidebar .sidebar-osx-tab .sidebar-tabs {
? ? border-bottom-color: transparent;
}
#typora-sidebar #sidebar-content .file-list-item {
? ? border-bottom: 1px solid var(--sidebar-content-file-list-item-border-color);
}
#typora-sidebar #sidebar-content .file-list-item.active {
? ? background-color: var(--sidebar-content-file-list-item-active-bg-color);
? ? border-left: 4px solid var(--sidebar-content-file-list-item-active-border-color);
}
#typora-sidebar #sidebar-content .ty-sidebar-search-panel {
? ? border-bottom: 1px solid var(--sidebar-content-file-list-item-search-pannel-border-color);
}
#typora-sidebar #sidebar-content .ty-sidebar-search-panel .searchpanel-search-option-btn {
? ? background-color: var(--sidebar-content-file-list-item-search-pannel-search-option-btn-bg-color);
}
#typora-sidebar #sidebar-content .sidebar-content-content .file-tree-node:not(.file-node-root):hover>.file-node-background {
? ? border-left: 4px solid var(--file-tree-node-hover-border-color);
? ? background-color: var(--file-tree-node-hover-bg-color);
}
#typora-sidebar #sidebar-content .sidebar-content-content .file-tree-node.active>.file-node-background {
? ? border-color: var(--file-tree-node-active-border-color);
? ? background-color: var(--file-tree-node-active-bg-color);
}
#typora-sidebar #sidebar-content .sidebar-content-content #file-library-list-children .file-library-file-node:hover {
? ? border-left: 4px solid var(--file-library-file-node-hover-border-color);
? ? background-color: var(--file-library-file-node-hover-bg-color);
}
#typora-sidebar #sidebar-content #outline-content .no-collapse-outline .outline-item {
? ? line-height: 1.375rem;
? ? font-size: 1rem;
}
#typora-sidebar #sidebar-content #outline-content .outline-expander:before {
? ? color: inherit;
? ? font-size: 14px;
? ? top: auto;
? ? content: "\f0da";
? ? font-family: FontAwesome;
}
#typora-sidebar #sidebar-content #outline-content .outline-expander:hover:before,
#typora-sidebar #sidebar-content #outline-content .outline-item-open>.outline-item>.outline-expander:before {
? ? content: "\f0d7";
}
#typora-sidebar #sidebar-content #outline-content .outline-item:hover {
? ? background-color: var(--outline-item-hover-bg-color) !important;
}
#typora-sidebar #ty-sidebar-footer {
? ? border-top: 1px solid var(--sidebar-footer-border-color);
}
#typora-sidebar #ty-sidebar-footer .sidebar-footer-item:hover {
? ? background-color: var(--sidebar-footer-hover-bg-color) !important;
}
#typora-sidebar #ty-sidebar-footer #sidebar-files-menu {
? ? -webkit-box-shadow: var(--sidebar-files-menu-webkit-box-shadow);
? ? box-shadow: var(--sidebar-files-menu-box-shadow);
}
/* dropdown menu */
.dropdown-menu>.show+.menuitem-group-label.show {
? ? border-top: 1px solid var(--dropdown-menu-border-color) !important;
}
.dropdown-menu li a {
? ? color: var(--dropdown-menu-li-a-color) !important;
}
.dropdown-menu li a:hover {
? ? background-color: var(--dropdown-menu-li-a-hover-color) !important;
}
.dropdown-menu .divider {
? ? border-color: var(--dropdown-menu-divider-border-color);
}
/* sidebar-files-menu,toc-dropmenu,suggest common */
#sidebar-files-menu,
#toc-dropmenu,
.auto-suggest-container {
? ? background-color: var(--toc-bg-color);
? ? -webkit-box-shadow: var(--toc-webkit-box-shadow);
? ? box-shadow: var(--toc-box-shadow);
? ? border: none;
}
#toc-dropmenu .outline-item:hover {
? ? background-color: var(--toc-hover-bg-color) !important;
}
/* emoji,fences,word suggest */
.auto-suggest-container {
? ? padding-top: 4px;
? ? padding-bottom: 4px;
}
.auto-suggest-container li.active,
.auto-suggest-container li:hover {
? ? background-color: var(--auto-suggest-container-bg-color) !important;
}
/* source code mode */
#typora-source {
? ? font-family: "Fira Code", Consolas, "Lucida Console", "Courier", monospace, "Helvetica Neue", Helvetica, Arial, sans-serif;
? ? color: var(--source-color);
}
#typora-source .cm-s-typora-default .cm-header,
#typora-source .cm-s-typora-default .cm-property,
#typora-source .CodeMirror.cm-s-typora-default div.CodeMirror-cursor {
? ? color: var(--source-cm-header-color);
}
#typora-source .cm-s-typora-default .cm-atom,
#typora-source .cm-s-typora-default .cm-number {
? ? color: var(--source-cm-atom-color);
}
#typora-source .CodeMirror-selectedtext {
? ? background-color: transparent !important;
}
.typora-node .file-list-item-parent-loc,
.typora-node .file-list-item-time,
.typora-node .file-list-item-summary {
? ? font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", sans-serif;
}
@media print {
? ? body {
? ? ? ? zoom: 70%;
? ? ? ? margin: 0rem 1rem;
? ? ? ? padding: 1rem;
? ? }
? ? table,
? ? .md-table-fig .md-table {
? ? ? ? border: none;
? ? ? ? border-radius: 10px;
? ? ? ? border-collapse: separate;
? ? ? ? box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
? ? }
? ? table th,
? ? table td,
? ? .md-table-fig .md-table th,
? ? .md-table-fig .md-table td {
? ? ? ? padding: 10px 16px;
? ? ? ? border-top: none;
? ? ? ? border: none;
? ? }
? ? table th,
? ? .md-table-fig .md-table th {
? ? ? ? background-color: var(--table-thead-bg-color);
? ? ? ? color: var(--table-thead-text-color);
? ? }
? ? blockquote table th,
? ? blockquote .md-table-fig .md-table th {
? ? ? ? background-color: var(--blockquote-thead-bg-color);
? ? ? ? color: var(--blockquote-thead-text-color);
? ? }
? ? .md-alert.md-alert-tip table th,
? ? .md-alert.md-alert-tip .md-table-fig .md-table th {
? ? ? ? background-color: var(--alert-tip-thead-bg-color);
? ? ? ? color: var(--alert-tip-thead-text-color);
? ? }
? ? .md-alert.md-alert-caution table th,
? ? .md-alert.md-alert-caution .md-table-fig .md-table th {
? ? ? ? background-color: var(--alert-caution-thead-bg-color);
? ? ? ? color: var(--alert-caution-thead-text-color);
? ? }
? ? .md-alert.md-alert-warning table th,
? ? .md-alert.md-alert-warning .md-table-fig .md-table th {
? ? ? ? background-color: var(--alert-warning-thead-bg-color);
? ? ? ? color: var(--alert-warning-thead-text-color);
? ? }
? ? .md-alert.md-alert-important table th,
? ? .md-alert.md-alert-important .md-table-fig .md-table th {
? ? ? ? background-color: var(--alert-important-thead-bg-color);
? ? ? ? color: var(--alert-important-thead-text-color);
? ? }
? ? .md-alert.md-alert-note table th,
? ? .md-alert.md-alert-note .md-table-fig .md-table th {
? ? ? ? background-color: var(--alert-note-thead-bg-color);
? ? ? ? color: var(--alert-note-thead-text-color);
? ? }
? ? :where(table, .md-table-fig .md-table) {
? ? ? ? & tr:nth-child(even) {
? ? ? ? ? ? background-color: var(--table-row-even-bg-color, #eff5f262);
? ? ? ? }
? ? ? ? & tr:nth-child(odd) {
? ? ? ? ? ? background-color: var(--table-row-odd-bg-color, #ffffff);
? ? ? ? }
? ? }
? ? hr {
? ? ? ? position: relative;
? ? ? ? margin: 1.2rem auto;
? ? ? ? border: none;
? ? ? ? background-color: #2f845e;
? ? ? ? height: 2.5px;
? ? ? ? width: 1024px !important;
? ? ? ? opacity: 0.8;
? ? ? ? border-radius: 1.75px;
? ? }
}
@media only screen and (min-width: 1400px) {
? ? #write {
? ? ? ? max-width: 1024px;
? ? }
? ? hr {
? ? ? ? position: relative;
? ? ? ? margin: 2rem auto;
? ? ? ? border: none;
? ? ? ? background-color: #2f845e;
? ? ? ? height: 3px;
? ? ? ? opacity: 0.8;
? ? ? ? border-radius: 1.5px;
? ? }
? ? .md-fences:hover {
? ? ? ? animation: none;
? ? }
}
@media only screen and (min-width: 1800px) {
? ? #write {
? ? ? ? max-width: 1200px;
? ? }
? ? hr {
? ? ? ? position: relative;
? ? ? ? margin: 2rem auto;
? ? ? ? border: none;
? ? ? ? background-color: #2f845e;
? ? ? ? height: 3px;
? ? ? ? opacity: 0.8;
? ? ? ? border-radius: 1.5px;
? ? }
? ? .md-fences:hover {
? ? ? ? animation: none;
? ? }
}
html {
? ? font-size: 17px;
}
