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.

1448 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. z-index: 1;
  795. /*overflow: hidden;*/
  796. }
  797. .vis-item.vis-selected {
  798. border-color: #FFC200;
  799. background-color: #FFF785;
  800. /* z-index must be higher than the z-index of custom time bar and current time bar */
  801. z-index: 2;
  802. }
  803. .vis-editable.vis-selected {
  804. cursor: move;
  805. }
  806. .vis-item.vis-point.vis-selected {
  807. background-color: #FFF785;
  808. }
  809. .vis-item.vis-box {
  810. text-align: center;
  811. border-style: solid;
  812. border-radius: 2px;
  813. }
  814. .vis-item.vis-point {
  815. background: none;
  816. }
  817. .vis-item.vis-dot {
  818. position: absolute;
  819. padding: 0;
  820. border-width: 4px;
  821. border-style: solid;
  822. border-radius: 4px;
  823. }
  824. .vis-item.vis-range {
  825. border-style: solid;
  826. border-radius: 2px;
  827. box-sizing: border-box;
  828. }
  829. .vis-item.vis-background {
  830. border: none;
  831. background-color: rgba(213, 221, 246, 0.4);
  832. box-sizing: border-box;
  833. padding: 0;
  834. margin: 0;
  835. }
  836. .vis-item .vis-item-overflow {
  837. position: relative;
  838. width: 100%;
  839. height: 100%;
  840. padding: 0;
  841. margin: 0;
  842. overflow: hidden;
  843. }
  844. .vis-item-visible-frame {
  845. white-space: nowrap;
  846. }
  847. .vis-item.vis-range .vis-item-content {
  848. position: relative;
  849. display: inline-block;
  850. }
  851. .vis-item.vis-background .vis-item-content {
  852. position: absolute;
  853. display: inline-block;
  854. }
  855. .vis-item.vis-line {
  856. padding: 0;
  857. position: absolute;
  858. width: 0;
  859. border-left-width: 1px;
  860. border-left-style: solid;
  861. }
  862. .vis-item .vis-item-content {
  863. white-space: nowrap;
  864. box-sizing: border-box;
  865. padding: 5px;
  866. }
  867. .vis-item .vis-onUpdateTime-tooltip {
  868. position: absolute;
  869. background: #4f81bd;
  870. color: white;
  871. width: 200px;
  872. text-align: center;
  873. white-space: nowrap;
  874. padding: 5px;
  875. border-radius: 1px;
  876. transition: 0.4s;
  877. -o-transition: 0.4s;
  878. -moz-transition: 0.4s;
  879. -webkit-transition: 0.4s;
  880. }
  881. .vis-item .vis-delete, .vis-item .vis-delete-rtl {
  882. position: absolute;
  883. top: 0px;
  884. width: 24px;
  885. height: 24px;
  886. box-sizing: border-box;
  887. padding: 0px 5px;
  888. cursor: pointer;
  889. -webkit-transition: background 0.2s linear;
  890. -moz-transition: background 0.2s linear;
  891. -ms-transition: background 0.2s linear;
  892. -o-transition: background 0.2s linear;
  893. transition: background 0.2s linear;
  894. }
  895. .vis-item .vis-delete {
  896. right: -24px;
  897. }
  898. .vis-item .vis-delete-rtl {
  899. left: -24px;
  900. }
  901. .vis-item .vis-delete:after, .vis-item .vis-delete-rtl:after {
  902. content: "\00D7"; /* MULTIPLICATION SIGN */
  903. color: red;
  904. font-family: arial, sans-serif;
  905. font-size: 22px;
  906. font-weight: bold;
  907. -webkit-transition: color 0.2s linear;
  908. -moz-transition: color 0.2s linear;
  909. -ms-transition: color 0.2s linear;
  910. -o-transition: color 0.2s linear;
  911. transition: color 0.2s linear;
  912. }
  913. .vis-item .vis-delete:hover, .vis-item .vis-delete-rtl:hover {
  914. background: red;
  915. }
  916. .vis-item .vis-delete:hover:after, .vis-item .vis-delete-rtl:hover:after {
  917. color: white;
  918. }
  919. .vis-item .vis-drag-center {
  920. position: absolute;
  921. width: 100%;
  922. height: 100%;
  923. top: 0;
  924. left: 0px;
  925. cursor: move;
  926. }
  927. .vis-item.vis-range .vis-drag-left {
  928. position: absolute;
  929. width: 24px;
  930. max-width: 20%;
  931. min-width: 2px;
  932. height: 100%;
  933. top: 0;
  934. left: -4px;
  935. cursor: w-resize;
  936. }
  937. .vis-item.vis-range .vis-drag-right {
  938. position: absolute;
  939. width: 24px;
  940. max-width: 20%;
  941. min-width: 2px;
  942. height: 100%;
  943. top: 0;
  944. right: -4px;
  945. cursor: e-resize;
  946. }
  947. .vis-range.vis-item.vis-readonly .vis-drag-left,
  948. .vis-range.vis-item.vis-readonly .vis-drag-right {
  949. cursor: auto;
  950. }
  951. .vis-itemset {
  952. position: relative;
  953. padding: 0;
  954. margin: 0;
  955. box-sizing: border-box;
  956. }
  957. .vis-itemset .vis-background,
  958. .vis-itemset .vis-foreground {
  959. position: absolute;
  960. width: 100%;
  961. height: 100%;
  962. overflow: visible;
  963. }
  964. .vis-axis {
  965. position: absolute;
  966. width: 100%;
  967. height: 0;
  968. left: 0;
  969. z-index: 1;
  970. }
  971. .vis-foreground .vis-group {
  972. position: relative;
  973. box-sizing: border-box;
  974. border-bottom: 1px solid #bfbfbf;
  975. }
  976. .vis-foreground .vis-group:last-child {
  977. border-bottom: none;
  978. }
  979. .vis-nesting-group {
  980. cursor: pointer;
  981. }
  982. .vis-nested-group {
  983. background: #f5f5f5;
  984. }
  985. .vis-label.vis-nesting-group.expanded:before {
  986. content: "\25BC";
  987. }
  988. .vis-label.vis-nesting-group.collapsed-rtl:before {
  989. content: "\25C0";
  990. }
  991. .vis-label.vis-nesting-group.collapsed:before {
  992. content: "\25B6";
  993. }
  994. .vis-overlay {
  995. position: absolute;
  996. top: 0;
  997. left: 0;
  998. width: 100%;
  999. height: 100%;
  1000. z-index: 10;
  1001. }
  1002. .vis-labelset {
  1003. position: relative;
  1004. overflow: hidden;
  1005. box-sizing: border-box;
  1006. }
  1007. .vis-labelset .vis-label {
  1008. position: relative;
  1009. left: 0;
  1010. top: 0;
  1011. width: 100%;
  1012. color: #4d4d4d;
  1013. box-sizing: border-box;
  1014. }
  1015. .vis-labelset .vis-label {
  1016. border-bottom: 1px solid #bfbfbf;
  1017. }
  1018. .vis-labelset .vis-label.draggable {
  1019. cursor: pointer;
  1020. }
  1021. .vis-labelset .vis-label:last-child {
  1022. border-bottom: none;
  1023. }
  1024. .vis-labelset .vis-label .vis-inner {
  1025. display: inline-block;
  1026. padding: 5px;
  1027. }
  1028. .vis-labelset .vis-label .vis-inner.vis-hidden {
  1029. padding: 0;
  1030. }
  1031. .vis-panel {
  1032. position: absolute;
  1033. padding: 0;
  1034. margin: 0;
  1035. box-sizing: border-box;
  1036. }
  1037. .vis-panel.vis-center,
  1038. .vis-panel.vis-left,
  1039. .vis-panel.vis-right,
  1040. .vis-panel.vis-top,
  1041. .vis-panel.vis-bottom {
  1042. border: 1px #bfbfbf;
  1043. }
  1044. .vis-panel.vis-center,
  1045. .vis-panel.vis-left,
  1046. .vis-panel.vis-right {
  1047. border-top-style: solid;
  1048. border-bottom-style: solid;
  1049. overflow: hidden;
  1050. }
  1051. .vis-left.vis-panel.vis-vertical-scroll, .vis-right.vis-panel.vis-vertical-scroll {
  1052. height: 100%;
  1053. overflow-x: hidden;
  1054. overflow-y: scroll;
  1055. }
  1056. .vis-left.vis-panel.vis-vertical-scroll {
  1057. direction: rtl;
  1058. }
  1059. .vis-left.vis-panel.vis-vertical-scroll .vis-content {
  1060. direction: ltr;
  1061. }
  1062. .vis-right.vis-panel.vis-vertical-scroll {
  1063. direction: ltr;
  1064. }
  1065. .vis-right.vis-panel.vis-vertical-scroll .vis-content {
  1066. direction: rtl;
  1067. }
  1068. .vis-panel.vis-center,
  1069. .vis-panel.vis-top,
  1070. .vis-panel.vis-bottom {
  1071. border-left-style: solid;
  1072. border-right-style: solid;
  1073. }
  1074. .vis-background {
  1075. overflow: hidden;
  1076. }
  1077. .vis-panel > .vis-content {
  1078. position: relative;
  1079. }
  1080. .vis-panel .vis-shadow {
  1081. position: absolute;
  1082. width: 100%;
  1083. height: 1px;
  1084. box-shadow: 0 0 10px rgba(0,0,0,0.8);
  1085. /* TODO: find a nice way to ensure vis-shadows are drawn on top of items
  1086. z-index: 1;
  1087. */
  1088. }
  1089. .vis-panel .vis-shadow.vis-top {
  1090. top: -1px;
  1091. left: 0;
  1092. }
  1093. .vis-panel .vis-shadow.vis-bottom {
  1094. bottom: -1px;
  1095. left: 0;
  1096. }
  1097. .vis-graph-group0 {
  1098. fill:#4f81bd;
  1099. fill-opacity:0;
  1100. stroke-width:2px;
  1101. stroke: #4f81bd;
  1102. }
  1103. .vis-graph-group1 {
  1104. fill:#f79646;
  1105. fill-opacity:0;
  1106. stroke-width:2px;
  1107. stroke: #f79646;
  1108. }
  1109. .vis-graph-group2 {
  1110. fill: #8c51cf;
  1111. fill-opacity:0;
  1112. stroke-width:2px;
  1113. stroke: #8c51cf;
  1114. }
  1115. .vis-graph-group3 {
  1116. fill: #75c841;
  1117. fill-opacity:0;
  1118. stroke-width:2px;
  1119. stroke: #75c841;
  1120. }
  1121. .vis-graph-group4 {
  1122. fill: #ff0100;
  1123. fill-opacity:0;
  1124. stroke-width:2px;
  1125. stroke: #ff0100;
  1126. }
  1127. .vis-graph-group5 {
  1128. fill: #37d8e6;
  1129. fill-opacity:0;
  1130. stroke-width:2px;
  1131. stroke: #37d8e6;
  1132. }
  1133. .vis-graph-group6 {
  1134. fill: #042662;
  1135. fill-opacity:0;
  1136. stroke-width:2px;
  1137. stroke: #042662;
  1138. }
  1139. .vis-graph-group7 {
  1140. fill:#00ff26;
  1141. fill-opacity:0;
  1142. stroke-width:2px;
  1143. stroke: #00ff26;
  1144. }
  1145. .vis-graph-group8 {
  1146. fill:#ff00ff;
  1147. fill-opacity:0;
  1148. stroke-width:2px;
  1149. stroke: #ff00ff;
  1150. }
  1151. .vis-graph-group9 {
  1152. fill: #8f3938;
  1153. fill-opacity:0;
  1154. stroke-width:2px;
  1155. stroke: #8f3938;
  1156. }
  1157. .vis-timeline .vis-fill {
  1158. fill-opacity:0.1;
  1159. stroke: none;
  1160. }
  1161. .vis-timeline .vis-bar {
  1162. fill-opacity:0.5;
  1163. stroke-width:1px;
  1164. }
  1165. .vis-timeline .vis-point {
  1166. stroke-width:2px;
  1167. fill-opacity:1.0;
  1168. }
  1169. .vis-timeline .vis-legend-background {
  1170. stroke-width:1px;
  1171. fill-opacity:0.9;
  1172. fill: #ffffff;
  1173. stroke: #c2c2c2;
  1174. }
  1175. .vis-timeline .vis-outline {
  1176. stroke-width:1px;
  1177. fill-opacity:1;
  1178. fill: #ffffff;
  1179. stroke: #e5e5e5;
  1180. }
  1181. .vis-timeline .vis-icon-fill {
  1182. fill-opacity:0.3;
  1183. stroke: none;
  1184. }
  1185. .vis-time-axis {
  1186. position: relative;
  1187. overflow: hidden;
  1188. }
  1189. .vis-time-axis.vis-foreground {
  1190. top: 0;
  1191. left: 0;
  1192. width: 100%;
  1193. }
  1194. .vis-time-axis.vis-background {
  1195. position: absolute;
  1196. top: 0;
  1197. left: 0;
  1198. width: 100%;
  1199. height: 100%;
  1200. }
  1201. .vis-time-axis .vis-text {
  1202. position: absolute;
  1203. color: #4d4d4d;
  1204. padding: 3px;
  1205. overflow: hidden;
  1206. box-sizing: border-box;
  1207. white-space: nowrap;
  1208. }
  1209. .vis-time-axis .vis-text.vis-measure {
  1210. position: absolute;
  1211. padding-left: 0;
  1212. padding-right: 0;
  1213. margin-left: 0;
  1214. margin-right: 0;
  1215. visibility: hidden;
  1216. }
  1217. .vis-time-axis .vis-grid.vis-vertical {
  1218. position: absolute;
  1219. border-left: 1px solid;
  1220. }
  1221. .vis-time-axis .vis-grid.vis-vertical-rtl {
  1222. position: absolute;
  1223. border-right: 1px solid;
  1224. }
  1225. .vis-time-axis .vis-grid.vis-minor {
  1226. border-color: #e5e5e5;
  1227. }
  1228. .vis-time-axis .vis-grid.vis-major {
  1229. border-color: #bfbfbf;
  1230. }
  1231. .vis-timeline {
  1232. position: relative;
  1233. border: 1px solid #bfbfbf;
  1234. overflow: hidden;
  1235. padding: 0;
  1236. margin: 0;
  1237. box-sizing: border-box;
  1238. }