@cw-devops/bk-magic-vue/lib/ui/version-detail.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.bk-version{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin:-23px -24px -16px;
}

.bk-version-left{
        -webkit-box-flex:0;
            -ms-flex:0 0 180px;
                flex:0 0 180px;
        background-color:#FAFBFD;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
            -ms-flex-direction:column;
                flex-direction:column;
        font-size:12px;
        position:relative;
    }

.bk-version-left .left-fill{
            height:20px;
            -webkit-box-flex:0;
                -ms-flex:0 0 20px;
                    flex:0 0 20px;
            border-right:1px solid #DCDEE5
        }

.bk-version-left .left-fill.fill-top{
                margin-top:-10px;
            }

.bk-version-left .left-fill.fill-bottom{
                margin-bottom:-10px;
            }

.bk-version-left .left-list{
            border-top:1px solid #DCDEE5;
            border-bottom:1px solid #DCDEE5;
            overflow-y:hidden;;
            display:-webkit-box;;
            display:-ms-flexbox;;
            display:flex;
            -webkit-box-orient:vertical;
            -webkit-box-direction:normal;
                -ms-flex-direction:column;
                    flex-direction:column;
            width:100%;
            margin:0;
            padding:0;
            -webkit-box-flex:1;
                -ms-flex:1;
                    flex:1;
        }

.bk-version-left .left-list-item{
                -webkit-box-flex:0;
                    -ms-flex:0 0 54px;
                        flex:0 0 54px;
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                -webkit-box-orient:vertical;
                -webkit-box-direction:normal;
                    -ms-flex-direction:column;
                        flex-direction:column;
                -webkit-box-pack:center;
                    -ms-flex-pack:center;
                        justify-content:center;
                padding:0 15px 0 30px;
                position:relative;
                border-bottom:1px solid #DCDEE5
            }

.bk-version-left .left-list-item:hover{
                    cursor:pointer;
                    background-color:#FFFFFF;
                }

.bk-version-left .left-list-item.border-after::after{
                        content:' ';
                        width:1px;
                        background:#DCDEE5;
                        position:absolute;
                        top:0;
                        bottom:0;
                        right:0;
                    }

.bk-version-left .left-list-item .item-title{
                    color:#63656E;
                    font-size:16px;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                    font-weight:600;
                }

.bk-version-left .left-list-item .item-date{
                    color:#979BA5;
                }

.bk-version-left .left-list-item .item-current{
                    position:absolute;
                    right:20px;
                    top:8px;
                    background-color:#699DF4;
                    border-radius:2px;
                    width:58px;
                    height:20px;
                    display:-webkit-box;
                    display:-ms-flexbox;
                    display:flex;
                    -webkit-box-align:center;
                        -ms-flex-align:center;
                            align-items:center;
                    -webkit-box-pack:center;
                        -ms-flex-pack:center;
                            justify-content:center;
                    color:#FFFFFF;
                }

.bk-version-left .left-list-item.item-active::before{
                        content:" ";
                        position:absolute;
                        top:0px;
                        bottom:0px;
                        left:0;
                        width:6px;
                        background-color:#3A84FF;
                    }

.bk-version-left .left-list-item.item-active{
                    background-color:#FFFFFF;
                }

.bk-version-left .left-list-item.item-active .item-title{
                        color:#313238;
                    }

.bk-version-left .left-list-item.item-active .item-date{
                        color:#63656E;
                    }

.bk-version-left .left-list-fill{
                -webkit-box-flex:1;
                    -ms-flex:1;
                        flex:1;
                border-right:1px solid #DCDEE5;
            }

.bk-version-left .left-list-loading{
                -webkit-box-flex:0;
                    -ms-flex:0 0 40px;
                        flex:0 0 40px;
                display:-webkit-box;
                display:-ms-flexbox;
                display:flex;
                -webkit-box-align:center;
                    -ms-flex-align:center;
                        align-items:center;
                -webkit-box-pack:center;
                    -ms-flex-pack:center;
                        justify-content:center;
                border-right:1px solid #DCDEE5;
                border-bottom:1px solid #DCDEE5;
            }

.bk-version-left .left-list-loading .bk-loading-wrapper{
                    display:-webkit-box;
                    display:-ms-flexbox;
                    display:flex;
                    -webkit-box-align:center;
                        -ms-flex-align:center;
                            align-items:center;
                    -webkit-box-pack:center;
                        -ms-flex-pack:center;
                            justify-content:center;
                }

.bk-version-left .left-list:hover{
                overflow-y:auto;
                margin-right:-6px;
            }

.bk-version-left .left-list::-webkit-scrollbar{
                width:6px;
                height:6px;
                background:rgba(0, 0, 0, .1);
            }

.bk-version-left .left-list::-webkit-scrollbar-thumb{
                border-radius:6px;
                height:100px;
                background:#C4C6CC;
                -webkit-box-shadow:inset 0 0 6px rgba(204, 204, 204, 0.3);
                        box-shadow:inset 0 0 6px rgba(204, 204, 204, 0.3);
            }

.bk-version-left .resize-line{
            position:absolute;
            top:-10px;
            bottom:-10px;
            right:-6px;
            width:13px;
            padding:0 6px;
            z-index:9999;
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-orient:vertical;
            -webkit-box-direction:normal;
                -ms-flex-direction:column;
                    flex-direction:column;
            -webkit-box-pack:center;
                -ms-flex-pack:center;
                    justify-content:center;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center
        }

.bk-version-left .resize-line:before, .bk-version-left .resize-line:after{
                content:' ';
                width:0;
                height:0;
                border:5px solid transparent;
                margin:0 0 0 1px;
            }

.bk-version-left .resize-line .drag-content{
                -webkit-box-flex:1;
                    -ms-flex:1;
                        flex:1;
                margin:-5px 0;
                width:1px;
                background-color:transparent;
            }

.bk-version-left .resize-line:hover .drag-content, .bk-version-left .resize-line:active .drag-content{
                    background-color:#3A84FF;
                }

.bk-version-left .resize-line:hover:before, .bk-version-left .resize-line:active:before{
                    border-top-color:#3A84FF;
                }

.bk-version-left .resize-line:hover:after, .bk-version-left .resize-line:active:after{
                    border-bottom-color:#3A84FF;
                }

.bk-version-right{
        -webkit-box-flex:1;
            -ms-flex:1;
                flex:1;
        padding:10px 30px 50px 45px;
        overflow:auto;
    }

.bk-version-right::-webkit-scrollbar{
        width:6px;
        height:6px;
    }

.bk-version-right::-webkit-scrollbar-thumb{
        min-height:24px;
        border-radius:3px;
        background-color:#dcdee5;
    }

.bk-version-markdown-theme{
        font-size:14px;
        color:#313238;
    }

.bk-version-markdown-theme h1,
        .bk-version-markdown-theme h2,
        .bk-version-markdown-theme h3,
        .bk-version-markdown-theme h4,
        .bk-version-markdown-theme h5{
            height:auto;
            margin:10px 0;
            font:normal 14px/1.5
                -apple-system,Helvetica Neue,Helvetica,Arial,PingFang SC,Microsoft YaHei,SimSun,sans-serif;
            font-weight:bold;
            color:#34383e;
        }

.bk-version-markdown-theme h1{
            font-size:30px;
        }

.bk-version-markdown-theme h2{
            font-size:24px;
        }

.bk-version-markdown-theme h3{
            font-size:18px;
        }

.bk-version-markdown-theme h4{
            font-size:16px;
        }

.bk-version-markdown-theme h5{
            font-size:14px;
        }

.bk-version-markdown-theme em{
            font-style:italic;
        }

.bk-version-markdown-theme div,
        .bk-version-markdown-theme p,
        .bk-version-markdown-theme font,
        .bk-version-markdown-theme span,
        .bk-version-markdown-theme li{
            line-height:1.3;
        }

.bk-version-markdown-theme p{
            margin:0 0 1em;
        }

.bk-version-markdown-theme table,
        .bk-version-markdown-theme table p{
            margin:0;
        }

.bk-version-markdown-theme ul,
        .bk-version-markdown-theme ol{
            padding-left:40px;
            margin:10px 0 10px;
            text-indent:0;
        }

.bk-version-markdown-theme ul{
            list-style:disc
        }

.bk-version-markdown-theme ul > li{
                line-height:1.8;
                white-space:normal;
                list-style:disc;
            }

.bk-version-markdown-theme ol{
            list-style:decimal
        }

.bk-version-markdown-theme ol > li{
                line-height:1.8;
                white-space:normal;
                list-style:decimal;
            }

.bk-version-markdown-theme li > ul{
            margin-bottom:10px;
        }

.bk-version-markdown-theme li ol{
            padding-left:20px !important;
        }

.bk-version-markdown-theme ul ul,
        .bk-version-markdown-theme ul ol,
        .bk-version-markdown-theme ol ol,
        .bk-version-markdown-theme ol ul{
            margin-bottom:0;
            margin-left:20px;
        }

.bk-version-markdown-theme pre,
        .bk-version-markdown-theme code{
            width:95%;
            padding:0 3px 2px;
            font-family:Monaco, Menlo, Consolas, "Courier New", monospace;
            font-size:14px;
            color:#333;
            border-radius:3px;
        }

.bk-version-markdown-theme code{
            padding:2px 4px;
            font-family:Consolas, monospace, tahoma, Arial;
            color:#d14;
            border:1px solid #e1e1e8;
        }

.bk-version-markdown-theme pre{
            display:block;
            padding:9.5px;
            margin:0 0 10px;
            font-family:Consolas, monospace, tahoma, Arial;
            font-size:13px;
            word-break:break-all;
            word-wrap:break-word;
            white-space:pre-wrap;
            background-color:#f6f6f6;
            border:1px solid #ddd;
            border:1px solid rgba(0,0,0,0.15);
            border-radius:2px;
        }

.bk-version-markdown-theme pre code{
                padding:0;
                white-space:pre-wrap;
                border:0;
            }

.bk-version-markdown-theme blockquote{
            padding:0 0 0 14px;
            margin:0 0 20px;
            border-left:5px solid #dfdfdf;
        }

.bk-version-markdown-theme blockquote ::before,
            .bk-version-markdown-theme blockquote ::after{
                content:"";
            }

.bk-version-markdown-theme blockquote p{
                margin-bottom:0;
                font-size:14px;
                font-weight:300;
                line-height:25px;
            }

.bk-version-markdown-theme blockquote small{
                display:block;
                line-height:20px;
                color:#999;
            }

.bk-version-markdown-theme blockquote small ::before{
                    content:"\2014 \00A0";
                }

.version-detail-dialog .bk-dialog-tool .bk-dialog-close{
    right:10px;
}