vditor/src/assets/less/index.less

♏ 易于使用的 Markdown 编辑器，为适配不同的应用场景而生

@errorColor: #d23f31;
@blurColor: #4285f4;

@font-family-base: "Helvetica Neue", "Luxi Sans", "DejaVu Sans",
  "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji",
  "EmojiSymbols";
@font-family-code: mononoki, Consolas, "Liberation Mono", Menlo, Courier,
  monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
  "Segoe UI Symbol", "Android Emoji", "EmojiSymbols";

@transition: all 0.15s ease-in-out;

@max-width: 520px;

.vditor {
  --border-color: #d1d5da;
  --second-color: rgba(88, 96, 105, 0.36);

  --panel-background-color: #fff;
  --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

  --toolbar-background-color: #f6f8fa;
  --toolbar-icon-color: #586069;
  --toolbar-icon-hover-color: @blurColor;
  --toolbar-height: 35px;
  --toolbar-divider-margin-top: 8px;

  --textarea-background-color: #fafbfc;
  --textarea-text-color: #24292e;

  --resize-icon-color: var(--toolbar-icon-color);
  --resize-background-color: var(--toolbar-background-color);
  --resize-hover-icon-color: var(--panel-background-color);
  --resize-hover-background-color: var(--toolbar-icon-hover-color);

  --count-background-color: rgba(27, 31, 35, 0.05);
  --heading-border-color: #eaecef;
  --blockquote-color: #6a737d;
  --callout-note-color: #0969da;
  --callout-note-background-color: rgba(9, 105, 218, 0.08);
  --callout-tip-color: #1a7f37;
  --callout-tip-background-color: rgba(26, 127, 55, 0.08);
  --callout-important-color: #8250df;
  --callout-important-background-color: rgba(130, 80, 223, 0.08);
  --callout-warning-color: #9a6700;
  --callout-warning-background-color: rgba(154, 103, 0, 0.08);
  --callout-caution-color: #cf222e;
  --callout-caution-background-color: rgba(207, 34, 46, 0.08);

  --ir-heading-color: #660e7a;
  --ir-title-color: #808080;
  --ir-bi-color: #0033b3;
  --ir-link-color: #008000;
  --ir-bracket-color: #0000ff;
  --ir-paren-color: #008000;

  &--dark {
    --border-color: #141414;
    --second-color: rgba(185, 185, 185, 0.36);

    --panel-background-color: #24292e;
    --panel-shadow: 0 1px 2px rgba(255, 255, 255, 0.2);

    --toolbar-background-color: #1d2125;
    --toolbar-icon-color: #b9b9b9;
    --toolbar-icon-hover-color: #fff;

    --textarea-background-color: #2f363d;
    --textarea-text-color: #d1d5da;

    --resize-icon-color: var(--border-color);
    --resize-background-color: var(--second-color);
    --resize-hover-icon-color: var(--toolbar-icon-hover-color);
    --resize-hover-background-color: rgba(185, 185, 185, 0.86);

    --count-background-color: rgba(@blurColor, 0.36);
    --heading-border-color: var(--textarea-text-color);
    --blockquote-color: var(--toolbar-icon-color);
    --callout-note-color: #58a6ff;
    --callout-note-background-color: rgba(56, 139, 253, 0.15);
    --callout-tip-color: #3fb950;
    --callout-tip-background-color: rgba(46, 160, 67, 0.15);
    --callout-important-color: #a371f7;
    --callout-important-background-color: rgba(163, 113, 247, 0.15);
    --callout-warning-color: #d29922;
    --callout-warning-background-color: rgba(187, 128, 9, 0.15);
    --callout-caution-color: #f85149;
    --callout-caution-background-color: rgba(248, 81, 73, 0.15);

    --ir-heading-color: #9876aa;
    --ir-title-color: #808080;
    --ir-bi-color: #cc7832;
    --ir-link-color: #ffc66d;
    --ir-bracket-color: #287bde;
    --ir-paren-color: #6a8759;
  }
}

@import "_tooltipped";
@import "_panel";
@import "_toolbar";
@import "_content";
@import "_hint";
@import "_reset";
@import "_wysiwyg";
@import "_ir";
@import "_sv";