vis.css 29 KB

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