Template:Flow-timeline/style.css

模板页面
< Template:Flow-timeline
云卷云舒留言 | 贡献2023年7月28日 (五) 22:38的版本 (云卷云舒将页面User:云卷云舒/Flow-timeline/style.css的内容模型从“CSS”更改为“已过滤的CSS”:​测试用)
            div.timeline-framework {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-auto-rows: max-content;
                gap: 5px;
                position: relative;
            }

            div.timeline-trunk::before {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                width: 5px;
                height: 500px;
                transform: translateX(-50%);
                background-color: black;
            }

            div.timeline-branch {
                position: relative;
                display: flex;
                justify-content: center;
                justify-items: end;
                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 {
                position: relative;
                background-color: black;
                height: 2px;
                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-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            }