From 9900b6987c24b53911278951bf3a08046d608eb8 Mon Sep 17 00:00:00 2001 From: veypi Date: Tue, 29 Oct 2024 20:27:06 +0800 Subject: [PATCH] feat: cherry css --- oaweb/assets/css/editor.scss | 451 +++++++++++++++++++++++++++++++++++ 1 file changed, 451 insertions(+) create mode 100644 oaweb/assets/css/editor.scss diff --git a/oaweb/assets/css/editor.scss b/oaweb/assets/css/editor.scss new file mode 100644 index 0000000..6663d51 --- /dev/null +++ b/oaweb/assets/css/editor.scss @@ -0,0 +1,451 @@ +$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: rgb(255, 255, 255); +$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: none; +$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 { + + /** 顶部按钮, 选中文字时弹出的按钮, 光标focus到空行时联想出的按钮, 侧边栏按钮 */ + .cherry-toolbar, + .cherry-floatmenu, + .cherry-bubble, + .cherry-sidebar { + background: $toolbarBg; + border-color: $toolbarBg; + + .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; + + .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 {} + } + } + } +}