knowledgeMap/src/css/participle.less

.participleWrappper{
    width: 100%;
    min-width: 1200px;
    .title{
        width: 100%;
        min-width: 1200px;
        position: relative;
        height: 40px;
        line-height: 40px;
        background-image: linear-gradient(to right, #5A8EEE , #7EABFF);
        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da,endColorstr=#1C85FB);/*IE<9>*/
        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
    }
    .titleTxt{
        position: relative;
        width: 1200px;
        left: 50%;
        margin-left: -600px;
        color: #fff;
        font-size: 14px;
    }
    .titleLogo{
        position: relative;
        top: 3px;
        height: 20px;
    }
    .content{
        position: relative;
        width: 1200px;
        left: 50%;
        margin:10px 0 0  -600px;
        cursor: default;
        height: 100%;
        border: 1px solid #f4f4f4;
        border-radius:2px;
        // margin: 10px 25px;  
        .contentTitle{
            font-size: 16px;
            height: 44px;
            line-height: 44px;
            border-bottom: 1px solid #E6E6E6;
            font-weight:600;
            color: #333;
            position: relative;
            img {
                position: absolute;
                right: 0;
                top: 12px;
                width: 20px;
                height: 20px;
            }
            #toggleImg {
                display: none;
            }
            #toggleImgs {
                display: block;
            }
        }
        .contentInfoBox{
            width: 1160px;
            padding: 0 20px;
            background: #fff;
            margin: 0 0 10px 0;
            position: relative;
        }
        .infoBox{
            display: block;
        }
        .infoTxt{
            min-height: 33px;
            width: 1160px;
            font-size: 14px;
            color: #333;
            resize: none;
            line-height: 18px;
            // outline: none;
            padding: 10px;
            background: #F7F8FA;
            border: 1px solid #ccc;
            box-sizing: border-box;
            margin: 15px 0 0 0;
        }
        .infoTxt:focus{
            border: 1px solid #58a6e7;
            outline: 0;
            -webkit-box-shadow:#58a6e7 0px 0px 2px;
            -moz-box-shadow: #58a6e7 0px 0px 2px;
            box-shadow: #58a6e7 0px 0px 2px;
        }
            input::-webkit-input-placeholder{
                color: #ccc;
            }
                
    　　　　input:-moz-placeholder,textarea:-moz-placeholder{
                color: #ccc;
            }
    　　　　input::-moz-placeholder,textarea::-moz-placeholder{
                color: #ccc;
            }
    　　　　input:-ms-input-placeholder,textarea:-ms-input-placeholder{
                color: #ccc;
            }

        .btnBox{
            height: 36px;
            padding: 20px 0;
            position: relative;
        }
        .btn{
            position: absolute;
            left: 50%;
            margin-left: -48px;
            background-color: #5A8EEE;
            border-color: #5A8EEE;
            color: #fff;
            padding: 9px 20px;
            text-align: center;
            border-radius:4px;
            font-size: 14px;
            display: inline-block;
            cursor: pointer;
        }
        .example-btn{
            color: #5A8EEE;
            text-align: center;
            border-radius:4px;
            font-size: 16px;
            font-weight: 500;
            display: inline-block;
            margin: 0 20px 0 0;
            cursor: pointer;
            position: absolute;
            right: 0;
        }
        // .example-btn:hover{
        //     background-color: #5A8EEE;
        //     border-color: #5A8EEE;
        //     color: #fff;
        // }
        .resultBox{
            white-space: pre-wrap;
            min-height: 155px;
            line-height: 21px;
            padding: 20px 0;
            width: 1160px;
            position: relative;
            font-size: 14px;
            // css保留换行符
            // white-space: pre-line;
        }
        .star{
            color: #000;
        }
        .entryItem{
            display: inline-block;
            color: blue;
            position: relative;
            border-bottom: 1px solid blue;
        }
        .type{
            position: absolute;
            top: -35px;
            white-space: nowrap;
            left: 50%;
            transform: translateX(-50%);
            display: inline-block;
            background: #7F7F7F;
            padding: 5px;
            font-size: 14px;
            color: #fff;
            display: none;
            border-radius:4px;
        }
        .trangle{
            position: absolute;
            bottom: -12px;
            left: 50%;
            margin-left: -6px;
            width: 0; 
            height: 0;
            border-width: 6px;
            border-style: solid;
            border-color:#7F7F7F transparent transparent transparent;
        }
     
        .entryItem:hover{
            span{
                display: inline-block;
            }
        }
        .tableBox{
            min-height: 195px;
            position: relative;
        }
        table{
            display: none;
            width: 1160px;
            border: 1px solid #E6E8F0;
            box-sizing: border-box;
            border-collapse: collapse;
            font-size: 14px;
            thead{
                tr,td{
                    border: none;
                }
                
                background: #EFF0F9;
                top: 0;
                width: 1160px;
                display:table;
                table-layout:fixed;

            }
            tbody{
                display: block;
                width: 1160px;
                height:570px;
                overflow-x:hidden;
                overflow-y:auto;
                text-align: center;
                tr{
                    width: 1160px;
                    display:table;
                    table-layout:fixed;
                }
            }
        }
        tr,td{
            border: 1px solid #E6E8F0;
            line-height: 36px;
            height: 37px;
        }
        .tableTitle{
            width: 100%;
            font-size: 14px;
            font-weight:600;
            color: #333;
            padding: 20px 0 10px;
        }
        .entry1,.entry2,.relationType{
            text-align: center;
        }
        .disabled{
            opacity: 0.5;
            filter: "alpha(opacity=50)";
            filter: alpha(opacity=50);
        }
        .empty{
            position: absolute;
            display: none;
            width: 120px;
            height: 140px;
            top: 50%;
            left: 50%;
            margin: -50px 0 0 -51px;
            // display: none;
            .emptyImg{
                position: relative;
                width: 100px;
                left: 10px;
            }
            .emptyTxt{
                width: 120px;
                font-size:12px;
                margin: 20px 0 0 0;
                text-align: center;
                color: #aaa;
            }
        }
    }

}
.example{
    height: 48px;
    position: relative;
    line-height: 48px;
    text-indent: 15px;
    cursor: pointer;
    color: #000;
    font-size: 14px;
    &:hover,&.selected{
        background: #F0F5FF;
        
    }
}
.exampleInfo{
    background: #F0F5FF;
    padding: 15px;
    font-size: 14px;
    line-height: 21px;
    display: none;
}
.exampleBtn{
    display: inline-block;
    width:60px;
    height:28px;
    line-height: 28px;
    border-radius:14px;
    border:1px solid #5A8EEE;
    color: #5A8EEE;
    position: absolute;
    right: 75px;
    top: 9px;
}
.iconSlide{
    position: absolute;
    width: 14px;
    top: 20px;
    right: 15px;
}


#svg > svg {
    width: 100%;
}

#svg .poplar-annotation-content {
    // font-family: "PingFang SC", serif;
    font-size: 16px;
}
/* Label */
#svg .poplar-annotation-label {
    // font-family: "PingFang SC", serif;
    font-size: 12px;
}
#svg .poplar-annotation-label rect{
    rx: 4px;
    fill: #d8e5ff;
    color: #cbddff;
}
#svg .poplar-annotation-label g rect{
    rx: 4px;
    fill: #d8e5ff;
    stroke: #fff;
}
#svg .poplar-annotation-label.hover {
    
}
#svg .poplar-annotation-label.hover rect{
    fill: #93b6f9;
}
/* Connection */
#svg .poplar-annotation-connection {
    // font-family: "PingFang SC", serif;
    font-size: 11px;
}
/* 例如根元素的id是example时，需要 */
/* 单独的.poplar-annotation-connection-line不会生效 */
#svg .poplar-annotation-connection-line {
    stroke: #FEAC41;
}

#svg .poplar-annotation-connection-line.hover {
    stroke: #5A8EEE;
}
#svg {
    display: none;
}