light-and-dark-lb.scss

@import "light-scheme";
@import "dark-scheme";
@import "root";
@import "vsc-scheme";

html {
    font-size: var(--html-size);
    @media print {
        font-size: var(--print-html-size);
    }
    -webkit-font-smoothing: antialiased
}

body {
    font-family: var(--sans-serif);
    line-height: var(--body-line-height);
    color: var(--body-color);
}

#write {
    max-width: 768px;
    margin: 0 auto;
    padding: 50px 30px 100px;

    > ul:first-child,
    > ol:first-child {
        margin-top: 30px;
    }

    /* h3 ~ h6 标题前的等级提示 */
    @for $i from 3 through 6 {
        @if($i == 3) {
            > h3.md-focus:before {
                top: .375rem
            }
        }
        @else {
            > h#{$i}.md-focus:before {
                left: -1.5625rem;
                top: .285714286rem;
            }
        }
    }
    // 链接
    a {
        text-decoration: none;
        color: var(--link-color);

        &:hover {
            border-bottom: 1px solid var(--link-hover-border-bottom);
        }
    }
    // YAML
    pre.md-meta-block {
        margin-top: 0 !important;
        border: 0;
        border-radius: 3px;
        padding: 1rem;
        font-size: 85%;
        line-height: 1.45;
        background-color: #f7f7f7;
        color: #777777;
    }
}

// 标题
%heading {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    cursor: text;
}
$heading-size: 2.25em;
$heading-line-height: 1.2;
@for $i from 1 through 6 {
    h#{$i} {
        @extend %heading;
        font-size: $heading-size;
        line-height: $heading-line-height;
        @if($i == 1 or $i == 2) {
            border-bottom: 1px solid var(--border-bottom-color);
            padding-bottom: 3px;
        }
        @if ($i == 1) {
            text-align: center;
        }

        &:hover {
            // 标题上的内联链接
            a.anchor {
                text-decoration: none;
            }
        }
        //内联代码
        tt,
        code {
            font-size: inherit;
        }
    }

    $heading-size: $heading-size - 0.25em;
    $heading-line-height: $heading-line-height + 0.05;
}
/* 段落 */
p {
    margin: 0.8em 0;
    line-height: 2;
}

// 有序列表和无序列表
ul,
ol {
    margin: 0.8em 0;
    padding-left: 30px;
    &:last-child {
        margin-bottom: 0;
    }
}
li {
    > ol,
    > ul {
        margin: 0 0;
    }

    p.first {
        display: inline-block;
    }
}
//描述列表
dl {
    margin: 0.8em 0;
}
/* 任务列表 */
.md-task-list-item {
    > input {
        margin-left: -1.3em;
    }
}

//块引用
blockquote {
    margin: 0.8em 0;
    border-left: 4px solid var(--blockquote-border-left-color);
    padding: 0 15px;
    color: var(--blockquote-color);
    blockquote {
        padding-left: 0;
    }
}

// 表格
table {
    margin: 0.8em 0;
    padding: 0;
    word-break: inherit;

    %tr-th-td {
        margin: 0;
        border: 1px solid var(--table-border-color);
    }
    %th-td {
        padding: 6px 13px;
        &:first-child {
            margin-top: 0;
        }
        &:last-child {
            margin-bottom: 0;
        }
    }
    tr {
        @extend %tr-th-td;
        padding: 0;
        &:nth-child(2n) {
            background-color: var(--tr-zebra-striping-bg-color);
        }
    }
    th {
        @extend %tr-th-td;
        @extend %th-td;
        font-weight: bold;
    }
    td {
        @extend %tr-th-td;
        @extend %th-td;
    }
}

thead {
    background-color: var(--thead-bg-color);
}

hr {
    box-sizing: content-box;
    height: 2px;
    margin: 16px 0;
    border: 0 none;
    padding: 0;
    overflow: hidden;
    background-color: var(--hr-bg-color);
}

pre {
    @media print {
        page-break-inside: avoid;
        word-wrap: break-word;
    }
}

/* 内联代码 */
code,
tt {
    border-radius: 3px;
    padding: 1px 2px 2px 2px;
    font-size: 0.9em;
    border: 1px solid var(--code-border-color);
    background-color: var(--code-bg-color);
}

// 代码块
.md-fences {
    margin-top: 15px;
    margin-bottom: 15px;
    border: 0;
    border-radius: 6px;
    padding: 8px 4px 6px 4px;
    background-color: #1e1e1e;
    font-size: .9em;
    color: #d1d5db;
    // 代码语言提示
    .code-tooltip {
        box-shadow: none;
        border-radius: 6px;
        border: 1px solid grey;
    }
}
// 行
.CodeMirror-lines {
    padding-left: 4px;
}
// 行号
.CodeMirror-linenumber {
    color: #808080;
}
// 行号右侧的竖线
.CodeMirror-gutters {
    border-right: 1px solid #484848;
}
.CodeMirror {
    // 代码块内的光标
    div.CodeMirror-cursor {
        border-left: 1px solid #adaeac;
    }
}

.cm-s-inner {
    .cm-keyword {
        color: var(--vsc-keyword);
    }

    .cm-atom {
        color: var(--vsc-atom);
    }

    .cm-string {
        color: var(--vsc-string);
    }

    .cm-string-2 {
        color: var(--vsc-string);
    }

    .cm-number {
        color: var(--vsc-number);
    }

    .cm-qualifier {
        color: var(--vsc-qualifier);
    }

    .cm-builtin {
        color: var(--vsc-builtin);
    }

    .cm-bracket {
        color: var(--vsc-bracket);
    }

    .cm-header {
        color: var(--vsc-header);
    }

    .cm-def {
        color: var(--vsc-def);
    }

    .cm-variable {
        color: var(--vsc-var);
    }

    .cm-variable-2 {
        color: var(--vsc-var);
    }

    .cm-variable-3 {
        color: #d7ba7d;
    }

    .cm-property {
        color: var(--vsc-property);
    }

    .cm-attribute {
        color: var(--vsc-attribute);
    }

    .cm-operator {
        color: var(--vsc-operator);
    }

    .cm-meta {
        color: var(--vsc-meta);
    }

    .cm-hr {
        color: var(--vsc-hr);
    }

    .cm-comment {
        color: var(--vsc-comment);
    }

    .cm-quote {
        color: var(--vsc-quote);
    }

    .cm-tag {
        color: var(--vsc-tag);
    }

    .cm-link {
        color: var(--vsc-link);
    }
    // diff 语言
    .cm-negative {
        color: var(--vsc-negative);
        background-color: #400600;
    }
    // diff 语言
    .cm-positive {
        color: var(--vsc-positive);
        background-color: #074420;
    }

    .cm-type {
        color: var(--vsc-type);
    }

    &.cm-atom {
        color: #9CDCFE;
    }

    &.cm-comment {
        color: var(--vsc-comment);
    }
}

.cm-s-typora-default {
    .CodeMirror-activeline-background {
        left: -9999px;
        right: -9999px;
        background: #80808020;
    }
    /* 代码块 */
    .cm-code,
    .cm-comment {
        color: var(--vsc-comment);
        font-family: var(--monospace);
    }
    .cm-string {
        color: #CE9178;
    }
    .cm-tag {
        color: var(--vsc-tag);
    }
}

.cm-header,
.cm-strong {
        font-weight: 700;
    }
.cm-em {
    font-style: italic;
}
.cm-link {
    text-decoration: underline;
}
.cm-error,
.cm-invalidchar {
    color: var(--vsc-negative);
}
.cm-constant {
    color: #4EC9B0;
}
.cm-defined {
    color: var(--vsc-number);
}
.cm-searching {
    background: #ffa;
    background: rgba(255, 255, 0, .4);
}
.cm-tw-syntaxerror {
    color: var(--vsc-operator);
    background-color: #900;
}

div {
    &.CodeMirror {
        span {
            &.CodeMirror-matchingbracket {
                color: var(--vsc-number);
            }
            &.CodeMirror-nonmatchingbracket {
                color: var(--vsc-negative);
            }
        }
    }
}

/* 数学公式 */
.md-mathjax-midline {
    background: #fafafa;
}
.mathjax-block {
    > .code-tooltip {
        bottom: .375rem;
    }
}

.md-image {
    > .md-meta {
        border-radius: 3px;
        padding: 2px 0 0 4px;
        font-size: .9em;
        color: inherit;
    }
}

.md-tag {
    color: #a7a7a7;
    opacity: 1;
}

.md-lang {
    color: #b4654d;
}

#typora-source {
    .CodeMirror-gutter-wrapper {
        font-family: var(--monospace) !important;
    }
}
.typora-sourceview-on {
    #toggle-sourceview-btn {
        background: var(--side-bar-bg-color);
    }
}

#typora-quick-open {
    border: 1px solid #ddd;
    background-color: #f8f8f8;
}
#typora-quick-open-item {
    border-width: 1px;
    border-style: solid;
    background-color: #FAFAFA;
    border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;
}

.sidebar-tabs {
    border-bottom: none;
}

.on-focus-mode {
    blockquote {
        border-left-color: rgba(85, 85, 85, .12);
    }
}

header,
.context-menu,
.megamenu-content,
footer {
    font-family: var(--sans-serif);
}

.file-node-content:hover {
    .file-node-icon,
    .file-node-open-state {
        visibility: visible;
    }
}

.mac-seamless-mode {
    #typora-sidebar {
        background-color: var(--side-bar-bg-color);
    }
}

#md-notification {
    .btn {
        border: 0;
    }
}

.dropdown-menu {
    .divider {
        border-color: #e5e5e5;
    }
}
/* 设置 */
.ty-preferences {
    .window-content {
        background-color: var(--window-content-bg-color);
    }
    .nav-group-item.active {
        color: white;
        background: #999;
    }
}

.context-menu {
    border: 1px solid var(--border-color);
}

.menu-item-container {
    a.menu-style-btn {
        background-color: var(--context-menu-btn-bg-color);
        background-image: var(--context-menu-btn-bg-image);
    }
}

.ty-tooltip {
    background: var(--side-bar-bg-color);
    color: white;
}