diff --git a/gulp/preloader/preloader.css b/gulp/preloader/preloader.css index f05e248a..0a334e57 100644 --- a/gulp/preloader/preloader.css +++ b/gulp/preloader/preloader.css @@ -9,14 +9,13 @@ * { margin: 0; padding: 0; - touch-action: pan-x pan-y !important; + touch-action: pan-x pan-y; pointer-events: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } html { position: fixed; - touch-action: pan-x, pan-y; top: 0; left: 0; bottom: 0; @@ -28,23 +27,9 @@ body { color: #555; user-select: none; background: inherit !important; - text-transform: none; - white-space: normal; - word-break: normal; - word-spacing: normal; word-wrap: break-word; - font-style: normal; - line-break: auto; - font-stretch: 100%; text-rendering: optimizeLegibility; - text-decoration: none; - text-size-adjust: 100%; - letter-spacing: normal; -webkit-font-smoothing: antialiased; - -webkit-touch-callout: none; - /* prevent callout to copy image, etc when tap to hold */ - -webkit-text-size-adjust: none; - /* prevent webkit from resizing text to fit */ } #ll_fp { diff --git a/src/css/common.scss b/src/css/common.scss index f7bcdd39..581bd112 100644 --- a/src/css/common.scss +++ b/src/css/common.scss @@ -2,7 +2,7 @@ * { margin: 0; padding: 0; - touch-action: pan-x pan-y !important; + touch-action: pan-x pan-y; pointer-events: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } @@ -21,16 +21,7 @@ body { } html { - position: fixed; - // scroll-behavior: smooth; background: $mainBgColor; - // Disable zooming and thus - touch-action: pan-x, pan-y; - top: 0; - left: 0; - bottom: 0; - right: 0; - background: #dee1ea; @include DarkThemeOverride { background: $darkModeGameBackground; } @@ -39,41 +30,11 @@ html { body { color: #555; user-select: none; - background: inherit !important; - text-transform: none; - white-space: normal; - word-break: normal; - word-spacing: normal; + background: inherit; word-wrap: break-word; - font-style: normal; - line-break: auto; - font-stretch: 100%; text-rendering: optimizeLegibility; - text-decoration: none; - text-size-adjust: 100%; - letter-spacing: normal; -webkit-font-smoothing: antialiased; - -webkit-touch-callout: none; - /* prevent callout to copy image, etc when tap to hold */ - overflow: hidden; @include Text; - // For recording the bg video - // filter: blur(5px); - // &::after { - // position: fixed; - // top: 0; - // left: 0; - // right: 0; - // bottom: 0; - // z-index: 9999; - // content: " "; - // background: rgba($ingameHudBg, 0.5); - // } -} - -img { - -webkit-touch-callout: none; - /* prevent callout to copy image, etc when tap to hold */ } i { @@ -94,8 +55,6 @@ input, textarea, select { font-size: inherit; - font-weight: inherit; - font-family: inherit; line-height: inherit; } @@ -106,69 +65,24 @@ button { cursor: pointer; position: relative; @include TextShadow3D; - &.prefab_BuyButtonWithResources { - display: flex; - box-sizing: border-box; - @include S(padding, 6px, 4px); - // letter-spacing: 0; - background-color: color($cyan, 400); - flex-direction: row; - justify-content: center; - align-items: center; - @include S(width, 85px); - &.tooExpensive { - color: $colorRedBright; - background-color: #555; - cursor: default; - } - .cost_entry { - display: flex; - flex-grow: 1; - justify-content: center; - align-items: center; - } - b { - display: flex; - flex-grow: 1; - justify-content: center; - align-items: center; - } - &.tooExpensive { - cursor: default !important; - background-color: #565859 !important; - b { - color: $colorRedBright !important; - } - .cost_entry { - opacity: 0.6; - } - } - } } .styledButton { - background: $themeColor; text-transform: uppercase; box-sizing: content-box; @include S(padding, 3px, 10px); - @include IncreasedClickArea(10px); - @include TextShadow3D(#fff, $borderColor: #28292a); @include ButtonText; border: 0; background: $colorBlueBright; color: #fff; - @include S(border-radius, 0.8 * $globalBorderRadius); - // border: #{D(1px)} solid rgba(0, 10, 20, 0.2); - @include S(border-bottom-width, 2px); - // color: $accentColorDark; - letter-spacing: 0em !important; - // box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2); + transition: opacity 0.12s ease-in-out; + .keybinding { @include S(bottom, -2.5px); @include S(right, -2px); } - transition: opacity 0.12s ease-in-out; + &:hover { opacity: 0.9; } @@ -184,7 +98,6 @@ input[type="email"] { @include S(padding, 11px, 12px); @include S(margin, 10px, 0); border: 0; - cursor: text; display: block; text-align: left; box-sizing: border-box; @@ -194,7 +107,6 @@ input[type="email"] { user-select: text !important; pointer-events: all !important; @include Text; - @include IncreasedClickArea(15px); @include S(border-radius, $globalBorderRadius); &::placeholder { color: #fff; @@ -239,8 +151,6 @@ a { a { text-decoration: none; - cursor: pointer; - pointer-events: all; } i { @@ -250,28 +160,15 @@ i { input { user-select: text; pointer-events: all; - cursor: text; border-radius: 0; } canvas { pointer-events: all; - // image-rendering: pixelated; - // &.smoothed { - // }1 - // &.unsmoothed { - // } - letter-spacing: 0 !important; transform: translateZ(0); backface-visibility: hidden; } -.fontPreload { - position: absolute; - top: -100px; - left: -100px; -} - // Scrollbar ::-webkit-scrollbar { @include S(width, 6px); @@ -292,21 +189,6 @@ canvas { background: #d8dce0; } -#uiTestPlaybackCursor { - position: fixed; - top: 100px; - left: 100px; - z-index: 9999; - border-radius: 50%; - background: rgba(255, 255, 0, 0.4); - width: 24px; - height: 24px; - border: 3px solid rgba(0, 0, 0, 0.5); - margin-top: -12px; - margin-left: -12px; - box-sizing: border-box; -} - .pressed:not(.noPressEffect) { transform: scale(0.98) !important; animation: none !important; @@ -334,8 +216,7 @@ canvas { color: color($purple, 300); } -.prefab_LoadingTextWithAnim, -.prefab_LoadingTextWithAnimDelayed { +.prefab_LoadingTextWithAnim { display: inline-flex; align-items: center; justify-content: center; @@ -368,20 +249,6 @@ canvas { } } -.prefab_LoadingTextWithAnimDelayed { - @include InlineAnimation(0.6s ease-in-out) { - 0% { - opacity: 0; - } - 50% { - opacity: 0; - } - 100% { - opacity: 1; - } - } -} - .prefab_LoadingProgressIndicator { @include PlainText; @include S(margin-top, 20px); @@ -392,43 +259,6 @@ canvas { text-align: center; } -.prefab_FeatureComingSoon { - position: relative; - &::after { - @include S(top, -5px); - @include S(left, -5px); - @include S(right, -5px); - @include S(bottom, -5px); - content: "Coming soon!"; - z-index: 10000; - background: rgba(lighten($mainBgColor, 0), 0.4); - @include S(border-radius, $globalBorderRadius); - position: absolute; - display: flex; - justify-content: center; - align-items: center; - pointer-events: all; - @include PlainText; - text-transform: uppercase; - } - opacity: 0.6; - > * { - opacity: 0.5 !important; - } -} - -.prefab_InfoIcon { - @include S(width, 25px); - @include S(height, 25px); - z-index: 100; - opacity: 0.8; - cursor: pointer; - pointer-events: all; - display: inline-block; - position: relative; - @include IncreasedClickArea(10px); -} - .gameState.prefab_LoadingState { text-align: center; display: flex; @@ -545,7 +375,6 @@ canvas { box-shadow 0.4s ease-in-out !important; position: relative; @include BorderRadius(20px); - @include IncreasedClickArea(10px); @include BoxShadow3D($bgColor, $size: 2px); &.loading { opacity: 0.2; @@ -637,6 +466,7 @@ input.rangeInput { .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); @@ -644,12 +474,8 @@ input.rangeInput { > span { @include S(font-size, 9px); @include S(line-height, 11px); - font-weight: bold !important; - text-shadow: none !important; - // font-family: Arial, sans-serif !important; } - font-weight: bold; color: $accentColorDark; text-align: center; justify-content: center; diff --git a/src/css/dynamic_ui.scss b/src/css/dynamic_ui.scss index 8b005eff..e90e0b24 100644 --- a/src/css/dynamic_ui.scss +++ b/src/css/dynamic_ui.scss @@ -13,12 +13,6 @@ @return calc(#{$baseValue} * var(--ui-scale)); } -// Helper method to scale the font size -@mixin ScaleFont($fontSize, $lineHeight) { - font-size: D($fontSize * $mainFontScale); - line-height: D($lineHeight * $mainFontScale); -} - // Helper method to scale a property value @mixin S($propName, $v1, $v2: "", $v3: "", $v4: "", $important: false) { $impSuffix: ""; diff --git a/src/css/game_state.scss b/src/css/game_state.scss index 60fab61d..31d2944c 100644 --- a/src/css/game_state.scss +++ b/src/css/game_state.scss @@ -6,22 +6,10 @@ $gameStateTransition: 0.2s ease-out; } .gameState { - display: block; - // background: $mainBgColor; - height: 100%; - width: 100%; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 0; - overflow: hidden !important; @include Text; @include StateAnim(opacity, transform, filter); opacity: 0; - // transform: scaleX(0.99) skewX(1deg) translate(1%, 0.5%); &.arrived { opacity: 1; diff --git a/src/css/ingame_hud/debug_info.scss b/src/css/ingame_hud/debug_info.scss index 3a077d53..d1293804 100644 --- a/src/css/ingame_hud/debug_info.scss +++ b/src/css/ingame_hud/debug_info.scss @@ -28,7 +28,6 @@ font-size: 14px; line-height: 15px; padding: 1px; - font-family: "GameFont"; border-radius: 3px; } } diff --git a/src/css/ingame_hud/dialogs.scss b/src/css/ingame_hud/dialogs.scss index 0b2e7ae2..7a88fff1 100644 --- a/src/css/ingame_hud/dialogs.scss +++ b/src/css/ingame_hud/dialogs.scss @@ -215,7 +215,6 @@ @include S(height, 25px); position: relative; cursor: pointer; - @include IncreasedClickArea(3px); &:hover { opacity: 0.9; diff --git a/src/css/ingame_hud/game_menu.scss b/src/css/ingame_hud/game_menu.scss index 7e579c09..5c93810c 100644 --- a/src/css/ingame_hud/game_menu.scss +++ b/src/css/ingame_hud/game_menu.scss @@ -11,7 +11,6 @@ > button, > .button { @include PlainText; - @include IncreasedClickArea(0px); background: green; @include S(width, 30px); @include S(height, 30px); diff --git a/src/css/ingame_hud/keybindings_overlay.scss b/src/css/ingame_hud/keybindings_overlay.scss index 278b2d2a..47bffe0d 100644 --- a/src/css/ingame_hud/keybindings_overlay.scss +++ b/src/css/ingame_hud/keybindings_overlay.scss @@ -41,11 +41,12 @@ // @include S(margin, 0, 3px); } - code { + kbd { position: relative; top: unset; left: unset; margin: 0; + &.rightMouse { /* @load-async */ background: #fff uiResource("icons/mouse_right.png") center center / 85% no-repeat; diff --git a/src/css/ingame_hud/pinned_shapes.scss b/src/css/ingame_hud/pinned_shapes.scss index 0be46f9c..75e6d38d 100644 --- a/src/css/ingame_hud/pinned_shapes.scss +++ b/src/css/ingame_hud/pinned_shapes.scss @@ -71,7 +71,6 @@ @include S(top, 13px); @include S(left, -7px); @include DarkThemeInvert; - @include IncreasedClickArea(2px); transition: opacity 0.12s ease-in-out; z-index: 100; @@ -93,7 +92,6 @@ @include S(top, 3px); @include S(left, -7px); @include DarkThemeInvert; - @include IncreasedClickArea(2px); transition: opacity 0.12s ease-in-out; z-index: 100; diff --git a/src/css/ingame_hud/puzzle_complete_notification.scss b/src/css/ingame_hud/puzzle_complete_notification.scss index d68e902d..12a47f0c 100644 --- a/src/css/ingame_hud/puzzle_complete_notification.scss +++ b/src/css/ingame_hud/puzzle_complete_notification.scss @@ -100,7 +100,6 @@ transition: opacity 0.12s ease-in-out, background-color 0.12s ease-in-out; - @include IncreasedClickArea(0px); &.liked-yes { /* @load-async */ @@ -153,7 +152,6 @@ @include S(min-width, 100px); @include S(padding, 8px, 16px); @include S(margin, 0, 6px); - @include IncreasedClickArea(0px); } } diff --git a/src/css/ingame_hud/puzzle_editor_review.scss b/src/css/ingame_hud/puzzle_editor_review.scss index 523d8025..ea09c03b 100644 --- a/src/css/ingame_hud/puzzle_editor_review.scss +++ b/src/css/ingame_hud/puzzle_editor_review.scss @@ -11,7 +11,6 @@ > .button { @include ButtonText; - @include IncreasedClickArea(0px); pointer-events: all; cursor: pointer; position: relative; diff --git a/src/css/ingame_hud/puzzle_editor_settings.scss b/src/css/ingame_hud/puzzle_editor_settings.scss index 8dc8d199..c9dd2c53 100644 --- a/src/css/ingame_hud/puzzle_editor_settings.scss +++ b/src/css/ingame_hud/puzzle_editor_settings.scss @@ -35,7 +35,6 @@ justify-content: center; @include S(width, 15px); @include S(height, 15px); - @include IncreasedClickArea(0px); } .value { diff --git a/src/css/ingame_hud/puzzle_next.scss b/src/css/ingame_hud/puzzle_next.scss index ee0f664f..896e64a7 100644 --- a/src/css/ingame_hud/puzzle_next.scss +++ b/src/css/ingame_hud/puzzle_next.scss @@ -11,7 +11,6 @@ > .button { @include ButtonText; - @include IncreasedClickArea(0px); pointer-events: all; cursor: pointer; position: relative; diff --git a/src/css/ingame_hud/sandbox_controller.scss b/src/css/ingame_hud/sandbox_controller.scss index 3b520f0b..ca95b12f 100644 --- a/src/css/ingame_hud/sandbox_controller.scss +++ b/src/css/ingame_hud/sandbox_controller.scss @@ -33,7 +33,6 @@ justify-content: center; @include S(width, 15px); @include S(height, 15px); - @include IncreasedClickArea(0px); } } @@ -43,7 +42,6 @@ @include S(margin-top, 10px); button { @include S(margin-bottom, 2px); - @include IncreasedClickArea(0px); @include SuperSmallText; } } diff --git a/src/css/ingame_hud/shop.scss b/src/css/ingame_hud/shop.scss index 7152dc71..fc682090 100644 --- a/src/css/ingame_hud/shop.scss +++ b/src/css/ingame_hud/shop.scss @@ -126,7 +126,6 @@ opacity: 0.6; cursor: pointer; pointer-events: all; - @include IncreasedClickArea(5px); transition: opacity 0.12s ease-in-out; @include DarkThemeInvert; @@ -215,7 +214,6 @@ opacity: 0.5; cursor: pointer; pointer-events: all; - @include IncreasedClickArea(5px); transition: opacity 0.12s ease-in-out; @include DarkThemeInvert; @@ -237,7 +235,6 @@ @include S(margin-top, 4px); z-index: 10; @include SuperSmallText; - letter-spacing: 0; background: #e2e4e6; @include S(line-height, 13px); diff --git a/src/css/ingame_hud/statistics.scss b/src/css/ingame_hud/statistics.scss index cdc428c1..4077d7e6 100644 --- a/src/css/ingame_hud/statistics.scss +++ b/src/css/ingame_hud/statistics.scss @@ -14,7 +14,6 @@ @include S(padding, 1px, 10px); border: 0; box-shadow: none; - @include IncreasedClickArea(1px); @include S(min-width, 30px); color: #fff; opacity: 0.25; diff --git a/src/css/ingame_hud/tutorial_hints.scss b/src/css/ingame_hud/tutorial_hints.scss index dd6a4d79..aad3b714 100644 --- a/src/css/ingame_hud/tutorial_hints.scss +++ b/src/css/ingame_hud/tutorial_hints.scss @@ -58,7 +58,6 @@ button.toggleHint { @include PlainText; - @include IncreasedClickArea(0px); } } diff --git a/src/css/ingame_hud/waypoints.scss b/src/css/ingame_hud/waypoints.scss index 6b37042a..5cb2fe31 100644 --- a/src/css/ingame_hud/waypoints.scss +++ b/src/css/ingame_hud/waypoints.scss @@ -87,7 +87,6 @@ pointer-events: all; cursor: pointer; position: relative; - @include IncreasedClickArea(2px); transition: transform 0.04s ease-in-out; &:hover { diff --git a/src/css/main.scss b/src/css/main.scss index 9318cf89..0c9fde0c 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -7,7 +7,6 @@ } @import "resources"; -@import "trigonometry"; @import "material_colors"; @import "dynamic_ui"; @import "variables"; diff --git a/src/css/mixins.scss b/src/css/mixins.scss index 3a0db944..f5420778 100644 --- a/src/css/mixins.scss +++ b/src/css/mixins.scss @@ -11,25 +11,6 @@ the performance when animated. Use only transform and opacity in animations! */ // $hardwareAcc: translateZ(0); $hardwareAcc: null; -// ---------------------------------------- -/** Increased click area for this element, helpful on mobile */ -@mixin IncreasedClickArea($size) { - // &::after { - // content: ""; - // position: absolute; - // top: #{D(-$size)}; - // bottom: #{D(-$size)}; - // left: #{D(-$size)}; - // right: #{D(-$size)}; - // // background: rgba(255, 0, 0, 0.3); - // } -} -button, -.increasedClickArea { - position: relative; - @include IncreasedClickArea(15px); -} - // ---------------------------------------- /* Duplicates an animation and adds two classes .Even and .Odd which uses the animation. This can be used to replay the animation by toggling between the classes, because @@ -101,20 +82,6 @@ button, opacity: 1; } -// ---------------------------------------- -/* Automatically transforms the game state if a hardware keyboard is open */ -@mixin TransformToMatchKeyboard { - transition: transform 0.2s ease-in-out; - @include AndroidHwKeyboardOpen { - @include VerticalStyle { - transform: translateY(#{D(-125px)}) $hardwareAcc; - } - @include HorizontalStyle { - transform: translateY(#{D(-100px)}) $hardwareAcc; - } - } -} - // ---------------------------------------- /* Define a style which is only applied when the viewport is at least X pixels wide */ @mixin StyleAtWidth($minW) { @@ -233,19 +200,6 @@ button, color: $color; } -// ---------------------------------------- -/* String replacement */ -@function str-replace($string, $search, $replace: "") { - $index: str-index($string, $search); - - @if $index { - @return str-slice($string, 1, $index - 1) + $replace + - str-replace(str-slice($string, $index + str-length($search)), $search, $replace); - } - - @return $string; -} - @mixin BounceInFromSide($mul, $duration: 0.18s ease-in-out) { @include InlineAnimation($duration) { 0% { @@ -268,17 +222,6 @@ button, overflow-wrap: break-all; } -@mixin SupportsAndroidNotchQuery { - @supports (color: constant(--notch-inset-left)) { - @content; - } -} -@mixin SupportsiOsNotchQuery { - @supports (color: env(safe-area-inset-left, 0px)) { - @content; - } -} - @mixin DarkThemeOverride { @at-root html[data-theme="dark"] &, &[data-theme="dark"] { diff --git a/src/css/resources.scss b/src/css/resources.scss index 6bc76d3d..de6ce65e 100644 --- a/src/css/resources.scss +++ b/src/css/resources.scss @@ -78,7 +78,3 @@ $languages: en, de, cs, da, et, es-419, fr, it, pt-BR, sv, tr, el, ru, uk, zh-TW background-image: uiResource("languages/#{$language}.svg") !important; } } - -.steam_dlbtn_0 { - background-image: uiResource("steam_link_btn/0.png") !important; -} diff --git a/src/css/states/keybindings.scss b/src/css/states/keybindings.scss index a23b1d38..8b0373e7 100644 --- a/src/css/states/keybindings.scss +++ b/src/css/states/keybindings.scss @@ -32,7 +32,6 @@ button { @include S(height, 15px); @include S(width, 15px); - @include IncreasedClickArea(0px); background: transparent center center / 40% no-repeat; opacity: 0.9; &.editKeybinding { diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index d610910d..d93f3c4d 100644 --- a/src/css/states/main_menu.scss +++ b/src/css/states/main_menu.scss @@ -29,7 +29,6 @@ cursor: pointer; transition: opacity 0.12s ease-in-out; - @include IncreasedClickArea(2px); opacity: 0.85; &:hover { opacity: 1; @@ -152,17 +151,6 @@ } } - .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; width: 100%; @@ -170,287 +158,6 @@ flex-direction: column; @include S(grid-gap, 20px); - .mainNews { - background: linear-gradient(220deg, rgb(74, 93, 201), rgb(93, 255, 150)); - &::before { - background: uiResource("shapez2.png") center center / 100% no-repeat; - content: ""; - @include S(width, 100px); - @include S(height, 100px); - position: absolute; - top: 55%; - right: 8%; - pointer-events: none; - transform: translateY(-50%); - transition: transform 0.5s ease-in-out; - } - - // .close { - // position: absolute; - // pointer-events: all; - // background: uiResource("icons/main_menu_exit.png") center center / 50% no-repeat; - // display: inline-flex; - // @include S(width, 15px); - // @include S(height, 15px); - // @include S(top, 2px); - // opacity: 0.3; - // @include S(right, 2px); - // z-index: 200; - // transition: opacity 0.12s ease-in-out; - // &:hover { - // opacity: 0.7; - // } - // } - - &:hover::before { - transform: translate(0, -51%); - } - - box-shadow: 0 D(9px) D(15px) rgba(#000, 0.2); - width: 100%; - display: flex; - flex-direction: column; - @include S(height, 60px); - - pointer-events: all; - flex-grow: 1; - z-index: 100; - position: relative; - grid-row: 2 / 3; - @include S(border-radius, $globalBorderRadius); - justify-content: center; - @include S(padding, 10px); - @include S(padding-right, 100px); - box-sizing: border-box; - transition: opacity 0.12s ease-in-out; - cursor: pointer; - &:hover { - opacity: 0.85; - } - - .text { - @include SuperSmallText; - @include S(width, 100px); - color: rgba(#000, 1); - } - } - - .standaloneBanner { - background: transparent; - @include S(border-radius, $globalBorderRadius); - @include S(min-width, 320px); - @include S(max-width, 370px); - width: 100%; - box-sizing: border-box; - grid-row: 1 / 3; - - display: flex; - flex-direction: column; - margin: 0; - - strong { - font-weight: 700 !important; - } - - h3 { - @include Heading; - font-weight: bold; - @include S(margin-bottom, 20px); - text-align: center; - color: #222; - text-shadow: 0 D(1px) D(5px) rgba(#fff, 0.7); - } - - 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; - text-align: center; - } - - .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(7px) rgba(#000, 0.3); - &: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 PlainText; - text-transform: uppercase; - transform: rotate(5deg); - } - } - .specialOffer { - color: #000000; - @include PlainText; - align-self: center; - text-align: center; - @include S(margin-top, 5px); - @include InlineAnimation(1s ease-in-out infinite) { - 50% { - transform: scale(1.02, 1.03) translateY(2%); - } - } - } - - .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: 1fr 1fr; - background: #fff #{D(10px)} center / #{D(17px)} no-repeat; - @include S(grid-row-gap, 2px); - align-items: center; - @include S(padding, 6px); - @include S(border-radius, $globalBorderRadius); - @include S(height, 26px); - 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; - @include S(font-size, 8px); - line-height: 1em; - align-self: center; - - opacity: 0.8; - } - - &.levels { - background-image: uiResource("res/ui/icons/advantage_new_levels.png"); - > strong { - color: #f13555; - } - } - - &.upgrades { - background-image: uiResource("res/ui/icons/advantage_upgrades.png"); - > strong { - color: #8a00ff; - } - } - - &.buildings { - background-image: uiResource("res/ui/icons/advantage_buildings.png"); - > strong { - color: #3fce8b; - } - } - - &.wires { - background-image: uiResource("res/ui/icons/advantage_wires.png"); - > strong { - color: #ef2fdb; - } - } - - &.markers { - background-image: uiResource("res/ui/icons/advantage_markers.png"); - > strong { - color: #4294ff; - } - } - - &.mods { - background-image: uiResource("res/ui/icons/advantage_mods.png"); - > strong { - color: #8a00ff; - } - } - - &.savegames { - background-image: uiResource("res/ui/icons/advantage_savegames.png"); - > strong { - color: #ff9500; - } - } - - &.darkmode { - background-image: uiResource("res/ui/icons/advantage_dark_mode.png"); - > strong { - color: #292c32; - } - } - - &.support { - background-image: uiResource("res/ui/icons/advantage_support.png"); - > strong { - color: #e72d2d; - } - } - - &.achievements { - background-image: uiResource("res/ui/icons/advantage_achievements.png"); - > strong { - color: #ffac0f; - } - } - } - } - .puzzleContainer { display: flex; align-items: center; @@ -527,54 +234,6 @@ box-shadow: 0 D(2px) D(9px) rgba(#000, 0.4); } } - - &.notOwned { - @include S(height, 200px); - @include S(width, 250px); - border: 0; - background: uiResource("puzzle_460x215_15.png") center D(-5px) / 100% repeat; - .dlcLogo { - display: none; - } - &::before { - content: ""; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: linear-gradient(180deg, rgba(#222529, 0.1) 40%, rgba(#222529, 1) 70%); - } - - p { - position: absolute; - left: 0; - right: 0; - @include S(bottom, 35px); - z-index: 50; - box-sizing: border-box; - display: block; - @include PlainText; - color: rgba(#fff, 0.9); - @include S(padding, 10px); - @include SuperSmallText; - } - > button { - pointer-events: all; - @include S(padding, 4px, 10px); - margin: 0; - background: #47c599; - box-sizing: border-box; - position: absolute; - @include S(bottom, 10px); - @include S(right, 10px); - z-index: 100; - @include PlainText; - z-index: 200; - color: #111215; - box-shadow: 0 D(2px) D(4px) rgba(#000, 1); - } - } } .modsOverview { @@ -717,11 +376,9 @@ @include SuperHeading; width: 100%; @include S(padding, 15px, 10px); - letter-spacing: 0.1em !important; - @include IncreasedClickArea(0px); + letter-spacing: 0.1em; box-sizing: border-box; font-weight: bold; - color: #fff; background-color: $colorGreenBright; transition: transform 0.12s ease-in-out, @@ -762,16 +419,7 @@ box-sizing: border-box; } - .importButton { - @include IncreasedClickArea(0px); - } - - .newGameButton { - @include IncreasedClickArea(0px); - } - .modsButton { - @include IncreasedClickArea(0px); background-color: $modsColor !important; } } @@ -866,7 +514,6 @@ padding: 0; align-self: center; justify-self: center; - @include IncreasedClickArea(0px); background: #44484a center center / 40% no-repeat; } @@ -886,7 +533,6 @@ background-image: uiResource("icons/download.png"); } @include S(width, 15px); - @include IncreasedClickArea(0px); @include S(height, 15px); background-size: 80%; align-self: start; @@ -904,7 +550,6 @@ grid-column: 3 / 4; grid-row: 2 / 3; background-color: transparent; - @include IncreasedClickArea(0px); & { background-image: uiResource("icons/delete.png"); @@ -925,7 +570,6 @@ button.renameGame { background-color: transparent; - @include IncreasedClickArea(2px); & { background-image: uiResource("icons/edit_key.png"); @@ -1067,11 +711,6 @@ background-size: 60%; background-position: 60% 60%; } - - &.steamLogo { - background-image: uiResource("main_menu/steam.svg"); - background-size: 105%; - } } } } diff --git a/src/css/states/mods.scss b/src/css/states/mods.scss index cc8c1fdd..4a060f91 100644 --- a/src/css/states/mods.scss +++ b/src/css/states/mods.scss @@ -1,22 +1,19 @@ #state_ModsState { .modsGrid { display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 0.5em; + grid-template-columns: 1fr auto; + align-items: center; - .noMods { - grid-template-columns: unset; - place-items: center; + > h1 { + justify-self: start; + } + + .openModsFolder { + background-color: $modsColor; } } - .mod { - display: flex; - flex-direction: column; - padding: 0.6em; - gap: 0.3em; - background-color: $mainBgColor; - @include S(border-radius, 0.75 * $globalBorderRadius); + .modsStats { @include PlainText; .title b { diff --git a/src/css/textual_game_state.scss b/src/css/textual_game_state.scss index 16249d01..83917ad5 100644 --- a/src/css/textual_game_state.scss +++ b/src/css/textual_game_state.scss @@ -18,7 +18,6 @@ text-transform: uppercase; color: #333438; position: relative; - @include IncreasedClickArea(10px); } .backButton { diff --git a/src/css/trigonometry.scss b/src/css/trigonometry.scss deleted file mode 100644 index 97d2e730..00000000 --- a/src/css/trigonometry.scss +++ /dev/null @@ -1,66 +0,0 @@ -/////////////////////////////////////////////////////////// -// Plain SASS Trigonometry Algorithm in Taylor Expansion // -// // -// Based on // -// http://japborst.net/posts/sass-sines-and-cosines // -/////////////////////////////////////////////////////////// - -$pi: 3.14159265359; -$_precision: 10; - -@function pow($base, $exp) { - $value: $base; - @if $exp > 1 { - @for $i from 2 through $exp { - $value: $value * $base; - } - } - @if $exp < 1 { - @for $i from 0 through -$exp { - $value: $value / $base; - } - } - @return $value; -} - -@function fact($num) { - $fact: 1; - @if $num > 0 { - @for $i from 1 through $num { - $fact: $fact * $i; - } - } - @return $fact; -} - -@function _to_unitless_rad($angle) { - @if unit($angle) == "deg" { - $angle: $angle / 180deg * $pi; - } - @if unit($angle) == "rad" { - $angle: $angle / 1rad; - } - @return $angle; -} - -@function sin($angle) { - $a: _to_unitless_rad($angle); - $sin: $a; - @for $n from 1 through $_precision { - $sin: $sin + (pow(-1, $n) / fact(2 * $n + 1)) * pow($a, (2 * $n + 1)); - } - @return $sin; -} - -@function cos($angle) { - $a: _to_unitless_rad($angle); - $cos: 1; - @for $n from 1 through $_precision { - $cos: $cos + (pow(-1, $n) / fact(2 * $n)) * pow($a, 2 * $n); - } - @return $cos; -} - -@function tan($angle) { - @return sin($angle) / cos($angle); -} diff --git a/src/css/variables.scss b/src/css/variables.scss index 1c87b3cf..f94af333 100644 --- a/src/css/variables.scss +++ b/src/css/variables.scss @@ -68,10 +68,6 @@ $mainFont: "GameFont", sans-serif; $numberFont: $mainFont; $textFont: $mainFont; -$mainFontWeight: 400; -$mainFontSpacing: 0.01em; -$mainFontScale: 1; - @mixin DebugText($color) { // font-size: 3px; // &, @@ -81,100 +77,43 @@ $mainFontScale: 1; } @mixin SuperDuperSmallText { - @include ScaleFont($superDuperSmallTextFontSize, $superDuperSmallTextLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; + font-size: D($superDuperSmallTextFontSize); + line-height: D($superDuperSmallTextLineHeight); @include DebugText(green); } @mixin SuperSmallText { - @include ScaleFont($superSmallTextFontSize, $superSmallTextLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; + font-size: D($superSmallTextFontSize); + line-height: D($superSmallTextLineHeight); @include DebugText(green); } @mixin PlainText { - @include ScaleFont($plainTextFontSize, $plainTextLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; - + font-size: D($plainTextFontSize); + line-height: D($plainTextLineHeight); @include DebugText(red); } @mixin Text { - @include ScaleFont($textFontSize, $textLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - - letter-spacing: $mainFontSpacing; - + font-size: D($textFontSize); + line-height: D($textLineHeight); @include DebugText(blue); } @mixin Heading { - @include ScaleFont($headingFontSize, $headingLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; - + font-size: D($headingFontSize); + line-height: D($headingLineHeight); @include DebugText(yellow); } @mixin SuperHeading { - @include ScaleFont($superHeadingFontSize, $superHeadingLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; - + font-size: D($superHeadingFontSize); + line-height: D($superHeadingLineHeight); @include DebugText(orange); } @mixin ButtonText { - @include ScaleFont($buttonFontSize, $buttonLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; + font-size: D($buttonFontSize); + line-height: D($buttonLineHeight); @include DebugText(purple); } - -@function str-split($string, $separator) { - // empty array/list - $split-arr: (); - // first index of separator in string - $index: str-index($string, $separator); - // loop through string - @while $index != null { - // get the substring from the first character to the separator - $item: str-slice($string, 1, $index - 1); - // push item to array - $split-arr: append($split-arr, $item); - // remove item and separator from string - $string: str-slice($string, $index + 1); - // find new index of separator - $index: str-index($string, $separator); - } - // add the remaining string to list (the last item) - $split-arr: append($split-arr, $string); - - @return $split-arr; -} - -@function _first-index($string, $direction: "left") { - @for $i from 1 through str-length($string) { - $index: if($direction == "left", $i, -$i); - - @if str-slice($string, $index, $index) != " " { - @return $index; - } - } - - @return 0; -} - -@function trim($string) { - @return str-slice($string, _first-index($string, "left"), _first-index($string, "right")); -} diff --git a/src/js/core/modal_dialog_elements.ts b/src/js/core/modal_dialog_elements.ts index 4b2936a9..35e49ef1 100644 --- a/src/js/core/modal_dialog_elements.ts +++ b/src/js/core/modal_dialog_elements.ts @@ -207,7 +207,7 @@ export class Dialog { if (isEnter || isEscape) { // if (this.app.settings.getShowKeyboardShortcuts()) { // Show keybinding - const spacer = document.createElement("code"); + const spacer = document.createElement("kbd"); spacer.classList.add("keybinding"); spacer.innerHTML = getStringForKeyCode(isEnter ? kbEnter : kbCancel); button.appendChild(spacer); diff --git a/src/js/game/hud/parts/building_placer.js b/src/js/game/hud/parts/building_placer.js index 099b249b..4649b976 100644 --- a/src/js/game/hud/parts/building_placer.js +++ b/src/js/game/hud/parts/building_placer.js @@ -1,3 +1,4 @@ +import { makeOffscreenBuffer } from "../../../core/buffer_utils"; import { ClickDetector } from "../../../core/click_detector"; import { globalConfig } from "../../../core/config"; import { DrawParameters } from "../../../core/draw_parameters"; @@ -5,21 +6,20 @@ import { drawRotatedSprite } from "../../../core/draw_utils"; import { Loader } from "../../../core/loader"; import { clamp, makeDiv, removeAllChildren } from "../../../core/utils"; import { + Vector, + enumDirection, enumDirectionToAngle, enumDirectionToVector, enumInvertedDirections, - Vector, - enumDirection, } from "../../../core/vector"; import { T } from "../../../translations"; +import { getCodeFromBuildingData } from "../../building_codes"; import { KEYMAPPINGS } from "../../key_action_mapper"; import { defaultBuildingVariant } from "../../meta_building"; +import { layers } from "../../root"; import { THEME } from "../../theme"; import { DynamicDomAttach } from "../dynamic_dom_attach"; import { HUDBuildingPlacerLogic } from "./building_placer_logic"; -import { makeOffscreenBuffer } from "../../../core/buffer_utils"; -import { layers } from "../../root"; -import { getCodeFromBuildingData } from "../../building_codes"; export class HUDBuildingPlacer extends HUDBuildingPlacerLogic { /** @@ -130,7 +130,7 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic { const binding = this.root.keyMapper.getBinding(rawBinding); this.buildingInfoElements.hotkey.innerHTML = T.ingame.buildingPlacement.hotkeyLabel.replace( "", - "" + binding.getKeyCodeString() + "" + "" + binding.getKeyCodeString() + "" ); } else { this.buildingInfoElements.hotkey.innerHTML = ""; @@ -197,11 +197,11 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic { ["explanation"], T.ingame.buildingPlacement.cycleBuildingVariants.replace( "", - "" + + "" + this.root.keyMapper .getBinding(KEYMAPPINGS.placement.cycleBuildingVariants) .getKeyCodeString() + - "" + "" ) ); diff --git a/src/js/game/hud/parts/keybinding_overlay.js b/src/js/game/hud/parts/keybinding_overlay.js index e381bc4a..20df0f74 100644 --- a/src/js/game/hud/parts/keybinding_overlay.js +++ b/src/js/game/hud/parts/keybinding_overlay.js @@ -290,13 +290,13 @@ export class HUDKeybindingOverlay extends BaseHUDPart { switch (key) { case KEYCODE_LMB: - html += ``; + html += ``; break; case KEYCODE_RMB: - html += ``; + html += ``; break; case KEYCODE_MMB: - html += ``; + html += ``; break; case DIVIDER_TOKEN: html += ``; @@ -305,9 +305,9 @@ export class HUDKeybindingOverlay extends BaseHUDPart { html += `+`; break; default: - html += `${getStringForKeyCode( + html += `${getStringForKeyCode( mapper.getBinding(/** @type {KeyCode} */ (key)).keyCode - )}`; + )}`; } } html += ``; diff --git a/src/js/game/hud/parts/waypoints.js b/src/js/game/hud/parts/waypoints.js index f21c5e1e..c642189c 100644 --- a/src/js/game/hud/parts/waypoints.js +++ b/src/js/game/hud/parts/waypoints.js @@ -54,9 +54,9 @@ export class HUDWaypoints extends BaseHUDPart { ${T.ingame.waypoints.waypoints} ${T.ingame.waypoints.description.replace( "", - `${this.root.keyMapper + `${this.root.keyMapper .getBinding(KEYMAPPINGS.navigation.createMarker) - .getKeyCodeString()}` + .getKeyCodeString()}` )} ` ); diff --git a/src/js/game/key_action_mapper.js b/src/js/game/key_action_mapper.js index 4bb5224f..138f55b4 100644 --- a/src/js/game/key_action_mapper.js +++ b/src/js/game/key_action_mapper.js @@ -386,7 +386,7 @@ export class Keybinding { if (IS_MOBILE) { return null; } - const spacer = document.createElement("code"); + const spacer = document.createElement("kbd"); spacer.classList.add("keybinding"); spacer.innerHTML = getStringForKeyCode(this.keyCode); elem.appendChild(spacer);