mirror of
https://github.com/ElemeFE/element.git
synced 2025-12-19 12:04:02 +08:00
4.2 KiB
4.2 KiB
<style>
.demo-color-box {
border-radius: 4px;
padding: 20px;
height: 74px;
box-sizing: border-box;
color: #fff;
font-size: 14px;
& .value {
font-size: 12px;
opacity: 0.69;
line-height: 24px;
}
}
.demo-color-box-group {
.demo-color-box {
border-radius: 0;
}
.demo-color-box:first-child {
border-radius: 4px 4px 0 0;
}
.demo-color-box:last-child {
border-radius: 0 0 4px 4px;
}
}
.bg-blue-light {
background-color: #58b7ff;
}
.bg-blue,
.bg-info {
background-color: #20a0ff;
}
.bg-blue-dark {
background-color: #1d8ce0;
}
.bg-success {
background-color: #13CE66;
}
.bg-warning {
background-color: #f7ba2a;
}
.bg-danger {
background-color: #ff4949;
}
.bg-black {
background-color: #1f2d3d;
}
.bg-black-light {
background-color: #324057;
}
.bg-black-lighter {
background-color: #475669;
}
.bg-silver {
background-color: #8492a6;
}
.bg-silver-light {
background-color: #99a9bf;
}
.bg-silver-lighter {
background-color: #c0ccda;
}
.bg-gray {
background-color: #d3dce6;
}
.bg-gray-light {
background-color: #e5e9f2;
}
.bg-gray-lighter {
background-color: #eff2f7;
}
.bg-white-dark {
background-color: #f9fafc;
}
.color-gray {
color: #5e6d82;
}
</style>
Color 色彩
Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。
主色
Element 主要品牌颜色是鲜艳、友好的蓝色。
Light Blue
#58B7FF
Blue
#20A0FF
Dark Blue
#1D8CE0
辅助色
除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
Blue
#20A0FF
Success
#13CE66
Warning
#F7BA2A
Danger
#FF4949
中性色
中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
Black
#1F2D3D
Light Black
#324057
Extra Light Black
#475669
Silver
#8492A6
Light Silver
#99A9BF
Extra Light Silver
#C0CCDA
Gray
#D3DCE6
Light Gray
#E5E9F2
Extra Light Gray
#EFF2F7
Dark White
#F9FAFC
White
#FFFFFF