metro10

metro10.css

/* title: Metro 10 */
/* icon: data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIxMDA5LjYzNyAxNTYuMDMgMTIyLjAxNSAxMjEuNTQ4IiB3aWR0aD0iNTEuMjQ2bW0iIGhlaWdodD0iNTEuMDVtbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB4PSIxMDA5LjYzNyIgeT0iMTU2LjAzIiB3aWR0aD0iMTIyLjAxNSIgaGVpZ2h0PSIxMjEuNTQ4IiBzdHlsZT0iIi8+CiAgPGcgc3R5bGU9IiIgdHJhbnNmb3JtPSJtYXRyaXgoMC4xMjQzODUsIDAsIDAsIDAuMTI1MDY4LCAxMDM5LjU0ODIxOCwgMTg1LjUzNzEyNSkiPgogICAgPHBhdGggaWQ9InBhdGgtNyIgc3R5bGU9InN0cm9rZS13aWR0aDogMC4wOTUzMTcxOyBzdHJva2UtbGluZWNhcDogcm91bmQ7IHN0cm9rZS1taXRlcmxpbWl0OiA2LjM7IGZpbGwtb3BhY2l0eTogMTsgZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIgZD0iTSA0OTUuMjM3IDE1NS41NzggTCAzMDYuODQ3IDE2NC45NzEgTCAzMDYuODQ3IDMzLjUwNiBDIDM2Ni44NDMgMjUuMDc4IDQyNS44MjYgMTYuNzkxIDQ5NS4yMzcgNy4wMzUgWiIvPgogICAgPHBhdGggaWQ9InBhdGgtOCIgc3R5bGU9InN0cm9rZS13aWR0aDogMC4wOTUzMTcxOyBzdHJva2UtbGluZWNhcDogcm91bmQ7IHN0cm9rZS1taXRlcmxpbWl0OiA2LjM7IGZpbGwtb3BhY2l0eTogMTsgZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIgZD0iTSAxMjAuNjY1IDMwNy4zMjggTCA0Ljc2MyAzMDIuMDcgTCA0Ljc2MyAxOTcuOTMgTCAxMjAuNjY1IDE5Mi42NzIgWiIvPgogICAgPHBhdGggaWQ9InBhdGgtOSIgc3R5bGU9InN0cm9rZS13aWR0aDogMC4wOTUzMTcxOyBzdHJva2UtbGluZWNhcDogcm91bmQ7IHN0cm9rZS1taXRlcmxpbWl0OiA2LjM7IGZpbGwtb3BhY2l0eTogMTsgZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIgZD0iTSA0OTUuMjM3IDQ5Mi45NjUgTCAzMDYuODQ3IDQ2Ni40OTQgTCAzMDYuODQ3IDMzNS4wMjkgTCA0OTUuMjM3IDM0NC40MjIgWiIvPgogICAgPHBhdGggaWQ9InBhdGgtMTAiIHN0eWxlPSJzdHJva2Utd2lkdGg6IDAuMTM0Nzk5OyBzdHJva2UtbGluZWNhcDogcm91bmQ7IHN0cm9rZS1taXRlcmxpbWl0OiA2LjM7IGZpbGwtb3BhY2l0eTogMTsgZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIgZD0iTSAxMzkuODE1IDE5MS44MSBMIDQ5NS4yMzcgMTc1LjcwNCBMIDQ5NS4yMzcgMzI0LjI5NiBMIDEzOS44MTUgMzA4LjE5IFoiLz4KICAgIDxwYXRoIGlkPSJwYXRoLTExIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOiAwLjEzNDc5OTsgc3Ryb2tlLWxpbmVjYXA6IHJvdW5kOyBzdHJva2UtbWl0ZXJsaW1pdDogNi4zOyBmaWxsLW9wYWNpdHk6IDE7IGZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiIGQ9Ik0gNC43NjMgMzE5Ljk1NSBMIDI4NS45MDkgMzMzLjk4MiBMIDI4NS45MDkgNDYzLjU1MiBMIDQuNzYzIDQyNC4wNTMgWiIvPgogICAgPHBhdGggaWQ9InBhdGgtMTIiIHN0eWxlPSJzdHJva2Utd2lkdGg6IDAuMTM0Nzk5OyBzdHJva2UtbGluZWNhcDogcm91bmQ7IHN0cm9rZS1taXRlcmxpbWl0OiA2LjM7IGZpbGwtb3BhY2l0eTogMTsgZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIgZD0iTSA0Ljc2MyA3NS45NDcgTCAyODUuOTA5IDM2LjQ0OCBMIDI4NS45MDkgMTY2LjAxOCBMIDQuNzYzIDE4MC4wNDQgWiIvPgogIDwvZz4KPC9zdmc+ */
/* description: Windows 10 Mobile-style theme for Groove Launcher. */
/* author: Hoax Cherry */


:root {
    --tile-margin: 4px;
    --tile-list-normal-margin-x: 8px !important;
    --tile-list-normal-margin-y: 8px !important;
    --tile-list-compact-margin-x: 8px !important;
    --tile-list-compact-margin-y: var(--tile-list-normal-margin-y) !important;
    --icon: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIxMDA5LjYzNyAxNTYuMDMgMTIyLjAxNSAxMjEuNTQ4IiB3aWR0aD0iNTEuMjQ2bW0iIGhlaWdodD0iNTEuMDVtbSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB4PSIxMDA5LjYzNyIgeT0iMTU2LjAzIiB3aWR0aD0iMTIyLjAxNSIgaGVpZ2h0PSIxMjEuNTQ4IiBzdHlsZT0iIi8+CiAgPGcgc3R5bGU9IiIgdHJhbnNmb3JtPSJtYXRyaXgoMC4xMjQzODUsIDAsIDAsIDAuMTI1MDY4LCAxMDM5LjU0ODIxOCwgMTg1LjUzNzEyNSkiPgogICAgPHBhdGggaWQ9InBhdGgtNyIgc3R5bGU9InN0cm9rZS13aWR0aDogMC4wOTUzMTcxOyBzdHJva2UtbGluZWNhcDogcm91bmQ7IHN0cm9rZS1taXRlcmxpbWl0OiA2LjM7IGZpbGwtb3BhY2l0eTogMTsgZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIgZD0iTSA0OTUuMjM3IDE1NS41NzggTCAzMDYuODQ3IDE2NC45NzEgTCAzMDYuODQ3IDMzLjUwNiBDIDM2Ni44NDMgMjUuMDc4IDQyNS44MjYgMTYuNzkxIDQ5NS4yMzcgNy4wMzUgWiIvPgogICAgPHBhdGggaWQ9InBhdGgtOCIgc3R5bGU9InN0cm9rZS13aWR0aDogMC4wOTUzMTcxOyBzdHJva2UtbGluZWNhcDogcm91bmQ7IHN0cm9rZS1taXRlcmxpbWl0OiA2LjM7IGZpbGwtb3BhY2l0eTogMTsgZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIgZD0iTSAxMjAuNjY1IDMwNy4zMjggTCA0Ljc2MyAzMDIuMDcgTCA0Ljc2MyAxOTcuOTMgTCAxMjAuNjY1IDE5Mi42NzIgWiIvPgogICAgPHBhdGggaWQ9InBhdGgtOSIgc3R5bGU9InN0cm9rZS13aWR0aDogMC4wOTUzMTcxOyBzdHJva2UtbGluZWNhcDogcm91bmQ7IHN0cm9rZS1taXRlcmxpbWl0OiA2LjM7IGZpbGwtb3BhY2l0eTogMTsgZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIgZD0iTSA0OTUuMjM3IDQ5Mi45NjUgTCAzMDYuODQ3IDQ2Ni40OTQgTCAzMDYuODQ3IDMzNS4wMjkgTCA0OTUuMjM3IDM0NC40MjIgWiIvPgogICAgPHBhdGggaWQ9InBhdGgtMTAiIHN0eWxlPSJzdHJva2Utd2lkdGg6IDAuMTM0Nzk5OyBzdHJva2UtbGluZWNhcDogcm91bmQ7IHN0cm9rZS1taXRlcmxpbWl0OiA2LjM7IGZpbGwtb3BhY2l0eTogMTsgZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIgZD0iTSAxMzkuODE1IDE5MS44MSBMIDQ5NS4yMzcgMTc1LjcwNCBMIDQ5NS4yMzcgMzI0LjI5NiBMIDEzOS44MTUgMzA4LjE5IFoiLz4KICAgIDxwYXRoIGlkPSJwYXRoLTExIiBzdHlsZT0ic3Ryb2tlLXdpZHRoOiAwLjEzNDc5OTsgc3Ryb2tlLWxpbmVjYXA6IHJvdW5kOyBzdHJva2UtbWl0ZXJsaW1pdDogNi4zOyBmaWxsLW9wYWNpdHk6IDE7IGZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiIGQ9Ik0gNC43NjMgMzE5Ljk1NSBMIDI4NS45MDkgMzMzLjk4MiBMIDI4NS45MDkgNDYzLjU1MiBMIDQuNzYzIDQyNC4wNTMgWiIvPgogICAgPHBhdGggaWQ9InBhdGgtMTIiIHN0eWxlPSJzdHJva2Utd2lkdGg6IDAuMTM0Nzk5OyBzdHJva2UtbGluZWNhcDogcm91bmQ7IHN0cm9rZS1taXRlcmxpbWl0OiA2LjM7IGZpbGwtb3BhY2l0eTogMTsgZmlsbDogcmdiKDI1NSwgMjU1LCAyNTUpOyIgZD0iTSA0Ljc2MyA3NS45NDcgTCAyODUuOTA5IDM2LjQ0OCBMIDI4NS45MDkgMTY2LjAxOCBMIDQuNzYzIDE4MC4wNDQgWiIvPgogIDwvZz4KPC9zdmc+');
}

#app {
    div.app-list-page {
        input.app-list-search {
            visibility: visible !important;
            transform: none;
        }

        #search-icon {
            left: 24px;
            right: 24px;
            height: 48px;
            top: calc(4px + var(--window-inset-top));
            z-index: 100;
            width: auto;
            border-radius: 0px;
            opacity: 0;
        }

        div.groove-letter-tile {
            p {
                box-shadow: none;
                margin-left: 0px;
                color: var(--metro-foreground);
                opacity: 0.75;
                text-transform: uppercase;
            }
        }
    }

}

div.live-tile-matrix-row {}

body.alternative-wallpaper {

    div.tile-list-page {
        div.groove-home-tile {
            div.groove-home-inner-tile {
                --metro-transparent-2: transparent;

                &:before {
                    content: "";
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    width: 100%;
                    height: 100%;
                    background: var(--accent-color);
                    opacity: 0.5;
                }

            }
        }
    }
}

.inner-page>.app-list .app-list-container {
    padding-left: 19px;
    padding-top: calc(60px + var(--window-inset-top));
}

#sticky-letter {
    top: calc(60px + var(--window-inset-top)) !important;
    left: 19px;
}

div.app-page-icon-banner #app-page-icon {
    box-shadow: none;
}

div#app-page-icon {
    &.t_active {
        background-color: var(--metro-background) !important;
        color: var(--metro-foreground) !important;
    }

    &:before {
        content: "All apps";
        position: absolute;
        right: 45px;
        top: 2px;
        width: max-content;
        font-size: 25px;
        font-weight: 300;
    }
}

div.app-page-icon-banner div.update-banner {
    width: calc(100vw - 170px);
}

div.letter-selector {
    z-index: 105;
}

@keyframes tileListAppTransitionAnim0 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateZ(200px);
        opacity: 0;
    }
}

@keyframes tileListAppTransitionAnim1 {
    0% {
        transform: translateZ(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes tileListAppTransitionAnim2 {
    0% {
        transform: translateZ(200px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes innerTileListAppTransitionAnim0 {
    0% {
        transform: none;
    }

    100% {
        transform: none;
    }
}

@keyframes live-tile-matrix-tile-flip {
    0% {
        animation-timing-function: ease-in;
    }

    9.99% {
        animation-timing-function: ease-in;
        transform: scale(1.2);
        opacity: 0;
    }

    10% {
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    }
}

@keyframes appListAppTransitionAnim0 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateZ(200px);
        opacity: 0;
    }
}