graph.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. /*!
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. svg {
  20. overflow: hidden;
  21. }
  22. .node rect {
  23. stroke: #51504f;
  24. stroke-width: 1px;
  25. fill: #fff;
  26. transition: stroke 0.2s ease-in-out, opacity 0.2s ease-in-out;
  27. }
  28. .node rect[data-highlight="highlight"] {
  29. stroke: #017cee !important;
  30. }
  31. .edgeLabel {
  32. transition: opacity 0.2s ease-in-out;
  33. }
  34. .edgeLabel > .label {
  35. font-weight: normal;
  36. font-size: 10px;
  37. }
  38. .edgeLabel text {
  39. transform: translate(16px, 0);
  40. }
  41. .edgeLabel rect {
  42. fill: #fff;
  43. }
  44. .edgePath {
  45. stroke: #51504f;
  46. stroke-width: 1px;
  47. fill: none;
  48. transition: stroke 0.2s ease-in-out, opacity 0.2s ease-in-out;
  49. }
  50. .edgePath[data-highlight="fade"],
  51. .edgePaths[data-highlight="fade"] > .edgePath,
  52. .edgeLabel[data-highlight="fade"] {
  53. opacity: 0.2 !important;
  54. }
  55. .edgePath[data-highlight="highlight"] {
  56. stroke: #017cee;
  57. }
  58. .edgePath .arrowhead {
  59. stroke: none !important;
  60. fill: #51504f;
  61. stroke-width: 0 !important;
  62. transition: fill 0.2s ease-in-out, opacity 0.2s ease-in-out;
  63. }
  64. .edgePath[data-highlight="highlight"] .arrowhead {
  65. stroke: #017cee;
  66. fill: #017cee;
  67. }
  68. .not-allowed rect,
  69. .not-allowed text {
  70. cursor: not-allowed !important;
  71. }
  72. g.cluster rect {
  73. stroke: #fff;
  74. stroke-dasharray: 5;
  75. rx: 5;
  76. ry: 5;
  77. opacity: 0.5;
  78. }
  79. g.node {
  80. transition: opacity 0.2s ease-in-out;
  81. }
  82. g.node[data-highlight="fade"] {
  83. opacity: 0.2 !important;
  84. }
  85. g.node rect {
  86. stroke: #fff;
  87. stroke-width: 1.5px;
  88. cursor: pointer;
  89. }
  90. g.node circle {
  91. stroke: #51504f;
  92. stroke-width: 1.5px;
  93. cursor: pointer;
  94. }
  95. g.node .label {
  96. font-size: 0.7em;
  97. font-weight: normal;
  98. pointer-events: none;
  99. }
  100. g.node text {
  101. cursor: pointer;
  102. }
  103. .svg-wrapper {
  104. border-radius: 4px;
  105. background-color: #f0f0f0;
  106. cursor: move;
  107. overflow: hidden;
  108. height: 100%;
  109. width: 100%;
  110. }
  111. #graph-svg {
  112. overflow: visible;
  113. }
  114. .refresh-actions {
  115. justify-content: flex-end;
  116. min-width: 225px;
  117. display: inline-flex;
  118. align-items: center;
  119. right: 20px;
  120. margin-top: 10px;
  121. margin-bottom: 15px;
  122. position: absolute;
  123. background-color: #f0f0f0ee; /* the last two chars apply an opacity to the background color */
  124. }
  125. .legend-item.dag {
  126. float: left;
  127. background-color: #e8f7e4;
  128. }
  129. .legend-item.trigger {
  130. float: left;
  131. background-color: #ffefeb;
  132. }
  133. .legend-item.sensor {
  134. float: left;
  135. background-color: #e6f1f2;
  136. }
  137. .legend-item.dataset {
  138. float: left;
  139. background-color: #fcecd4;
  140. }
  141. .legend-item.dataset-alias {
  142. float: left;
  143. background-color: #e8cfe4;
  144. }
  145. g.node.dag rect {
  146. fill: #e8f7e4;
  147. }
  148. g.node.trigger rect {
  149. fill: #ffefeb;
  150. }
  151. g.node.sensor rect {
  152. fill: #e6f1f2;
  153. }
  154. g.node.dataset rect {
  155. fill: #fcecd4;
  156. }
  157. g.node.dataset-alias rect {
  158. fill: #e8cfe4;
  159. }