.step-proj { width: 300px; position: relative; } .step-proj .step { margin-top: 30px; display: flex; flex-direction: row; justify-content: center; align-items: start; position: relative; } .step-proj .step .no { width: 38px; height: 38px; border-radius: 50%; font-size: 16px; display: flex; align-items: center; justify-content: center; } .step-proj .step .complete { border: 1px solid var(--color-primary); color: var(--color-primary); } .step-proj .step .processing { border: 1px solid var(--color-primary); background-color: var(--color-primary); color: var(--color-light); } .step-proj .step .pending { border: 1px solid var(--color-disabled); color: var(--color-disabled); } .step-proj .step .desc { margin-left: 15px; width: 150px; border: none; } .step-proj .step .desc .title { margin-top: 8px; font-weight: bold; } .step-proj .step .pending .title { color: var(--color-text-disabled); } .step-proj .step .desc .detail { margin-top: 10px; font-size: 12px; width: 100%; height: 32px; line-height: 16px; color: var(--color-note); word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .step-proj .step-line { position: absolute; top: 18px; left: 190px; width: 150px; border-top: 1px solid var(--color-disabled); } .step-proj .step-line-complete { border-color: var(--color-primary); } .step-proj .step-card { margin-top: 40px; padding: 10px 0; border: 1px solid var(--color-border); overflow: auto; } .step-proj .step-card .step-card-list { display: flex; flex-direction: column; align-items: center; } .step-proj .step-card .step-card-list .card-proj-edit, .step-proj .step-card .step-card-list .card-proj-loading, .step-proj .step-card .step-card-list .card-proj-result, .step-proj .step-card .step-card-list .card-proj-download, .step-proj .step-card .step-card-list .card-proj-jump { border-bottom: 1px solid var(--color-border); } .step-proj .step-card .step-card-list .card-proj-edit:last-child, .step-proj .step-card .step-card-list .card-proj-loading:last-child, .step-proj .step-card .step-card-list .card-proj-result:last-child, .step-proj .step-card .step-card-list .card-proj-download:last-child, .step-proj .step-card .step-card-list .card-proj-jump:last-child { border-bottom: none; }