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.

1294 lines
29 KiB

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