自定义样式 - v-no

The documentation is a work in progress, and English edition is just an empty shell for now. I will translate it when Chinese edition has done.

自定义样式和自定义脚本的机制非常相似。

你可以像这样引入一个自定义样式（它是一个链接语法扩展）：

[*](/uploads/custom.css)

你也可以使用多于一个的 * 标记将它挂载为一个驻留样式。

可覆盖的 CSS 变量

:root {
  --font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  --mono-font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  --font-size: 14px;
  --font-size-s: 12px;
  --font-color: #464646;
  --gray-font-color: #8d8d8d;
  --link-font-color: #2864dc;

  --mark-color: rgba(255, 255, 0, 0.3);

  --info-color: 0, 150, 255;
  --success-color: 0, 200, 100;
  --warning-color: 255, 150, 0;
  --danger-color: 255, 50, 100;
  --dark-color: 0, 0, 0;

  --background-color: #f1f1f1;
  --main-background-color: #ffffff;
  --code-background-color: rgba(150, 150, 150, 0.1);

  --dark-background-color: #2b2b2b;
  --dark-main-background-color: #3b3b3b;
  --dark-font-color: #bebebe;
  --dark-link-font-color: #82b4e6;}

预定义的按钮和输入框样式

<button class="btn">Button</button><button class="btn bold">Button</button><button class="btn success">Button</button><button class="btn warning">Button</button><button class="btn danger">Button</button><button class="btn dark">Button</button><button class="btn" disabled>Button</button>

<input class="ipt" placeholder="Input"/><input class="ipt success" placeholder="Input"/><input class="ipt warning" placeholder="Input"/><input class="ipt danger" placeholder="Input"/><input class="ipt dark" placeholder="Input"/><input class="ipt" disabled placeholder="Input"/>

<textarea class="ipt" placeholder="Textarea"></textarea><textarea class="ipt success" placeholder="Textarea"></textarea><textarea class="ipt warning" placeholder="Textarea"></textarea><textarea class="ipt danger" placeholder="Textarea"></textarea><textarea class="ipt dark" placeholder="Textarea"></textarea><textarea class="ipt" disabled placeholder="Textarea"></textarea>

: This page is open source, improve it

Graph