You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.4 KiB
105 lines
2.4 KiB
3 years ago
|
:root {
|
||
|
|
--timeline-main-line: rgba(0, 0, 0, 0.1) ;
|
||
|
|
--timeline-time-line: rgba(0, 0, 0, 0.2) ;
|
||
|
|
--timeline-dashed-line: rgba(0, 0, 0, 0.1) ;
|
||
|
|
}
|
||
|
|
|
||
|
|
.theme-light .timeline {
|
||
|
|
--timeline-main-line: rgba(0, 0, 0, 0.1) ;
|
||
|
|
--timeline-time-line: rgba(0, 0, 0, 0.2) ;
|
||
|
|
--timeline-dashed-line: rgba(0, 0, 0, 0.1) ;
|
||
|
|
}
|
||
|
|
|
||
|
|
.theme-dark .timeline {
|
||
|
|
--timeline-main-line: rgba(255, 255, 255, 0.1) ;
|
||
|
|
--timeline-time-line: rgba(255, 255, 255, 0.2) ;
|
||
|
|
--timeline-dashed-line: rgba(255, 255, 255, 0.1) ;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline.white {
|
||
|
|
--timeline-main-line: rgba(255, 255, 255, 0.1) !important;
|
||
|
|
--timeline-time-line: rgba(255, 255, 255, 0.2) !important;
|
||
|
|
--timeline-dashed-line: rgba(255, 255, 255, 0.1) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline.black {
|
||
|
|
--timeline-main-line: rgba(0, 0, 0, 0.1) !important;
|
||
|
|
--timeline-time-line: rgba(0, 0, 0, 0.2) !important;
|
||
|
|
--timeline-dashed-line: rgba(0, 0, 0, 0.1) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline.spaced-paragraph .description p {
|
||
|
|
line-height: 1.7rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline {
|
||
|
|
display: -ms-grid;
|
||
|
|
display: grid;
|
||
|
|
-ms-grid-columns: auto 0.5rem 1fr;
|
||
|
|
grid-template-columns: auto 0.5rem 1fr;
|
||
|
|
-webkit-column-gap: 1.3rem;
|
||
|
|
column-gap: 1.3rem;
|
||
|
|
row-gap: 4.5rem;
|
||
|
|
margin-bottom: 2.25rem;
|
||
|
|
margin-top: 2.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline .time *, .timeline .title * {
|
||
|
|
font-size: 1.3rem;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline .time {
|
||
|
|
-ms-grid-column: 1;
|
||
|
|
-ms-grid-column-span: 1;
|
||
|
|
grid-column: 1 / span 1;
|
||
|
|
position: relative;
|
||
|
|
-ms-flex-item-align: start;
|
||
|
|
-ms-grid-row-align: start;
|
||
|
|
align-self: start;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline .time::before {
|
||
|
|
content: ' ';
|
||
|
|
background-color: var(--timeline-time-line);
|
||
|
|
position: absolute;
|
||
|
|
width: 0.5rem;
|
||
|
|
height: 100%;
|
||
|
|
right: -1.8rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline .info {
|
||
|
|
position: relative;
|
||
|
|
-ms-grid-column: 3;
|
||
|
|
-ms-grid-column-span: 1;
|
||
|
|
grid-column: 3 / span 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline .info .title {
|
||
|
|
margin-bottom: 0.86667rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline .info::after {
|
||
|
|
content: ' ';
|
||
|
|
position: absolute;
|
||
|
|
border-bottom: 0.1rem dashed var(--timeline-dashed-line);
|
||
|
|
width: 100%;
|
||
|
|
height: 2.2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline .info:last-child::after {
|
||
|
|
content: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.timeline .main-line {
|
||
|
|
height: 100%;
|
||
|
|
width: 0.5rem;
|
||
|
|
-ms-grid-column: 2;
|
||
|
|
-ms-grid-column-span: 1;
|
||
|
|
grid-column: 2 / span 1;
|
||
|
|
-ms-grid-row: 1;
|
||
|
|
grid-row-start: 1;
|
||
|
|
background-color: var(--timeline-main-line);
|
||
|
|
}
|