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.

469 lines
9.7 KiB

10 years ago
10 years ago
  1. .vis.timeline {
  2. }
  3. .vis.timeline.rootpanel {
  4. position: relative;
  5. overflow: hidden;
  6. border: 1px solid #bfbfbf;
  7. -moz-box-sizing: border-box;
  8. box-sizing: border-box;
  9. }
  10. .vis.timeline .vpanel {
  11. position: absolute;
  12. overflow: hidden;
  13. }
  14. .vis.timeline .groupset {
  15. position: absolute;
  16. padding: 0;
  17. margin: 0;
  18. }
  19. .vis.timeline .labels {
  20. position: absolute;
  21. top: 0;
  22. left: 0;
  23. width: 100%;
  24. height: 100%;
  25. padding: 0;
  26. margin: 0;
  27. border-right: 1px solid #bfbfbf;
  28. -moz-box-sizing: border-box;
  29. box-sizing: border-box;
  30. }
  31. .vis.timeline .labels .label-set {
  32. position: absolute;
  33. top: 0;
  34. left: 0;
  35. width: 100%;
  36. height: 100%;
  37. overflow: hidden;
  38. border-top: none;
  39. border-bottom: 1px solid #bfbfbf;
  40. }
  41. .vis.timeline .labels .label-set .vlabel {
  42. position: absolute;
  43. left: 0;
  44. top: 0;
  45. width: 100%;
  46. color: #4d4d4d;
  47. }
  48. .vis.timeline.top .labels .label-set .vlabel,
  49. .vis.timeline.top .groupset .itemset-axis {
  50. border-top: 1px solid #bfbfbf;
  51. border-bottom: none;
  52. }
  53. .vis.timeline.bottom .labels .label-set .vlabel,
  54. .vis.timeline.bottom .groupset .itemset-axis {
  55. border-top: none;
  56. border-bottom: 1px solid #bfbfbf;
  57. }
  58. .vis.timeline .labels .label-set .vlabel .inner {
  59. display: inline-block;
  60. padding: 5px;
  61. }
  62. .vis.timeline .itemset {
  63. position: absolute;
  64. padding: 0;
  65. margin: 0;
  66. overflow: hidden;
  67. }
  68. .vis.timeline .background {
  69. }
  70. .vis.timeline .foreground {
  71. }
  72. .vis.timeline .itemset-axis {
  73. position: absolute;
  74. }
  75. .vis.timeline .item {
  76. position: absolute;
  77. color: #1A1A1A;
  78. border-color: #97B0F8;
  79. background-color: #D5DDF6;
  80. display: inline-block;
  81. padding: 5px;
  82. }
  83. .vis.timeline .item.selected {
  84. border-color: #FFC200;
  85. background-color: #FFF785;
  86. z-index: 999;
  87. }
  88. .vis.timeline.editable .item.selected {
  89. cursor: move;
  90. }
  91. .vis.timeline .item.point.selected {
  92. background-color: #FFF785;
  93. z-index: 999;
  94. }
  95. .vis.timeline .item.point.selected .dot {
  96. border-color: #FFC200;
  97. }
  98. .vis.timeline .item.cluster {
  99. /* TODO: use another color or pattern? */
  100. background: #97B0F8 url('img/cluster_bg.png');
  101. color: white;
  102. }
  103. .vis.timeline .item.cluster.point {
  104. border-color: #D5DDF6;
  105. }
  106. .vis.timeline .item.box {
  107. text-align: center;
  108. border-style: solid;
  109. border-width: 1px;
  110. border-radius: 5px;
  111. -moz-border-radius: 5px; /* For Firefox 3.6 and older */
  112. }
  113. .vis.timeline .item.point {
  114. background: none;
  115. }
  116. .vis.timeline .dot,
  117. .vis.timeline .item.dot {
  118. padding: 0;
  119. border: 5px solid #97B0F8;
  120. position: absolute;
  121. border-radius: 5px;
  122. -moz-border-radius: 5px; /* For Firefox 3.6 and older */
  123. }
  124. .vis.timeline .item.range,
  125. .vis.timeline .item.rangeoverflow{
  126. border-style: solid;
  127. border-width: 1px;
  128. border-radius: 2px;
  129. -moz-border-radius: 2px; /* For Firefox 3.6 and older */
  130. -moz-box-sizing: border-box;
  131. box-sizing: border-box;
  132. }
  133. .vis.timeline .item.range .content,
  134. .vis.timeline .item.rangeoverflow .content {
  135. position: relative;
  136. display: inline-block;
  137. }
  138. .vis.timeline .item.range .content {
  139. overflow: hidden;
  140. max-width: 100%;
  141. }
  142. .vis.timeline .item.line {
  143. padding: 0;
  144. position: absolute;
  145. width: 0;
  146. border-left-width: 1px;
  147. border-left-style: solid;
  148. }
  149. .vis.timeline .item .content {
  150. white-space: nowrap;
  151. overflow: hidden;
  152. }
  153. .vis.timeline .item .delete {
  154. background: url('img/timeline/delete.png') no-repeat top center;
  155. position: absolute;
  156. width: 24px;
  157. height: 24px;
  158. top: 0;
  159. right: -24px;
  160. cursor: pointer;
  161. }
  162. .vis.timeline .item.range .drag-left,
  163. .vis.timeline .item.rangeoverflow .drag-left {
  164. position: absolute;
  165. width: 24px;
  166. height: 100%;
  167. top: 0;
  168. left: -4px;
  169. cursor: w-resize;
  170. z-index: 10000;
  171. }
  172. .vis.timeline .item.range .drag-right,
  173. .vis.timeline .item.rangeoverflow .drag-right {
  174. position: absolute;
  175. width: 24px;
  176. height: 100%;
  177. top: 0;
  178. right: -4px;
  179. cursor: e-resize;
  180. z-index: 10001; /* a little higher z-index than .drag-left */
  181. }
  182. .vis.timeline .axis {
  183. position: relative;
  184. }
  185. .vis.timeline .axis .text {
  186. position: absolute;
  187. color: #4d4d4d;
  188. padding: 3px;
  189. white-space: nowrap;
  190. }
  191. .vis.timeline .axis .text.measure {
  192. position: absolute;
  193. padding-left: 0;
  194. padding-right: 0;
  195. margin-left: 0;
  196. margin-right: 0;
  197. visibility: hidden;
  198. }
  199. .vis.timeline .axis .grid.vertical {
  200. position: absolute;
  201. width: 0;
  202. border-right: 1px solid;
  203. }
  204. .vis.timeline .axis .grid.horizontal {
  205. position: absolute;
  206. left: 0;
  207. width: 100%;
  208. height: 0;
  209. border-bottom: 1px solid;
  210. }
  211. .vis.timeline .axis .grid.minor {
  212. border-color: #e5e5e5;
  213. }
  214. .vis.timeline .axis .grid.major {
  215. border-color: #bfbfbf;
  216. }
  217. .vis.timeline .currenttime {
  218. background-color: #FF7F6E;
  219. width: 2px;
  220. z-index: 9;
  221. }
  222. .vis.timeline .customtime {
  223. background-color: #6E94FF;
  224. width: 2px;
  225. cursor: move;
  226. z-index: 9;
  227. }
  228. div.graph-manipulationDiv {
  229. border-width:0px;
  230. border-bottom: 1px;
  231. border-style:solid;
  232. border-color: #d6d9d8;
  233. background: #ffffff; /* Old browsers */
  234. background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
  235. 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+ */
  236. background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
  237. background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
  238. background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
  239. background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
  240. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
  241. width: 600px;
  242. height:30px;
  243. z-index:10;
  244. position:absolute;
  245. }
  246. div.graph-manipulation-editMode {
  247. height:30px;
  248. z-index:10;
  249. position:absolute;
  250. margin-top:20px;
  251. }
  252. div.graph-manipulation-closeDiv {
  253. height:30px;
  254. width:30px;
  255. z-index:11;
  256. position:absolute;
  257. margin-top:3px;
  258. margin-left:590px;
  259. background-position: 0px 0px;
  260. background-repeat:no-repeat;
  261. background-image: url("img/graph/cross.png");
  262. cursor: pointer;
  263. -webkit-touch-callout: none;
  264. -webkit-user-select: none;
  265. -khtml-user-select: none;
  266. -moz-user-select: none;
  267. -ms-user-select: none;
  268. user-select: none;
  269. }
  270. span.graph-manipulationUI {
  271. font-family: verdana;
  272. font-size: 12px;
  273. -moz-border-radius: 15px;
  274. border-radius: 15px;
  275. display:inline-block;
  276. background-position: 0px 0px;
  277. background-repeat:no-repeat;
  278. height:24px;
  279. margin: -14px 0px 0px 10px;
  280. vertical-align:middle;
  281. cursor: pointer;
  282. padding: 0px 8px 0px 8px;
  283. -webkit-touch-callout: none;
  284. -webkit-user-select: none;
  285. -khtml-user-select: none;
  286. -moz-user-select: none;
  287. -ms-user-select: none;
  288. user-select: none;
  289. }
  290. span.graph-manipulationUI:hover {
  291. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
  292. }
  293. span.graph-manipulationUI:active {
  294. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
  295. }
  296. span.graph-manipulationUI.back {
  297. background-image: url("img/graph/backIcon.png");
  298. }
  299. span.graph-manipulationUI.none:hover {
  300. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
  301. cursor: default;
  302. }
  303. span.graph-manipulationUI.none:active {
  304. box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
  305. }
  306. span.graph-manipulationUI.none {
  307. padding: 0px 0px 0px 0px;
  308. }
  309. span.graph-manipulationUI.notification{
  310. margin: 2px;
  311. font-weight: bold;
  312. }
  313. span.graph-manipulationUI.add {
  314. background-image: url("img/graph/addNodeIcon.png");
  315. }
  316. span.graph-manipulationUI.edit {
  317. background-image: url("img/graph/editIcon.png");
  318. }
  319. span.graph-manipulationUI.edit.editmode {
  320. background-color: #fcfcfc;
  321. border-style:solid;
  322. border-width:1px;
  323. border-color: #cccccc;
  324. }
  325. span.graph-manipulationUI.connect {
  326. background-image: url("img/graph/connectIcon.png");
  327. }
  328. span.graph-manipulationUI.delete {
  329. background-image: url("img/graph/deleteIcon.png");
  330. }
  331. /* top right bottom left */
  332. span.graph-manipulationLabel {
  333. margin: 0px 0px 0px 23px;
  334. line-height: 25px;
  335. }
  336. div.graph-seperatorLine {
  337. display:inline-block;
  338. width:1px;
  339. height:20px;
  340. background-color: #bdbdbd;
  341. margin: 5px 7px 0px 15px;
  342. }
  343. div.graph-navigation {
  344. width:34px;
  345. height:34px;
  346. z-index:10;
  347. -moz-border-radius: 17px;
  348. border-radius: 17px;
  349. position:absolute;
  350. display:inline-block;
  351. background-position: 2px 2px;
  352. background-repeat:no-repeat;
  353. cursor: pointer;
  354. -webkit-touch-callout: none;
  355. -webkit-user-select: none;
  356. -khtml-user-select: none;
  357. -moz-user-select: none;
  358. -ms-user-select: none;
  359. user-select: none;
  360. }
  361. div.graph-navigation:hover {
  362. box-shadow: 0px 0px 3px 3px rgba(56, 207, 21, 0.30);
  363. }
  364. div.graph-navigation:active {
  365. box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
  366. }
  367. div.graph-navigation.active {
  368. box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
  369. }
  370. div.graph-navigation.up {
  371. background-image: url("img/graph/upArrow.png");
  372. bottom:50px;
  373. left:55px;
  374. }
  375. div.graph-navigation.down {
  376. background-image: url("img/graph/downArrow.png");
  377. bottom:10px;
  378. left:55px;
  379. }
  380. div.graph-navigation.left {
  381. background-image: url("img/graph/leftArrow.png");
  382. bottom:10px;
  383. left:15px;
  384. }
  385. div.graph-navigation.right {
  386. background-image: url("img/graph/rightArrow.png");
  387. bottom:10px;
  388. left:95px;
  389. }
  390. div.graph-navigation.zoomIn {
  391. background-image: url("img/graph/plus.png");
  392. bottom:10px;
  393. right:15px;
  394. }
  395. div.graph-navigation.zoomOut {
  396. background-image: url("img/graph/minus.png");
  397. bottom:10px;
  398. right:55px;
  399. }
  400. div.graph-navigation.zoomExtends {
  401. background-image: url("img/graph/zoomExtends.png");
  402. bottom:50px;
  403. right:15px;
  404. }