1.dwtimeline {
2    display: flow-root;
3    /* Timeline markers - Circle: max 2 signs, Ellipsis: 3-4 signs
4    Custom property's:
5    Standard vertical:
6    --4sizewidth: 25px;         Circle 25px   Ellipsis 50px
7    --4sizeright: -17px;        Circle -17px  Ellipsis -29px
8    Small screen vertical:
9    --4sizesmallleft40: 40px;   Circle 40px   Ellipsis 60px
10    --4sizesmallleft50: 50px;   Circle 50px   Ellipsis 70px
11    --4sizesmallleft4: 4px;     Circle 4px    Ellipsis -10px
12    Standard horizontal:
13    --4sizewidthhorz: 20px;     Circle 20px   Ellipsis 50px
14    --4sizerighthorz: -14px;    Circle -14px  Ellipsis -29px
15      */
16    --4sizewidth: 25px;
17    --4sizeright: -17px;
18    --4sizesmallleft40: 40px;
19    --4sizesmallleft50: 50px;
20    --4sizesmallleft4: 4px;
21    --4sizewidthhorz: 20px;
22    --4sizerighthorz: -14px;
23}
24
25/* The actual timeline (the vertical ruler) */
26.timeline-vert {
27    box-sizing: border-box;
28    position: relative;
29    max-width: 1200px;
30    margin: 0 auto;
31}
32
33/* The actual timeline (the vertical ruler) */
34.timeline-vert::after {
35    content: '';
36    position: absolute;
37    width: 6px;
38    background-color: @ini_text;
39    top: 0;
40    bottom: 0;
41    left: 50%;
42    margin-left: -3px;
43}
44
45/* Container around content */
46.container-vert {
47    padding: 10px 40px;
48    position: relative;
49    background-color: inherit;
50    width: 50%;
51    box-sizing: border-box;
52    margin-left: unset;
53    margin-right: unset;
54}
55
56/* The circles on the timeline */
57.container-vert.tl-left::before, .container-vert.tl-right::before {
58    content: attr(data-point);
59    display: inline-block;
60    position: absolute;
61    width: var(--4sizewidth);
62    height: 25px;
63    right: var(--4sizeright);
64    font-size:1.2em;
65    font-weight: unset;
66    text-align: center;
67    line-height: 1.5em;
68    background-color: @ini_background;
69    border: 4px solid @ini_link;
70    top: 15px;
71    border-radius: 50%;
72    z-index: 1;
73    box-sizing: unset;
74    color: @ini_link;
75}
76
77/* invert color on timeline point on hover */
78.container-vert.tl-left:hover::before, .container-vert.tl-right:hover::before {
79    background-color: @ini_link;
80    color: @ini_background;
81}
82
83/* Place the container to the left */
84.container-vert.tl-left {
85    left: 0;
86}
87
88/* Place the container to the right */
89.container-vert.tl-right {
90    left: 50%;
91}
92
93/* Place the container to center */
94.container-vert.tl-top, .container-vert.tl-bottom {
95    padding: 0;
96    width: 30%;
97    z-index: 1;
98    margin: 10px auto;
99    text-align: center;
100}
101
102/* Add arrows to the top container (pointing down) */
103.container-vert.tl-top::after {
104    content: '';
105    height: 0;
106    position: absolute;
107    top: 100%;
108    left: 50%;
109    width: 0;
110    margin-left: -10px;
111    z-index: 1;
112    border: medium solid @ini_background_neu;
113    border-width: 10px 10px 0px 10px;
114    border-color: @ini_background_neu transparent transparent transparent;
115}
116
117/* Add arrows to the bottom container (pointing up) */
118.container-vert.tl-bottom::after {
119    content: '';
120    height: 0;
121    position: absolute;
122    bottom: 100%;
123    left: 50%;
124    width: 0;
125    margin-left: -10px;
126    z-index: 1;
127    border: medium solid @ini_background_neu;
128    border-width: 0px 10px 10px 10px;
129    border-color: transparent transparent @ini_background_neu transparent;
130}
131
132
133/* Add arrows to the left container (pointing right) */
134.container-vert.tl-left::after {
135    content: '';
136    height: 0;
137    position: absolute;
138    top: 22px;
139    width: 0;
140    z-index: 1;
141    right: 30px;
142    border: medium solid @ini_background_neu;
143    border-width: 10px 0 10px 10px;
144    border-color: transparent transparent transparent @ini_background_neu;
145}
146
147/* Add arrows to the right container (pointing left) */
148.container-vert.tl-right::after {
149    content: '';
150    height: 0;
151    position: absolute;
152    top: 22px;
153    width: 0;
154    z-index: 1;
155    left: 30px;
156    border: medium solid white;
157    border-width: 10px 10px 10px 0;
158    border-color: transparent @ini_background_neu transparent transparent;
159}
160
161/* Fix the circle for containers on the right side */
162.container-vert.tl-right::before {
163    left: var(--4sizeright);
164}
165
166/* The actual content */
167.tlcontent {
168    padding: 10px 10px;
169    background-color: @ini_background_neu;
170    position: relative;
171    border-radius: 6px;
172    color: @ini_text;
173    white-space: normal;
174    text-align: unset;
175}
176
177/* description of milestone, removed <h3> */
178.msdesc {
179    font-weight: bold;
180    font-size: 1.1em;
181    padding: 5px;
182    text-align: center;
183    color: @ini_text;
184}
185
186/* Titles of timeline and milestones, removed <h2> */
187.mstitle, .tltitle {
188    font-weight: bold;
189    font-size: 1.4em;
190    padding: 5px;
191    color: @ini_text;
192}
193
194/* fix for space arround paragraph */
195.mstitle>p {
196    margin-bottom: 0;
197}
198
199/* set the Header to left or */
200.container-vert.tl-left .tlcontent .mstitle {
201    text-align: right;
202}
203/* right */
204.container-vert.tl-right .tlcontent .mstitle {
205    text-align: left;
206}
207
208/* Horizontal TimeLine */
209.timeline-horz {
210    box-sizing: border-box;
211    white-space: nowrap;
212    overflow-x: scroll;
213    padding: 30px 0 10px 0;
214    position: relative;
215    margin: 0 auto;
216}
217
218/* The actual timeline (the horizontal ruler) */
219.timeline-horz-line {
220    height: 4px;
221    background: @ini_background_neu;
222    width: 100%;
223    position: relative;
224    top: 16px;
225}
226
227/* a smaller bottom container */
228.container-horz {
229    display: inline-block;
230    vertical-align: top;
231    padding: 10px 10px 10px 10px;
232    position: relative;
233    background-color: inherit;
234    width: 33%;
235    margin-left: -2px;
236    margin-right: -2px;
237    text-align: center;
238    box-sizing: border-box;
239}
240
241/* The circles on the timeline at top of container*/
242.container-horz::before {
243    content: attr(data-point);
244    position: absolute;
245    width: var(--4sizewidthhorz);
246    height: 20px;
247    font-size:1em;
248    font-weight: unset;
249    text-align: center;
250    line-height: 20px;
251    background-color: @ini_background;
252    border: 3px solid @ini_link;
253    color: @ini_link;
254    top: -30px;
255    left: 50%;
256    margin-left: var(--4sizerighthorz);
257    border-radius: 50%;
258    z-index: 1;
259    box-sizing: unset;
260}
261
262/* invert color on timeline point on hover */
263.container-horz:hover::before {
264    background-color: @ini_link;
265    color: @ini_background;
266}
267
268/* Add arrows to the container (pointing up) */
269.container-horz::after {
270    content: '';
271    height: 0;
272    position: absolute;
273    bottom: 100%;
274    left: 50%;
275    width: 0;
276    margin-left: -10px;
277    margin-bottom: -10px;
278    z-index: 1;
279    border: medium solid @ini_background_neu;
280    border-width: 0 10px 10px 10px;
281    border-color: transparent transparent @ini_background_neu transparent;
282}
283
284/* Media queries - Responsive timeline on screens less than 600px wide */
285
286@media (max-width: 600px) {
287    /* Place the timeline to the left */
288    .timeline::after {
289        left: 31px;
290    }
291
292    .timeline-vert {
293        left: 0;
294    }
295
296    /* Full-width containers */
297    .container-vert {
298        width: 100% !important;
299        padding-left: var(--4sizesmallleft50) !important;
300        padding-right: 10px !important;
301    }
302
303    /* Make sure that all arrows are pointing leftwards */
304    .container-vert::before {
305        left: var(--4sizesmallleft40);
306        border: medium solid @ini_background_alt;
307        border-width: 10px 10px 10px 0;
308        border-color: transparent @ini_background_alt transparent transparent;
309    }
310
311    .timeline-vert::after {
312        left: 20px;
313    }
314
315    /* Make sure all circles are at the same spot */
316    .container-vert.tl-left::after, .container-vert.tl-right::after {
317        left: 15px;
318    }
319
320    /* Make all right containers behave like the left ones */
321    .container-vert.tl-right {
322        left: 0;
323    }
324
325    .container-vert.tl-left::before {
326        left: var(--4sizesmallleft4);
327    }
328
329    .container-vert.tl-right {
330        left: 0;
331    }
332
333    .container-vert.tl-right::before {
334        left: var(--4sizesmallleft4);
335    }
336
337    .container-vert.tl-right::after {
338        left: var(--4sizesmallleft40);
339    }
340
341    .container-vert.tl-left::after {
342        left: var(--4sizesmallleft40);
343        border: medium solid white;
344        border-width: 10px 10px 10px 0;
345        border-color: transparent #ddd transparent transparent;
346    }
347
348    .container-vert .mstitle {
349        text-align: center !important;
350    }
351
352    .container-vert.tl-top {
353        padding-left: 0 !important;
354        padding-right: 0 !important;
355    }
356
357    .container-vert.tl-top::after {
358        left: 20px;
359    }
360
361    .container-vert.tl-top .tlcontent {
362        border-radius: 6px 6px 6px 6px;
363    }
364
365    .container-vert.tl-bottom {
366        padding-left: 0 !important;
367        padding-right: 0 !important;
368    }
369
370    .tl-bottom .tlcontent {
371        border-radius: 6px 6px 6px 6px;
372    }
373
374    .container-vert.tl-bottom::after {
375        left: 20px;
376    }
377}
378