.timeline-container { position: relative; max-width: 900px; margin: 0 auto; padding: 40px 0; } .timeline-container::after { content: ''; position: absolute; width: 3px; background-color: var(--border-color); top: 0; bottom: 0; left: 50%; margin-left: -1.5px; } .patch-note-entry { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; } .patch-note-entry-link { display: block; text-decoration: none; color: inherit; } .patch-note-entry::after { content: ''; position: absolute; width: 20px; height: 20px; right: -10px; background-color: var(--accent-color); border: 4px solid #050505; top: 25px; border-radius: 50%; z-index: 1; } .left { left: 0; } .right { left: 50%; } .left::before { content: " "; height: 0; position: absolute; top: 30px; width: 0; z-index: 1; right: 30px; border: medium solid var(--border-color); border-width: 10px 0 10px 10px; border-color: transparent transparent transparent var(--border-color); } .right::before { content: " "; height: 0; position: absolute; top: 30px; width: 0; z-index: 1; left: 30px; border: medium solid var(--border-color); border-width: 10px 10px 10px 0; border-color: transparent var(--border-color) transparent transparent; } .right::after { left: -10px; } .patch-content { padding: 25px 30px; position: relative; } .patch-header { border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 20px; display: flex; align-items: center; gap: 15px; } .patch-header h3 { font-size: 1.5rem; margin: 0; } .patch-header time { font-size: 0.9rem; color: var(--text-color-secondary); margin-left: auto; } .patch-header .fa-code-commit { font-size: 1.5rem; color: var(--text-color-secondary); } .patch-body ul { list-style: none; padding: 0; } .patch-body li { margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px; text-align: left;} .patch-body li i { margin-top: 5px; font-size: 0.9rem; } .change-new { color: #2ecc71; } .change-fix { color: #e67e22; } .change-improvement { color: #3498db; } .modal-overlay{...}