vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

473 lines
9.9 KiB

  1. .vis.timeline {
  2. }
  3. .vis.timeline.rootpanel {
  4. position: relative;
  5. overflow: hidden;
  6. border: 1px solid #bfbfbf;
  7. -moz-box-sizing: border-box;
  8. box-sizing: border-box;
  9. }
  10. .vis.timeline .vpanel {
  11. position: absolute;
  12. overflow: hidden;
  13. }
  14. .vis.timeline .groupset {
  15. position: absolute;
  16. padding: 0;
  17. margin: 0;
  18. }
  19. .vis.timeline .labels {
  20. position: absolute;
  21. top: 0;
  22. left: 0;
  23. width: 100%;
  24. height: 100%;
  25. padding: 0;
  26. margin: 0;
  27. border-right: 1px solid #bfbfbf;
  28. -moz-box-sizing: border-box;
  29. box-sizing: border-box;
  30. }
  31. .vis.timeline .labels .label-set {
  32. position: absolute;
  33. top: 0;
  34. left: 0;
  35. width: 100%;
  36. height: 100%;
  37. overflow: hidden;
  38. border-top: none;
  39. border-bottom: 1px solid #bfbfbf;
  40. }
  41. .vis.timeline .labels .label-set .vlabel {
  42. position: absolute;
  43. left: 0;
  44. top: 0;
  45. width: 100%;
  46. color: #4d4d4d;
  47. }
  48. .vis.timeline.top .labels .label-set .vlabel,
  49. .vis.timeline.top .groupset .itemset-axis {
  50. border-top: 1px solid #bfbfbf;
  51. border-bottom: none;
  52. }
  53. .vis.timeline.bottom .labels .label-set .vlabel,
  54. .vis.timeline.bottom .groupset .itemset-axis {
  55. border-top: none;
  56. border-bottom: 1px solid #bfbfbf;
  57. }
  58. .vis.timeline .labels .label-set .vlabel .inner {
  59. display: inline-block;
  60. padding: 5px;
  61. }
  62. .vis.timeline .itemset {
  63. position: absolute;
  64. padding: 0;
  65. margin: 0;
  66. overflow: hidden;
  67. }
  68. .vis.timeline .background {
  69. }
  70. .vis.timeline .foreground {
  71. }
  72. .vis.timeline .itemset-axis {
  73. position: absolute;
  74. }
  75. .vis.timeline .item {
  76. position: absolute;
  77. color: #1A1A1A;
  78. border-color: #97B0F8;
  79. background-color: #D5DDF6;
  80. display: inline-block;
  81. padding: 5px;
  82. -webkit-transition: top .4s ease-in-out, bottom .4s ease-in-out, height .4s ease-in-out;
  83. transition: top .4s ease-in-out, bottom .4s ease-in-out, height .4s ease-in-out;
  84. }
  85. .vis.timeline .item.selected {
  86. border-color: #FFC200;
  87. background-color: #FFF785;
  88. z-index: 999;
  89. }
  90. .vis.timeline.editable .item.selected {
  91. cursor: move;
  92. }
  93. .vis.timeline .item.point.selected {
  94. background-color: #FFF785;
  95. z-index: 999;
  96. }
  97. .vis.timeline .item.point.selected .dot,
  98. .vis.timeline .item.dot.selected {
  99. border-color: #FFC200;
  100. }
  101. .vis.timeline .item.cluster {
  102. /* TODO: use another color or pattern? */
  103. background: #97B0F8 url('img/cluster_bg.png');
  104. color: white;
  105. }
  106. .vis.timeline .item.cluster.point {
  107. border-color: #D5DDF6;
  108. }
  109. .vis.timeline .item.box {
  110. text-align: center;
  111. border-style: solid;
  112. border-width: 1px;
  113. border-radius: 5px;
  114. -moz-border-radius: 5px; /* For Firefox 3.6 and older */
  115. }
  116. .vis.timeline .item.point {
  117. background: none;
  118. }
  119. .vis.timeline .dot,
  120. .vis.timeline .item.dot {
  121. padding: 0;
  122. border: 5px solid #97B0F8;
  123. position: absolute;
  124. border-radius: 5px;
  125. -moz-border-radius: 5px; /* For Firefox 3.6 and older */
  126. }
  127. .vis.timeline .item.range,
  128. .vis.timeline .item.rangeoverflow{
  129. border-style: solid;
  130. border-width: 1px;
  131. border-radius: 2px;
  132. -moz-border-radius: 2px; /* For Firefox 3.6 and older */
  133. -moz-box-sizing: border-box;
  134. box-sizing: border-box;
  135. }
  136. .vis.timeline .item.range .content,
  137. .vis.timeline .item.rangeoverflow .content {
  138. position: relative;
  139. display: inline-block;
  140. }
  141. .vis.timeline .item.range .content {
  142. overflow: hidden;
  143. max-width: 100%;
  144. }
  145. .vis.timeline .item.line {
  146. padding: 0;
  147. position: absolute;
  148. width: 0;
  149. border-left-width: 1px;
  150. border-left-style: solid;
  151. }
  152. .vis.timeline .item .content {
  153. white-space: nowrap;
  154. overflow: hidden;
  155. }
  156. .vis.timeline .item .delete {
  157. background: url('img/timeline/delete.png') no-repeat top center;
  158. position: absolute;
  159. width: 24px;
  160. height: 24px;
  161. top: 0;
  162. right: -24px;
  163. cursor: pointer;
  164. }
  165. .vis.timeline .item.range .drag-left,
  166. .vis.timeline .item.rangeoverflow .drag-left {
  167. position: absolute;
  168. width: 24px;
  169. height: 100%;
  170. top: 0;
  171. left: -4px;
  172. cursor: w-resize;
  173. z-index: 10000;
  174. }
  175. .vis.timeline .item.range .drag-right,
  176. .vis.timeline .item.rangeoverflow .drag-right {
  177. position: absolute;
  178. width: 24px;
  179. height: 100%;
  180. top: 0;
  181. right: -4px;
  182. cursor: e-resize;
  183. z-index: 10001; /* a little higher z-index than .drag-left */
  184. }
  185. .vis.timeline .axis {
  186. position: absolute;
  187. }
  188. .vis.timeline .axis .text {
  189. position: absolute;
  190. color: #4d4d4d;
  191. padding: 3px;
  192. white-space: nowrap;
  193. }
  194. .vis.timeline .axis .text.measure {
  195. position: absolute;
  196. padding-left: 0;
  197. padding-right: 0;
  198. margin-left: 0;
  199. margin-right: 0;
  200. visibility: hidden;
  201. }
  202. .vis.timeline .axis .grid.vertical {
  203. position: absolute;
  204. width: 0;
  205. border-right: 1px solid;
  206. }
  207. .vis.timeline .axis .grid.horizontal {
  208. position: absolute;
  209. left: 0;
  210. width: 100%;
  211. height: 0;
  212. border-bottom: 1px solid;
  213. }
  214. .vis.timeline .axis .grid.minor {
  215. border-color: #e5e5e5;
  216. }
  217. .vis.timeline .axis .grid.major {
  218. border-color: #bfbfbf;
  219. }
  220. .vis.timeline .currenttime {
  221. background-color: #FF7F6E;
  222. width: 2px;
  223. z-index: 9;
  224. }
  225. .vis.timeline .customtime {
  226. background-color: #6E94FF;
  227. width: 2px;
  228. cursor: move;
  229. z-index: 9;
  230. }
  231. div.graph-manipulationDiv {
  232. border-width:0px;
  233. border-bottom: 1px;
  234. border-style:solid;
  235. border-color: #d6d9d8;
  236. background: #ffffff; /* Old browsers */
  237. background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
  238. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
  239. background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
  240. background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
  241. background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
  242. background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
  243. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
  244. width: 600px;
  245. height:30px;
  246. z-index:10;
  247. position:absolute;
  248. }
  249. div.graph-manipulation-editMode {
  250. height:30px;
  251. z-index:10;
  252. position:absolute;
  253. margin-top:20px;
  254. }
  255. div.graph-manipulation-closeDiv {
  256. height:30px;
  257. width:30px;
  258. z-index:11;
  259. position:absolute;
  260. margin-top:3px;
  261. margin-left:590px;
  262. background-position: 0px 0px;
  263. background-repeat:no-repeat;
  264. background-image: url("img/graph/cross.png");
  265. cursor: pointer;
  266. -webkit-touch-callout: none;
  267. -webkit-user-select: none;
  268. -khtml-user-select: none;
  269. -moz-user-select: none;
  270. -ms-user-select: none;
  271. user-select: none;
  272. }
  273. span.graph-manipulationUI {
  274. font-family: verdana;
  275. font-size: 12px;
  276. -moz-border-radius: 15px;
  277. border-radius: 15px;
  278. display:inline-block;
  279. background-position: 0px 0px;
  280. background-repeat:no-repeat;
  281. height:24px;
  282. margin: -14px 0px 0px 10px;
  283. vertical-align:middle;
  284. cursor: pointer;
  285. padding: 0px 8px 0px 8px;
  286. -webkit-touch-callout: none;
  287. -webkit-user-select: none;
  288. -khtml-user-select: none;
  289. -moz-user-select: none;
  290. -ms-user-select: none;
  291. user-select: none;
  292. }
  293. span.graph-manipulationUI:hover {
  294. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
  295. }
  296. span.graph-manipulationUI:active {
  297. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
  298. }
  299. span.graph-manipulationUI.back {
  300. background-image: url("img/graph/backIcon.png");
  301. }
  302. span.graph-manipulationUI.none:hover {
  303. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
  304. cursor: default;
  305. }
  306. span.graph-manipulationUI.none:active {
  307. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
  308. }
  309. span.graph-manipulationUI.none {
  310. padding: 0px 0px 0px 0px;
  311. }
  312. span.graph-manipulationUI.notification{
  313. margin: 2px;
  314. font-weight: bold;
  315. }
  316. span.graph-manipulationUI.add {
  317. background-image: url("img/graph/addNodeIcon.png");
  318. }
  319. span.graph-manipulationUI.edit {
  320. background-image: url("img/graph/editIcon.png");
  321. }
  322. span.graph-manipulationUI.edit.editmode {
  323. background-color: #fcfcfc;
  324. border-style:solid;
  325. border-width:1px;
  326. border-color: #cccccc;
  327. }
  328. span.graph-manipulationUI.connect {
  329. background-image: url("img/graph/connectIcon.png");
  330. }
  331. span.graph-manipulationUI.delete {
  332. background-image: url("img/graph/deleteIcon.png");
  333. }
  334. /* top right bottom left */
  335. span.graph-manipulationLabel {
  336. margin: 0px 0px 0px 23px;
  337. line-height: 25px;
  338. }
  339. div.graph-seperatorLine {
  340. display:inline-block;
  341. width:1px;
  342. height:20px;
  343. background-color: #bdbdbd;
  344. margin: 5px 7px 0px 15px;
  345. }
  346. div.graph-navigation {
  347. width:34px;
  348. height:34px;
  349. z-index:10;
  350. -moz-border-radius: 17px;
  351. border-radius: 17px;
  352. position:absolute;
  353. display:inline-block;
  354. background-position: 2px 2px;
  355. background-repeat:no-repeat;
  356. cursor: pointer;
  357. -webkit-touch-callout: none;
  358. -webkit-user-select: none;
  359. -khtml-user-select: none;
  360. -moz-user-select: none;
  361. -ms-user-select: none;
  362. user-select: none;
  363. }
  364. div.graph-navigation:hover {
  365. box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
  366. }
  367. div.graph-navigation:active {
  368. box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
  369. }
  370. div.graph-navigation.active {
  371. box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
  372. }
  373. div.graph-navigation.up {
  374. background-image: url("img/graph/upArrow.png");
  375. bottom:50px;
  376. left:55px;
  377. }
  378. div.graph-navigation.down {
  379. background-image: url("img/graph/downArrow.png");
  380. bottom:10px;
  381. left:55px;
  382. }
  383. div.graph-navigation.left {
  384. background-image: url("img/graph/leftArrow.png");
  385. bottom:10px;
  386. left:15px;
  387. }
  388. div.graph-navigation.right {
  389. background-image: url("img/graph/rightArrow.png");
  390. bottom:10px;
  391. left:95px;
  392. }
  393. div.graph-navigation.zoomIn {
  394. background-image: url("img/graph/plus.png");
  395. bottom:10px;
  396. right:15px;
  397. }
  398. div.graph-navigation.zoomOut {
  399. background-image: url("img/graph/minus.png");
  400. bottom:10px;
  401. right:55px;
  402. }
  403. div.graph-navigation.zoomExtends {
  404. background-image: url("img/graph/zoomExtends.png");
  405. bottom:50px;
  406. right:15px;
  407. }