html, body {
height: 100%;
padding: 0;
margin: 0;
}
#canvas {
position: absolute;
top: 45px;
bottom: 10px;
left: 10px;
right: 10px;
}
.diagram-note {
background-color: rgba(66, 180, 21, 0.7);
color: White;
border-radius: 5px;
font-family: Arial;
font-size: 12px;
padding: 5px;
min-height: 16px;
width: 50px;
text-align: center;
}
.needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
}
#save-button {
position: fixed;
bottom: 20px;
left: 20px;
}
#return-button {
position: fixed;
bottom: 20px;
left: 150px;
}
#toolbar {
position: absolute;
top: 5px;
height: 30px;
left: 10px;
right: 10px;
}
.toolbar-item {
width: 120px;
height: 20px;
float: right;
font-size: 13px;
line-height: 20px;
}
.toolbar-item > div {
float: left;
}
.item-color-done {
width: 40px;
height: 20px;
border: 2px solid #00A900;
border-radius: 2px;
margin-right: 6px;
}
.item-color-process {
width: 40px;
height: 20px;
border: 2px solid #1890ff;
border-radius: 2px;
margin-right: 6px;
}
.item-color-wait {
width: 40px;
height: 20px;
border: 2px solid #F05D2E;
border-radius: 2px;
margin-right: 6px;
}
/* 右侧层 */
.bpmn-right {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 303px;
background-color: #fff;
border: 1px solid #ddd;
box-sizing: border-box;
display: none;
}
.left-show-box{
display: -webkit-box;
-webkit-box-flex: 1;
position: relative;
height: 100%;
}
.right-show-box{
display: -webkit-box;
height: 100%;
background: #F0F9FF;
box-shadow: 0 -2px 5px #c3c3c3;
}
.right-show-box.close-tab{
width: 12px;
}
.right-show-box.open-tab{
width: 300px;
}
.show-box{
width: 100%;
height: 100%;
display: -webkit-box;
}
.right-show-switch{
width: 12px;
height: 100%;
position: relative;
}
.right-show-switch i{
position: absolute;
top: 50%;
left: 0;
transform: translate(-50% 0);
cursor: pointer;
}
.right-show-content{
width: 288px;
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
padding: 5px;
box-sizing: border-box;
background-color: #ffffff;
font-size: 14px;
overflow: auto;
}
.item-flow-info{
width: 100%;
overflow: hidden;
padding-bottom: 30px;
}
.item-flow-endname{
width: 100%;
height: 30px;
line-height: 30px;
background-color: #0d8ddb;
color: #ffffff;
position: relative;
}
.item-flow-end{
width: 100%;
height: 30px;
line-height: 30px;
text-indent: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item-flow-index{
position: absolute;
width: 20px;
height: 20px;
line-height: 20px;
left: 5px;
top: 50%;
transform: translate(0%,-50%);
text-align: center;
background-color: #ffffff;
color: #0d8ddb;
background-color: #ffffff;
border-radius: 10px;
}
.item-flow-user{
width: 100%;
overflow: hidden;
}
.item-flow-username{
width: 100%;
height: 28px;
line-height: 28px;
padding: 0px 10px;
color: red;
display: -webkit-box;
-webkit-box-pack: justify;
margin-bottom: 3px;
}
.item-flow-option{
width: 100%;
overflow: hidden;
}
.item-flow-optioncontent{
margin: 0px 12px 10px 12px;
display: -webkit-box;
-webkit-box-orient: vertical;
border: 1px solid #cccccc;
padding: 5px 0px;
border-radius: 2px;
}
.item-flow-content{
line-height: 22px;
text-indent: 10px;
}
.item-flow-cdate{
margin-top: 8px;
text-align: right;
margin-right: 8px;
}
.item-flow-img{
width: 100%;
overflow: auto;
}
.item-flow-img img{
width: 100%;
}