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.

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