1.dmn-decision-table-container { 2 --action-icon-color: var(--color-blue-205-100-50); 3 --action-icon-hover-background-color: var(--color-blue-205-100-45); 4 --action-icon-hover-color: var(--color-white); 5 --add-column-icon-color: var(--color-white); 6 --add-column-icon-background-color: var(--color-grey-225-10-35); 7 --decision-table-color: var(--color-grey-225-10-15); 8 --decision-table-background-color: var(--color-white); 9 --decision-table-properties-color: var(--color-grey-225-10-15); 10 --dmn-expression-language-background-color: var(--color-blue-205-100-45-opacity-30); 11 --dmn-expression-language-color: var(--color-white); 12 --dmn-expression-language-hover-background-color: var(--color-blue-205-100-50); 13 --drag-and-drop-drag-color: var(--color-grey-225-10-55); 14 --drag-and-drop-drop-marker-color: var(--color-grey-225-10-35); 15 --hit-policy-explanation-color: var(--color-grey-225-10-35); 16 --powered-by-overlay-background-color: var(--color-black-opacity-20); 17 --powered-by-overlay-content-background-color: var(--color-white); 18 --powered-by-overlay-content-color: var(--color-grey-225-10-15); 19 --powered-by-overlay-content-border-color: var(--color-grey-225-10-75); 20 --simple-mode-button-color: var(--color-grey-225-10-15); 21 --simple-mode-button-background-color: var(--color-grey-225-10-97); 22 --simple-mode-button-border-color: var(--color-grey-225-10-75); 23 --simple-mode-button-box-shadow-color: var(--color-black-opacity-10); 24 --simple-mode-button-disabled-color: var(--color-grey-225-10-75); 25 --table-cell-color: var(--color-grey-225-10-15); 26 --table-cell-border-color: var(--color-grey-225-10-15); 27 --table-cell-selected-outline-color: var(--color-blue-205-100-45); 28 --table-foot-add-rule-border-color: var(--color-grey-225-10-75); 29 --table-foot-add-rule-color: var(--color-grey-225-10-75); 30 --table-foot-add-rule-hover-border-color: var(--color-grey-225-10-15); 31 --table-foot-add-rule-hover-color: var(--color-grey-225-10-15); 32 --table-head-border-color: var(--color-grey-225-10-15); 33 --table-head-clause-color: var(--color-grey-225-10-35); 34 --table-head-separator-color: var(--color-grey-225-10-75); 35 --table-head-variable-color: var(--color-grey-225-10-35); 36 --table-row-alternative-background-color: var(--color-grey-225-10-97); 37 --view-drd-button-background-color: var(--color-white); 38 --view-drd-button-border-color: var(--color-grey-225-10-75); 39 --view-drd-button-color: var(--color-grey-225-10-15); 40 --view-drd-button-hover-background-color: var(--color-grey-225-10-97); 41 --decision-table-font-family: 'Arial', sans-serif; 42 43 width: 100%; 44 height: 100%; 45 overflow: hidden; 46 position: relative; 47 font-family: var(--decision-table-font-family); 48 font-size: 14px; 49 color: var(--table-color); 50 max-height: 100%; 51} 52 53/* basic styles */ 54 55.dmn-decision-table-container * { 56 box-sizing: border-box; 57} 58 59.dmn-decision-table-container .tjs-container { 60 display: flex; 61 flex-direction: column; 62 position: relative; 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-radius: 2px; 368 box-shadow: 0 0 0 2px var(--decision-table-background-color); 369 color: var(--action-icon-color); 370} 371 372.dmn-decision-table-container .create-inputs .action-icon, 373.dmn-decision-table-container .add-input .action-icon, 374.dmn-decision-table-container .add-output .action-icon { 375 display: flex; 376 align-items: center; 377 justify-content: center; 378 width: 16px; 379 height: 16px; 380 margin: 0; 381 border-radius: 50%; 382 color: var(--add-column-icon-color); 383 background-color: var(--add-column-icon-background-color); 384} 385 386.dmn-decision-table-container .actionable:hover .action-icon { 387 background-color: var(--action-icon-hover-background-color); 388 color: var(--action-icon-hover-color); 389} 390 391.dmn-decision-table-container .action-icon::before { 392 margin-left: 0.1em; 393 margin-right: 0.1em; 394} 395 396.dmn-decision-table-container .add-input, 397.dmn-decision-table-container .add-output { 398 position: absolute; 399 top: 50%; 400 right: -1px; 401 transform: translate(50%, -50%); 402 z-index: 2; 403 border-radius: 100%; 404 padding: 6px; 405} 406 407/* end actionable icon */ 408 409/* view drd */ 410.dmn-decision-table-container .view-drd { 411 margin-bottom: 10px; 412} 413 414.dmn-decision-table-container .view-drd .view-drd-button { 415 background: var(--view-drd-button-background-color); 416 padding: 8px; 417 border: solid 1px var(--view-drd-button-border-color); 418 border-radius: 2px; 419 font-size: 14px; 420 color: var(--view-drd-button-color); 421 font-weight: bold; 422 cursor: pointer; 423 outline: none; 424} 425 426.dmn-decision-table-container .view-drd .view-drd-button:hover { 427 background: var(--view-drd-button-hover-background-color); 428} 429 430/* end view drd */ 431 432/* powered by */ 433.dmn-js-parent { 434 /* required to apply position: fixed correctly */ 435 transform: translate(0); 436} 437 438.dmn-decision-table-container .powered-by { 439 position: fixed; 440 bottom: 10px; 441 right: 10px; 442 z-index: 9999; 443 display: flex; 444 align-items: center; 445 flex-direction: row-reverse; 446 margin: 10px; 447 background-color: var(--color-white); 448} 449 450.dmn-decision-table-container .powered-by-overlay { 451 position: fixed; 452 top: 0; 453 right: 0; 454 bottom: 0; 455 left: 0; 456 background: var(--powered-by-overlay-background-color); 457 display: flex; 458 justify-content: center; 459 align-items: center; 460 z-index: 10000; 461} 462 463.dmn-decision-table-container .powered-by-overlay .powered-by-overlay-content { 464 display: flex; 465 flex-direction: row; 466 align-items: center; 467 padding: 10px; 468 max-width: 260px; 469 background: var(--powered-by-overlay-content-background-color); 470 color: var(--powered-by-overlay-content-color); 471 border: solid 1px var(--powered-by-overlay-content-border-color); 472 border-radius: 2px; 473 font-size: 14px; 474} 475 476.dmn-decision-table-container .powered-by-overlay .powered-by-overlay-content .logo { 477 margin: 15px 20px 15px 10px; 478} 479 480/* end powered by */ 481 482/* simple mode */ 483 484.dmn-decision-table-container .simple-mode-button { 485 color: var(--simple-mode-button-color); 486 background-color: var(--simple-mode-button-background-color); 487 position: absolute; 488 padding: 4px; 489 border-radius: 2px; 490 border: solid 1px var(--simple-mode-button-border-color); 491 cursor: pointer; 492 font-size: 14px; 493 z-index: 5; 494 opacity: 0.8; 495 box-shadow: 1px 1px 1px 1px var(--simple-mode-button-box-shadow-color); 496} 497 498.dmn-decision-table-container .simple-mode-button:hover { 499 opacity: 1; 500} 501 502.dmn-decision-table-container .simple-mode-button.disabled, 503.dmn-decision-table-container .simple-mode-button.disabled:hover { 504 color: var(--simple-mode-button-disabled-olor); 505} 506 507.dmn-decision-table-container .dms-input-duration-edit-row { 508 align-items: flex-start; 509} 510 511/* end simple mode */ 512 513/* badges */ 514 515.dms-badge { 516 border-radius: 2px; 517 padding: 3px 6px; 518 font-size: 0.8em; 519 height: 19px; 520} 521 522.dms-badge-icon + .dms-badge-label { 523 margin-left: 3px; 524} 525 526.dms-badge.dmn-expression-language { 527 background: var(--dmn-expression-language-background-color); 528 color: var(--dmn-expression-language-color); 529} 530 531.dms-badge + .dms-badge { 532 margin-left: 3px; 533} 534 535.dmn-decision-table-container .dmn-expression-language .dms-badge-label { 536 display: none; 537} 538 539.dmn-decision-table-container .input-cell:hover .dmn-expression-language .dms-badge-label, 540.dmn-decision-table-container .output-cell:hover .dmn-expression-language .dms-badge-label { 541 display: inline-block; 542} 543 544.dmn-decision-table-container .input-editor .dmn-expression-language { 545 margin-top: 4px; 546 display: inline-block; 547} 548 549.dmn-decision-table-container .cell .dms-badge.dmn-expression-language { 550 z-index: -1; 551} 552 553.dmn-decision-table-container .cell:hover .dms-badge.dmn-expression-language { 554 background: var(--dmn-expression-language-hover-background-color); 555 z-index: 1; 556} 557 558/* cell expression language */ 559 560.dmn-decision-table-container .cell .dmn-expression-language { 561 display: flex; 562 align-items: center; 563 position: absolute; 564 top: 2px; 565 right: 2px; 566 pointer-events: none; 567} 568 569/* end cell expression language */ 570 571/* drag and drop */ 572 573.dmn-decision-table-container .dragover::before { 574 content: ''; 575 display: block; 576 position: absolute; 577 background-color: var(--drag-and-drop-drop-marker-color); 578 z-index: 2; 579 pointer-events: none; 580} 581 582.dmn-decision-table-container .dragover.top::before { 583 left: 0; 584 right: 0; 585 height: 5px; 586 top: 0; 587} 588 589.dmn-decision-table-container .dragover.right::before { 590 top: 0; 591 bottom: 0; 592 width: 5px; 593 right: 0; 594} 595 596.dmn-decision-table-container .dragover.bottom::before { 597 left: 0; 598 right: 0; 599 height: 5px; 600 bottom: 0; 601} 602 603.dmn-decision-table-container .dragover.left::before { 604 top: 0; 605 bottom: 0; 606 width: 5px; 607 left: 0; 608} 609 610.dmn-decision-table-container .dragged { 611 color: var(--drag-and-drop-drag-color); 612} 613 614/* cell description */ 615 616.dmn-decision-table-container .description-indicator { 617 position: absolute; 618 top: 0; 619 right: -4px; 620 border-left: 4px solid transparent; 621 border-right: 4px solid transparent; 622 border-bottom: 4px solid var(--color-black); 623 transform: rotate(45deg); 624 transform-origin: top; 625} 626 627/* end cell description */ 628