lr-workflow-ui.css 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329
  1. .lr-workflow {
  2. position:relative;
  3. height:100%;
  4. width:100%;
  5. padding-left:60px;
  6. }
  7. .lr-workflow.lr-workflow-preview {
  8. padding-left: 0px;
  9. }
  10. .lr-workflow-tool {
  11. position:absolute;
  12. top:0;
  13. left:0;
  14. height:100%;
  15. width:60px;
  16. background-color:#f8f8f8;
  17. border-right:1px solid #ddd;
  18. }
  19. .lr-workflow-tool span {
  20. height: 0;
  21. overflow: hidden;
  22. border-bottom: #ccc 1px solid;
  23. border-top: #fff 1px solid;
  24. margin: 1px;
  25. clear: both;
  26. display: block;
  27. }
  28. .lr-workflow-btn {
  29. display: block;
  30. border: 0;
  31. height: 50px;
  32. width: 50px;
  33. cursor:pointer;
  34. margin:auto;
  35. margin-top: 2px;
  36. margin-bottom: 2px;
  37. outline: none;
  38. border: #f7f7f7 1px solid;
  39. border-radius: 8px;
  40. }
  41. .lr-workflow-btndown {
  42. display: block;
  43. height: 50px;
  44. width: 50px;
  45. cursor: pointer;
  46. margin:auto;
  47. margin-top: 2px;
  48. margin-bottom: 2px;
  49. outline: none;
  50. border: #ccc 1px solid;
  51. background: #fff;
  52. border-radius: 8px;
  53. }
  54. .lr-workflow b {
  55. display: block;
  56. width: 48px;
  57. height: 48px;
  58. overflow: hidden;
  59. }
  60. .lr-workflow .ico_cursor {
  61. background: url(/Content/images/learunworkflow/cursor.png) no-repeat 0 0;
  62. }
  63. .lr-workflow .ico_direct {
  64. background: url(/Content/images/learunworkflow/direct.png) no-repeat 0 0;
  65. }
  66. .lr-workflow .ico_startround {
  67. background: url(/Content/images/learunworkflow/startround.png) no-repeat 0 0;
  68. }
  69. .lr-workflow .ico_endround {
  70. background: url(/Content/images/learunworkflow/endround.png) no-repeat 0 0;
  71. }
  72. .lr-workflow .ico_stepnode {
  73. background: url(/Content/images/learunworkflow/stepnode.png) no-repeat 0 0;
  74. }
  75. .lr-workflow .ico_confluencenode {
  76. background: url(/Content/images/learunworkflow/confluencenode.png) no-repeat 0 0;
  77. }
  78. .lr-workflow .ico_conditionnode {
  79. background: url(/Content/images/learunworkflow/conditionnode.png) no-repeat 0 0;
  80. }
  81. .lr-workflow .ico_conditionnodediv {
  82. background: url(/Content/images/learunworkflow/conditionnodediv.png) no-repeat 0 0;
  83. }
  84. .lr-workflow .ico_auditornode {
  85. background: url(/Content/images/learunworkflow/auditornode.png) no-repeat 0 0;
  86. }
  87. .lr-workflow .ico_childwfnode {
  88. background: url(/Content/images/learunworkflow/childwfnode.png) no-repeat 0 0;
  89. }
  90. /*绘制区域*/
  91. .lr-workflow-work {
  92. position:relative;
  93. width:100%;
  94. height:100%;
  95. }
  96. .lr-workflow-work .lr-workflow-workinner {
  97. background-image: url(/Content/images/learunworkflow/wallbg.png);
  98. position: relative;
  99. overflow: hidden;
  100. }
  101. /*节点*/
  102. .lr-workflow-node {
  103. position:absolute;
  104. background-color: #fff;
  105. border: #a8a8a8 solid 1px;
  106. border-radius: 10px;
  107. box-shadow: 2px 2px 19px #e0e0e0;
  108. margin: 0;
  109. padding-left:48px;
  110. cursor: default;
  111. display:table;
  112. }
  113. .lr-workflow-node.item-startround {
  114. background: #5ccb41;
  115. border: #5e8800 solid 1px;
  116. overflow: visible;
  117. padding:0;
  118. }
  119. .lr-workflow-node.item-endround {
  120. background: #de2922;
  121. border: #be0e0e solid 1px;
  122. overflow: visible;
  123. padding:0;
  124. }
  125. .lr-workflow-node.item-conditionnode {
  126. background-color:initial;
  127. border:0!important;
  128. overflow: visible;
  129. padding:0;
  130. border-radius: 0px;
  131. box-shadow:initial!important;
  132. cursor: move;
  133. }
  134. .lr-workflow-nodeico {
  135. position:absolute;
  136. left:0;
  137. top:50%;
  138. width:48px;
  139. height:48px;
  140. margin-top:-24px;
  141. cursor: move;
  142. }
  143. .lr-workflow-node.item-startround .lr-workflow-nodeico,
  144. .lr-workflow-node.item-endround .lr-workflow-nodeico {
  145. left:50%;
  146. margin-left:-24px;
  147. }
  148. .lr-workflow-node.item-conditionnode .lr-workflow-nodeico,.lr-workflow-node.item-conditionnode b {
  149. position:absolute;
  150. top:0;
  151. left:0;
  152. width:100%;
  153. height:100%;
  154. margin-top:0px;
  155. }
  156. .lr-workflow-node.item-conditionnode .lr-workflow-nodeico {
  157. z-index:1;
  158. }
  159. .lr-workflow-nodetext {
  160. text-align:center;
  161. display:table-cell;
  162. vertical-align:middle;
  163. }
  164. .lr-workflow-node.item-conditionnode .lr-workflow-nodetext {
  165. position:relative;
  166. top:0;
  167. left:0;
  168. width:100%;
  169. height:100%;
  170. }
  171. .lr-workflow-node.item-startround,
  172. .lr-workflow-node.item-endround {
  173. color:#fff;
  174. }
  175. .lr-workflow-nodeclose {
  176. position: absolute;
  177. z-index: 10;
  178. right: -12px;
  179. top: -12px;
  180. width: 24px;
  181. height: 24px;
  182. overflow: hidden;
  183. cursor: pointer;
  184. background: url(/Content/images/learunworkflow/close.png) no-repeat 0 0;
  185. display:none;
  186. }
  187. .lr-workflow-node:hover {
  188. border: #4a5b79 1px solid;
  189. box-shadow: 2px 2px 19px #444;
  190. opacity: .9;
  191. }
  192. .lr-workflow-node.lr-workflow-nodefocus {
  193. border: #4a5b79 1px solid;
  194. box-shadow: 2px 2px 19px #444;
  195. opacity: .9;
  196. }
  197. /*线段连接点#f30*/
  198. .lr-workflow-nodespot {
  199. position:absolute;
  200. height:20px;
  201. width:20px;
  202. display:none;
  203. z-index:100;
  204. cursor:crosshair;
  205. }
  206. .lr-workflow-nodespotc {
  207. position:absolute;
  208. top:50%;
  209. left:50%;
  210. height:10px;
  211. width:10px;
  212. background-color:#039cfd;
  213. border:2px solid rgba(255, 255, 255, 0.00);
  214. margin-top:-5px;
  215. margin-left:-5px;
  216. }
  217. .lr-workflow-nodespotmark .lr-workflow-nodespotc {
  218. border:2px solid #f30;
  219. }
  220. .lr-workflow-nodespot.left {
  221. height:100%;
  222. left:-10px;
  223. top:0;
  224. }
  225. .lr-workflow-nodespot.top {
  226. width:100%;
  227. left:0;
  228. top:-10px;
  229. }
  230. .lr-workflow-nodespot.right {
  231. height:100%;
  232. right:-10px;
  233. top:0;
  234. }
  235. .lr-workflow-nodespot.bottom {
  236. width:100%;
  237. left:0;
  238. bottom:-10px;
  239. }
  240. .lr-workflow-nodemark .lr-workflow-nodespot{
  241. display:block;
  242. }
  243. .lr-workflow-nodemark {
  244. cursor:crosshair;
  245. }
  246. /*节点移动载体*/
  247. .lr-workflow .lr-workflow-rsghost {
  248. position: absolute;
  249. display: none;
  250. overflow: hidden;
  251. border: #8ea4c1 1px dashed;
  252. background: #f2f2f2;
  253. filter: Alpha(Opacity=60);
  254. -moz-opacity: .6;
  255. opacity: .6;
  256. z-index: 12;
  257. border-radius: 10px;
  258. cursor:move;
  259. padding-left:48px;
  260. }
  261. /*线条设置*/
  262. .lr-workflow .lr-workflow-lineoper {
  263. height: 15px;
  264. background-color: #d8e8fc;
  265. border: #ccc 1px solid;
  266. position: absolute;
  267. z-index: 10000;
  268. }
  269. .lr-workflow .lr-workflow-lineoper b {
  270. display: inline-block;
  271. width: 15px;
  272. height: 15px;
  273. margin-left: 2px;
  274. cursor: pointer;
  275. }
  276. .lr-workflow .lr-workflow-lineoper .lr {
  277. background: url(/Content/images/learunworkflow/GooFlow_line_oper.png) no-repeat 1px 1px;
  278. }
  279. .lr-workflow .lr-workflow-lineoper .tb {
  280. background: url(/Content/images/learunworkflow/GooFlow_line_oper.png) no-repeat 1px -14px;
  281. }
  282. .lr-workflow .lr-workflow-lineoper .sl {
  283. background: url(/Content/images/learunworkflow/GooFlow_line_oper.png) no-repeat 1px -29px;
  284. }
  285. .lr-workflow .lr-workflow-lineoper .x {
  286. background: url(/Content/images/learunworkflow/GooFlow_line_oper.png) no-repeat 1px -44px;
  287. }
  288. /*线条移动*/
  289. .lr-workflow-linemover {
  290. filter: Alpha(Opacity=50);
  291. -moz-opacity: .5;
  292. opacity: .5;
  293. overflow: hidden;
  294. position: absolute;
  295. z-index: 9999;
  296. }
  297. /*滚动条样式*/
  298. .lr-workflow-work .mCSB_container_wrapper{
  299. margin:0 !important;
  300. }
  301. .lr-workflow-work .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  302. background-color:#B3B3B3 !important;
  303. }
  304. .lr-workflow-work .mCSB_scrollTools .mCSB_draggerRail {
  305. background-color:initial !important;
  306. background-color:none !important;
  307. }
  308. .lr-workflow-work .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  309. bottom:-6px;
  310. }
  311. .lr-workflow-work .mCSB_scrollTools_vertical {
  312. right:-6px;
  313. }