@import "cement/cement.css";

:root {
    /*
    Color
    Material 3 标准颜色
    */
    --color-white: #fff;
    --color-black: #000;

    --color-primary: #6750A4;
    --color-on-primary: #FFFFFF;
    --color-primary-container: #EADDFF;
    --color-on-primary-container: #21005D;

    --color-secondary: #625B71;
    --color-on-secondary: #FFFFFF;
    --color-secondary-container: #EADDFF;
    --color-on-secondary-container: #1D192B;

    --color-tertiary: #0e82c2;
    --color-on-tertiary: #FFFFFF;
    --color-tertiary-container: #FFD8E4;
    --color-on-tertiary-container: #31111D;

    --color-error: #B3261E;
    --color-on-error: #FFFFFF;
    --color-error-container: #F9DEDC;
    --color-on-error-container: #410E0B;

    /* 
    系统变量
    Typora base.css/base-control.css/windows.css 所带的变量
    */
    /* 背景颜色 */
    --bg-color: #f6f8fc;
    /* 文字颜色 */
    --text-color: #333333;
    /* 选择的文字背景颜色 */
    --select-text-bg-color: #B5D6FC;
    /* 选择的文字颜色 */
    --select-text-font-color: auto;
    /* 侧边栏颜色 */
    --side-bar-bg-color: var(--bg-color);
    /* 菜单边框 */
    --window-border: 1px solid #e9e9e9;
    /* 侧边栏活跃文件背景颜色 */
    --active-file-bg-color: #eee;
    /* 侧边栏活跃文件文字颜色 */
    --active-file-text-color: inherit;
    /* 侧边栏活跃文件边框颜色 */
    --active-file-border-color: #777;
    /* 侧边栏宽度 */
    --sidebar-width: 256px;
    /*代码块背景*/
    --code-block-bg-color: #f6f7f8;
    /*latex背景*/
    --rawblock-edit-panel-bd: var(--code-block-bg-color);

    /* 
    主题变量
    主题所设置的变量
    */
    /* 基础字体 */
    --font-family-base: "思源黑体 CN", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    /*等宽代码字体*/
    --font-family-monospace: "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    /* 编辑区背景颜色 */
    --write-bg-color: var(--color-white);
    /* 圆角 */
    --radius: 5px;
    /* 圆角 hover */
    --hover-radius: 24px;
    /* 标题颜色 */
    --title-color: #1f1f1f;
    /* 链接颜色 */
    --link-color: #0842a0;
    /* 标题前的指示标志 */
    --md-heading-before-color: var(--link-color);
    /*右键菜单*/
    --dropdown-menu-color: var(--color-white);
    /*菜单按钮*/
    --long-btn-color: #e6eef4;
    --long-btn-normal: 10px 10px 20px #c4cacf, -10px -10px 20px #ffffff;
    --long-btn-hover-bg: linear-gradient(145deg, #cfd6dc, #f6ffff);
    --long-btn-hover: 5px 5px 10px #c4cacf, -5px -5px 10px #ffffff;
    --recent-file-panel-action-btn: 4px 4px 9px #d6dde3, -4px -4px 9px #f6ffff;
    --recent-file-panel-action-btn-hover: 4px 4px 9px #d6dde3, -4px -4px 9px #f6ffff;
    --recent-file-panel-action-btn-hover-bg: linear-gradient(145deg, #cfd6dc, #f6ffff);
    --recent-file-panel-action-btn-active-bg: inset 4px 4px 9px #d6dde3, inset -4px -4px 9px #f6ffff;

    /*高亮背景颜色*/
    --mark-bg-color: var(--color-primary-container);
    /*高亮文字颜色*/
    --mark-text-color: var(--color-black);
    /* 引用字体颜色 */
    --blockquote-font-color: var(--color-on-primary-container);
    /* 引用背景颜色 */
    --blockquote-bg-color: var(--color-primary-container);

    /* 行内代码颜色 */
    --inline-code-color: #008f83;
    /*表格首行背景颜色*/
    --table-first-bg-color: #f8f9fa;
    /*表格编辑条颜色*/
    --ty-table-edit-bg-color: var(--color-white);
    /*表格其他行背景颜色*/
    /* --table-other-bg-color: var(--color-tertiary-container); */

    /* 表格边框颜色  */
    --table-border-color: #e1e3e1;

    /* YAML 背景颜色 */
    --meta-block-bg-color: var(--color-tertiary-container);
    /* YAML 文字颜色 */
    --meta-block-font-color: var(--color-on-tertiary-container);

    /* active 背景 */
    --sidebar-active-bg-color: #d3e3fd;
    /* --sidebar-active-bg-color: #fce8e6; */
    /* hover 背景 */
    --sidebar-hover-bg-color: rgba(32, 33, 36, 0.059);

    /*搜索栏 focus 颜色*/
    --file-library-search-input-focus-color: var(--color-white);
    /*最近文件单数背景*/
    --recent-file-panel-n-bg-color: #c0c0c0;
    --recent-file-panel-n-color: var(--color-black);

    /*操作按钮*/
    --titlebar-bg-color: #EDEDED;
    --titlebar-top-bg-color: var(--color-primary-container);

}

/*
代码块
*/
.md-fences {
    background-color: var(--code-block-bg-color);
    border-radius: var(--radius);
    transform: perspective(1px) translateZ(0);
    transition-duration: 0.3s;
    transition-property: border-radius, padding, box-shadow;
    transition-timing-function: ease-in-out;
    /*box-shadow: 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%), 0px 5px 5px -3px rgb(0 0 0 / 20%);*/
    /*box-shadow: 0 1px 1px 0 rgba(0, 28, 36, .2);*/
}

.md-fences::selection {
    color: var(--select-text-bg-color);
}

/* .md-fences:hover::before {
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDU0IDE0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSI+CiAgICAgICAgPGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjYiIGZpbGw9IiNGRjVGNTYiIHN0cm9rZT0iI0UwNDQzRSIgc3Ryb2tlLXdpZHRoPSIuNSI+PC9jaXJjbGU+CiAgICAgICAgPGNpcmNsZSBjeD0iMjYiIGN5PSI2IiByPSI2IiBmaWxsPSIjRkZCRDJFIiBzdHJva2U9IiNERUExMjMiIHN0cm9rZS13aWR0aD0iLjUiPjwvY2lyY2xlPgogICAgICAgIDxjaXJjbGUgY3g9IjQ2IiBjeT0iNiIgcj0iNiIgZmlsbD0iIzI3QzkzRiIgc3Ryb2tlPSIjMUFBQjI5IiBzdHJva2Utd2lkdGg9Ii41Ij48L2NpcmNsZT4KICAgIDwvZz4KPC9zdmc+');
    position: absolute;
    top: 15px;
    left: 20px;
    z-index: 5;
} */

/* .md-fences:hover::before {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8Y2lyY2xlIGlkPSJzdmdfMiIgc3Ryb2tlLXdpZHRoPSIwLjUiIHN0cm9rZT0iI0UwNDQzRSIgZmlsbD0iI0ZGNUY1NiIgcj0iNiIgY3k9IjciIGN4PSI2LjgwNzY5MyIvPgogICAgPGNpcmNsZSBpZD0ic3ZnXzMiIHN0cm9rZS13aWR0aD0iMC41IiBzdHJva2U9IiNERUExMjMiIGZpbGw9IiNGRkJEMkUiIHI9IjYiIGN5PSI3IiBjeD0iMjYuODA3NjkzIi8+CiAgICA8Y2lyY2xlIGlkPSJzdmdfNCIgc3Ryb2tlLXdpZHRoPSIwLjUiIHN0cm9rZT0iIzFBQUIyOSIgZmlsbD0iIzI3QzkzRiIgcj0iNiIgY3k9IjciIGN4PSI0Ni44MDc2OTMiLz4KICAgIDxsaW5lIHRyYW5zZm9ybT0icm90YXRlKDQ1IDYuNzM4NTUxNjE2NjY4NzA2LDcuMDg3MTQwNTYwMTUwMTQ2KSAiIHN0cm9rZT0iIzU1NSIgc3Ryb2tlLWxpbmVjYXA9Im51bGwiCiAgICAgICAgICBzdHJva2UtbGluZWpvaW49Im51bGwiIGlkPSJzdmdfMTMiIHkyPSI3LjA4NzE0MSIgeDI9IjExLjU3MzIyMiIgeTE9IjcuMDg3MTQxIiB4MT0iMS45MDM4ODIiCiAgICAgICAgICBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBmaWxsPSJub25lIi8+CiAgICA8bGluZSB0cmFuc2Zvcm09InJvdGF0ZSgtNDUgNi43Mzg1NTE2MTY2Njg3MDIsNy4wODcxNDA1NjAxNTAxNDYpICIgc3Ryb2tlPSIjNTU1IiBzdHJva2UtbGluZWNhcD0ibnVsbCIKICAgICAgICAgIHN0cm9rZS1saW5lam9pbj0ibnVsbCIgaWQ9InN2Z18xNSIgeTI9IjcuMDg3MTQxIiB4Mj0iMTEuNTczMjIyIiB5MT0iNy4wODcxNDEiIHgxPSIxLjkwMzg4MiIKICAgICAgICAgIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiIGZpbGw9Im5vbmUiLz4KICAgIDxsaW5lIHN0cm9rZT0iIzU1NSIgc3Ryb2tlLWxpbmVjYXA9Im51bGwiIHN0cm9rZS1saW5lam9pbj0ibnVsbCIgaWQ9InN2Z18xNiIgeTI9IjcuMDg3MTQxIiB4Mj0iMzEuNzY1NTAzIgogICAgICAgICAgeTE9IjcuMDg3MTQxIiB4MT0iMjIuMDk2MTYyIiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCB0cmFuc2Zvcm09InJvdGF0ZSg5MCA0NS42Nzc3Njg3MDcyNzUzOSw2LjMwMTg5ODQ3OTQ2MTY3NCkgIiBpZD0ic3ZnXzE4IgogICAgICAgICAgZD0ibTQ1LjI5MzE1MSw2LjY4NjUxNGwwLC0wLjc2OTIzMWwwLjc2OTIzMSwwLjc2OTIzMWwtMC43NjkyMzEsMHoiIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiCiAgICAgICAgICBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iIzU1NSIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDQ3Ljk4NTQ1ODM3NDAyMzQ0NSw4LjgwMTg5ODAwMjYyNDUxKSAiIGlkPSJzdmdfMTkiCiAgICAgICAgICBkPSJtNDcuNjAwODQyLDkuMTg2NTE0bDAsLTAuNzY5MjNsMC43NjkyMywwLjc2OTIzbC0wLjc2OTIzLDB6IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIgogICAgICAgICAgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiM1NTUiIGZpbGw9Im5vbmUiLz4KPC9zdmc+");
    position: absolute;
    top: 10px;
    left: 15px;
    z-index: 5;
} */
.md-fences:hover,
.auto-suggest-for-fences:hover {
    border-radius: var(--hover-radius);
    /* padding-top: 15px; */
    /* padding-bottom: 15px; */
    /* box-shadow: 0 20px 40px rgb(0 0 0 / 55%); */
}

.CodeMirror.cm-s-inner {
    border-radius: 15px;
    padding: 15px 10px 10px 10px;
}

.md-fences:hover::after {
    content: attr(lang);
    transition-duration: 200ms;
    color: var(--color-tertiary);
    text-shadow: 2px 2px 4px rgb(0 0 0 / 20%);
    font-size: .8rem;
    font-style: italic;
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 999;
}

.CodeMirror div.CodeMirror-cursor {
    border-left: 1px solid var(--text-color) !important;
}

.cm-s-inner .CodeMirror-gutters {
    color: #404b53;
    background-color: transparent;
    border-right: 0
}

.cm-s-inner .CodeMirror-linenumber {
    color: #6d8a88
}

.cm-s-inner div.CodeMirror-selected {
    background: #e0e0e0
}

.cm-s-inner .CodeMirror-line::selection,
.cm-s-inner .CodeMirror-line > span::selection,
.cm-s-inner .CodeMirror-line > span > span::selection {
    background: #e0e0e0
}

.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: #e0e0e0
}

.cm-s-inner .CodeMirror-guttermarker {
    color: #ac4142
}

.cm-s-inner .CodeMirror-guttermarker-subtle {
    color: #b0b0b0
}

.cm-s-inner .CodeMirror-linenumber {
    color: #b0b0b0
}

.cm-s-inner .CodeMirror-linenumbers {
    background-color: var(--code-block-bg-color)
}

.cm-s-inner .CodeMirror-cursor {
    border-left: 1px solid #505050
}

.cm-s-inner span.cm-comment {
    color: #8f5536
}

.cm-s-inner span.cm-atom {
    color: #aa759f
}

.cm-s-inner span.cm-number {
    color: #aa759f
}

.cm-s-inner span.cm-attribute,
.cm-s-inner span.cm-property {
    color: #90a959
}

.cm-s-inner span.cm-keyword {
    color: #ac4142
}

.cm-s-inner span.cm-string {
    color: #f4bf75
}

.cm-s-inner span.cm-variable {
    color: #90a959
}

.cm-s-inner span.cm-variable-2 {
    color: #6a9fb5
}

.cm-s-inner span.cm-def {
    color: #d28445
}

.cm-s-inner span.cm-bracket {
    color: #202020
}

.cm-s-inner span.cm-tag {
    color: #ac4142
}

.cm-s-inner span.cm-link {
    color: #aa759f
}

.cm-s-inner span.cm-error {
    /*background: #ac4142;*/
    color: var(--color-error)
}

.cm-s-inner .CodeMirror-matchingbracket {
    color: #f5f5f5 !important;
    background-color: #6a9fb5 !important
}
