1div.plugin-bpmnio { 2 overflow: hidden; 3 4 --plugin-bpmnio-surface: #fff; 5 --plugin-bpmnio-surface-alt: #f4f6f8; 6 --plugin-bpmnio-surface-muted: #e8edf2; 7 --plugin-bpmnio-border: #aeb8c2; 8 --plugin-bpmnio-text: #1f2933; 9 --plugin-bpmnio-text-muted: #52606d; 10 --plugin-bpmnio-accent: #0b74de; 11 --plugin-bpmnio-accent-soft: rgb(11 116 222 / 15%); 12 --plugin-bpmnio-danger: #c81e1e; 13 --plugin-bpmnio-danger-soft: #fde8e8; 14 --plugin-bpmnio-shadow: rgb(15 23 42 / 12%); 15} 16 17div.plugin-bpmnio .bpmn_js_canvas { 18 overflow: auto; 19 padding: 1em; 20 border-radius: 0.5em; 21 background-color: var(--plugin-bpmnio-surface-alt); 22} 23 24div.plugin-bpmnio .dmn_js_canvas { 25 overflow: auto; 26 padding: 1em; 27 border-radius: 0.5em; 28 background-color: var(--plugin-bpmnio-surface-alt); 29} 30 31.plugin-bpmnio .bjs-container, 32.plugin-bpmnio .djs-parent, 33.plugin-bpmnio .dmn-js-parent { 34 color: var(--plugin-bpmnio-text); 35 font-family: Arial, sans-serif; 36 37 --color-grey-225-10-15: var(--plugin-bpmnio-text); 38 --color-grey-225-10-35: var(--plugin-bpmnio-text-muted); 39 --color-grey-225-10-55: #7b8794; 40 --color-grey-225-10-75: var(--plugin-bpmnio-border); 41 --color-grey-225-10-80: #c7d0d9; 42 --color-grey-225-10-85: #d9e2ec; 43 --color-grey-225-10-90: #e5e7eb; 44 --color-grey-225-10-95: #f3f4f6; 45 --color-grey-225-10-97: var(--plugin-bpmnio-surface-alt); 46 --color-blue-205-100-35: #0a5bb5; 47 --color-blue-205-100-45: var(--plugin-bpmnio-accent); 48 --color-blue-205-100-45-opacity-30: rgb(11 116 222 / 30%); 49 --color-blue-205-100-50: #0a84ff; 50 --color-blue-205-100-50-opacity-15: var(--plugin-bpmnio-accent-soft); 51 --color-blue-205-100-70: #69aef5; 52 --color-blue-205-100-80: #8ec5ff; 53 --color-blue-205-100-95: #eaf4ff; 54 --color-green-150-86-44: #0f9d58; 55 --color-red-360-100-35: #b91c1c; 56 --color-red-360-100-40: var(--plugin-bpmnio-danger); 57 --color-red-360-100-45: #dc2626; 58 --color-red-360-100-92: #fee2e2; 59 --color-red-360-100-97: var(--plugin-bpmnio-danger-soft); 60 --color-white: var(--plugin-bpmnio-surface); 61 --color-black: #000; 62 --color-black-opacity-05: rgb(0 0 0 / 5%); 63 --color-black-opacity-10: rgb(15 23 42 / 10%); 64 --color-black-opacity-20: rgb(15 23 42 / 20%); 65 --color-black-opacity-30: rgb(15 23 42 / 30%); 66} 67 68.plugin-bpmnio .bjs-container, 69.plugin-bpmnio .djs-container, 70.plugin-bpmnio .dmn-js-parent, 71.plugin-bpmnio .dmn-decision-table-container, 72.plugin-bpmnio .dmn-literal-expression-container, 73.plugin-bpmnio .dmn-boxed-expression-container, 74.plugin-bpmnio .dmn-drd-container { 75 color: var(--plugin-bpmnio-text); 76} 77 78.plugin-bpmnio .bjs-container button, 79.plugin-bpmnio .djs-container button, 80.plugin-bpmnio .dmn-js-parent button, 81.plugin-bpmnio .dmn-js-parent [contenteditable], 82.plugin-bpmnio .dmn-js-parent input, 83.plugin-bpmnio .dmn-js-parent select, 84.plugin-bpmnio .dmn-js-parent textarea { 85 color: inherit; 86} 87 88.plugin-bpmnio svg { 89 height: 100%; 90 width: 100%; 91} 92 93.plugin-bpmnio .dmn-drd-container { 94 height: 100%; 95 96 --dmn-definitions-background-color: var(--plugin-bpmnio-surface); 97 --dmn-definitions-border-color: var(--plugin-bpmnio-border); 98 --dmn-definitions-focus-border-color: var(--plugin-bpmnio-border); 99 --drill-down-overlay-background-color: var(--plugin-bpmnio-surface); 100 --drill-down-overlay-color: var(--plugin-bpmnio-text); 101} 102 103.plugin-bpmnio .dmn-definitions { 104 color: var(--plugin-bpmnio-text); 105 background-color: var(--dmn-definitions-background-color); 106 border-color: var(--dmn-definitions-border-color); 107} 108 109.plugin-bpmnio .dmn-definitions .dmn-definitions-name, 110.plugin-bpmnio .dmn-definitions .dmn-definitions-id { 111 color: var(--plugin-bpmnio-text); 112 background: transparent; 113} 114 115.plugin-bpmnio .dmn-definitions > [contenteditable]:hover, 116.plugin-bpmnio .dmn-definitions > [contenteditable]:focus { 117 color: var(--plugin-bpmnio-text); 118 background-color: var(--plugin-bpmnio-surface-alt); 119} 120 121.plugin-bpmnio .djs-overlay .drill-down-overlay > button, 122.plugin-bpmnio .djs-overlay .drill-down-overlay > span { 123 color: var(--drill-down-overlay-color); 124 background: var(--drill-down-overlay-background-color); 125 border: 1px solid var(--plugin-bpmnio-border); 126 box-shadow: none; 127} 128 129.plugin-bpmnio .djs-overlay .drill-down-overlay > button:hover, 130.plugin-bpmnio .djs-overlay .drill-down-overlay > button:focus { 131 background: var(--plugin-bpmnio-surface-alt); 132} 133 134.plugin-bpmnio .bjs-drilldown { 135 fill: var(--plugin-bpmnio-surface); 136 background-color: var(--plugin-bpmnio-accent); 137} 138 139.plugin-bpmnio .bjs-breadcrumbs { 140 display: none; 141} 142 143.plugin-bpmnio .dmn-decision-table-container, 144.plugin-bpmnio .dmn-boxed-expression-container, 145.plugin-bpmnio .dmn-literal-expression-container { 146 --separator-color: var(--plugin-bpmnio-border); 147 --input-border-color: var(--plugin-bpmnio-border); 148 --input-color: var(--plugin-bpmnio-text); 149 --input-focus-box-shadow-inset-color: var(--plugin-bpmnio-border); 150 --select-option-hover-background-color: var(--plugin-bpmnio-surface-alt); 151 --select-options-background-color: var(--plugin-bpmnio-surface); 152 --select-options-border-color: var(--plugin-bpmnio-border); 153 --select-options-box-shadow-color: var(--plugin-bpmnio-shadow); 154 --select-options-color: var(--plugin-bpmnio-text); 155 --powered-by-overlay-content-background-color: var(--plugin-bpmnio-surface); 156 --powered-by-overlay-content-color: var(--plugin-bpmnio-text); 157 --powered-by-overlay-content-border-color: var(--plugin-bpmnio-border); 158 --view-drd-button-background-color: var(--plugin-bpmnio-surface); 159 --view-drd-button-border-color: var(--plugin-bpmnio-border); 160 --view-drd-button-color: var(--plugin-bpmnio-text); 161 --view-drd-button-hover-background-color: var(--plugin-bpmnio-surface-alt); 162 163 background-color: var(--plugin-bpmnio-surface); 164 color: var(--plugin-bpmnio-text); 165} 166 167.plugin-bpmnio .dmn-decision-table-container { 168 --decision-table-color: var(--plugin-bpmnio-text); 169 --decision-table-background-color: var(--plugin-bpmnio-surface); 170 --decision-table-properties-color: var(--plugin-bpmnio-text); 171 --hit-policy-explanation-color: var(--plugin-bpmnio-text-muted); 172 --simple-mode-button-color: var(--plugin-bpmnio-text); 173 --simple-mode-button-background-color: var(--plugin-bpmnio-surface); 174 --simple-mode-button-border-color: var(--plugin-bpmnio-border); 175 --simple-mode-button-box-shadow-color: var(--plugin-bpmnio-shadow); 176 --simple-mode-button-disabled-color: #9aa5b1; 177 --table-cell-color: var(--plugin-bpmnio-text); 178 --table-cell-border-color: var(--plugin-bpmnio-border); 179 --table-foot-add-rule-border-color: var(--plugin-bpmnio-border); 180 --table-foot-add-rule-color: var(--plugin-bpmnio-text-muted); 181 --table-foot-add-rule-hover-border-color: var(--plugin-bpmnio-text-muted); 182 --table-foot-add-rule-hover-color: var(--plugin-bpmnio-text); 183 --table-head-border-color: var(--plugin-bpmnio-border); 184 --table-head-clause-color: var(--plugin-bpmnio-text-muted); 185 --table-head-separator-color: var(--plugin-bpmnio-border); 186 --table-head-variable-color: var(--plugin-bpmnio-text-muted); 187 --table-row-alternative-background-color: var(--plugin-bpmnio-surface-alt); 188 --edit-button-color: var(--plugin-bpmnio-text); 189 --edit-button-background-color: var(--plugin-bpmnio-surface); 190 --edit-button-border-color: var(--plugin-bpmnio-border); 191 --edit-button-box-shadow-color: var(--plugin-bpmnio-shadow); 192 --edit-button-disabled-color: #9aa5b1; 193} 194 195.dmn-decision-table-container tbody tr { 196 background-color: var(--view-drd-button-background-color); 197} 198 199.dmn-decision-table-container tbody tr:nth-child(2n) { 200 background-color: var(--table-row-alternative-background-color); 201} 202