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

#state_SettingsState {
    $colorCategoryButton: #eeeff5;
    $colorCategoryButtonSelected: $colorBlueBright;

    $layoutBreak: 1000px;

    .container .content {
        display: grid;
        grid-template-columns: auto 1fr;
        @include S(grid-gap, 10px);

        @include StyleBelowWidth($layoutBreak) {
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr;
        }

        .sidebar {
            display: flex;
            @include S(min-width, 210px);
            @include S(max-width, 320px);
            flex-direction: column;

            @include StyleBelowWidth($layoutBreak) {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                @include S(grid-gap, 5px);
                max-width: unset !important;
            }

            button {
                text-align: left;
                @include S(margin-bottom, 3px);
                &::after {
                    content: unset;
                }
                width: 100%;
                box-sizing: border-box;

                @include StyleBelowWidth($layoutBreak) {
                    text-align: center;
                    height: D(30px) !important;
                    padding: D(5px) !important;
                }
            }

            .other {
                align-self: end;
                margin-top: auto;

                @include StyleBelowWidth($layoutBreak) {
                    margin-top: 0;
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    @include S(grid-gap, 5px);
                    max-width: unset !important;
                    grid-column: 1 / 3;

                    button {
                        margin: 0 !important;
                    }
                }
            }

            button.categoryButton,
            button.about,
            button.privacy {
                background-color: $colorCategoryButton;
                color: #777a7f;

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

                    &:hover {
                        opacity: 1;
                    }
                }

                &.pressed {
                    transform: none !important;
                }
            }

            button.manageMods {
                background-color: lighten($modsColor, 38);
                color: $modsColor;
                display: flex;
                @include S(padding-right, 5px);
                .newBadge {
                    color: #fff;
                    @include S(border-radius, $globalBorderRadius);
                    background: $modsColor;
                    margin-left: auto;
                    @include S(padding, 0, 3px, 0, 3px);

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

                &.active {
                    background-color: $colorGreenBright;
                }
            }

            .versionbar {
                @include S(margin-top, 10px);

                @include StyleBelowWidth($layoutBreak) {
                    display: none;
                }

                @include SuperSmallText;
                display: grid;
                align-items: center;
                grid-template-columns: 1fr auto;
                .buildVersion {
                    display: flex;
                    flex-direction: column;
                    color: #aaadaf;
                }
            }
        }

        .categoryContainer {
            overflow-y: scroll;
            pointer-events: all;
            @include S(padding-right, 10px);

            .category {
                display: none;

                &.active {
                    display: block;
                }

                .setting {
                    @include S(padding, 10px);
                    background: #eeeff5;
                    @include S(border-radius, $globalBorderRadius);
                    @include S(margin-bottom, 5px);

                    .desc {
                        @include S(margin-top, 5px);
                        @include SuperSmallText;
                        color: #aaadb2;
                    }

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

                        > label {
                            text-transform: uppercase;
                            @include Text;
                        }
                    }

                    &.disabled {
                        // opacity: 0.3;
                        pointer-events: none;
                        * {
                            pointer-events: none !important;
                            cursor: default !important;
                        }
                        position: relative;
                        .standaloneOnlyHint {
                            @include PlainText;
                            position: absolute;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                            pointer-events: all;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background: rgba(#fff, 0.5);
                            text-transform: uppercase;
                            color: $colorRedBright;
                        }
                    }

                    .value.enum {
                        background: #fff;
                        @include PlainText;
                        display: flex;
                        align-items: flex-start;
                        pointer-events: all;
                        cursor: pointer;
                        justify-content: center;
                        @include S(min-width, 100px);
                        @include S(border-radius, $globalBorderRadius);
                        @include S(padding, 4px);
                        @include S(padding-right, 15px);

                        & {
                            /* @load-async */
                            background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
                                calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
                        }

                        transition: background-color 0.12s ease-in-out;
                        &:hover {
                            background-color: #fafafa;
                        }
                    }
                }
            }
        }
    }

    @include DarkThemeOverride {
        .container .content {
            .sidebar {
                button.categoryButton,
                button.about,
                button.privacy {
                    color: #ccc;
                    background-color: darken($darkModeControlsBackground, 5);

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

            .categoryContainer {
                .category {
                    .setting {
                        background: darken($darkModeGameBackground, 10);

                        .value.enum {
                            // dirty but works
                            // color: #222;
                            background-color: $darkModeControlsBackground;

                            & {
                                /* @load-async */
                                background-image: uiResource("icons/enum_selector_white.png");
                            }
                            color: #ddd;
                            &:hover {
                                background-color: darken($darkModeControlsBackground, 2);
                            }
                        }

                        .value.checkbox {
                            background-color: #74767b;

                            &.checked {
                                background-color: $colorBlueBright;
                            }
                        }
                    }
                }
            }
        }
    }
}