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

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

.bk-message{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
        -ms-flex-direction:row;
            flex-direction:row;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    position:fixed;
    left:50%;
    padding:10px 15px;
    background:#FFF;
    border-radius:6px;
    -webkit-box-shadow:0 0 20px rgba(189, 189, 189, 0.7);
            box-shadow:0 0 20px rgba(189, 189, 189, 0.7);
    z-index:2500;
    -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
    -webkit-transition:top .3s linear;
    transition:top .3s linear;
}

.bk-message-primary .bk-message-icon .bk-icon-custom{
        color:#0053F9;
    }

.bk-message-primary .bk-message-close .icon-close{
        color:#8797AA;
    }

.bk-message-error{
}

.bk-message-error .bk-message-icon .bk-icon-custom{
        color:#FF383D;
    }

.bk-message-error .bk-message-close .icon-close{
        color:#8797AA;;
    }

.bk-message-warning{
}

.bk-message-warning .bk-message-icon .bk-icon-custom{
        color:#FF7222;
    }

.bk-message-warning .bk-message-close .icon-close{
        color:#8797AA;;
    }

.bk-message-success{
}

.bk-message-success .bk-message-icon .bk-icon-custom{
        color:#00B33A;
    }

.bk-message-success .bk-message-close .icon-close{
        color:#8797AA;
    }

.bk-message-icon{
    -ms-flex-item-align:start;
        align-self:flex-start;
    -ms-flex-negative:0;
        flex-shrink:0;
    margin-top:1px;
    margin-right:10px;
}

.bk-message-icon .bk-icon-custom{
        display:block;
        width:18px;
        height:18px;
        line-height:18px;
        font-size:16px;
        text-align:center;
        border-radius:50%;
    }

.bk-message-content{
    box-flex:1;
    -webkit-box-flex:1;
        -ms-flex-positive:1;
            flex-grow:1;
    -ms-flex:1;
        flex:1;
    min-width:56px;
    max-width:538px;
    line-height:20px;
    font-size:14px;
    text-align:left;
    color:#081E40;
    word-break:break-all
}

.bk-message-content.ellipsis{
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

.bk-message-content.multi-ellipsis{
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:var(--line);
        -webkit-box-orient:vertical;
    }

.bk-message-close{
    -ms-flex-item-align:start;
        align-self:flex-start;
    -ms-flex-negative:0;
        flex-shrink:0;
    text-align:center;
}

.bk-message-close .bk-icon{
        display:block;
        margin-left:30px;
        width:20px;
        height:20px;
        line-height:20px;
        color:#081E40;
        font-size:18px;
        font-weight:bold;
        border-radius:50%;
        cursor:pointer
    }

.bk-message-close .bk-icon:hover{
            background-color:#f0f1f5;
        }

.bk-message-copy{
    font-size:14px;
    -ms-flex-item-align:end;
        align-self:flex-end;
    color:#3a84ff;
    cursor:pointer;
    margin-left:5px;
    line-height:20px;
}

.bk-message-copy.copied{
    color:#979ba5;
    cursor:default;
}

.vertical-move-enter,
.vertical-move-leave-to{
    opacity:0;
    margin-top:-50px;
}

.vertical-move-enter-active,
.vertical-move-leava-active{
    -webkit-transition:margin .2s linear;
    transition:margin .2s linear;
}

.bk-message-content{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    width:100%;
    word-break:break-all
  }

.bk-message-content.multi{
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
          -ms-flex-direction:column;
              flex-direction:column;
      position:relative;
    }

.bk-message-content.multi .overview{
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-pack:justify;
            -ms-flex-pack:justify;
                justify-content:space-between;
        -webkit-box-align:self-start;
            -ms-flex-align:self-start;
                align-items:self-start;
      }

.bk-message-content.multi .overview .left-content{
          display:-webkit-box;
          display:-ms-flexbox;
          display:flex;
        }

.bk-message-content.multi .overview .left-content .describe{
            display:-webkit-box;
            max-width:560px;
            max-height:60px;
            overflow:hidden;
            text-overflow:ellipsis;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:3;
          }

.bk-message-content.multi .overview .tools{
          display:-webkit-box;
          display:-ms-flexbox;
          display:flex;
          -webkit-box-align:center;
              -ms-flex-align:center;
                  align-items:center;
        }

.bk-message-content.multi .overview .tools .tool{
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            padding:0 5px;
            font-size:14px;
            cursor:pointer;
            -webkit-box-align:center;
                -ms-flex-align:center;
                    align-items:center;
          }

.bk-message-content.multi .overview .tools .tool .bk-message-close{
              padding-left:0
            }

.bk-message-content.multi .overview .tools .tool .bk-message-close:hover{
                color:#979ba5;
              }

.bk-message-content.multi .overview .tools .tool .bk-message-close:hover i{
                   color:#979ba5;
                }

.bk-message-content.multi .overview .tools .tool .bk-message-close i{
                margin-left:0;
                color:#c4c6cc;
              }

.bk-message-content.multi .overview .tools .tool .message-action-text{
              padding-left:4px;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }

.bk-message-content.multi .overview .tools .tool:not(.fix) span{
                color:#3a84ff;
              }

.bk-message-content.multi .overview .tools .tool.fix.fixed span{
                  color:#3a84ff;
                }

.bk-message-content.multi .overview .tools .tool.fix span{
                color:#979ba5;
              }

.bk-message-content.multi .overview .tools .tool.fix:hover span{
                  color:#3a84ff;
                }

.bk-message-content.multi .overview .tools .tool.close span{
                color:#c4c6cc
              }

.bk-message-content.multi .overview .tools .tool.close span:hover{
                  color:#979ba5;
                }

.bk-message-content.multi .message-detail{
        position:relative;
        margin-top:10px;
      }

.bk-message-content.multi .message-detail .message-tree{
          max-height:480px;
          padding:14px 32px;
          overflow:auto;
          background:#fff;
          border-radius:2px;
        }

.bk-message-content.multi .message-detail .message-tree .message-row{
            display:-webkit-inline-box;
            display:-ms-inline-flexbox;
            display:inline-flex;
            font-size:14px;
            line-height:34px;
            color:#313238;
          }

.bk-message-content.multi .message-detail .message-tree .message-row label{
              display:inline-block;
              width:94px;
              min-width:94px;
              margin-right:8px;
              overflow:hidden;
              color:#63656e;
              text-align:right;
              text-overflow:ellipsis;
              white-space:nowrap
            }

.bk-message-content.multi .message-detail .message-tree .message-row label::after{
                content:':';
              }

.bk-message-content.multi .message-detail .message-tree .message-row .copy-value{
              padding-left:4px
            }

.bk-message-content.multi .message-detail .message-tree .message-row .copy-value:hover{
                background:rgba(186, 188, 192, 0.2);
                cursor:pointer;
                border-radius:2px;
              }

.bk-message-content.multi .message-detail .message-copy{
          position:absolute;
          top:0px;
          right:0px;
          font-size:18px;
          width:24px;
          height:24px;
          display:-webkit-box;
          display:-ms-flexbox;
          display:flex;
          -webkit-box-align:center;
              -ms-flex-align:center;
                  align-items:center;
          border-radius:0 2px 0 6px;
          cursor:pointer;
          -webkit-box-pack:center;
              -ms-flex-pack:center;
                  justify-content:center;
          background:#F5F7FA;
          color:#9FA3AE
        }

.bk-message-content.multi .message-detail .message-copy:hover{
            background:#F0F5FF;
          }

.bk-message-content.multi .message-detail .message-copy:hover span{
              color:#3a84ff;
            }

.bk-message-content.multi .message-detail .message-copy .copy-status{
            display:none;
            padding-bottom:4px;
          }

.bk-message-content.multi .message-detail .message-copy .copy-status .inner{
              position:relative;
              display:-webkit-box;
              display:-ms-flexbox;
              display:flex;
              padding:6px 8px;
              font-size:12px;
              line-height:20px;
              color:#63656e;
              background:#fff;
              border:1px solid #dcdee5;
              -webkit-box-shadow:0 2px 6px 0 rgba(0,0,0,0.10196);
                      box-shadow:0 2px 6px 0 rgba(0,0,0,0.10196);
              -webkit-box-align:center;
                  -ms-flex-align:center;
                      align-items:center;
            }

.bk-message-content.multi .message-detail .message-copy .copy-status .inner span{
                margin-right:4px;
              }

.bk-message-content.multi .message-detail .message-copy .copy-status .inner::after{
                position:absolute;
                bottom:0;
                left:50%;
                width:8px;
                height:8px;
                background:#fff;
                border-color:#dcdee5;
                border-style:solid;
                border-width:0px 1px 1px 0px;
                content:'';
                -webkit-transform:translate(0, 4px) rotate(45deg);
                        transform:translate(0, 4px) rotate(45deg);
                -webkit-box-shadow:5px 3px 6px 0 rgba(0,0,0,0.10196);
                        box-shadow:5px 3px 6px 0 rgba(0,0,0,0.10196);
                -webkit-box-sizing:border-box;
                        box-sizing:border-box;
              }

.bk-message-content.multi .message-detail .message-copy .copy-status.success .inner span{
                  color:#2dcb9d;
                }

.bk-message-content.multi .message-detail .message-copy .copy-status.error .inner span{
                  color:#ea3636;
                }

.bk-message-content.multi .message-detail .message-copy .copy-status.is-show{
              position:absolute;
              top:0;
              left:0;
              display:-webkit-inline-box;
              display:-ms-inline-flexbox;
              display:inline-flex;
              white-space:nowrap;
            }

.bk-message-content.multi .message-detail .message-copy .copy-status.is-hidden{
              top:-9999;
              left:-9999;
            }