147 lines
3.4 KiB
Plaintext
147 lines
3.4 KiB
Plaintext
@import "elements";
|
|
@import "commons";
|
|
@import "fonts";
|
|
|
|
|
|
/** time line */
|
|
#timeline-loader{
|
|
max-width:700px; .m(0 auto);
|
|
.fs-artist-event-timeline;
|
|
// .bb(1px, #000);
|
|
.progress{
|
|
border-top: 4px solid #999; width:0;
|
|
/* .transition(width 4s linear);*/
|
|
transition: width 3s linear;
|
|
-moz-transition: width 3s linear;
|
|
-o-transition: width 3s linear;
|
|
-webkit-transition: width 3s linear;
|
|
&.complete{
|
|
/* .transition(width 0.1s linear);*/
|
|
transition: width 0.1s linear;
|
|
-moz-transition: width 0.1s linear;
|
|
-o-transition: width 0.1s linear;
|
|
-webkit-transition: width 0.1s linear;
|
|
}
|
|
}
|
|
}
|
|
|
|
#timeline{
|
|
height:65%;
|
|
.mt(25px);
|
|
h3.title{
|
|
cursor:pointer;
|
|
.fs-region-title(); color:@timeline-lighten-color;
|
|
}
|
|
}
|
|
|
|
#timeline-container{
|
|
width:100%; height:98%; .bt(2px, @timeline-lighten-color); overflow:hidden;
|
|
|
|
.bgc(@timeline-juicy-color);
|
|
|
|
.timeline-frame{
|
|
border: 0 solid #999;
|
|
}
|
|
|
|
.timeline-navigation{
|
|
top:0; right:0; height:20px;
|
|
border: 0 solid transparent; background-color: #fff;
|
|
div{
|
|
.p(2px 0 0 10px);
|
|
&.timeline-navigation-zoom-in{background-image: url('../images/btns_zoomin.png');}
|
|
&.timeline-navigation-zoom-out{background-image: url('../images/btns_zoomout.png');}
|
|
&.timeline-navigation-move-left{background-image: url('../images/btns_moveleft.png');}
|
|
&.timeline-navigation-move-right{background-image: url('../images/btns_moveright.png');}
|
|
}
|
|
|
|
}
|
|
|
|
.timeline-axis-text{
|
|
.fs-region-title(); color:@timeline-lighten-color;
|
|
}
|
|
|
|
.timeline-event{
|
|
.rounded(0); border: 0 solid transparent; // background-color: #fff;
|
|
&.timeline-event-range{ background-color:#fff;}
|
|
/*
|
|
TODO move events with css3
|
|
*/
|
|
}
|
|
|
|
|
|
|
|
.timeline-event-content{
|
|
.m(0);
|
|
div.date{
|
|
//border-left: 3px solid @timeline-grey;
|
|
display:block; text-decoration: none; text-align:left; cursor:pointer;
|
|
.p(4px 0);
|
|
.text-content{
|
|
.p(0 5px); .mb(4px);
|
|
.bl(3px, @timeline-lighten-color);
|
|
// max-width:145px; // pourquoi le texte ne va pas a la ligne avec le max-width ???
|
|
}
|
|
|
|
&:hover{
|
|
.text-content{
|
|
.bl(3px, @timeline-color);
|
|
}
|
|
}
|
|
|
|
h4, h5{.m(0); color:@timeline-lighten-color;}
|
|
h4{.fs-titre-event-timeline();}
|
|
h5{.fs-artist-event-timeline();}
|
|
|
|
body.view-mode-dot &{
|
|
.p(0);
|
|
.text-content{
|
|
min-height:15px;
|
|
}
|
|
h4, h5, img{display:none;}
|
|
}
|
|
|
|
body.view-mode-titles &{
|
|
background-color:#fff;
|
|
h4, h5{display:block;}
|
|
img{display:none;}
|
|
}
|
|
|
|
body.view-mode-thumbnails &{
|
|
h4, h5, img{display:block;}
|
|
img{max-width:145px;height:auto;}
|
|
}
|
|
|
|
body.view-mode-images &{
|
|
h4, h5, img{display:block;}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.timeline-event-selected{
|
|
background-color: transparent;
|
|
.timeline-event-content{
|
|
div.date{
|
|
.text-content{
|
|
.bl(3px, @timeline-color);
|
|
}
|
|
h4, h5{color:@timeline-color;}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.timeline-modal{
|
|
width:150px; min-height:30px; //margin-right: -75px;
|
|
padding:5px;
|
|
background-color:#fff;
|
|
position:absolute; z-index:99999;
|
|
display:none;
|
|
|
|
h4, h5{.m(0); color:@timeline-color;}
|
|
h4{.fs-titre-event-timeline();}
|
|
h5{.fs-artist-event-timeline();}
|
|
}
|