* 改进多选块时带背景色的子块样式 * rgba
This commit is contained in:
Jeffrey Chen
GitHub
parent
8b0d10bbd4
commit
ca6a058144
3 changed files with 86 additions and 2 deletions
|
|
@ -17,6 +17,7 @@
|
|||
--b3-theme-on-primary: #fff;
|
||||
--b3-theme-on-secondary: #fff;
|
||||
--b3-theme-on-background: #222;
|
||||
--b3-theme-on-background-rgba: rgb(34, 34, 34, 0.86);
|
||||
--b3-theme-on-surface: #5f6368;
|
||||
--b3-theme-on-surface-light: rgba(95, 99, 104, .68);
|
||||
--b3-theme-on-error: #fff;
|
||||
|
|
@ -72,12 +73,16 @@
|
|||
/* 卡片背景 */
|
||||
--b3-card-error-color: rgb(97, 26, 21);
|
||||
--b3-card-error-background: #f5d1cf;
|
||||
--b3-card-error-background-rgba: rgb(245, 209, 207, 0.86);
|
||||
--b3-card-warning-color: rgb(102, 60, 0);
|
||||
--b3-card-warning-background: #ffe8c8;
|
||||
--b3-card-warning-background-rgba: rgb(255, 232, 200, 0.86);
|
||||
--b3-card-info-color: rgb(13, 60, 97);
|
||||
--b3-card-info-background: #d6eaf9;
|
||||
--b3-card-info-background-rgba: rgb(214, 234, 249, 0.86);
|
||||
--b3-card-success-color: rgb(30, 70, 32);
|
||||
--b3-card-success-background: #d7eed8;
|
||||
--b3-card-success-background-rgba: rgb(215, 238, 216, 0.86);
|
||||
|
||||
/* 自定义文字 */
|
||||
--b3-font-color1: var(--b3-card-error-color);
|
||||
|
|
@ -106,6 +111,19 @@
|
|||
--b3-font-background11: #def0d9;
|
||||
--b3-font-background12: #fae3e4;
|
||||
--b3-font-background13: var(--b3-theme-on-background);
|
||||
--b3-font-background1-rgba: var(--b3-card-error-background-rgba);
|
||||
--b3-font-background2-rgba: var(--b3-card-warning-background-rgba);
|
||||
--b3-font-background3-rgba: var(--b3-card-info-background-rgba);
|
||||
--b3-font-background4-rgba: var(--b3-card-success-background-rgba);
|
||||
--b3-font-background5-rgba: rgb(226, 227, 228, 0.86);
|
||||
--b3-font-background6-rgba: rgb(172, 208, 252, 0.86);
|
||||
--b3-font-background7-rgba: rgb(253, 238, 214, 0.86);
|
||||
--b3-font-background8-rgba: rgb(250, 225, 207, 0.86);
|
||||
--b3-font-background9-rgba: rgb(253, 213, 231, 0.86);
|
||||
--b3-font-background10-rgba: rgb(230, 199, 230, 0.86);
|
||||
--b3-font-background11-rgba: rgb(222, 240, 217, 0.86);
|
||||
--b3-font-background12-rgba: rgb(250, 227, 228, 0.86);
|
||||
--b3-font-background13-rgba: var(--b3-theme-on-background-rgba);
|
||||
|
||||
/* 动画效果 */
|
||||
--b3-transition: all .2s cubic-bezier(0, 0, .2, 1) 0ms;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
--b3-theme-on-primary: #fff;
|
||||
--b3-theme-on-secondary: #fff;
|
||||
--b3-theme-on-background: #dadada;
|
||||
--b3-theme-on-background-rgba: rgb(218, 218, 218, 0.86);
|
||||
--b3-theme-on-surface: #9aa0a6;
|
||||
--b3-theme-on-surface-light: #bababa;
|
||||
--b3-theme-on-error: #fff;
|
||||
|
|
@ -71,12 +72,16 @@
|
|||
/* 卡片背景 */
|
||||
--b3-card-error-color: rgb(243, 153, 147);
|
||||
--b3-card-error-background: #442724;
|
||||
--b3-card-error-background-rgba: rgb(68, 39, 36, 0.86);
|
||||
--b3-card-warning-color: rgb(255, 213, 153);
|
||||
--b3-card-warning-background: #554636;
|
||||
--b3-card-warning-background-rgba: rgb(85, 70, 54, 0.86);
|
||||
--b3-card-info-color: rgb(166, 213, 250);
|
||||
--b3-card-info-background: #28405c;
|
||||
--b3-card-info-background-rgba: rgb(40, 64, 92, 0.86);
|
||||
--b3-card-success-color: rgb(183, 223, 185);
|
||||
--b3-card-success-background: #425347;
|
||||
--b3-card-success-background-rgba: rgb(66, 83, 71, 0.86);
|
||||
|
||||
/* 自定义文字 */
|
||||
--b3-font-color1: var(--b3-card-error-color);
|
||||
|
|
@ -105,6 +110,19 @@
|
|||
--b3-font-background11: #376629;
|
||||
--b3-font-background12: #803a06;
|
||||
--b3-font-background13: var(--b3-theme-on-background);
|
||||
--b3-font-background1-rgba: var(--b3-card-error-background-rgba);
|
||||
--b3-font-background2-rgba: var(--b3-card-warning-background-rgba);
|
||||
--b3-font-background3-rgba: var(--b3-card-info-background-rgba);
|
||||
--b3-font-background4-rgba: var(--b3-card-success-background-rgba);
|
||||
--b3-font-background5-rgba: rgb(76, 82, 87, 0.86);
|
||||
--b3-font-background6-rgba: rgb(12, 61, 136, 0.86);
|
||||
--b3-font-background7-rgba: rgb(89, 57, 5, 0.86);
|
||||
--b3-font-background8-rgba: rgb(84, 24, 18, 0.86);
|
||||
--b3-font-background9-rgba: rgb(106, 6, 52, 0.86);
|
||||
--b3-font-background10-rgba: rgb(107, 47, 107, 0.86);
|
||||
--b3-font-background11-rgba: rgb(55, 102, 41, 0.86);
|
||||
--b3-font-background12-rgba: rgb(128, 58, 6, 0.86);
|
||||
--b3-font-background13-rgba: var(--b3-theme-on-background-rgba);
|
||||
|
||||
/* 动画效果 */
|
||||
--b3-transition: all .2s cubic-bezier(0, 0, .2, 1) 0ms;
|
||||
|
|
|
|||
|
|
@ -465,8 +465,56 @@
|
|||
&--select {
|
||||
background-color: var(--b3-theme-primary-lightest) !important;
|
||||
|
||||
[data-node-id][style*="background-color"] {
|
||||
opacity: .86;
|
||||
[data-node-id][style*="background-color: var(--b3-font-background1)"] {
|
||||
background-color: var(--b3-font-background1-rgba) !important;
|
||||
}
|
||||
|
||||
[data-node-id][style*="background-color: var(--b3-font-background2)"] {
|
||||
background-color: var(--b3-font-background2-rgba) !important;
|
||||
}
|
||||
|
||||
[data-node-id][style*="background-color: var(--b3-font-background3)"] {
|
||||
background-color: var(--b3-font-background3-rgba) !important;
|
||||
}
|
||||
|
||||
[data-node-id][style*="background-color: var(--b3-font-background4)"] {
|
||||
background-color: var(--b3-font-background4-rgba) !important;
|
||||
}
|
||||
|
||||
[data-node-id][style*="background-color: var(--b3-font-background5)"] {
|
||||
background-color: var(--b3-font-background5-rgba) !important;
|
||||
}
|
||||
|
||||
[data-node-id][style*="background-color: var(--b3-font-background6)"] {
|
||||
background-color: var(--b3-font-background6-rgba) !important;
|
||||
}
|
||||
|
||||
[data-node-id][style*="background-color: var(--b3-font-background7)"] {
|
||||
background-color: var(--b3-font-background7-rgba) !important;
|
||||
}
|
||||
|
||||
[data-node-id][style*="background-color: var(--b3-font-background8)"] {
|
||||
background-color: var(--b3-font-background8-rgba) !important;
|
||||
}
|
||||
|
||||
[data-node-id][style*="background-color: var(--b3-font-background9)"] {
|
||||
background-color: var(--b3-font-background9-rgba) !important;
|
||||
}
|
||||
|
||||
[data-node-id][style*="background-color: var(--b3-font-background10)"] {
|
||||
background-color: var(--b3-font-background10-rgba) !important;
|
||||
}
|
||||
|
||||
[data-node-id][style*="background-color: var(--b3-font-background11)"] {
|
||||
background-color: var(--b3-font-background11-rgba) !important;
|
||||
}
|
||||
|
||||
[data-node-id][style*="background-color: var(--b3-font-background12)"] {
|
||||
background-color: var(--b3-font-background12-rgba) !important;
|
||||
}
|
||||
|
||||
[data-node-id][style*="background-color: var(--b3-font-background13)"] {
|
||||
background-color: var(--b3-font-background13-rgba) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue