.dwtimeline { display: flow-root; } /* 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: 25px; height: 25px; right: -17px; 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; margin-left: auto; margin-right: auto; width: 30%; z-index: 1; margin-bottom: 10px; margin-top: 10px; 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: -16px; } /* 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