@charset "UTF-8"; /** * Timeline component */ .timeline { width: 100%; height: 178px; position: absolute; left: 0; bottom: 0; z-index: 1000; font-size: 12px; } .timeline::after { content: ""; clear: both; } .timeline_icon { color: white; } .timeline_icon::after { content: "A"; font-family: Icons; } .timeline_wrapper { position: relative; transition-property: bottom; transition-duration: 0.5s; } .timeline_toggler { text-align: center; } .timeline_container { width: 100%; height: 110px; } .timeline_status-bar { background: rgba(17, 17, 17, 0.4); } .timeline_date .active-day, .timeline_date .active-month, .timeline_date .active-year { height: 30px; position: absolute; height: 18px; border: thin solid #fff; background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; transition-property: left; transition-duration: .25s; } .timeline_date .active-day { width: 3.22%; } .timeline_date .active-month, .timeline_date .active-year { width: 8.3%; } .timeline_date ul { padding: 0; } .timeline_date ul li { text-align: center; display: inline-block; } /** * Fading animation */ @supports (opacity: 0) { .timeline.is-hidden { animation: fading; } @keyframes fading { from { opacity: 1; } to { opacity: 0; } } }