/* Fichiers de base */
@import './font.css';
@import './editor.css';
@import './code.css';
@import './table.css';
@import './mermaid.css';

/* KBD : touches clavier */
@import './kbd/kbd.css';

/* Titres */
@import './title/title.css';
/* Variante colorée (facultative) */
/* @import './title/title-colorful.css'; */
/* @import './title/title-colorful-dark.css'; */

/* Listes */
@import './list/list.css';
/* Variante simple (facultative) */
@import './list/list-simple.css';

/* Blockquotes + alertes Typora */
@import './blockquote/blockquote.css';
@import './blockquote/blockquote2.css';

/* -------------------------------------------------------- */

:root {
    --bg-color: #f2f2f2;
    --code-bg-color: #282c34;
    --text-color: black;
    --primary-btn-text-color: #fff;
    --active-file-bg-color: #eee;
    --window-border: 1px solid var(--active-file-bg-color);
    --active-file-text-color: inherit;
    --active-file-border-color: var(--main-red);
    --side-bar-bg-color: var(--bg-color);
    --item-hover-bg-color: hsla(0, 0%, 90%, .59);
    --item-hover-text-color: var(--main-red);
    --monospace: monospace;
    --select-text-font-color: white !important;
    --select-text-bg-color: #3266D0;
    --side-bar-menu-active-tint: var(--main-green);
    --outline-color: #a5a5a5;
    --tb-border-color: #e8e8e8;
    /* ---------------->> 主题色 <<---------------- */
    --theme-color: #166ff3;
    --main-red: #ff6b6b;
    --main-green: #2ed573;
    --main-purple: #c94ae9;
    --main-yellow: #f9b03d;
    --light-color: #b2b2b2;
    --theme-light-color: white;
    --code-bg-color: #282c34;
    --code-bg-color-light: #3d404e;
    --code-bg-color-active: #414855;
    --border-color: var(--theme-color);
    --border: solid 0.5px var(--theme-color)94;
    /* ---------------->> 悬浮 <<---------------- */
    --item-bg-color-red: rgb(from var(--main-red) r g b / 0.22);
    --item-bg-color-blue: rgb(from var(--theme-color) r g b / 0.26);
    /* ---------------->> 阴影 <<---------------- */
    --box-shadow: 0px 4px 4px rgba(0, 0, 0, .1);
    --box-shadow-large: 0 8px 15px rgba(0, 0, 0, .3);
    --drop-shadow: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
    --brightness: brightness(1);
    /* ---------------->> 过渡 <<---------------- */
    --transition: box-shadow 0.3s ease, transform 0.3s ease;
    --bg-transition: background-color 0.5s ease;
    /* ---------------->> 左到右透明渐变色 <<---------------- */
    --gradient-color: linear-gradient(to right, var(--theme-light-color), rgba(255, 255, 255, 0));
    /* ---------------->> 圆角 <<---------------- */
    --radius-small: 10px;
    --radius-large: 15px;
    --radius-xlarge: 20px;
    /* ---------------->> 云母 <<---------------- */
    --mica-bg: rgba(255, 255, 255, 0.65);
    --mica-blur: blur(12px) saturate(1.3);
    --mica-border: 1px solid rgba(255, 255, 255, 0.15);
    --mica-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    --mica-transition: background-color 0.5s ease, box-shadow 0.5s ease;
    /* ---------------->> Mermaid 图表，详情见 https://support.typoraio.cn/Diagram-Options/ <<---------------- */
    /* 主题，可切换为 "default" "base" "dark" "forest" "neutral" "night" */
    --mermaid-theme: default;
    /* 字体 */
    --mermaid-font-family: var(--main-font-family), "trebuchet ms", verdana, arial, sans-serif;
    /* 时序图编号 or "off", see https://mermaid-js.github.io/mermaid/#/sequenceDiagram?id=sequencenumbers*/
    --mermaid-sequence-numbers: on;
    /* 线条风格 可切换为 "linear","basis","natural","step" */
    --mermaid-flowchart-curve: linear;
    /* 甘特图左侧边距 */
    --mermaid--gantt-left-padding: 75;
    /* 时序图主题 simple：普通 hand：手绘风格 */
    --sequence-theme: hand;
}


/* ---------------->> 段落 <<---------------- */
#write p {
    padding: 5px;
    margin: 0;
    line-height: 26px;
    margin-bottom: 3px;
    margin-top: 3px;
}

#write p:not(:has(.md-image)) {
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
}

/* 仅在p标签不包含图片时应用悬停效果 */
#write p:not(:has(.md-image)):hover {
    box-shadow: var(--box-shadow);
    border-radius: var(--radius-large);
    background: var(--theme-light-color);
}

#write p:has(.md-image):hover::before {
    display: none;
}

#write p[align="center"]:hover {
    width: inherit;
}

/* ---------------->> 粗体 <<---------------- */
#write strong {
    color: var(--theme-color);
    font-weight: 700
}

#write h4 strong {
    color: unset !important;
}

/* ---------------->> 斜体 <<---------------- */
#write em,
#write i {
    color: #DA70D6;
    margin: 0 3px;
}

/* ---------------->> 链接 <<---------------- */
a>span.md-plain,
a.md-url,
a {
    margin-left: 1px;
    margin-right: 1px;
    color: var(--main-purple);
    font-weight: 700;
    text-decoration: underline;
}

.md-alert a>span.md-plain,
.md-alert a.md-url,
.md-alert a {
    color: var(--main-purple) !important;
}

/* 目录、表格组件、图片链接、脚注链接取消链接箭头 */
#write a.md-toc-inner::after,
.md-reset>a::after,
a:has(img)::after,
.footnotes.md-def-footnote.md-end-block a::after {
    display: none !important;
}


/* 取消四级标题的链接效果 */
h4.md-end-block.md-heading a,
h4.md-end-block.md-heading a>span {
    color: white;
    text-decoration: none;
}

/* 去除6级标题链接下划线 */
h6.md-end-block.md-heading a,
h6.md-end-block.md-heading a>span {
    text-decoration: none;
}

/* 取消标题中链接的箭头效果 */
#write h1 a::after,
#write h2 a::after,
#write h3 a::after,
#write h4 a::after,
#write h5 a::after,
#write h6 a::after {
    display: none;
}

/* 链接箭头 */
#write a::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1.1em;
    height: 1.1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c94ae9'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
}

/* ---------------->> 目录项 <<---------------- */
a.md-toc-inner {
    color: var(--main-purple);
}

#write p.md-toc-content:hover {
    width: inherit;
}

/* ---------------->> 图片 <<---------------- */
#write img {
    border-left: 0;
    border-right: 0;
    filter: var(--drop-shadow) var(--brightness);
    border-radius: var(--radius-large);
    display: block;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    transition: var(--transition);
    width: auto;
}

#write img:hover {
    box-shadow: var(--box-shadow-large);
}

/* ---------------->> 脚注 <<---------------- */
.md-def-name {
    padding-right: 3ch;
}

.md-footnote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* ---------------->> 高亮 <<---------------- */
mark {
    margin-right: 2px;
    margin-left: 2px;
    border-radius: var(--radius-large);
    padding: 2px 5px 2px 5px;
    border: 1.5px solid;
    background: transparent;
    color: var(--main-red);
}


.searchpanel-search-option-btn.active {
    animation: colorChange 1s infinite;
    color: var(--theme-color)
}

span#filesearch-case-option-btn:active {
    color: var(--theme-color)
}

.md-inline-math-container mjx-container {
    zoom: 1
}

.md-expand.md-img-loaded>.md-meta>span,
.md-image>.md-meta {
    color: var(--theme-color);
    font-family: var(--main-font-family)
}

.outline-item-active {
    background: var(--item-bg-color-blue);
    border-left: 28px solid transparent;
    margin-left: -28px;
    margin-right: -28px
}

.pin-outline #outline-content .outline-active strong,
.pin-outline .outline-active {
    color: var(--theme-color);
    font-weight: 700
}

.active-tab-files #info-panel-tab-file .info-panel-tab-border,
.active-tab-outline #info-panel-tab-outline .info-panel-tab-border {
    background-color: var(--theme-color)
}

/* ---------------->> 脚注 <<---------------- */
#write .md-footnote {
    margin-right: 2px;
    margin-left: 2px;
    line-height: 1;
    background: var(--theme-light-color);
    color: var(--main-red);
    font-weight: 700;
}

.md-fences .CodeMirror-code>:hover {
    background-color: var(--code-bg-color-light)
}

hr {
    background-color: transparent;
    border-top: 2px dashed var(--alert-theme-color, var(--theme-color));
    height: 2px
}


/* ---------------->> 键盘快捷键 <<---------------- */

kbd {
    font-family: var(--main-font-family);
    font-weight: 700;
}

/* ---------------->> 目录 <<---------------- */
p.md-toc-content {
    padding-left: 10px !important;
    margin-left: 20px !important;
    background: var(--gradient-color);
    border-radius: var(--radius-large);
    box-shadow: var(--box-shadow);
}

p.md-toc-content:hover {
    transition: var(--bg-transition);
    background: var(--theme-light-color);
}


.info-panel-tab-title:hover,
.outline-label:hover {
    color: var(--theme-color)
}

.ty-show-search #info-panel-tab-search .info-panel-tab-border {
    background-color: var(--theme-color)
}

.md-notification-content {
    background: #ff00001a
}


.fa-folder:before,
.md-image-btn:before {
    color: var(--main-yellow);
}

.md-image-btn,
.modal-content {
    background: var(--theme-light-color)
}

.modal-content,
video {
    border-radius: var(--radius-large);
}

video {
    box-shadow: var(--box-shadow-large);
}

/* ---------------->> 脚注编辑视图 <<---------------- */
.md-blockmeta {
    font-style: normal;
    color: gray;
}

.ty-on-outline-filter .ty-outline-hit {
    background: #ff0;
    color: red;
    font-weight: 700
}

#file-library-search-input,
#md-searchpanel input {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgb(from var(--bg-color) r g b / 0.7);
    border-radius: var(--radius-small);
    box-shadow: unset
}

#file-library-search-input:focus,
#md-searchpanel input:focus {
    border-color: var(--theme-color);
}

.btn.focus,
.btn:focus,
.btn:hover {
    color: var(--theme-color)
}

.form-control:focus {
    border-color: #c2c2c2;
    outline: 0
}

.code-tooltip .ty-input:focus,
input:focus {
    border-color: unset;
    box-shadow: unset
}

/* ---------------->> 脚注链接 <<---------------- */
.code-tooltip-content a {
    color: rgb(145 205 255);
}

.megamenu-menu-list li a.active,
.megamenu-menu-list:not(.saved) li a:hover {
    background-color: var(--item-hover-bg-color);
    color: var(--theme-color)
}

.megamenu-menu {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: var(--bg-color);
    color: #000
}

.typora-node.pin-outline #md-searchpanel,
.typora-node.pin-outline .md-notification-container {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgb(from var(--bg-color) r g b / 0.7);
}



.menu-item-container a.menu-style-btn {
    background: transparent
}

.ty-menu-shortcut {
    font-family: var(--main-font-family);
}

.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.open>.dropdown-toggle.btn-primary {
    color: #fff
}

.cm-s-inner .cm-header,
.cm-s-inner.cm-header {
    color: var(--theme-color)
}

.outline-item:hover {
    background: var(--item-bg-color-red);
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    margin-left: -28px;
    margin-right: -28px
}

.file-library-node.file-tree-node.file-library-file-node:hover {
    background: var(--item-bg-color-blue)
}


/* ---------------->> 高亮标签 <<---------------- */
span[alt=highlight] {
    margin-right: 2px;
    margin-left: 2px;
    border-radius: var(--radius-large);
    padding: 5px;
    background: #ff0;
    color: red;
    box-shadow: var(--box-shadow);
}

/* ---------------->> 搜索高亮 <<---------------- */
.cm-search-hit.CodeMirror-selectedtext,
.md-search-hit.md-search-select,
.md-search-select {
    padding: 2px 5px 2px 5px;
    border-radius: var(--radius-large);
    background: #ff0 !important;
    color: red !important;
    box-shadow: var(--box-shadow);
}

.md-search-hit {
    background: #ff0 !important;
    color: black !important;
    box-shadow: var(--box-shadow);
}

.cm-search-hit {
    background: unset;
    color: unset;
}


.CodeMirror-gutters {
    border-right: unset
}


footer.ty-footer {
    border-top: 0
}

pre.md-fences-advanced.md-focus .md-fences-adv-panel {
    border: 0
}

#typora-source .CodeMirror-lines {
    background: var(--theme-light-color);
    border-radius: var(--radius-large);
    max-width: 90%
}

#typora-source .CodeMirror-lines,
.CodeMirror-wrap .CodeMirror-code pre {
    font-family: var(--main-font-family)
}

.cm-s-typora-default .cm-code,
.cm-s-typora-default .cm-comment {
    color: green;
    font-family: var(--main-font-family)
}

.cm-s-inner .cm-tag {
    color: var(--main-purple);
}

.cm-s-typora-default .cm-overlay {
    font-family: var(--main-font-family)
}

.cm-s-typora-default .CodeMirror-activeline-background {
    background: hsla(0, 0%, 60%, .2);
    left: -60px;
    right: -30px
}

.cm-s-typora-default .cm-atom,
.cm-s-typora-default .cm-number {
    color: var(--theme-color)
}

#typora-source .CodeMirror-activeline .CodeMirror-linenumber,
#typora-source .CodeMirror-linenumber.CodeMirror-linenumber-show {
    color: var(--theme-color);
    font-family: var(--main-font-family)
}

.md-html-inline .md-meta,
.md-ruby .md-meta {
    font-family: var(--main-font-family)
}


.cm-s-typora-default .cm-tag {
    color: #ff7800
}

.cm-s-typora-default .cm-link {
    color: var(--main-purple);
    font-style: italic;
    text-decoration: underline
}

/* 修复emoji在标题中的显示问题 */
span[alt="plain"]>span.md-plain {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    color: initial;
}