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