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:#f0f8ff;
    border:1px solid #e1ecff;
    border-radius:2px;
    -webkit-box-shadow:0px 2px 4px 0px rgba(16, 37, 74, 0.1);
            box-shadow:0px 2px 4px 0px rgba(16, 37, 74, 0.1);
    z-index:2500;
    -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
    -webkit-transition:top .3s linear;
    transition:top .3s linear;
}

.bk-message-primary{
    background:#f0f8ff;
    border-color:#e1ecff;
}

.bk-message-primary .bk-message-icon .bk-icon{
        color:#3a84ff;
    }

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

.bk-message-error{
    background:#ffeded;
    border-color:#ffdddd;
    -webkit-box-shadow:0px 2px 4px 0px rgba(86, 34, 34, 0.1);
            box-shadow:0px 2px 4px 0px rgba(86, 34, 34, 0.1);
}

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

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

.bk-message-warning{
    background:#fff4e2;
    border-color:#ffe8c3;
    -webkit-box-shadow:0px 2px 4px 0px rgba(75, 51, 13, 0.1);
            box-shadow:0px 2px 4px 0px rgba(75, 51, 13, 0.1);
}

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

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

.bk-message-success{
    background:#f2fff4;
    border-color:#dcffe2;
    -webkit-box-shadow:0px 2px 4px 0px rgba(16, 68, 29, 0.1);
            box-shadow:0px 2px 4px 0px rgba(16, 68, 29, 0.1);
}

.bk-message-success .bk-message-icon .bk-icon{
        color:#2dcb56;
    }

.bk-message-success .bk-message-close .icon-close{
        color:#94f5a4;
    }

.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;
    color:#ffffff;
}

.bk-message-icon .bk-icon{
        display:block;
        width:18px;
        height:18px;
        line-height:18px;
        font-size:16px;
        text-align:center;
        color:#ffffff;
        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:230px;
    line-height:20px;
    font-size:14px;
    text-align:left;
    color:#63656e;
    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:#979ba5;
        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;
          min-height:300px;
          padding:14px 24px;
          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 .copy-status{
          display:none;
          padding-bottom:4px;
        }

.bk-message-content.multi .message-detail .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 .copy-status .inner span{
              margin-right:4px;
            }

.bk-message-content.multi .message-detail .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 .copy-status.success .inner span{
                color:#2dcb9d;
              }

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

.bk-message-content.multi .message-detail .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 .copy-status.is-hidden{
            top:-9999;
            left:-9999;
          }