dx-diagram.css 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425
  1. /*!
  2. * DevExpress Diagram (dx-diagram)
  3. * Version: 0.0.30
  4. * Build date: Tue Jul 23 2019
  5. *
  6. * Copyright (c) 2012 - 2019 Developer Express Inc. ALL RIGHTS RESERVED
  7. * Read about DevExpress licensing here: https://www.devexpress.com/Support/EULAs
  8. */
  9. .dxdi-control {
  10. background-color: rgba(0, 0, 0, 0.15);
  11. overflow: auto;
  12. width: 100%;
  13. box-sizing: border-box; }
  14. .dxdi-control .dxdi-canvas-container {
  15. box-sizing: border-box;
  16. min-width: 100%;
  17. min-height: 100%; }
  18. .dxdi-control .dxdi-canvas {
  19. display: block;
  20. box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.5);
  21. background-color: white;
  22. transform-origin: 0 0; }
  23. .dxdi-canvas * {
  24. user-select: none; }
  25. .dxdi-canvas text {
  26. font-family: Arial;
  27. font-size: 10pt; }
  28. .dxdi-canvas .pages-grid-line {
  29. fill: none;
  30. stroke: rgba(0, 0, 0, 0.15);
  31. stroke-dasharray: 8;
  32. stroke-width: 2;
  33. shape-rendering: crispEdges; }
  34. .dxdi-canvas .grid-outer-line,
  35. .dxdi-canvas .grid-inner-line {
  36. fill: none;
  37. shape-rendering: crispEdges; }
  38. .dxdi-canvas .grid-outer-line {
  39. stroke: rgba(0, 0, 0, 0.1); }
  40. .dxdi-canvas .grid-inner-line {
  41. stroke: rgba(0, 0, 0, 0.05); }
  42. .dxdi-canvas .shape,
  43. .dxdi-canvas .toolbox-item {
  44. pointer-events: bounding-box; }
  45. .dxdi-canvas .shape rect, .dxdi-canvas .shape path, .dxdi-canvas .shape line, .dxdi-canvas .shape ellipse,
  46. .dxdi-canvas .toolbox-item rect,
  47. .dxdi-canvas .toolbox-item path,
  48. .dxdi-canvas .toolbox-item line,
  49. .dxdi-canvas .toolbox-item ellipse {
  50. fill: white;
  51. stroke-width: 2;
  52. stroke: black; }
  53. .dxdi-canvas .shape ellipse,
  54. .dxdi-canvas .toolbox-item ellipse {
  55. shape-rendering: initial; }
  56. .dxdi-canvas .shape text,
  57. .dxdi-canvas .toolbox-item text {
  58. fill: black;
  59. text-anchor: middle; }
  60. .dxdi-canvas .shape rect.selector,
  61. .dxdi-canvas .toolbox-item rect.selector {
  62. stroke-width: 48;
  63. stroke: transparent;
  64. fill: transparent;
  65. pointer-events: initial; }
  66. .dxdi-canvas .shape {
  67. cursor: move; }
  68. .dxdi-canvas .shape.text-input text {
  69. display: none; }
  70. .dxdi-canvas .toolbox-item {
  71. cursor: pointer; }
  72. .dxdi-canvas .toolbox-item .selector {
  73. display: none; }
  74. .dxdi-canvas .connector path, .dxdi-canvas .connector line {
  75. fill: transparent;
  76. stroke-width: 2;
  77. stroke: black;
  78. stroke-linecap: round; }
  79. .dxdi-canvas .connector path.selector, .dxdi-canvas .connector line.selector {
  80. stroke-width: 16;
  81. stroke: transparent; }
  82. .dxdi-canvas .connector text {
  83. cursor: move;
  84. fill: black;
  85. text-anchor: middle; }
  86. .dxdi-canvas .connector .text-filter-flood {
  87. flood-color: white; }
  88. .dxdi-canvas .selection-mark,
  89. .dxdi-canvas .geometry-mark,
  90. .dxdi-canvas .connection-point,
  91. .dxdi-canvas .connection-mark,
  92. .dxdi-canvas .connector-point-mark,
  93. .dxdi-canvas .connector-side-mark {
  94. fill: white;
  95. stroke-width: 2;
  96. shape-rendering: crispEdges; }
  97. .dxdi-canvas .selection-mark {
  98. stroke: dodgerblue; }
  99. .dxdi-canvas .selection-mark[data-type="7"][data-value="1"] {
  100. cursor: nw-resize; }
  101. .dxdi-canvas .selection-mark[data-type="7"][data-value="2"] {
  102. cursor: ne-resize; }
  103. .dxdi-canvas .selection-mark[data-type="7"][data-value="3"] {
  104. cursor: se-resize; }
  105. .dxdi-canvas .selection-mark[data-type="7"][data-value="4"] {
  106. cursor: sw-resize; }
  107. .dxdi-canvas .selection-mark[data-type="7"][data-value="5"] {
  108. cursor: n-resize; }
  109. .dxdi-canvas .selection-mark[data-type="7"][data-value="6"] {
  110. cursor: e-resize; }
  111. .dxdi-canvas .selection-mark[data-type="7"][data-value="7"] {
  112. cursor: s-resize; }
  113. .dxdi-canvas .selection-mark[data-type="7"][data-value="8"] {
  114. cursor: w-resize; }
  115. .dxdi-canvas .selection-mark[data-type="2"],
  116. .dxdi-canvas .selection-mark[data-type="3"] {
  117. cursor: move; }
  118. .dxdi-canvas .locked-selection-mark {
  119. fill: white;
  120. stroke-width: 1;
  121. stroke: #666666; }
  122. .dxdi-canvas .geometry-mark {
  123. cursor: pointer;
  124. stroke: goldenrod; }
  125. .dxdi-canvas .connection-target {
  126. fill: transparent;
  127. stroke: orchid;
  128. stroke-width: 2;
  129. shape-rendering: crispEdges;
  130. pointer-events: none; }
  131. .dxdi-canvas .connection-point {
  132. cursor: crosshair;
  133. stroke: orchid;
  134. shape-rendering: initial; }
  135. .dxdi-canvas .connection-mark {
  136. cursor: crosshair;
  137. stroke: orchid; }
  138. .dxdi-canvas .connection-point.selector,
  139. .dxdi-canvas .connection-mark.selector {
  140. stroke: transparent;
  141. fill: transparent; }
  142. .dxdi-canvas .connection-point.active {
  143. fill: orchid; }
  144. .dxdi-canvas .connection-mark.active {
  145. fill: orchid; }
  146. .dxdi-canvas .connector-point-mark,
  147. .dxdi-canvas .connector-side-mark {
  148. cursor: move;
  149. stroke: dodgerblue; }
  150. .dxdi-canvas .connector-point-mark.disabled {
  151. cursor: default;
  152. display: none; }
  153. .dxdi-canvas .connector-side-mark {
  154. fill: dodgerblue; }
  155. .dxdi-canvas .connector-side-mark.vertical {
  156. cursor: col-resize; }
  157. .dxdi-canvas .connector-side-mark.horizontal {
  158. cursor: row-resize; }
  159. .dxdi-canvas .item-selection-rect,
  160. .dxdi-canvas .items-selection-rect {
  161. fill: transparent;
  162. stroke-width: 1;
  163. stroke: dodgerblue;
  164. stroke-dasharray: 2px;
  165. shape-rendering: crispEdges;
  166. pointer-events: none; }
  167. .dxdi-canvas .items-selection-rect {
  168. fill: rgba(30, 144, 255, 0.02); }
  169. .dxdi-canvas .item-multi-selection-rect {
  170. fill: rgba(30, 144, 255, 0.02);
  171. stroke-width: 1;
  172. stroke: dodgerblue;
  173. shape-rendering: crispEdges;
  174. pointer-events: none; }
  175. .dxdi-canvas .selection-rect {
  176. fill: rgba(30, 144, 255, 0.2);
  177. stroke-width: 1;
  178. stroke: dodgerblue;
  179. shape-rendering: crispEdges;
  180. pointer-events: none; }
  181. .dxdi-canvas .connector-selection,
  182. .dxdi-canvas .connector-multi-selection {
  183. fill: transparent;
  184. stroke-width: 6;
  185. stroke: dodgerblue;
  186. pointer-events: none; }
  187. .dxdi-canvas .connector-selection.text,
  188. .dxdi-canvas .connector-multi-selection.text {
  189. fill: transparent;
  190. stroke-width: 1;
  191. shape-rendering: crispEdges; }
  192. .dxdi-canvas .connector-selection {
  193. stroke-dasharray: 2px; }
  194. .dxdi-canvas .connector-selection-mask rect {
  195. fill: black; }
  196. .dxdi-canvas .connector-selection-mask rect.background {
  197. fill: white; }
  198. .dxdi-canvas .connector-selection-mask path, .dxdi-canvas .connector-selection-mask line {
  199. fill: white;
  200. stroke: black;
  201. stroke-width: 4; }
  202. .dxdi-canvas .connector-selection-mask text {
  203. text-anchor: middle; }
  204. .dxdi-canvas .extension-line line {
  205. stroke: dodgerblue;
  206. stroke-width: 1;
  207. stroke-dasharray: 4px;
  208. shape-rendering: crispEdges; }
  209. .dxdi-canvas .extension-line text {
  210. fill: dodgerblue;
  211. font-size: 0.8em;
  212. text-anchor: middle; }
  213. .dxdi-canvas .extension-line.center > line,
  214. .dxdi-canvas .extension-line.page > line {
  215. stroke-dasharray: 0; }
  216. .dxdi-canvas .extension-line:not(.center) > line:not(:first-child) {
  217. display: none; }
  218. .dxdi-canvas .resize-info text {
  219. fill: rgba(0, 0, 0, 0.8);
  220. font-size: 0.8em;
  221. text-anchor: middle; }
  222. .dxdi-canvas .resize-info rect {
  223. fill: white;
  224. stroke: rgba(0, 0, 0, 0.3);
  225. stroke-width: 1;
  226. shape-rendering: crispEdges; }
  227. .dxdi-control:not(.focused) .dxdi-canvas .selection-mark {
  228. stroke: #666666; }
  229. .dxdi-control:not(.focused) .dxdi-canvas .geometry-mark {
  230. stroke: #666666; }
  231. .dxdi-control:not(.focused) .dxdi-canvas .item-selection-rect,
  232. .dxdi-control:not(.focused) .dxdi-canvas .items-selection-rect {
  233. fill: transparent;
  234. stroke: #666666; }
  235. .dxdi-control:not(.focused) .dxdi-canvas .items-selection-rect {
  236. fill: rgba(144, 144, 144, 0.02); }
  237. .dxdi-control:not(.focused) .dxdi-canvas .item-multi-selection-rect {
  238. fill: rgba(144, 144, 144, 0.02);
  239. stroke: #666666; }
  240. .dxdi-control:not(.focused) .dxdi-canvas .connector-selection,
  241. .dxdi-control:not(.focused) .dxdi-canvas .connector-multi-selection {
  242. stroke: #666666; }
  243. .dxdi-control:not(.focused) .dxdi-canvas .connector-point-mark,
  244. .dxdi-control:not(.focused) .dxdi-canvas .connector-side-mark {
  245. stroke: #666666; }
  246. .dxdi-control:not(.focused) .dxdi-canvas .connector-side-mark {
  247. fill: #666666; }
  248. .dxdi-canvas.export {
  249. position: fixed;
  250. left: -10000px !important;
  251. top: -10000px !important; }
  252. .dxdi-toolbox,
  253. .dxdi-toolbox .dxdi-canvas,
  254. .dxdi-toolbox-drag-item .dxdi-canvas {
  255. width: 100%;
  256. height: 100%; }
  257. .dxdi-toolbox .dxdi-canvas .toolbox-item rect, .dxdi-toolbox .dxdi-canvas .toolbox-item path, .dxdi-toolbox .dxdi-canvas .toolbox-item line, .dxdi-toolbox .dxdi-canvas .toolbox-item ellipse {
  258. fill: transparent;
  259. stroke: currentColor; }
  260. .dxdi-toolbox .dxdi-canvas .toolbox-item text,
  261. .dxdi-toolbox-drag-item .dxdi-canvas text {
  262. font-weight: bold;
  263. font-family: "Segoe UI","Helvetica Neue",Helvetica,Arial,"san-serif";
  264. fill: currentColor; }
  265. .dxdi-datasource {
  266. margin: 0 0 1em; }
  267. .dxdi-datasource-title {
  268. font-size: 1.1em;
  269. font-weight: bold;
  270. margin: 0 0 1em; }
  271. .dxdi-datasource-item {
  272. cursor: pointer;
  273. user-select: none;
  274. margin: 0 0 0.6em; }
  275. .dxdi-toolbox-drag-item,
  276. .dxdi-datasource-drag-item {
  277. font-family: Arial;
  278. font-size: 10pt;
  279. color: black;
  280. position: absolute;
  281. z-index: 10000; }
  282. .dxdi-toolbox-drag-item, .dxdi-toolbox-drag-item *,
  283. .dxdi-datasource-drag-item,
  284. .dxdi-datasource-drag-item * {
  285. pointer-events: none !important; }
  286. .dxdi-datasource-drag-item {
  287. background-color: white;
  288. border: 2px solid black;
  289. padding: 0.5em; }
  290. .dxdi-tb-drag-captured {
  291. display: none; }
  292. .dxdi-input,
  293. .dxdi-text-input {
  294. padding: 0;
  295. outline: none;
  296. border: none; }
  297. .dxdi-clipboard-input,
  298. .dxdi-input.focus {
  299. position: fixed;
  300. overflow: hidden;
  301. left: -1000px !important;
  302. top: -1000px !important; }
  303. .dxdi-input.shape-text,
  304. .dxdi-input.connector-text {
  305. position: absolute;
  306. overflow: hidden;
  307. background-color: transparent;
  308. transform-origin: 0 0; }
  309. .dxdi-input.shape-text > div[contenteditable] {
  310. display: table-cell;
  311. overflow: hidden;
  312. padding: 0;
  313. outline: none;
  314. background-color: transparent;
  315. font-family: Arial;
  316. font-size: 10pt;
  317. color: black;
  318. line-height: 1.1em;
  319. text-align: center;
  320. vertical-align: middle; }
  321. .dxdi-input.connector-text {
  322. overflow: visible; }
  323. .dxdi-input.connector-text > div[contenteditable] {
  324. padding: 2px;
  325. outline: none;
  326. height: calc(1.1em + 6px);
  327. width: calc(8em + 6px);
  328. margin-top: calc(-0.55em - 3px);
  329. margin-left: calc(-4em - 3px);
  330. background-color: white;
  331. border: 1px solid dodgerblue;
  332. font-family: Arial;
  333. font-size: 10pt;
  334. color: black;
  335. line-height: 1.1em;
  336. text-align: center;
  337. vertical-align: middle; }