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