comparison geotemco/lib/simile/timeline/timeline-bundle.css @ 0:b12c99b7c3f0

commit for previous development
author Zoe Hong <zhong@mpiwg-berlin.mpg.de>
date Mon, 19 Jan 2015 17:13:49 +0100
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:b12c99b7c3f0
1
2
3 /*------------------- Horizontal / Vertical lines ----------------*/
4
5 /* style for ethers */
6 .timeline-ether-lines{border-color:#666; border-style:dotted; position:absolute;}
7 .timeline-horizontal .timeline-ether-lines{border-width:0 0 0 1px; height:100%; top: 0; width: 1px;}
8 .timeline-vertical .timeline-ether-lines{border-width:1px 0 0; height:1px; left: 0; width: 100%;}
9
10
11
12 /*---------------- Weekends ---------------------------*/
13 .timeline-ether-weekends{
14 position:absolute;
15 background-color:#FFFFE0;
16 }
17
18 .timeline-vertical .timeline-ether-weekends{left:0;width:100%;}
19 .timeline-horizontal .timeline-ether-weekends{top:0; height:100%;}
20
21
22 /*-------------------------- HIGHLIGHT DECORATORS -------------------*/
23 /* Used for decorators, not used for Timeline Highlight */
24 .timeline-highlight-decorator,
25 .timeline-highlight-point-decorator{
26 position:absolute;
27 overflow:hidden;
28 }
29
30 /* Width of horizontal decorators and Height of vertical decorators is
31 set in the decorator function params */
32 .timeline-horizontal .timeline-highlight-point-decorator,
33 .timeline-horizontal .timeline-highlight-decorator{
34 top:0;
35 height:100%;
36 }
37
38 .timeline-vertical .timeline-highlight-point-decorator,
39 .timeline-vertical .timeline-highlight-decorator{
40 width:100%;
41 left:0;
42 }
43
44 .timeline-highlight-decorator{background-color:#FFC080;}
45 .timeline-highlight-point-decorator{background-color:#ff5;}
46
47
48 /*---------------------------- LABELS -------------------------*/
49 .timeline-highlight-label {
50 position:absolute; overflow:hidden; font-size:200%;
51 font-weight:bold; color:#999; }
52
53
54 /*---------------- VERTICAL LABEL -------------------*/
55 .timeline-horizontal .timeline-highlight-label {top:0; height:100%;}
56 .timeline-horizontal .timeline-highlight-label td {vertical-align:middle;}
57 .timeline-horizontal .timeline-highlight-label-start {text-align:right;}
58 .timeline-horizontal .timeline-highlight-label-end {text-align:left;}
59
60
61 /*---------------- HORIZONTAL LABEL -------------------*/
62 .timeline-vertical .timeline-highlight-label {left:0;width:100%;}
63 .timeline-vertical .timeline-highlight-label td {vertical-align:top;}
64 .timeline-vertical .timeline-highlight-label-start {text-align:center;}
65 .timeline-vertical .timeline-highlight-label-end {text-align:center;}
66
67
68 /*-------------------------------- DATE LABELS --------------------------------*/
69 .timeline-date-label {
70 position: absolute;
71 border: solid #aaa;
72 color: #aaa;
73 width: 5em;
74 height: 1.5em;}
75 .timeline-date-label-em {color: #000;}
76
77 /* horizontal */
78 .timeline-horizontal .timeline-date-label{padding-left:2px;}
79 .timeline-horizontal .timeline-date-label{border-width:0 0 0 1px;}
80 .timeline-horizontal .timeline-date-label-em{height:2em}
81
82 /* vertical */
83 .timeline-vertical .timeline-date-label{padding-top:2px;}
84 .timeline-vertical .timeline-date-label{border-width:1px 0 0;}
85 .timeline-vertical .timeline-date-label-em{width:7em}
86
87
88 /*------------------------------- Ether.highlight -------------------------*/
89 .timeline-ether-highlight{position:absolute; background-color:#fff;}
90 .timeline-horizontal .timeline-ether-highlight{top:2px;}
91 .timeline-vertical .timeline-ether-highlight{left:2px;}
92
93
94 /*------------------------------ EVENTS ------------------------------------*/
95 .timeline-event-icon, .timeline-event-label,.timeline-event-tape{
96 position:absolute;
97 cursor:pointer;
98 }
99
100 .timeline-event-tape,
101 .timeline-small-event-tape,
102 .timeline-small-event-icon{
103 background-color:#58A0DC;
104 overflow:hidden;
105 }
106
107 .timeline-small-event-tape,
108 .timeline-small-event-icon{
109 position:absolute;
110 }
111
112 .timeline-small-event-icon{width:1px; height:6px;}
113
114
115 /*--------------------------------- TIMELINE-------------------------*/
116 .timeline-ether-bg{width:100%; height:100%;}
117 .timeline-band-0 .timeline-ether-bg{background-color:#eee}
118 .timeline-band-1 .timeline-ether-bg{background-color:#ddd}
119 .timeline-band-2 .timeline-ether-bg{background-color:#ccc}
120 .timeline-band-3 .timeline-ether-bg{background-color:#aaa}
121 .timeline-duration-event {
122 position: absolute;
123 overflow: hidden;
124 border: 1px solid blue;
125 }
126
127 .timeline-instant-event2 {
128 position: absolute;
129 overflow: hidden;
130 border-left: 1px solid blue;
131 padding-left: 2px;
132 }
133
134 .timeline-instant-event {
135 position: absolute;
136 overflow: hidden;
137 }
138
139 .timeline-event-bubble-title {
140 font-weight: bold;
141 border-bottom: 1px solid #888;
142 margin-bottom: 0.5em;
143 }
144
145 .timeline-event-bubble-body {
146 }
147
148 .timeline-event-bubble-wiki {
149 margin: 0.5em;
150 text-align: right;
151 color: #A0A040;
152 }
153 .timeline-event-bubble-wiki a {
154 color: #A0A040;
155 }
156
157 .timeline-event-bubble-time {
158 color: #aaa;
159 }
160
161 .timeline-event-bubble-image {
162 float: right;
163 padding-left: 5px;
164 padding-bottom: 5px;
165 }.timeline-container {
166 position: relative;
167 overflow: hidden;
168 }
169
170 .timeline-copyright {
171 position: absolute;
172 bottom: 0px;
173 left: 0px;
174 z-index: 1000;
175 cursor: pointer;
176 }
177
178 .timeline-message-container {
179 position: absolute;
180 top: 30%;
181 left: 35%;
182 right: 35%;
183 z-index: 1000;
184 display: none;
185 }
186 .timeline-message {
187 font-size: 120%;
188 font-weight: bold;
189 text-align: center;
190 }
191 .timeline-message img {
192 vertical-align: middle;
193 }
194
195 .timeline-band {
196 position: absolute;
197 background: #eee;
198 z-index: 10;
199 }
200
201 .timeline-band-inner {
202 position: relative;
203 width: 100%;
204 height: 100%;
205 }
206
207 .timeline-band-input {
208 position: absolute;
209 width: 1em;
210 height: 1em;
211 overflow: hidden;
212 z-index: 0;
213 }
214 .timeline-band-input input{
215 width: 0;
216 }
217
218 .timeline-band-layer {
219 position: absolute;
220 width: 100%;
221 height: 100%;
222 }
223
224 .timeline-band-layer-inner {
225 position: relative;
226 width: 100%;
227 height: 100%;
228 }
229