marble.css

/* Typora 主题: Marble (意: 大理石) */

/* Typora Theme: Marble */

@import url('marble/LXGWWenKaiLite/result.css');
@import url('marble/Cantarell-VF-fixed/result.css');
@import url('marble/FiraCode-VF/result.css');

:root {
    /* 文本颜色 Text */
    --text-color: #222222;
    /* TODO：基础颜色 Primary Color */
    --primary-color: #191919;
    --secondary-color: #555555;

    /* 背景色 Background */
    --bg-color: #f0f0f0;
    --side-bar-bg-color: var(--bg-color);

    /*! ----Markdown 标记颜色 BEG---- */

    /* 列表标记 List Marker */
    --md-char-color: #C7C5C5;
    --marker-color: var(--secondary-color);
    --block-bg-color: #eaeaea;
    --quote-bar-color: #cccccc;

    --cell-border-color: #d9dfe4;
    /* 单元格的边框颜色 */
    --header-bg-color: #f0f0f0;
    /* 表头背景颜色 */
    --cell-hover-bg-color: #e9ecef;
    /* 单元格悬停背景颜色 */

    /*! ----Markdown 标记颜色 END---- */

    /* 高亮 Highlight */
    --highlight-color: #fffee0;
    --meta-content-color: #a9a9a9;

    --header-udln-color: var(--meta-content-color);
    /* H2 标题下划线 h2 underline Color */
    /* 块元素背景色 Block Background */
    --img-shadow-color: #e3e8f0;

    /* Overwrite of Typora Base Color */
    --search-hit-bg-color: var(--select-text-bg-color);
    --search-select-bg-color: #1a1a1a;
    --control-text-hover-color: #c4d2e7;
    --rawblock-edit-panel-bd: var(--block-bg-color);
    --item-hover-bg-color: rgb(246 248 250);
    --active-file-bg-color: var(--block-bg-color);
}

@media print {
    :root {
        --text-color: rgb(0, 0, 0);
    }

    ::-webkit-scrollbar-thumb {
        background-color: transparent !important;
    }
}

/* 基础样式 Basic Style */

#write {
    max-width: 950px;
    font-size: 1.1rem;
    color: var(--text-color);
    line-height: 1.6;
    word-spacing: 0px;
    letter-spacing: 0px;
    word-break: break-word;
    word-wrap: break-word;
    text-align: justify;
    font-family: 'Cantarell', 'LXGW WenKai Lite', 'Fira Code Light';
    margin-bottom: 20rem;
}

.searchpanel-search-option-btn {
    position: absolute;
    width: 24px;
    height: 16px;
    right: 5px;
    top: 5px;
    z-index: 99;
    cursor: pointer;
    margin-top: 1px;
    padding: 1px;
    border-radius: 3px;
    line-height: 10px;
    border: 1px solid #ddd;
    border-color: var(--active-toggle-btn-color);
}

#write strong {
    color: var(--primary-color);
    font-weight: 575;
}

/* 链接 Link */

#write strong {
    color: var(--primary-color);
    font-weight: 575;
    text-shadow: 0.4px 0.4px 0.8px rgba(0, 0, 0, 0.2);
}

#write .md-p a,
#write .md-heading a {
    word-wrap: break-word;
    text-decoration: underline solid;
    margin: 2px;
}

#write a {
    color: #444444;
    text-decoration: underline dashed;
}

#write h2.md-heading a {
    text-decoration: underline;
    border-bottom: 0;
    text-decoration-thickness: 1.2px;
    text-underline-offset: 2px;
}

[md-inline=url],
[md-inline=link]>.md-content,
[md-inline=image]>.md-meta {
    word-break: break-all;
    font-weight: normal;
    font-family: 'Fira Code Light';
    padding-left: 0.15rem;
    padding-right: 0rem;
    color: var(--marker-color);
}

/* 目录 TOC */

.md-toc-content {
    font-family: 'Cantarell', 'LXGW WenKai Lite';
}

.md-toc-content:empty:before {
    color: var(--primary-color);
}

#write div.md-toc-tooltip {
    font-family: 'Cantarell', 'LXGW WenKai Lite';
    color: var(--primary-color);
    position: static;
    margin-top: 10px;
    background-color: var(--block-bg-color);
    line-height: 1.6rem;
    padding: 0.3rem 0.75rem;
    border-top: none;
    border-radius: .5rem;
}

.md-toc:focus .md-toc-content {
    border-color: var(--bg-color);
    margin: 9px -1px;
    margin-top: 9px;
}

.md-toc .md-toc-content {
    border-color: var(--bg-color);
    margin: 9px 0px;
    margin-top: 8px;
    color: var(--text-color);
}


/* mark */

mark {
    background: var(--highlight-color);
    padding: 1px .15rem;
    border-radius: 1px;
    color: inherit;
}

/* 段落 Paragraph */

#write+p,
#write blockquote p {
    font-size: 1.1rem;
    padding-top: .2rem;
    padding-bottom: .2rem;
    margin: 0;
    line-height: 1.8rem;
    color: var(--text-color);
}

/* 标题 Header */

/* 去除粗体效果，使标题不太突出 */
#write h1,
#write h2,
#write h3,
#write h4,
#write h5,
#write h6 {
    font-weight: normal;
    font-family: 'Cantarell', 'LXGW WenKai Lite', sans-serif;
    color: var(--primary-color);
    margin: 0.4em 0;
    /* 调整标题的上下间距 */
    padding: 0;
    /* 去除默认的内边距 */
    position: relative;
    /* 为伪元素定位提供基础 */
}

/* 调整各级标题的字体大小 */
#write h1 {
    font-size: 1.8em;
    text-align: center;
}

#write h2 {
    font-size: 1.6em;
}

#write h3 {
    font-size: 1.4em;
}

#write h4 {
    font-size: 1.2em;
}

#write h5 {
    font-size: 1em;
}

#write h6 {
    font-size: 0.9em;
}

/* 标题下划线效果，仅应用于h2 */
#write h2 {
    background-image: linear-gradient(to left, transparent, var(--block-bg-color), transparent);
    background-repeat: no-repeat;
    background-size: 120% 1.2px;
    background-position: center bottom;
}

/* 确保标题内链接、加粗和代码元素的颜色一致 */
#write h2 a,
#write h2 strong,
#write h2 code {
    color: var(--bg-color);
}

/* 悬浮的标题层级标志 */
#write h2::before,
#write h3::before,
#write h4::before,
#write h5::before,
#write h6::before {
    content: attr(data-level);
    /* 使用data-level属性动态生成内容 */
    font-size: 0.4em;
    /* 调整标志的大小，使其不太显眼 */
    color: var(--meta-content-color);
    /* 使用次要颜色，使其不突兀 */
    margin-right: 0.5em;
    /* 与标题文字保持一定距离 */
    vertical-align: middle;
    /* 与文本对齐 */
    position: absolute;
    /* 绝对定位 */
    left: -1.5em;
    /* 根据需要调整位置 */
}

#write h2::before {
    content: "H2";
}

#write h3::before {
    content: "H3";
}

#write h4::before {
    content: "H4";
}

#write h5::before {
    content: "H5";
}

#write h6::before {
    content: "H6";
}

/* 列表 List */

/* 设置列表项的标记样式 */
::marker {
    font-weight: bold;
    color: var(--marker-color);
    /* 设置标记颜色 */
}

/* 列表项的通用样式 */
#write ul,
#write ol {
    margin: 1em 0;
    /* 设置列表的上下间距 */
    padding-left: 1.675em;
    /* 设置列表相对于正文的缩进 */
}

/* 无序列表的样式 */
#write ul {
    list-style-type: disc;
    /* 默认的无序列表标记 */
}

/* 嵌套无序列表的样式 */
#write ul ul {
    list-style-type: square;
    /* 第二级嵌套的无序列表标记 */
}

#write ul ul ul {
    list-style-type: circle;
    /* 第三级嵌套的无序列表标记 */
}

#write ul ul ul ul {
    list-style-type: disc;
    /* 第四级及以上的嵌套无序列表标记 */
}

/* 有序列表的样式 */
#write ol {
    list-style-type: decimal;
    /* 默认的有序列表标记 */
}

/* 列表项内容的样式 */
#write li {
    margin: 0.5em 0;
    /* 列表项的上下间距 */
    line-height: 1.7rem;
    /* 调整列表项的行高 */
    color: var(--text-color);
    /* 列表项文字颜色 */
    font-weight: 500;
    /* 列表项字体权重 */
    text-align: justify;
    /* 列表项文本对齐方式 */
}

/* 加粗斜体元素的样式 */
#write em {
    padding: 0 3px 0 0;
    /* 调整斜体文字的内边距 */
}

/* 引用块 blockquote */

#write blockquote {
    border-left: 4px solid var(--quote-bar-color);
    /* 左侧竖线标识，颜色比正文略浅 */
    margin: 1em 0 1em 0.8em;
    /* 上下间距 */
    padding: 0.5em 1em;
    /* 内边距 */
    color: var(--secondary-color);
    /* 引用文本颜色 */
    font-size: 0.9em;
    /* 调整引用文本的字体大小 */
    background: none;
    /* 无背景色 */
}

/* 内联代码 inline code */

#write code {
    color: var(--secondary-color);
    /* 设置代码文本颜色，保持与主题色调一致 */
    font-size: 0.94em;
    font-weight: normal;
    padding: 2px 5px;
    /* 调整内边距 */
    border-radius: 4px;
    /* 圆角边框 */
    margin: 2px;
    /* 外边距 */
    background-color: var(--block-bg-color);
    font-family: 'Fira Code Light', monospace;
    word-wrap: break-word;
    word-break: break-all;
    border: 1px solid var(--code-border-color);
    /* 细边框，增加层次感 */
}

/* 图像 */

#write img {
    max-width: 100%;
    /* 确保图像在容器内缩放 */
    height: auto;
    /* 保持图像纵横比 */
    display: block;
    /* 使图像为块级元素 */
    margin: 0 auto;
    /* 居中对齐 */
}

#write p>.md-image:only-child:not(.md-img-error) img,
#write p>img:only-child {
    filter: drop-shadow(var(--img-shadow-color) 0px 4px 8px);
    /* 更柔和的阴影效果 */
    padding: 1rem;
    /* 内边距 */
    border-radius: 8px;
    /* 圆角边框 */
    border: 1px solid var(--block-bg-color);
    /* 边框 */
    margin: 1rem auto;
    /* 外边距，确保上下空间 */
}

/* 表格 Table */

#write table {
    display: table;
    text-align: left;
    /* 调整文本对齐方式以提高可读性 */
    overflow-x: auto;
    /* 确保表格在小屏幕上的可滚动性 */
    border-collapse: collapse;
    /* 合并边框 */
    border-spacing: 0px;
    /* 无额外间距 */
    font-size: 1rem;
    /* 设置字体大小 */
    margin: 0 0 1.5rem;
    /* 设置底部外边距 */
    width: 100%;
    /* 确保表格宽度自适应容器 */
}

/* 表格主体样式 */
#write tbody {
    border: 0;
}

/* 表格行样式 */
#write table tr {
    border: 0;
    border-top: 1px solid var(--quote-bar-color);
    /* 表格行顶部边框 */
}

/* 表格单元格样式 */
#write table tr th,
#write table tr td {
    font-size: 1rem;
    /* 单元格字体大小 */
    border: 1px solid var(--cell-border-color);
    /* 单元格边框颜色 */
    padding: 10px 15px;
    /* 内边距，增加单元格的舒适感 */
    text-align: left;
    /* 左对齐以提高可读性 */
}

/* 表头样式 */
#write table tr th {
    font-family: 'LXGW WenKai Lite', serif;
    /* 表头字体 */
    text-align: center;
    /* 表头内容居中 */
    min-width: 10rem;
    /* 表头单元格最小宽度 */
    font-weight: bold;
    /* 粗体显示 */
    color: var(--primary-color);
    /* 表头文字颜色 */
    background-color: var(--header-bg-color);
    /* 表头背景颜色 */
}

/* 单元格悬停效果 */
#write table tr td:hover,
#write table tr th:hover {
    background-color: var(--cell-hover-bg-color);
    /* 悬停背景颜色 */
}

/* 最小宽度设置 */
#write table td {
    min-width: 32px;
    /* 单元格的最小宽度 */
}

/* 调整表格大小弹出菜单样式 */
.md-table-resize-popover {
    width: auto !important;
}

/* 脚注 Footnote */

/* 脚注上标 */
sup.md-footnote {
    background-color: var(--block-bg-color);
    /* 设置浅背景颜色 */
    color: var(--primary-color);
    /* 设置文本颜色 */
    border-radius: 0.2rem;
    /* 圆角 */
    padding: 0.1rem 0.3rem;
    /* 内边距 */
    font-size: 0.8em;
    /* 缩小字体 */
    position: relative;
    /* 相对定位 */
    top: -0.3em;
    /* 调整垂直位置 */
    left: 0em;
    /* 调整水平位置 */
    margin-left: 0.2rem;
    /* 左边距 */
    margin-right: 0.2rem;
    /* 右边距 */
}

/* 脚注内容 */
.md-footnotes {
    border-top: 1px solid var(--marker-color);
    /* 顶部边框 */
    padding-top: 1rem;
    /* 上内边距 */
    margin-top: 2rem;
    /* 上外边距 */
}

.md-footnote-content {
    font-size: 0.9em;
    /* 调整字体大小 */
    color: var(--text-color);
    /* 文本颜色 */
    background-color: var(--block-bg-color);
    /* 设置浅背景颜色 */
    padding: 0.5rem;
    /* 内边距 */
    border-radius: 0.3rem;
    /* 圆角 */
    margin-bottom: 1rem;
    /* 下外边距 */
}

/* 脚注定义名 */
.md-def-name {
    color: var(--primary-color);
    /* 设置文本颜色 */
    font-weight: normal;
    /* 粗体 */
    margin-right: 0.5rem;
    /* 右边距 */
}

/* 数学公式 Math Script */

.md-inline-math script {
    color: var(--primary-color);
}

.md-rawblock-control:not(.md-rawblock-tooltip) {
    background: var(--bg-color);
    color: var(--md-char-color);
}


.code-tooltip {
    box-shadow: none;
}

.md-rawblock-tooltip.md-rawblock-control {
    border-radius: 1rem;
}

.md-rawblock .md-rawblock-tooltip {
    inset: auto 0.3rem auto auto;
    transform: translateY(-120%);
}

/* 
 * Comment
 */
.md-comment {
    color: #a8a8a9;
    opacity: 1;
    font-family: 'Fira Code Light';
}

/* 分割线 Dividing line */

hr {
    border: 0;
    border-top: 1px solid #D0DDE6;
    border-bottom: 1px solid #D0DDE6;
    margin: 20px 0;
    height: 2px;
}

/* 任务列表 Checkbox */

#write input[type=checkbox] {
    width: 0;
}

.task-list-item input::before {
    content: '';
    display: inline-block;
    width: 1.0125rem;
    height: 1.0125rem;
    vertical-align: middle;
    text-align: center;
    border: 1px solid var(--marker-color);
    border-radius: 1.2rem;
    background-color: var(--bg-color);
    margin-left: -0.1rem;
    margin-right: 0.1rem;
    margin-top: 0rem;
}

.task-list-item input:checked::before {
    content: '';
    display: inline-block;
    -webkit-text-stroke: 1px var(--primary-color);
    background-color: var(--md-char-color);
    line-height: 1rem;
}

/* TODO：选中复选框后，给后面的文字添加删除线 */
.task-list-item input:checked+label {
    text-decoration: line-through;
}

blockquote .task-list-item input::before {
    margin-top: .2rem;
}

/*
 * Sidebar
 */
#typora-sidebar {
    font-family: 'Cantarell', 'LXGW WenKai Lite';
    height: 100%;
    color: var(--text-color);
    font-size: 0.92rem;
    background-color: var(--bg-color);
}

#sidebar-content.sidebar-content {
    margin-top: .5rem;
}

.html-for-mac #write input[type=checkbox] {
    margin-top: 0.65rem;
}

.html-for-mac #write .task-list-item input::before {
    margin-top: -.85rem;
}


/*
 * Sidebar - FileNode
 */

.active-tab-files #info-panel-tab-file .info-panel-tab-border,
.active-tab-outline #info-panel-tab-outline .info-panel-tab-border,
.ty-show-search #info-panel-tab-search .info-panel-tab-border {
    border-radius: 10px;
    height: 1px;
    background-color: var(--primary-color);
}

.file-node-content {
    color: var(--primary-color);
    line-height: 1.6rem;
}

span.file-node-title-name-part {
    color: var(--text-color);
}

span.file-node-title-ext-part {
    color: var(--text-color);
}

.file-node-icon {
    padding-right: 0.2rem;
}

.file-tree-node.active>.file-node-background {
    border-left: 4px solid var(--secondary-color);
    border-color: var(--primary-color);
}

/*
 * Sidebar - Outline
 */

#outline-content {
    height: 100%;
    overflow-x: hidden;
    line-height: 1.6rem;
    font-size: .96rem;
}

#outline-content .outline-active,
.pin-outline .outline-active {
    color: var(--secondary-color);
}

.outline-item {
    padding-left: 2em;
}

.outline-item>.outline-expander:before {
    transform: translateY(-1px) !important;
}

/* Meta Block */

pre.md-meta-block {
    font-family: 'Fira Code Light';
    color: var(--primary-color);
    background: #f6f8fa;
    padding: 1.5rem;
    margin: -37px 0rem 3.8rem;
    filter: drop-shadow(var(--img-shadow-color) 0px 3px 3px);
}

pre.md-fences-advanced.md-focus .md-fences-adv-panel {
    border-radius: .8rem;
}

/*
 * Scrollbar
 */

#outline-content::-webkit-scrollbar {
    width: .5rem;
}

#file-library::-webkit-scrollbar {
    width: .5rem;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(179, 179, 179, 0.425);
}

::-webkit-scrollbar {
    width: 1rem;
}

/* 代码块风格 Code Block - Style */

.md-fences:before {
    content: ' ';
    display: block;
    width: 100%;
    background-size: 40px;
    background-repeat: no-repeat;
    background-color: var(--block-bg-color);
    margin-bottom: -7px;
    border-radius: 5px;
    background-position: 10px 10px;
}

.CodeMirror-wrap .CodeMirror-scroll {
    overflow-x: auto;
}

.md-fences .cm-s-inner.CodeMirror {
    margin: 1.5rem 0;
}

.cm-s-inner.CodeMirror {
    padding: 1.2rem .8rem;
    color: #4f5467;
    font-family: 'Fira Code Light';
    border-radius: 10px;
    background-color: var(--block-bg-color);
    line-height: 1.6rem;
}

.CodeMirror-gutters {
    border-right: 1px solid #a2b6d452;
    background: inherit;
    white-space: nowrap;
}

pre.CodeMirror-line {
    padding: 0 1.2rem;
}

.CodeMirror-linenumber {
    padding: 0 3px 0 5px;
    text-align: right;
    color: #3498db;
}

/* 关键字 - 海蓝石 */
.cm-s-inner .cm-keyword {
    color: #87d4eb !important;
}

/* 操作符 - 铁灰色 */
.cm-s-inner .cm-operator {
    color: #43464B !important;
}

/* 变量、内置对象、头文件、标签、属性、引用 - 紫水晶 */
.cm-s-inner .cm-variable,
.cm-s-inner .cm-builtin,
.cm-s-inner .cm-header,
.cm-s-inner .cm-tag,
.cm-s-inner .cm-property,
.cm-s-inner .cm-quote {
    color: #9932CC !important;
}

/* 变量2 - 绿松石 */
.cm-s-inner .cm-variable-2 {
    color: #30d5b1 !important;
}

/* 变量3、类型、原子 - 蓝宝石 */
.cm-s-inner .cm-variable-3,
.cm-s-inner .cm-type,
.cm-s-inner .cm-atom {
    color: #3c7ce3 !important;
}

/* 数字 - 玫瑰石膏 */
.cm-s-inner .cm-number {
    color: #e5c0ff !important;
}

/* 定义、限定符 - 青金石 */
.cm-s-inner .cm-def,
.cm-s-inner .cm-qualifier {
    color: #1357a5c2 !important;
}

/* 字符串 - 黄铁矿 */
.cm-s-inner .cm-string {
    color: #8B4513 !important;
}

/* 字符串2 - 绿松石 */
.cm-s-inner .cm-string-2 {
    color: #30D5C8 !important;
}

/* 注释 - 银灰 */
.cm-s-inner .cm-comment {
    color: #C0C0C0 !important;
}

/* 元数据 - 暗金色 */
.cm-s-inner .cm-meta {
    color: #B8860B !important;
}

/* 属性 - 紫水晶 */
.cm-s-inner .cm-attribute {
    color: #9932CC !important;
}

/* 错误 - 铁玫瑰 */
.cm-s-inner .cm-error {
    color: #FFFFFF !important;
    background-color: #D02537 !important;
}

/* 匹配的括号 - 白垩石 */
.cm-s-inner .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: #ffffffc3 !important;
}

.CodeMirror div.CodeMirror-cursor {
    border-left: 1px solid #3498db;
    z-index: 3;
}

.cm-s-inner div.CodeMirror-selected {
    background: rgba(52, 152, 219, 0.2) !important;
}

.cm-s-inner.CodeMirror-focused div.CodeMirror-selected {
    background: rgba(52, 152, 219, 0.2) !important;
}

.cm-s-inner .CodeMirror-selected,
.cm-s-inner .CodeMirror-selectedtext {
    background-color: rgba(52, 152, 219, 0.0) !important;
}

.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-color: rgba(52, 152, 219, 0.2);
}

.cm-s-inner .CodeMirror-line::selection,
.cm-s-inner .CodeMirror-line>span::selection,
.cm-s-inner .CodeMirror-line>span>span::selection {
    background-color: rgba(52, 152, 219, 0.2);
}

.md-rawblock .md-rawblock-tooltip {
    inset: auto 0.3rem auto auto;
    transform: translateY(-120%);
}

.megamenu-menu-header {
    border: none;
    color: var(--text-color);
}

.megamenu-menu-header #megamenu-back-btn,
.megamenu-menu-header .megamenu-menu-header-title-back,
.megamenu-menu-header .megamenu-menu-header-title-menu {
    color: var(--text-color);
}

.megamenu-menu {
    background-color: var(--bg-color);
    color: var(--text-color);
    box-shadow: none !important;
}

header,
#megamenu-content {
    background-color: var(--bg-color);
    background-image: none !important;
}

.md-search-hit {
    background-color: var(--search-hit-bg-color);
}

#recent-file-panel tbody tr:nth-child(2n-1) {
    background-color: var(--recent-file-panel-n-bg-color);
    color: var(--recent-file-panel-n-color);
}