{"html":"

\n \n\n \n

\n\n

\n \n Changes Requested\n

2 comments unresolved

\n\n

\n \n Checks Passed\n

CI Reference #9082

\n","css":".tooltip-container,\n.tooltip-container * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n.tooltip-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n font-family: \"Fira Code\", monospace;\n color: #c9d1d9;\n padding-bottom: 50px;\n margin: 100px auto;\n z-index: 1;\n pointer-events: none;\n}\n\n.trigger-wrapper {\n position: relative;\n z-index: 2;\n display: flex;\n justify-content: center;\n pointer-events: auto;\n}\n\n.merge-btn {\n background: #161b22;\n border: 1px solid #30363d;\n color: #58a6ff;\n padding: 14px 40px;\n border-radius: 6px;\n cursor: pointer;\n font-size: 1rem;\n font-weight: 500;\n font-family: inherit;\n transition: all 0.2s ease;\n position: relative;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.merge-btn:hover {\n background: #21262d;\n border-color: #8b949e;\n color: #ffffff;\n}\n\n.branch-path-svg {\n position: absolute;\n top: 100%;\n left: 50%;\n width: 300px;\n height: 60px;\n transform: translateX(-50%);\n z-index: -1;\n pointer-events: none;\n overflow: visible;\n}\n\n.branch-line {\n fill: none;\n stroke-width: 3px;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 300;\n stroke-dashoffset: 300;\n transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n display: block;\n}\n\n.line-left {\n stroke: #a371f7 !important;\n}\n\n.line-right {\n stroke: #238636 !important;\n}\n\n.tooltips-wrapper {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-top: 60px;\n width: 100%;\n pointer-events: auto;\n}\n\n.tooltip-content {\n background: #161b22;\n border: 1px solid #30363d;\n padding: 12px 16px;\n border-radius: 6px;\n color: #c9d1d9;\n font-size: 0.85rem;\n white-space: nowrap;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);\n z-index: 20;\n min-width: 180px;\n opacity: 0;\n transform: translateY(-10px);\n clip-path: inset(0 0 100% 0);\n transition:\n opacity 0.3s ease 0.3s,\n transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s,\n clip-path 0.4s ease 0.3s;\n}\n\n.tooltip-header {\n font-weight: 600;\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.tooltip-info {\n color: #8b949e;\n font-size: 0.75rem;\n}\n\n.branch-dot {\n opacity: 0;\n transition: opacity 0.2s ease 0.4s;\n}\n\n.dot-left {\n fill: #a371f7;\n}\n\n.dot-right {\n fill: #238636;\n}\n.trigger-wrapper:hover .branch-line {\n stroke-dashoffset: 0;\n}\n\n.tooltip-container:hover .branch-line {\n stroke-dashoffset: 0;\n}\n\n.tooltip-container:hover .tooltip-content {\n opacity: 1;\n transform: translateY(0);\n clip-path: inset(0 0 0 0);\n}\n\n.tooltip-container:hover .branch-dot {\n opacity: 1;\n}\n"}

orange-moose-74

👁 实时预览

📝 源代码