.dwtimeline { display: flow-root; /* Timeline markers - Circle: max 2 signs, Ellipsis: 3-4 signs Custom property's: Standard vertical: --4sizewidth: 25px; Circle 25px Ellipsis 50px --4sizeright: -17px; Circle -17px Ellipsis -29px Small screen vertical: --4sizesmallleft40: 40px; Circle 40px Ellipsis 60px --4sizesmallleft50: 50px; Circle 50px Ellipsis 70px --4sizesmallleft4: 4px; Circle 4px Ellipsis -10px Standard horizontal: --4sizewidthhorz: 20px; Circle 20px Ellipsis 50px --4sizerighthorz: -14px; Circle -14px Ellipsis -29px */ --4sizewidth: 25px; --4sizeright: -17px; --4sizesmallleft40: 40px; --4sizesmallleft50: 50px; --4sizesmallleft4: 4px; --4sizewidthhorz: 20px; --4sizerighthorz: -14px; } /* The actual timeline (the vertical ruler) */ .timeline-vert { box-sizing: border-box; position: relative; max-width: 1200px; margin: 0 auto; } /* The actual timeline (the vertical ruler) */ .timeline-vert::after { content: ''; position: absolute; width: 6px; background-color: @ini_text; top: 0; bottom: 0; left: 50%; margin-left: -3px; } /* Container around content */ .container-vert { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; box-sizing: border-box; margin-left: unset; margin-right: unset; } /* The circles on the timeline */ .container-vert.tl-left::before, .container-vert.tl-right::before { content: attr(data-point); display: inline-block; position: absolute; width: var(--4sizewidth); height: 25px; right: var(--4sizeright); font-size:1.2em; font-weight: unset; text-align: center; line-height: 1.5em; background-color: @ini_background; border: 4px solid @ini_link; top: 15px; border-radius: 50%; z-index: 1; box-sizing: unset; color: @ini_link; } /* invert color on timeline point on hover */ .container-vert.tl-left:hover::before, .container-vert.tl-right:hover::before { background-color: @ini_link; color: @ini_background; } /* Place the container to the left */ .container-vert.tl-left { left: 0; } /* Place the container to the right */ .container-vert.tl-right { left: 50%; } /* Place the container to center */ .container-vert.tl-top, .container-vert.tl-bottom { padding: 0; width: 30%; z-index: 1; margin: 10px auto; text-align: center; } /* Add arrows to the top container (pointing down) */ .container-vert.tl-top::after { content: ''; height: 0; position: absolute; top: 100%; left: 50%; width: 0; margin-left: -10px; z-index: 1; border: medium solid @ini_background_neu; border-width: 10px 10px 0px 10px; border-color: @ini_background_neu transparent transparent transparent; } /* Add arrows to the bottom container (pointing up) */ .container-vert.tl-bottom::after { content: ''; height: 0; position: absolute; bottom: 100%; left: 50%; width: 0; margin-left: -10px; z-index: 1; border: medium solid @ini_background_neu; border-width: 0px 10px 10px 10px; border-color: transparent transparent @ini_background_neu transparent; } /* Add arrows to the left container (pointing right) */ .container-vert.tl-left::after { content: ''; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px; border: medium solid @ini_background_neu; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent @ini_background_neu; } /* Add arrows to the right container (pointing left) */ .container-vert.tl-right::after { content: ''; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent @ini_background_neu transparent transparent; } /* Fix the circle for containers on the right side */ .container-vert.tl-right::before { left: var(--4sizeright); } /* The actual content */ .tlcontent { padding: 10px 10px; background-color: @ini_background_neu; position: relative; border-radius: 6px; color: @ini_text; white-space: normal; text-align: unset; } /* description of milestone, removed

*/ .msdesc { font-weight: bold; font-size: 1.1em; padding: 5px; text-align: center; color: @ini_text; } /* Titles of timeline and milestones, removed

*/ .mstitle, .tltitle { font-weight: bold; font-size: 1.4em; padding: 5px; color: @ini_text; } /* fix for space arround paragraph */ .mstitle>p { margin-bottom: 0; } /* set the Header to left or */ .container-vert.tl-left .tlcontent .mstitle { text-align: right; } /* right */ .container-vert.tl-right .tlcontent .mstitle { text-align: left; } /* Horizontal TimeLine */ .timeline-horz { box-sizing: border-box; white-space: nowrap; overflow-x: scroll; padding: 30px 0 10px 0; position: relative; margin: 0 auto; } /* The actual timeline (the horizontal ruler) */ .timeline-horz-line { height: 4px; background: @ini_background_neu; width: 100%; position: relative; top: 16px; } /* a smaller bottom container */ .container-horz { display: inline-block; vertical-align: top; padding: 10px 10px 10px 10px; position: relative; background-color: inherit; width: 33%; margin-left: -2px; margin-right: -2px; text-align: center; box-sizing: border-box; } /* The circles on the timeline at top of container*/ .container-horz::before { content: attr(data-point); position: absolute; width: var(--4sizewidthhorz); height: 20px; font-size:1em; font-weight: unset; text-align: center; line-height: 20px; background-color: @ini_background; border: 3px solid @ini_link; color: @ini_link; top: -30px; left: 50%; margin-left: var(--4sizerighthorz); border-radius: 50%; z-index: 1; box-sizing: unset; } /* invert color on timeline point on hover */ .container-horz:hover::before { background-color: @ini_link; color: @ini_background; } /* Add arrows to the container (pointing up) */ .container-horz::after { content: ''; height: 0; position: absolute; bottom: 100%; left: 50%; width: 0; margin-left: -10px; margin-bottom: -10px; z-index: 1; border: medium solid @ini_background_neu; border-width: 0 10px 10px 10px; border-color: transparent transparent @ini_background_neu transparent; } /* Media queries - Responsive timeline on screens less than 600px wide */ @media (max-width: 600px) { /* Place the timeline to the left */ .timeline::after { left: 31px; } .timeline-vert { left: 0; } /* Full-width containers */ .container-vert { width: 100% !important; padding-left: var(--4sizesmallleft50) !important; padding-right: 10px !important; } /* Make sure that all arrows are pointing leftwards */ .container-vert::before { left: var(--4sizesmallleft40); border: medium solid @ini_background_alt; border-width: 10px 10px 10px 0; border-color: transparent @ini_background_alt transparent transparent; } .timeline-vert::after { left: 20px; } /* Make sure all circles are at the same spot */ .container-vert.tl-left::after, .container-vert.tl-right::after { left: 15px; } /* Make all right containers behave like the left ones */ .container-vert.tl-right { left: 0; } .container-vert.tl-left::before { left: var(--4sizesmallleft4); } .container-vert.tl-right { left: 0; } .container-vert.tl-right::before { left: var(--4sizesmallleft4); } .container-vert.tl-right::after { left: var(--4sizesmallleft40); } .container-vert.tl-left::after { left: var(--4sizesmallleft40); border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent #ddd transparent transparent; } .container-vert .mstitle { text-align: center !important; } .container-vert.tl-top { padding-left: 0 !important; padding-right: 0 !important; } .container-vert.tl-top::after { left: 20px; } .container-vert.tl-top .tlcontent { border-radius: 6px 6px 6px 6px; } .container-vert.tl-bottom { padding-left: 0 !important; padding-right: 0 !important; } .tl-bottom .tlcontent { border-radius: 6px 6px 6px 6px; } .container-vert.tl-bottom::after { left: 20px; } }