mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
136 lines
4.9 KiB
SCSS
136 lines
4.9 KiB
SCSS
/**
|
|
* 文档变量
|
|
*/
|
|
|
|
/* 背景颜色 */
|
|
$color-bg: #fefefe;
|
|
|
|
/* 白色 */
|
|
$color-white: #fff;
|
|
|
|
/* 黑色 */
|
|
$color-black: #000;
|
|
$color-black-l1: mix($color-white, $color-black, 10%);
|
|
$color-black-l2: mix($color-white, $color-black, 20%);
|
|
$color-black-l3: mix($color-white, $color-black, 30%);
|
|
$color-black-l4: mix($color-white, $color-black, 40%);
|
|
$color-black-l5: mix($color-white, $color-black, 50%);
|
|
$color-black-l6: mix($color-white, $color-black, 60%);
|
|
$color-black-l7: mix($color-white, $color-black, 70%);
|
|
$color-black-l8: mix($color-white, $color-black, 80%);
|
|
$color-black-l9: mix($color-white, $color-black, 90%);
|
|
|
|
/* 主题色 */
|
|
$color-theme: #0083ff;
|
|
$color-theme-l1: mix($color-white, $color-theme, 10%);
|
|
$color-theme-l2: mix($color-white, $color-theme, 20%);
|
|
$color-theme-l3: mix($color-white, $color-theme, 30%);
|
|
$color-theme-l4: mix($color-white, $color-theme, 40%);
|
|
$color-theme-l5: mix($color-white, $color-theme, 50%);
|
|
$color-theme-l6: mix($color-white, $color-theme, 60%);
|
|
$color-theme-l7: mix($color-white, $color-theme, 70%);
|
|
$color-theme-l8: mix($color-white, $color-theme, 80%);
|
|
$color-theme-l9: mix($color-white, $color-theme, 90%);
|
|
|
|
$color-theme-e1: mix($color-black, $color-theme, 10%);
|
|
$color-theme-e2: mix($color-black, $color-theme, 20%);
|
|
$color-theme-e3: mix($color-black, $color-theme, 30%);
|
|
$color-theme-e4: mix($color-black, $color-theme, 40%);
|
|
$color-theme-e5: mix($color-black, $color-theme, 50%);
|
|
$color-theme-e6: mix($color-black, $color-theme, 60%);
|
|
$color-theme-e7: mix($color-black, $color-theme, 70%);
|
|
$color-theme-e8: mix($color-black, $color-theme, 80%);
|
|
$color-theme-e9: mix($color-black, $color-theme, 90%);
|
|
|
|
/* 辅助色 */
|
|
$color-aid: #e2231a;
|
|
$color-aid-l1: mix($color-white, $color-aid, 10%);
|
|
$color-aid-l2: mix($color-white, $color-aid, 20%);
|
|
$color-aid-l3: mix($color-white, $color-aid, 30%);
|
|
$color-aid-l4: mix($color-white, $color-aid, 40%);
|
|
$color-aid-l5: mix($color-white, $color-aid, 50%);
|
|
$color-aid-l6: mix($color-white, $color-aid, 60%);
|
|
$color-aid-l7: mix($color-white, $color-aid, 70%);
|
|
$color-aid-l8: mix($color-white, $color-aid, 80%);
|
|
$color-aid-l9: mix($color-white, $color-aid, 90%);
|
|
|
|
$color-aid-e1: mix($color-black, $color-aid, 10%);
|
|
$color-aid-e2: mix($color-black, $color-aid, 20%);
|
|
$color-aid-e3: mix($color-black, $color-aid, 30%);
|
|
$color-aid-e4: mix($color-black, $color-aid, 40%);
|
|
$color-aid-e5: mix($color-black, $color-aid, 50%);
|
|
$color-aid-e6: mix($color-black, $color-aid, 60%);
|
|
$color-aid-e7: mix($color-black, $color-aid, 70%);
|
|
$color-aid-e8: mix($color-black, $color-aid, 80%);
|
|
$color-aid-e9: mix($color-black, $color-aid, 90%);
|
|
|
|
/* 警告色 */
|
|
$color-warn: #ff9900;
|
|
$color-warn-l1: mix($color-white, $color-warn, 10%);
|
|
$color-warn-l2: mix($color-white, $color-warn, 20%);
|
|
$color-warn-l3: mix($color-white, $color-warn, 30%);
|
|
$color-warn-l4: mix($color-white, $color-warn, 40%);
|
|
$color-warn-l5: mix($color-white, $color-warn, 50%);
|
|
$color-warn-l6: mix($color-white, $color-warn, 60%);
|
|
$color-warn-l7: mix($color-white, $color-warn, 70%);
|
|
$color-warn-l8: mix($color-white, $color-warn, 80%);
|
|
$color-warn-l9: mix($color-white, $color-warn, 90%);
|
|
|
|
/* 错误色 */
|
|
$color-error: #ff3333;
|
|
$color-error-l1: mix($color-white, $color-error, 10%);
|
|
$color-error-l2: mix($color-white, $color-error, 20%);
|
|
$color-error-l3: mix($color-white, $color-error, 30%);
|
|
$color-error-l4: mix($color-white, $color-error, 40%);
|
|
$color-error-l5: mix($color-white, $color-error, 50%);
|
|
$color-error-l6: mix($color-white, $color-error, 60%);
|
|
$color-error-l7: mix($color-white, $color-error, 70%);
|
|
$color-error-l8: mix($color-white, $color-error, 80%);
|
|
$color-error-l9: mix($color-white, $color-error, 90%);
|
|
|
|
/* 代码颜色 */
|
|
$color-code-bg: #f6f6f6;
|
|
$color-code: #2d3c4a;
|
|
$color-js-keyword: $color-theme;
|
|
$color-js-string: $color-aid-l2;
|
|
$color-html-tag: #464646;
|
|
$color-html-attr: #0083ff;
|
|
$color-html-attr-value: #429606;
|
|
$color-html-tag-name: $color-aid;
|
|
$color-html-comment: #999;
|
|
$color-js-comment: mix($color-white, $color-code, 50%);
|
|
$color-js-number: #ae81ff;
|
|
$color-js-literal: #ae81ff;
|
|
$color-js-built_in: #429606;
|
|
$color-js-attr: $color-aid;
|
|
$color-css-selector: $color-theme;
|
|
$color-css-attr: $color-code;
|
|
$color-css-number: $color-aid;
|
|
$color-json-attr: $color-aid;
|
|
$color-json-string: #429606;
|
|
$color-json-type: $color-theme;
|
|
$color-bash-built: $color-theme;
|
|
|
|
/* 代码字体 */
|
|
$code-family: ("Roboto Mono", Monaco, courier, monospace);
|
|
|
|
/* 字体 */
|
|
$font-family: ('Helvetica Neue','PingFang SC','Microsoft YaHei',Helvetica,'Hiragino Sans GB',SimSun,sans-serif);
|
|
|
|
/* 字体大小 */
|
|
$fs-large-title: 20px; // 大标题
|
|
$fs-title: 16px; // 小标题
|
|
$fs-text: 14px; // 正文
|
|
|
|
/* 字体颜色 */
|
|
$color-important: #2b2b2b; // 重要文字
|
|
$color-text: #34495e; // 正文
|
|
$color-text-light: #666;
|
|
$color-text-aid: #adadad; // 辅助性文字
|
|
|
|
/* 边框颜色 */
|
|
$color-line: #ddd;
|
|
$color-line-light: #eee;
|
|
|
|
/* 头部高度 */
|
|
$layout-header-height: 60px; |