OptimusX
/
OneAuth
mirror of https://github.com/veypi/OneAuth.git
4
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: cherry css

Browse Source
v3
veypi 4 weeks ago
parent d822aa67c9
commit 9900b6987c
1 changed files with 451 additions and 0 deletions
Show Stats Download Patch File Download Diff File

451
oaweb/assets/css/editor.scss
Unescape Escape View File

@ -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 {}
}
}
}
}
Write Preview
Loading…
Cancel
Save