lapis.css

/* 
 *     Typora Theme - Lapis    /    Author - YiNN 
 *     https://github.com/YiNNx/typora-theme-lapis
 */

:root {
    --text-color: #40464f;
    /* Text */
    --primary-color: #4870ac;
    /* Primary Color */
    --bg-color: #ffffff;
    --side-bar-bg-color: var(--bg-color);
    /* Background */

    --marker-color: #a2b6d4;
    /* List Marker */
    --source-color: #a8a8a9;
    /* for comment / link source */
    --highlight-color: #ffffb5c2;
    /* Highlight */
    --header-span-color: var(--primary-color);
    /* h2 Span Color */
    --block-bg-color: #f6f8fa;
    /* Block Background */
    --img-shadow-color: #e3e8f0;

    /* Overwrite of Typora Base Color */
    --search-hit-bg-color: var(--select-text-bg-color);
    --search-select-bg-color: #5bb3ff;
    --control-text-hover-color: #a2b6d4;
    --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;
    }
}

/*
 * Font-face for Cantarell, Source Han Serif CN and JetBrains Mono
 */

@font-face {
    font-family: "Cantarell";
    src: url('lapis/Cantarell-VF-fixed.otf');
}

@font-face {
    font-family: "JetBrainsMono";
    src: url('lapis/JetBrainsMono-Regular.ttf');
}

@font-face {
    font-family: "SourceHanSerifCN";
    src: url('lapis/SourceHanSerifCN-Medium.otf');
}

@font-face {
    font-family: "SourceHanSerifCN";
    src: url('lapis/SourceHanSerifCN-Bold.otf');
    font-weight: bold;
}

/*
 * 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', 'SourceHanSerifCN', 'JetBrainsMono';
    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);
}

/* Strong */

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

/* Link */

#write a {
    color: var(--primary-color);
    /* font-family: "Cantarell"; */
}

#write .md-p a,
#write .md-heading a,
[md-inline=url],
[md-inline=link]>.md-content {
    word-wrap: break-word;
    text-decoration: underline solid;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

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

.md-meta,
[md-inline=link]>.md-content,
[md-inline=image]>.md-meta,
.md-image>.md-meta {
    word-break: break-all;
    font-weight: normal;
    color: var(--source-color);
    font-family: "JetBrainsMono";
    font-size: 90%;
}


/* 
 * TOC
 */

.md-toc-content {
    font-family: 'SourceHanSerifCN';
}

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

#write div.md-toc-tooltip {
    font-family: 'SourceHanSerifCN';
    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-left: 2px solid var(--primary-color);
     */
    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: 10px 0px;
    margin-top: 10px;
}


/* 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 h4,
#write h5,
#write h6 {
    font-weight: normal;
}

#write h1,
#write h2,
#write h3,
#write h4,
#write h5,
#write h6 {
    font-family: 'SourceHanSerifCN';
    padding: 0px;
    color: var(--primary-color);
}

#write h1 {
    text-align: center;
}

#write h2 {
    padding: 1px 12.5px;
    border-radius: 4px;
    display: inline-block;
}

#write h2,
#write h2 code {
    background-color: var(--header-span-color);
}

#write h2,
#write h2 a,
#write h2 code,
#write h2 strong,
#write h2 script {
    color: var(--bg-color);
}

#write h2 a {
    border-bottom-color: var(--bg-color) !important;
}

#write h1 {
    font-size: 2rem;
}

#write h2 {
    font-size: 1.5rem;
}

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

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

#write h5 {
    font-size: 1.1rem;
}

#write h6 {
    font-size: 1.1rem;
}

#write h1 {
    padding-top: 0.9rem;
    margin-bottom: 2.3rem;
}

#write h2 {
    margin: .3em 0;
}

#write h3 {
    margin: 1em 0 1em;
}

#write h4 {
    margin: 0.8em 0 0.8em;
}

#write h5 {
    margin: 0.6em 0 0.6em;
}

#write h6 {
    margin: 0.4em 0 0.4em;
}

blockquote h3.md-focus:before,
blockquote h4.md-focus:before,
blockquote h5.md-focus:before,
blockquote h6.md-focus:before {
    left: -1.3rem;
}

/*
 * List
 */

::marker {
    font-weight: bold;
    color: var(--marker-color);
}

li.md-list-item {
    margin: 0.4rem 0;
}

#write ul,
#write ol {
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 20px;
}

#write ul {
    list-style-type: disc;
}

#write em {
    padding: 0 3px 0 0;
}

#write ul ul {
    list-style-type: square;
}

#write ol {
    list-style-type: decimal;
}

#write li section {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 1.7rem;
    text-align: justify;
    color: var(--text-color);
    font-weight: 500;
}

/*
 * Quote
 */

#write blockquote {
    display: block;
    font-size: .9em;
    overflow: auto;
    border-left: 3px solid var(--primary-color);
    padding: 15px 30px 15px 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    background: var(--block-bg-color);
}

.md-alert {
    display: block;
    overflow: auto;
    border-left: 3px solid var(--primary-color);
    padding: 15px 30px 15px 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    background: var(--block-bg-color);
}

.md-alert-text-container {
    font-size: 1.2em;
}

.md-end-block.md-p {
    margin-block-start: 0px;
    margin-block-end: 0px;
    padding-block-start: 2.8px;
    padding-block-end: 2.8px;
}

.md-alert-text-important {
    color: #614f9c;
}

.md-alert.md-alert-important {
    background-color: #614f9c0a;
    border-left-color: #614f9c;
}

.md-alert-text-note {
    color: #527da8;
}

.md-alert.md-alert-note {
    background-color: #527da80a;
    border-left-color: #527da8;
}

.md-alert-text-tip {
    color: #428485;
}

.md-alert.md-alert-tip {
    background-color: #4284850a;
    border-left-color: #428485;
}

.md-alert-text-warning {
    color: #a88652;
}

.md-alert.md-alert-warning {
    background-color: #9b80490a;
    border-left-color: #a88652;
}


.md-alert-text-caution {
    color: #a34f55;
}

.md-alert.md-alert-caution {
    background-color: #a34f550a;
    border-left-color: #a34f55;
}


/*
 * Inline code
 */

#write code {
    color: var(--primary-color);
    font-size: 94%;
    font-weight: normal;
    word-wrap: break-word;
    padding: 2px 4px 2px;
    border-radius: 3px;
    margin: 2px;
    background-color: var(--block-bg-color);
    font-family: 'JetBrainsMono';
    word-break: break-all;
}

/*
 * Img
 */

#write img {
    margin: 0 auto;
    max-width: 100%;
}

#write p>.md-image:only-child:not(.md-img-error) img,
#write p>img:only-child {
    filter: drop-shadow(var(--img-shadow-color) 0px 6px 6px);
    display: block;
    margin: 0 auto;
    padding: 1rem;
}

/*
 * Table
 */
#write table {
    display: table;
    text-align: justify;
    overflow-x: auto;
    border-collapse: collapse;
    border-spacing: 0px;
    font-size: 1em;
    margin: 0px 0px 20px;
    width: 100%;
}

#write tbody {
    border: 0;
}

#write table tr {
    border: 0;
    border-top: 1px solid #ccc;
}

#write table tr th,
#write table tr td {
    font-size: 1rem;
    border: 1px solid #d9dfe4;
    padding: 5px 10px;
    text-align: justify;
}

#write table tr th {
    font-family: SourceHanSerifCN;
    text-align: center;
    min-width: 10rem;
    font-weight: bold;
    color: var(--primary-color);
}

#write table tr td:hover,
#write table tr th:hover {
    background-color: var(--block-bg-color);
}

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);
}

.md-def-name {
    color: var(--primary-color);
}

/*
 * 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: var(--source-color);
    opacity: 1;
    font-family: 'JetBrainsMono';
}

/*
 * Dividing line
 */
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 2px solid #eef2f5;
    border-radius: 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: #fdfdfd;
    margin-left: -0.1rem;
    margin-right: 0.1rem;
    margin-top: -.6rem;
}

.task-list-item input:checked::before {
    content: '✓';
    font-weight: bold;
    -webkit-text-stroke: 1px var(--primary-color);
    color: var(--primary-color);
    background-color: var(--bg-color);
    font-size: 0.75rem;
    line-height: 0.8rem;
}

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

/*
 * Sidebar
 */
#typora-sidebar {
    font-family: 'Cantarell', 'SourceHanSerifCN';
    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(--primary-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(--primary-color);
}

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

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

/* Meta Block */

pre.md-meta-block {
    font-family: 'JetBrainsMono';
    color: var(--primary-color);
    background: #f6f8fa;
    padding: 1.5rem;
    margin: -37px 0rem 3.8rem;
    /* border-radius: 1rem; */
    filter: drop-shadow(var(--img-shadow-color) 0px 3px 3px);
    /* border-top: 1px solid var(--primary-color); */
    /* border-bottom: 1px solid var(--primary-color); */
}

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: #282c34; */
    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: 'JetBrainsMono';
    border-radius: 10px;
    background-color: var(--block-bg-color);
    /* border: 1px solid #eef2f5;*/
    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 {
    white-space: nowrap;
    padding: 0 3px 0 5px;
    text-align: right;
    color: var(--primary-color);
}

/* 
 * Code Block - Color Scheme
 */

.cm-s-inner .cm-keyword {
    color: #1694b6 !important;
}

.cm-s-inner .cm-operator {
    color: #2f86d2 !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: #b9218e !important;
}

.cm-s-inner .cm-variable-2 {
    color: #7aadad !important;
}

.cm-s-inner .cm-variable-3,
.cm-s-inner .cm-type,
.cm-s-inner .cm-atom {
    color: #378ed8 !important;
}

.cm-s-inner .cm-number {
    color: #1a5494 !important;
}

.cm-s-inner .cm-def,
.cm-s-inner .cm-qualifier {
    color: #0744ac !important;
}

.cm-s-inner .cm-string {
    color: #6f42c2 !important;
}

.cm-s-inner .cm-string-2 {
    color: #27638f !important;
}

.cm-s-inner .cm-comment {
    color: #9a9a9a !important;
}

.cm-s-inner .cm-meta {
    color: #0b93be !important;
}

.cm-s-inner .cm-attribute {
    color: #8f6aa8 !important;
}

.cm-s-inner .cm-error {
    color: rgba(255, 255, 255, 1) !important;
    background-color: #b9218e40 !important;
}

.cm-s-inner .CodeMirror-matchingbracket {
    text-decoration: underline;
    color: white !important;
}

.CodeMirror div.CodeMirror-cursor {
    border-left: 1px solid var(--primary-color);
    z-index: 3;
}

.cm-s-inner div.CodeMirror-selected {
    background: rgba(167, 178, 189, 0.2) !important;
}

.cm-s-inner.CodeMirror-focused div.CodeMirror-selected {
    background: rgba(167, 178, 189, 0.2) !important;
}

.cm-s-inner .CodeMirror-selected,
.cm-s-inner .CodeMirror-selectedtext {
    background-color: rgba(167, 178, 189, 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(167, 178, 189, 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(167, 178, 189, 0.2);
}

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

/*
 * Sitting - Unibody
 */

.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);
}

.export-detail,
.export-item.active,
.export-items-list-control {
    width: 75%;
}