// ==UserScript==
// @name Workflowy官方缺美工，咱就自己上！
// @namespace github.com/openstyles/stylus
// @version 0.1
// @description 比WF官方主题好看亿点点~
// @author YYYYang
// @license MIT
// @grant GM_addStyle
// @run-at document-start
// @match *://*.workflowy.com/*
// @downloadURL none
// ==/UserScript==

(function() {
let css = `

    /* 让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);
        }
    }


`;
if (typeof GM_addStyle !== "undefined") {
  GM_addStyle(css);
} else {
  const styleNode = document.createElement("style");
  styleNode.appendChild(document.createTextNode(css));
  (document.querySelector("head") || document.documentElement).appendChild(styleNode);
}
})();