tobspr_shapez.io/src/css/states/main_menu.scss

#state_MainMenuState {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    // background: #aaacb4 center center / cover !important;
    background: #bbc2cf center center / cover !important;

    .topButtons {
        position: absolute;
        @include S(top, 20px);
        @include S(right, 20px);
        display: grid;
        grid-auto-flow: column;
        @include S(grid-gap, 15px);

        .settingsButton,
        .exitAppButton,
        .languageChoose {
            @include S(width, 25px);
            @include S(height, 25px);
            pointer-events: all;
            cursor: pointer;
            & {
                background: uiResource("icons/main_menu_settings.png") center center / contain no-repeat;
            }
            transition: opacity 0.12s ease-in-out;
            @include IncreasedClickArea(2px);
            opacity: 0.7;
            &:hover {
                opacity: 1;
            }
        }

        .exitAppButton {
            background-image: uiResource("icons/main_menu_exit.png");
            background-size: 90%;
        }

        .languageChoose {
            @include S(border-radius, 8px);
            border: solid #222428;
            @include S(border-width, 2px);
            background-color: #222428 !important;
            background-size: contain !important;
            background-position: center center !important;
            opacity: 0.8;
        }
    }

    .fullscreenBackgroundVideo {
        // display: none !important;
        z-index: -1;
        position: fixed;
        right: 50%;
        bottom: 50%;
        min-width: 100%;
        min-height: 100%;

        opacity: 0;
        display: none;
        transform: translate(50%, 50%);
        filter: blur(D(15px));

        $opacity: 0.4;
        &.loaded {
            display: block;
            opacity: $opacity;

            @include InlineAnimation(0.1s ease-in-out) {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: $opacity;
                }
            }
        }
    }

    .mainWrapper {
        @include S(padding, 0, 10px);
        @include S(margin-top, 15px);
        align-items: start;
        justify-items: center;

        @include S(grid-column-gap, 10px);
        display: grid;

        grid-template-rows: D(31px) 1fr D(93px);

        &[data-columns="1"] {
            grid-template-columns: 1fr;
        }
        &[data-columns="2"] {
            grid-template-columns: D(290px) 1fr;
        }

        .standaloneBanner {
            background: transparent;
            @include S(border-radius, $globalBorderRadius);
            // box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2);
            @include S(width, 380px);
            box-sizing: border-box;
            @include S(padding, 0, 15px);
            // backdrop-filter: blur(10px);

            display: flex;
            flex-direction: column;
            margin: 0;

            strong {
                font-weight: 700 !important;
            }

            .onlinePlayerCount {
                color: #333;
                @include S(margin-top, 15px);
                @include SuperSmallText;
                @include S(height, 15px);
                text-align: center;
            }

            h3 {
                @include Heading;
                font-weight: bold;
                @include S(margin-bottom, 10px);
                text-align: center;
                color: #44484f;
            }

            p {
                @include Text;
                color: #333;
            }

            ul {
                @include S(margin-top, 5px);
                @include S(padding-left, 20px);
                li {
                    @include Text;
                    color: #fff;
                }
            }

            .playtimeDisclaimer {
                color: #333;
                @include S(margin-top, 15px);
                @include SuperSmallText;
            }

            .steamLink {
                align-self: center;
                justify-self: center;
                width: 100%;
                @include S(height, 40px * 1.2);
                @include S(width, 180px * 1.2);
                background: #171a23 center center / contain no-repeat;
                // overflow: hidden;
                display: block;
                cursor: pointer;
                @include S(margin-top, 15px);
                pointer-events: all;
                transition: all 0.12s ease-in;
                transition-property: opacity, transform;
                position: relative;
                @include S(border-radius, $globalBorderRadius);
                color: transparent;

                box-shadow: 0 D(3px) D(10px) rgba(96, 163, 136, 0.5);
                &:hover {
                    opacity: 0.9;
                }

                @include InlineAnimation(1s ease-in-out infinite) {
                    50% {
                        transform: scale(1.02, 1.03);
                    }
                }

                > .discount {
                    position: absolute;
                    @include S(top, -7px);
                    @include S(right, -5px);
                    background: #4c6b22;
                    color: #c5ea3f;
                    @include S(border-radius, $globalBorderRadius);
                    @include S(padding, 1px, 3px, 1px, 4px);
                    @include SuperSmallText;
                    text-transform: uppercase;
                    transform: rotate(1deg);
                    @include InlineAnimation(1.3s ease-in-out infinite) {
                        50% {
                            transform: rotate(4deg) scale(1.1);
                        }
                    }
                }
            }

            .points {
                display: grid;
                grid-template-columns: 1fr 1fr;
                width: 100%;
                @include S(grid-gap, 5px);
            }

            .point {
                display: grid;
                grid-template-columns: #{D(27px)} auto;
                grid-template-rows: D(11px) D(10px);
                background: #fff #{D(10px)} center / #{D(17px)} no-repeat;
                @include S(grid-row-gap, 3px);
                align-items: center;
                @include S(padding, 6px);
                @include S(border-radius, $globalBorderRadius);

                box-shadow: 0 D(5px) D(10px) rgba(#000, 0.2);

                > strong {
                    grid-column: 2 / 3;
                    grid-row: 1 / 2;
                    @include PlainText;
                    @include S(font-size, 12px);
                    line-height: 0.8em;
                    white-space: nowrap;
                    text-transform: uppercase;
                    font-weight: bold;
                    align-self: end;
                }

                > p {
                    grid-column: 2 / 3;
                    grid-row: 2 / 3;
                    @include SuperSmallText;
                    white-space: nowrap;
                    @include BreakText;
                    @include S(font-size, 8px);
                    line-height: 1em;
                    align-self: start;

                    opacity: 0.8;
                }

                &.levels {
                    & {
                        /* @load-async */
                        background-image: uiResource("res/ui/icons/advantage_new_levels.png");
                    }
                    > strong {
                        color: #f13555;
                    }
                }

                &.upgrades {
                    & {
                        /* @load-async */
                        background-image: uiResource("res/ui/icons/advantage_upgrades.png");
                    }
                    > strong {
                        color: #8a00ff;
                    }
                }

                &.buildings {
                    & {
                        /* @load-async */
                        background-image: uiResource("res/ui/icons/advantage_buildings.png");
                    }
                    > strong {
                        color: #3fce8b;
                    }
                }

                &.wires {
                    & {
                        /* @load-async */
                        background-image: uiResource("res/ui/icons/advantage_wires.png");
                    }
                    > strong {
                        color: #ef2fdb;
                    }
                }

                &.markers {
                    & {
                        /* @load-async */
                        background-image: uiResource("res/ui/icons/advantage_markers.png");
                    }
                    > strong {
                        color: #4294ff;
                    }
                }

                &.mods {
                    & {
                        /* @load-async */
                        background-image: uiResource("res/ui/icons/advantage_mods.png");
                    }
                    > strong {
                        color: #8a00ff;
                    }
                }

                &.savegames {
                    & {
                        /* @load-async */
                        background-image: uiResource("res/ui/icons/advantage_savegames.png");
                    }
                    > strong {
                        color: #ff9500;
                    }
                }

                &.darkmode {
                    & {
                        /* @load-async */
                        background-image: uiResource("res/ui/icons/advantage_dark_mode.png");
                    }
                    > strong {
                        color: #292c32;
                    }
                }

                &.support {
                    & {
                        /* @load-async */
                        background-image: uiResource("res/ui/icons/advantage_support.png");
                    }
                    > strong {
                        color: #e72d2d;
                    }
                }

                &.achievements {
                    & {
                        /* @load-async */
                        background-image: uiResource("res/ui/icons/advantage_achievements.png");
                    }
                    > strong {
                        color: #ffac0f;
                    }
                }
            }
        }
    }

    .logo {
        display: flex;
        flex-grow: 1;
        align-items: center;
        justify-content: center;

        flex-direction: column;
        @include S(padding-top, 20px);

        img {
            @include S(width, 710px / 2.5);
            @include S(height, 180px / 2.5);
        }
        position: relative;
        @include S(left, -8px);

        .updateLabel {
            position: absolute;
            transform: translateX(50%) rotate(-5deg);
            color: #fff;
            @include PlainText;
            font-weight: bold;
            @include S(right, 40px);
            @include S(bottom, 20px);
            background: $modsColor;
            @include S(border-radius, $globalBorderRadius);
            @include S(padding, 0, 5px, 1px, 5px);

            @include InlineAnimation(1.3s ease-in-out infinite) {
                50% {
                    transform: translateX(50%) rotate(-7deg) scale(1.1);
                }
            }
        }
    }

    .betaWarning {
        @include S(width, 400px);
        @include PlainText;
        background: $colorRedBright;
        @include S(padding, 10px);
        @include S(border-radius, $globalBorderRadius);
        color: #fff;
        @include S(margin-top, 10px);
        border: #{D(2px)} solid rgba(0, 10, 20, 0.1);
    }

    .sideContainer {
        display: flex;
        flex-direction: column;
        width: 100%;
        grid-row: 1 / 4;
        grid-column: 2 / 3;

        .standaloneBanner {
            flex-grow: 1;
        }
    }

    .puzzleContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: $colorBlueBright;
        grid-row: 1 / 2;
        position: relative;
        @include S(padding, 20px);
        @include S(border-radius, $globalBorderRadius);
        box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2);

        > .badge {
            color: #fff;
            text-transform: uppercase;
            font-weight: bold;
            position: absolute;
            @include S(top, 10px);
            @include S(right, 10px);

            transform: translateX(50%) rotate(10deg);
            @include Heading;
            font-weight: bold;

            @include InlineAnimation(1.3s ease-in-out infinite) {
                50% {
                    transform: translateX(50%) rotate(12deg) scale(1.1);
                }
            }
        }

        > .hint {
            @include SuperDuperSmallText;
            @include S(margin-top, 10px);
            @include S(width, 200px);
        }

        > .dlcLogo {
            @include S(width, 190px);
        }

        > button {
            @include S(margin-top, 20px);
            @include Heading;
            @include S(padding, 10px, 30px);
            background-color: #333;
            color: #fff;
        }

        &.notOwned {
            p {
                @include PlainText;
                color: #333;
                @include S(margin-top, 10px);
                @include S(width, 190px);
            }
            > button {
                box-sizing: border-box;
                @include S(margin-top, 10px);
                @include S(width, 190px);
                @include S(padding, 10px, 20px);
            }
        }
    }

    .modsOverview {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: #fff;
        grid-row: 1 / 2;
        position: relative;
        text-align: left;
        align-items: flex-start;
        @include S(width, 250px);
        @include S(padding, 15px);
        @include S(padding-bottom, 10px);
        @include S(border-radius, $globalBorderRadius);
        box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2);

        .header {
            display: flex;
            width: 100%;
            align-items: center;
            text-transform: uppercase;

            @include S(margin-bottom, 10px);

            .editMods {
                margin-left: auto;
                @include S(width, 20px);
                @include S(height, 20px);
                padding: 0;
                opacity: 0.5;
                background: transparent center center/ 80% no-repeat;
                & {
                    background-image: uiResource("icons/edit_key.png") !important;
                }
                @include DarkThemeInvert;
                &:hover {
                    opacity: 0.6;
                }
            }
        }

        h3 {
            @include Heading;
            color: $modsColor;
            margin: 0;
        }

        .dlcHint {
            @include SuperSmallText;
            @include S(margin-top, 10px);
            width: 100%;

            display: grid;
            grid-template-columns: 1fr auto;
            grid-gap: 20px;
            align-items: center;
        }

        .mod {
            background: #eee;
            width: 100%;
            @include S(border-radius, $globalBorderRadius);
            @include S(padding, 5px);
            box-sizing: border-box;
            @include PlainText;
            @include S(margin-bottom, 5px);
            display: flex;
            flex-direction: column;

            .author,
            .version {
                @include SuperSmallText;
                align-self: end;
                opacity: 0.4;
            }
            .name {
                overflow: hidden;
            }
        }

        .modsList {
            box-sizing: border-box;
            @include S(height, 100px);
            @include S(padding, 5px);
            border: D(1px) solid #eee;
            overflow-y: scroll;
            width: 100%;
            display: flex;
            flex-direction: column;
            pointer-events: all;

            :last-child {
                margin-bottom: auto;
            }
        }
    }

    .mainContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: rgba(#fff, 0.9);
        @include S(padding, 15px);
        @include S(border-radius, $globalBorderRadius);
        height: 100%;
        box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2);
        width: 100%;
        position: relative;
        align-self: center;
        justify-self: center;
        grid-row: 1 / 4;
        grid-column: 1 / 2;

        // &[data-savegames="0"] {
        //     grid-row: 2 / 3;
        // }

        box-sizing: border-box;

        .buttons {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        .modeButtons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            @include S(grid-column-gap, 10px);
            align-items: start;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
        }

        .browserWarning {
            @include S(margin-bottom, 10px);
            background-color: $colorRedBright;
            @include PlainText;
            color: #fff;
            @include S(border-radius, $globalBorderRadius);
            @include S(padding, 5px);
            @include S(width, 300px);
        }

        .playButton,
        .continueButton {
            @include SuperHeading;
            @include S(min-width, 130px);
            @include S(padding, 15px, 20px);
            letter-spacing: 0.2em !important;
            @include IncreasedClickArea(0px);
            font-weight: bold;
            color: #fff;
            background-color: $colorGreenBright;
            transition: transform 0.12s ease-in-out, background-color 0.12s ease-in-out;

            &:hover {
                background-color: darken($colorGreenBright, 4);
                opacity: 1;
            }

            &.continueButton {
                @include Heading;
            }
        }

        .outer {
            @include S(margin-top, 15px);
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: 1fr;

            @include S(grid-gap, 5px);
            width: 100%;

            > button {
                @include S(padding, 3px, 6px);
            }
        }

        .importButton {
            @include IncreasedClickArea(0px);
        }

        .newGameButton {
            @include IncreasedClickArea(0px);
        }

        .modsButton {
            @include IncreasedClickArea(0px);

            background-position: center center;
            background-size: D(15px);
            background-color: $modsColor !important;
            background-repeat: no-repeat;
        }

        .savegames {
            @include S(max-height, 105px);
            overflow-y: auto;
            @include S(min-width, 230px);
            width: 100%;
            pointer-events: all;
            @include S(padding-right, 5px);
            margin-right: D(-5px);
            display: grid;
            grid-auto-flow: row;
            @include S(grid-gap, 5px);
            @include S(margin-top, 10px);

            .savegame {
                background: #eee;
                @include S(border-radius, $globalBorderRadius);
                @include S(padding, 5px);
                display: grid;
                grid-template-columns: 1fr 1fr auto auto;
                grid-template-rows: auto auto;
                @include S(grid-column-gap, 4px);
                @include S(grid-row-gap, 1px);

                .playtime {
                    grid-column: 2 / 3;
                    grid-row: 2 / 3;
                    @include SuperSmallText;
                    opacity: 0.5;
                }

                .level {
                    grid-column: 1 / 2;
                    grid-row: 2 / 3;
                    @include SuperSmallText;
                    opacity: 0.5;
                }

                .name {
                    grid-column: 1 / 3;
                    grid-row: 1 / 2;
                    @include PlainText;
                    display: inline-flex;
                    align-items: center;

                    > span {
                        display: inline-flex;
                        @include S(max-width, 140px);
                        overflow: hidden;
                    }
                }

                button.resumeGame,
                button.downloadGame,
                button.deleteGame,
                button.renameGame {
                    padding: 0;
                    align-self: center;
                    justify-self: center;
                    @include IncreasedClickArea(0px);
                    background: #44484a center center / 40% no-repeat;
                }

                button.resumeGame {
                    background-color: #44484a;
                    & {
                        background-image: uiResource("icons/play.png");
                    }
                }

                button.downloadGame {
                    grid-column: 3 / 4;
                    grid-row: 1 / 2;
                    background-color: transparent;

                    & {
                        background-image: uiResource("icons/download.png");
                    }
                    @include S(width, 15px);
                    @include IncreasedClickArea(0px);
                    @include S(height, 15px);
                    background-size: 80%;
                    align-self: start;
                    border-radius: 0;
                    opacity: 0.4;

                    &:hover {
                        opacity: 0.5;
                    }

                    @include DarkThemeInvert;
                }

                button.deleteGame {
                    grid-column: 3 / 4;
                    grid-row: 2 / 3;
                    background-color: transparent;
                    @include IncreasedClickArea(0px);

                    & {
                        background-image: uiResource("icons/delete.png");
                    }
                    @include S(width, 15px);
                    @include S(height, 15px);
                    align-self: end;
                    background-size: 80%;
                    border-radius: 0;
                    opacity: 0.4;

                    &:hover {
                        opacity: 0.5;
                    }

                    @include DarkThemeInvert;
                }

                button.renameGame {
                    background-color: transparent;
                    @include IncreasedClickArea(2px);

                    & {
                        background-image: uiResource("icons/edit_key.png");
                    }
                    @include S(width, 10px);
                    @include S(height, 10px);
                    align-self: center;
                    justify-self: center;
                    border-radius: 0;
                    background-size: 90%;
                    opacity: 0.4;
                    @include S(margin-left, 4px);

                    &:hover {
                        opacity: 0.5;
                    }

                    @include DarkThemeInvert;
                }

                button.resumeGame {
                    grid-column: 4 / 5;
                    grid-row: 1 / 3;
                    margin: 0;
                    @include S(width, 32px);
                    height: 100%;
                    @include S(margin-left, 4px);

                    @include DarkThemeOverride {
                        background-color: lighten($darkModeControlsBackground, 10);
                    }
                }
            }
        }
    }

    .bottomContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        @include S(padding-top, 10px);
        height: 100%;
        width: 100%;
        box-sizing: border-box;

        .buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            @include S(grid-column-gap, 10px);
            align-items: start;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
        }
    }

    .footer {
        display: flex;
        flex-grow: 1;
        justify-content: center;
        align-items: flex-end;
        width: 100%;
        @include S(padding, 10px);
        box-sizing: border-box;
        @include S(grid-gap, 4px);

        &.wegameDisclaimer {
            @include SuperSmallText;
            display: grid;
            justify-content: center;
            text-align: center;

            > .disclaimer {
                grid-column: 2 / 3;

                @include DarkThemeOverride {
                    color: #fff;
                }
            }

            > .rating {
                grid-column: 3 / 4;
                justify-self: end;
                align-self: end;

                @include S(width, 32px);
                @include S(height, 40px);
                background: green;
                cursor: pointer !important;
                pointer-events: all;
                @include S(border-radius, 4px);
                overflow: hidden;

                & {
                    background: #fff uiResource("wegame_isbn_rating.jpg") center center / contain no-repeat;
                }
            }
        }

        .author {
            margin-left: auto;

            a {
                &:hover img {
                    opacity: 0.85;
                }
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    transition: opacity 0.12s ease-in-out;
                    @include S(width, 82px);
                    @include S(height, 25px);
                    filter: invert(100%);
                    opacity: 0.75;
                }
            }
        }

        @include S(padding, 15px);

        $linkBg: rgba(#fdfdff, 0.5);
        $linkBgHover: rgba(#fff, 0.7);
        $linkColor: #55586a;

        > .boxLink {
            display: grid;
            align-items: center;
            grid-template-columns: 1fr auto;

            justify-content: center;
            backdrop-filter: blur(5px);
            background: $linkBg;

            @include S(padding, 5px);
            @include S(padding-left, 10px);
            @include S(border-radius, $globalBorderRadius);
            @include SuperSmallText();

            font-weight: bold;
            box-sizing: border-box;
            text-transform: uppercase;
            color: $linkColor;

            transition: background-color 0.12s ease-in-out;
            pointer-events: all;
            @include S(width, 120px);
            @include S(height, 60px);

            cursor: pointer;
            &:hover {
                background-color: $linkBgHover;
            }

            .thirdpartyLogo {
                display: inline-block;
                @include S(width, 50px);
                @include S(height, 50px);
                background: center center / 80% no-repeat;
                &.githubLogo {
                    background-image: uiResource("main_menu/github.png");
                }
                &.discordLogo {
                    background-image: uiResource("main_menu/discord.png");
                    background-size: 95%;
                }
            }
        }

        > .sidelinks {
            display: grid;
            align-items: flex-start;
            justify-content: flex-start;
            grid-template-rows: 1fr 1fr 1fr;
            @include S(grid-gap, 3px);
            @include S(height, 60px);

            > a {
                color: $linkColor;
                background: $linkBg;
                height: 100%;

                &:hover {
                    background-color: $linkBgHover;
                }
                @include SuperSmallText;
                text-transform: uppercase;
                width: 100%;
                @include S(padding, 2px, 10px);
                display: flex;
                align-items: center;
                justify-content: flex-start;

                @include S(padding-left, 25px);
                box-sizing: border-box;
                font-weight: bold;
                background-position: #{D(5px)} center;
                background-size: #{D(12px)};
                background-repeat: no-repeat;
                @include S(border-radius, $globalBorderRadius);

                transition: background-color 0.12s ease-in-out;

                &.redditLink {
                    background-image: uiResource("main_menu/reddit.svg");
                }
                &.changelog {
                    background-image: uiResource("main_menu/changelog.svg");
                }
                &.helpTranslate {
                    background-image: uiResource("main_menu/translate.svg");
                }
            }
        }
    }

    @include DarkThemeOverride {
        background: rgba($darkModeGameBackground, 0.5) center center / cover !important;

        .mainContainer {
            background: $darkModeControlsBackground;

            .savegames .savegame {
                background: darken($darkModeControlsBackground, 5);
                color: white;
            }
        }

        .modsOverview {
            background: $darkModeControlsBackground;

            .modsList {
                border-color: darken($darkModeControlsBackground, 5);

                .mod {
                    background: darken($darkModeControlsBackground, 5);
                    color: white;
                }
            }

            .dlcHint {
                color: $accentColorBright;
            }
        }

        .footer {
            > a,
            .sidelinks > a {
                background-color: rgba($darkModeControlsBackground, 0.3);
                color: #eee;

                &:hover {
                    background-color: rgba(darken($darkModeControlsBackground, 5), 0.5);
                }
            }

            .thirdpartyLogo.githubLogo {
                filter: invert(1);
            }
        }
    }
}