小 ([InPageEdit] 没有编辑摘要) |
小 ([InPageEdit] 没有编辑摘要) |
||
(未显示2个用户的26个中间版本) | |||
第14行: | 第14行: | ||
left: 50%; |
left: 50%; |
||
width: 5px; |
width: 5px; |
||
transform: translateX(-50%); |
|||
background-color: black; |
background-color: black; |
||
} |
} |
||
第20行: | 第21行: | ||
position: relative; |
position: relative; |
||
display: flex; |
display: flex; |
||
justify-content: |
justify-content: start; |
||
justify-items: end; |
justify-items: end; |
||
align-items: center; |
align-items: center; |
||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
} |
} |
||
div.timeline-line { |
div.timeline-line { |
||
position: relative; |
position: relative; |
||
display:flex; |
|||
⚫ | |||
background-color: black; |
background-color: black; |
||
height: 2px; |
height: 2px; |
||
min-width:100px; |
|||
} |
} |
||
第59行: | 第48行: | ||
margin-left: 10%; |
margin-left: 10%; |
||
margin-top: 2px; |
margin-top: 2px; |
||
font-size:small; |
|||
} |
} |
||
div.timeline-emptycell { |
div.timeline-emptycell { |
||
height: 3em; |
|||
⚫ | |||
} |
} |
||
@media only screen and (min-width: 768px) { |
|||
div.timeline-mobile-emptycell { |
|||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
} |
|||
⚫ | |||
⚫ | |||
} |
|||
⚫ | |||
@media only screen and (max-width: 768px) { |
|||
div.timeline-framework { |
|||
⚫ | |||
⚫ | |||
} |
|||
div.timeline-line { |
|||
⚫ | |||
} |
|||
div.timeline-branch { |
|||
flex-direction: row !important; |
|||
} |
|||
div.timeline-trunk { |
|||
⚫ | |||
} |
|||
} |
2023年8月1日 (二) 18:20的最新版本
div.timeline-framework {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: max-content;
gap: 5px;
position: relative;
}
div.timeline-trunk {
content: '';
position: absolute;
top: 0;
bottom:0;
left: 50%;
width: 5px;
transform: translateX(-50%);
background-color: black;
}
div.timeline-branch {
position: relative;
display: flex;
justify-content: start;
justify-items: end;
align-items: center;
}
div.timeline-line {
position: relative;
display:flex;
flex-wrap:wrap;
background-color: black;
height: 2px;
min-width:100px;
}
div.timeline-text {
position: relative;
background-color: white;
border: 2px solid black;
border-radius: 5px;
max-width: 500px;
padding: 5%;
}
span.timeline-id {
position: relative;
margin-left: 10%;
margin-top: 2px;
font-size:small;
}
div.timeline-emptycell {
height: 3em;
}
@media only screen and (min-width: 768px) {
div.timeline-mobile-emptycell {
display: none;
}
div.timeline-branch:nth-child(4n+2) {
flex-direction: row-reverse;
justify-content: end;
}
div.timeline-branch:nth-child(4n) {
top: 3em;
}
}
@media only screen and (max-width: 768px) {
div.timeline-framework {
display: flex;
flex-wrap: wrap;
}
div.timeline-line {
min-width: 50px;
}
div.timeline-branch {
flex-direction: row !important;
}
div.timeline-trunk {
left: 0%;
}
}