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.

1443 lines
32 KiB

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