system-copyright-react/src/components/step/step-proj-edit.css
2024-05-08 17:54:01 +08:00

206 lines
4.4 KiB
CSS

.step-proj {
width: 300px;
position: relative;
}
.step-proj .fiestStep {
width: 282px;
height: 56px;
background-color: pink;
position: relative;
display: flex;
align-items: center;
}
/* style={{
background:props.process != Process.PENDING?'#3790FF':'#8B919D',
}} */
.step-proj .fiestStep:before {
content: "";
position: absolute;
right: -28px;
top: 0;
width: 0;
height: 0;
border-left: 28px solid ;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
}
.step-proj .fiestStep .complete {
margin-left: 10px;
}
.step-proj .step {
/* margin-top: 30px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: start;
position: relative; */
width: 282px;
height: 56px;
background-color: pink;
position: relative;
display: flex;
align-items: center;
}
.step-proj .step:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 28px solid var(--color-light);
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
}
.step-proj .step:before {
content: "";
position: absolute;
right: -28px;
top: 0;
width: 0;
height: 0;
border-left: 28px solid red;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
}
.step-proj .step .no {
/* width: 38px;
height: 38px;
border-radius: 50%;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center; */
}
.step-proj .complete {
width: 30px;
height: 30px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-primary);
color: var(--color-primary);
color: #3790FF;
}
.step-proj .processing {
/* border: 1px solid var(--color-primary);
background-color: var(--color-primary);
color: var(--color-light); */
width: 21px;
height: 21px;
border-radius: 50%;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
color: #B5B5B5;
}
.step-proj .notop {
width: 21px;
height: 21px;
border-radius: 50%;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
color: #B5B5B5;
}
.step-proj .pending {
border: 1px solid var(--color-disabled);
color: var(--color-disabled);
}
.step-proj .desc {
margin-left: 15px;
width: 150px;
border: none;
/* background-color: #3790FF; */
display: flex;
}
.step-proj .desc .title {
font-weight: bold;
/* background-color: #3790FF; */
}
.step-proj .fiestStep .desc .title {
margin-left: 60px;
font-weight: 300;
font-size: 16px;
color: #FFFFFF;
}
.step-proj .pending .title {
color: var(--color-text-disabled);
}
.step-proj .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;
}