tobspr_shapez.io/src/css/common.scss

// Common classes and style
* {
    margin: 0;
    padding: 0;
    touch-action: pan-x pan-y;
    pointer-events: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

html,
body {
    overscroll-behavior: contain;
    overflow: hidden;
    font-family: $mainFont;
    font-synthesis: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

html {
    background: $mainBgColor;
    @include DarkThemeOverride {
        background: $darkModeGameBackground;
    }
}

body {
    color: #555;
    user-select: none;
    background: inherit;
    word-wrap: break-word;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    @include Text;
}

i {
    font-style: normal;
}

b,
strong {
    font-weight: normal;
}

u,
a {
    text-decoration: none;
}

input,
textarea,
select {
    font-size: inherit;
    line-height: inherit;
}

button {
    background: transparent;
    border: 0;
    pointer-events: all;
    cursor: pointer;
    position: relative;
    @include TextShadow3D;
}

.styledButton {
    text-transform: uppercase;
    box-sizing: content-box;
    @include S(padding, 3px, 10px);
    @include ButtonText;
    border: 0;
    background: $colorBlueBright;
    color: #fff;
    @include S(border-radius, 0.8 * $globalBorderRadius);
    transition: opacity 0.12s ease-in-out;

    .keybinding {
        @include S(bottom, -2.5px);
        @include S(right, -2px);
    }

    &:hover {
        opacity: 0.9;
    }
}

::selection {
    background: $colorGreenBright;
    /* WebKit/Blink Browsers */
}

input[type="text"],
input[type="email"] {
    @include S(padding, 11px, 12px);
    @include S(margin, 10px, 0);
    border: 0;
    display: block;
    text-align: left;
    box-sizing: border-box;
    background: lighten($mainBgColor, 8);
    color: #eee;
    text-align: left;
    user-select: text !important;
    pointer-events: all !important;
    @include Text;
    @include S(border-radius, $globalBorderRadius);
    &::placeholder {
        color: #fff;
        opacity: 0.4;
    }
    transition: background-color 0.1s ease-in-out !important;
    @include TextShadow3D(#fff);
    @include BoxShadow3D(lighten($mainBgColor, 30));
    &:focus {
        @include BoxShadow3D(lighten($mainBgColor, 35));
    }
    &.errored {
        @include BoxShadow3D(mix(lighten($mainBgColor, 30), #f77, 25%));
        &:focus {
            @include BoxShadow3D(mix(lighten($mainBgColor, 50), #f77, 25%));
        }
    }
    &.input-token {
        @include SuperHeading;
        text-align: center;
        @include S(letter-spacing, 30px);
        @include S(padding-left, 30px);
    }
}

a {
    color: $themeColor;
}

button,
input,
select,
textarea,
a {
    &:focus {
        outline: none;
    }
    font-family: inherit;
    font-weight: inherit;
    pointer-events: all;
}

a {
    text-decoration: none;
}

i {
    font-style: normal;
}

input {
    user-select: text;
    pointer-events: all;
    border-radius: 0;
}

canvas {
    pointer-events: all;
    transform: translateZ(0);
    backface-visibility: hidden;
}

// Scrollbar
::-webkit-scrollbar {
    @include S(width, 6px);
    @include S(height, 6px);
}

::-webkit-scrollbar-track {
    background: rgba(#000, 0.05);
}

::-webkit-scrollbar-thumb {
    // border-radius: 4px;
    @include S(border-radius, $globalBorderRadius);
    background: #cdd0d4;
}

::-webkit-scrollbar-thumb:hover {
    background: #d8dce0;
}

.pressed:not(.noPressEffect) {
    transform: scale(0.98) !important;
    animation: none !important;
}

.pressedSmallElement:not(.noPressEffect) {
    transform: scale(0.88) !important;
    animation: none !important;
}

.spritesheetImage {
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    z-index: 1;
}

.inlineTextIconSprite {
    position: relative;
    vertical-align: middle;
    display: inline-block;
}

.badged {
    color: color($purple, 300);
}

.prefab_LoadingTextWithAnim {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    @include Text;
    @include TextShadow3D;
    opacity: 1;
    z-index: 20;
    color: #393747;
    &::after {
        content: " ";
        @include S(width, 35px);
        @include S(height, 35px);
        display: inline-block;
        vertical-align: middle;

        & {
            background: uiResource("loading.svg") center center / contain no-repeat;
        }
    }

    @include InlineAnimation(1.5s ease-in-out infinite) {
        50% {
            transform: scale(1.2) rotate(160deg);
        }
    }

    @include DarkThemeOverride {
        color: #fff;
    }
}

.prefab_LoadingProgressIndicator {
    @include PlainText;
    @include S(margin-top, 20px);
    width: 100%;
    color: #336c9f;
    @include S(height, 20px);
    text-transform: uppercase;
    text-align: center;
}

.gameState.prefab_LoadingState {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .loadingImage {
        width: 100%;
        display: flex;
        flex-grow: 1;

        @include InlineAnimation(1.5s ease-in-out infinite) {
            50% {
                transform: scale(1.2) rotate(160deg);
            }
        }

        & {
            background: uiResource("loading.svg") center center / #{D(40px)} no-repeat;
        }
    }

    .prefab_GameHint {
        position: absolute;
        @include S(left, 20px);
        @include S(right, 20px);
        @include S(bottom, 60px);
        @include Text;
        color: #666;

        @include DarkThemeOverride() {
            color: lighten($darkModeGameBackground, 50);
        }
    }

    .loadingStatus {
        position: absolute;
        @include S(left, 20px);
        @include S(right, 20px);
        @include S(bottom, 30px);
        @include Text;
        @include PlainText;
        color: #aaa;

        @include DarkThemeOverride {
            color: lighten($darkModeGameBackground, 20);
        }

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        > .bar {
            display: none;
            @include S(margin-top, 15px);
            width: 80vw;
            @include BoxShadow3D(lighten($mainBgColor, 10), $size: 1px);
            position: relative;
            @include TextShadow3D(#fff);
            height: 2px;
            .inner {
                position: absolute !important;
                top: 0;
                left: 0;
                bottom: 0;
                z-index: 1;
                @include BoxShadow3D($themeColor, $size: 1px);
                @include S(border-radius, $globalBorderRadius);
                transform-origin: 0% 50%;
                @include InlineAnimation(1.3s ease-in-out infinite) {
                    0% {
                        background-color: darken($themeColor, 5);
                        transform: none;
                    }
                    50% {
                        background-color: lighten($themeColor, 10);
                        transform: scale(1.01);
                    }
                    100% {
                        background-color: darken($themeColor, 5);
                        transform: none;
                    }
                }
            }
            .status {
                display: none;
                position: relative;
                z-index: 2;
                display: inline-flex;
                @include S(padding, 5px);
                @include PlainText;
            }
        }
    }
}

.grow {
    flex-grow: 1;
}

.checkbox {
    $bgColor: darken($mainBgColor, 3);
    background-color: $bgColor;
    @include S(width, 35px);
    @include S(height, 17px);
    display: flex;
    @include S(padding, 3px);
    box-sizing: content-box;
    cursor: pointer;
    pointer-events: all;
    transition:
        opacity 0.2s ease-in-out,
        background-color 0.3s ease-in-out,
        box-shadow 0.4s ease-in-out !important;
    position: relative;
    @include BorderRadius(20px);
    @include BoxShadow3D($bgColor, $size: 2px);
    &.loading {
        opacity: 0.2;
    }
    &:hover {
        background-color: darken($bgColor, 5);
    }
    .knob {
        @include S(width, 20px);
        @include S(height, 17px);
        display: inline-block;
        transition: margin-left 0.4s ease-in-out !important;
        background: #fff;
        position: relative;
        @include BorderRadius(20px);
        @include BoxShadow3D(#fff, $size: 1px);
    }
    &.checked {
        background-color: $themeColor;
        @include BoxShadow3D($themeColor, $size: 2px);
        .knob {
            @include S(margin-left, 15px);
        }
        &:hover {
            background-color: lighten($themeColor, 15);
        }
    }

    @include DarkThemeOverride {
        background-color: $darkModeGameBackground !important;
        &.checked {
            background-color: $colorBlueBright !important;
        }
    }
}

.rangeInputContainer {
    display: flex;
    align-items: center;
    justify-content: center;

    label {
        @include S(margin-right, 5px);
        &,
        & * {
            @include PlainText;
        }
    }
}

input.rangeInput {
    cursor: pointer;
    background-color: transparent;
    @include S(width, 100px);
    @include S(height, 16px);

    &::-webkit-slider-runnable-track {
        background-color: darken($mainBgColor, 3);
        color: darken($mainBgColor, 3);
        // @include S(height, 16px);
        @include S(border-radius, 8px);
    }

    @include DarkThemeOverride {
        &::-webkit-slider-runnable-track {
            background-color: $darkModeControlsBackground;
        }

        &::-webkit-slider-thumb {
            box-shadow: inset 0 0 0 D(10px) #eee;
        }
    }

    &::-webkit-slider-thumb {
        appearance: none;
        box-shadow: inset 0 0 0 D(10px) $themeColor;
        border-radius: 50%;

        transition: box-shadow 0.3s;
    }

    &:hover {
        &::-webkit-slider-thumb {
            box-shadow: inset 0 0 0 D(10px) lighten($themeColor, 15);
        }
    }
}

.keybinding {
    background: #fff;
    text-transform: uppercase;
    font-family: inherit;
    @include S(padding, 1.5px, 3px, 2px);
    @include PlainText;
    @include S(border-radius, 0.5 * $globalBorderRadius);
    &,
    > span {
        @include S(font-size, 9px);
        @include S(line-height, 11px);
    }

    color: $accentColorDark;
    text-align: center;
    justify-content: center;
    align-items: center;
    @include S(min-width, 12px);
    display: inline-flex;
    position: absolute;
    @include S(bottom, 0px);
    @include S(right, 0px);
    z-index: 999;
    box-sizing: border-box;
    @include S(height, 12px);
    overflow: hidden;
    border: #{D(0px)} solid $accentColorDark;
    .keybinding_space {
        @include S(font-size, 17px);
        @include S(line-height, 11px);
        @include S(margin-top, -12px);
    }
}

iframe {
    pointer-events: all;
    user-select: all;
}