OneAuth/oaweb/assets/css/editor.scss

$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 {}
      }
    }
  }
}