1.dmn-decision-table-container { 2 --action-icon-color: var(--color-blue-205-100-50); 3 --action-icon-background-color: transparent; 4 --action-icon-hover-background-color: var(--color-blue-205-100-45); 5 --action-icon-hover-color: var(--color-white); 6 --add-column-icon-color: var(--color-white); 7 --add-column-icon-background-color: var(--color-grey-225-10-35); 8 --decision-table-color: var(--color-grey-225-10-15); 9 --decision-table-background-color: var(--color-white); 10 --decision-table-properties-color: var(--color-grey-225-10-15); 11 --dmn-expression-language-background-color: var(--color-blue-205-100-45-opacity-30); 12 --dmn-expression-language-color: var(--color-white); 13 --dmn-expression-language-hover-background-color: var(--color-blue-205-100-50); 14 --drag-and-drop-drag-color: var(--color-grey-225-10-55); 15 --drag-and-drop-drop-marker-color: var(--color-grey-225-10-35); 16 --hit-policy-explanation-color: var(--color-grey-225-10-35); 17 --powered-by-overlay-background-color: var(--color-black-opacity-20); 18 --powered-by-overlay-content-background-color: var(--color-white); 19 --powered-by-overlay-content-color: var(--color-grey-225-10-15); 20 --powered-by-overlay-content-border-color: var(--color-grey-225-10-75); 21 --simple-mode-button-color: var(--color-grey-225-10-15); 22 --simple-mode-button-background-color: var(--color-grey-225-10-97); 23 --simple-mode-button-border-color: var(--color-grey-225-10-75); 24 --simple-mode-button-box-shadow-color: var(--color-black-opacity-10); 25 --simple-mode-button-disabled-color: var(--color-grey-225-10-75); 26 --table-cell-color: var(--color-grey-225-10-15); 27 --table-cell-border-color: var(--color-grey-225-10-15); 28 --table-cell-selected-outline-color: var(--color-blue-205-100-45); 29 --table-foot-add-rule-border-color: var(--color-grey-225-10-75); 30 --table-foot-add-rule-color: var(--color-grey-225-10-75); 31 --table-foot-add-rule-hover-border-color: var(--color-grey-225-10-15); 32 --table-foot-add-rule-hover-color: var(--color-grey-225-10-15); 33 --table-head-border-color: var(--color-grey-225-10-15); 34 --table-head-clause-color: var(--color-grey-225-10-35); 35 --table-head-separator-color: var(--color-grey-225-10-75); 36 --table-head-variable-color: var(--color-grey-225-10-35); 37 --table-row-alternative-background-color: var(--color-grey-225-10-97); 38 --view-drd-button-background-color: var(--color-white); 39 --view-drd-button-border-color: var(--color-grey-225-10-75); 40 --view-drd-button-color: var(--color-grey-225-10-15); 41 --view-drd-button-hover-background-color: var(--color-grey-225-10-97); 42 --decision-table-font-family: 'Arial', sans-serif; 43 44 width: 100%; 45 height: 100%; 46 overflow: hidden; 47 position: relative; 48 font-family: var(--decision-table-font-family); 49 font-size: 14px; 50 color: var(--table-color); 51 max-height: 100%; 52} 53 54/* basic styles */ 55 56.dmn-decision-table-container * { 57 box-sizing: border-box; 58} 59 60.dmn-decision-table-container .tjs-container { 61 display: flex; 62 flex-direction: column; 63 width: min-content; 64 max-width: 100%; 65 height: 100%; 66} 67 68/* end basic styles */ 69 70/* basic table styles */ 71 72.dmn-decision-table-container .tjs-table-container { 73 overflow: auto; 74 border: solid 1px var(--table-cell-border-color); 75 border-top: none; 76} 77 78.dmn-decision-table-container .tjs-table { 79 max-width: 100%; 80 max-height: 100%; 81 position: relative; 82 width: 100%; /* Fallback for legacy Edge */ 83 width: min-content; 84 table-layout: fixed; 85 border-collapse: separate; 86 border-spacing: 0; 87} 88 89.dmn-decision-table-container th, 90.dmn-decision-table-container td { 91 position: relative; 92 white-space: pre-wrap; 93 overflow-wrap: break-word; 94 background-clip: padding-box; 95} 96 97.dmn-decision-table-container thead th { 98 text-align: center; 99 width: 192px; 100 font-weight: normal; 101 position: sticky; 102 top: 0; 103 z-index: 1; 104 background-color: var(--decision-table-background-color); 105 border-bottom: 3px double var(--table-head-border-color); 106} 107 108.dmn-decision-table-container thead th.output-editor { 109 z-index: 2; 110} 111 112.dmn-decision-table-container thead th.create-inputs, 113.dmn-decision-table-container thead th.input-editor { 114 z-index: 3; 115} 116 117.dmn-decision-table-container tbody td { 118 border-top: solid 1px var(--table-cell-border-color); 119} 120 121.dmn-decision-table-container th.input-cell, 122.dmn-decision-table-container td.input-cell, 123.dmn-decision-table-container th.output-cell, 124.dmn-decision-table-container td.output-cell, 125.dmn-decision-table-container th.annotation, 126.dmn-decision-table-container td.annotation { 127 color: var(--table-cell-color); 128} 129 130.dmn-decision-table-container th.input-cell + th.output-cell, 131.dmn-decision-table-container td.input-cell + td.output-cell { 132 border-left: 3px double var(--table-cell-border-color); 133} 134 135.dmn-decision-table-container th:not(:first-child), 136.dmn-decision-table-container td:not(:first-child) { 137 padding: 4px; 138 border-left: solid 1px var(--table-cell-border-color); 139} 140 141.dmn-decision-table-container thead { 142 background-color: var(--decision-table-background-color); 143} 144 145.dmn-decision-table-container thead th:first-child { 146 left: 0; 147 z-index: 4; 148} 149 150.dmn-decision-table-container tfoot td:first-child { 151 border-right: solid 1px var(--table-foot-add-rule-border-color); 152} 153 154.dmn-decision-table-container tbody td:first-child, 155.dmn-decision-table-container tfoot td:first-child { 156 position: sticky; 157 left: 0; 158 background-color: var(--decision-table-background-color); 159 z-index: 1; 160} 161 162.dmn-decision-table-container tbody:empty { 163 display: none; 164} 165 166.dmn-decision-table-container thead th:first-child, 167.dmn-decision-table-container tbody td:first-child { 168 border-right: solid 1px var(--table-cell-border-color); 169} 170 171.dmn-decision-table-container thead th:nth-child(2), 172.dmn-decision-table-container tbody td:nth-child(2), 173.dmn-decision-table-container tfoot td:nth-child(2) { 174 border-left: none; 175} 176 177.dmn-decision-table-container tbody tr:last-child td { 178 border-bottom: solid 1px var(--table-cell-border-color); 179} 180 181.dmn-decision-table-container tbody tr:first-child td { 182 border-top: none; 183} 184 185.dmn-decision-table-container th.index-column { 186 width: 56px; 187} 188 189.dmn-decision-table-container td.rule-index { 190 text-align: right; 191 padding-right: 8px; 192} 193 194.dmn-decision-table-container tbody tr:nth-child(2n) { 195 background-color: var(--table-row-alternative-background-color); 196} 197 198.dmn-decision-table-container td.input-cell.add-rule, 199.dmn-decision-table-container td.input-cell:not(.focussed).empty { 200 text-align: center; 201} 202 203/* end basic table styles */ 204 205/* selection styles */ 206 207.dmn-decision-table-container h3, 208.dmn-decision-table-container h5 { 209 position: relative; 210} 211 212.dmn-decision-table-container .selected { 213 outline: var(--table-cell-selected-outline-color); 214 outline-offset: -1px; 215} 216 217.dmn-decision-table-container th.selected:not(.focussed) { 218 background: var(--selected-not-focused-border-color); 219} 220 221/* end selection styles */ 222 223/* footer styles */ 224 225.dmn-decision-table-container tfoot td.input-cell + td.output-cell { 226 border-left: 3px double var(--table-foot-add-rule-border-color); 227} 228 229.dmn-decision-table-container tfoot.add-rule td.add-rule-add { 230 text-align: right; 231 padding-right: 4px; 232} 233 234.dmn-decision-table-container tfoot.add-rule tr td { 235 border-color: var(--table-foot-add-rule-border-color); 236 color: var(--table-foot-add-rule-color); 237} 238 239.dmn-decision-table-container tfoot.add-rule:hover td.input-cell + td.output-cell { 240 border-left-color: var(--table-cell-border-color); 241} 242 243.dmn-decision-table-container tfoot.add-rule:hover td { 244 border-color: var(--table-foot-add-rule-hover-border-color); 245 color: var(--table-foot-add-rule-hover-color); 246} 247 248/* end footer styles */ 249 250/* content editable styles */ 251 252.dmn-decision-table-container [contenteditable], 253.dmn-decision-table-container [tabindex] { 254 outline: none; 255} 256 257/* end content editable styles */ 258 259/* decision table header */ 260.dmn-decision-table-container .decision-table-header { 261 text-align: left; 262 padding: 10px; 263} 264 265.dmn-decision-table-container .decision-table-header * { 266 vertical-align: middle; 267} 268 269/* decision table properties */ 270.dmn-decision-table-container .decision-table-properties { 271 display: flex; 272 color: var(--decision-table-properties-color); 273 border: 1px solid var(--table-cell-border-color); 274 background-color: var(--decision-table-background-color); 275 padding: 10px; 276 align-items: center; 277} 278 279.dmn-decision-table-container .decision-table-name { 280 position: relative; 281 display: block; 282 flex-grow: 1; 283 margin: 0; 284 width: 0; 285 min-width: 100px; 286 max-width: min-content; 287 font-size: 21px; 288 font-weight: normal; 289} 290 291.dmn-decision-table-container .decision-table-name:not(.editable), 292.dmn-decision-table-container .decision-table-name .content-editable { 293 text-overflow: ellipsis; 294 white-space: nowrap; 295 overflow: hidden; 296} 297 298.dmn-decision-table-container .decision-table-name.focussed .content-editable { 299 text-overflow: unset; 300} 301 302.dmn-decision-table-container .decision-table-header-separator { 303 display: block; 304 height: 32px; 305 border-left: 2px solid var(--table-head-separator-color); 306 margin: 0 10px; 307} 308 309.dmn-decision-table-container .hit-policy { 310 display: block; 311} 312 313.dmn-decision-table-container .hit-policy-explanation { 314 margin-left: 5px; 315 color: var(--hit-policy-explanation-color); 316} 317 318/* end decision table properties */ 319 320.dmn-decision-table-container thead .input-label, 321.dmn-decision-table-container thead .input-expression, 322.dmn-decision-table-container thead .output-label, 323.dmn-decision-table-container thead .output-name { 324 display: -webkit-box; 325 margin: 16px 6px; 326 font-size: 16px; 327 overflow: hidden; 328 text-overflow: ellipsis; 329 -webkit-line-clamp: 3; 330 -webkit-box-orient: vertical; 331} 332 333.dmn-decision-table-container thead .input-expression:empty::before { 334 content: 'Input'; 335 opacity: 0.5; 336} 337 338.dmn-decision-table-container thead .output-name:empty::before { 339 content: 'Output'; 340 opacity: 0.5; 341} 342 343.dmn-decision-table-container thead .input-variable, 344.dmn-decision-table-container thead .output-variable { 345 white-space: nowrap; 346 overflow: hidden; 347 text-overflow: ellipsis; 348 text-align: right; 349} 350 351.dmn-decision-table-container thead .input-cell .clause, 352.dmn-decision-table-container thead .output-cell .clause { 353 font-size: 12px; 354 text-align: left; 355 color: var(--table-head-clause-color); 356} 357 358.dmn-decision-table-container thead .input-cell .input-variable, 359.dmn-decision-table-container thead .output-cell .output-variable { 360 font-size: 12px; 361 color: var(--table-head-variable-color); 362} 363 364/* actionable icon */ 365 366.dmn-decision-table-container .action-icon { 367 border: none; 368 border-radius: 2px; 369 box-shadow: 0 0 0 2px var(--decision-table-background-color); 370 color: var(--action-icon-color); 371 background-color: var(--action-icon-background-color); 372 padding: 0; 373} 374 375.dmn-decision-table-container .create-inputs .action-icon, 376.dmn-decision-table-container .add-input .action-icon, 377.dmn-decision-table-container .add-output .action-icon { 378 display: flex; 379 align-items: center; 380 justify-content: center; 381 width: 16px; 382 height: 16px; 383 margin: 0; 384 border-radius: 50%; 385 color: var(--add-column-icon-color); 386 background-color: var(--add-column-icon-background-color); 387 outline-offset: 4px; 388} 389 390.dmn-decision-table-container .actionable:hover .action-icon { 391 background-color: var(--action-icon-hover-background-color); 392 color: var(--action-icon-hover-color); 393} 394 395.dmn-decision-table-container .action-icon::before { 396 margin-left: 0.1em; 397 margin-right: 0.1em; 398} 399 400.dmn-decision-table-container .add-input, 401.dmn-decision-table-container .add-output { 402 position: absolute; 403 top: 50%; 404 right: -1px; 405 transform: translate(50%, -50%); 406 z-index: 2; 407 border-radius: 100%; 408 padding: 6px; 409} 410 411/* end actionable icon */ 412 413/* view drd */ 414.dmn-decision-table-container .view-drd { 415 margin-bottom: 10px; 416} 417 418.dmn-decision-table-container .view-drd .view-drd-button { 419 background: var(--view-drd-button-background-color); 420 padding: 8px; 421 border: solid 1px var(--view-drd-button-border-color); 422 border-radius: 2px; 423 font-size: 14px; 424 color: var(--view-drd-button-color); 425 font-weight: bold; 426 cursor: pointer; 427} 428 429.dmn-decision-table-container .view-drd .view-drd-button:hover { 430 background: var(--view-drd-button-hover-background-color); 431} 432 433/* end view drd */ 434 435/* simple mode */ 436 437.dmn-decision-table-container .simple-mode-button { 438 color: var(--simple-mode-button-color); 439 background-color: var(--simple-mode-button-background-color); 440 position: absolute; 441 padding: 4px; 442 border-radius: 2px; 443 border: solid 1px var(--simple-mode-button-border-color); 444 cursor: pointer; 445 font-size: 14px; 446 z-index: 5; 447 opacity: 0.8; 448 box-shadow: 1px 1px 1px 1px var(--simple-mode-button-box-shadow-color); 449} 450 451.dmn-decision-table-container .simple-mode-button:hover { 452 opacity: 1; 453} 454 455.dmn-decision-table-container .simple-mode-button.disabled, 456.dmn-decision-table-container .simple-mode-button.disabled:hover { 457 color: var(--simple-mode-button-disabled-olor); 458} 459 460.dmn-decision-table-container .dms-input-duration-edit-row { 461 align-items: flex-start; 462} 463 464/* end simple mode */ 465 466/* badges */ 467 468.dms-badge { 469 border-radius: 2px; 470 padding: 3px 6px; 471 font-size: 0.8em; 472 height: 19px; 473} 474 475.dms-badge-icon + .dms-badge-label { 476 margin-left: 3px; 477} 478 479.dms-badge.dmn-expression-language { 480 background: var(--dmn-expression-language-background-color); 481 color: var(--dmn-expression-language-color); 482} 483 484.dms-badge + .dms-badge { 485 margin-left: 3px; 486} 487 488.dmn-decision-table-container .dmn-expression-language .dms-badge-label { 489 display: none; 490} 491 492.dmn-decision-table-container .input-cell:hover .dmn-expression-language .dms-badge-label, 493.dmn-decision-table-container .output-cell:hover .dmn-expression-language .dms-badge-label { 494 display: inline-block; 495} 496 497.dmn-decision-table-container .input-editor .dmn-expression-language { 498 margin-top: 4px; 499 display: inline-block; 500} 501 502.dmn-decision-table-container .cell .dms-badge.dmn-expression-language { 503 z-index: -1; 504} 505 506.dmn-decision-table-container .cell:hover .dms-badge.dmn-expression-language { 507 background: var(--dmn-expression-language-hover-background-color); 508 z-index: 1; 509} 510 511/* cell expression language */ 512 513.dmn-decision-table-container .cell .dmn-expression-language { 514 display: flex; 515 align-items: center; 516 position: absolute; 517 top: 2px; 518 right: 2px; 519 pointer-events: none; 520} 521 522/* end cell expression language */ 523 524/* drag and drop */ 525 526.dmn-decision-table-container .dragover::before { 527 content: ''; 528 display: block; 529 position: absolute; 530 background-color: var(--drag-and-drop-drop-marker-color); 531 z-index: 2; 532 pointer-events: none; 533} 534 535.dmn-decision-table-container .dragover.top::before { 536 left: 0; 537 right: 0; 538 height: 5px; 539 top: 0; 540} 541 542.dmn-decision-table-container .dragover.right::before { 543 top: 0; 544 bottom: 0; 545 width: 5px; 546 right: 0; 547} 548 549.dmn-decision-table-container .dragover.bottom::before { 550 left: 0; 551 right: 0; 552 height: 5px; 553 bottom: 0; 554} 555 556.dmn-decision-table-container .dragover.left::before { 557 top: 0; 558 bottom: 0; 559 width: 5px; 560 left: 0; 561} 562 563.dmn-decision-table-container .dragged { 564 color: var(--drag-and-drop-drag-color); 565} 566 567/* cell description */ 568 569.dmn-decision-table-container .description-indicator { 570 position: absolute; 571 top: 0; 572 right: -4px; 573 border-left: 4px solid transparent; 574 border-right: 4px solid transparent; 575 border-bottom: 4px solid var(--color-black); 576 transform: rotate(45deg); 577 transform-origin: top; 578} 579 580/* end cell description */ 581