@mdsfe/mds-ui/dist/style/color.css

A set of enterprise-class Vue UI components.

/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable declaration-bang-space-before */
/* stylelint-disable declaration-bang-space-before */
.introduce {
  width: 100%;
  height: auto;
  margin-top: 22px;
}
.introduce > div:first-child {
  font-size: 14px;
  color: #666;
  font-family: "Microsoft YaHei", "PingFangSC-Medium";
  font-weight: 500;
}
.introduce > div:last-child {
  font-size: 14px;
  color: #999;
  font-family: "Microsoft YaHei", "PingFangSC-Regular";
  font-weight: 400;
}
.color-title {
  font-size: 16px;
  color: #000;
  font-family: "Microsoft YaHei", 'PingFangSC-Regular';
  font-weight: 400;
  margin-bottom: 20px;
}
.mds-color-primary {
  width: 100%;
  display: inline-block;
  background-color: #0364ff;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-primary > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-primary > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-light-primary {
  width: 100%;
  display: inline-block;
  background-color: #1770FF;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-light-primary > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-light-primary > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-dark-primary {
  width: 100%;
  display: inline-block;
  background-color: #125ACC;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-dark-primary > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-dark-primary > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-text1-1 {
  width: 100%;
  display: inline-block;
  background-color: #333;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-text1-1 > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-text1-1 > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-text1-2 {
  width: 100%;
  display: inline-block;
  background-color: #666;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-text1-2 > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-text1-2 > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-text1-3 {
  width: 100%;
  display: inline-block;
  background-color: #999;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-text1-3 > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-text1-3 > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-text1-4 {
  width: 100%;
  display: inline-block;
  background-color: #ccc;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-text1-4 > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-text1-4 > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-text2-1 {
  width: 100%;
  display: inline-block;
  background-color: #354052;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-text2-1 > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-text2-1 > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-text2-2 {
  width: 100%;
  display: inline-block;
  background-color: #5E6C84;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-text2-2 > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-text2-2 > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-text2-3 {
  width: 100%;
  display: inline-block;
  background-color: #7F8FA4;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-text2-3 > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-text2-3 > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-text2-4 {
  width: 100%;
  display: inline-block;
  background-color: #A9ABBA;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-text2-4 > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-text2-4 > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-text2-5 {
  width: 100%;
  display: inline-block;
  background-color: #CCD2D8;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-text2-5 > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-text2-5 > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-text1-5 {
  width: 100%;
  display: inline-block;
  background-color: #aaa;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-text1-5 > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-text1-5 > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-line1-Border {
  width: 100%;
  display: inline-block;
  background-color: #D8DCE6;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-line1-Border > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-line1-Border > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-line1-1 {
  width: 100%;
  display: inline-block;
  background-color: #F0F2F5;
  color: #666;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-line1-1 > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-line1-1 > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-fill1-1 {
  width: 100%;
  display: inline-block;
  background-color: #FAFAFD;
  color: #666;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-fill1-1 > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-fill1-1 > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-fill1-2 {
  width: 100%;
  display: inline-block;
  background-color: #FAFBFC;
  color: #666;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-fill1-2 > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-fill1-2 > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-success {
  width: 100%;
  display: inline-block;
  background-color: #00AA00;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-success > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-success > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-success + ul {
  width: 100%;
  height: 40px;
}
.mds-color-success + ul > li {
  float: left;
  width: 20%;
  height: 100%;
}
.mds-color-success + ul > li:nth-child(1) {
  background-color: #005400;
  opacity: .7;
}
.mds-color-success + ul > li:nth-child(2) {
  background-color: #5BC62C;
  opacity: .7;
}
.mds-color-success + ul > li:nth-child(3) {
  background-color: #8CD76B;
  opacity: .3;
}
.mds-color-success + ul > li:nth-child(4) {
  background-color: #5BC62C;
  opacity: .1;
}
.mds-color-success + ul > li:nth-child(5) {
  background-color: #5BC62C;
  opacity: 0.05;
}
.mds-color-error {
  width: 100%;
  display: inline-block;
  background-color: #EE3333;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-error > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-error > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-error + ul {
  width: 100%;
  height: 40px;
}
.mds-color-error + ul > li {
  float: left;
  width: 20%;
  height: 100%;
}
.mds-color-error + ul > li:nth-child(1) {
  background-color: #761919;
  opacity: .7;
}
.mds-color-error + ul > li:nth-child(2) {
  background-color: #EE3333;
  opacity: .5;
}
.mds-color-error + ul > li:nth-child(3) {
  background-color: #EE3333;
  opacity: .3;
}
.mds-color-error + ul > li:nth-child(4) {
  background-color: #EE3333;
  opacity: .1;
}
.mds-color-error + ul > li:nth-child(5) {
  background-color: #EE3333;
  opacity: 0.05;
}
.mds-color-notice {
  width: 100%;
  display: inline-block;
  background-color: #FF6600;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-notice > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-notice > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-notice + ul {
  width: 100%;
  height: 40px;
}
.mds-color-notice + ul > li {
  float: left;
  width: 20%;
  height: 100%;
}
.mds-color-notice + ul > li:nth-child(1) {
  background-color: #7F3200;
  opacity: .7;
}
.mds-color-notice + ul > li:nth-child(2) {
  background-color: #FF6600;
  opacity: .5;
}
.mds-color-notice + ul > li:nth-child(3) {
  background-color: #FF6600;
  opacity: .3;
}
.mds-color-notice + ul > li:nth-child(4) {
  background-color: #FF6600;
  opacity: .1;
}
.mds-color-notice + ul > li:nth-child(5) {
  background-color: #FF6600;
  opacity: 0.05;
}
.mds-color-warn {
  width: 100%;
  display: inline-block;
  background-color: #FFCC01;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-warn > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-warn > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-warn + ul {
  width: 100%;
  height: 40px;
}
.mds-color-warn + ul > li {
  float: left;
  width: 20%;
  height: 100%;
}
.mds-color-warn + ul > li:nth-child(1) {
  background-color: #7F6500;
  opacity: .7;
}
.mds-color-warn + ul > li:nth-child(2) {
  background-color: #FFCC01;
  opacity: .5;
}
.mds-color-warn + ul > li:nth-child(3) {
  background-color: #FFCC01;
  opacity: .3;
}
.mds-color-warn + ul > li:nth-child(4) {
  background-color: #FFCC01;
  opacity: .1;
}
.mds-color-warn + ul > li:nth-child(5) {
  background-color: #FFCC01;
  opacity: 0.05;
}
.mds-color-link {
  width: 100%;
  display: inline-block;
  background-color: #0364ff;
  color: #fff;
  font-family: PingFangSC-Medium;
  box-sizing: border-box;
  padding-left: 30px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.mds-color-link > span:first-child {
  font-size: 16px;
  display: block;
}
.mds-color-link > span:last-child {
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.mds-color-link + ul {
  width: 100%;
  height: 40px;
}
.mds-color-link + ul > li {
  float: left;
  width: 33.333333333%;
  height: 100%;
}
.mds-color-link + ul > li:nth-child(1) {
  background-color: #0347B3;
}
.mds-color-link + ul > li:nth-child(2) {
  background-color: #4F93FF;
  opacity: .3;
}
.mds-color-link + ul > li:nth-child(3) {
  background-color: #0364FF;
  opacity: .1;
}
.state {
  font-size: 16px;
  font-family: "Microsoft YaHei", "PingFangSC-Medium";
  font-weight: 500;
  color: #666666;
  margin-top: 17px;
}
.other-row {
  margin-top: 30px;
}
.color-margin {
  margin-top: 54px;
}
.color-top {
  margin-top: 50px;
}
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable declaration-bang-space-before */
/* stylelint-disable declaration-bang-space-before */