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.

793 lines
15 KiB

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