.tm_timeline {
position: relative;
padding: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.tm_timeline__container {
margin-left: auto;
margin-right: auto;
}
.tm_timeline.tm_timeline-layout-horizontal,
.tm_timeline.tm_timeline-layout-horizontal .tm_timeline__container {
display: block;
justify-content: inherit;
align-items: inherit;
position: relative;
}
.tm_timeline.tm_timeline-layout-vertical .tm_timeline__container {
margin-left: 50%;
}
.tm_timeline.tm_timeline-layout-vertical-chessOrder .tm_timeline__container {
margin-left: auto;
width: 100%;
}
.tm_timeline__control,
.tm_timeline__control:hover,
.tm_timeline__control:active,
.tm_timeline__control:focus,
.entry-content .tm_timeline__control,
.entry-content .tm_timeline__control:hover,
.entry-content .tm_timeline__control:active,
.entry-content .tm_timeline__control:focus {
position: absolute;
top: 50%;
z-index: 1000;
text-align: center;
font-size: 18px;
line-height: 24px;
color: #888;
text-decoration: none;
border-radius: 100%;
opacity: 0;
transition: all .2s linear;
border: 1px solid;
border-color: #fff;
background: #ddd;
outline: none;
padding: 4px 10px;
}
.tm_timeline__control:focus,
.entry-content .tm_timeline__control:focus {
box-shadow: 0 0 2px #09f;
outline: none;
}
.tm_timeline__control.tm_timeline__control-slide-left {
transform: translateX(-200%);
left: 0;
}
.tm_timeline__control.tm_timeline__control-slide-right {
margin-left: -24px;
right: 0;
transform: translateX(200%);
}
.tm_timeline:hover .tm_timeline__control {
opacity: 1;
transform: translateX(0);
border-color: #ddd;
background-color: #fff;
color: #444;
}
.tm_timeline:hover .tm_timeline__control:hover,
.entry-content .tm_timeline:hover .tm_timeline__control:hover {
border-color: #288ce4;
box-shadow: 0 0 2px #09f;
color: #288ce4;
}
.tm_timeline-layout-vertical-chessOrder .tm_timeline__body,
.tm_timeline__body-tense {
width: 100%;
}
.tm_timeline-layout-horizontal .tm_timeline__body {
overflow: hidden;
}
.tm_timeline__tense {
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 50%;
width: 100%;
height: 4px;
background: #eee;
margin-top: -5px;
}
.tm_timeline__body-tense {
border-left: 4px solid #eee;
}
.tm_timeline-layout-horizontal .tm_timeline__tense {
transform: translateY(32px);
}
.tm_timeline-layout-vertical-chessOrder .tm_timeline__tense {
position: absolute;
z-index: 1;
top: 0;
margin-left: auto;
margin-right: auto;
width: 4px;
height: 100%;
background: #eee;
}
.tm_timeline__event {
position: relative;
margin-bottom: 20px;
z-index: 10;
text-align: left;
}
.tm_timeline-layout-vertical .tm_timeline__event {
display: block;
}
.tm_timeline-layout-horizontal .tm_timeline__event {
display: inline-block;
}
.tm_timeline-layout-vertical-chessOrder .tm_timeline__event {
margin-left: auto;
margin-right: auto;
max-width: 50%;
}
.tm_timeline-layout-vertical-chessOrder .tm_timeline__event-odd {
transform: translateX(50%);
text-align: left;
}
.tm_timeline-layout-vertical-chessOrder .tm_timeline__event-even {
transform: translateX(-50%);
text-align: right;
}
.tm_timeline:not(.tm_timeline-layout-vertical-chessOrder) .tm_timeline__event__date,
.tm_timeline:not(.tm_timeline-layout-vertical-chessOrder) .tm_timeline__event__title,
.tm_timeline:not(.tm_timeline-layout-vertical-chessOrder) .tm_timeline__event__description {
transform: translateX(10px);
}
.tm_timeline-layout-vertical-chessOrder .tm_timeline__event-odd .tm_timeline__event__date,
.tm_timeline-layout-vertical-chessOrder .tm_timeline__event-odd .tm_timeline__event__title,
.tm_timeline-layout-vertical-chessOrder .tm_timeline__event-odd .tm_timeline__event__description {
transform: translateX(20px);
}
.tm_timeline-layout-vertical-chessOrder .tm_timeline__event-even .tm_timeline__event__date,
.tm_timeline-layout-vertical-chessOrder .tm_timeline__event-even .tm_timeline__event__title,
.tm_timeline-layout-vertical-chessOrder .tm_timeline__event-even .tm_timeline__event__description {
transform: translateX(-20px);
}
.tm_timeline__event__date {
display: block;
font-size: 16px;
line-height: 20px;
font-weight: bold;
color: #09d;
}
.tm_timeline__event__title {
font-size: 16px;
font-weight: bold;
color: #444;
}
.tm_timeline-layout-horizontal .tm_timeline__event__title {
position: relative;
}
.tm_timeline__event__description {
display: block;
font-size: 14px;
}
.tm_timeline__event__dot {
width: 8px;
height: 8px;
background: #444;
box-shadow: 0 0 0 4px #fff;
border-radius: 100%;
}
.tm_timeline-layout-vertical .tm_timeline__event__dot {
transform: translate(-6px, 14px);
}
.tm_timeline-layout-horizontal .tm_timeline__event__dot {
position: absolute;
top: 50%;
z-index: 1;
transform: translateY(40px);
}
.tm_timeline-layout-vertical-chessOrder .tm_timeline__event-odd .tm_timeline__event__dot {
position: absolute;
left: 0;
transform: translate(-4px, 6px);
}
.tm_timeline-layout-vertical-chessOrder .tm_timeline__event-even .tm_timeline__event__dot {
position: absolute;
right: 0;
transform: translate(4px, 6px);
}
.tm_timeline__pages {
display: block;
width: 100%;
position: relative;
z-index: 200;
padding-bottom: 10px;
}
.tm_timeline__pages .tm_timeline__page {
text-align: center;
display: none;
transition: transform .2s linear,
opacity .2s linear;
opacity: 0;
}
.tm_timeline__pages .tm_timeline__page-current-animate-left,
.tm_timeline__pages .tm_timeline__page-current-animate-right {
transition: all 0s linear;
}
.tm_timeline__pages .tm_timeline__page-current-animate-left {
transform: translateX( -10% );
}
.tm_timeline__pages .tm_timeline__page-current-animate-right {
transform: translateX( 10% );
}
.tm_timeline__pages .tm_timeline__page-current {
transition: transform .2s linear,
opacity .2s linear;
transform: translateX(0);
opacity: 1;
}
.tm_timeline__pages .tm_timeline__page-current,
.tm_timeline__pages .tm_timeline__page-current-animate-left,
.tm_timeline__pages .tm_timeline__page-current-animate-right {
display: block;
}
.tm_timeline__page__content {
display: flex;
justify-content: space-around;
width: 100%;
}