|
|
$fontFamily: "Helvetica Neue",
|
|
|
Arial,
|
|
|
"Hiragino Sans GB",
|
|
|
"STHeiti",
|
|
|
"Microsoft YaHei",
|
|
|
"WenQuanYi Micro Hei",
|
|
|
sans-serif;
|
|
|
$monospaceFont: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
|
|
|
$fontSize: 16px;
|
|
|
$fontSizeLarge: 18px;
|
|
|
$lineHeight: 27px;
|
|
|
$editorBg: #FFF;
|
|
|
$previewBg: #FFF;
|
|
|
$fontColor: #3f4a56;
|
|
|
$linkColor: #3582fb;
|
|
|
$linkHoverColor: #056bad;
|
|
|
$borderColor: #dfe6ee;
|
|
|
$toolbarSplitColor: #dfe6ee;
|
|
|
$fullWidthColor: #d71616;
|
|
|
$toolbarFontSize: 14px;
|
|
|
$toolbarHeight: 48px;
|
|
|
$elementGap: 16px;
|
|
|
$elementLittleGap: 12px;
|
|
|
$borderRadius: 3px;
|
|
|
|
|
|
$errorColor: #f85353;
|
|
|
$warnColor: #ffaf21;
|
|
|
|
|
|
$shadow: none;
|
|
|
|
|
|
// 标题
|
|
|
$subTitle: #6d6e6f;
|
|
|
// 滚动条
|
|
|
|
|
|
// 列表
|
|
|
|
|
|
// 代码块
|
|
|
$codeBackground: #e5e5e5;
|
|
|
$codeColor: $errorColor;
|
|
|
$codeBlockBg: #00212b;
|
|
|
|
|
|
|
|
|
// 引用
|
|
|
$quoteBorderColor: #D6DBDF;
|
|
|
$quoteBackground: rgba(102, 128, 153, .05);
|
|
|
$quoteColor: $subTitle;
|
|
|
|
|
|
// 公式
|
|
|
|
|
|
|
|
|
// 编辑器主题
|
|
|
|
|
|
$editorHeaderColor: $fontColor;
|
|
|
$editorCommentColor: $linkColor;
|
|
|
$editorQuoteColor: $editorCommentColor;
|
|
|
$editorStringColor: $fontColor;
|
|
|
$editorLinkColor: $linkColor;
|
|
|
$editorUrlBgColor: #d7e6fe;
|
|
|
|
|
|
$editorV2Color: $fontColor;
|
|
|
$editorV3Color: $fontColor;
|
|
|
$editorKeywordColor: $fontColor;
|
|
|
|
|
|
|
|
|
// 工具栏
|
|
|
// 暗色
|
|
|
$toolbarBgDark: #20304b;
|
|
|
$toolbarShadowDark: $shadow;
|
|
|
$toolbarBtnBgDark: transparent;
|
|
|
$toolbarBtnColorDark: #d7e6fe;
|
|
|
$toolbarBtnBgHoverDark: rgba(255, 255, 255, 0.1);
|
|
|
$toolbarBtnHoverColorDark: #fff;
|
|
|
$toolbarBtnDisabledDark: #ccc;
|
|
|
|
|
|
// 亮色
|
|
|
$toolbarBgLight: white;
|
|
|
$toolbarShadowLight: $shadow;
|
|
|
$toolbarBtnBgLight: transparent;
|
|
|
$toolbarBtnColorLight: #3f4a56;
|
|
|
$toolbarBtnBgHoverLight: #ebf3ff;
|
|
|
$toolbarBtnHoverColorLight: #5d9bfc;
|
|
|
$toolbarBtnDisabledLight: #ccc;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** 色值可以参考：https://yeun.github.io/open-color/ */
|
|
|
|
|
|
/** 工具栏样式 */
|
|
|
$toolbarBg: $toolbarBgLight;
|
|
|
$toolbarBtnColor: $toolbarBtnColorLight;
|
|
|
$toolbarBtnBgHover: $toolbarBtnBgHoverLight;
|
|
|
$toolbarBtnHoverColor: $toolbarBtnHoverColorLight;
|
|
|
$toolbarColorItemHoverBorderColor: rgb(247, 133, 83);
|
|
|
$sidebarShadow: $shadow;
|
|
|
/** 编辑区域样式 */
|
|
|
$editorBg: rgba(0, 0, 0, 0);
|
|
|
$editorColor: rgb(63, 74, 86);
|
|
|
$editorSelectedBg: $toolbarBtnBgHover;
|
|
|
$editorUrlBg: rgb(215, 230, 254);
|
|
|
$editorCursorColor: rgb(0, 0, 0);
|
|
|
$editorImportantColor: rgb(34, 139, 230);
|
|
|
$editorCodeColor: rgb(77, 171, 247);
|
|
|
/** 预览区域样式 */
|
|
|
$previewBg: rgba(0, 0, 0, 0);
|
|
|
$previewMobileBgColor: $previewBg;
|
|
|
/** markdown样式 */
|
|
|
$mdColor: $editorColor;
|
|
|
$mdHeaderColor: $editorImportantColor;
|
|
|
$mdLineColor: rgb(25, 113, 194);
|
|
|
$mdAColor: $editorCodeColor;
|
|
|
$mdAHoverColor: $editorImportantColor;
|
|
|
$mdInlineCodeColor: $editorCodeColor;
|
|
|
$mdInlineCodeBg: $editorUrlBg;
|
|
|
$mdBlockquoteBg: rgb(231, 245, 255);
|
|
|
|
|
|
/** 编辑器样式 */
|
|
|
.cherry.theme__oa {
|
|
|
background-color: $editorBg;
|
|
|
box-shadow: $shadow;
|
|
|
|
|
|
.cherry-drag {
|
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
|
width: 5px;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
|
|
|
/** 顶部按钮, 选中文字时弹出的按钮, 光标focus到空行时联想出的按钮, 侧边栏按钮 */
|
|
|
.cherry-toolbar,
|
|
|
.cherry-floatmenu,
|
|
|
.cherry-bubble,
|
|
|
.cherry-sidebar {
|
|
|
background: $toolbarBg;
|
|
|
border-color: $toolbarBg;
|
|
|
box-shadow: none;
|
|
|
|
|
|
.cherry-toolbar-button {
|
|
|
color: $toolbarBtnColor;
|
|
|
|
|
|
&:hover {
|
|
|
background-color: $toolbarBtnBgHover;
|
|
|
color: $toolbarBtnHoverColor !important;
|
|
|
border-color: $toolbarBg;
|
|
|
|
|
|
i {
|
|
|
color: $toolbarBtnHoverColor !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/** 二级菜单 */
|
|
|
.cherry-dropdown {
|
|
|
background: $toolbarBg;
|
|
|
|
|
|
.cherry-dropdown-item {
|
|
|
color: $toolbarBtnColor;
|
|
|
|
|
|
&:hover {
|
|
|
background-color: $toolbarBtnBgHover;
|
|
|
color: $toolbarBtnHoverColor;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/** 选择颜色的按钮 */
|
|
|
&.cherry-color-wrap {
|
|
|
|
|
|
/** 色盘的标题 */
|
|
|
h3 {
|
|
|
color: $toolbarBtnColor;
|
|
|
}
|
|
|
|
|
|
/** 色盘里的每一个色块 */
|
|
|
.cherry-color-item {
|
|
|
// width: 15px;
|
|
|
// border: none;
|
|
|
border-color: $toolbarBtnBgHover;
|
|
|
|
|
|
&:hover {
|
|
|
border-color: $toolbarColorItemHoverBorderColor;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/** 选择表格的按钮 */
|
|
|
.cherry-insert-table-menu-item {
|
|
|
border-color: $toolbarBtnBgHover;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/** 选中文字时弹出的按钮 */
|
|
|
.cherry-bubble {
|
|
|
.cherry-bubble-bottom {
|
|
|
border-top-color: $toolbarBg;
|
|
|
}
|
|
|
|
|
|
.cherry-bubble-top {
|
|
|
border-bottom-color: $toolbarBg;
|
|
|
}
|
|
|
|
|
|
/** 粘贴HTML内容时弹出的选择按钮 */
|
|
|
&.cherry-switch-paste {}
|
|
|
}
|
|
|
|
|
|
.cherry-editor {
|
|
|
background-color: $editorBg;
|
|
|
|
|
|
.CodeMirror {
|
|
|
background-color: $editorBg;
|
|
|
|
|
|
.CodeMirror-cursor {
|
|
|
border-left: 1px solid $editorCursorColor;
|
|
|
}
|
|
|
|
|
|
.CodeMirror-scroll {
|
|
|
|
|
|
span,
|
|
|
.cm-variable-2,
|
|
|
.cm-string,
|
|
|
.cm-strong,
|
|
|
.cm-em,
|
|
|
.cm-meta {
|
|
|
color: $editorColor;
|
|
|
}
|
|
|
|
|
|
.cm-image-marker,
|
|
|
.cm-quote,
|
|
|
.cm-header {
|
|
|
color: $editorImportantColor;
|
|
|
}
|
|
|
|
|
|
.cm-url {
|
|
|
background-color: $editorUrlBg;
|
|
|
}
|
|
|
|
|
|
.cm-comment,
|
|
|
.cm-url {
|
|
|
color: $editorCodeColor;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.CodeMirror-selected {
|
|
|
background-color: $editorSelectedBg;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.cherry-sidebar {
|
|
|
box-shadow: $sidebarShadow;
|
|
|
}
|
|
|
|
|
|
.cherry-previewer {
|
|
|
background-color: $previewBg;
|
|
|
border-left: none;
|
|
|
|
|
|
.cherry-mobile-previewer-content {
|
|
|
background-color: $previewMobileBgColor;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.cherry-previewer-table-content-handler {
|
|
|
.cherry-previewer-table-content-handler__input {
|
|
|
textarea {
|
|
|
background-color: $editorBg;
|
|
|
color: $editorColor;
|
|
|
outline-color: $editorImportantColor;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
/** 预览区域样式 */
|
|
|
.cherry-markdown.theme__oa {
|
|
|
color: $mdColor;
|
|
|
background-color: $previewBg;
|
|
|
box-shadow: $shadow;
|
|
|
|
|
|
p,
|
|
|
div {}
|
|
|
|
|
|
h1,
|
|
|
h2,
|
|
|
h3,
|
|
|
h4,
|
|
|
h5 {
|
|
|
color: $mdHeaderColor;
|
|
|
}
|
|
|
|
|
|
h1 {}
|
|
|
|
|
|
h2 {}
|
|
|
|
|
|
h3 {}
|
|
|
|
|
|
h4 {}
|
|
|
|
|
|
h5 {}
|
|
|
|
|
|
h1,
|
|
|
h2,
|
|
|
h3,
|
|
|
h4,
|
|
|
h5,
|
|
|
h6 {
|
|
|
|
|
|
/** 标题前面的锚点或序号 */
|
|
|
.anchor {}
|
|
|
}
|
|
|
|
|
|
ul {
|
|
|
&.cherry-list__upper-roman {
|
|
|
list-style: upper-roman;
|
|
|
}
|
|
|
|
|
|
&.cherry-list__lower-greek {
|
|
|
list-style: lower-greek;
|
|
|
}
|
|
|
|
|
|
&.cherry-list__cjk-ideographic {
|
|
|
list-style: cjk-ideographic;
|
|
|
}
|
|
|
|
|
|
&.cherry-list__circle {
|
|
|
list-style: circle;
|
|
|
}
|
|
|
|
|
|
&.cherry-list__square {
|
|
|
list-style: square;
|
|
|
}
|
|
|
|
|
|
&.cherry-list__default {}
|
|
|
|
|
|
/** checklist 模式，未勾选时 */
|
|
|
.ch-icon-square {}
|
|
|
|
|
|
/** checklist 模式，勾选时 */
|
|
|
.ch-icon-check {}
|
|
|
}
|
|
|
|
|
|
ol {
|
|
|
li {}
|
|
|
}
|
|
|
|
|
|
|
|
|
blockquote {
|
|
|
color: $mdColor;
|
|
|
background-color: $mdBlockquoteBg;
|
|
|
border-color: $mdLineColor;
|
|
|
}
|
|
|
|
|
|
a {
|
|
|
text-decoration: none;
|
|
|
color: $mdAColor;
|
|
|
|
|
|
&:hover {
|
|
|
text-decoration: underline;
|
|
|
color: $mdAHoverColor;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
strong {}
|
|
|
|
|
|
em {}
|
|
|
|
|
|
del {}
|
|
|
|
|
|
sup {}
|
|
|
|
|
|
sub {}
|
|
|
|
|
|
hr {
|
|
|
border-color: $mdLineColor;
|
|
|
}
|
|
|
|
|
|
img {}
|
|
|
|
|
|
video {}
|
|
|
|
|
|
audio {}
|
|
|
|
|
|
/** 行内代码 */
|
|
|
p code,
|
|
|
li code {
|
|
|
background-color: $mdInlineCodeBg;
|
|
|
color: $mdInlineCodeColor;
|
|
|
border: 1px solid $mdLineColor;
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 代码块
|
|
|
*/
|
|
|
pre code {}
|
|
|
|
|
|
/**
|
|
|
* 表格
|
|
|
*/
|
|
|
table,
|
|
|
.cherry-table {
|
|
|
color: $mdColor;
|
|
|
|
|
|
th {
|
|
|
background-color: $mdInlineCodeBg;
|
|
|
}
|
|
|
|
|
|
tr,
|
|
|
th,
|
|
|
td {
|
|
|
border-color: $mdLineColor;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/** 可以理解为上下结构的音标，下部是文字，上部是对应的拼音 */
|
|
|
ruby {
|
|
|
|
|
|
/** 上部的拼音 */
|
|
|
rt {}
|
|
|
}
|
|
|
|
|
|
/** 脚注 */
|
|
|
.footnote {
|
|
|
border-color: $mdLineColor;
|
|
|
|
|
|
.footnote-title {
|
|
|
background-color: $mdInlineCodeBg;
|
|
|
}
|
|
|
|
|
|
.one-footnote {
|
|
|
color: $mdColor;
|
|
|
border-color: $mdLineColor;
|
|
|
|
|
|
a.footnote-ref {
|
|
|
padding: 5px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/** 行间公式 */
|
|
|
.Cherry-InlineMath {}
|
|
|
|
|
|
/** 段落公式 */
|
|
|
.Cherry-Math {}
|
|
|
|
|
|
/** 目录 */
|
|
|
.toc {
|
|
|
.toc-title {}
|
|
|
|
|
|
.toc-li {
|
|
|
.level-1 {}
|
|
|
|
|
|
.level-2 {}
|
|
|
|
|
|
.level-3 {}
|
|
|
|
|
|
a {
|
|
|
&:hover {}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|