|
@ -2,34 +2,76 @@ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline.rootpanel { |
|
|
|
|
|
|
|
|
.vis.timeline.root { |
|
|
position: relative; |
|
|
position: relative; |
|
|
|
|
|
border: 1px solid #bfbfbf; |
|
|
|
|
|
|
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
|
|
|
padding: 0; |
|
|
|
|
|
margin: 0; |
|
|
|
|
|
|
|
|
border: 1px solid #bfbfbf; |
|
|
|
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
|
/* FIXME: there is an issue with the height of the items when panel height is animated |
|
|
|
|
|
-webkit-transition: height 4s ease-in-out; |
|
|
|
|
|
transition: height 4s ease-in-out; |
|
|
|
|
|
/**/ |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline .vpanel { |
|
|
|
|
|
|
|
|
.vis.timeline .vispanel { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
padding: 0; |
|
|
|
|
|
margin: 0; |
|
|
|
|
|
|
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline .vpanel.side { |
|
|
|
|
|
border-right: 1px solid #bfbfbf; |
|
|
|
|
|
|
|
|
.vis.timeline .vispanel.center, |
|
|
|
|
|
.vis.timeline .vispanel.left, |
|
|
|
|
|
.vis.timeline .vispanel.right, |
|
|
|
|
|
.vis.timeline .vispanel.top, |
|
|
|
|
|
.vis.timeline .vispanel.bottom { |
|
|
|
|
|
border: 1px #bfbfbf; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .vispanel.center, |
|
|
|
|
|
.vis.timeline .vispanel.left, |
|
|
|
|
|
.vis.timeline .vispanel.right { |
|
|
|
|
|
border-top-style: solid; |
|
|
|
|
|
border-bottom-style: solid; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .vispanel.center, |
|
|
|
|
|
.vis.timeline .vispanel.top, |
|
|
|
|
|
.vis.timeline .vispanel.bottom { |
|
|
|
|
|
border-left-style: solid; |
|
|
|
|
|
border-right-style: solid; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .background { |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .vispanel > .content { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .vispanel .shadow { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 1px; |
|
|
|
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.8); |
|
|
|
|
|
/* TODO: find a nice way to ensure shadows are drawn on top of items |
|
|
|
|
|
z-index: 1; |
|
|
|
|
|
*/ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline .vpanel.side.hidden { |
|
|
|
|
|
display: none; |
|
|
|
|
|
|
|
|
.vis.timeline .vispanel .shadow.top { |
|
|
|
|
|
top: -1px; |
|
|
|
|
|
left: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .vispanel .shadow.bottom { |
|
|
|
|
|
bottom: -1px; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline .labelset { |
|
|
.vis.timeline .labelset { |
|
|
position: relative; |
|
|
position: relative; |
|
@ -50,14 +92,12 @@ |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline.top .labelset .vlabel { |
|
|
|
|
|
border-top: 1px solid #bfbfbf; |
|
|
|
|
|
border-bottom: none; |
|
|
|
|
|
|
|
|
.vis.timeline .labelset .vlabel { |
|
|
|
|
|
border-bottom: 1px solid #bfbfbf; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline.bottom .labelset .vlabel { |
|
|
|
|
|
border-top: none; |
|
|
|
|
|
border-bottom: 1px solid #bfbfbf; |
|
|
|
|
|
|
|
|
.vis.timeline .labelset .vlabel:last-child { |
|
|
|
|
|
border-bottom: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline .labelset .vlabel .inner { |
|
|
.vis.timeline .labelset .vlabel .inner { |
|
@ -65,6 +105,10 @@ |
|
|
padding: 5px; |
|
|
padding: 5px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .labelset .vlabel .inner.hidden { |
|
|
|
|
|
padding: 0; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .itemset { |
|
|
.vis.timeline .itemset { |
|
|
position: relative; |
|
|
position: relative; |
|
@ -72,38 +116,37 @@ |
|
|
margin: 0; |
|
|
margin: 0; |
|
|
|
|
|
|
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
|
/* FIXME: get transition working for rootpanel and itemset |
|
|
|
|
|
-webkit-transition: height 4s ease-in-out; |
|
|
|
|
|
transition: height 4s ease-in-out; |
|
|
|
|
|
/**/ |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline .background { |
|
|
|
|
|
|
|
|
.vis.timeline .itemset .background, |
|
|
|
|
|
.vis.timeline .itemset .foreground { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline .foreground { |
|
|
|
|
|
|
|
|
.vis.timeline .itemset.foreground { |
|
|
|
|
|
overflow: hidden; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline .axis { |
|
|
.vis.timeline .axis { |
|
|
overflow: visible; |
|
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 0; |
|
|
|
|
|
left: 1px; |
|
|
|
|
|
z-index: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline .group { |
|
|
.vis.timeline .group { |
|
|
position: relative; |
|
|
position: relative; |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
|
|
|
border-bottom: 1px solid #bfbfbf; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline.top .group { |
|
|
|
|
|
border-top: 1px solid #bfbfbf; |
|
|
|
|
|
|
|
|
.vis.timeline .group:last-child { |
|
|
border-bottom: none; |
|
|
border-bottom: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline.bottom .group { |
|
|
|
|
|
border-top: none; |
|
|
|
|
|
border-bottom: 1px solid #bfbfbf; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .item { |
|
|
.vis.timeline .item { |
|
|
position: absolute; |
|
|
position: absolute; |
|
@ -113,11 +156,6 @@ |
|
|
background-color: #D5DDF6; |
|
|
background-color: #D5DDF6; |
|
|
display: inline-block; |
|
|
display: inline-block; |
|
|
padding: 5px; |
|
|
padding: 5px; |
|
|
|
|
|
|
|
|
/* TODO: enable css transitions |
|
|
|
|
|
-webkit-transition: top .4s ease-in-out, bottom .4s ease-in-out; |
|
|
|
|
|
transition: top .4s ease-in-out, bottom .4s ease-in-out; |
|
|
|
|
|
/**/ |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline .item.selected { |
|
|
.vis.timeline .item.selected { |
|
@ -126,7 +164,7 @@ |
|
|
z-index: 999; |
|
|
z-index: 999; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline.editable .item.selected { |
|
|
|
|
|
|
|
|
.vis.timeline .editable .item.selected { |
|
|
cursor: move; |
|
|
cursor: move; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -176,11 +214,6 @@ |
|
|
width: 0; |
|
|
width: 0; |
|
|
border-left-width: 1px; |
|
|
border-left-width: 1px; |
|
|
border-left-style: solid; |
|
|
border-left-style: solid; |
|
|
|
|
|
|
|
|
/* TODO: enable css transitions |
|
|
|
|
|
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out; |
|
|
|
|
|
transition: height .4s ease-in-out, top .4s ease-in-out; |
|
|
|
|
|
/**/ |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline .item .content { |
|
|
.vis.timeline .item .content { |
|
@ -223,7 +256,22 @@ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline .timeaxis { |
|
|
.vis.timeline .timeaxis { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .timeaxis.foreground { |
|
|
|
|
|
top: 0; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .timeaxis.background { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline .timeaxis .text { |
|
|
.vis.timeline .timeaxis .text { |
|
@ -248,14 +296,6 @@ |
|
|
border-right: 1px solid; |
|
|
border-right: 1px solid; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.vis.timeline .timeaxis .grid.horizontal { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 0; |
|
|
|
|
|
border-bottom: 1px solid; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .timeaxis .grid.minor { |
|
|
.vis.timeline .timeaxis .grid.minor { |
|
|
border-color: #e5e5e5; |
|
|
border-color: #e5e5e5; |
|
|
} |
|
|
} |
|
@ -267,14 +307,47 @@ |
|
|
.vis.timeline .currenttime { |
|
|
.vis.timeline .currenttime { |
|
|
background-color: #FF7F6E; |
|
|
background-color: #FF7F6E; |
|
|
width: 2px; |
|
|
width: 2px; |
|
|
z-index: 9; |
|
|
|
|
|
|
|
|
z-index: 1; |
|
|
} |
|
|
} |
|
|
.vis.timeline .customtime { |
|
|
.vis.timeline .customtime { |
|
|
background-color: #6E94FF; |
|
|
background-color: #6E94FF; |
|
|
width: 2px; |
|
|
width: 2px; |
|
|
cursor: move; |
|
|
cursor: move; |
|
|
z-index: 9; |
|
|
|
|
|
|
|
|
z-index: 1; |
|
|
|
|
|
} |
|
|
|
|
|
.vis.timeline.root { |
|
|
|
|
|
/* |
|
|
|
|
|
-webkit-transition: height .4s ease-in-out; |
|
|
|
|
|
transition: height .4s ease-in-out; |
|
|
|
|
|
*/ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .vispanel { |
|
|
|
|
|
/* |
|
|
|
|
|
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out; |
|
|
|
|
|
transition: height .4s ease-in-out, top .4s ease-in-out; |
|
|
|
|
|
*/ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .axis { |
|
|
|
|
|
/* |
|
|
|
|
|
-webkit-transition: top .4s ease-in-out; |
|
|
|
|
|
transition: top .4s ease-in-out; |
|
|
|
|
|
*/ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/* TODO: get animation working nicely |
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .item { |
|
|
|
|
|
-webkit-transition: top .4s ease-in-out; |
|
|
|
|
|
transition: top .4s ease-in-out; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.vis.timeline .item.line { |
|
|
|
|
|
-webkit-transition: height .4s ease-in-out, top .4s ease-in-out; |
|
|
|
|
|
transition: height .4s ease-in-out, top .4s ease-in-out; |
|
|
} |
|
|
} |
|
|
|
|
|
/**/ |
|
|
div.graph-manipulationDiv { |
|
|
div.graph-manipulationDiv { |
|
|
border-width:0px; |
|
|
border-width:0px; |
|
|
border-bottom: 1px; |
|
|
border-bottom: 1px; |
|
|