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.

743 lines
14 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. .vis .overlay {
  2. position: absolute;
  3. top: 0;
  4. left: 0;
  5. width: 100%;
  6. height: 100%;
  7. /* Must be displayed above for example selected Timeline items */
  8. z-index: 10;
  9. }
  10. .vis-active {
  11. box-shadow: 0 0 10px #86d5f8;
  12. }
  13. .vis.timeline {
  14. }
  15. .vis.timeline.root {
  16. position: relative;
  17. border: 1px solid #bfbfbf;
  18. overflow: hidden;
  19. padding: 0;
  20. margin: 0;
  21. box-sizing: border-box;
  22. }
  23. .vis.timeline .vispanel {
  24. position: absolute;
  25. padding: 0;
  26. margin: 0;
  27. box-sizing: border-box;
  28. }
  29. .vis.timeline .vispanel.center,
  30. .vis.timeline .vispanel.left,
  31. .vis.timeline .vispanel.right,
  32. .vis.timeline .vispanel.top,
  33. .vis.timeline .vispanel.bottom {
  34. border: 1px #bfbfbf;
  35. }
  36. .vis.timeline .vispanel.center,
  37. .vis.timeline .vispanel.left,
  38. .vis.timeline .vispanel.right {
  39. border-top-style: solid;
  40. border-bottom-style: solid;
  41. overflow: hidden;
  42. }
  43. .vis.timeline .vispanel.center,
  44. .vis.timeline .vispanel.top,
  45. .vis.timeline .vispanel.bottom {
  46. border-left-style: solid;
  47. border-right-style: solid;
  48. }
  49. .vis.timeline .background {
  50. overflow: hidden;
  51. }
  52. .vis.timeline .vispanel > .content {
  53. position: relative;
  54. }
  55. .vis.timeline .vispanel .shadow {
  56. position: absolute;
  57. width: 100%;
  58. height: 1px;
  59. box-shadow: 0 0 10px rgba(0,0,0,0.8);
  60. /* TODO: find a nice way to ensure shadows are drawn on top of items
  61. z-index: 1;
  62. */
  63. }
  64. .vis.timeline .vispanel .shadow.top {
  65. top: -1px;
  66. left: 0;
  67. }
  68. .vis.timeline .vispanel .shadow.bottom {
  69. bottom: -1px;
  70. left: 0;
  71. }
  72. .vis.timeline .labelset {
  73. position: relative;
  74. overflow: hidden;
  75. box-sizing: border-box;
  76. }
  77. .vis.timeline .labelset .vlabel {
  78. position: relative;
  79. left: 0;
  80. top: 0;
  81. width: 100%;
  82. color: #4d4d4d;
  83. box-sizing: border-box;
  84. }
  85. .vis.timeline .labelset .vlabel {
  86. border-bottom: 1px solid #bfbfbf;
  87. }
  88. .vis.timeline .labelset .vlabel:last-child {
  89. border-bottom: none;
  90. }
  91. .vis.timeline .labelset .vlabel .inner {
  92. display: inline-block;
  93. padding: 5px;
  94. }
  95. .vis.timeline .labelset .vlabel .inner.hidden {
  96. padding: 0;
  97. }
  98. .vis.timeline .itemset {
  99. position: relative;
  100. padding: 0;
  101. margin: 0;
  102. box-sizing: border-box;
  103. }
  104. .vis.timeline .itemset .background,
  105. .vis.timeline .itemset .foreground {
  106. position: absolute;
  107. width: 100%;
  108. height: 100%;
  109. overflow: visible;
  110. }
  111. .vis.timeline .axis {
  112. position: absolute;
  113. width: 100%;
  114. height: 0;
  115. left: 0;
  116. z-index: 1;
  117. }
  118. .vis.timeline .foreground .group {
  119. position: relative;
  120. box-sizing: border-box;
  121. border-bottom: 1px solid #bfbfbf;
  122. }
  123. .vis.timeline .foreground .group:last-child {
  124. border-bottom: none;
  125. }
  126. .vis.timeline .item {
  127. position: absolute;
  128. color: #1A1A1A;
  129. border-color: #97B0F8;
  130. border-width: 1px;
  131. background-color: #D5DDF6;
  132. display: inline-block;
  133. padding: 5px;
  134. }
  135. .vis.timeline .item.selected {
  136. border-color: #FFC200;
  137. background-color: #FFF785;
  138. /* z-index must be higher than the z-index of custom time bar and current time bar */
  139. z-index: 2;
  140. }
  141. .vis.timeline .editable .item.selected {
  142. cursor: move;
  143. }
  144. .vis.timeline .item.point.selected {
  145. background-color: #FFF785;
  146. }
  147. .vis.timeline .item.box {
  148. text-align: center;
  149. border-style: solid;
  150. border-radius: 2px;
  151. }
  152. .vis.timeline .item.point {
  153. background: none;
  154. }
  155. .vis.timeline .item.dot {
  156. position: absolute;
  157. padding: 0;
  158. border-width: 4px;
  159. border-style: solid;
  160. border-radius: 4px;
  161. }
  162. .vis.timeline .item.range {
  163. border-style: solid;
  164. border-radius: 2px;
  165. box-sizing: border-box;
  166. }
  167. .vis.timeline .item.background {
  168. overflow: hidden;
  169. border: none;
  170. background-color: rgba(213, 221, 246, 0.4);
  171. box-sizing: border-box;
  172. padding: 0;
  173. margin: 0;
  174. }
  175. .vis.timeline .item.range .content {
  176. position: relative;
  177. display: inline-block;
  178. overflow: hidden;
  179. max-width: 100%;
  180. }
  181. .vis.timeline .item.background .content {
  182. position: absolute;
  183. display: inline-block;
  184. overflow: hidden;
  185. max-width: 100%;
  186. margin: 5px;
  187. }
  188. .vis.timeline .item.line {
  189. padding: 0;
  190. position: absolute;
  191. width: 0;
  192. border-left-width: 1px;
  193. border-left-style: solid;
  194. }
  195. .vis.timeline .item .content {
  196. white-space: nowrap;
  197. overflow: hidden;
  198. }
  199. .vis.timeline .item .delete {
  200. background: url('img/timeline/delete.png') no-repeat top center;
  201. position: absolute;
  202. width: 24px;
  203. height: 24px;
  204. top: 0;
  205. right: -24px;
  206. cursor: pointer;
  207. }
  208. .vis.timeline .item.range .drag-left {
  209. position: absolute;
  210. width: 24px;
  211. height: 100%;
  212. top: 0;
  213. left: -4px;
  214. cursor: w-resize;
  215. }
  216. .vis.timeline .item.range .drag-right {
  217. position: absolute;
  218. width: 24px;
  219. height: 100%;
  220. top: 0;
  221. right: -4px;
  222. cursor: e-resize;
  223. }
  224. .vis.timeline .timeaxis {
  225. position: relative;
  226. overflow: hidden;
  227. }
  228. .vis.timeline .timeaxis.foreground {
  229. top: 0;
  230. left: 0;
  231. width: 100%;
  232. }
  233. .vis.timeline .timeaxis.background {
  234. position: absolute;
  235. top: 0;
  236. left: 0;
  237. width: 100%;
  238. height: 100%;
  239. }
  240. .vis.timeline .timeaxis .text {
  241. position: absolute;
  242. color: #4d4d4d;
  243. padding: 3px;
  244. white-space: nowrap;
  245. }
  246. .vis.timeline .timeaxis .text.measure {
  247. position: absolute;
  248. padding-left: 0;
  249. padding-right: 0;
  250. margin-left: 0;
  251. margin-right: 0;
  252. visibility: hidden;
  253. }
  254. .vis.timeline .timeaxis .grid.vertical {
  255. position: absolute;
  256. width: 0;
  257. border-right: 1px solid;
  258. }
  259. .vis.timeline .timeaxis .grid.minor {
  260. border-color: #e5e5e5;
  261. }
  262. .vis.timeline .timeaxis .grid.major {
  263. border-color: #bfbfbf;
  264. }
  265. .vis.timeline .currenttime {
  266. background-color: #FF7F6E;
  267. width: 2px;
  268. z-index: 1;
  269. }
  270. .vis.timeline .customtime {
  271. background-color: #6E94FF;
  272. width: 2px;
  273. cursor: move;
  274. z-index: 1;
  275. }
  276. .vis.timeline.root {
  277. /*
  278. -webkit-transition: height .4s ease-in-out;
  279. transition: height .4s ease-in-out;
  280. */
  281. }
  282. .vis.timeline .vispanel {
  283. /*
  284. -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
  285. transition: height .4s ease-in-out, top .4s ease-in-out;
  286. */
  287. }
  288. .vis.timeline .axis {
  289. /*
  290. -webkit-transition: top .4s ease-in-out;
  291. transition: top .4s ease-in-out;
  292. */
  293. }
  294. /* TODO: get animation working nicely
  295. .vis.timeline .item {
  296. -webkit-transition: top .4s ease-in-out;
  297. transition: top .4s ease-in-out;
  298. }
  299. .vis.timeline .item.line {
  300. -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
  301. transition: height .4s ease-in-out, top .4s ease-in-out;
  302. }
  303. /**/
  304. .vis.timeline .vispanel.background.horizontal .grid.horizontal {
  305. position: absolute;
  306. width: 100%;
  307. height: 0;
  308. border-bottom: 1px solid;
  309. }
  310. .vis.timeline .vispanel.background.horizontal .grid.minor {
  311. border-color: #e5e5e5;
  312. }
  313. .vis.timeline .vispanel.background.horizontal .grid.major {
  314. border-color: #bfbfbf;
  315. }
  316. .vis.timeline .dataaxis .yAxis.major {
  317. width: 100%;
  318. position: absolute;
  319. color: #4d4d4d;
  320. white-space: nowrap;
  321. }
  322. .vis.timeline .dataaxis .yAxis.major.measure{
  323. padding: 0px 0px 0px 0px;
  324. margin: 0px 0px 0px 0px;
  325. visibility: hidden;
  326. width: auto;
  327. }
  328. .vis.timeline .dataaxis .yAxis.minor{
  329. position: absolute;
  330. width: 100%;
  331. color: #bebebe;
  332. white-space: nowrap;
  333. }
  334. .vis.timeline .dataaxis .yAxis.minor.measure{
  335. padding: 0px 0px 0px 0px;
  336. margin: 0px 0px 0px 0px;
  337. visibility: hidden;
  338. width: auto;
  339. }
  340. .vis.timeline .legend {
  341. background-color: rgba(247, 252, 255, 0.65);
  342. padding: 5px;
  343. border-color: #b3b3b3;
  344. border-style:solid;
  345. border-width: 1px;
  346. box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
  347. }
  348. .vis.timeline .legendText {
  349. /*font-size: 10px;*/
  350. white-space: nowrap;
  351. display: inline-block
  352. }
  353. .vis.timeline .graphGroup0 {
  354. fill:#4f81bd;
  355. fill-opacity:0;
  356. stroke-width:2px;
  357. stroke: #4f81bd;
  358. }
  359. .vis.timeline .graphGroup1 {
  360. fill:#f79646;
  361. fill-opacity:0;
  362. stroke-width:2px;
  363. stroke: #f79646;
  364. }
  365. .vis.timeline .graphGroup2 {
  366. fill: #8c51cf;
  367. fill-opacity:0;
  368. stroke-width:2px;
  369. stroke: #8c51cf;
  370. }
  371. .vis.timeline .graphGroup3 {
  372. fill: #75c841;
  373. fill-opacity:0;
  374. stroke-width:2px;
  375. stroke: #75c841;
  376. }
  377. .vis.timeline .graphGroup4 {
  378. fill: #ff0100;
  379. fill-opacity:0;
  380. stroke-width:2px;
  381. stroke: #ff0100;
  382. }
  383. .vis.timeline .graphGroup5 {
  384. fill: #37d8e6;
  385. fill-opacity:0;
  386. stroke-width:2px;
  387. stroke: #37d8e6;
  388. }
  389. .vis.timeline .graphGroup6 {
  390. fill: #042662;
  391. fill-opacity:0;
  392. stroke-width:2px;
  393. stroke: #042662;
  394. }
  395. .vis.timeline .graphGroup7 {
  396. fill:#00ff26;
  397. fill-opacity:0;
  398. stroke-width:2px;
  399. stroke: #00ff26;
  400. }
  401. .vis.timeline .graphGroup8 {
  402. fill:#ff00ff;
  403. fill-opacity:0;
  404. stroke-width:2px;
  405. stroke: #ff00ff;
  406. }
  407. .vis.timeline .graphGroup9 {
  408. fill: #8f3938;
  409. fill-opacity:0;
  410. stroke-width:2px;
  411. stroke: #8f3938;
  412. }
  413. .vis.timeline .fill {
  414. fill-opacity:0.1;
  415. stroke: none;
  416. }
  417. .vis.timeline .bar {
  418. fill-opacity:0.5;
  419. stroke-width:1px;
  420. }
  421. .vis.timeline .point {
  422. stroke-width:2px;
  423. fill-opacity:1.0;
  424. }
  425. .vis.timeline .legendBackground {
  426. stroke-width:1px;
  427. fill-opacity:0.9;
  428. fill: #ffffff;
  429. stroke: #c2c2c2;
  430. }
  431. .vis.timeline .outline {
  432. stroke-width:1px;
  433. fill-opacity:1;
  434. fill: #ffffff;
  435. stroke: #e5e5e5;
  436. }
  437. .vis.timeline .iconFill {
  438. fill-opacity:0.3;
  439. stroke: none;
  440. }
  441. div.network-manipulationDiv {
  442. border-width: 0;
  443. border-bottom: 1px;
  444. border-style:solid;
  445. border-color: #d6d9d8;
  446. background: #ffffff; /* Old browsers */
  447. background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
  448. 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+ */
  449. background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
  450. background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
  451. background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
  452. background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
  453. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
  454. position: absolute;
  455. left: 0;
  456. top: 0;
  457. width: 100%;
  458. height: 30px;
  459. }
  460. div.network-manipulation-editMode {
  461. position:absolute;
  462. left: 0;
  463. top: 0;
  464. height: 30px;
  465. margin-top:20px;
  466. }
  467. div.network-manipulation-closeDiv {
  468. position:absolute;
  469. right: 0;
  470. top: 0;
  471. width: 30px;
  472. height: 30px;
  473. background-position: 20px 3px;
  474. background-repeat: no-repeat;
  475. background-image: url("img/network/cross.png");
  476. cursor: pointer;
  477. -webkit-touch-callout: none;
  478. -webkit-user-select: none;
  479. -khtml-user-select: none;
  480. -moz-user-select: none;
  481. -ms-user-select: none;
  482. user-select: none;
  483. }
  484. div.network-manipulation-closeDiv:hover {
  485. opacity: 0.6;
  486. }
  487. span.network-manipulationUI {
  488. font-family: verdana;
  489. font-size: 12px;
  490. -moz-border-radius: 15px;
  491. border-radius: 15px;
  492. display:inline-block;
  493. background-position: 0px 0px;
  494. background-repeat:no-repeat;
  495. height:24px;
  496. margin: -14px 0px 0px 10px;
  497. vertical-align:middle;
  498. cursor: pointer;
  499. padding: 0px 8px 0px 8px;
  500. -webkit-touch-callout: none;
  501. -webkit-user-select: none;
  502. -khtml-user-select: none;
  503. -moz-user-select: none;
  504. -ms-user-select: none;
  505. user-select: none;
  506. }
  507. span.network-manipulationUI:hover {
  508. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
  509. }
  510. span.network-manipulationUI:active {
  511. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
  512. }
  513. span.network-manipulationUI.back {
  514. background-image: url("img/network/backIcon.png");
  515. }
  516. span.network-manipulationUI.none:hover {
  517. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
  518. cursor: default;
  519. }
  520. span.network-manipulationUI.none:active {
  521. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
  522. }
  523. span.network-manipulationUI.none {
  524. padding: 0;
  525. }
  526. span.network-manipulationUI.notification{
  527. margin: 2px;
  528. font-weight: bold;
  529. }
  530. span.network-manipulationUI.add {
  531. background-image: url("img/network/addNodeIcon.png");
  532. }
  533. span.network-manipulationUI.edit {
  534. background-image: url("img/network/editIcon.png");
  535. }
  536. span.network-manipulationUI.edit.editmode {
  537. background-color: #fcfcfc;
  538. border-style:solid;
  539. border-width:1px;
  540. border-color: #cccccc;
  541. }
  542. span.network-manipulationUI.connect {
  543. background-image: url("img/network/connectIcon.png");
  544. }
  545. span.network-manipulationUI.delete {
  546. background-image: url("img/network/deleteIcon.png");
  547. }
  548. /* top right bottom left */
  549. span.network-manipulationLabel {
  550. margin: 0px 0px 0px 23px;
  551. line-height: 25px;
  552. }
  553. div.network-seperatorLine {
  554. display:inline-block;
  555. width:1px;
  556. height:20px;
  557. background-color: #bdbdbd;
  558. margin: 5px 7px 0px 15px;
  559. }
  560. div.network-navigation_wrapper {
  561. position: absolute;
  562. left: 0;
  563. top: 0;
  564. width: 100%;
  565. height: 100%;
  566. }
  567. div.network-navigation {
  568. width:34px;
  569. height:34px;
  570. -moz-border-radius: 17px;
  571. border-radius: 17px;
  572. position:absolute;
  573. display:inline-block;
  574. background-position: 2px 2px;
  575. background-repeat:no-repeat;
  576. cursor: pointer;
  577. -webkit-touch-callout: none;
  578. -webkit-user-select: none;
  579. -khtml-user-select: none;
  580. -moz-user-select: none;
  581. -ms-user-select: none;
  582. user-select: none;
  583. }
  584. div.network-navigation:hover {
  585. box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
  586. }
  587. div.network-navigation:active {
  588. box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
  589. }
  590. div.network-navigation.up {
  591. background-image: url("img/network/upArrow.png");
  592. bottom:50px;
  593. left:55px;
  594. }
  595. div.network-navigation.down {
  596. background-image: url("img/network/downArrow.png");
  597. bottom:10px;
  598. left:55px;
  599. }
  600. div.network-navigation.left {
  601. background-image: url("img/network/leftArrow.png");
  602. bottom:10px;
  603. left:15px;
  604. }
  605. div.network-navigation.right {
  606. background-image: url("img/network/rightArrow.png");
  607. bottom:10px;
  608. left:95px;
  609. }
  610. div.network-navigation.zoomIn {
  611. background-image: url("img/network/plus.png");
  612. bottom:10px;
  613. right:15px;
  614. }
  615. div.network-navigation.zoomOut {
  616. background-image: url("img/network/minus.png");
  617. bottom:10px;
  618. right:55px;
  619. }
  620. div.network-navigation.zoomExtends {
  621. background-image: url("img/network/zoomExtends.png");
  622. bottom:50px;
  623. right:15px;
  624. }