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.

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