tobspr_shapez.io/src/css/ingame_hud/dialogs.scss

.ingameDialog {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: all;
    background: $modalDialogBg;

    display: flex;
    align-items: center;
    justify-content: center;

    @include InlineAnimation(0.12s ease-in-out) {
        0% {
            background-color: transparent;
            opacity: 0.5;
        }
        100% {
            background-color: $modalDialogBg;
        }
    }

    $darkModeDialogBg: darken($darkModeGameBackground, 5);

    @include DarkThemeOverride {
        background: rgba($darkModeDialogBg, 0.9);
        @include InlineAnimation(0.12s ease-in-out) {
            0% {
                background-color: transparent;
                opacity: 0.5;
            }
            100% {
                background-color: rgba($darkModeDialogBg, 0.9);
            }
        }

        > .dialogInner.optionChooserDialog .optionParent {
            .option {
                background: $darkModeControlsBackground;

                &:hover {
                    background-color: lighten($darkModeControlsBackground, 5);
                }

                &.active {
                    background: $colorBlueBright;
                    color: #fff;
                }
            }
        }
    }

    &.visible {
        .dialogInner {
            opacity: 1;
        }
        backdrop-filter: blur(D(3px));
    }

    .dialogInner {
        transition: opacity 0.2s ease-in-out;
        opacity: 0;
    }

    &.loadingDialog {
        * {
            color: #fff;
        }

        display: flex;
        flex-direction: column;

        .text {
            text-transform: uppercase;
            @include S(margin-bottom, 10px);
        }
    }

    > .dialogInner {
        background: #fff;
        max-height: calc(100vh - #{D(40px)});
        @include S(border-radius, $globalBorderRadius);
        display: flex;
        flex-direction: column;
        @include S(padding, 12px);
        pointer-events: all;

        @include DarkThemeOverride {
            background: darken($darkModeControlsBackground, 5);
        }

        &.optionChooserDialog {
            .optionParent {
                display: grid;
                @include S(grid-gap, 5px);
                grid-template-columns: 1fr 1fr;
                .option {
                    pointer-events: all;
                    cursor: pointer;
                    @include S(padding, 10px);

                    background: #eee;

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

                    &:hover {
                        background-color: #e7e7e7;
                    }

                    &.active {
                        background-color: $colorBlueBright;
                        color: #fff;
                    }
                }
            }
        }

        > .title {
            @include Heading;
            margin: 0;
            text-transform: uppercase;
            display: grid;
            align-items: center;
            grid-template-columns: 1fr auto;
            @include S(margin-bottom, 10px);

            @include DarkThemeInvert();
            > .closeButton {
                opacity: 0.7;
                @include S(width, 20px);
                @include S(height, 20px);
                cursor: pointer;
                pointer-events: all;
                transition: opacity 0.2s ease-in-out;
                &:hover {
                    opacity: 0.4;
                }
                & {
                    /* @load-async */
                    background: uiResource("icons/close.png") center center / 80% no-repeat;
                }
            }
        }

        > .content {
            @include PlainText;
            overflow-y: auto;
            pointer-events: all;
            @include S(width, 350px);

            @include DarkThemeOverride {
                color: #aaa;
            }

            a {
                color: $colorBlueBright;
            }

            strong {
                font-weight: bold;
            }

            .keybinding {
                position: relative;
                background: #eee;
                @include PlainText;
                height: unset;
                margin: 1px 0;
            }

            h3 {
                @include S(margin-top, 10px);
            }

            input {
                background: #eee;
                color: #333438;
                width: 100%;

                &.errored {
                    background-color: rgb(250, 206, 206);

                    &::placeholder {
                        color: #fff;
                        opacity: 0.8;
                    }
                }
            }

            ul.bucketList {
                padding-left: 30px;

                li {
                    display: list-item;
                }
            }

            .ingameItemChooser {
                @include S(margin, 10px, 0);
                display: grid;
                @include S(grid-column-gap, 3px);
                @include S(grid-row-gap, 5px);
                grid-template-columns: repeat(10, 1fr);
                align-items: center;
                justify-items: center;

                canvas {
                    pointer-events: all;
                    @include S(width, 25px);
                    @include S(height, 25px);
                    position: relative;
                    cursor: pointer;
                    @include IncreasedClickArea(3px);

                    &:hover {
                        opacity: 0.9;
                    }
                }
            }

            .dialogModsMod {
                background: rgba(0, 0, 0, 0.05);
                @include S(padding, 5px);
                @include S(margin, 10px, 0);
                @include S(border-radius, $globalBorderRadius);
                display: grid;
                grid-template-columns: 1fr D(100px);

                @include DarkThemeOverride {
                    background: rgba(0, 0, 0, 0.2);
                }

                button {
                    grid-column: 2 / 3;
                    grid-row: 1 / 3;
                    align-self: start;
                }

                .version {
                    @include SuperSmallText;
                    opacity: 0.5;
                }

                .name {
                }
            }
        }

        > .buttons {
            @include S(margin-top, 15px);
            display: flex;
            justify-content: flex-end;
            > button {
                @include S(margin-left, 8px);
                @include Text;
                @include S(min-width, 60px);
                @include S(padding, 5px, 15px);

                transition: opacity 0.12s ease-in-out;
                &:hover {
                    opacity: 0.9;
                }

                &.good {
                    background-color: $colorGreenBright;
                    color: #fff;
                }

                &.bad {
                    background-color: $colorRedBright;
                    color: #fff;
                }

                &.timedButton {
                    pointer-events: none;
                    cursor: default;
                    position: relative;
                    overflow: hidden;
                    &::after {
                        position: absolute;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: unset;
                        z-index: 5;
                        content: " ";
                        display: inline-block;
                        background: rgba(#fff, 0.6);
                        @include InlineAnimation(3s linear) {
                            0% {
                                width: 100%;
                            }
                            100% {
                                width: 0%;
                            }
                        }
                    }
                }
            }
        }
    }
}