bpmn-js.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. .bjs-container {
  2. --bjs-font-family: Arial, sans-serif;
  3. --color-grey-225-10-15: hsl(225, 10%, 15%);
  4. --color-grey-225-10-35: hsl(225, 10%, 35%);
  5. --color-grey-225-10-55: hsl(225, 10%, 55%);
  6. --color-grey-225-10-75: hsl(225, 10%, 75%);
  7. --color-grey-225-10-80: hsl(225, 10%, 80%);
  8. --color-grey-225-10-85: hsl(225, 10%, 85%);
  9. --color-grey-225-10-90: hsl(225, 10%, 90%);
  10. --color-grey-225-10-95: hsl(225, 10%, 95%);
  11. --color-grey-225-10-97: hsl(225, 10%, 97%);
  12. --color-blue-205-100-45: hsl(205, 100%, 45%);
  13. --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
  14. --color-blue-205-100-50: hsl(205, 100%, 50%);
  15. --color-blue-205-100-95: hsl(205, 100%, 95%);
  16. --color-green-150-86-44: hsl(150, 86%, 44%);
  17. --color-red-360-100-40: hsl(360, 100%, 40%);
  18. --color-red-360-100-45: hsl(360, 100%, 45%);
  19. --color-red-360-100-92: hsl(360, 100%, 92%);
  20. --color-red-360-100-97: hsl(360, 100%, 97%);
  21. --color-white: hsl(0, 0%, 100%);
  22. --color-black: hsl(0, 0%, 0%);
  23. --color-black-opacity-05: hsla(0, 0%, 0%, 5%);
  24. --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
  25. --breadcrumbs-font-family: var(--bjs-font-family);
  26. --breadcrumbs-item-color: var(--color-blue-205-100-50);
  27. --breadcrumbs-arrow-color: var(--color-black);
  28. --drilldown-fill-color: var(--color-white);
  29. --drilldown-background-color: var(--color-blue-205-100-50);
  30. }
  31. .bjs-breadcrumbs {
  32. position: absolute;
  33. display: none;
  34. flex-wrap: wrap;
  35. align-items: center;
  36. top: 30px;
  37. left: 30px;
  38. padding: 0px;
  39. margin: 0px;
  40. font-family: var(--breadcrumbs-font-family);
  41. font-size: 16px;
  42. line-height: normal;
  43. }
  44. .bjs-breadcrumbs-shown .bjs-breadcrumbs {
  45. display: flex;
  46. }
  47. .djs-palette-shown .bjs-breadcrumbs {
  48. left: 90px;
  49. }
  50. .djs-palette-shown.djs-palette-two-column .bjs-breadcrumbs {
  51. left: 140px;
  52. }
  53. .bjs-breadcrumbs li {
  54. display: inline-flex;
  55. padding-bottom: 5px;
  56. align-items: center;
  57. }
  58. .bjs-breadcrumbs li a {
  59. cursor: pointer;
  60. color: var(--breadcrumbs-item-color);
  61. }
  62. .bjs-breadcrumbs li:last-of-type a {
  63. color: inherit;
  64. cursor: default;
  65. }
  66. .bjs-breadcrumbs li:not(:first-child)::before {
  67. content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /><path d="M0 0h24v24H0z" fill="none" /></svg>');
  68. padding: 0 8px;
  69. color: var(--breadcrumbs-arrow-color);
  70. height: 1em;
  71. }
  72. .bjs-breadcrumbs .bjs-crumb {
  73. display: inline-block;
  74. max-width: 200px;
  75. overflow: hidden;
  76. text-overflow: ellipsis;
  77. white-space: nowrap;
  78. }
  79. .bjs-drilldown {
  80. width: 20px;
  81. height: 20px;
  82. padding: 0px;
  83. margin-left: -20px;
  84. cursor: pointer;
  85. border: none;
  86. border-radius: 2px;
  87. outline: none;
  88. fill: var(--drilldown-fill-color);
  89. background-color: var(--drilldown-background-color);
  90. }
  91. .bjs-drilldown-empty {
  92. display: none;
  93. }
  94. .selected .bjs-drilldown-empty {
  95. display: inherit;
  96. }
  97. [data-popup="align-elements"] .djs-popup-results {
  98. display: flex;
  99. }
  100. [data-popup="align-elements"] .djs-popup-body [data-group] + [data-group] {
  101. border-left: 1px solid var(--popup-border-color);
  102. }
  103. [data-popup="align-elements"] [data-group="align"] {
  104. display: grid;
  105. grid-template-columns: repeat(3, 1fr);
  106. }
  107. [data-popup="align-elements"] .djs-popup-body .entry {
  108. padding: 6px 8px;
  109. }
  110. [data-popup="align-elements"] .djs-popup-body .entry:not(:first-child) {
  111. margin-top: 0;
  112. }
  113. [data-popup="align-elements"] .djs-popup-entry-icon {
  114. display: block;
  115. margin: 0;
  116. height: 20px;
  117. width: 20px;
  118. }