Template:Flow-timeline/style.css:修订间差异

模板页面
(云卷云舒将页面User:云卷云舒/Flow-timeline/style.css的内容模型从“CSS”更改为“已过滤的CSS”:​测试用)
标签内容模型更改
([InPageEdit] 没有编辑摘要)
 
(未显示2个用户的32个中间版本)
第7行: 第7行:
}
}


div.timeline-trunk::before {
div.timeline-trunk {
content: '';
content: '';
position: absolute;
position: absolute;
top: 0;
top: 0;
bottom:0;
left: 50%;
left: 50%;
width: 5px;
width: 5px;
height: 500px;
transform: translateX(-50%);
transform: translateX(-50%);
background-color: black;
background-color: black;
}
}
第21行: 第21行:
position: relative;
position: relative;
display: flex;
display: flex;
justify-content: center;
justify-content: start;
justify-items: end;
justify-items: end;
align-items: center;
align-items: center;
}

div.timeline-branch:nth-child(odd) {
grid-column-start: -3;
grid-column-end: -2;
justify-content: end;
flex-direction: row-reverse;
}

div.timeline-branch:nth-child(even) {
top: 50px;
grid-column-start: -2;
grid-column-end: -1;
justify-content: start;
}
}


div.timeline-line {
div.timeline-line {
position: relative;
position: relative;
display:flex;
flex-wrap:wrap;
background-color: black;
background-color: black;
height: 2px;
height: 2px;
width: 100px;
min-width:100px;
}
}


第60行: 第48行:
margin-left: 10%;
margin-left: 10%;
margin-top: 2px;
margin-top: 2px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
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%;
}
}

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%;
                }
			}