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 margin: 16px 6px; 325 font-size: 16px; 326 white-space: nowrap; 327 overflow: hidden; 328 text-overflow: ellipsis; 329} 330 331.dmn-decision-table-container .input-cell .input-label, 332.dmn-decision-table-container .input-cell .output-label, 333.dmn-decision-table-container .input-cell .output-name { 334 display: block; 335} 336 337.dmn-decision-table-container thead .input-expression:empty::before { 338 content: 'Input'; 339 opacity: 0.5; 340} 341 342.dmn-decision-table-container thead .output-name:empty::before { 343 content: 'Output'; 344 opacity: 0.5; 345} 346 347.dmn-decision-table-container thead .input-variable, 348.dmn-decision-table-container thead .output-variable { 349 white-space: nowrap; 350 overflow: hidden; 351 text-overflow: ellipsis; 352 text-align: right; 353} 354 355.dmn-decision-table-container thead .input-cell .clause, 356.dmn-decision-table-container thead .output-cell .clause { 357 font-size: 12px; 358 text-align: left; 359 color: var(--table-head-clause-color); 360} 361 362.dmn-decision-table-container thead .input-cell .input-variable, 363.dmn-decision-table-container thead .output-cell .output-variable { 364 font-size: 12px; 365 color: var(--table-head-variable-color); 366} 367 368/* actionable icon */ 369 370.dmn-decision-table-container .action-icon { 371 border-radius: 2px; 372 box-shadow: 0 0 0 2px var(--decision-table-background-color); 373 color: var(--action-icon-color); 374} 375 376.dmn-decision-table-container .create-inputs .action-icon, 377.dmn-decision-table-container .add-input .action-icon, 378.dmn-decision-table-container .add-output .action-icon { 379 display: flex; 380 align-items: center; 381 justify-content: center; 382 width: 16px; 383 height: 16px; 384 margin: 0; 385 border-radius: 50%; 386 color: var(--add-column-icon-color); 387 background-color: var(--add-column-icon-background-color); 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 outline: none; 428} 429 430.dmn-decision-table-container .view-drd .view-drd-button:hover { 431 background: var(--view-drd-button-hover-background-color); 432} 433 434/* end view drd */ 435 436/* powered by */ 437.dmn-js-parent { 438 /* required to apply position: fixed correctly */ 439 transform: translate(0); 440} 441 442.dmn-decision-table-container .powered-by { 443 position: fixed; 444 bottom: 10px; 445 right: 10px; 446 z-index: 9999; 447 display: flex; 448 align-items: center; 449 flex-direction: row-reverse; 450 margin: 10px; 451 background-color: var(--color-white); 452} 453 454.dmn-decision-table-container .powered-by-overlay { 455 position: fixed; 456 top: 0; 457 right: 0; 458 bottom: 0; 459 left: 0; 460 background: var(--powered-by-overlay-background-color); 461 display: flex; 462 justify-content: center; 463 align-items: center; 464 z-index: 10000; 465} 466 467.dmn-decision-table-container .powered-by-overlay .powered-by-overlay-content { 468 display: flex; 469 flex-direction: row; 470 align-items: center; 471 padding: 10px; 472 max-width: 260px; 473 background: var(--powered-by-overlay-content-background-color); 474 color: var(--powered-by-overlay-content-color); 475 border: solid 1px var(--powered-by-overlay-content-border-color); 476 border-radius: 2px; 477 font-size: 14px; 478} 479 480.dmn-decision-table-container .powered-by-overlay .powered-by-overlay-content .logo { 481 margin: 15px 20px 15px 10px; 482} 483 484/* end powered by */ 485 486/* simple mode */ 487 488.dmn-decision-table-container .simple-mode-button { 489 color: var(--simple-mode-button-color); 490 background-color: var(--simple-mode-button-background-color); 491 position: absolute; 492 padding: 4px; 493 border-radius: 2px; 494 border: solid 1px var(--simple-mode-button-border-color); 495 cursor: pointer; 496 font-size: 14px; 497 z-index: 5; 498 opacity: 0.8; 499 box-shadow: 1px 1px 1px 1px var(--simple-mode-button-box-shadow-color); 500} 501 502.dmn-decision-table-container .simple-mode-button:hover { 503 opacity: 1; 504} 505 506.dmn-decision-table-container .simple-mode-button.disabled, 507.dmn-decision-table-container .simple-mode-button.disabled:hover { 508 color: var(--simple-mode-button-disabled-olor); 509} 510 511.dmn-decision-table-container .dms-input-duration-edit-row { 512 align-items: flex-start; 513} 514 515/* end simple mode */ 516 517/* badges */ 518 519.dms-badge { 520 border-radius: 2px; 521 padding: 3px 6px; 522 font-size: 0.8em; 523 height: 19px; 524} 525 526.dms-badge-icon + .dms-badge-label { 527 margin-left: 3px; 528} 529 530.dms-badge.dmn-expression-language { 531 background: var(--dmn-expression-language-background-color); 532 color: var(--dmn-expression-language-color); 533} 534 535.dms-badge + .dms-badge { 536 margin-left: 3px; 537} 538 539.dmn-decision-table-container .dmn-expression-language .dms-badge-label { 540 display: none; 541} 542 543.dmn-decision-table-container .input-cell:hover .dmn-expression-language .dms-badge-label, 544.dmn-decision-table-container .output-cell:hover .dmn-expression-language .dms-badge-label { 545 display: inline-block; 546} 547 548.dmn-decision-table-container .input-editor .dmn-expression-language { 549 margin-top: 4px; 550 display: inline-block; 551} 552 553.dmn-decision-table-container .cell .dms-badge.dmn-expression-language { 554 z-index: -1; 555} 556 557.dmn-decision-table-container .cell:hover .dms-badge.dmn-expression-language { 558 background: var(--dmn-expression-language-hover-background-color); 559 z-index: 1; 560} 561 562/* cell expression language */ 563 564.dmn-decision-table-container .cell .dmn-expression-language { 565 display: flex; 566 align-items: center; 567 position: absolute; 568 top: 2px; 569 right: 2px; 570 pointer-events: none; 571} 572 573/* end cell expression language */ 574 575/* drag and drop */ 576 577.dmn-decision-table-container .dragover::before { 578 content: ''; 579 display: block; 580 position: absolute; 581 background-color: var(--drag-and-drop-drop-marker-color); 582 z-index: 2; 583 pointer-events: none; 584} 585 586.dmn-decision-table-container .dragover.top::before { 587 left: 0; 588 right: 0; 589 height: 5px; 590 top: 0; 591} 592 593.dmn-decision-table-container .dragover.right::before { 594 top: 0; 595 bottom: 0; 596 width: 5px; 597 right: 0; 598} 599 600.dmn-decision-table-container .dragover.bottom::before { 601 left: 0; 602 right: 0; 603 height: 5px; 604 bottom: 0; 605} 606 607.dmn-decision-table-container .dragover.left::before { 608 top: 0; 609 bottom: 0; 610 width: 5px; 611 left: 0; 612} 613 614.dmn-decision-table-container .dragged { 615 color: var(--drag-and-drop-drag-color); 616} 617 618/* cell description */ 619 620.dmn-decision-table-container .description-indicator { 621 position: absolute; 622 top: 0; 623 right: -4px; 624 border-left: 4px solid transparent; 625 border-right: 4px solid transparent; 626 border-bottom: 4px solid var(--color-black); 627 transform: rotate(45deg); 628 transform-origin: top; 629} 630 631/* end cell description */ 632