@import './model/local.less';

// @font-mian:"DIN Next W1G","仓耳今楷01";
// @font-mian:"Neuzeit Office Pro","仓耳今楷01";
// @font-mian:"Arial Tur","仓耳今楷01";
// @font-mian:"JetBrains Mono","仓耳今楷01";
@font-mian: "霞鹜文楷";
@font-code: "JetBrains Mono";
@font-math: "KaTeX_Math","华文楷体";

@--color-mian: #0c83f2;

:root {
    // 文字颜色
    --b3-font-color1: #E84026;
    --b3-font-color2: #ED6F21;
    --b3-font-color3: #F9A01E;
    --b3-font-color4: #F7CE00;
    --b3-font-color5: #A5D61D;
    --b3-font-color6: #64BB5C;
    --b3-font-color7: #61CFBE;
    --b3-font-color8: #46B1E3;
    --b3-font-color9: #564AF7;
    --b3-font-color10: #AC49F5;
    --b3-font-color11: #F65199;
    --b3-font-color12: #266EFB;
    --b3-font-color13: #4B7F7C;

    // 文字背景颜色
    --b3-font-background1: #fbbfbc;
    --b3-font-background2: #fed4a4;
    --b3-font-background3: #ffe9a1;
    --b3-font-background4: #b7edb1;
    --b3-font-background5: #d1ecf1;
    --b3-font-background6: #bacefd;
    --b3-font-background7: #cdb2fa;
    --b3-font-background8: #e1e1e1;
    --b3-font-background9: #fc2e1b;
    --b3-font-background10: #f6df5b;
    --b3-font-background11: #2d48f8;
    --b3-font-background12: #2a9f65;
    --b3-font-background13: #56dde2;

    --b3-font-family: @font-mian;
    --b3-font-family-code: @font-code;


    // 四种样式颜色
    --b3-card-error-color: #5f6368;
    --b3-card-error-background: #fce7e9;

    --b3-card-warning-color: #5f6368;
    --b3-card-warning-background: #fee6ac;

    --b3-card-info-color: #5f6368;
    --b3-card-info-background: #cfddfe;

    --b3-card-success-color: #5f6368;
    --b3-card-success-background: #ccf2c8;
}

// 滚动条
/*更改界面滚动条*/
body:not(.native-scrollbars) ::-webkit-scrollbar {
    background-color: transparent;
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: #294E80 !important;
}

//设置面板关闭按钮设置
.b3-dialog__container .b3-dialog__close {
    color: gray;
    font-size: 50%;
    cursor: pointer;
    background: white;
    border-radius: 50px;
    padding: 4px;
    margin-left: 22px;
    height: 13px;
    width: 13px;
    transition: all .1s;
    transform: scale(1.1);
}

.b3-dialog__container .b3-dialog__close:hover {
    color: #0c83f2;
    background-color: #f0f8ff;
    transform: rotate(180deg);
}

// 顶部工具栏
div.toolbar {
    height: 30px;
    line-height: 30px;

    div.toolbar__item {
        padding: 5px;
        margin-left: 3px;
    }

    div#windowControls {
        div.toolbar__item {
            margin: 0;
        }

        div.toolbar__item--close {
            padding: 12px 9px;
        }

        div#minWindow {
            padding: 8px 9px;
        }

        div#maxWindow {
            padding: 10px 9px;
        }

        div#restoreWindow {
            padding: 8px 9px;
        }
    }
}

// 底部状态/工具栏
div.status {
    height: 30px;
    line-height: 30px;

    div.toolbar__item {
        padding: 5px;
        margin-right: 3px;
    }

    div#barDock {
        margin-left: 3px;
    }
}

// 侧栏（文档树、大纲）
div.fn__flex-shrink {
    font-size: 16px;

    div.block__logo {
        font-family: "华文新魏";
        font-size: 20px;
    }

    li.b3-list-item .b3-list-item__icon {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        text-align: center;

        img {
            width: 25px;
            height: 25px;
            transform: translateX(2.5px);
        }

        svg {
            height: 23px;
            width: 23px;
            transform: translate(3px, 1px);
        }
    }

    span.b3-list-item__text {
        transform: translateY(1px);
    }
}

// 右键选项菜单
.b3-menu,
.protyle-util {
    font-size: 16px;
    padding: 5px;

    button.b3-menu__item {
        border-radius: 4px;

        div.b3-menu__submenu {
            padding: 5px;
            margin-left: 9px;
            margin-right: 9px;

            button.b3-menu__item {
                border-radius: 4px;
                padding-right: 8px;
            }

            span.b3-menu__label {
                margin: 4px;

                span {
                    // width: 18px;
                    // height: 18px;
                    border-radius: 4px;
                }
            }

            // 二级菜单下的样式设置图标
            span.b3-color__square {
                padding: 11px;
                margin: 9px !important;
                border-radius: 4px !important;
            }
        }

        // 颜色菜单鼠标滑过不改变背景
        div.b3-menu__submenu--row button {
            background-color: #f8f9fa !important;
        }
    }
}


// 标签页
ul.layout-tab-bar {
    font-size: 15.5px;

    li.item {
        border-radius: 0 !important;
    }
}

// 针对原始最大权重的覆盖
.layout__wnd--active .layout-tab-bar .item--focus {
    box-shadow: none !important;
}

// 面包屑导航
div.protyle-breadcrumb {
    span.protyle-breadcrumb__item.protyle-breadcrumb__item--active {
        background-color: transparent;
    }

    span.protyle-breadcrumb__item.protyle-breadcrumb__item--active:hover {
        background-color: #e9eaea;
    }
}

// 内容区格子背景
div.protyle-content {
    background-image: linear-gradient(90deg, rgba(60, 10, 30, 0.06) 2%, transparent 0px), linear-gradient(1turn, rgba(60, 10, 30, 0.06) 2%, transparent 0px);
    background-size: 30px 30px;
    background-position: 50% center;
    text-align: justify;

    div.protyle-title__input {
        background-color: transparent;
    }
}

// 表格块
.protyle-wysiwyg table,
.b3-typography table {
    display: table;
    width: 100%;

    thead {
        border-top: 0.15em solid @--color-mian  !important;
    }

    th ,td{
        font-weight: normal !important;
    }

    th,
    td {
        min-width: 1em;
        border: 0.1em solid rgb(211, 211, 211) !important;
        border-collapse: collapse;
        color: inherit;
        background-color: white;
    }

}

.protyle-wysiwyg [data-node-id][custom-f~=biaotou] table th {
    text-align: center !important;
}

// 引述块
.b3-typography blockquote,
.b3-typography .bq,
.protyle-wysiwyg blockquote,
.protyle-wysiwyg .bq {
    padding: 0.5em;
    color: #000;
    border: 3px dashed @--color-mian;
    background-color: #ffffff;
    margin: 16px 0;
    border-radius: 2px;
    position: relative;
    padding-left: 1.5em;
    
}

// 设置引述的行高
// .b3-typography blockquote div.p,
// .b3-typography .bq div.p,
// .protyle-wysiwyg blockquote div.p,
// .protyle-wysiwyg .bq div.p{
//     line-height: 2.3 !important;
// }

.b3-typography blockquote::before,
.b3-typography .bq::before,
.protyle-wysiwyg blockquote::before,
.protyle-wysiwyg .bq::before {
    content: url(./icons/xingzuo.svg);
    position: absolute;
    top: -22px;
    left: -15px;
    transform: rotate(329deg);
}

div.bq[custom-f~=t] div.p {
    text-indent: 2em;
}


// 图片块
span.img {
    img {
        border-radius: 4px;
        transform: translateY(5px);
        border: 3px solid #d6dbdd;
        // box-shadow: var(--b3-point-shadow);

    }

    span.protyle-action__title {
        margin-top: 10px;
    }

    span.protyle-action__drag {
        margin-right: 3px;
    }

    span.protyle-action.protyle-icons {
        margin-top: 15px;
        margin-right: 3px;
    }
}

// 代码块
.code-block {
    margin: 4px !important;
    border-radius: 4px !important;
    background-color: #fafafa !important;
}

.b3-typography div.hljs,
.protyle-wysiwyg div.hljs {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 16px;
    padding-right: 16px;
    font-family: @font-code;
    background-size: 20px 20px;
    background-image: none !important;
    background: transparent;
}

.protyle-wysiwyg .code-block,
.b3-typography .code-block {
    position: relative;
    display: block;
    border-radius: 4px;
    padding-top: 32px !important;
    box-shadow: 0px 0px 2px 0px #041b1538;
    border-bottom: 2px solid #cfcece;
    border-top: 3px solid @--color-mian;
}

.code-block::after {
    content: ' ';
    position: absolute;
    background: #fa625c;
    box-shadow: 23px 0 #fdbc40, 45px 0 #35cd4b;
    border-radius: 50%;
    top: 10px;
    left: 15px;
    height: 12px;
    width: 12px;
    z-index: 1;
}

.protyle-linenumber__rows {
    margin-top: 32px !important;
    padding: 4px;
    background-color: #fafafa !important;
    margin-bottom: 0px;
    font-family: @font-code;
}

.protyle-linenumber__rows span::before {
    color: rgba(128, 128, 128, 0.5);
}

.b3-typography .code-block .protyle-action .protyle-action__language,
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
    margin-top: 0px;
    position: absolute;
    right: 4em;
    border-radius: 4px;
    opacity: 1 !important;
    font-family: @font-code;
}

.b3-typography .code-block .protyle-action .protyle-action__language::after,
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language::after {
    content: "›";
    font-family: @font-code;
    color: #80808080;
    opacity: 1;
}

.b3-typography .code-block .protyle-action .protyle-icon,
.b3-typography .code-block .protyle-action .protyle-action__language,
.protyle-wysiwyg .code-block .protyle-action .protyle-icon,
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language {
    opacity: 1 !important;
    background-color: transparent !important;
}

.b3-typography .code-block .protyle-action .protyle-icon svg,
.b3-typography .code-block .protyle-action .protyle-action__language svg,
.protyle-wysiwyg .code-block .protyle-action .protyle-icon svg,
.protyle-wysiwyg .code-block .protyle-action .protyle-action__language svg {
    color: gray;
}

// 集市里边代码块的主题
code.hljs {
    background-color: #fafafa !important;
    // border-top: 3px solid #2ea121;
    border-top: 3px solid @--color-mian;
    border-bottom: 2px solid #cfcece;
    box-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);
}

// 代码块下方增加内边距
.protyle-wysiwyg .code-block,
.b3-typography .code-block {
    padding-bottom: 15px;
}

// 代码种类输入框和选项字体
.b3-menu,
.protyle-util {

    div.b3-list-item,
    input {
        font-family: @font-code;
    }
}


// 四种预设块样式(信息、错误、警告、成功)
.p[data-node-id][data-type="NodeParagraph"][style*="background-color: var(--b3-card-"],
.list[style*="background-color: var(--b3-card-"],.sb[data-type="NodeSuperBlock"][style*="background-color: var(--b3-card-"] {
    padding: 19px 19px 19px 19px !important;
    // line-height: 2.3;
    border-radius: 4px;
    color: #000 !important;
}

// 设置四种样式的超级块里面的段落行高与字体颜色
// .sb[data-type="NodeSuperBlock"][style*="background-color: var(--b3-card-"]>div.p{
//     line-height: 2.3 !important;
//     color: #000 !important;
// }

.p[data-node-id][data-type="NodeParagraph"][style*="background-color: var(--b3-card-"]::before,
.list[style*="background-color: var(--b3-card-"]::before {
    content: url(icons/pin.svg);
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: -10px;
    left: 7px;
    z-index: 2;
    transform: rotate(354deg);
}

// 段落垂直组合,再横排组合,设置各种信息样式的样式
.sb[data-node-id][data-type="NodeSuperBlock"][style*="background-color: var(--b3-card-"],
.sb[style*="background-color: var(--b3-card-"] {
    padding: 19px 19px 19px 19px !important;
    line-height: 2.3;
    border-radius: 4px;
}

.sb[data-node-id][data-type="NodeSuperBlock"][style*="background-color: var(--b3-card-"]::before,
.sb[style*="background-color: var(--b3-card-"]::before {
    content: url(./icons/pin.svg);
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: -10px;
    left: 7px;
    z-index: 2;
    transform: rotate(354deg);
}

// 超级块
.protyle-wysiwyg [data-node-id].sb[data-sb-layout=col]>div,
.protyle-wysiwyg [data-node-id].sb[data-sb-layout=col] .sb {
    border: 3px dashed @--color-mian;
    margin: 3px 3px;
    border-radius: 4px;
}

// 去除超级块旁边的字符
.protyle-attr {
    display: none;
}

// 图片合成超级块更改边框
.protyle-wysiwyg [data-node-id].sb[data-sb-layout=col] img {
    border: 3px solid #e9e9e9;
    border-radius: 4px;
}

// 段落和引言自定义属性，首行缩进
.p[custom-f~=t] div,
.bq[custom-f~=t] div {
    text-indent: 2em;
}

// 嵌入块
.protyle-wysiwyg [data-node-id].render-node[data-type=NodeBlockQueryEmbed] {
    background-color: #fff;
    border: #0c83f2 2px solid;
    padding: 20px;
    border-radius: 4px;
    position: relative;
}

.protyle-wysiwyg [data-node-id].render-node[data-type=NodeBlockQueryEmbed]::before {
    content: url(./icons/link.svg);
    position: absolute;
    left: -15px;
    top: -17px;
}


// 行内代码
.b3-typography code:not(.hljs),
.protyle-wysiwyg code:not(.hljs) {
    background-color: #f1f1f1;
    color: #476582;
}

// 大纲里的代码样式
span.b3-list-item__text code {
    font-family: @font-code;
}

// 行内键盘样式
// .b3-typography kbd, .protyle-wysiwyg kbd{
//     font-family: @font-code;
//     padding: 5px;
//     font-size: 14px;
//     color: #000;
// }

.b3-typography kbd,
.protyle-wysiwyg kbd {
    display: inline-block;
    background: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
    border-radius: 3px;
    box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
    color: #969faf;
    padding: 5px 10px;
    border: 0;
    font-size: 16px;
    font-family: @font-code  !important;
    transform: translateY(-3px);
    margin-left: 4px;
    margin-right: 4px;
}

// 斜杠菜单
.b3-menu.b3-list.b3-list--background.hint--menu {
    padding: 10px;
}

button.fn__block {
    border-radius: 4px;
    width: 50%;
    display: inline-block;
    margin: 2px 0px;
}

// 填空背诵模式：第十三种
strong[style="background-color: var(--b3-font-background13);"] {
    color: transparent;
    background-color: transparent !important;
    border-bottom: 2px solid #000;
    border-radius: 0 !important;
    padding: 0px 3px !important;
}

strong[style="background-color: var(--b3-font-background13);"]:hover {
    color: #000;
}

// 背诵模式面板按钮
button.b3-color__square[data-type="backgroundColor"][style="background-color:var(--b3-font-background13)"] {
    background-color: #fff !important;

}

button.b3-color__square[data-type="backgroundColor"][style="background-color:var(--b3-font-background13)"]::after {
    border-bottom: 2px solid #000;
}

// 字体格式面板的字体颜色设置模块
button.b3-color__square[data-type="color"][style*="background-color:var(--b3-font"] {
    background-color: transparent !important;
}

button.b3-color__square[data-type="color"][style="background-color:var(--b3-font-color1)"]::after {
    color: var(--b3-font-color1);
}

button.b3-color__square[data-type="color"][style="background-color:var(--b3-font-color2)"]::after {
    color: var(--b3-font-color2);
}

button.b3-color__square[data-type="color"][style="background-color:var(--b3-font-color3)"]::after {
    color: var(--b3-font-color3);
}

button.b3-color__square[data-type="color"][style="background-color:var(--b3-font-color4)"]::after {
    color: var(--b3-font-color4);
}

button.b3-color__square[data-type="color"][style="background-color:var(--b3-font-color5)"]::after {
    color: var(--b3-font-color5);
}

button.b3-color__square[data-type="color"][style="background-color:var(--b3-font-color6)"]::after {
    color: var(--b3-font-color6);
}

button.b3-color__square[data-type="color"][style="background-color:var(--b3-font-color7)"]::after {
    color: var(--b3-font-color7);
}

button.b3-color__square[data-type="color"][style="background-color:var(--b3-font-color8)"]::after {
    color: var(--b3-font-color8);
}

button.b3-color__square[data-type="color"][style="background-color:var(--b3-font-color9)"]::after {
    color: var(--b3-font-color9);
}

button.b3-color__square[data-type="color"][style="background-color:var(--b3-font-color10)"]::after {
    color: var(--b3-font-color10);
}

button.b3-color__square[data-type="color"][style="background-color:var(--b3-font-color11)"]::after {
    color: var(--b3-font-color11);
}

button.b3-color__square[data-type="color"][style="background-color:var(--b3-font-color12)"]::after {
    color: var(--b3-font-color12);
}

button.b3-color__square[data-type="color"][style="background-color:var(--b3-font-color13)"]::after {
    color: var(--b3-font-color13);
}

// 段落文字背景样式
.b3-typography strong,
.protyle-wysiwyg strong,
.b3-typography em,
.protyle-wysiwyg em {
    padding: 2px 0px;
    border-radius: 3px;
}

strong[style*="background-color: var(--b3-font-background"] {
    padding: 0px 5px;
    padding-bottom: 0.5px;
}


// 划词样式菜单
.protyle-font {
    font-size: 15px;
    font-family: @font-mian;
    padding: 7px 13px !important;
}

.b3-color__square {
    padding: 11px;
    margin: 4px;
    border-radius: 4px;
}

.protyle-font .b3-color__square::after {
    content: "A";
    color: initial;
    font-size: 16px;
    font-weight: 400;
    font-family: "微软雅黑";
}

// 大纲下文档图标
div.sy__outline span.b3-list-item__graphic {
    width: 30px;
    height: 30px;
    font-size: 20px;
    transform: translate(4px, 3px);

    img {
        width: 25px;
        height: 25px;
    }

    svg {
        height: 23px;
        width: 23px;
        transform: translate(2px, 1px);
    }

}

// 快捷键字体
.b3-menu__accelerator {
    font-family: @font-code;
}

// 引用块
span[data-type="block-ref"] {
    padding: 5px;
    color: #4b5cc4 !important;
    font-weight: 600;
}

// span[data-type="block-ref"]::before{
//     content: "💊 ";
// }

span[data-type="block-ref"]:hover {
    background-color: #2e4e7e;
    border-radius: 3px;
    color: #E9F1F6 !important;

}

// 链接块
span[data-type="a"][data-href] {
    // padding: 7px;
    font-weight: 600;
    border: none !important;
}


// span[data-type="a"][data-href]::before{
//     content: "🔗 ";
// }


// 公式
span.katex {
    font-family: @font-math;
    font-weight: bolder !important;
}

// 公式块字体大小自定义
div[data-type="NodeMathBlock"][custom-f="small"] {
    font-size: 80%;
}

// 分割线
.protyle-wysiwyg [data-node-id].hr div {
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    height: 2px;
    border-radius: 4px;
}

// 待办事项删除线
.li[data-type="NodeListItem"].protyle-task--done {
    text-decoration: line-through;
}


// 引用块新建按钮调整
button[data-value*="((newFile"] {
    padding-top: 15px;
    padding-bottom: 15px;
}

// 调整市集主题的大小
div[data-bazaar="themes"].b3-card {
    width: 237px;
}


// 设置所有段落的行高，并调整段落旁边的按钮
// div.p[data-type="NodeParagraph"]{
//     line-height: 1.9;
// }

// button[data-type="NodeParagraph"]{
//     transform: translateY(1.8px);
// }