icons.user.css

/* ==UserStyle==
@name           monkeytype icons
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Bootstrap icons and animations for monkeytype
@author         refact0r
@homepageURL    https://github.com/refact0r/monkeytype-themes
@updateURL      https://github.com/refact0r/monkeytype-themes/raw/main/icons.user.css
==/UserStyle== */
@-moz-document domain("monkeytype.com") {
    @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css");

    /* base styling for bootstrap icons */
    i::before,
    .supportButtons .button div,
    .contactButtons .button div {
        display: inline-block;
        font-family: bootstrap-icons !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
    }

    /* icons */
    .fa-keyboard::before {
        content: "\f451";
    }
    .fa-crown::before {
        content: "\f5e7";
    }
    .fa-info::before {
        content: "\f431";
    }
    .fa-cog::before {
        content: "\f3e5";
    }
    .fa-user::before,
    .fa-user-circle::before {
        content: "\f4e1";
    }
    .fa-tools::before {
        content: "\f5db";
    }
    .fa-mouse-pointer::before {
        content: "\f402";
        /* content: "\f2e3"; triangle cursor */
        /* content: "\f2e2"; text cursor */
    }
    .fa-redo-alt::before {
        content: "\f116";
    }
    .fa-globe-americas::before {
        content: "\f3ee";
    }
    .fa-chevron-right::before {
        content: "\f285";
    }
    .fa-sync-alt::before {
        content: "\f117";
    }
    .fa-exclamation-triangle::before {
        content: "\f33b";
    }
    .fa-align-left::before {
        content: "\f5c7";
    }
    .fa-backward::before {
        content: "\f552";
    }
    .fa-image::before {
        content: "\f226";
    }
    .fa-search::before {
        content: "\f52a";
    }
    .fa-chevron-down::before {
        content: "\f282";
    }
    .fa-angle-double-up::before {
        content: "\f281";
    }
    .fa-save::before {
        content: "\f272";
        /* content: "\f525"; default save */
    }
    .fa-check::before {
        content: "\f272";
    }
    .fa-quote-right::before {
        content: "\f250";
    }
    .fa-percentage::before {
        content: "\f4d1";
    }
    .fa-bomb::before {
        content: "\f333";
    }
    .fa-tachometer-alt::before {
        content: "\f57f";
    }
    .fa-chart-line::before {
        content: "\f3f2";
    }
    .fa-exchange-alt::before {
        content: "\f12b";
    }
    .fa-ad::before {
        content: "\f161";
    }
    .fa-palette::before {
        content: "\f4b1";
    }
    .fa-i-cursor::before {
        content: "\f2e2";
    }
    .fa-language::before {
        content: "\f658";
    }
    .fa-gamepad::before {
        content: "\f2d4";
        /* content: "\f448"; joystick */
    }
    .fa-long-arrow-alt-right::before {
        content: "\f138";
    }
    .fa-angle-down::before {
        content: "\f282";
    }
    .fa-bars::before {
        content: "\f479";
    }
    .fa-eye-slash::before {
        content: "\f340";
    }
    .fa-step-forward::before {
        content: "\f55e";
    }
    .fa-volume-mute::before {
        content: "\f60d";
    }
    .fa-hand-paper::before {
        content: "\f337";
    }
    .fa-star::before {
        content: "\f588";
    }
    .fa-clock::before {
        content: "\f293";
    }
    .fa-font::before {
        content: "\f3da";
    }
    .fa-volume-up::before {
        content: "\f611";
    }
    .fa-fire-alt::before {
        content: "\f5ce";
    }
    .fa-question::before {
        content: "\f64e";
    }
    .fa-minus::before {
        content: "\f63b";
    }
    .fa-exclamation::before {
        content: "\f63c";
    }
    .fa-list::before {
        content: "\f479";
    }
    .fa-adjust::before {
        content: "\f288";
    }
    .fa-fill-drip::before {
        content: "\f4af";
    }
    .fa-random::before {
        content: "\f544";
    }
    .fa-highlighter::before {
        content: "\f435";
    }
    .fa-arrows-alt-h::before {
        content: "\f14a";
        /* content: "\f150"; aspect ratio box */
    }
    .fa-egg::before {
        content: "\f46f";
    }
    .fa-backspace::before {
        content: "\f159";
    }
    .fa-sign-out-alt::before {
        content: "\f1c3";
    }
    .fa-calendar::before {
        content: "\f1f6";
    }
    .fa-tags::before {
        content: "\f5b0";
    }
    .fa-tag::before {
        content: "\f5b0";
    }
    .fa-bullseye::before {
        content: "\f1de";
    }
    .fa-question-circle::before {
        content: "\f505";
    }
    .fa-sort-down::before {
        content: "\f22c";
    }
    .fa-sort-up::before {
        content: "\f238";
    }
    .fa-unlink::before {
        content: "\f471";
    }
    .fa-pen::before {
        content: "\f4c8";
    }
    .fa-trash::before {
        content: "\f5de";
    }
    .fa-plus::before {
        content: "\f4fe";
    }
    .fa-user-plus::before {
        content: "\f4dd";
    }
    .fa-sign-in-alt::before {
        content: "\f1c3";
    }
    .fa-google::before {
        content: "\f3f0";
    }
    .fa-envelope::before {
        content: "\f32f";
    }
    .fa-code::before {
        content: "\f2c6";
    }
    .fa-discord::before {
        content: "\f300";
    }
    .fa-twitter::before {
        content: "\f5ef";
    }
    .fa-file-contract::before {
        content: "\f38b";
    }
    .fa-shield-alt::before {
        content: "\f53f";
    }
    .fa-lock::before {
        content: "\f47b";
    }
    .fa-donate::before {
        content: "\f64a";
    }
    .fa-code-branch::before {
        content: "\f2ec";
    }
    .fa-copy::before {
        content: "\f290";
    }
    .fa-play::before {
        content: "\f4f5";
    }
    .fa-pause::before {
        content: "\f4c4";
    }
    .fa-github::before {
        content: "\f3ed";
    }
    .fa-times::before {
        content: "\f62a";
    }
    .fa-filter::before {
        content: "\f3e1";
    }
    .fa-bullhorn::before {
        content: "\f484";
    }
    .fa-ellipsis-v::before {
        content: "\f5d3";
    }
    .fa-link::before {
        content: "\f470";
    }
    .fa-file-csv::before {
        content: "\f743" !important;
    }
    .fa-hammer::before {
        content: "\f3ff";
    }
    .fa-frown-open::before {
        content: "\f31d";
    }
    .fa-list-ol::before {
        content: "\f475";
    }

    /* don't change these icons because they don't have a bootstrap equivalent */
    .fa-circle-notch::before {
        font-family: "Font Awesome 5 Free" !important;
        font-weight: inherit !important;
        vertical-align: 0;
    }
    .fa-patreon::before {
        font-family: "Font Awesome 5 Brands" !important;
        font-weight: inherit !important;
    }
    .fa-tshirt::before {
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
    }
    .fa-baby::before {
        font-family: "Font Awesome 5 Free" !important;
        font-weight: inherit !important;
        vertical-align: 0;
    }

    /* icon animations*/
    @keyframes spin {
        100% {
            transform: rotate(1turn);
        }
    }
    @keyframes spinBackwards {
        100% {
            transform: rotate(-1turn);
        }
    }
    @keyframes moveRight {
        50% {
            opacity: 0;
            transform: translateX(20px) scale(0.9);
        }
        51% {
            opacity: 0;
            transform: translateX(-20px) scale(0.9);
        }
    }
    @keyframes moveLeft {
        50% {
            opacity: 0;
            transform: translateX(-20px) scale(0.9);
        }
        51% {
            opacity: 0;
            transform: translateX(20px) scale(0.9);
        }
    }
    @keyframes bounce {
        50% {
            transform: translateY(-0.5rem);
        }
    }
    @keyframes fade {
        50% {
            opacity: 0;
        }
    }
    @keyframes grow {
        50% {
            transform: scale(1.2);
        }
    }

    /* apply icon animations */
    .view-start:hover i {
        animation: moveLeft 1s ease infinite;
    }
    .view-leaderboards:hover i {
        animation: bounce 1s ease infinite;
    }
    .view-about:hover i {
        animation: fade 1s ease infinite;
    }
    .view-settings:hover i {
        animation: spin 1s ease infinite;
    }
    .view-account:hover i,
    .view-login:hover i {
        animation: grow 1s ease infinite;
    }
    #restartTestButtonWithSameWordset:hover i,
    #restartTestButtonWithSameWordset:focus i {
        animation: spinBackwards 1s ease infinite;
    }
    #restartTestButton:hover i,
    #restartTestButton:focus i {
        animation: spin 1s ease infinite;
    }
    #nextTestButton:hover i,
    #nextTestButton:focus i {
        animation: moveRight 1s ease infinite;
    }
    #practiseWordsButton:hover i,
    #practiseWordsButton:focus i {
        animation: bounce 1s ease infinite;
    }
    #showWordHistoryButton:hover i,
    #showWordHistoryButton:focus i {
        animation: fade 1s ease infinite;
    }
    #watchReplayButton:hover i,
    #watchReplayButton:focus i {
        animation: moveLeft 1s ease infinite;
    }
    #saveScreenshotButton:hover i,
    #saveScreenshotButton:focus i {
        animation: grow 1s ease infinite;
    }
}