halo-theme-pix/templates/modules/variables/msg.html

<style>
    [class|=coco],
    [class|=coco]::after,
    [class|=coco]::before {
        box-sizing: border-box;
        outline: 0
    }

    .coco-msg-progress {
        width: 13px;
        height: 13px
    }

    .coco-msg__circle {
        stroke-width: 2;
        stroke-linecap: square;
        fill: none;
        transform: rotate(-90deg);
        transform-origin: center
    }

    .coco-msg-stage:hover .coco-msg__circle {
        -webkit-animation-play-state: paused !important;
        animation-play-state: paused !important
    }

    .coco-msg__background {
        stroke-width: 2;
        fill: none
    }

    .coco-msg-stage {
        position: fixed;
        top: 20px;
        left: 50%;
        width: auto;
        transform: translate(-50%, 0);
        z-index: 3000
    }

    .coco-msg-wrapper {
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        transform: translate3d(-50%, 0, 0);
        transition: height .3s ease, padding .3s ease;
        padding: 6px 0;
        will-change: transform, opacity
    }

    .coco-msg {
        padding: 15px 21px;
        border-radius: 3px;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        transform: translate3d(-50%, 0, 0);
        display: flex;
        align-items: center
    }

    .coco-msg-content,
    .coco-msg-icon,
    .coco-msg-wait {
        display: inline-block
    }

    .coco-msg-icon {
        position: relative;
        width: 13px;
        height: 13px;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .coco-msg-icon svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 11px;
        height: 11px
    }

    .coco-msg-wait {
        width: 20px;
        height: 20px;
        position: relative;
        fill: #4eb127
    }

    .coco-msg-wait svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .coco-msg-close {
        width: 14px;
        height: 14px
    }

    .coco-msg-content {
        margin: 0 10px;
        min-width: 240px;
        text-align: left;
        font-size: 14px;
        font-weight: 500;
        font-family: -apple-system, Microsoft Yahei, sans-serif;
        text-shadow: 0 0 1px rgba(0, 0, 0, .01)
    }

    .coco-msg.info {
        color: #0fafad;
        background-color: #e7fdfc;
        box-shadow: 0 0 2px 0 rgba(0, 1, 1, .01), 0 0 0 1px #c0faf9
    }

    .coco-msg.info .coco-msg-icon {
        background-color: #0fafad
    }

    .coco-msg.success {
        color: #4ebb23;
        background-color: #f3ffe8;
        box-shadow: 0 0 2px 0 rgba(0, 1, 0, .01), 0 0 0 1px #d9f8bb
    }

    .coco-msg.success .coco-msg-icon {
        background-color: #4ebb23
    }

    .coco-msg.warning {
        color: #f1b306;
        background-color: #fff9eb;
        box-shadow: 0 0 2px 0 rgba(1, 1, 0, .01), 0 0 0 1px #fcf2cd
    }

    .coco-msg.warning .coco-msg-icon {
        background-color: #f1b306
    }

    .coco-msg.error {
        color: #f34b51;
        background-color: #fff7f7;
        box-shadow: 0 0 2px 0 rgba(1, 0, 0, .01), 0 0 0 1px #ffe3e3
    }

    .coco-msg.error .coco-msg-icon {
        background-color: #f34b51
    }

    .coco-msg.loading {
        color: #0fafad;
        background-color: #e7fdfc;
        box-shadow: 0 0 2px 0 rgba(0, 1, 1, .01), 0 0 0 1px #c2faf9
    }

    .coco-msg_loading {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        position: relative
    }

    .coco-msg-circular {
        -webkit-animation: coco-msg-rotate 2s linear infinite both;
        animation: coco-msg-rotate 2s linear infinite both;
        transform-origin: center center;
        height: 18px !important;
        width: 18px !important
    }

    .coco-msg-path {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        stroke: #0fafad;
        -webkit-animation: coco-msg-dash 1.5s ease-in-out infinite;
        animation: coco-msg-dash 1.5s ease-in-out infinite;
        stroke-linecap: round
    }

    @-webkit-keyframes coco-msg-rotate {
        100% {
            transform: translate(-50%, -50%) rotate(360deg)
        }
    }

    @keyframes coco-msg-rotate {
        100% {
            transform: translate(-50%, -50%) rotate(360deg)
        }
    }

    @-webkit-keyframes coco-msg-dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0
        }

        50% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -35px
        }

        100% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -124px
        }
    }

    @keyframes coco-msg-dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0
        }

        50% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -35px
        }

        100% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -124px
        }
    }

    .coco-msg.info .coco-msg-wait {
        fill: #0fafad
    }

    .coco-msg.success .coco-msg-wait {
        fill: #4ebb23
    }

    .coco-msg.warning .coco-msg-wait {
        fill: #f1b306
    }

    .coco-msg.error .coco-msg-wait {
        fill: #f34b51
    }

    .coco-msg.loading .coco-msg-wait {
        fill: #0fafad
    }

    .coco-msg-pointer {
        cursor: pointer
    }

    @-webkit-keyframes coco-msg_info {
        0% {
            stroke: #0fafad
        }

        to {
            stroke: #0fafad;
            stroke-dasharray: 0 100
        }
    }

    @keyframes coco-msg_info {
        0% {
            stroke: #0fafad
        }

        to {
            stroke: #0fafad;
            stroke-dasharray: 0 100
        }
    }

    @-webkit-keyframes coco-msg_success {
        0% {
            stroke: #4eb127
        }

        to {
            stroke: #4eb127;
            stroke-dasharray: 0 100
        }
    }

    @keyframes coco-msg_success {
        0% {
            stroke: #4eb127
        }

        to {
            stroke: #4eb127;
            stroke-dasharray: 0 100
        }
    }

    @-webkit-keyframes coco-msg_warning {
        0% {
            stroke: #fcbc0b
        }

        to {
            stroke: #fcbc0b;
            stroke-dasharray: 0 100
        }
    }

    @keyframes coco-msg_warning {
        0% {
            stroke: #fcbc0b
        }

        to {
            stroke: #fcbc0b;
            stroke-dasharray: 0 100
        }
    }

    @-webkit-keyframes coco-msg_error {
        0% {
            stroke: #eb262d
        }

        to {
            stroke: #eb262d;
            stroke-dasharray: 0 100
        }
    }

    @keyframes coco-msg_error {
        0% {
            stroke: #eb262d
        }

        to {
            stroke: #eb262d;
            stroke-dasharray: 0 100
        }
    }

    .coco-msg-fade-in {
        -webkit-animation: coco-msg-fade .2s ease-out both;
        animation: coco-msg-fade .2s ease-out both
    }

    .coco-msg-fade-out {
        animation: coco-msg-fade .3s linear reverse both
    }

    @-webkit-keyframes coco-msg-fade {
        0% {
            opacity: 0;
            transform: translate(-50%, 0);
            transform: translate3d(-50%, -80%, 0)
        }

        to {
            opacity: 1;
            transform: translate(-50%, 0);
            transform: translate3d(-50%, 0, 0)
        }
    }

    @keyframes coco-msg-fade {
        0% {
            opacity: 0;
            transform: translate(-50%, 0);
            transform: translate3d(-50%, -80%, 0)
        }

        to {
            opacity: 1;
            transform: translate(-50%, 0);
            transform: translate3d(-50%, 0, 0)
        }
    }
</style>