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.

744 lines
14 KiB

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