theme.css

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  src: url("src/NotoSans-Regular.ttf");
}

@font-face {
  font-family: "Noto Sans SC";
  font-style: normal;
  src: url("src/NotoSansSC-Regular.otf") format('opentype');
}

@font-face {
  font-family: "JetBrains Mono";
  font-style:normal;
  src: url("src/JetBrainsMono-Regular.woff2") format('woff2');
}

:root {
    /* 主色 */
    --b3-theme-primary: #3884ff;
    --b3-theme-primary-light: rgba(66, 133, 244, 0.54);
    --b3-theme-primary-lighter: rgba(66, 133, 244, 0.38);
    --b3-theme-primary-lightest: rgba(66, 133, 244, 0.12);
    --b3-theme-secondary: #f3a92f;
    --b3-theme-background: #ffffff;
    --b3-theme-surface: #f5f7f9;
    /* 原来透明度是0.86, 暂改为不透明 */
    /* rgba(245, 247, 249, 1) */
    --b3-theme-surface-light: #f5f7f9; 
    --b3-theme-error: #ff4642;

    /* 文字颜色 */
    --b3-theme-on-primary: #fff;
    --b3-theme-on-secondary: #fff;
    --b3-theme-on-background: #202124;
    --b3-theme-on-surface: #5f6368;
    --b3-theme-on-error: #fff;

    /* 字体 */
    --b3-font-family: "Noto Sans", "Noto Sans SC", "Helvetica Neue", "Luxi Sans", "DejaVu Sans", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
    --b3-font-family-code: "JetBrains Mono", "Noto Sans SC", mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";
    /* todo */
    --b3-font-family-graph: mononoki;

    /* 线条 */
    --b3-border-color: rgba(0, 0, 0, .1);

    /* 滚动条 */
    --b3-scroll-color: rgba(0, 0, 0, .2);

    /* 列表 */
    --b3-list-hover: rgba(0, 0, 0, .05);

    /* 页签 */
    /* --b3-tab-background: #f8f9fa; */
    /* 改成与theme-surface一样的颜色 */
    --b3-tab-background: var(--b3-theme-surface);
    --b3-tab-background-hover: #e9eaeb;

    /* 提示 */
    --b3-tooltips-color: rgba(0, 0, 0, 0.54);

    /* 卡片背景 */
    --b3-card-error-color: rgb(97, 26, 21);
    --b3-card-error-background: rgb(253, 236, 234);
    --b3-card-warning-color: rgb(102, 60, 0);
    --b3-card-warning-background: rgb(255, 244, 229);
    --b3-card-info-color: rgb(13, 60, 97);
    --b3-card-info-background: rgb(232, 244, 253);
    --b3-card-success-color: rgb(30, 70, 32);
    --b3-card-success-background: rgb(237, 247, 237);

    /* 自定义文字 */
    --b3-font-color1: var(--b3-card-error-color);
    --b3-font-color2: var(--b3-card-warning-color);
    --b3-font-color3: var(--b3-card-info-color);
    --b3-font-color4: var(--b3-card-success-color);
    --b3-font-color5: var(--b3-theme-on-surface);
    --b3-font-color6: var(--b3-theme-primary);
    --b3-font-color7: var(--b3-theme-secondary);
    --b3-font-color8: var(--b3-theme-error);
    --b3-font-color9: #f5539e;
    --b3-font-color10: #944194;
    --b3-font-color11: #65b84d;
    --b3-font-color12: #f5822e;
    --b3-font-color13: var(--b3-theme-background);
    --b3-font-background1: var(--b3-card-error-background);
    --b3-font-background2: var(--b3-card-warning-background);
    --b3-font-background3: var(--b3-card-info-background);
    --b3-font-background4: var(--b3-card-success-background);
    --b3-font-background5: var(--b3-theme-surface);
    --b3-font-background6: var(--b3-theme-primary-light);
    --b3-font-background7: rgba(217, 211, 215, 0.5);
    --b3-font-background8: rgba(255, 193, 153, 0.5);
    --b3-font-background9: rgba(189, 201, 255, 0.5);
    --b3-font-background10: rgba(239, 218, 251, 0.5);
    --b3-font-background11: rgba(234, 202, 220, 0.5);
    --b3-font-background12: rgba(253, 198, 200, 0.5);
    --b3-font-background13: var(--b3-theme-on-background);

    /* 动画效果 */
    --b3-transition: all .15s cubic-bezier(0, 0, .2, 1) 0ms;

    /* 阴影 */
    --b3-point-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    --b3-dialog-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);

    /* diff */
    --b3-diff-add: #dfd;
    --b3-diff-add-surface: #97f295;
    --b3-diff-del: #fee8e9;
    --b3-diff-del-surface: #ffb6ba;

    /* 图表颜色 */
    --b3-graph-p-point: #076f7e;
    --b3-graph-heading-point: #660e7a;
    --b3-graph-math-point: #80FFA5;
    --b3-graph-code-point: #00DDFF;
    --b3-graph-table-point: #37A2FF;
    --b3-graph-list-point: #FF0087;
    --b3-graph-todo-point: #FFBF00;
    --b3-graph-olist-point: #b3005f;
    --b3-graph-listitem-point: #f65b00;
    --b3-graph-bq-point: #8d48e3;
    --b3-graph-super-point: #dd79ff;
    --b3-graph-doc-point: #202124;
    --b3-graph-tag-point: #dbf32f;
    --b3-graph-asset-point: #05c091;
    --b3-graph-line: #5f6368;
    --b3-graph-ref-line: #d23f31;
    --b3-graph-tag-line: #5f6b06;
    --b3-graph-tag-tag-line: #dbf32f;
    --b3-graph-asset-line: #037457;
    --b3-graph-hl-point: #f3a92f;
    --b3-graph-hl-line: #4285f4;

    /* 编辑器工具栏高度 */
    /* --b3-protyle-toolbar-height: 26px; */
    --b3-protyle-toolbar-height-space: 3px;

    /* 编辑器搜索颜色 */
    --b3-protyle-search-background: #ffe955;
    --b3-protyle-search-border-color: #f2e680;
    --b3-protyle-search-current-background: #a5d3fe;

    /* 代码片段背景 */
    --b3-protyle-code-background: rgba(230, 236, 241, 1);

    /* 所见即所得行内元素颜色 */
    --b3-protyle-inline-strong-color: #202124;
    --b3-protyle-inline-em-color: #202124;
    --b3-protyle-inline-s-color: #202124;
    --b3-protyle-inline-link-color: #4285f4;
    --b3-protyle-inline-mark-background: #ffe955;
    --b3-protyle-inline-mark-color: #202124;
    --b3-protyle-inline-tag-color: #5f6368;
    --b3-protyle-inline-blockref-color: var(--b3-protyle-inline-tag-color);
}


/* 不想调下面这两个了, 先这样吧 */

/* 奇怪的界面调整 */
/* body.fn__flex-column > .fn__flex-1 {
    min-height:0px !important;
} */

/* 编辑器工具栏高度 */
/* #toolbar {
    height: 26px; 
} */

/* 虽然这样和最小化没有严格对齐, 应该没人发现吧 */
.toolbar__item:not(.b3-tooltips__sw) {
    padding:14px 8px;
}

.protyle-breadcrumb {
    /* background-color: var(--b3-theme-surface) ; */
    padding: 0 8px 2px;
}

.protyle-preview {
    padding-top: 24px;
}

.protyle-preview__action {
    padding:8px;
}

/* 应该没用了 */
/* .language-graphviz .graph > polygon {
    fill: transparent;
} */

/* kbd font */
kbd{
    font-family: var(--b3-font-family-code) !important;
}

/* 流程图, 时序图, 甘特图 */
.label, foreignObject, text, canvas {
    font-family: var(--b3-font-family) !important;
}

/* tag */
/* copying code style */
span[data-type="tag"]:not(.dock__item) {
    display: inline-block;
    padding: 0.05em 0.7em;
    margin: 0;
    border-radius: 15px;
    /* background-size: 20px 20px; */
    /* word-break: break-word; */
    cursor:pointer;
    white-space: pre-wrap;
    background-color: #808080;
    color:#ffffff !important;
    font-family: var(--b3-font-family-code);
    font-size: 80%;
    font-weight: normal;
    text-decoration: none !important;
    text-align: center;
    /* 问题: 文字居中, 左下角按钮 */
}

/* block quote */
.bq {
    background-color: var(--b3-theme-surface) !important;
    border-color: var(--b3-theme-primary) !important;
    border-radius: 0.2rem;
    /* 加了会有hover的图标的错位 */
    /* padding: 1rem !important; */
    /* 问题: 文字居中 */
}


/* link color */
.b3-list-item--focus {
    background-color: #ffffff !important;
    color: var(--b3-theme-primary) !important;
}

.b3-list-item--focus > .b3-list-item__first > .b3-list-item__text, 
.b3-list-item--focus >.b3-list-item__meta {
    color: var(--b3-theme-primary) !important;
}

.b3-list--background .b3-list-item--focus {
    background-color: #ffffff !important;
    color: var(--b3-theme-primary) !important;
}

/* sidebar and tab bar */
.b3-list--background .b3-list-item--focus > .b3-list-item__text {
    color: var(--b3-theme-primary) !important;
}

.layout-tab-bar .item--focus {
    background-color: #ffffff !important;
    font-weight: bold !important;
}

/* code block - not complete yet*/

.hljs {
    background: #183055 !important;
    background-image: none;
    border-radius: 0.2rem !important;
    color: #ffffff !important;
}

.hljs-keyword {
    color: #61e3a5 !important;
    font-weight: normal !important;
}

.hljs-title {
    color: #ffffff !important;
    font-weight: normal !important;
}

.hljs-params, .hljs-bullet {
    color: #ffffff !important;
}

.hljs-attr {
    color: #ffd6ad !important;
}

.hljs-name, .hljs-tag {
    color: #b4f6d6 !important;
}

.hljs-number, .hljs-section {
    color: #ff9d3d !important;
}

.hljs-symbol {
    color: #3884ff !important;
}

.hljs-string, .hljs-subst, .hljs-attribute, .hljs-selector-tag {
    color: #71a7ff !important;
    font-weight: normal !important;
}

span.hljs-built_in {
    color: #8ffaaa !important;
}

/* not sure: section */


/* table */
/* .vditor-reset table td, .vditor-reset table th {
    
    border-top: none !important;
} */

/* 窗口美化 */

.dock, .dock__item, .toolbar, .fn__flex-column{
    background-color: var(--b3-theme-surface);
}

.block__icons{
    background-color: var(--b3-tab-background);
}

.search__label .b3-form__icon-input {
    background-color: var(--b3-tab-background) ;
}

/* font of queries */
/* .vditor-ir__node--expand[data-type="block-query-embed"] > .vditor-ir__marker {
    font-family: var(--b3-font-family-code) !important;
} */

/* tab adjustments */
.layout-tab-bar .item {
    padding: 5px 4px 2px 8px;
}
.layout-tab-bar .item__graphic{
    margin-right: 6px;
}
.layout-tab-bar .item__close {
    margin-left: 4px;
}

/* title font */

.protyle-title__input {
    display: none;
    font-weight: bold;
    /* text-transform:uppercase; */
}

/* block-ref */
span[data-type="block-ref"] {
    font-family: var(--b3-font-family-code);
    color: var(--b3-protyle-inline-blockref-color);
    background-color: var(--b3-theme-surface-light);
    border-bottom: 2px dotted var(--b3-theme-primary-light);
}

/* codeblock language setting */
.protyle-action__language {
    font-family: var(--b3-font-family-code);
}

.protyle-util > .fn__flex-column {
    font-family: var(--b3-font-family-code);
}

.protyle-util > .fn__flex-column> input {
    font-family: var(--b3-font-family-code);
}

/* tab color */
ul.layout-tab-bar {
    background-color: var(--b3-theme-surface);
}