Dark mode support and much other stuff

2026-03-02 03:39:21 +00:00 · 2020-05-17 13:24:47 +02:00
parent 53386e1cd9
commit 68769cb7ef
35 changed files with 243 additions and 83 deletions
--- a/src/css/adinplay.scss
+++ b/src/css/adinplay.scss
@@ -40,7 +40,7 @@

    &.waitingForFinish {
        .videoInner {
-            @include BorderRadius(4px);
+            @include S(border-radius, $globalBorderRadius);
            overflow: hidden;

            &::after {
@@ -74,7 +74,7 @@

    .adInner {
        @include BoxShadow3D(lighten($mainBgColor, 15));
-        @include BorderRadius(4px);
+        @include S(border-radius, $globalBorderRadius);
        @include S(padding, 15px);
        // max-width: 960px;
        display: block !important;
--- a/src/css/application_error.scss
+++ b/src/css/application_error.scss
@@ -53,7 +53,7 @@
        font-family: monospace;
        text-align: left;
        @include S(padding, 6px);
-        @include BorderRadius(2px);
+        @include S(border-radius, $globalBorderRadius);
        @include BoxShadow3D(#eee);
        position: absolute;
        @include S(bottom, 25px);
--- a/src/css/common.scss
+++ b/src/css/common.scss
@@ -169,20 +169,26 @@ button {
    box-sizing: content-box;
    @include S(padding, 3px, 10px);
    @include IncreasedClickArea(10px);
-    @include BorderRadius(4px);
    @include TextShadow3D(#fff, $borderColor: #28292a);
    @include ButtonText;
-    @include Button3D($accentColorBright);
-    border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
+    border: 0;
+    background: $colorBlueBright;
+    color: #fff;
+
+    // border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
    @include S(border-bottom-width, 2px);
-    color: $accentColorDark;
+    // color: $accentColorDark;
    letter-spacing: 0.05em !important;
-    box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2);
+    // box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2);

    .keybinding {
        @include S(bottom, -2.5px);
        @include S(right, -2px);
    }
+    transition: opacity 0.12s ease-in-out;
+    &:hover {
+        opacity: 0.9;
+    }
 }

 ::selection {
@@ -210,7 +216,7 @@ input[type="email"] {

    @include Text;
    @include IncreasedClickArea(15px);
-    @include BorderRadius(4px);
+    @include S(border-radius, $globalBorderRadius);

    &::placeholder {
        color: #fff;
@@ -307,7 +313,7 @@ canvas {
 }

 ::-webkit-scrollbar-thumb {
-    border-radius: 4px;
+    // border-radius: 4px;
    background: #cdd0d4;
 }

@@ -407,7 +413,7 @@ canvas {
        content: "Coming soon!";
        z-index: 10000;
        background: rgba(lighten($mainBgColor, 0), 0.4);
-        @include BorderRadius(4px);
+        @include S(border-radius, $globalBorderRadius);
        position: absolute;
        display: flex;
        justify-content: center;
@@ -480,7 +486,7 @@ canvas {
                bottom: 0;
                z-index: 1;
                @include BoxShadow3D($themeColor, $size: 1px);
-                @include BorderRadius(4px);
+                @include S(border-radius, $globalBorderRadius);

                transform-origin: 0% 50%;

@@ -568,7 +574,7 @@ canvas {
    text-transform: uppercase;
    @include S(padding, 1.5px, 3px, 2px);
    @include PlainText;
-    @include BorderRadius(2px);
+    @include S(border-radius, $globalBorderRadius);
    &,
    > span {
        @include S(font-size, 9px);
--- a/src/css/ingame_hud/building_placer.scss
+++ b/src/css/ingame_hud/building_placer.scss
@@ -6,7 +6,7 @@
    display: grid;

    @include S(padding, 6px);
-    @include S(border-radius, 2px);
+    @include S(border-radius, $globalBorderRadius);
    @include S(width, 240px);
    @include S(grid-column-gap, 5px);

@@ -14,6 +14,10 @@
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;

+    @include DarkThemeOverride {
+        background-color: #55585a;
+    }
+
    .buildingLabel {
        @include PlainText;
        @include S(margin-bottom, 2px);
@@ -54,7 +58,7 @@
        @include S(width, 100px);
        @include S(height, 100px);
        background: top left / 100% 100% no-repeat;
-        @include S(border-radius, 2px);
+        @include S(border-radius, $globalBorderRadius);
    }

    @include StyleBelowWidth(700px) {
@@ -77,10 +81,14 @@
        .keybinding {
            position: relative;
        }
+
+        @include DarkThemeOverride {
+            color: rgba(#fff, 0.5);
+        }
    }

    .variant {
-        @include S(border-radius, 4px);
+        @include S(border-radius, $globalBorderRadius);
        background: rgba(0, 10, 20, 0.1);
        display: flex;
        position: relative;
--- a/src/css/ingame_hud/buildings_toolbar.scss
+++ b/src/css/ingame_hud/buildings_toolbar.scss
@@ -56,10 +56,10 @@
                }
            }

-            @include S(border-radius, 4px);
+            @include S(border-radius, $globalBorderRadius);

            &.selected {
-                background-color: rgba(74, 163, 223, 0.3) !important;
+                background-color: rgba($colorBlueBright, 0.3) !important;
                transform: scale(1.05);
                .keybinding {
                    color: #111;
--- a/src/css/ingame_hud/dialogs.scss
+++ b/src/css/ingame_hud/dialogs.scss
@@ -21,6 +21,19 @@
        }
    }

+    @include DarkThemeOverride {
+        background: rgba(#33363d, 0.9);
+        @include InlineAnimation(0.12s ease-in-out) {
+            0% {
+                background-color: transparent;
+                opacity: 0.5;
+            }
+            100% {
+                background-color: rgba(#33363d, 0.9);
+            }
+        }
+    }
+
    &.visible {
        .dialogInner {
            opacity: 1;
@@ -43,12 +56,16 @@
        @include S(min-width, 300px);
        max-width: calc(100vw - #{D(40px)});
        max-height: calc(100vh - #{D(40px)});
-        @include S(border-radius, 4px);
+        @include S(border-radius, $globalBorderRadius);
        display: flex;
        flex-direction: column;
        @include S(padding, 12px);
        pointer-events: all;

+        @include DarkThemeOverride {
+            background: #333438;
+        }
+
        &.optionChooserDialog {
            .optionParent {
                display: grid;
@@ -59,6 +76,16 @@
                    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;
+                    }
                }
            }
        }
@@ -72,6 +99,7 @@
            grid-template-columns: 1fr auto;
            @include S(margin-bottom, 10px);

+            @include DarkThemeInvert();
            > .closeButton {
                opacity: 0.7;
                @include S(width, 20px);
@@ -87,6 +115,7 @@
        }

        > .content {
+            @include PlainText;
            overflow-y: auto;
            pointer-events: all;
        }
@@ -101,6 +130,11 @@
                @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;
--- a/src/css/ingame_hud/game_menu.scss
+++ b/src/css/ingame_hud/game_menu.scss
@@ -27,6 +27,8 @@
            position: relative;
            @include IncreasedClickArea(0px);

+            @include DarkThemeInvert;
+
            &:hover {
                opacity: 0.8;
            }
@@ -79,7 +81,6 @@
        border-color: rgba(0, 0, 0, 0.1);
        @include S(padding, 5px, 5px, 5px);

-        border-radius: 0 0 #{D(4px)} #{D(4px)};
        @include S(padding-left, 30px);
        @include S(margin-right, 3px);
        @include IncreasedClickArea(0px);
@@ -144,7 +145,7 @@
                @include S(min-width, 5px);
                @include S(height, 10px);
                @include S(padding, 1px, 3px, 2px);
-                @include S(border-radius, 4px);
+                @include S(border-radius, $globalBorderRadius);
                border: #{D(1px)} solid #fff;
                @include InlineAnimation(1s ease-in-out infinite) {
                    50% {
--- a/src/css/ingame_hud/mass_selector.scss
+++ b/src/css/ingame_hud/mass_selector.scss
@@ -4,7 +4,7 @@
    left: 50%;
    transform: translateX(-50%);
    background: rgba(lighten(#f77, 5), 0.95);
-    @include S(border-radius, 2px);
+    @include S(border-radius, $globalBorderRadius);
    @include S(padding, 6px, 10px);
    @include SuperSmallText;
    color: #fff;
--- a/src/css/ingame_hud/notifications.scss
+++ b/src/css/ingame_hud/notifications.scss
@@ -5,13 +5,17 @@

    .notification {
        background: rgba(#333438, 0.8);
-        @include S(border-radius, 2px);
+        @include S(border-radius, $globalBorderRadius);
        @include S(margin-top, 3px);
        color: #fff;
        @include SuperSmallText;
        @include S(padding, 7px, 10px);
        @include S(width, 150px);

+        @include DarkThemeOverride {
+            background-color: rgba(#55595d, 0.8);
+        }
+
        &[data-icon] {
            @include S(background-position-x, 8px);
            background-position-y: center;
--- a/src/css/ingame_hud/pinned_shapes.scss
+++ b/src/css/ingame_hud/pinned_shapes.scss
@@ -41,6 +41,10 @@
            flex-direction: row;
            grid-column: 2 / 3;
            @include S(height, 9px);
+
+            @include DarkThemeOverride {
+                color: #eee;
+            }
        }

        > .goalLabel {
@@ -68,6 +72,8 @@
                @include S(top, -4px);
                @include S(left, -4px);
                background: uiResource("icons/current_goal_marker.png") center center / contain no-repeat;
+
+                @include DarkThemeInvert;
            }
        }
    }
--- a/src/css/ingame_hud/settings_menu.scss
+++ b/src/css/ingame_hud/settings_menu.scss
@@ -27,6 +27,6 @@
        @include S(grid-gap, 10px);
        background: rgba(0, 10, 20, 0.1);
        @include S(padding, 20px);
-        @include S(border-radius, 2px);
+        @include S(border-radius, $globalBorderRadius);
    }
 }
--- a/src/css/ingame_hud/shop.scss
+++ b/src/css/ingame_hud/shop.scss
@@ -9,7 +9,7 @@
            display: grid;
            grid-template-columns: auto 1fr auto;
            background: #eee;
-            @include S(border-radius, 3px);
+            @include S(border-radius, $globalBorderRadius);
            @include S(margin-bottom, 4px);
            @include S(padding, 5px, 10px);
            @include S(grid-row-gap, 1px);
@@ -20,6 +20,10 @@
                margin-bottom: 0;
            }

+            @include DarkThemeOverride {
+                background: #55585a;
+            }
+
            .title {
                grid-column: 1 / 3;
                grid-row: 1 / 2;
@@ -32,7 +36,7 @@
                .tier {
                    @include S(margin-right, 9px);
                    background: $colorGreenBright;
-                    @include S(border-radius, 2px);
+                    @include S(border-radius, $globalBorderRadius);
                    text-transform: uppercase;
                    @include PlainText;
                    color: #fff;
@@ -160,19 +164,23 @@
                        background: #e2e4e6;

                        @include S(line-height, 13px);
-                        @include S(border-radius, 2px);
+                        @include S(border-radius, $globalBorderRadius);
                        @include S(padding, 1px, 2px, 2px);
                        position: relative;
                        text-align: center;
                        @include S(min-width, 50px);
                        overflow: hidden;

+                        @include DarkThemeOverride {
+                            background: #333438;
+                        }
+
                        .progressBar {
                            bottom: 0;
                            left: 0;
                            right: 0;
                            top: 0;
-                            @include S(border-radius, 2px);
+                            @include S(border-radius, $globalBorderRadius);
                            position: absolute;
                            display: inline-block;
                            z-index: -1;
--- a/src/css/ingame_hud/statistics.scss
+++ b/src/css/ingame_hud/statistics.scss
@@ -80,10 +80,14 @@

        > div {
            background: #f4f4f4;
-            @include S(border-radius, 2px);
+            @include S(border-radius, $globalBorderRadius);
            @include S(margin-bottom, 4px);
            display: grid;

+            @include DarkThemeOverride {
+                background: #222428;
+            }
+
            grid-template-columns: 1fr auto;
            @include S(padding, 5px);
            &:last-child {
@@ -100,7 +104,7 @@
            .counter {
                @include SuperSmallText;

-                @include S(border-radius, 2px);
+                @include S(border-radius, $globalBorderRadius);
                @include S(padding, 0, 3px);
            }
        }
--- a/src/css/ingame_hud/unlock_notification.scss
+++ b/src/css/ingame_hud/unlock_notification.scss
@@ -17,7 +17,7 @@

    .dialog {
        background: rgba(#222428, 0.5);
-        @include S(border-radius, 4px);
+        @include S(border-radius, $globalBorderRadius);
        @include S(padding, 30px);

        @include InlineAnimation(0.5s ease-in-out) {
@@ -54,7 +54,7 @@
            @include S(padding, 1px, 6px);
            @include S(margin, 20px, 0, 20px);

-            @include S(border-radius, 4px);
+            @include S(border-radius, $globalBorderRadius);
            @include InlineAnimation(0.5s ease-in-out) {
                0% {
                    transform: translateY(-60vh);
@@ -111,7 +111,7 @@
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
-                @include S(border-radius, 4px);
+                @include S(border-radius, $globalBorderRadius);
                box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15);
            }
        }
--- a/src/css/ingame_hud/vignette_overlay.scss
+++ b/src/css/ingame_hud/vignette_overlay.scss
@@ -6,4 +6,9 @@
    bottom: 0;
    background: uiResource("vignette.lossless.png") center center / cover no-repeat;
    pointer-events: none;
+
+    @include DarkThemeOverride {
+        // Too many artifacts
+        display: none;
+    }
 }
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -62,9 +62,9 @@ ingame_HUD_MassSelector,
 ingame_HUD_BetaOverlay,

 // Dialogs
+ingame_HUD_UnlockNotification,
 ingame_HUD_Shop,
 ingame_HUD_Statistics,
-ingame_HUD_UnlockNotification,
 ingame_HUD_SettingsMenu;

 $zindex: 100;
--- a/src/css/mixins.scss
+++ b/src/css/mixins.scss
@@ -348,3 +348,16 @@ button,
        @content;
    }
 }
+
+@mixin DarkThemeOverride {
+    @at-root body[data-theme="dark"] &,
+        &[data-theme="dark"] {
+        @content;
+    }
+}
+
+@mixin DarkThemeInvert {
+    @include DarkThemeOverride {
+        filter: invert(1);
+    }
+}
--- a/src/css/states/main_menu.scss
+++ b/src/css/states/main_menu.scss
@@ -4,9 +4,26 @@
    justify-content: center;
    flex-direction: column;

-    background: rgb(140, 165, 194) center center / cover !important;
+    // background: #aaacb4 center center / cover !important;
+    background: #bbc2cf center center / cover !important;
+
+    .settingsButton {
+        position: absolute;
+        @include S(bottom, 30px);
+        @include S(right, 30px);
+        @include S(width, 35px);
+        @include S(height, 35px);
+        pointer-events: all;
+        cursor: pointer;
+        background: uiResource("icons/settings.png") center center / contain no-repeat;
+        transition: opacity 0.12s ease-in-out;
+        &:hover {
+            opacity: 0.9;
+        }
+    }

    .fullscreenBackgroundVideo {
+        // display: none !important;
        z-index: -1;
        position: fixed;
        right: 50%;
@@ -45,7 +62,7 @@

        .standaloneBanner {
            background: rgb(255, 225, 238);
-            @include S(border-radius, 4px);
+            @include S(border-radius, $globalBorderRadius);
            height: 100%;
            box-sizing: border-box;
            @include S(padding, 15px);
@@ -125,7 +142,7 @@
        @include PlainText;
        background: $colorRedBright;
        @include S(padding, 10px);
-        @include S(border-radius, 4px);
+        @include S(border-radius, $globalBorderRadius);
        color: #fff;
        @include S(margin-top, 10px);
        border: #{D(2px)} solid rgba(0, 10, 20, 0.1);
@@ -138,7 +155,7 @@
        flex-direction: column;
        background: #fafafa;
        @include S(padding, 20px);
-        @include S(border-radius, 4px);
+        @include S(border-radius, $globalBorderRadius);
        // border: #{D(2px)} solid rgba(0, 10, 20, 0.1);
        height: 100%;
        width: 100%;
@@ -149,7 +166,7 @@
            background-color: $colorRedBright;
            @include PlainText;
            color: #fff;
-            @include S(border-radius, 4px);
+            @include S(border-radius, $globalBorderRadius);
            @include S(padding, 5px);
        }

@@ -158,9 +175,10 @@
            @include S(width, 130px);
            @include S(padding, 15px, 20px);
            letter-spacing: 0.3em !important;
+
+            font-weight: bold;
            color: #fff;
            background-color: $colorGreenBright;
-            text-shadow: #{D(1px)} #{D(2px)} 0 rgba(0, 0, 0, 0.1);
            transition: transform 0.12s ease-in-out;
            &:hover {
                transform: scale(1.02);
@@ -184,7 +202,7 @@

            .savegame {
                background: #eee;
-                @include BorderRadius(4px);
+                @include S(border-radius, $globalBorderRadius);
                @include S(padding, 5px);
                display: grid;
                grid-template-columns: 1fr auto auto;
@@ -259,7 +277,7 @@
            background: #fafafa;
            @include S(padding, 5px);
            @include S(padding-left, 10px);
-            @include S(border-radius, 4px);
+            @include S(border-radius, $globalBorderRadius);
            @include S(margin-left, 10px);
            @include SuperSmallText();

--- a/src/css/states/preload.scss
+++ b/src/css/states/preload.scss
@@ -32,7 +32,7 @@

            @include BoxShadow3D(#fff);
            @include S(padding, 15px);
-            @include BorderRadius(4px);
+            @include S(border-radius, $globalBorderRadius);
            @include DropShadow;

            .errorHeader {
--- a/src/css/states/settings.scss
+++ b/src/css/states/settings.scss
@@ -8,10 +8,23 @@
            @include Heading;
        }

+        .versionbar {
+            @include S(margin-top, 20px);
+            @include SuperSmallText;
+            display: grid;
+            align-items: center;
+            grid-template-columns: 1fr auto;
+            .buildVersion {
+                display: flex;
+                flex-direction: column;
+                color: #aaadaf;
+            }
+        }
+
        .setting {
            @include S(padding, 10px);
            background: #eee;
-            @include S(border-radius, 2px);
+            @include S(border-radius, $globalBorderRadius);
            @include S(margin-bottom, 5px);

            label {
@@ -31,6 +44,15 @@
                grid-template-columns: 1fr auto;
            }

+            &.disabled {
+                opacity: 0.3;
+                pointer-events: none;
+                * {
+                    pointer-events: none !important;
+                    cursor: default !important;
+                }
+            }
+
            .value.enum {
                background: #fff;
                @include PlainText;
@@ -40,7 +62,7 @@
                cursor: pointer;
                justify-content: center;
                @include S(min-width, 100px);
-                @include S(border-radius, 2px);
+                @include S(border-radius, $globalBorderRadius);
                @include S(padding, 4px);
                @include S(padding-right, 15px);

--- a/src/css/textual_game_state.scss
+++ b/src/css/textual_game_state.scss
@@ -33,7 +33,7 @@

    .content {
        background: #fff;
-        @include S(border-radius, 2px);
+        @include S(border-radius, $globalBorderRadius);
        @include S(padding, 10px);
        max-height: calc(80vh - #{D(60px)});
        overflow-y: auto;
--- a/src/css/variables.scss
+++ b/src/css/variables.scss
@@ -31,6 +31,7 @@ $mainBgColor: #dee1ea;
 $accentColorBright: #e1e4ed;
 $accentColorDark: #7d808a;
 $colorGreenBright: #66bb6a;
+$colorBlueBright: rgb(74, 163, 223);
 $colorRedBright: #ef5072;
 $themeColor: #393747;
 $ingameHudBg: rgba($accentColorBright, 0.1);
@@ -39,7 +40,7 @@ $ingameHudBorder: #{D(1.5px)} solid $accentColorDark;
 $text3dColor: #f4ffff;

 // Dialog properties
-$modalDialogBg: rgba(#666a73, 0.8);
+$modalDialogBg: rgba(160, 165, 180, 0.8);
 $dialogBgColor: lighten($mainBgColor, 10);

 $lightFontWeight: normal;