/* ==UserStyle==
@name           Workflowy官方缺美工，咱就自己上！
@description    比WF官方主题好看亿点点~
@namespace      github.com/openstyles/stylus
@version        0.1
@author         YYYYang
@license 		MIT
@downloadURL none
==/UserStyle== */
@-moz-document domain("workflowy.com") {

    /* 让todo节点的小方块与其它bullet节点竖直对齐 */

    .checkmark:not(.boardColumn):not(.boardCard):not(.dashboard-card)>.name {

        a.bullet {
            opacity: 0;
        }

        >.prefix,
        >.content {
            left: -22px;
        }
    }

    .checkmark:not(.boardColumn):not(.boardCard):not(.dashboard-card):hover>.name {
        a.bullet {
            opacity: 1;
        }

        >.prefix,
        >.content {
            -webkit-animation: slide-right 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-right 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }

        .prefix label:hover {
            -webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
            animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
        }
    }


    /* * ----------------------------------------
    /* * animation slide-right
    /* * ---------------------------------------- */

    @-webkit-keyframes slide-right {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }

        100% {
            -webkit-transform: translateX(22px);
            transform: translateX(22px);
        }
    }

    @keyframes slide-right {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }

        100% {
            -webkit-transform: translateX(22px);
            transform: translateX(22px);
        }
    }


    /* * ----------------------------------------
    /* * animation shake-bottom
    /* * ---------------------------------------- */

    @-webkit-keyframes shake-bottom {

        0%,
        100% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
        }

        10% {
            -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
        }

        20%,
        40%,
        60% {
            -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
        }

        30%,
        50%,
        70% {
            -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
        }

        80% {
            -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
        }

        90% {
            -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
        }
    }

    @keyframes shake-bottom {

        0%,
        100% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
        }

        10% {
            -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
        }

        20%,
        40%,
        60% {
            -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
        }

        30%,
        50%,
        70% {
            -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
        }

        80% {
            -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
        }

        90% {
            -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
        }
    }


}