xref: /plugin/dwtimeline/style.less (revision 545c554be65100e9bb5eff6d4aa54c829680442a) 
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: 31px;
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
204/* right */
205.container-vert.tl-right .tlcontent .mstitle {
206    text-align: left;
207}
208
209/* Horizontal TimeLine */
210.timeline-horz {
211    box-sizing: border-box;
212    white-space: nowrap;
213    overflow-x: scroll;
214    padding: 30px 0 10px 0;
215    position: relative;
216    margin: 0 auto;
217}
218
219/* The actual timeline (the horizontal ruler) */
220.timeline-horz-line {
221    height: 4px;
222    background: @ini_background_neu;
223    width: 100%;
224    position: relative;
225    top: 16px;
226}
227
228/* a smaller bottom container */
229.container-horz {
230    display: inline-block;
231    vertical-align: top;
232    padding: 10px 10px 10px 10px;
233    position: relative;
234    background-color: inherit;
235    width: 33%;
236    margin-left: -2px;
237    margin-right: -2px;
238    text-align: center;
239    box-sizing: border-box;
240}
241
242/* The circles on the timeline at top of container*/
243.container-horz::before {
244    content: attr(data-point);
245    position: absolute;
246    width: var(--4sizewidthhorz);
247    height: 20px;
248    font-size: 1em;
249    font-weight: unset;
250    text-align: center;
251    line-height: 20px;
252    background-color: @ini_background;
253    border: 3px solid @ini_link;
254    color: @ini_link;
255    top: -30px;
256    left: 50%;
257    margin-left: var(--4sizerighthorz);
258    border-radius: 50%;
259    z-index: 1;
260    box-sizing: unset;
261}
262
263/* invert color on timeline point on hover */
264.container-horz:hover::before {
265    background-color: @ini_link;
266    color: @ini_background;
267}
268
269/* Add arrows to the container (pointing up) */
270.container-horz::after {
271    content: '';
272    height: 0;
273    position: absolute;
274    bottom: 100%;
275    left: 50%;
276    width: 0;
277    margin-left: -10px;
278    margin-bottom: -10px;
279    z-index: 1;
280    border: medium solid @ini_background_neu;
281    border-width: 0 10px 10px 10px;
282    border-color: transparent transparent @ini_background_neu transparent;
283}
284
285/* Media queries - Responsive timeline on screens less than 600px wide */
286
287@media (max-width: 600px) {
288    /* Place the timeline to the left */
289    .timeline::after {
290        left: 31px;
291    }
292
293    .timeline-vert {
294        left: 0;
295    }
296
297    /* Full-width containers */
298    .container-vert {
299        width: 100% !important;
300        padding-left: var(--4sizesmallleft50) !important;
301        padding-right: 10px !important;
302    }
303
304    /* Make sure that all arrows are pointing leftwards */
305    .container-vert::before {
306        left: var(--4sizesmallleft40);
307        border: medium solid @ini_background_alt;
308        border-width: 10px 10px 10px 0;
309        border-color: transparent @ini_background_alt transparent transparent;
310    }
311
312    .timeline-vert::after {
313        left: 20px;
314    }
315
316    /* Make sure all circles are at the same spot */
317    .container-vert.tl-left::after, .container-vert.tl-right::after {
318        left: 15px;
319    }
320
321    /* Make all right containers behave like the left ones */
322    .container-vert.tl-right {
323        left: 0;
324    }
325
326    .container-vert.tl-left::before {
327        left: var(--4sizesmallleft4);
328    }
329
330    .container-vert.tl-right {
331        left: 0;
332    }
333
334    .container-vert.tl-right::before {
335        left: var(--4sizesmallleft4);
336    }
337
338    .container-vert.tl-right::after {
339        left: var(--4sizesmallleft40);
340    }
341
342    .container-vert.tl-left::after {
343        left: var(--4sizesmallleft40);
344        border: medium solid white;
345        border-width: 10px 10px 10px 0;
346        border-color: transparent #ddd transparent transparent;
347    }
348
349    .container-vert .mstitle {
350        text-align: center !important;
351    }
352
353    .container-vert.tl-top {
354        padding-left: 0 !important;
355        padding-right: 0 !important;
356    }
357
358    .container-vert.tl-top::after {
359        left: 20px;
360    }
361
362    .container-vert.tl-top .tlcontent {
363        border-radius: 6px 6px 6px 6px;
364    }
365
366    .container-vert.tl-bottom {
367        padding-left: 0 !important;
368        padding-right: 0 !important;
369    }
370
371    .tl-bottom .tlcontent {
372        border-radius: 6px 6px 6px 6px;
373    }
374
375    .container-vert.tl-bottom::after {
376        left: 20px;
377    }
378}
379
380/* dwtimeline: error message */
381@dwtl-error-accent: #e03131; // Akzent (rot)
382@dwtl-error-bg: #fff5f5; // zartes Rot
383@dwtl-error-border: #f2c8c8; // helle Kontur
384@dwtl-error-text: #7a1f1f; // gut lesbar auf hell
385
386.plugin_dwtimeline_error {
387    display: block;
388    margin: 0.8em 0;
389    padding: 0.75em 0.9em;
390    background: @dwtl-error-bg;
391    color: @dwtl-error-text;
392    border: 1px solid @dwtl-error-border;
393    border-left: 4px solid @dwtl-error-accent;
394    border-radius: 4px;
395    line-height: 1.45;
396    font-size: 0.95em;
397
398    a {
399        color: inherit;
400        text-decoration: underline;
401    }
402}
403
404/* dwtimeline: error message Dark Mode */
405@media (prefers-color-scheme: dark) {
406    .plugin_dwtimeline_error {
407        @dwtl-dark-bg: fadeout(@dwtl-error-accent, 85%); // sehr transparentes Rot
408        @dwtl-dark-border: fadeout(@dwtl-error-accent, 55%);
409        @dwtl-dark-text: mix(#fff, @dwtl-error-accent, 85%);
410
411        background: @dwtl-dark-bg;
412        border-color: @dwtl-dark-border;
413        color: @dwtl-dark-text;
414    }
415}