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 .bpmnio-linked, 94.plugin-bpmnio .bpmnio-linked * { 95 cursor: pointer; 96} 97 98.plugin-bpmnio .bpmnio-linked.wikilink1 text { 99 fill: #080; 100 text-decoration: underline; 101} 102 103.plugin-bpmnio .bpmnio-linked.wikilink2 text { 104 fill: #d30; 105 text-decoration: underline; 106} 107 108.plugin-bpmnio .bpmnio-linked.wikilink1:hover text, 109.plugin-bpmnio .bpmnio-linked.wikilink1:focus text, 110.plugin-bpmnio .bpmnio-linked.wikilink1:active text, 111.plugin-bpmnio .bpmnio-linked.wikilink2:hover text, 112.plugin-bpmnio .bpmnio-linked.wikilink2:focus text, 113.plugin-bpmnio .bpmnio-linked.wikilink2:active text { 114 text-decoration: none; 115} 116 117.plugin-bpmnio .dmn-drd-container { 118 height: 100%; 119 120 --dmn-definitions-background-color: var(--plugin-bpmnio-surface); 121 --dmn-definitions-border-color: var(--plugin-bpmnio-border); 122 --dmn-definitions-focus-border-color: var(--plugin-bpmnio-border); 123 --drill-down-overlay-background-color: var(--plugin-bpmnio-surface); 124 --drill-down-overlay-color: var(--plugin-bpmnio-text); 125} 126 127.plugin-bpmnio .dmn-definitions { 128 color: var(--plugin-bpmnio-text); 129 background-color: var(--dmn-definitions-background-color); 130 border-color: var(--dmn-definitions-border-color); 131} 132 133.plugin-bpmnio .dmn-definitions .dmn-definitions-name, 134.plugin-bpmnio .dmn-definitions .dmn-definitions-id { 135 color: var(--plugin-bpmnio-text); 136 background: transparent; 137} 138 139.plugin-bpmnio .dmn-definitions > [contenteditable]:hover, 140.plugin-bpmnio .dmn-definitions > [contenteditable]:focus { 141 color: var(--plugin-bpmnio-text); 142 background-color: var(--plugin-bpmnio-surface-alt); 143} 144 145.plugin-bpmnio .djs-overlay .drill-down-overlay > button, 146.plugin-bpmnio .djs-overlay .drill-down-overlay > span { 147 color: var(--drill-down-overlay-color); 148 background: var(--drill-down-overlay-background-color); 149 border: 1px solid var(--plugin-bpmnio-border); 150 box-shadow: none; 151} 152 153.plugin-bpmnio .djs-overlay .drill-down-overlay > button:hover, 154.plugin-bpmnio .djs-overlay .drill-down-overlay > button:focus { 155 background: var(--plugin-bpmnio-surface-alt); 156} 157 158.plugin-bpmnio .bjs-drilldown { 159 fill: var(--plugin-bpmnio-surface); 160 background-color: var(--plugin-bpmnio-accent); 161} 162 163.plugin-bpmnio .bjs-breadcrumbs { 164 display: none; 165} 166 167.plugin-bpmnio .dmn-decision-table-container, 168.plugin-bpmnio .dmn-boxed-expression-container, 169.plugin-bpmnio .dmn-literal-expression-container { 170 --separator-color: var(--plugin-bpmnio-border); 171 --input-border-color: var(--plugin-bpmnio-border); 172 --input-color: var(--plugin-bpmnio-text); 173 --input-focus-box-shadow-inset-color: var(--plugin-bpmnio-border); 174 --select-option-hover-background-color: var(--plugin-bpmnio-surface-alt); 175 --select-options-background-color: var(--plugin-bpmnio-surface); 176 --select-options-border-color: var(--plugin-bpmnio-border); 177 --select-options-box-shadow-color: var(--plugin-bpmnio-shadow); 178 --select-options-color: var(--plugin-bpmnio-text); 179 --powered-by-overlay-content-background-color: var(--plugin-bpmnio-surface); 180 --powered-by-overlay-content-color: var(--plugin-bpmnio-text); 181 --powered-by-overlay-content-border-color: var(--plugin-bpmnio-border); 182 --view-drd-button-background-color: var(--plugin-bpmnio-surface); 183 --view-drd-button-border-color: var(--plugin-bpmnio-border); 184 --view-drd-button-color: var(--plugin-bpmnio-text); 185 --view-drd-button-hover-background-color: var(--plugin-bpmnio-surface-alt); 186 187 background-color: var(--plugin-bpmnio-surface); 188 color: var(--plugin-bpmnio-text); 189} 190 191.plugin-bpmnio .dmn-decision-table-container { 192 --decision-table-color: var(--plugin-bpmnio-text); 193 --decision-table-background-color: var(--plugin-bpmnio-surface); 194 --decision-table-properties-color: var(--plugin-bpmnio-text); 195 --hit-policy-explanation-color: var(--plugin-bpmnio-text-muted); 196 --simple-mode-button-color: var(--plugin-bpmnio-text); 197 --simple-mode-button-background-color: var(--plugin-bpmnio-surface); 198 --simple-mode-button-border-color: var(--plugin-bpmnio-border); 199 --simple-mode-button-box-shadow-color: var(--plugin-bpmnio-shadow); 200 --simple-mode-button-disabled-color: #9aa5b1; 201 --table-cell-color: var(--plugin-bpmnio-text); 202 --table-cell-border-color: var(--plugin-bpmnio-border); 203 --table-foot-add-rule-border-color: var(--plugin-bpmnio-border); 204 --table-foot-add-rule-color: var(--plugin-bpmnio-text-muted); 205 --table-foot-add-rule-hover-border-color: var(--plugin-bpmnio-text-muted); 206 --table-foot-add-rule-hover-color: var(--plugin-bpmnio-text); 207 --table-head-border-color: var(--plugin-bpmnio-border); 208 --table-head-clause-color: var(--plugin-bpmnio-text-muted); 209 --table-head-separator-color: var(--plugin-bpmnio-border); 210 --table-head-variable-color: var(--plugin-bpmnio-text-muted); 211 --table-row-alternative-background-color: var(--plugin-bpmnio-surface-alt); 212 --edit-button-color: var(--plugin-bpmnio-text); 213 --edit-button-background-color: var(--plugin-bpmnio-surface); 214 --edit-button-border-color: var(--plugin-bpmnio-border); 215 --edit-button-box-shadow-color: var(--plugin-bpmnio-shadow); 216 --edit-button-disabled-color: #9aa5b1; 217} 218 219.dmn-decision-table-container tbody tr { 220 background-color: var(--view-drd-button-background-color); 221} 222 223.dmn-decision-table-container tbody tr:nth-child(2n) { 224 background-color: var(--table-row-alternative-background-color); 225} 226