web/data/timeline-bundle.css
author Pierre-Yves David <pierre-yves.david@logilab.fr>
Tue, 25 Jun 2013 11:06:57 +0200
changeset 9052 4cba5f2cd57b
parent 1156 4b920f836567
permissions -rw-r--r--
[repoapi] introduce a basic ClientConnection class This is the new official way to access the repo from client side. It still access Session object directly as the server side connection is not up yet (and it's not up because it would have no user). Multiple follow up commit will install compatibility with the DBAPI. This will ease the migration from dbapi to repoapi. ClientConnection has no user yet but later commit will use it in the whole Web stack. related to #2503918

div.simileAjax-bubble-container {
    margin:     0px;
    padding:    0px;
    border:     none;
    position:   absolute;
    z-index:    1000;
}

div.simileAjax-bubble-innerContainer {
    margin:     0px;
    padding:    0px;
    border:     none;
    position:   relative;
    width:      100%;
    height:     100%;
    overflow:   visible;
}

div.simileAjax-bubble-contentContainer {
    margin:     0px;
    padding:    0px;
    border:     none;
    position:   absolute;
    left:       0px;
    top:        0px;
    width:      100%;
    height:     100%;
    overflow:   auto;
    background: white;
}

div.simileAjax-bubble-border-left {
    position:   absolute;
    left:       -50px;
    top:        0px;
    width:      50px;
    height:     100%;
}
div.simileAjax-bubble-border-left-pngTranslucent {
    background: url(../images/bubble-left.png) top right repeat-y;
}

div.simileAjax-bubble-border-right {
    position:   absolute;
    right:      -50px;
    top:        0px;
    width:      50px;
    height:     100%;
}
.simileAjax-bubble-border-right-pngTranslucent {
    background: url(../images/bubble-right.png) top left repeat-y;
}

div.simileAjax-bubble-border-top {
    position:   absolute;
    top:        -50px;
    left:       0px;
    width:      100%;
    height:     50px;
}
.simileAjax-bubble-border-top-pngTranslucent {
    background: url(../images/bubble-top.png) bottom left repeat-x;
}

div.simileAjax-bubble-border-bottom {
    position:   absolute;
    bottom:     -50px;
    left:       0px;
    width:      100%;
    height:     50px;
}
.simileAjax-bubble-border-bottom-pngTranslucent {
    background: url(../images/bubble-bottom.png) top left repeat-x;
}

div.simileAjax-bubble-border-top-left {
    position:   absolute;
    top:        -50px;
    left:       -50px;
    width:      50px;
    height:     50px;
}
.simileAjax-bubble-border-top-left-pngTranslucent {
    background: url(../images/bubble-top-left.png) bottom right no-repeat;
}

div.simileAjax-bubble-border-top-right {
    position:   absolute;
    top:        -50px;
    right:      -50px;
    width:      50px;
    height:     50px;
}
.simileAjax-bubble-border-top-right-pngTranslucent {
    background: url(../images/bubble-top-right.png) bottom left no-repeat;
}

div.simileAjax-bubble-border-bottom-left {
    position:   absolute;
    bottom:     -50px;
    left:       -50px;
    width:      50px;
    height:     50px;
}
.simileAjax-bubble-border-bottom-left-pngTranslucent {
    background: url(../images/bubble-bottom-left.png) top right no-repeat;
}

div.simileAjax-bubble-border-bottom-right {
    position:   absolute;
    bottom:     -50px;
    right:      -50px;
    width:      50px;
    height:     50px;
}
.simileAjax-bubble-border-bottom-right-pngTranslucent {
    background: url(../images/bubble-bottom-right.png) top left no-repeat;
}

div.simileAjax-bubble-arrow-point-left {
    position:   absolute;
    left:       -100px;
    width:      100px;
    height:     49px;
}
.simileAjax-bubble-arrow-point-left-pngTranslucent {
    background: url(../images/bubble-arrow-point-left.png) center right no-repeat;
}

div.simileAjax-bubble-arrow-point-right {
    position:   absolute;
    right:      -100px;
    width:      100px;
    height:     49px;
}
.simileAjax-bubble-arrow-point-right-pngTranslucent {
    background: url(../images/bubble-arrow-point-right.png) center left no-repeat;
}

div.simileAjax-bubble-arrow-point-up {
    position:   absolute;
    top:        -100px;
    width:      49px;
    height:     100px;
}
.simileAjax-bubble-arrow-point-up-pngTranslucent {
    background: url(../images/bubble-arrow-point-up.png) bottom center no-repeat;
}

div.simileAjax-bubble-arrow-point-down {
    position:   absolute;
    bottom:     -100px;
    width:      49px;
    height:     100px;
}
.simileAjax-bubble-arrow-point-down-pngTranslucent {
    background: url(../images/bubble-arrow-point-down.png) bottom center no-repeat;
}


div.simileAjax-bubble-close {
    position:   absolute;
    right:      -10px;
    top:        -12px;
    width:      16px;
    height:     16px;
    cursor:     pointer;
}
.simileAjax-bubble-close-pngTranslucent {
    background: url(../images/close-button.png) no-repeat;
}
.timeline-container {
    position: relative;
    overflow: hidden;
}

.timeline-copyright {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
    cursor: pointer;
}

.timeline-message-container {
    position:   absolute;
    top:        30%;
    left:       35%;
    right:      35%;
    z-index:    1000;
    display:    none;
}
.timeline-message {
    font-size:      120%;
    font-weight:    bold;
    text-align:     center;
}
.timeline-message img {
    vertical-align: middle;
}

.timeline-band {
    position:   absolute;
    background: #eee;
    z-index:    10;
}

.timeline-band-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.timeline-band-input {
    position:   absolute;
    width:      1em;
    height:     1em;
    overflow:   hidden;
    z-index:    0;
}
.timeline-band-input input{
    width:      0;
}

.timeline-band-layer {
    position:   absolute;
    width:      100%;
    height:     100%;
}

.timeline-band-layer-inner {
    position:   relative;
    width:      100%;
    height:     100%;
}



/*------------------- Horizontal / Vertical lines ----------------*/

/* style for ethers */
.timeline-ether-lines{border-color:#666; border-style:dotted; position:absolute;}
.timeline-horizontal .timeline-ether-lines{border-width:0 0 0 1px; height:100%; top: 0; width: 1px;}
.timeline-vertical .timeline-ether-lines{border-width:1px 0 0; height:1px; left: 0; width: 100%;}



/*---------------- Weekends ---------------------------*/
.timeline-ether-weekends{
	position:absolute;
	background-color:#FFFFE0;
}

.timeline-vertical .timeline-ether-weekends{left:0;width:100%;}
.timeline-horizontal .timeline-ether-weekends{top:0; height:100%;}


/*-------------------------- HIGHLIGHT DECORATORS -------------------*/
/* Used for decorators, not used for Timeline Highlight              */
.timeline-highlight-decorator,
.timeline-highlight-point-decorator{
	position:absolute;
	overflow:hidden;
}

/* Width of horizontal decorators and Height of vertical decorators is
   set in the decorator function params */
.timeline-horizontal .timeline-highlight-point-decorator,
.timeline-horizontal .timeline-highlight-decorator{
	top:0;
  height:100%;
}

.timeline-vertical .timeline-highlight-point-decorator,
.timeline-vertical .timeline-highlight-decorator{
	width:100%;
	left:0;
}

.timeline-highlight-decorator{background-color:#FFC080;}
.timeline-highlight-point-decorator{background-color:#ff5;}


/*---------------------------- LABELS -------------------------*/
.timeline-highlight-label {
  position:absolute; overflow:hidden; font-size:200%;
  font-weight:bold; color:#999; }


/*---------------- VERTICAL LABEL -------------------*/
.timeline-horizontal .timeline-highlight-label {top:0; height:100%;}
.timeline-horizontal .timeline-highlight-label td {vertical-align:middle;}
.timeline-horizontal .timeline-highlight-label-start {text-align:right;}
.timeline-horizontal .timeline-highlight-label-end {text-align:left;}


/*---------------- HORIZONTAL LABEL -------------------*/
.timeline-vertical .timeline-highlight-label {left:0;width:100%;}
.timeline-vertical .timeline-highlight-label td {vertical-align:top;}
.timeline-vertical .timeline-highlight-label-start {text-align:center;}
.timeline-vertical .timeline-highlight-label-end {text-align:center;}


/*-------------------------------- DATE LABELS --------------------------------*/
.timeline-date-label {
  position: absolute;
  border: solid #aaa;
  color: #aaa;
  width: 5em;
  height: 1.5em;}
.timeline-date-label-em {color: #000;}

/* horizontal */
.timeline-horizontal .timeline-date-label{padding-left:2px;}
.timeline-horizontal .timeline-date-label{border-width:0 0 0 1px;}
.timeline-horizontal .timeline-date-label-em{height:2em}

/* vertical */
.timeline-vertical .timeline-date-label{padding-top:2px;}
.timeline-vertical .timeline-date-label{border-width:1px 0 0;}
.timeline-vertical .timeline-date-label-em{width:7em}


/*------------------------------- Ether.highlight -------------------------*/
.timeline-ether-highlight{position:absolute; background-color:#fff;}
.timeline-horizontal .timeline-ether-highlight{top:2px;}
.timeline-vertical .timeline-ether-highlight{left:2px;}


/*------------------------------ EVENTS ------------------------------------*/
.timeline-event-icon, .timeline-event-label,.timeline-event-tape{
	position:absolute;
	cursor:pointer;
}

.timeline-event-tape,
.timeline-small-event-tape,
.timeline-small-event-icon{
	background-color:#58A0DC;
	overflow:hidden;
}

.timeline-small-event-tape,
.timeline-small-event-icon{
	position:absolute;
}

.timeline-small-event-icon{width:1px; height:6px;}

  
/*--------------------------------- TIMELINE-------------------------*/
.timeline-ether-bg{width:100%; height:100%;}
.timeline-band-0 .timeline-ether-bg{background-color:#eee}
.timeline-band-1 .timeline-ether-bg{background-color:#ddd}
.timeline-band-2 .timeline-ether-bg{background-color:#ccc}
.timeline-band-3 .timeline-ether-bg{background-color:#aaa}
.timeline-duration-event {
    position: absolute;
    overflow: hidden;
    border: 1px solid blue;
}

.timeline-instant-event2 {
    position: absolute;
    overflow: hidden;
    border-left: 1px solid blue;
    padding-left: 2px;
}

.timeline-instant-event {
    position: absolute;
    overflow: hidden;
}

.timeline-event-bubble-title {
    font-weight: bold;
    border-bottom: 1px solid #888;
    margin-bottom: 0.5em;
}

.timeline-event-bubble-body {
}

.timeline-event-bubble-wiki {
    margin:     0.5em;
    text-align: right;
    color:      #A0A040;
}
.timeline-event-bubble-wiki a {
    color:      #A0A040;
}

.timeline-event-bubble-time {
    color: #aaa;
}

.timeline-event-bubble-image {
    float: right;
    padding-left: 5px;
    padding-bottom: 5px;
}