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.

809 lines
16 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. max-width: 20%;
  217. height: 100%;
  218. top: 0;
  219. left: -4px;
  220. cursor: w-resize;
  221. }
  222. .vis.timeline .item.range .drag-right {
  223. position: absolute;
  224. width: 24px;
  225. max-width: 20%;
  226. height: 100%;
  227. top: 0;
  228. right: -4px;
  229. cursor: e-resize;
  230. }
  231. .vis.timeline .timeaxis {
  232. position: relative;
  233. overflow: hidden;
  234. }
  235. .vis.timeline .timeaxis.foreground {
  236. top: 0;
  237. left: 0;
  238. width: 100%;
  239. }
  240. .vis.timeline .timeaxis.background {
  241. position: absolute;
  242. top: 0;
  243. left: 0;
  244. width: 100%;
  245. height: 100%;
  246. }
  247. .vis.timeline .timeaxis .text {
  248. position: absolute;
  249. color: #4d4d4d;
  250. padding: 3px;
  251. white-space: nowrap;
  252. }
  253. .vis.timeline .timeaxis .text.measure {
  254. position: absolute;
  255. padding-left: 0;
  256. padding-right: 0;
  257. margin-left: 0;
  258. margin-right: 0;
  259. visibility: hidden;
  260. }
  261. .vis.timeline .timeaxis .grid.vertical {
  262. position: absolute;
  263. border-left: 1px solid;
  264. }
  265. .vis.timeline .timeaxis .grid.minor {
  266. border-color: #e5e5e5;
  267. }
  268. .vis.timeline .timeaxis .grid.major {
  269. border-color: #bfbfbf;
  270. }
  271. .vis.timeline .currenttime {
  272. background-color: #FF7F6E;
  273. width: 2px;
  274. z-index: 1;
  275. }
  276. .vis.timeline .customtime {
  277. background-color: #6E94FF;
  278. width: 2px;
  279. cursor: move;
  280. z-index: 1;
  281. }
  282. .vis.timeline.root {
  283. /*
  284. -webkit-transition: height .4s ease-in-out;
  285. transition: height .4s ease-in-out;
  286. */
  287. }
  288. .vis.timeline .vispanel {
  289. /*
  290. -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
  291. transition: height .4s ease-in-out, top .4s ease-in-out;
  292. */
  293. }
  294. .vis.timeline .axis {
  295. /*
  296. -webkit-transition: top .4s ease-in-out;
  297. transition: top .4s ease-in-out;
  298. */
  299. }
  300. /* TODO: get animation working nicely
  301. .vis.timeline .item {
  302. -webkit-transition: top .4s ease-in-out;
  303. transition: top .4s ease-in-out;
  304. }
  305. .vis.timeline .item.line {
  306. -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
  307. transition: height .4s ease-in-out, top .4s ease-in-out;
  308. }
  309. /**/
  310. .vis.timeline .vispanel.background.horizontal .grid.horizontal {
  311. position: absolute;
  312. width: 100%;
  313. height: 0;
  314. border-bottom: 1px solid;
  315. }
  316. .vis.timeline .vispanel.background.horizontal .grid.minor {
  317. border-color: #e5e5e5;
  318. }
  319. .vis.timeline .vispanel.background.horizontal .grid.major {
  320. border-color: #bfbfbf;
  321. }
  322. .vis.timeline .dataaxis .yAxis.major {
  323. width: 100%;
  324. position: absolute;
  325. color: #4d4d4d;
  326. white-space: nowrap;
  327. }
  328. .vis.timeline .dataaxis .yAxis.major.measure{
  329. padding: 0px 0px 0px 0px;
  330. margin: 0px 0px 0px 0px;
  331. border: 0px;
  332. visibility: hidden;
  333. width: auto;
  334. }
  335. .vis.timeline .dataaxis .yAxis.minor{
  336. position: absolute;
  337. width: 100%;
  338. color: #bebebe;
  339. white-space: nowrap;
  340. }
  341. .vis.timeline .dataaxis .yAxis.minor.measure{
  342. padding: 0px 0px 0px 0px;
  343. margin: 0px 0px 0px 0px;
  344. border: 0px;
  345. visibility: hidden;
  346. width: auto;
  347. }
  348. .vis.timeline .dataaxis .yAxis.title{
  349. position: absolute;
  350. color: #4d4d4d;
  351. white-space: nowrap;
  352. bottom: 20px;
  353. text-align: center;
  354. }
  355. .vis.timeline .dataaxis .yAxis.title.measure{
  356. padding: 0px 0px 0px 0px;
  357. margin: 0px 0px 0px 0px;
  358. visibility: hidden;
  359. width: auto;
  360. }
  361. .vis.timeline .dataaxis .yAxis.title.left {
  362. bottom: 0px;
  363. -webkit-transform-origin: left top;
  364. -moz-transform-origin: left top;
  365. -ms-transform-origin: left top;
  366. -o-transform-origin: left top;
  367. transform-origin: left bottom;
  368. -webkit-transform: rotate(-90deg);
  369. -moz-transform: rotate(-90deg);
  370. -ms-transform: rotate(-90deg);
  371. -o-transform: rotate(-90deg);
  372. transform: rotate(-90deg);
  373. }
  374. .vis.timeline .dataaxis .yAxis.title.right {
  375. bottom: 0px;
  376. -webkit-transform-origin: right bottom;
  377. -moz-transform-origin: right bottom;
  378. -ms-transform-origin: right bottom;
  379. -o-transform-origin: right bottom;
  380. transform-origin: right bottom;
  381. -webkit-transform: rotate(90deg);
  382. -moz-transform: rotate(90deg);
  383. -ms-transform: rotate(90deg);
  384. -o-transform: rotate(90deg);
  385. transform: rotate(90deg);
  386. }
  387. .vis.timeline .legend {
  388. background-color: rgba(247, 252, 255, 0.65);
  389. padding: 5px;
  390. border-color: #b3b3b3;
  391. border-style:solid;
  392. border-width: 1px;
  393. box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
  394. }
  395. .vis.timeline .legendText {
  396. /*font-size: 10px;*/
  397. white-space: nowrap;
  398. display: inline-block
  399. }
  400. .vis.timeline .graphGroup0 {
  401. fill:#4f81bd;
  402. fill-opacity:0;
  403. stroke-width:2px;
  404. stroke: #4f81bd;
  405. }
  406. .vis.timeline .graphGroup1 {
  407. fill:#f79646;
  408. fill-opacity:0;
  409. stroke-width:2px;
  410. stroke: #f79646;
  411. }
  412. .vis.timeline .graphGroup2 {
  413. fill: #8c51cf;
  414. fill-opacity:0;
  415. stroke-width:2px;
  416. stroke: #8c51cf;
  417. }
  418. .vis.timeline .graphGroup3 {
  419. fill: #75c841;
  420. fill-opacity:0;
  421. stroke-width:2px;
  422. stroke: #75c841;
  423. }
  424. .vis.timeline .graphGroup4 {
  425. fill: #ff0100;
  426. fill-opacity:0;
  427. stroke-width:2px;
  428. stroke: #ff0100;
  429. }
  430. .vis.timeline .graphGroup5 {
  431. fill: #37d8e6;
  432. fill-opacity:0;
  433. stroke-width:2px;
  434. stroke: #37d8e6;
  435. }
  436. .vis.timeline .graphGroup6 {
  437. fill: #042662;
  438. fill-opacity:0;
  439. stroke-width:2px;
  440. stroke: #042662;
  441. }
  442. .vis.timeline .graphGroup7 {
  443. fill:#00ff26;
  444. fill-opacity:0;
  445. stroke-width:2px;
  446. stroke: #00ff26;
  447. }
  448. .vis.timeline .graphGroup8 {
  449. fill:#ff00ff;
  450. fill-opacity:0;
  451. stroke-width:2px;
  452. stroke: #ff00ff;
  453. }
  454. .vis.timeline .graphGroup9 {
  455. fill: #8f3938;
  456. fill-opacity:0;
  457. stroke-width:2px;
  458. stroke: #8f3938;
  459. }
  460. .vis.timeline .fill {
  461. fill-opacity:0.1;
  462. stroke: none;
  463. }
  464. .vis.timeline .bar {
  465. fill-opacity:0.5;
  466. stroke-width:1px;
  467. }
  468. .vis.timeline .point {
  469. stroke-width:2px;
  470. fill-opacity:1.0;
  471. }
  472. .vis.timeline .legendBackground {
  473. stroke-width:1px;
  474. fill-opacity:0.9;
  475. fill: #ffffff;
  476. stroke: #c2c2c2;
  477. }
  478. .vis.timeline .outline {
  479. stroke-width:1px;
  480. fill-opacity:1;
  481. fill: #ffffff;
  482. stroke: #e5e5e5;
  483. }
  484. .vis.timeline .iconFill {
  485. fill-opacity:0.3;
  486. stroke: none;
  487. }
  488. div.network-manipulationDiv {
  489. border-width: 0;
  490. border-bottom: 1px;
  491. border-style:solid;
  492. border-color: #d6d9d8;
  493. background: #ffffff; /* Old browsers */
  494. background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
  495. 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+ */
  496. background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
  497. background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
  498. background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
  499. background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
  500. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
  501. position: absolute;
  502. left: 0;
  503. top: 0;
  504. width: 100%;
  505. height: 30px;
  506. }
  507. div.network-manipulation-editMode {
  508. position:absolute;
  509. left: 0;
  510. top: 15px;
  511. height: 30px;
  512. }
  513. div.network-manipulation-closeDiv {
  514. position:absolute;
  515. right: 0;
  516. top: 0;
  517. width: 30px;
  518. height: 30px;
  519. background-position: 20px 3px;
  520. background-repeat: no-repeat;
  521. background-image: url("img/network/cross.png");
  522. cursor: pointer;
  523. -webkit-touch-callout: none;
  524. -webkit-user-select: none;
  525. -khtml-user-select: none;
  526. -moz-user-select: none;
  527. -ms-user-select: none;
  528. user-select: none;
  529. }
  530. div.network-manipulation-closeDiv:hover {
  531. opacity: 0.6;
  532. }
  533. div.network-manipulationUI {
  534. position:relative;
  535. top:-7px;
  536. font-family: verdana;
  537. font-size: 12px;
  538. -moz-border-radius: 15px;
  539. border-radius: 15px;
  540. display:inline-block;
  541. background-position: 0px 0px;
  542. background-repeat:no-repeat;
  543. height:24px;
  544. margin: 0px 0px 0px 10px;
  545. vertical-align:middle;
  546. cursor: pointer;
  547. padding: 0px 8px 0px 8px;
  548. -webkit-touch-callout: none;
  549. -webkit-user-select: none;
  550. -khtml-user-select: none;
  551. -moz-user-select: none;
  552. -ms-user-select: none;
  553. user-select: none;
  554. }
  555. div.network-manipulationUI:hover {
  556. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
  557. }
  558. div.network-manipulationUI:active {
  559. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
  560. }
  561. div.network-manipulationUI.back {
  562. background-image: url("img/network/backIcon.png");
  563. }
  564. div.network-manipulationUI.none:hover {
  565. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
  566. cursor: default;
  567. }
  568. div.network-manipulationUI.none:active {
  569. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
  570. }
  571. div.network-manipulationUI.none {
  572. padding: 0;
  573. }
  574. div.network-manipulationUI.notification{
  575. margin: 2px;
  576. font-weight: bold;
  577. }
  578. div.network-manipulationUI.add {
  579. background-image: url("img/network/addNodeIcon.png");
  580. }
  581. div.network-manipulationUI.edit {
  582. background-image: url("img/network/editIcon.png");
  583. }
  584. div.network-manipulationUI.edit.editmode {
  585. background-color: #fcfcfc;
  586. border-style:solid;
  587. border-width:1px;
  588. border-color: #cccccc;
  589. }
  590. div.network-manipulationUI.connect {
  591. background-image: url("img/network/connectIcon.png");
  592. }
  593. div.network-manipulationUI.delete {
  594. background-image: url("img/network/deleteIcon.png");
  595. }
  596. /* top right bottom left */
  597. div.network-manipulationLabel {
  598. margin: 0px 0px 0px 23px;
  599. line-height: 25px;
  600. }
  601. div.network-seperatorLine {
  602. display:inline-block;
  603. width:1px;
  604. height:20px;
  605. background-color: #bdbdbd;
  606. margin: 5px 7px 0px 15px;
  607. }
  608. div.network-navigation_wrapper {
  609. position: absolute;
  610. left: 0;
  611. top: 0;
  612. width: 100%;
  613. height: 100%;
  614. }
  615. div.network-navigation {
  616. width:34px;
  617. height:34px;
  618. -moz-border-radius: 17px;
  619. border-radius: 17px;
  620. position:absolute;
  621. display:inline-block;
  622. background-position: 2px 2px;
  623. background-repeat:no-repeat;
  624. cursor: pointer;
  625. -webkit-touch-callout: none;
  626. -webkit-user-select: none;
  627. -khtml-user-select: none;
  628. -moz-user-select: none;
  629. -ms-user-select: none;
  630. user-select: none;
  631. }
  632. div.network-navigation:hover {
  633. box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
  634. }
  635. div.network-navigation:active {
  636. box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
  637. }
  638. div.network-navigation.up {
  639. background-image: url("img/network/upArrow.png");
  640. bottom:50px;
  641. left:55px;
  642. }
  643. div.network-navigation.down {
  644. background-image: url("img/network/downArrow.png");
  645. bottom:10px;
  646. left:55px;
  647. }
  648. div.network-navigation.left {
  649. background-image: url("img/network/leftArrow.png");
  650. bottom:10px;
  651. left:15px;
  652. }
  653. div.network-navigation.right {
  654. background-image: url("img/network/rightArrow.png");
  655. bottom:10px;
  656. left:95px;
  657. }
  658. div.network-navigation.zoomIn {
  659. background-image: url("img/network/plus.png");
  660. bottom:10px;
  661. right:15px;
  662. }
  663. div.network-navigation.zoomOut {
  664. background-image: url("img/network/minus.png");
  665. bottom:10px;
  666. right:55px;
  667. }
  668. div.network-navigation.zoomExtends {
  669. background-image: url("img/network/zoomExtends.png");
  670. bottom:50px;
  671. right:15px;
  672. }
  673. div.network-tooltip {
  674. position: absolute;
  675. visibility: hidden;
  676. padding: 5px;
  677. white-space: nowrap;
  678. -moz-border-radius: 3px;
  679. -webkit-border-radius: 3px;
  680. border-radius: 3px;
  681. border: 1px solid;
  682. box-shadow: 3px 3px 10px rgba(128, 128, 128, 0.5);
  683. }