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.

1250 lines
28 KiB

9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
9 years ago
10 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
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. /* 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. position: relative;
  20. border: 1px solid #bfbfbf;
  21. overflow: hidden;
  22. padding: 0;
  23. margin: 0;
  24. box-sizing: border-box;
  25. }
  26. .vis-panel {
  27. position: absolute;
  28. padding: 0;
  29. margin: 0;
  30. box-sizing: border-box;
  31. }
  32. .vis-panel.vis-center,
  33. .vis-panel.vis-left,
  34. .vis-panel.vis-right,
  35. .vis-panel.vis-top,
  36. .vis-panel.vis-bottom {
  37. border: 1px #bfbfbf;
  38. }
  39. .vis-panel.vis-center,
  40. .vis-panel.vis-left,
  41. .vis-panel.vis-right {
  42. border-top-style: solid;
  43. border-bottom-style: solid;
  44. overflow: hidden;
  45. }
  46. .vis-panel.vis-center,
  47. .vis-panel.vis-top,
  48. .vis-panel.vis-bottom {
  49. border-left-style: solid;
  50. border-right-style: solid;
  51. }
  52. .vis-background {
  53. overflow: hidden;
  54. }
  55. .vis-panel > .vis-content {
  56. position: relative;
  57. }
  58. .vis-panel .vis-shadow {
  59. position: absolute;
  60. width: 100%;
  61. height: 1px;
  62. box-shadow: 0 0 10px rgba(0,0,0,0.8);
  63. /* TODO: find a nice way to ensure vis-shadows are drawn on top of items
  64. z-index: 1;
  65. */
  66. }
  67. .vis-panel .vis-shadow.vis-top {
  68. top: -1px;
  69. left: 0;
  70. }
  71. .vis-panel .vis-shadow.vis-bottom {
  72. bottom: -1px;
  73. left: 0;
  74. }
  75. .vis-labelset {
  76. position: relative;
  77. overflow: hidden;
  78. box-sizing: border-box;
  79. }
  80. .vis-labelset .vis-label {
  81. position: relative;
  82. left: 0;
  83. top: 0;
  84. width: 100%;
  85. color: #4d4d4d;
  86. box-sizing: border-box;
  87. }
  88. .vis-labelset .vis-label {
  89. border-bottom: 1px solid #bfbfbf;
  90. }
  91. .vis-labelset .vis-label:last-child {
  92. border-bottom: none;
  93. }
  94. .vis-labelset .vis-label .vis-inner {
  95. display: inline-block;
  96. padding: 5px;
  97. }
  98. .vis-labelset .vis-label .vis-inner.vis-hidden {
  99. padding: 0;
  100. }
  101. .vis-itemset {
  102. position: relative;
  103. padding: 0;
  104. margin: 0;
  105. box-sizing: border-box;
  106. }
  107. .vis-itemset .vis-background,
  108. .vis-itemset .vis-foreground {
  109. position: absolute;
  110. width: 100%;
  111. height: 100%;
  112. overflow: visible;
  113. }
  114. .vis-axis {
  115. position: absolute;
  116. width: 100%;
  117. height: 0;
  118. left: 0;
  119. z-index: 1;
  120. }
  121. .vis-foreground .vis-group {
  122. position: relative;
  123. box-sizing: border-box;
  124. border-bottom: 1px solid #bfbfbf;
  125. }
  126. .vis-foreground .vis-group:last-child {
  127. border-bottom: none;
  128. }
  129. .vis-overlay {
  130. position: absolute;
  131. top: 0;
  132. left: 0;
  133. width: 100%;
  134. height: 100%;
  135. z-index: 10;
  136. }
  137. .vis-item {
  138. position: absolute;
  139. color: #1A1A1A;
  140. border-color: #97B0F8;
  141. border-width: 1px;
  142. background-color: #D5DDF6;
  143. display: inline-block;
  144. /*overflow: hidden;*/
  145. }
  146. .vis-item.vis-selected {
  147. border-color: #FFC200;
  148. background-color: #FFF785;
  149. /* z-index must be higher than the z-index of custom time bar and current time bar */
  150. z-index: 2;
  151. }
  152. .vis-editable.vis-selected {
  153. cursor: move;
  154. }
  155. .vis-item.vis-point.vis-selected {
  156. background-color: #FFF785;
  157. }
  158. .vis-item.vis-box {
  159. text-align: center;
  160. border-style: solid;
  161. border-radius: 2px;
  162. }
  163. .vis-item.vis-point {
  164. background: none;
  165. }
  166. .vis-item.vis-dot {
  167. position: absolute;
  168. padding: 0;
  169. border-width: 4px;
  170. border-style: solid;
  171. border-radius: 4px;
  172. }
  173. .vis-item.vis-range {
  174. border-style: solid;
  175. border-radius: 2px;
  176. box-sizing: border-box;
  177. }
  178. .vis-item.vis-background {
  179. border: none;
  180. background-color: rgba(213, 221, 246, 0.4);
  181. box-sizing: border-box;
  182. padding: 0;
  183. margin: 0;
  184. }
  185. .vis-item .vis-item-overflow {
  186. position: relative;
  187. width: 100%;
  188. height: 100%;
  189. padding: 0;
  190. margin: 0;
  191. overflow: hidden;
  192. }
  193. .vis-item.vis-range .vis-item-content {
  194. position: relative;
  195. display: inline-block;
  196. }
  197. .vis-item.vis-background .vis-item-content {
  198. position: absolute;
  199. display: inline-block;
  200. }
  201. .vis-item.vis-line {
  202. padding: 0;
  203. position: absolute;
  204. width: 0;
  205. border-left-width: 1px;
  206. border-left-style: solid;
  207. }
  208. .vis-item .vis-item-content {
  209. white-space: nowrap;
  210. box-sizing: border-box;
  211. padding: 5px;
  212. }
  213. .vis-item .vis-delete {
  214. background: url('img/timeline/delete.png') no-repeat center;
  215. position: absolute;
  216. width: 24px;
  217. height: 24px;
  218. top: -4px;
  219. right: -24px;
  220. cursor: pointer;
  221. }
  222. .vis-item.vis-range .vis-drag-left {
  223. position: absolute;
  224. width: 24px;
  225. max-width: 20%;
  226. min-width: 2px;
  227. height: 100%;
  228. top: 0;
  229. left: -4px;
  230. cursor: w-resize;
  231. }
  232. .vis-item.vis-range .vis-drag-right {
  233. position: absolute;
  234. width: 24px;
  235. max-width: 20%;
  236. min-width: 2px;
  237. height: 100%;
  238. top: 0;
  239. right: -4px;
  240. cursor: e-resize;
  241. }
  242. .vis-time-axis {
  243. position: relative;
  244. overflow: hidden;
  245. }
  246. .vis-time-axis.vis-foreground {
  247. top: 0;
  248. left: 0;
  249. width: 100%;
  250. }
  251. .vis-time-axis.vis-background {
  252. position: absolute;
  253. top: 0;
  254. left: 0;
  255. width: 100%;
  256. height: 100%;
  257. }
  258. .vis-time-axis .vis-text {
  259. position: absolute;
  260. color: #4d4d4d;
  261. padding: 3px;
  262. overflow: hidden;
  263. box-sizing: border-box;
  264. white-space: nowrap;
  265. }
  266. .vis-time-axis .vis-text.vis-measure {
  267. position: absolute;
  268. padding-left: 0;
  269. padding-right: 0;
  270. margin-left: 0;
  271. margin-right: 0;
  272. visibility: hidden;
  273. }
  274. .vis-time-axis .vis-grid.vis-vertical {
  275. position: absolute;
  276. border-left: 1px solid;
  277. }
  278. .vis-time-axis .vis-grid.vis-minor {
  279. border-color: #e5e5e5;
  280. }
  281. .vis-time-axis .vis-grid.vis-major {
  282. border-color: #bfbfbf;
  283. }
  284. .vis-current-time {
  285. background-color: #FF7F6E;
  286. width: 2px;
  287. z-index: 1;
  288. }
  289. .vis-custom-time {
  290. background-color: #6E94FF;
  291. width: 2px;
  292. cursor: move;
  293. z-index: 1;
  294. }
  295. .vis-timeline {
  296. /*
  297. -webkit-transition: height .4s ease-in-out;
  298. transition: height .4s ease-in-out;
  299. */
  300. }
  301. .vis-panel {
  302. /*
  303. -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
  304. transition: height .4s ease-in-out, top .4s ease-in-out;
  305. */
  306. }
  307. .vis-axis {
  308. /*
  309. -webkit-transition: top .4s ease-in-out;
  310. transition: top .4s ease-in-out;
  311. */
  312. }
  313. /* TODO: get animation working nicely
  314. .vis-item {
  315. -webkit-transition: top .4s ease-in-out;
  316. transition: top .4s ease-in-out;
  317. }
  318. .vis-item.line {
  319. -webkit-transition: height .4s ease-in-out, top .4s ease-in-out;
  320. transition: height .4s ease-in-out, top .4s ease-in-out;
  321. }
  322. /**/
  323. .vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal {
  324. position: absolute;
  325. width: 100%;
  326. height: 0;
  327. border-bottom: 1px solid;
  328. }
  329. .vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor {
  330. border-color: #e5e5e5;
  331. }
  332. .vis-panel.vis-background.vis-horizontal .vis-grid.vis-major {
  333. border-color: #bfbfbf;
  334. }
  335. .vis-data-axis .vis-y-axis.vis-major {
  336. width: 100%;
  337. position: absolute;
  338. color: #4d4d4d;
  339. white-space: nowrap;
  340. }
  341. .vis-data-axis .vis-y-axis.vis-major.vis-measure {
  342. padding: 0;
  343. margin: 0;
  344. border: 0;
  345. visibility: hidden;
  346. width: auto;
  347. }
  348. .vis-data-axis .vis-y-axis.vis-minor {
  349. position: absolute;
  350. width: 100%;
  351. color: #bebebe;
  352. white-space: nowrap;
  353. }
  354. .vis-data-axis .vis-y-axis.vis-minor.vis-measure {
  355. padding: 0;
  356. margin: 0;
  357. border: 0;
  358. visibility: hidden;
  359. width: auto;
  360. }
  361. .vis-data-axis .vis-y-axis.vis-title {
  362. position: absolute;
  363. color: #4d4d4d;
  364. white-space: nowrap;
  365. bottom: 20px;
  366. text-align: center;
  367. }
  368. .vis-data-axis .vis-y-axis.vis-title.vis-measure {
  369. padding: 0;
  370. margin: 0;
  371. visibility: hidden;
  372. width: auto;
  373. }
  374. .vis-data-axis .vis-y-axis.vis-title.vis-left {
  375. bottom: 0;
  376. -webkit-transform-origin: left top;
  377. -moz-transform-origin: left top;
  378. -ms-transform-origin: left top;
  379. -o-transform-origin: left top;
  380. transform-origin: left 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-data-axis .vis-y-axis.vis-title.vis-right {
  388. bottom: 0;
  389. -webkit-transform-origin: right bottom;
  390. -moz-transform-origin: right bottom;
  391. -ms-transform-origin: right bottom;
  392. -o-transform-origin: right bottom;
  393. transform-origin: right bottom;
  394. -webkit-transform: rotate(90deg);
  395. -moz-transform: rotate(90deg);
  396. -ms-transform: rotate(90deg);
  397. -o-transform: rotate(90deg);
  398. transform: rotate(90deg);
  399. }
  400. .vis-legend {
  401. background-color: rgba(247, 252, 255, 0.65);
  402. padding: 5px;
  403. border: 1px solid #b3b3b3;
  404. box-shadow: 2px 2px 10px rgba(154, 154, 154, 0.55);
  405. }
  406. .vis-legend-text {
  407. /*font-size: 10px;*/
  408. white-space: nowrap;
  409. display: inline-block
  410. }
  411. .vis-graph-group0 {
  412. fill:#4f81bd;
  413. fill-opacity:0;
  414. stroke-width:2px;
  415. stroke: #4f81bd;
  416. }
  417. .vis-graph-group1 {
  418. fill:#f79646;
  419. fill-opacity:0;
  420. stroke-width:2px;
  421. stroke: #f79646;
  422. }
  423. .vis-graph-group2 {
  424. fill: #8c51cf;
  425. fill-opacity:0;
  426. stroke-width:2px;
  427. stroke: #8c51cf;
  428. }
  429. .vis-graph-group3 {
  430. fill: #75c841;
  431. fill-opacity:0;
  432. stroke-width:2px;
  433. stroke: #75c841;
  434. }
  435. .vis-graph-group4 {
  436. fill: #ff0100;
  437. fill-opacity:0;
  438. stroke-width:2px;
  439. stroke: #ff0100;
  440. }
  441. .vis-graph-group5 {
  442. fill: #37d8e6;
  443. fill-opacity:0;
  444. stroke-width:2px;
  445. stroke: #37d8e6;
  446. }
  447. .vis-graph-group6 {
  448. fill: #042662;
  449. fill-opacity:0;
  450. stroke-width:2px;
  451. stroke: #042662;
  452. }
  453. .vis-graph-group7 {
  454. fill:#00ff26;
  455. fill-opacity:0;
  456. stroke-width:2px;
  457. stroke: #00ff26;
  458. }
  459. .vis-graph-group8 {
  460. fill:#ff00ff;
  461. fill-opacity:0;
  462. stroke-width:2px;
  463. stroke: #ff00ff;
  464. }
  465. .vis-graph-group9 {
  466. fill: #8f3938;
  467. fill-opacity:0;
  468. stroke-width:2px;
  469. stroke: #8f3938;
  470. }
  471. .vis-timeline .vis-fill {
  472. fill-opacity:0.1;
  473. stroke: none;
  474. }
  475. .vis-timeline .vis-bar {
  476. fill-opacity:0.5;
  477. stroke-width:1px;
  478. }
  479. .vis-timeline .vis-point {
  480. stroke-width:2px;
  481. fill-opacity:1.0;
  482. }
  483. .vis-timeline .vis-legend-background {
  484. stroke-width:1px;
  485. fill-opacity:0.9;
  486. fill: #ffffff;
  487. stroke: #c2c2c2;
  488. }
  489. .vis-timeline .vis-outline {
  490. stroke-width:1px;
  491. fill-opacity:1;
  492. fill: #ffffff;
  493. stroke: #e5e5e5;
  494. }
  495. .vis-timeline .vis-icon-fill {
  496. fill-opacity:0.3;
  497. stroke: none;
  498. }
  499. div.vis-network div.vis-manipulation {
  500. border-width: 0;
  501. border-bottom: 1px;
  502. border-style:solid;
  503. border-color: #d6d9d8;
  504. background: #ffffff; /* Old browsers */
  505. background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
  506. 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+ */
  507. background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
  508. background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
  509. background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
  510. background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
  511. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
  512. position: absolute;
  513. left: 0;
  514. top: 0;
  515. width: 100%;
  516. height: 30px;
  517. }
  518. div.vis-network div.vis-edit-mode {
  519. position:absolute;
  520. left: 0;
  521. top: 15px;
  522. height: 30px;
  523. }
  524. /* FIXME: shouldn't the vis-close button be a child of the vis-manipulation div? */
  525. div.vis-network div.vis-close {
  526. position:absolute;
  527. right: 0;
  528. top: 0;
  529. width: 30px;
  530. height: 30px;
  531. background-position: 20px 3px;
  532. background-repeat: no-repeat;
  533. background-image: url("img/network/cross.png");
  534. cursor: pointer;
  535. -webkit-touch-callout: none;
  536. -webkit-user-select: none;
  537. -khtml-user-select: none;
  538. -moz-user-select: none;
  539. -ms-user-select: none;
  540. user-select: none;
  541. }
  542. div.vis-network div.vis-close:hover {
  543. opacity: 0.6;
  544. }
  545. div.vis-network div.vis-manipulation div.vis-button,
  546. div.vis-network div.vis-edit-mode div.vis-button {
  547. position:relative;
  548. top:-7px;
  549. font-family: verdana;
  550. font-size: 12px;
  551. -moz-border-radius: 15px;
  552. border-radius: 15px;
  553. display:inline-block;
  554. background-position: 0px 0px;
  555. background-repeat:no-repeat;
  556. height:24px;
  557. margin: 0px 0px 0px 10px;
  558. vertical-align:middle;
  559. cursor: pointer;
  560. padding: 0px 8px 0px 8px;
  561. -webkit-touch-callout: none;
  562. -webkit-user-select: none;
  563. -khtml-user-select: none;
  564. -moz-user-select: none;
  565. -ms-user-select: none;
  566. user-select: none;
  567. }
  568. div.vis-network div.vis-manipulation div.vis-button:hover {
  569. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
  570. }
  571. div.vis-network div.vis-manipulation div.vis-button:active {
  572. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
  573. }
  574. div.vis-network div.vis-manipulation div.vis-button.vis-back {
  575. background-image: url("img/network/backIcon.png");
  576. }
  577. div.vis-network div.vis-manipulation div.vis-button.vis-none:hover {
  578. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
  579. cursor: default;
  580. }
  581. div.vis-network div.vis-manipulation div.vis-button.vis-none:active {
  582. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
  583. }
  584. div.vis-network div.vis-manipulation div.vis-button.vis-none {
  585. padding: 0;
  586. }
  587. div.vis-network div.vis-manipulation div.notification {
  588. margin: 2px;
  589. font-weight: bold;
  590. }
  591. div.vis-network div.vis-manipulation div.vis-button.vis-add {
  592. background-image: url("img/network/addNodeIcon.png");
  593. }
  594. div.vis-network div.vis-manipulation div.vis-button.vis-edit,
  595. div.vis-network div.vis-edit-mode div.vis-button.vis-edit {
  596. background-image: url("img/network/editIcon.png");
  597. }
  598. div.vis-network div.vis-edit-mode div.vis-button.vis-edit.vis-edit-mode {
  599. background-color: #fcfcfc;
  600. border: 1px solid #cccccc;
  601. }
  602. div.vis-network div.vis-manipulation div.vis-button.vis-connect {
  603. background-image: url("img/network/connectIcon.png");
  604. }
  605. div.vis-network div.vis-manipulation div.vis-button.vis-delete {
  606. background-image: url("img/network/deleteIcon.png");
  607. }
  608. /* top right bottom left */
  609. div.vis-network div.vis-manipulation div.vis-label,
  610. div.vis-network div.vis-edit-mode div.vis-label {
  611. margin: 0 0 0 23px;
  612. line-height: 25px;
  613. }
  614. div.vis-network div.vis-manipulation div.vis-separator-line {
  615. display:inline-block;
  616. width:1px;
  617. height:20px;
  618. background-color: #bdbdbd;
  619. margin: 5px 7px 0 15px;
  620. }
  621. /* TODO: is this redundant?
  622. div.network-navigation_wrapper {
  623. position: absolute;
  624. left: 0;
  625. top: 0;
  626. width: 100%;
  627. height: 100%;
  628. }
  629. */
  630. div.vis-network div.vis-navigation div.vis-button {
  631. width:34px;
  632. height:34px;
  633. -moz-border-radius: 17px;
  634. border-radius: 17px;
  635. position:absolute;
  636. display:inline-block;
  637. background-position: 2px 2px;
  638. background-repeat:no-repeat;
  639. cursor: pointer;
  640. -webkit-touch-callout: none;
  641. -webkit-user-select: none;
  642. -khtml-user-select: none;
  643. -moz-user-select: none;
  644. -ms-user-select: none;
  645. user-select: none;
  646. }
  647. div.vis-network div.vis-navigation div.vis-button:hover {
  648. box-shadow: 0 0 3px 3px rgba(56, 207, 21, 0.30);
  649. }
  650. div.vis-network div.vis-navigation div.vis-button:active {
  651. box-shadow: 0 0 1px 3px rgba(56, 207, 21, 0.95);
  652. }
  653. div.vis-network div.vis-navigation div.vis-button.vis-up {
  654. background-image: url("img/network/upArrow.png");
  655. bottom:50px;
  656. left:55px;
  657. }
  658. div.vis-network div.vis-navigation div.vis-button.vis-down {
  659. background-image: url("img/network/downArrow.png");
  660. bottom:10px;
  661. left:55px;
  662. }
  663. div.vis-network div.vis-navigation div.vis-button.vis-left {
  664. background-image: url("img/network/leftArrow.png");
  665. bottom:10px;
  666. left:15px;
  667. }
  668. div.vis-network div.vis-navigation div.vis-button.vis-right {
  669. background-image: url("img/network/rightArrow.png");
  670. bottom:10px;
  671. left:95px;
  672. }
  673. div.vis-network div.vis-navigation div.vis-button.vis-zoomIn {
  674. background-image: url("img/network/plus.png");
  675. bottom:10px;
  676. right:15px;
  677. }
  678. div.vis-network div.vis-navigation div.vis-button.vis-zoomOut {
  679. background-image: url("img/network/minus.png");
  680. bottom:10px;
  681. right:55px;
  682. }
  683. div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
  684. background-image: url("img/network/zoomExtends.png");
  685. bottom:50px;
  686. right:15px;
  687. }
  688. div.vis-network-tooltip {
  689. position: absolute;
  690. visibility: hidden;
  691. padding: 5px;
  692. white-space: nowrap;
  693. font-family: verdana;
  694. font-size:14px;
  695. font-color:#000000;
  696. background-color: #f5f4ed;
  697. -moz-border-radius: 3px;
  698. -webkit-border-radius: 3px;
  699. border-radius: 3px;
  700. border: 1px solid #808074;
  701. box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  702. pointer-events: none;
  703. }
  704. div.vis-network-configuration {
  705. position:relative;
  706. display:block;
  707. float:left;
  708. font-size:12px;
  709. }
  710. div.vis-network-configuration-wrapper {
  711. display:block;
  712. width:700px;
  713. }
  714. div.vis-network-configuration.vis-option-container{
  715. display:block;
  716. width:495px;
  717. background-color: #ffffff;
  718. border:2px solid #f7f8fa;
  719. border-radius:4px;
  720. margin-top:20px;
  721. left:10px;
  722. padding-left:5px;
  723. }
  724. div.vis-network-configuration.button{
  725. display:block;
  726. width:495px;
  727. height:25px;
  728. vertical-align: middle;
  729. line-height:25px;
  730. background-color: #f7f8fa;
  731. border:2px solid #ceced0;
  732. border-radius:4px;
  733. margin-top:20px;
  734. left:10px;
  735. padding-left:5px;
  736. cursor: pointer;
  737. margin-bottom:30px;
  738. }
  739. div.vis-network-configuration.button.hover{
  740. background-color: #4588e6;
  741. border:2px solid #214373;
  742. color:#ffffff;
  743. }
  744. div.vis-network-configuration.item{
  745. display:block;
  746. float:left;
  747. width:495px;
  748. height:25px;
  749. vertical-align: middle;
  750. line-height:25px;
  751. }
  752. div.vis-network-configuration.item.s2{
  753. left:10px;
  754. background-color: #f7f8fa;
  755. padding-left:5px;
  756. border-radius:3px;
  757. }
  758. div.vis-network-configuration.item.s3{
  759. left:20px;
  760. background-color: #e4e9f0;
  761. padding-left:5px;
  762. border-radius:3px;
  763. }
  764. div.vis-network-configuration.item.s4{
  765. left:30px;
  766. background-color: #cfd8e6;
  767. padding-left:5px;
  768. border-radius:3px;
  769. }
  770. div.vis-network-configuration.header{
  771. font-size:18px;
  772. font-weight: bold;
  773. }
  774. div.vis-network-configuration.label{
  775. width:120px;
  776. height:25px;
  777. line-height: 25px;
  778. }
  779. div.vis-network-configuration.label.s3{
  780. width:110px;
  781. }
  782. div.vis-network-configuration.label.s4{
  783. width:100px;
  784. }
  785. div.vis-network-configuration.colorBlock{
  786. top:1px;
  787. width:30px;
  788. height:19px;
  789. border:1px solid #444444;
  790. border-radius:2px;
  791. padding:0px;
  792. margin:0px;
  793. cursor:pointer;
  794. }
  795. input.vis-network-configuration.checkbox {
  796. left:-5px;
  797. }
  798. input.vis-network-configuration.rangeinput{
  799. position:relative;
  800. top:-5px;
  801. width:60px;
  802. height:13px;
  803. padding:1px;
  804. margin:0;
  805. pointer-events:none;
  806. }
  807. input.vis-network-configuration.range{
  808. /*removes default webkit styles*/
  809. -webkit-appearance: none;
  810. /*fix for FF unable to apply focus style bug */
  811. border: 0px solid white;
  812. background-color:rgba(0,0,0,0);
  813. /*required for proper track sizing in FF*/
  814. width: 300px;
  815. height:20px;
  816. }
  817. input.vis-network-configuration.range::-webkit-slider-runnable-track {
  818. width: 300px;
  819. height: 5px;
  820. background: #dedede; /* Old browsers */
  821. background: -moz-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* FF3.6+ */
  822. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
  823. background: -webkit-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
  824. background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */
  825. background: -ms-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* IE10+ */
  826. background: linear-gradient(to bottom, #dedede 0%,#c8c8c8 99%); /* W3C */
  827. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
  828. border: 1px solid #999999;
  829. box-shadow: #aaaaaa 0px 0px 3px 0px;
  830. border-radius: 3px;
  831. }
  832. input.vis-network-configuration.range::-webkit-slider-thumb {
  833. -webkit-appearance: none;
  834. border: 1px solid #14334b;
  835. height: 17px;
  836. width: 17px;
  837. border-radius: 50%;
  838. background: #3876c2; /* Old browsers */
  839. background: -moz-linear-gradient(top, #3876c2 0%, #385380 100%); /* FF3.6+ */
  840. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3876c2), color-stop(100%,#385380)); /* Chrome,Safari4+ */
  841. background: -webkit-linear-gradient(top, #3876c2 0%,#385380 100%); /* Chrome10+,Safari5.1+ */
  842. background: -o-linear-gradient(top, #3876c2 0%,#385380 100%); /* Opera 11.10+ */
  843. background: -ms-linear-gradient(top, #3876c2 0%,#385380 100%); /* IE10+ */
  844. background: linear-gradient(to bottom, #3876c2 0%,#385380 100%); /* W3C */
  845. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3876c2', endColorstr='#385380',GradientType=0 ); /* IE6-9 */
  846. box-shadow: #111927 0px 0px 1px 0px;
  847. margin-top: -7px;
  848. }
  849. input.vis-network-configuration.range:focus {
  850. outline: none;
  851. }
  852. input.vis-network-configuration.range:focus::-webkit-slider-runnable-track {
  853. background: #9d9d9d; /* Old browsers */
  854. background: -moz-linear-gradient(top, #9d9d9d 0%, #c8c8c8 99%); /* FF3.6+ */
  855. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9d9d9d), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
  856. background: -webkit-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
  857. background: -o-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* Opera 11.10+ */
  858. background: -ms-linear-gradient(top, #9d9d9d 0%,#c8c8c8 99%); /* IE10+ */
  859. background: linear-gradient(to bottom, #9d9d9d 0%,#c8c8c8 99%); /* W3C */
  860. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
  861. }
  862. input.vis-network-configuration.range::-moz-range-track {
  863. width: 300px;
  864. height: 10px;
  865. background: #dedede; /* Old browsers */
  866. background: -moz-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* FF3.6+ */
  867. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dedede), color-stop(99%,#c8c8c8)); /* Chrome,Safari4+ */
  868. background: -webkit-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* Chrome10+,Safari5.1+ */
  869. background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%); /* Opera 11.10+ */
  870. background: -ms-linear-gradient(top, #dedede 0%,#c8c8c8 99%); /* IE10+ */
  871. background: linear-gradient(to bottom, #dedede 0%,#c8c8c8 99%); /* W3C */
  872. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#c8c8c8',GradientType=0 ); /* IE6-9 */
  873. border: 1px solid #999999;
  874. box-shadow: #aaaaaa 0px 0px 3px 0px;
  875. border-radius: 3px;
  876. }
  877. input.vis-network-configuration.range::-moz-range-thumb {
  878. border: none;
  879. height: 16px;
  880. width: 16px;
  881. border-radius: 50%;
  882. background: #385380;
  883. }
  884. /*hide the outline behind the border*/
  885. input.vis-network-configuration.range:-moz-focusring{
  886. outline: 1px solid white;
  887. outline-offset: -1px;
  888. }
  889. input.vis-network-configuration.range::-ms-track {
  890. width: 300px;
  891. height: 5px;
  892. /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  893. background: transparent;
  894. /*leave room for the larger thumb to overflow with a transparent border */
  895. border-color: transparent;
  896. border-width: 6px 0;
  897. /*remove default tick marks*/
  898. color: transparent;
  899. }
  900. input.vis-network-configuration.range::-ms-fill-lower {
  901. background: #777;
  902. border-radius: 10px;
  903. }
  904. input.vis-network-configuration.range::-ms-fill-upper {
  905. background: #ddd;
  906. border-radius: 10px;
  907. }
  908. input.vis-network-configuration.range::-ms-thumb {
  909. border: none;
  910. height: 16px;
  911. width: 16px;
  912. border-radius: 50%;
  913. background: #385380;
  914. }
  915. input.vis-network-configuration.range:focus::-ms-fill-lower {
  916. background: #888;
  917. }
  918. input.vis-network-configuration.range:focus::-ms-fill-upper {
  919. background: #ccc;
  920. }
  921. div.vis-color-picker {
  922. position:absolute;
  923. margin-top:-140px;
  924. margin-left:30px;
  925. width:293px;
  926. height:425px;
  927. padding: 10px;
  928. border-radius:15px;
  929. background-color:#ffffff;
  930. display:none;
  931. box-shadow: rgba(0,0,0,0.5) 0px 0px 10px 0px;
  932. }
  933. div.vis-color-picker div.vis-arrow {
  934. position: absolute;
  935. top:147px;
  936. left:5px;
  937. }
  938. div.vis-color-picker div.vis-arrow:after,
  939. div.vis-color-picker div.vis-arrow:before {
  940. right: 100%;
  941. top: 50%;
  942. border: solid transparent;
  943. content: " ";
  944. height: 0;
  945. width: 0;
  946. position: absolute;
  947. pointer-events: none;
  948. }
  949. div.vis-color-picker div.vis-arrow:after {
  950. border-color: rgba(255, 255, 255, 0);
  951. border-right-color: #ffffff;
  952. border-width: 30px;
  953. margin-top: -30px;
  954. }
  955. div.vis-color-picker div.vis-color {
  956. position:absolute;
  957. width: 289px;
  958. height: 289px;
  959. cursor: pointer;
  960. }
  961. div.vis-color-picker div.vis-brightness {
  962. position: absolute;
  963. top:313px;
  964. }
  965. div.vis-color-picker div.vis-opacity {
  966. position:absolute;
  967. top:350px;
  968. }
  969. div.vis-color-picker div.vis-selector {
  970. position:absolute;
  971. top:137px;
  972. left:137px;
  973. width:15px;
  974. height:15px;
  975. border-radius:15px;
  976. border:1px solid #ffffff;
  977. background: #4c4c4c; /* Old browsers */
  978. background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6+ */
  979. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
  980. background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10+,Safari5.1+ */
  981. background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Opera 11.10+ */
  982. background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* IE10+ */
  983. background: linear-gradient(to bottom, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C */
  984. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
  985. }
  986. div.vis-color-picker div.vis-new-color {
  987. position:absolute;
  988. width:140px;
  989. height:20px;
  990. border:1px solid rgba(0,0,0,0.1);
  991. border-radius:5px;
  992. top:380px;
  993. left:159px;
  994. text-align:right;
  995. padding-right:2px;
  996. font-size:10px;
  997. color:rgba(0,0,0,0.4);
  998. vertical-align:middle;
  999. line-height:20px;
  1000. }
  1001. div.vis-color-picker div.vis-initial-color {
  1002. position:absolute;
  1003. width:140px;
  1004. height:20px;
  1005. border:1px solid rgba(0,0,0,0.1);
  1006. border-radius:5px;
  1007. top:380px;
  1008. left:10px;
  1009. text-align:left;
  1010. padding-left:2px;
  1011. font-size:10px;
  1012. color:rgba(0,0,0,0.4);
  1013. vertical-align:middle;
  1014. line-height:20px;
  1015. }
  1016. div.vis-color-picker div.vis-label {
  1017. position:absolute;
  1018. width:300px;
  1019. left:10px;
  1020. }
  1021. div.vis-color-picker div.vis-label.vis-brightness {
  1022. top:300px;
  1023. }
  1024. div.vis-color-picker div.vis-label.vis-opacity {
  1025. top:338px;
  1026. }
  1027. div.vis-color-picker div.vis-button {
  1028. position:absolute;
  1029. width:68px;
  1030. height:25px;
  1031. border-radius:10px;
  1032. vertical-align: middle;
  1033. text-align:center;
  1034. line-height: 25px;
  1035. top:410px;
  1036. border:2px solid #d9d9d9;
  1037. background-color: #f7f7f7;
  1038. cursor:pointer;
  1039. }
  1040. div.vis-color-picker div.vis-button.vis-cancel {
  1041. /*border:2px solid #ff4e33;*/
  1042. /*background-color: #ff7761;*/
  1043. left:5px;
  1044. }
  1045. div.vis-color-picker div.vis-button.vis-load {
  1046. /*border:2px solid #a153e6;*/
  1047. /*background-color: #cb8dff;*/
  1048. left:82px;
  1049. }
  1050. div.vis-color-picker div.vis-button.vis-apply {
  1051. /*border:2px solid #4588e6;*/
  1052. /*background-color: #82b6ff;*/
  1053. left:159px;
  1054. }
  1055. div.vis-color-picker div.vis-button.vis-save {
  1056. /*border:2px solid #45e655;*/
  1057. /*background-color: #6dff7c;*/
  1058. left:236px;
  1059. }
  1060. div.vis-color-picker input.vis-range {
  1061. width: 290px;
  1062. height:20px;
  1063. }
  1064. /* TODO: is this redundant?
  1065. div.vis-color-picker input.vis-range-brightness {
  1066. width: 289px !important;
  1067. }
  1068. div.vis-color-picker input.vis-saturation-range {
  1069. width: 289px !important;
  1070. }*/