diff --git a/src/css/common.scss b/src/css/common.scss index 1ecf419b..b50a4aa0 100644 --- a/src/css/common.scss +++ b/src/css/common.scss @@ -584,7 +584,10 @@ canvas { 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; + 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 IncreasedClickArea(10px); diff --git a/src/css/ingame_hud/blueprint_placer.scss b/src/css/ingame_hud/blueprint_placer.scss index 36d1cdad..4741af00 100644 --- a/src/css/ingame_hud/blueprint_placer.scss +++ b/src/css/ingame_hud/blueprint_placer.scss @@ -1,40 +1,40 @@ -#ingame_HUD_BlueprintPlacer { - position: absolute; - @include S(top, 70px); - left: 50%; - transform: translateX(-50%); - color: #333; - z-index: 9999; - background: $ingameHudBg; - @include S(padding, 5px); - display: flex; - flex-direction: column; - color: #fff; - @include S(width, 120px); - align-items: center; - justify-content: center; - @include S(border-radius, $globalBorderRadius); - - .label { - @include PlainText; - text-transform: uppercase; - } - .costContainer { - display: flex; - align-items: center; - @include Heading; - - > canvas { - @include S(margin-left, 5px); - @include S(width, 30px); - @include S(height, 30px); - } - } - - &:not(.canAfford) { - background: rgba(98, 27, 41, 0.8); - // .costContainer { - color: rgb(255, 97, 128); - // } - } -} +#ingame_HUD_BlueprintPlacer { + position: absolute; + @include S(top, 70px); + left: 50%; + transform: translateX(-50%); + color: #333; + z-index: 9999; + background: $ingameHudBg; + @include S(padding, 5px); + display: flex; + flex-direction: column; + color: #fff; + @include S(width, 120px); + align-items: center; + justify-content: center; + @include S(border-radius, $globalBorderRadius); + + .label { + @include PlainText; + text-transform: uppercase; + } + .costContainer { + display: flex; + align-items: center; + @include Heading; + + > canvas { + @include S(margin-left, 5px); + @include S(width, 30px); + @include S(height, 30px); + } + } + + &:not(.canAfford) { + background: rgba(98, 27, 41, 0.8); + // .costContainer { + color: rgb(255, 97, 128); + // } + } +} diff --git a/src/css/ingame_hud/buildings_toolbar.scss b/src/css/ingame_hud/buildings_toolbar.scss index 4e9028b5..3ebfa03b 100644 --- a/src/css/ingame_hud/buildings_toolbar.scss +++ b/src/css/ingame_hud/buildings_toolbar.scss @@ -1,185 +1,185 @@ -.ingame_buildingsToolbar { - position: absolute; - @include S(bottom, 10px); - left: 50%; - transform: translateX(-50%); - - display: grid; - grid-template-rows: auto auto; - justify-items: center; - @include S(grid-gap, 4px); - - background: transparent; - transition: transform 120ms ease-in-out; - will-change: transform; - - &:not(.visible) { - transform: translateX(-50%) translateY(#{D(100px)}); - } - - .buildings { - display: grid; - grid-auto-flow: column; - justify-items: center; - align-self: center; - grid-gap: D(2px); - grid-row: 2 / 3; - - @include S(border-radius, $globalBorderRadius); - @include S(padding, 2px); - background-color: rgba($ingameHudBg, 0.07); - - @include DarkThemeOverride { - background-color: rgba(darken($darkModeGameBackground, 15), 0.95); - } - - &.secondary { - grid-row: 1 / 2; - - .building { - @include S(width, 30px); - @include S(height, 30px); - background-size: 45%; - - &:not(.unlocked) { - &::before { - background-size: #{D(13px)}; - } - } - } - } - - .building { - display: flex; - @include S(width, 40px); - position: relative; - @include S(height, 40px); - - @at-root html[data-tutorial-step="1_1_extractor"] &[data-id="miner"]:not(.selected), - html[data-tutorial-step="1_2_conveyor"] &[data-id="belt"]:not(.selected), - html[data-tutorial-step="2_1_place_cutter"] &[data-id="cutter"]:not(.selected), - html[data-tutorial-step="2_2_place_trash"] &[data-id="trash"]:not(.selected) { - &::before { - content: ""; - - & { - /* load-async */ - background: uiResource("icons/tutorial_arrow.png") center center / contain no-repeat; - } - - @include S(width, 25px); - @include S(height, 25px); - position: absolute; - left: 50%; - bottom: 100%; - transform: translateX(-50%); - @include InlineAnimation(1s ease-in-out infinite) { - 50% { - transform: translateX(-50%) translateY(20%); - } - } - } - @include S(border-radius, $globalBorderRadius); - box-shadow: 0 0 D(10px) D(5px) rgba(74, 237, 134, 0.5) !important; - background: rgba(74, 237, 134, 0.5) !important; - } - - .icon { - color: $accentColorDark; - display: flex; - flex-direction: column-reverse; - position: relative; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - padding: 0; - margin: 0; - - background: center center / 70% no-repeat; - } - - &:not(.unlocked) { - @include S(width, 25px); - .icon { - opacity: 0.15; - } - &.editor { - .icon { - pointer-events: all; - cursor: pointer; - &:hover { - background-color: rgba(22, 30, 68, 0.1); - } - } - } - &:not(.editor) { - .icon { - background-image: uiResource("locked_building.png") !important; - } - } - } - - &.unlocked { - .icon { - @include S(border-radius, $globalBorderRadius * 0.9); - - pointer-events: all; - transition: all 0.12s ease-in-out; - transition-property: background-color, transform; - cursor: pointer; - - &:hover { - background-color: rgba(30, 40, 90, 0.1); - - @include DarkThemeOverride { - background-color: rgba(255, 255, 255, 0.07); - } - } - - &.pressed { - transform: scale(0.9) !important; - } - } - &.selected { - .icon { - background-color: rgba(lighten($colorBlueBright, 9), 0.4); - } - // transform: scale(1.05); - // @include S(border-radius, $globalBorderRadius); - - .keybinding { - color: #111; - } - } - - .puzzle-lock { - & { - /* @load-async */ - background: uiResource("locked_building.png") center center / 90% no-repeat; - } - - display: grid; - grid-auto-flow: column; - - position: absolute; - @include S(top, -15px); - left: 50%; - transform: translateX(-50%) !important; - transition: all 0.12s ease-in-out; - transition-property: opacity, transform; - - cursor: pointer; - pointer-events: all; - - @include S(width, 12px); - @include S(height, 12px); - - &:hover { - opacity: 0.5; - } - } - } - } - } -} +.ingame_buildingsToolbar { + position: absolute; + @include S(bottom, 10px); + left: 50%; + transform: translateX(-50%); + + display: grid; + grid-template-rows: auto auto; + justify-items: center; + @include S(grid-gap, 4px); + + background: transparent; + transition: transform 120ms ease-in-out; + will-change: transform; + + &:not(.visible) { + transform: translateX(-50%) translateY(#{D(100px)}); + } + + .buildings { + display: grid; + grid-auto-flow: column; + justify-items: center; + align-self: center; + grid-gap: D(2px); + grid-row: 2 / 3; + + @include S(border-radius, $globalBorderRadius); + @include S(padding, 2px); + background-color: rgba($ingameHudBg, 0.07); + + @include DarkThemeOverride { + background-color: rgba(darken($darkModeGameBackground, 15), 0.95); + } + + &.secondary { + grid-row: 1 / 2; + + .building { + @include S(width, 30px); + @include S(height, 30px); + background-size: 45%; + + &:not(.unlocked) { + &::before { + background-size: #{D(13px)}; + } + } + } + } + + .building { + display: flex; + @include S(width, 40px); + position: relative; + @include S(height, 40px); + + @at-root html[data-tutorial-step="1_1_extractor"] &[data-id="miner"]:not(.selected), + html[data-tutorial-step="1_2_conveyor"] &[data-id="belt"]:not(.selected), + html[data-tutorial-step="2_1_place_cutter"] &[data-id="cutter"]:not(.selected), + html[data-tutorial-step="2_2_place_trash"] &[data-id="trash"]:not(.selected) { + &::before { + content: ""; + + & { + /* load-async */ + background: uiResource("icons/tutorial_arrow.png") center center / contain no-repeat; + } + + @include S(width, 25px); + @include S(height, 25px); + position: absolute; + left: 50%; + bottom: 100%; + transform: translateX(-50%); + @include InlineAnimation(1s ease-in-out infinite) { + 50% { + transform: translateX(-50%) translateY(20%); + } + } + } + @include S(border-radius, $globalBorderRadius); + box-shadow: 0 0 D(10px) D(5px) rgba(74, 237, 134, 0.5) !important; + background: rgba(74, 237, 134, 0.5) !important; + } + + .icon { + color: $accentColorDark; + display: flex; + flex-direction: column-reverse; + position: relative; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + + background: center center / 70% no-repeat; + } + + &:not(.unlocked) { + @include S(width, 25px); + .icon { + opacity: 0.15; + } + &.editor { + .icon { + pointer-events: all; + cursor: pointer; + &:hover { + background-color: rgba(22, 30, 68, 0.1); + } + } + } + &:not(.editor) { + .icon { + background-image: uiResource("locked_building.png") !important; + } + } + } + + &.unlocked { + .icon { + @include S(border-radius, $globalBorderRadius * 0.9); + + pointer-events: all; + transition: all 0.12s ease-in-out; + transition-property: background-color, transform; + cursor: pointer; + + &:hover { + background-color: rgba(30, 40, 90, 0.1); + + @include DarkThemeOverride { + background-color: rgba(255, 255, 255, 0.07); + } + } + + &.pressed { + transform: scale(0.9) !important; + } + } + &.selected { + .icon { + background-color: rgba(lighten($colorBlueBright, 9), 0.4); + } + // transform: scale(1.05); + // @include S(border-radius, $globalBorderRadius); + + .keybinding { + color: #111; + } + } + + .puzzle-lock { + & { + /* @load-async */ + background: uiResource("locked_building.png") center center / 90% no-repeat; + } + + display: grid; + grid-auto-flow: column; + + position: absolute; + @include S(top, -15px); + left: 50%; + transform: translateX(-50%) !important; + transition: all 0.12s ease-in-out; + transition-property: opacity, transform; + + cursor: pointer; + pointer-events: all; + + @include S(width, 12px); + @include S(height, 12px); + + &:hover { + opacity: 0.5; + } + } + } + } + } +} diff --git a/src/css/ingame_hud/dialogs.scss b/src/css/ingame_hud/dialogs.scss index 412a1911..0b2e7ae2 100644 --- a/src/css/ingame_hud/dialogs.scss +++ b/src/css/ingame_hud/dialogs.scss @@ -1,307 +1,307 @@ -.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); - - box-shadow: 0 D(5px) D(15px) rgba(#000, 0.1); - pointer-events: all; - - @include DarkThemeOverride { - background: darken($darkModeControlsBackground, 5); - } - - &.optionChooserDialog { - .optionParent { - display: grid; - @include S(grid-gap, 5px); - @include S(padding-right, 5px); - grid-template-columns: 1fr 1fr; - .option { - @include S(border-radius, $globalBorderRadius); - - 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; - } - & { - 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(1s linear) { - 0% { - width: 100%; - } - 100% { - width: 0%; - } - } - } - } - } - } - } -} +.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); + + box-shadow: 0 D(5px) D(15px) rgba(#000, 0.1); + pointer-events: all; + + @include DarkThemeOverride { + background: darken($darkModeControlsBackground, 5); + } + + &.optionChooserDialog { + .optionParent { + display: grid; + @include S(grid-gap, 5px); + @include S(padding-right, 5px); + grid-template-columns: 1fr 1fr; + .option { + @include S(border-radius, $globalBorderRadius); + + 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; + } + & { + 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(1s linear) { + 0% { + width: 100%; + } + 100% { + width: 0%; + } + } + } + } + } + } + } +} diff --git a/src/css/ingame_hud/game_menu.scss b/src/css/ingame_hud/game_menu.scss index c95626f1..7e579c09 100644 --- a/src/css/ingame_hud/game_menu.scss +++ b/src/css/ingame_hud/game_menu.scss @@ -1,141 +1,141 @@ -#ingame_HUD_GameMenu { - position: absolute; - @include S(top, 10px); - @include S(right, 10px); - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - @include S(grid-gap, 6px); - - backdrop-filter: blur(D(1px)); - - > button, - > .button { - @include PlainText; - @include IncreasedClickArea(0px); - background: green; - @include S(width, 30px); - @include S(height, 30px); - - pointer-events: all; - cursor: pointer; - position: relative; - transition: all 0.12s ease-in-out; - transition-property: opacity, transform; - - display: inline-flex; - background: center center / 70% no-repeat; - grid-row: 1; - - &.pressed { - transform: scale(0.9) !important; - } - - opacity: 0.7; - &:hover { - opacity: 0.9 !important; - } - - @include DarkThemeInvert; - - &.shop { - grid-column: 1; - & { - /* @load-async */ - background-image: uiResource("icons/shop.png"); - } - } - - &.stats { - grid-column: 2; - & { - /* @load-async */ - background-image: uiResource("icons/statistics.png"); - } - } - - &.save { - & { - /* @load-async */ - background-image: uiResource("icons/save.png"); - } - grid-column: 3; - @include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) { - 0% { - transform: scale(1, 1); - } - - 70% { - transform: scale(1.5, 1.5) rotate(20deg); - opacity: 0.2; - } - - 85% { - transform: scale(0.9, 0.9); - opacity: 1; - } - - 90% { - transform: scale(1.1, 1.1); - } - } - - &.saving { - @include InlineAnimation(0.4s ease-in-out infinite) { - 50% { - opacity: 0.5; - transform: scale(0.8); - } - } - pointer-events: none; - cursor: default; - } - } - - &.settings { - grid-column: 4; - & { - /* @load-async */ - background-image: uiResource("icons/settings_menu_settings.png"); - } - } - - &:hover { - opacity: 0.9; - transform: translateY(0); - } - - &:not(.hasBadge) .badge { - display: none; - } - - &.hasBadge { - &.shop { - filter: none; - opacity: 0.9; - - & { - /* @load-async */ - background-image: uiResource("icons/shop_active.png"); - } - } - - transform-origin: 50% 50%; - @include InlineAnimation(0.8s ease-in-out infinite) { - 50% { - transform: scale(1.3) rotate(6deg); - } - } - - .badge { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - @include PlainText; - display: flex; - justify-content: center; - align-items: center; - } - } - } -} +#ingame_HUD_GameMenu { + position: absolute; + @include S(top, 10px); + @include S(right, 10px); + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + @include S(grid-gap, 6px); + + backdrop-filter: blur(D(1px)); + + > button, + > .button { + @include PlainText; + @include IncreasedClickArea(0px); + background: green; + @include S(width, 30px); + @include S(height, 30px); + + pointer-events: all; + cursor: pointer; + position: relative; + transition: all 0.12s ease-in-out; + transition-property: opacity, transform; + + display: inline-flex; + background: center center / 70% no-repeat; + grid-row: 1; + + &.pressed { + transform: scale(0.9) !important; + } + + opacity: 0.7; + &:hover { + opacity: 0.9 !important; + } + + @include DarkThemeInvert; + + &.shop { + grid-column: 1; + & { + /* @load-async */ + background-image: uiResource("icons/shop.png"); + } + } + + &.stats { + grid-column: 2; + & { + /* @load-async */ + background-image: uiResource("icons/statistics.png"); + } + } + + &.save { + & { + /* @load-async */ + background-image: uiResource("icons/save.png"); + } + grid-column: 3; + @include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) { + 0% { + transform: scale(1, 1); + } + + 70% { + transform: scale(1.5, 1.5) rotate(20deg); + opacity: 0.2; + } + + 85% { + transform: scale(0.9, 0.9); + opacity: 1; + } + + 90% { + transform: scale(1.1, 1.1); + } + } + + &.saving { + @include InlineAnimation(0.4s ease-in-out infinite) { + 50% { + opacity: 0.5; + transform: scale(0.8); + } + } + pointer-events: none; + cursor: default; + } + } + + &.settings { + grid-column: 4; + & { + /* @load-async */ + background-image: uiResource("icons/settings_menu_settings.png"); + } + } + + &:hover { + opacity: 0.9; + transform: translateY(0); + } + + &:not(.hasBadge) .badge { + display: none; + } + + &.hasBadge { + &.shop { + filter: none; + opacity: 0.9; + + & { + /* @load-async */ + background-image: uiResource("icons/shop_active.png"); + } + } + + transform-origin: 50% 50%; + @include InlineAnimation(0.8s ease-in-out infinite) { + 50% { + transform: scale(1.3) rotate(6deg); + } + } + + .badge { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + @include PlainText; + display: flex; + justify-content: center; + align-items: center; + } + } + } +} diff --git a/src/css/ingame_hud/keybindings_overlay.scss b/src/css/ingame_hud/keybindings_overlay.scss index b44dde4b..278b2d2a 100644 --- a/src/css/ingame_hud/keybindings_overlay.scss +++ b/src/css/ingame_hud/keybindings_overlay.scss @@ -1,76 +1,76 @@ -#ingame_HUD_KeybindingOverlay { - position: absolute; - @include S(top, 10px); - @include S(left, 10px); - - display: flex; - flex-direction: column; - align-items: flex-start; - color: #333438; - backdrop-filter: blur(D(1px)); - padding: D(3px); - - @include DarkThemeOverride { - color: #fff; - } - - transition: opacity 0.1s ease-out; - &.hovered { - opacity: 0.1; - } - - > .binding { - &:not(.visible) { - display: none !important; - } - - display: inline-grid; - @include PlainText; - align-items: center; - @include S(margin-bottom, 3px); - grid-auto-flow: column; - @include S(grid-gap, 2px); - - i { - display: inline-block; - @include S(height, 10px); - width: 1px; - @include S(margin, 0, 3px); - background-color: #fff; - transform: rotate(10deg); - // @include S(margin, 0, 3px); - } - - code { - position: relative; - top: unset; - left: unset; - margin: 0; - &.rightMouse { - /* @load-async */ - background: #fff uiResource("icons/mouse_right.png") center center / 85% no-repeat; - } - - &.leftMouse { - /* @load-async */ - background: #fff uiResource("icons/mouse_left.png") center center / 85% no-repeat; - } - } - - label { - color: #333438; - @include SuperSmallText; - text-transform: uppercase; - // color: #fff; - @include DarkThemeOverride { - color: #fff; - } - - @include S(margin-left, 5px); - } - } -} - -body.uiHidden #ingame_HUD_KeybindingOverlay .binding:not(.hudToggle) { - display: none; -} +#ingame_HUD_KeybindingOverlay { + position: absolute; + @include S(top, 10px); + @include S(left, 10px); + + display: flex; + flex-direction: column; + align-items: flex-start; + color: #333438; + backdrop-filter: blur(D(1px)); + padding: D(3px); + + @include DarkThemeOverride { + color: #fff; + } + + transition: opacity 0.1s ease-out; + &.hovered { + opacity: 0.1; + } + + > .binding { + &:not(.visible) { + display: none !important; + } + + display: inline-grid; + @include PlainText; + align-items: center; + @include S(margin-bottom, 3px); + grid-auto-flow: column; + @include S(grid-gap, 2px); + + i { + display: inline-block; + @include S(height, 10px); + width: 1px; + @include S(margin, 0, 3px); + background-color: #fff; + transform: rotate(10deg); + // @include S(margin, 0, 3px); + } + + code { + position: relative; + top: unset; + left: unset; + margin: 0; + &.rightMouse { + /* @load-async */ + background: #fff uiResource("icons/mouse_right.png") center center / 85% no-repeat; + } + + &.leftMouse { + /* @load-async */ + background: #fff uiResource("icons/mouse_left.png") center center / 85% no-repeat; + } + } + + label { + color: #333438; + @include SuperSmallText; + text-transform: uppercase; + // color: #fff; + @include DarkThemeOverride { + color: #fff; + } + + @include S(margin-left, 5px); + } + } +} + +body.uiHidden #ingame_HUD_KeybindingOverlay .binding:not(.hudToggle) { + display: none; +} diff --git a/src/css/ingame_hud/pinned_shapes.scss b/src/css/ingame_hud/pinned_shapes.scss index c9a39536..0be46f9c 100644 --- a/src/css/ingame_hud/pinned_shapes.scss +++ b/src/css/ingame_hud/pinned_shapes.scss @@ -1,156 +1,156 @@ -#ingame_HUD_PinnedShapes { - position: absolute; - @include S(left, 9px); - @include S(top, 150px); - @include PlainText; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - - > .shape { - position: relative; - display: grid; - align-items: center; - justify-content: center; - grid-template-columns: auto 1fr; - grid-template-rows: 1fr 1fr; - @include S(margin-bottom, 4px); - color: #333438; - - &.removable { - pointer-events: all; - } - - > canvas { - @include S(width, 25px); - @include S(height, 25px); - grid-column: 1 / 2; - grid-row: 1 / 3; - pointer-events: none; - z-index: 20; - position: relative; - } - - > .amountLabel, - > .goalLabel { - @include S(margin-left, 5px); - @include SuperSmallText; - font-weight: bold; - display: inline-flex; - align-items: center; - flex-direction: row; - grid-column: 2 / 3; - @include S(height, 9px); - - @include DarkThemeOverride { - color: #eee; - } - } - - > .goalLabel { - @include S(font-size, 7px); - opacity: 0.9; - align-self: start; - justify-self: start; - font-weight: normal; - grid-row: 2 / 3; - } - - > .amountLabel { - align-self: end; - justify-self: start; - grid-row: 1 / 2; - } - - > .infoButton { - @include S(width, 8px); - @include S(height, 8px); - position: absolute; - opacity: 0.7; - @include S(top, 13px); - @include S(left, -7px); - @include DarkThemeInvert; - @include IncreasedClickArea(2px); - transition: opacity 0.12s ease-in-out; - z-index: 100; - - &:hover { - opacity: 0.8; - } - - & { - /* @load-async */ - background: uiResource("icons/info_button.png") center center / 95% no-repeat; - } - } - - > .unpinButton { - @include S(width, 8px); - @include S(height, 8px); - position: absolute; - opacity: 0.7; - @include S(top, 3px); - @include S(left, -7px); - @include DarkThemeInvert; - @include IncreasedClickArea(2px); - transition: opacity 0.12s ease-in-out; - z-index: 100; - - &:hover { - opacity: 0.8; - } - - & { - /* @load-async */ - background: uiResource("icons/unpin_shape.png") center center / 80% no-repeat; - } - } - - &.goal, - &.blueprint { - .amountLabel::after { - content: " "; - position: absolute; - display: inline-block; - @include S(width, 8px); - @include S(height, 8px); - @include S(top, 4px); - @include S(left, -7px); - background: center center / contain no-repeat; - } - - &.goal .amountLabel { - &::after { - /* @load-async */ - background-image: uiResource("icons/current_goal_marker.png"); - background-size: 90%; - } - @include DarkThemeOverride { - &::after { - /* @load-async */ - background-image: uiResource("icons/current_goal_marker_inverted.png") !important; - } - } - } - - &.blueprint .amountLabel { - &::after { - /* @load-async */ - background-image: uiResource("icons/blueprint_marker.png"); - background-size: 90%; - } - @include DarkThemeOverride { - &::after { - /* @load-async */ - background-image: uiResource("icons/blueprint_marker_inverted.png") !important; - } - } - } - } - - &.completed { - opacity: 0.5; - } - } -} +#ingame_HUD_PinnedShapes { + position: absolute; + @include S(left, 9px); + @include S(top, 150px); + @include PlainText; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + + > .shape { + position: relative; + display: grid; + align-items: center; + justify-content: center; + grid-template-columns: auto 1fr; + grid-template-rows: 1fr 1fr; + @include S(margin-bottom, 4px); + color: #333438; + + &.removable { + pointer-events: all; + } + + > canvas { + @include S(width, 25px); + @include S(height, 25px); + grid-column: 1 / 2; + grid-row: 1 / 3; + pointer-events: none; + z-index: 20; + position: relative; + } + + > .amountLabel, + > .goalLabel { + @include S(margin-left, 5px); + @include SuperSmallText; + font-weight: bold; + display: inline-flex; + align-items: center; + flex-direction: row; + grid-column: 2 / 3; + @include S(height, 9px); + + @include DarkThemeOverride { + color: #eee; + } + } + + > .goalLabel { + @include S(font-size, 7px); + opacity: 0.9; + align-self: start; + justify-self: start; + font-weight: normal; + grid-row: 2 / 3; + } + + > .amountLabel { + align-self: end; + justify-self: start; + grid-row: 1 / 2; + } + + > .infoButton { + @include S(width, 8px); + @include S(height, 8px); + position: absolute; + opacity: 0.7; + @include S(top, 13px); + @include S(left, -7px); + @include DarkThemeInvert; + @include IncreasedClickArea(2px); + transition: opacity 0.12s ease-in-out; + z-index: 100; + + &:hover { + opacity: 0.8; + } + + & { + /* @load-async */ + background: uiResource("icons/info_button.png") center center / 95% no-repeat; + } + } + + > .unpinButton { + @include S(width, 8px); + @include S(height, 8px); + position: absolute; + opacity: 0.7; + @include S(top, 3px); + @include S(left, -7px); + @include DarkThemeInvert; + @include IncreasedClickArea(2px); + transition: opacity 0.12s ease-in-out; + z-index: 100; + + &:hover { + opacity: 0.8; + } + + & { + /* @load-async */ + background: uiResource("icons/unpin_shape.png") center center / 80% no-repeat; + } + } + + &.goal, + &.blueprint { + .amountLabel::after { + content: " "; + position: absolute; + display: inline-block; + @include S(width, 8px); + @include S(height, 8px); + @include S(top, 4px); + @include S(left, -7px); + background: center center / contain no-repeat; + } + + &.goal .amountLabel { + &::after { + /* @load-async */ + background-image: uiResource("icons/current_goal_marker.png"); + background-size: 90%; + } + @include DarkThemeOverride { + &::after { + /* @load-async */ + background-image: uiResource("icons/current_goal_marker_inverted.png") !important; + } + } + } + + &.blueprint .amountLabel { + &::after { + /* @load-async */ + background-image: uiResource("icons/blueprint_marker.png"); + background-size: 90%; + } + @include DarkThemeOverride { + &::after { + /* @load-async */ + background-image: uiResource("icons/blueprint_marker_inverted.png") !important; + } + } + } + } + + &.completed { + opacity: 0.5; + } + } +} diff --git a/src/css/ingame_hud/puzzle_complete_notification.scss b/src/css/ingame_hud/puzzle_complete_notification.scss index a35da83d..d68e902d 100644 --- a/src/css/ingame_hud/puzzle_complete_notification.scss +++ b/src/css/ingame_hud/puzzle_complete_notification.scss @@ -97,7 +97,9 @@ @include S(margin, 0, 10px); box-sizing: border-box; border-radius: 50%; - transition: opacity 0.12s ease-in-out, background-color 0.12s ease-in-out; + transition: + opacity 0.12s ease-in-out, + background-color 0.12s ease-in-out; @include IncreasedClickArea(0px); &.liked-yes { diff --git a/src/css/ingame_hud/puzzle_editor_settings.scss b/src/css/ingame_hud/puzzle_editor_settings.scss index 9d093c42..8dc8d199 100644 --- a/src/css/ingame_hud/puzzle_editor_settings.scss +++ b/src/css/ingame_hud/puzzle_editor_settings.scss @@ -1,71 +1,71 @@ -#ingame_HUD_PuzzleEditorSettings { - position: absolute; - background: $ingameHudBg; - @include S(padding, 10px); - @include S(bottom, 60px); - @include S(left, 10px); - - @include SuperSmallText; - color: #eee; - display: flex; - flex-direction: column; - @include S(border-radius, $globalBorderRadius); - - > .section { - > label { - text-transform: uppercase; - } - - .plusMinus { - @include S(margin-top, 5px); - display: grid; - grid-template-columns: 1fr auto auto auto; - align-items: center; - @include S(grid-gap, 5px); - - label { - @include S(margin-right, 10px); - } - - button { - @include PlainText; - @include S(padding, 0); - display: flex; - align-items: center; - justify-content: center; - @include S(width, 15px); - @include S(height, 15px); - @include IncreasedClickArea(0px); - } - - .value { - text-align: center; - @include S(min-width, 15px); - } - } - - > .buttons { - > .buttonBar { - display: flex; - align-items: center; - @include S(margin-top, 10px); - > button { - @include S(margin-right, 4px); - @include SuperSmallText; - &:last-child { - margin-right: 0; - } - } - } - - > .buildingsButton { - display: grid; - align-items: center; - @include S(margin-top, 4px); - > button { - @include SuperSmallText; - } - } - } - } -} +#ingame_HUD_PuzzleEditorSettings { + position: absolute; + background: $ingameHudBg; + @include S(padding, 10px); + @include S(bottom, 60px); + @include S(left, 10px); + + @include SuperSmallText; + color: #eee; + display: flex; + flex-direction: column; + @include S(border-radius, $globalBorderRadius); + + > .section { + > label { + text-transform: uppercase; + } + + .plusMinus { + @include S(margin-top, 5px); + display: grid; + grid-template-columns: 1fr auto auto auto; + align-items: center; + @include S(grid-gap, 5px); + + label { + @include S(margin-right, 10px); + } + + button { + @include PlainText; + @include S(padding, 0); + display: flex; + align-items: center; + justify-content: center; + @include S(width, 15px); + @include S(height, 15px); + @include IncreasedClickArea(0px); + } + + .value { + text-align: center; + @include S(min-width, 15px); + } + } + + > .buttons { + > .buttonBar { + display: flex; + align-items: center; + @include S(margin-top, 10px); + > button { + @include S(margin-right, 4px); + @include SuperSmallText; + &:last-child { + margin-right: 0; + } + } + } + + > .buildingsButton { + display: grid; + align-items: center; + @include S(margin-top, 4px); + > button { + @include SuperSmallText; + } + } + } + } +} diff --git a/src/css/ingame_hud/sandbox_controller.scss b/src/css/ingame_hud/sandbox_controller.scss index e4680fe4..3b520f0b 100644 --- a/src/css/ingame_hud/sandbox_controller.scss +++ b/src/css/ingame_hud/sandbox_controller.scss @@ -1,50 +1,50 @@ -#ingame_HUD_SandboxController { - position: absolute; - background: $ingameHudBg; - @include S(padding, 5px); - @include S(bottom, 10px); - @include S(left, 10px); - - @include SuperSmallText; - color: #eee; - display: flex; - flex-direction: column; - - > label { - text-transform: uppercase; - } - - .sandboxHint { - color: #aaa; - } - - .plusMinus { - @include S(margin-top, 4px); - display: grid; - grid-template-columns: 1fr auto auto; - align-items: center; - @include S(grid-gap, 4px); - - button { - @include PlainText; - @include S(padding, 0); - display: flex; - align-items: center; - justify-content: center; - @include S(width, 15px); - @include S(height, 15px); - @include IncreasedClickArea(0px); - } - } - - .additionalOptions { - display: flex; - flex-direction: column; - @include S(margin-top, 10px); - button { - @include S(margin-bottom, 2px); - @include IncreasedClickArea(0px); - @include SuperSmallText; - } - } -} +#ingame_HUD_SandboxController { + position: absolute; + background: $ingameHudBg; + @include S(padding, 5px); + @include S(bottom, 10px); + @include S(left, 10px); + + @include SuperSmallText; + color: #eee; + display: flex; + flex-direction: column; + + > label { + text-transform: uppercase; + } + + .sandboxHint { + color: #aaa; + } + + .plusMinus { + @include S(margin-top, 4px); + display: grid; + grid-template-columns: 1fr auto auto; + align-items: center; + @include S(grid-gap, 4px); + + button { + @include PlainText; + @include S(padding, 0); + display: flex; + align-items: center; + justify-content: center; + @include S(width, 15px); + @include S(height, 15px); + @include IncreasedClickArea(0px); + } + } + + .additionalOptions { + display: flex; + flex-direction: column; + @include S(margin-top, 10px); + button { + @include S(margin-bottom, 2px); + @include IncreasedClickArea(0px); + @include SuperSmallText; + } + } +} diff --git a/src/css/ingame_hud/settings_menu.scss b/src/css/ingame_hud/settings_menu.scss index 55d5a9e4..08d61b5c 100644 --- a/src/css/ingame_hud/settings_menu.scss +++ b/src/css/ingame_hud/settings_menu.scss @@ -1,67 +1,67 @@ -#ingame_HUD_SettingsMenu { - .statsElement { - position: absolute; - @include S(left, 30px); - @include S(right, 30px); - @include S(bottom, 30px); - color: #fff; - display: grid; - grid-template-rows: auto auto; - grid-auto-columns: 1fr; - align-items: center; - justify-items: center; - - strong { - text-transform: uppercase; - @include PlainText; - opacity: 0.5; - grid-row: 1; - } - - span { - @include Heading; - grid-row: 2; - } - } - - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - - .buttons { - display: grid; - grid-auto-flow: column; - @include S(grid-gap, 50px); - @include S(margin-top, -10px); - - button { - background: transparent; - filter: invert(1); - - content: ""; - opacity: 0.8; - @include S(width, 35px); - @include S(height, 35px); - - &.settings { - /* @load-async */ - background-image: uiResource("icons/settings_menu_settings.png"); - } - - &.menu { - /* @load-async */ - background-image: uiResource("icons/settings_menu_exit.png"); - } - - &:hover { - opacity: 0.6; - } - - & { - /* @load-async */ - background: uiResource("icons/settings_menu_play.png") center top / contain no-repeat; - } - } - } -} +#ingame_HUD_SettingsMenu { + .statsElement { + position: absolute; + @include S(left, 30px); + @include S(right, 30px); + @include S(bottom, 30px); + color: #fff; + display: grid; + grid-template-rows: auto auto; + grid-auto-columns: 1fr; + align-items: center; + justify-items: center; + + strong { + text-transform: uppercase; + @include PlainText; + opacity: 0.5; + grid-row: 1; + } + + span { + @include Heading; + grid-row: 2; + } + } + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + .buttons { + display: grid; + grid-auto-flow: column; + @include S(grid-gap, 50px); + @include S(margin-top, -10px); + + button { + background: transparent; + filter: invert(1); + + content: ""; + opacity: 0.8; + @include S(width, 35px); + @include S(height, 35px); + + &.settings { + /* @load-async */ + background-image: uiResource("icons/settings_menu_settings.png"); + } + + &.menu { + /* @load-async */ + background-image: uiResource("icons/settings_menu_exit.png"); + } + + &:hover { + opacity: 0.6; + } + + & { + /* @load-async */ + background: uiResource("icons/settings_menu_play.png") center top / contain no-repeat; + } + } + } +} diff --git a/src/css/ingame_hud/shape_viewer.scss b/src/css/ingame_hud/shape_viewer.scss index 2e07f1da..3e2c258a 100644 --- a/src/css/ingame_hud/shape_viewer.scss +++ b/src/css/ingame_hud/shape_viewer.scss @@ -1,155 +1,155 @@ -#ingame_HUD_ShapeViewer { - $dims: 170px; - - .content { - display: flex; - @include S(width, $dims); - width: 100%; - flex-direction: column; - overflow-x: hidden; - - &[data-layers="3"], - &[data-layers="4"] { - @include S(width, 2 * $dims); - .renderArea { - display: grid; - grid-template-columns: 1fr 1fr; - @include S(grid-row-gap, 15px); - } - } - - .renderArea { - display: grid; - width: 100%; - @include S(grid-row-gap, 10px); - align-items: center; - justify-items: center; - } - - .infoArea { - align-self: flex-end; - @include S(margin-top, 10px); - display: flex; - flex-direction: column; - overflow: hidden; - - button { - @include S(margin, 0); - @include PlainText; - } - } - - .layer { - position: relative; - background: #eee; - - @include DarkThemeOverride { - background: rgba(0, 10, 20, 0.2); - } - @include S(width, 150px); - @include S(height, 100px); - display: flex; - align-items: center; - justify-content: center; - @include S(border-radius, $globalBorderRadius); - - > canvas { - @include S(width, 50px); - @include S(height, 50px); - } - - .quad { - position: absolute; - width: 50%; - height: 50%; - display: flex; - justify-content: center; - align-items: center; - box-sizing: border-box; - - $arrowDims: 23px; - $spacing: 9px; - @include S(padding, 6px); - - .colorLabel { - text-transform: uppercase; - @include SuperSmallText; - @include S(font-size, 9px); - } - - .emptyLabel { - text-transform: uppercase; - @include SuperSmallText; - @include S(font-size, 9px); - } - - &::after { - content: " "; - background: rgba(0, 10, 20, 0.5); - @include S(width, $arrowDims); - @include S(height, 1px); - position: absolute; - transform: rotate(45deg); - transform-origin: 50% 50%; - } - @include DarkThemeOverride { - &::after { - background: rgba(255, 255, 255, 0.5); - } - } - - &.quad-0 { - right: 0; - top: 0; - align-items: flex-start; - justify-content: flex-end; - - &::after { - @include S(left, $spacing); - @include S(bottom, $arrowDims / 2 + $spacing); - transform: rotate(-45deg); - } - } - &.quad-1 { - bottom: 0; - right: 0; - - align-items: flex-end; - justify-content: flex-end; - - &::after { - @include S(left, $spacing); - @include S(top, $arrowDims / 2 + $spacing); - transform: rotate(45deg); - } - } - &.quad-2 { - bottom: 0; - left: 0; - - align-items: flex-end; - justify-content: flex-start; - - &::after { - @include S(right, $spacing); - @include S(top, $arrowDims / 2 + $spacing); - transform: rotate(135deg); - } - } - &.quad-3 { - top: 0; - left: 0; - - align-items: flex-start; - justify-content: flex-start; - - &::after { - @include S(right, $spacing); - @include S(bottom, $arrowDims / 2 + $spacing); - transform: rotate(225deg); - } - } - } - } - } -} +#ingame_HUD_ShapeViewer { + $dims: 170px; + + .content { + display: flex; + @include S(width, $dims); + width: 100%; + flex-direction: column; + overflow-x: hidden; + + &[data-layers="3"], + &[data-layers="4"] { + @include S(width, 2 * $dims); + .renderArea { + display: grid; + grid-template-columns: 1fr 1fr; + @include S(grid-row-gap, 15px); + } + } + + .renderArea { + display: grid; + width: 100%; + @include S(grid-row-gap, 10px); + align-items: center; + justify-items: center; + } + + .infoArea { + align-self: flex-end; + @include S(margin-top, 10px); + display: flex; + flex-direction: column; + overflow: hidden; + + button { + @include S(margin, 0); + @include PlainText; + } + } + + .layer { + position: relative; + background: #eee; + + @include DarkThemeOverride { + background: rgba(0, 10, 20, 0.2); + } + @include S(width, 150px); + @include S(height, 100px); + display: flex; + align-items: center; + justify-content: center; + @include S(border-radius, $globalBorderRadius); + + > canvas { + @include S(width, 50px); + @include S(height, 50px); + } + + .quad { + position: absolute; + width: 50%; + height: 50%; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + + $arrowDims: 23px; + $spacing: 9px; + @include S(padding, 6px); + + .colorLabel { + text-transform: uppercase; + @include SuperSmallText; + @include S(font-size, 9px); + } + + .emptyLabel { + text-transform: uppercase; + @include SuperSmallText; + @include S(font-size, 9px); + } + + &::after { + content: " "; + background: rgba(0, 10, 20, 0.5); + @include S(width, $arrowDims); + @include S(height, 1px); + position: absolute; + transform: rotate(45deg); + transform-origin: 50% 50%; + } + @include DarkThemeOverride { + &::after { + background: rgba(255, 255, 255, 0.5); + } + } + + &.quad-0 { + right: 0; + top: 0; + align-items: flex-start; + justify-content: flex-end; + + &::after { + @include S(left, $spacing); + @include S(bottom, $arrowDims / 2 + $spacing); + transform: rotate(-45deg); + } + } + &.quad-1 { + bottom: 0; + right: 0; + + align-items: flex-end; + justify-content: flex-end; + + &::after { + @include S(left, $spacing); + @include S(top, $arrowDims / 2 + $spacing); + transform: rotate(45deg); + } + } + &.quad-2 { + bottom: 0; + left: 0; + + align-items: flex-end; + justify-content: flex-start; + + &::after { + @include S(right, $spacing); + @include S(top, $arrowDims / 2 + $spacing); + transform: rotate(135deg); + } + } + &.quad-3 { + top: 0; + left: 0; + + align-items: flex-start; + justify-content: flex-start; + + &::after { + @include S(right, $spacing); + @include S(bottom, $arrowDims / 2 + $spacing); + transform: rotate(225deg); + } + } + } + } + } +} diff --git a/src/css/ingame_hud/shop.scss b/src/css/ingame_hud/shop.scss index a9b27ebe..7152dc71 100644 --- a/src/css/ingame_hud/shop.scss +++ b/src/css/ingame_hud/shop.scss @@ -1,335 +1,335 @@ -#ingame_HUD_Shop { - .content { - @include S(padding-right, 10px); - display: flex; - flex-direction: column; - @include S(width, 500px); - - .upgrade { - display: grid; - grid-template-columns: auto 1fr auto; - background: #eee; - @include S(border-radius, $globalBorderRadius); - @include S(margin-bottom, 4px); - @include S(padding, 5px, 10px); - @include S(grid-row-gap, 1px); - @include S(height, 85px); - grid-template-rows: #{D(20px)} auto; - - &:last-child { - margin-bottom: 0; - } - - @include DarkThemeOverride { - background: $darkModeControlsBackground; - } - - .title { - grid-column: 1 / 3; - grid-row: 1 / 2; - @include PlainText; - display: flex; - align-items: center; - flex-direction: row-reverse; - justify-content: flex-end; - - @include DarkThemeOverride { - color: #fff; - } - - .tier { - @include S(margin-right, 9px); - background: $colorGreenBright; - @include S(border-radius, $globalBorderRadius); - text-transform: uppercase; - @include PlainText; - color: #fff; - text-align: center; - font-weight: bold; - @include S(min-width, 50px); - @include S(padding, 0px, 5px); - - &[data-tier="0"] { - background-color: rgb(73, 186, 190); - } - &[data-tier="1"] { - background-color: rgb(88, 110, 207); - } - &[data-tier="2"] { - background-color: rgb(189, 100, 192); - } - &[data-tier="3"] { - background-color: rgb(117, 192, 98); - } - &[data-tier="4"] { - background-color: rgb(243, 77, 48); - } - &[data-tier="5"] { - background-color: rgb(255, 209, 6); - } - &[data-tier="6"] { - background-color: rgb(44, 41, 46); - } - } - } - - .icon { - @include S(width, 40px); - @include S(height, 40px); - background: center center / 80% no-repeat; - align-self: center; - justify-self: center; - grid-column: 1 / 2; - grid-row: 2 / 4; - @include S(margin-right, 30px); - @include S(margin-left, 10px); - opacity: 0.32; - display: none; - } - - .description { - grid-column: 2 / 4; - grid-row: 1 / 2; - @include PlainText; - color: #aaa; - align-self: start; - justify-self: end; - } - - .requirements { - grid-column: 2 / 3; - grid-row: 3 / 4; - display: grid; - grid-auto-flow: column; - @include S(grid-gap, 9px); - justify-content: start; - - .requirement { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - @include S(width, 70px); - overflow: hidden; - - button.pin { - & { - /* @load-async */ - background: uiResource("icons/pin.png") center center / 95% no-repeat; - } - - @include S(width, 12px); - @include S(height, 12px); - position: absolute; - @include S(top, 2px); - @include S(right, 2px); - opacity: 0.6; - cursor: pointer; - pointer-events: all; - @include IncreasedClickArea(5px); - transition: opacity 0.12s ease-in-out; - - @include DarkThemeInvert; - - $disabledOpacity: 0.6; - $enabledOpacity: 0.6; - - &:hover { - opacity: $enabledOpacity + 0.1; - } - - &.alreadyPinned { - opacity: $disabledOpacity !important; - - &:hover { - opacity: $disabledOpacity + 0.1 !important; - } - } - - &.isGoal { - /* @load-async */ - background: uiResource("icons/current_goal_marker.png") center center / 95% - no-repeat; - opacity: $disabledOpacity !important; - cursor: default; - pointer-events: none; - } - - &.pinned { - opacity: $disabledOpacity; - - & { - /* @load-async */ - background: uiResource("icons/unpin_shape.png") center center / 75% no-repeat !important; - } - - @include InlineAnimation(0.3s ease-in-out) { - 0% { - opacity: 1; - transform: scale(0.8); - } - - 30% { - opacity: 1; - transform: scale(1.2); - } - - 100% { - transform: scale(1); - } - } - &:hover { - opacity: $disabledOpacity + 0.1; - } - } - - &.unpinned { - opacity: $enabledOpacity; - @include InlineAnimation(0.3s ease-in-out) { - 0% { - opacity: 1; - transform: scale(0.8); - } - - 30% { - opacity: 1; - transform: scale(1.2); - } - - 100% { - transform: scale(1); - } - } - &:hover { - opacity: $enabledOpacity + 0.1; - } - } - } - - button.showInfo { - @include S(width, 11px); - @include S(height, 11px); - position: absolute; - @include S(top, 17px); - @include S(right, 2.5px); - opacity: 0.5; - cursor: pointer; - pointer-events: all; - @include IncreasedClickArea(5px); - transition: opacity 0.12s ease-in-out; - @include DarkThemeInvert; - - &:hover { - opacity: 0.6; - } - } - button.showInfo { - /* @load-async */ - background: uiResource("icons/info_button.png") center center / 95% no-repeat; - } - - canvas { - @include S(width, 40px); - @include S(height, 40px); - } - - .amount { - @include S(margin-top, 4px); - z-index: 10; - @include SuperSmallText; - letter-spacing: 0; - background: #e2e4e6; - - @include S(line-height, 13px); - @include S(border-radius, $globalBorderRadius); - @include S(padding, 1px, 0px, 2px); - position: relative; - text-align: center; - @include S(min-width, 50px); - // @include S(max-width, 100px); - overflow: hidden; - width: 100%; - - @include DarkThemeOverride { - background: #333438; - color: #fff; - } - - .progressBar { - bottom: 0; - left: 0; - right: 0; - top: 0; - @include S(border-radius, $globalBorderRadius); - position: absolute; - display: inline-block; - z-index: -1; - transition: all 0.2s ease-in-out; - transition-property: width, background-color; - background: #bdbfca; - - @include DarkThemeOverride { - background: #8c8d96; - } - - &.complete { - background-color: $colorGreenBright; - - @include DarkThemeOverride { - background-color: $colorGreenBright; - } - } - } - } - } - } - - button.buy { - grid-column: 3 / 4; - grid-row: 3 / 4; - align-self: center; - justify-self: end; - // @include S(padding, 4px, 5px); - // @include PlainText; - background-color: $colorGreenBright; - color: #fff; - - transition: all 0.2s ease-in-out; - transition-property: background-color, opacity; - - &:not(.buyable) { - background-color: #aaa; - cursor: default; - pointer-events: none; - opacity: 0.3; - } - - &.buyable { - @include InlineAnimation(1s ease-in-out infinite) { - 0% { - } - - 50% { - background-color: lighten($colorGreenBright, 10); - transform: scale(1.02); - } - 100% { - } - } - } - } - - &.maxLevel { - button.buy { - opacity: 0 !important; - } - .requirements { - display: none; - } - .description { - color: $colorGreenBright; - } - } - } - } -} +#ingame_HUD_Shop { + .content { + @include S(padding-right, 10px); + display: flex; + flex-direction: column; + @include S(width, 500px); + + .upgrade { + display: grid; + grid-template-columns: auto 1fr auto; + background: #eee; + @include S(border-radius, $globalBorderRadius); + @include S(margin-bottom, 4px); + @include S(padding, 5px, 10px); + @include S(grid-row-gap, 1px); + @include S(height, 85px); + grid-template-rows: #{D(20px)} auto; + + &:last-child { + margin-bottom: 0; + } + + @include DarkThemeOverride { + background: $darkModeControlsBackground; + } + + .title { + grid-column: 1 / 3; + grid-row: 1 / 2; + @include PlainText; + display: flex; + align-items: center; + flex-direction: row-reverse; + justify-content: flex-end; + + @include DarkThemeOverride { + color: #fff; + } + + .tier { + @include S(margin-right, 9px); + background: $colorGreenBright; + @include S(border-radius, $globalBorderRadius); + text-transform: uppercase; + @include PlainText; + color: #fff; + text-align: center; + font-weight: bold; + @include S(min-width, 50px); + @include S(padding, 0px, 5px); + + &[data-tier="0"] { + background-color: rgb(73, 186, 190); + } + &[data-tier="1"] { + background-color: rgb(88, 110, 207); + } + &[data-tier="2"] { + background-color: rgb(189, 100, 192); + } + &[data-tier="3"] { + background-color: rgb(117, 192, 98); + } + &[data-tier="4"] { + background-color: rgb(243, 77, 48); + } + &[data-tier="5"] { + background-color: rgb(255, 209, 6); + } + &[data-tier="6"] { + background-color: rgb(44, 41, 46); + } + } + } + + .icon { + @include S(width, 40px); + @include S(height, 40px); + background: center center / 80% no-repeat; + align-self: center; + justify-self: center; + grid-column: 1 / 2; + grid-row: 2 / 4; + @include S(margin-right, 30px); + @include S(margin-left, 10px); + opacity: 0.32; + display: none; + } + + .description { + grid-column: 2 / 4; + grid-row: 1 / 2; + @include PlainText; + color: #aaa; + align-self: start; + justify-self: end; + } + + .requirements { + grid-column: 2 / 3; + grid-row: 3 / 4; + display: grid; + grid-auto-flow: column; + @include S(grid-gap, 9px); + justify-content: start; + + .requirement { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + @include S(width, 70px); + overflow: hidden; + + button.pin { + & { + /* @load-async */ + background: uiResource("icons/pin.png") center center / 95% no-repeat; + } + + @include S(width, 12px); + @include S(height, 12px); + position: absolute; + @include S(top, 2px); + @include S(right, 2px); + opacity: 0.6; + cursor: pointer; + pointer-events: all; + @include IncreasedClickArea(5px); + transition: opacity 0.12s ease-in-out; + + @include DarkThemeInvert; + + $disabledOpacity: 0.6; + $enabledOpacity: 0.6; + + &:hover { + opacity: $enabledOpacity + 0.1; + } + + &.alreadyPinned { + opacity: $disabledOpacity !important; + + &:hover { + opacity: $disabledOpacity + 0.1 !important; + } + } + + &.isGoal { + /* @load-async */ + background: uiResource("icons/current_goal_marker.png") center center / 95% + no-repeat; + opacity: $disabledOpacity !important; + cursor: default; + pointer-events: none; + } + + &.pinned { + opacity: $disabledOpacity; + + & { + /* @load-async */ + background: uiResource("icons/unpin_shape.png") center center / 75% no-repeat !important; + } + + @include InlineAnimation(0.3s ease-in-out) { + 0% { + opacity: 1; + transform: scale(0.8); + } + + 30% { + opacity: 1; + transform: scale(1.2); + } + + 100% { + transform: scale(1); + } + } + &:hover { + opacity: $disabledOpacity + 0.1; + } + } + + &.unpinned { + opacity: $enabledOpacity; + @include InlineAnimation(0.3s ease-in-out) { + 0% { + opacity: 1; + transform: scale(0.8); + } + + 30% { + opacity: 1; + transform: scale(1.2); + } + + 100% { + transform: scale(1); + } + } + &:hover { + opacity: $enabledOpacity + 0.1; + } + } + } + + button.showInfo { + @include S(width, 11px); + @include S(height, 11px); + position: absolute; + @include S(top, 17px); + @include S(right, 2.5px); + opacity: 0.5; + cursor: pointer; + pointer-events: all; + @include IncreasedClickArea(5px); + transition: opacity 0.12s ease-in-out; + @include DarkThemeInvert; + + &:hover { + opacity: 0.6; + } + } + button.showInfo { + /* @load-async */ + background: uiResource("icons/info_button.png") center center / 95% no-repeat; + } + + canvas { + @include S(width, 40px); + @include S(height, 40px); + } + + .amount { + @include S(margin-top, 4px); + z-index: 10; + @include SuperSmallText; + letter-spacing: 0; + background: #e2e4e6; + + @include S(line-height, 13px); + @include S(border-radius, $globalBorderRadius); + @include S(padding, 1px, 0px, 2px); + position: relative; + text-align: center; + @include S(min-width, 50px); + // @include S(max-width, 100px); + overflow: hidden; + width: 100%; + + @include DarkThemeOverride { + background: #333438; + color: #fff; + } + + .progressBar { + bottom: 0; + left: 0; + right: 0; + top: 0; + @include S(border-radius, $globalBorderRadius); + position: absolute; + display: inline-block; + z-index: -1; + transition: all 0.2s ease-in-out; + transition-property: width, background-color; + background: #bdbfca; + + @include DarkThemeOverride { + background: #8c8d96; + } + + &.complete { + background-color: $colorGreenBright; + + @include DarkThemeOverride { + background-color: $colorGreenBright; + } + } + } + } + } + } + + button.buy { + grid-column: 3 / 4; + grid-row: 3 / 4; + align-self: center; + justify-self: end; + // @include S(padding, 4px, 5px); + // @include PlainText; + background-color: $colorGreenBright; + color: #fff; + + transition: all 0.2s ease-in-out; + transition-property: background-color, opacity; + + &:not(.buyable) { + background-color: #aaa; + cursor: default; + pointer-events: none; + opacity: 0.3; + } + + &.buyable { + @include InlineAnimation(1s ease-in-out infinite) { + 0% { + } + + 50% { + background-color: lighten($colorGreenBright, 10); + transform: scale(1.02); + } + 100% { + } + } + } + } + + &.maxLevel { + button.buy { + opacity: 0 !important; + } + .requirements { + display: none; + } + .description { + color: $colorGreenBright; + } + } + } + } +} diff --git a/src/css/ingame_hud/tutorial_hints.scss b/src/css/ingame_hud/tutorial_hints.scss index 27d85fe1..dd6a4d79 100644 --- a/src/css/ingame_hud/tutorial_hints.scss +++ b/src/css/ingame_hud/tutorial_hints.scss @@ -1,120 +1,120 @@ -#ingame_HUD_TutorialHints { - position: absolute; - @include S(left, 10px); - @include S(bottom, 10px); - - @include StyleBelowWidth(1430px) { - @include S(bottom, 50px); - } - - display: flex; - flex-direction: column; - background: rgba(50, 60, 70, 0); - - transition: all 0.2s ease-in-out; - pointer-events: all; - - transition-property: background-color, transform, bottom, left; - - @include S(padding, 5px); - video { - transition: all 0.2s ease-in-out; - transition-property: opacity, width; - @include S(width, 0px); - opacity: 0; - z-index: 10; - position: relative; - } - - .header { - color: #333438; - display: grid; - align-items: center; - @include S(grid-gap, 2px); - grid-template-columns: 1fr; - @include S(margin-bottom, 3px); - z-index: 11; - position: relative; - - > span { - @include DarkThemeInvert; - - display: flex; - @include SuperSmallText; - justify-content: flex-start; - align-items: center; - &::before { - @include S(margin-right, 4px); - content: " "; - @include S(width, 12px); - @include S(height, 12px); - display: inline-block; - & { - /* @load-async */ - background: uiResource("icons/help.png") center center / 95% no-repeat; - } - } - } - - button.toggleHint { - @include PlainText; - @include IncreasedClickArea(0px); - } - } - - button.toggleHint { - .hide { - display: none; - } - } - - &.enlarged { - background: $ingameHudBg; - left: 50%; - bottom: 50%; - transform: translate(-50%, 50%); - - &::before { - pointer-events: all; - content: " "; - position: fixed; - top: -1000px; - left: -1000px; - right: -1000px; - bottom: -1000px; - z-index: 0; - - background: rgba($ingameHudBg, 0.3); - } - - .header { - grid-template-columns: 1fr auto; - > span { - display: none; - } - button.toggleHint { - grid-column: 2 / 3; - } - } - - video { - @include InlineAnimation(0.2s ease-in-out) { - 0% { - opacity: 0; - @include S(width, 0px); - } - } - - opacity: 1; - @include S(width, 500px); - } - button.toggleHint { - .hide { - display: block; - } - .show { - display: none; - } - } - } -} +#ingame_HUD_TutorialHints { + position: absolute; + @include S(left, 10px); + @include S(bottom, 10px); + + @include StyleBelowWidth(1430px) { + @include S(bottom, 50px); + } + + display: flex; + flex-direction: column; + background: rgba(50, 60, 70, 0); + + transition: all 0.2s ease-in-out; + pointer-events: all; + + transition-property: background-color, transform, bottom, left; + + @include S(padding, 5px); + video { + transition: all 0.2s ease-in-out; + transition-property: opacity, width; + @include S(width, 0px); + opacity: 0; + z-index: 10; + position: relative; + } + + .header { + color: #333438; + display: grid; + align-items: center; + @include S(grid-gap, 2px); + grid-template-columns: 1fr; + @include S(margin-bottom, 3px); + z-index: 11; + position: relative; + + > span { + @include DarkThemeInvert; + + display: flex; + @include SuperSmallText; + justify-content: flex-start; + align-items: center; + &::before { + @include S(margin-right, 4px); + content: " "; + @include S(width, 12px); + @include S(height, 12px); + display: inline-block; + & { + /* @load-async */ + background: uiResource("icons/help.png") center center / 95% no-repeat; + } + } + } + + button.toggleHint { + @include PlainText; + @include IncreasedClickArea(0px); + } + } + + button.toggleHint { + .hide { + display: none; + } + } + + &.enlarged { + background: $ingameHudBg; + left: 50%; + bottom: 50%; + transform: translate(-50%, 50%); + + &::before { + pointer-events: all; + content: " "; + position: fixed; + top: -1000px; + left: -1000px; + right: -1000px; + bottom: -1000px; + z-index: 0; + + background: rgba($ingameHudBg, 0.3); + } + + .header { + grid-template-columns: 1fr auto; + > span { + display: none; + } + button.toggleHint { + grid-column: 2 / 3; + } + } + + video { + @include InlineAnimation(0.2s ease-in-out) { + 0% { + opacity: 0; + @include S(width, 0px); + } + } + + opacity: 1; + @include S(width, 500px); + } + button.toggleHint { + .hide { + display: block; + } + .show { + display: none; + } + } + } +} diff --git a/src/css/ingame_hud/unlock_notification.scss b/src/css/ingame_hud/unlock_notification.scss index eeac3588..feea31da 100644 --- a/src/css/ingame_hud/unlock_notification.scss +++ b/src/css/ingame_hud/unlock_notification.scss @@ -1,184 +1,184 @@ -#ingame_HUD_UnlockNotification { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - overflow: auto; - pointer-events: all; - - & { - /* @load-async */ - background: rgba(#333538, 0.98) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat; - } - - @include InlineAnimation(0.1s ease-in-out) { - 0% { - opacity: 0; - } - } - - &.withinDemo { - > .dialog { - @include S(padding-top, 60px); - } - } - - .dialog { - // background: rgba(#222428, 0.5); - @include S(border-radius, $globalBorderRadius); - @include S(padding, 30px); - - @include InlineAnimation(0.5s ease-in-out) { - 0% { - opacity: 0; - } - } - display: flex; - align-items: center; - flex-direction: column; - - color: #fff; - text-align: center; - .title, - .subTitle { - @include SuperHeading; - text-transform: uppercase; - @include S(font-size, 40px); - - @include InlineAnimation(0.5s ease-in-out) { - 0% { - transform: translateY(-50vh); - } - 50% { - transform: translateY(5vh); - } - 75% { - transform: translateY(-2vh); - } - } - } - - .subTitle { - @include PlainText; - display: inline-block; - @include S(margin, 5px, 0, 20px); - color: $colorGreenBright; - - @include S(border-radius, $globalBorderRadius); - @include InlineAnimation(0.5s ease-in-out) { - 0% { - transform: translateY(-60vh); - } - 50% { - transform: translateY(6vh); - } - 75% { - transform: translateY(-3vh); - } - } - } - - .contents { - @include S(width, 400px); - @include InlineAnimation(0.5s ease-in-out) { - 0% { - transform: translateX(-100vw); - } - 50% { - transform: translateX(5vw); - } - - 75% { - transform: translateX(-2vw); - } - } - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - @include S(grid-gap, 10px); - - .rewardName { - grid-column: 1 / 3; - display: none; - @include InlineAnimation(0.5s ease-in-out) { - 0% { - transform: translateX(200vw); - } - 50% { - transform: translateX(-10vw); - } - - 75% { - transform: translateX(4vw); - } - } - } - - .rewardDesc { - grid-column: 1 / 3; - @include PlainText; - @include S(margin-bottom, 15px); - color: #aaacaf; - @include S(width, 400px); - text-align: left; - strong { - color: #fff; - } - } - - .images { - display: flex; - .buildingExplanation { - @include S(width, 200px); - @include S(height, 200px); - display: inline-block; - background-position: center center; - background-size: cover; - background-repeat: no-repeat; - @include S(border-radius, $globalBorderRadius); - box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15); - } - } - } - - button.close { - border: 0; - position: relative; - @include S(margin-top, 30px); - - &:not(.unlocked) { - pointer-events: none; - opacity: 0.8; - cursor: default; - } - - &.unlocked { - &::after { - animation: none !important; - } - } - - &::after { - content: " "; - display: inline-block; - position: absolute; - top: 0; - left: 100%; - right: 0; - bottom: 0; - background: rgba(0, 10, 20, 0.8); - - @include InlineAnimation(1.5s linear) { - 0% { - left: 0; - } - 100% { - left: 100%; - } - } - } - } - } -} +#ingame_HUD_UnlockNotification { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: auto; + pointer-events: all; + + & { + /* @load-async */ + background: rgba(#333538, 0.98) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat; + } + + @include InlineAnimation(0.1s ease-in-out) { + 0% { + opacity: 0; + } + } + + &.withinDemo { + > .dialog { + @include S(padding-top, 60px); + } + } + + .dialog { + // background: rgba(#222428, 0.5); + @include S(border-radius, $globalBorderRadius); + @include S(padding, 30px); + + @include InlineAnimation(0.5s ease-in-out) { + 0% { + opacity: 0; + } + } + display: flex; + align-items: center; + flex-direction: column; + + color: #fff; + text-align: center; + .title, + .subTitle { + @include SuperHeading; + text-transform: uppercase; + @include S(font-size, 40px); + + @include InlineAnimation(0.5s ease-in-out) { + 0% { + transform: translateY(-50vh); + } + 50% { + transform: translateY(5vh); + } + 75% { + transform: translateY(-2vh); + } + } + } + + .subTitle { + @include PlainText; + display: inline-block; + @include S(margin, 5px, 0, 20px); + color: $colorGreenBright; + + @include S(border-radius, $globalBorderRadius); + @include InlineAnimation(0.5s ease-in-out) { + 0% { + transform: translateY(-60vh); + } + 50% { + transform: translateY(6vh); + } + 75% { + transform: translateY(-3vh); + } + } + } + + .contents { + @include S(width, 400px); + @include InlineAnimation(0.5s ease-in-out) { + 0% { + transform: translateX(-100vw); + } + 50% { + transform: translateX(5vw); + } + + 75% { + transform: translateX(-2vw); + } + } + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + @include S(grid-gap, 10px); + + .rewardName { + grid-column: 1 / 3; + display: none; + @include InlineAnimation(0.5s ease-in-out) { + 0% { + transform: translateX(200vw); + } + 50% { + transform: translateX(-10vw); + } + + 75% { + transform: translateX(4vw); + } + } + } + + .rewardDesc { + grid-column: 1 / 3; + @include PlainText; + @include S(margin-bottom, 15px); + color: #aaacaf; + @include S(width, 400px); + text-align: left; + strong { + color: #fff; + } + } + + .images { + display: flex; + .buildingExplanation { + @include S(width, 200px); + @include S(height, 200px); + display: inline-block; + background-position: center center; + background-size: cover; + background-repeat: no-repeat; + @include S(border-radius, $globalBorderRadius); + box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15); + } + } + } + + button.close { + border: 0; + position: relative; + @include S(margin-top, 30px); + + &:not(.unlocked) { + pointer-events: none; + opacity: 0.8; + cursor: default; + } + + &.unlocked { + &::after { + animation: none !important; + } + } + + &::after { + content: " "; + display: inline-block; + position: absolute; + top: 0; + left: 100%; + right: 0; + bottom: 0; + background: rgba(0, 10, 20, 0.8); + + @include InlineAnimation(1.5s linear) { + 0% { + left: 0; + } + 100% { + left: 100%; + } + } + } + } + } +} diff --git a/src/css/ingame_hud/waypoints.scss b/src/css/ingame_hud/waypoints.scss index f7566ee5..6b37042a 100644 --- a/src/css/ingame_hud/waypoints.scss +++ b/src/css/ingame_hud/waypoints.scss @@ -1,122 +1,122 @@ -#ingame_HUD_Waypoints_Hint { - position: absolute; - @include S(right, 10px); - @include S(bottom, 10px); - - display: flex; - flex-direction: column; - - @include PlainText; - @include S(width, 150px); - background: $ingameHudBg; - @include S(padding, 7px); - - color: #eee; - @include S(border-radius, $globalBorderRadius); - - .desc { - @include SuperSmallText; - color: #babcbf; - .keybinding { - position: relative; - } - - strong { - color: #fff; - } - } -} - -#ingame_HUD_Waypoints { - position: absolute; - @include S(right, 10px); - @include S(top, 45px); - display: flex; - flex-direction: column; - @include DarkThemeInvert(); - - max-height: 50vh; - overflow-x: hidden; - overflow-y: auto; - pointer-events: all; - @include S(padding-right, 5px); - @include S(padding-bottom, 5px); - @include S(padding-top, 5px); - - // Scrollbar - &::-webkit-scrollbar { - @include S(width, 2px); - @include S(height, 6px); - } - - .waypoint { - @include SuperSmallText; - pointer-events: all; - cursor: pointer; - color: #333438; - @include S(padding-left, 11px); - display: grid; - grid-template-columns: 1fr auto; - align-items: center; - & { - /* @load-async */ - background: uiResource("icons/waypoint.png") left 50% / #{D(8px)} no-repeat; - } - - &.layer--wires { - /* @load-async */ - background-image: uiResource("icons/waypoint_wires.png"); - } - - opacity: 0.7; - @include S(margin-bottom, 1px); - font-weight: bold; - - &:hover { - opacity: 0.8; - } - - .editButton { - @include S(width, 10px); - @include S(height, 10px); - @include S(margin-left, 4px); - & { - /* @load-async */ - background: uiResource("icons/edit_key.png") center center / 70% no-repeat; - } - pointer-events: all; - cursor: pointer; - position: relative; - @include IncreasedClickArea(2px); - transition: transform 0.04s ease-in-out; - - &:hover { - transform: scale(1.5); - } - } - - &.hub { - // Transform because there is a canvas before - @include S(margin-left, -2px); - - grid-template-columns: auto 1fr; - background: none !important; - @include S(padding-left, 0); - canvas { - @include S(width, 12px); - @include S(height, 12px); - @include S(margin-right, 1px); - } - } - - &.shapeIcon { - canvas { - @include S(width, 15px); - @include S(height, 15px); - pointer-events: none; - // Double invert, to make sure it has the right color - @include DarkThemeInvert(); - } - } - } -} +#ingame_HUD_Waypoints_Hint { + position: absolute; + @include S(right, 10px); + @include S(bottom, 10px); + + display: flex; + flex-direction: column; + + @include PlainText; + @include S(width, 150px); + background: $ingameHudBg; + @include S(padding, 7px); + + color: #eee; + @include S(border-radius, $globalBorderRadius); + + .desc { + @include SuperSmallText; + color: #babcbf; + .keybinding { + position: relative; + } + + strong { + color: #fff; + } + } +} + +#ingame_HUD_Waypoints { + position: absolute; + @include S(right, 10px); + @include S(top, 45px); + display: flex; + flex-direction: column; + @include DarkThemeInvert(); + + max-height: 50vh; + overflow-x: hidden; + overflow-y: auto; + pointer-events: all; + @include S(padding-right, 5px); + @include S(padding-bottom, 5px); + @include S(padding-top, 5px); + + // Scrollbar + &::-webkit-scrollbar { + @include S(width, 2px); + @include S(height, 6px); + } + + .waypoint { + @include SuperSmallText; + pointer-events: all; + cursor: pointer; + color: #333438; + @include S(padding-left, 11px); + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + & { + /* @load-async */ + background: uiResource("icons/waypoint.png") left 50% / #{D(8px)} no-repeat; + } + + &.layer--wires { + /* @load-async */ + background-image: uiResource("icons/waypoint_wires.png"); + } + + opacity: 0.7; + @include S(margin-bottom, 1px); + font-weight: bold; + + &:hover { + opacity: 0.8; + } + + .editButton { + @include S(width, 10px); + @include S(height, 10px); + @include S(margin-left, 4px); + & { + /* @load-async */ + background: uiResource("icons/edit_key.png") center center / 70% no-repeat; + } + pointer-events: all; + cursor: pointer; + position: relative; + @include IncreasedClickArea(2px); + transition: transform 0.04s ease-in-out; + + &:hover { + transform: scale(1.5); + } + } + + &.hub { + // Transform because there is a canvas before + @include S(margin-left, -2px); + + grid-template-columns: auto 1fr; + background: none !important; + @include S(padding-left, 0); + canvas { + @include S(width, 12px); + @include S(height, 12px); + @include S(margin-right, 1px); + } + } + + &.shapeIcon { + canvas { + @include S(width, 15px); + @include S(height, 15px); + pointer-events: none; + // Double invert, to make sure it has the right color + @include DarkThemeInvert(); + } + } + } +} diff --git a/src/css/main.scss b/src/css/main.scss index 103e8c36..155b9b95 100644 --- a/src/css/main.scss +++ b/src/css/main.scss @@ -1,131 +1,131 @@ -// Control here whether to inline all resources or instead load them -@function uiResource($pth) { - @if (str-index($string: $pth, $substring: ".noinline")) { - @return resolve($pth); - } - @return inline($pth); -} - -@import "resources"; -@import "trigonometry"; -@import "material_colors"; -@import "dynamic_ui"; -@import "variables"; - -@import "mixins"; -@import "common"; -@import "animations"; -@import "game_state"; -@import "textual_game_state"; -@import "changelog_skins"; - -@import "states/preload"; -@import "states/main_menu"; -@import "states/ingame"; -@import "states/keybindings"; -@import "states/settings"; -@import "states/about"; -@import "states/mobile_warning"; -@import "states/changelog"; -@import "states/puzzle_menu"; -@import "states/mods"; - -@import "ingame_hud/buildings_toolbar"; -@import "ingame_hud/building_placer"; -@import "ingame_hud/beta_overlay"; -@import "ingame_hud/keybindings_overlay"; -@import "ingame_hud/unlock_notification"; -@import "ingame_hud/shop"; -@import "ingame_hud/game_menu"; -@import "ingame_hud/dialogs"; -@import "ingame_hud/vignette_overlay"; -@import "ingame_hud/statistics"; -@import "ingame_hud/pinned_shapes"; -@import "ingame_hud/notifications"; -@import "ingame_hud/settings_menu"; -@import "ingame_hud/debug_info"; -@import "ingame_hud/entity_debugger"; -@import "ingame_hud/tutorial_hints"; -@import "ingame_hud/blueprint_placer"; -@import "ingame_hud/waypoints"; -@import "ingame_hud/interactive_tutorial"; -@import "ingame_hud/color_blind_helper"; -@import "ingame_hud/shape_viewer"; -@import "ingame_hud/sandbox_controller"; -@import "ingame_hud/puzzle_back_to_menu"; -@import "ingame_hud/puzzle_editor_review"; -@import "ingame_hud/puzzle_dlc_logo"; -@import "ingame_hud/puzzle_editor_controls"; -@import "ingame_hud/puzzle_editor_settings"; -@import "ingame_hud/puzzle_play_settings"; -@import "ingame_hud/puzzle_play_metadata"; -@import "ingame_hud/puzzle_complete_notification"; -@import "ingame_hud/puzzle_next"; - -// prettier-ignore -$elements: -// Base -ingame_Canvas, -ingame_VignetteOverlay, -ingame_HUD_PuzzleDLCLogo, - -// Ingame overlays -ingame_HUD_Waypoints, -ingame_HUD_PlacementHints, -ingame_HUD_PlacerVariants, - -// Regular hud -ingame_HUD_PinnedShapes, -ingame_HUD_GameMenu, -ingame_HUD_KeybindingOverlay, -ingame_HUD_PuzzleBackToMenu, -ingame_HUD_PuzzleNextPuzzle, -ingame_HUD_PuzzleEditorReview, -ingame_HUD_PuzzleEditorControls, -ingame_HUD_PuzzleEditorTitle, -ingame_HUD_PuzzleEditorSettings, -ingame_HUD_PuzzlePlaySettings, -ingame_HUD_PuzzlePlayMetadata, -ingame_HUD_PuzzlePlayTitle, -ingame_HUD_Notifications, -ingame_HUD_DebugInfo, -ingame_HUD_EntityDebugger, -ingame_HUD_TutorialHints, -ingame_HUD_InteractiveTutorial, -ingame_HUD_BuildingsToolbar, -ingame_HUD_wires_toolbar, -ingame_HUD_BlueprintPlacer, -ingame_HUD_Waypoints_Hint, -ingame_HUD_WatermarkClicker, -ingame_HUD_ColorBlindBelowTileHelper, -ingame_HUD_SandboxController, - -// Overlays -ingame_HUD_BetaOverlay, - -// Dialogs -ingame_HUD_Shop, -ingame_HUD_Statistics, -ingame_HUD_ShapeViewer, -ingame_HUD_UnlockNotification, -ingame_HUD_PuzzleCompleteNotification, -ingame_HUD_SettingsMenu, -ingame_HUD_ModalDialogs; - -$zindex: 100; - -@each $elem in $elements { - ##{$elem} { - z-index: $zindex; - } - - $zindex: $zindex + 10; -} - -body.uiHidden { - > div:not(.ingameDialog):not(#ingame_HUD_SettingsMenu):not(#ingame_HUD_ModalDialogs):not( - #ingame_HUD_UnlockNotification - ):not(#ingame_HUD_PuzzleCompleteNotification) { - display: none !important; - } -} +// Control here whether to inline all resources or instead load them +@function uiResource($pth) { + @if (str-index($string: $pth, $substring: ".noinline")) { + @return resolve($pth); + } + @return inline($pth); +} + +@import "resources"; +@import "trigonometry"; +@import "material_colors"; +@import "dynamic_ui"; +@import "variables"; + +@import "mixins"; +@import "common"; +@import "animations"; +@import "game_state"; +@import "textual_game_state"; +@import "changelog_skins"; + +@import "states/preload"; +@import "states/main_menu"; +@import "states/ingame"; +@import "states/keybindings"; +@import "states/settings"; +@import "states/about"; +@import "states/mobile_warning"; +@import "states/changelog"; +@import "states/puzzle_menu"; +@import "states/mods"; + +@import "ingame_hud/buildings_toolbar"; +@import "ingame_hud/building_placer"; +@import "ingame_hud/beta_overlay"; +@import "ingame_hud/keybindings_overlay"; +@import "ingame_hud/unlock_notification"; +@import "ingame_hud/shop"; +@import "ingame_hud/game_menu"; +@import "ingame_hud/dialogs"; +@import "ingame_hud/vignette_overlay"; +@import "ingame_hud/statistics"; +@import "ingame_hud/pinned_shapes"; +@import "ingame_hud/notifications"; +@import "ingame_hud/settings_menu"; +@import "ingame_hud/debug_info"; +@import "ingame_hud/entity_debugger"; +@import "ingame_hud/tutorial_hints"; +@import "ingame_hud/blueprint_placer"; +@import "ingame_hud/waypoints"; +@import "ingame_hud/interactive_tutorial"; +@import "ingame_hud/color_blind_helper"; +@import "ingame_hud/shape_viewer"; +@import "ingame_hud/sandbox_controller"; +@import "ingame_hud/puzzle_back_to_menu"; +@import "ingame_hud/puzzle_editor_review"; +@import "ingame_hud/puzzle_dlc_logo"; +@import "ingame_hud/puzzle_editor_controls"; +@import "ingame_hud/puzzle_editor_settings"; +@import "ingame_hud/puzzle_play_settings"; +@import "ingame_hud/puzzle_play_metadata"; +@import "ingame_hud/puzzle_complete_notification"; +@import "ingame_hud/puzzle_next"; + +// prettier-ignore +$elements: +// Base +ingame_Canvas, +ingame_VignetteOverlay, +ingame_HUD_PuzzleDLCLogo, + +// Ingame overlays +ingame_HUD_Waypoints, +ingame_HUD_PlacementHints, +ingame_HUD_PlacerVariants, + +// Regular hud +ingame_HUD_PinnedShapes, +ingame_HUD_GameMenu, +ingame_HUD_KeybindingOverlay, +ingame_HUD_PuzzleBackToMenu, +ingame_HUD_PuzzleNextPuzzle, +ingame_HUD_PuzzleEditorReview, +ingame_HUD_PuzzleEditorControls, +ingame_HUD_PuzzleEditorTitle, +ingame_HUD_PuzzleEditorSettings, +ingame_HUD_PuzzlePlaySettings, +ingame_HUD_PuzzlePlayMetadata, +ingame_HUD_PuzzlePlayTitle, +ingame_HUD_Notifications, +ingame_HUD_DebugInfo, +ingame_HUD_EntityDebugger, +ingame_HUD_TutorialHints, +ingame_HUD_InteractiveTutorial, +ingame_HUD_BuildingsToolbar, +ingame_HUD_wires_toolbar, +ingame_HUD_BlueprintPlacer, +ingame_HUD_Waypoints_Hint, +ingame_HUD_WatermarkClicker, +ingame_HUD_ColorBlindBelowTileHelper, +ingame_HUD_SandboxController, + +// Overlays +ingame_HUD_BetaOverlay, + +// Dialogs +ingame_HUD_Shop, +ingame_HUD_Statistics, +ingame_HUD_ShapeViewer, +ingame_HUD_UnlockNotification, +ingame_HUD_PuzzleCompleteNotification, +ingame_HUD_SettingsMenu, +ingame_HUD_ModalDialogs; + +$zindex: 100; + +@each $elem in $elements { + ##{$elem} { + z-index: $zindex; + } + + $zindex: $zindex + 10; +} + +body.uiHidden { + > div:not(.ingameDialog):not(#ingame_HUD_SettingsMenu):not(#ingame_HUD_ModalDialogs):not( + #ingame_HUD_UnlockNotification + ):not(#ingame_HUD_PuzzleCompleteNotification) { + display: none !important; + } +} diff --git a/src/css/mixins.scss b/src/css/mixins.scss index d0a4f367..f052a201 100644 --- a/src/css/mixins.scss +++ b/src/css/mixins.scss @@ -1,292 +1,294 @@ -// ---------------------------------------- -/* Forces an element to get rendered on its own layer, increasing -the performance when animated. Use only transform and opacity in animations! */ -@mixin FastAnimation { - will-change: transform, opacity, filter; - // transform: translateZ(0); - backface-visibility: hidden; - -webkit-backface-visibility: hidden; -} - -// Helper which includes the translateZ webkit fix, use together with Fast animation -// $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 - it is not possible to restart a css animation */ -@mixin MakeAnimationWrappedEvenOdd($duration, $classPrefix: "anim", $childSelector: "") { - $animName: autogen_anim_#{unique-id()}; - - @at-root { - @keyframes #{$animName}_even { - @content; - } - - @keyframes #{$animName}_odd { - @content; - } - } - - &.#{$classPrefix}Even #{$childSelector} { - animation: #{$animName}_even $duration; - } - - &.#{$classPrefix}Odd #{$childSelector} { - animation: #{$animName}_odd $duration; - } -} - -// ---------------------------------------- -/* Allows to use and define an animation without specifying its name */ -@mixin InlineAnimation($duration) { - $animName: autogen_anim_#{unique-id()}; - - @at-root { - @keyframes #{$animName} { - @content; - } - } - - animation: $animName $duration !important; -} - -// ---------------------------------------- -/* Animation prefab for a double bounce pop-in animation, useful for dialogs */ -@mixin DoubleBounceAnim($duration: 0.5s ease-in-out, $amount: 0.2, $initialOpacity: 0) { - @include InlineAnimation($duration) { - 0% { - opacity: $initialOpacity; - transform: scale(0) $hardwareAcc; - } - - 25% { - opacity: 0.5; - transform: scale(1 + $amount) $hardwareAcc; - } - - 50% { - opacity: 1; - transform: scale(1 - $amount * 0.5) $hardwareAcc; - } - - 75% { - transform: scale(1 + $amount * 0.25) $hardwareAcc; - } - - 100% { - transform: scale(1) $hardwareAcc; - } - } - - 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) { - @media (min-width: #{$minW}) { - @content; - } -} - -// ---------------------------------------- -/* Define a style which is only applied when the viewport is at least X pixels height */ -@mixin StyleAtHeight($minH) { - @media (min-height: #{$minH}) { - @content; - } -} - -// ---------------------------------------- -/* Define a style which is only applied when the viewport has at least the given dimensions */ -@mixin StyleAtDims($minW, $minH) { - @media (min-height: #{$minH}) and (min-width: #{$minW}) { - @content; - } -} - -// ---------------------------------------- -/* Define a style which is only applied when the viewport has at maximum the given dimensions */ -@mixin StyleBelowDims($maxW, $maxH) { - @media (max-height: #{$maxH}) and (max-width: #{$maxW}) { - @content; - } -} - -// ---------------------------------------- -/* Define a style which is only applied when the viewport has at maximum the given height */ -@mixin StyleBelowHeight($maxH) { - @media (max-height: #{$maxH}) { - @content; - } -} -// ---------------------------------------- -/* Define a style which is only applied when the viewport has at maximum the given width */ -@mixin StyleBelowWidth($maxW) { - @media (max-width: #{$maxW}) { - @content; - } -} - -// ---------------------------------------- -// Dynamic graphics quality styles - -@mixin BoxShadow3D($bgColor, $size: 3px, $pressEffect: true) { - background-color: $bgColor; - - $borderSize: 1.5px; - $borderColor: rgb(18, 20, 24); - - // box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1), - // 0 D($size) 0 D($borderSize) $borderColor; - - // box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 D($borderSize) $borderColor, - // D(-$size * 1.5) D($size * 2) 0 D($borderSize) rgba(0, 0, 0, 0.1); - - // transition: box-shadow 0.1s ease-in-out; - - // @if $pressEffect { - // &.pressed { - // transform: none !important; - // $pSize: max(0, $size - 1.5px); - // transition: none !important; - // box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($pSize) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1), - // 0 D($pSize) 0 D($borderSize) $borderColor; - // top: D($size - $pSize); - // } - // } -} - -@mixin BorderRadius($v1: 2px, $v2: "", $v3: "", $v4: "") { - @include S(border-radius, $v1, $v2, $v3, $v4); -} - -@mixin BoxShadow($x, $y, $blur, $offset, $color) { - box-shadow: D($x) D($y) D($blur) D($offset) $color; -} - -@mixin DropShadow($yOffset: 2px, $blur: 2px, $amount: 0.2) { - @include BoxShadow(0, $yOffset, $blur, 0, rgba(#000, $amount)); -} - -@mixin TextShadow($yOffset: 2px, $blur: 1px, $amount: 0.6) { - text-shadow: 0 D($yOffset) D($blur) rgba(#000, $amount); -} - -@mixin Button3D($bgColor, $pressEffect: true) { - @include BoxShadow3D($bgColor, 2px, $pressEffect); -} - -@mixin ButtonDisabled3D($bgColor) { - @include BoxShadow3D($bgColor, 0.5px, false); -} - -@mixin BoxShadowInset($bgColor, $size: 3px) { - background-color: $bgColor; - - $borderSize: 1px; - $borderColor: rgb(15, 19, 24); - box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 rgba(#fff, 0.07); - border-top: D($size) solid rgba(#000, 0.1); - - //, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1), - // 0 D($size + $borderSize) 0 0 $borderColor; -} - -@mixin TextShadow3D($color: rgb(222, 234, 238), $borderColor: #000) { - 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% { - transform: translateY(#{D(-100px * $mul)}) scale(0.9); - opacity: 0; - } - - 100% { - opacity: 1; - transform: none; - } - } - opacity: 1; - transform: none; -} - -@mixin BreakText { - word-wrap: break-word; - word-break: break-all; - 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"] { - @content; - } -} - -@mixin DarkThemeInvert { - @include DarkThemeOverride { - filter: invert(1); - } -} +// ---------------------------------------- +/* Forces an element to get rendered on its own layer, increasing +the performance when animated. Use only transform and opacity in animations! */ +@mixin FastAnimation { + will-change: transform, opacity, filter; + // transform: translateZ(0); + backface-visibility: hidden; + -webkit-backface-visibility: hidden; +} + +// Helper which includes the translateZ webkit fix, use together with Fast animation +// $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 + it is not possible to restart a css animation */ +@mixin MakeAnimationWrappedEvenOdd($duration, $classPrefix: "anim", $childSelector: "") { + $animName: autogen_anim_#{unique-id()}; + + @at-root { + @keyframes #{$animName}_even { + @content; + } + + @keyframes #{$animName}_odd { + @content; + } + } + + &.#{$classPrefix}Even #{$childSelector} { + animation: #{$animName}_even $duration; + } + + &.#{$classPrefix}Odd #{$childSelector} { + animation: #{$animName}_odd $duration; + } +} + +// ---------------------------------------- +/* Allows to use and define an animation without specifying its name */ +@mixin InlineAnimation($duration) { + $animName: autogen_anim_#{unique-id()}; + + @at-root { + @keyframes #{$animName} { + @content; + } + } + + animation: $animName $duration !important; +} + +// ---------------------------------------- +/* Animation prefab for a double bounce pop-in animation, useful for dialogs */ +@mixin DoubleBounceAnim($duration: 0.5s ease-in-out, $amount: 0.2, $initialOpacity: 0) { + @include InlineAnimation($duration) { + 0% { + opacity: $initialOpacity; + transform: scale(0) $hardwareAcc; + } + + 25% { + opacity: 0.5; + transform: scale(1 + $amount) $hardwareAcc; + } + + 50% { + opacity: 1; + transform: scale(1 - $amount * 0.5) $hardwareAcc; + } + + 75% { + transform: scale(1 + $amount * 0.25) $hardwareAcc; + } + + 100% { + transform: scale(1) $hardwareAcc; + } + } + + 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) { + @media (min-width: #{$minW}) { + @content; + } +} + +// ---------------------------------------- +/* Define a style which is only applied when the viewport is at least X pixels height */ +@mixin StyleAtHeight($minH) { + @media (min-height: #{$minH}) { + @content; + } +} + +// ---------------------------------------- +/* Define a style which is only applied when the viewport has at least the given dimensions */ +@mixin StyleAtDims($minW, $minH) { + @media (min-height: #{$minH}) and (min-width: #{$minW}) { + @content; + } +} + +// ---------------------------------------- +/* Define a style which is only applied when the viewport has at maximum the given dimensions */ +@mixin StyleBelowDims($maxW, $maxH) { + @media (max-height: #{$maxH}) and (max-width: #{$maxW}) { + @content; + } +} + +// ---------------------------------------- +/* Define a style which is only applied when the viewport has at maximum the given height */ +@mixin StyleBelowHeight($maxH) { + @media (max-height: #{$maxH}) { + @content; + } +} +// ---------------------------------------- +/* Define a style which is only applied when the viewport has at maximum the given width */ +@mixin StyleBelowWidth($maxW) { + @media (max-width: #{$maxW}) { + @content; + } +} + +// ---------------------------------------- +// Dynamic graphics quality styles + +@mixin BoxShadow3D($bgColor, $size: 3px, $pressEffect: true) { + background-color: $bgColor; + + $borderSize: 1.5px; + $borderColor: rgb(18, 20, 24); + + // box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1), + // 0 D($size) 0 D($borderSize) $borderColor; + + // box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 D($borderSize) $borderColor, + // D(-$size * 1.5) D($size * 2) 0 D($borderSize) rgba(0, 0, 0, 0.1); + + // transition: box-shadow 0.1s ease-in-out; + + // @if $pressEffect { + // &.pressed { + // transform: none !important; + // $pSize: max(0, $size - 1.5px); + // transition: none !important; + // box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($pSize) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1), + // 0 D($pSize) 0 D($borderSize) $borderColor; + // top: D($size - $pSize); + // } + // } +} + +@mixin BorderRadius($v1: 2px, $v2: "", $v3: "", $v4: "") { + @include S(border-radius, $v1, $v2, $v3, $v4); +} + +@mixin BoxShadow($x, $y, $blur, $offset, $color) { + box-shadow: D($x) D($y) D($blur) D($offset) $color; +} + +@mixin DropShadow($yOffset: 2px, $blur: 2px, $amount: 0.2) { + @include BoxShadow(0, $yOffset, $blur, 0, rgba(#000, $amount)); +} + +@mixin TextShadow($yOffset: 2px, $blur: 1px, $amount: 0.6) { + text-shadow: 0 D($yOffset) D($blur) rgba(#000, $amount); +} + +@mixin Button3D($bgColor, $pressEffect: true) { + @include BoxShadow3D($bgColor, 2px, $pressEffect); +} + +@mixin ButtonDisabled3D($bgColor) { + @include BoxShadow3D($bgColor, 0.5px, false); +} + +@mixin BoxShadowInset($bgColor, $size: 3px) { + background-color: $bgColor; + + $borderSize: 1px; + $borderColor: rgb(15, 19, 24); + box-shadow: + 0 0 0 D($borderSize) $borderColor, + 0 D($size) 0 rgba(#fff, 0.07); + border-top: D($size) solid rgba(#000, 0.1); + + //, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1), + // 0 D($size + $borderSize) 0 0 $borderColor; +} + +@mixin TextShadow3D($color: rgb(222, 234, 238), $borderColor: #000) { + 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% { + transform: translateY(#{D(-100px * $mul)}) scale(0.9); + opacity: 0; + } + + 100% { + opacity: 1; + transform: none; + } + } + opacity: 1; + transform: none; +} + +@mixin BreakText { + word-wrap: break-word; + word-break: break-all; + 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"] { + @content; + } +} + +@mixin DarkThemeInvert { + @include DarkThemeOverride { + filter: invert(1); + } +} diff --git a/src/css/resources.scss b/src/css/resources.scss index 2d1e46ae..0cef0cbf 100644 --- a/src/css/resources.scss +++ b/src/css/resources.scss @@ -1,84 +1,84 @@ -$buildings: belt, cutter, miner, mixer, painter, rotater, balancer, stacker, trash, underground_belt, wire, - constant_signal, logic_gate, lever, filter, wire_tunnel, display, virtual_processor, reader, storage, - transistor, analyzer, comparator, item_producer, constant_producer, goal_acceptor, block; - -@each $building in $buildings { - [data-icon="building_icons/#{$building}.png"] { - /* @load-async */ - .icon { - background-image: uiResource("res/ui/building_icons/#{$building}.png") !important; - } - } -} - -$buildingsAndVariants: belt, balancer, underground_belt, underground_belt-tier2, miner, miner-chainable, - cutter, cutter-quad, rotater, rotater-ccw, stacker, mixer, painter-double, painter-quad, trash, storage, - reader, rotater-rotate180, display, constant_signal, wire, wire_tunnel, logic_gate-or, logic_gate-not, - logic_gate-xor, analyzer, virtual_processor-rotater, virtual_processor-unstacker, item_producer, - constant_producer, virtual_processor-stacker, virtual_processor-painter, wire-second, painter, - painter-mirrored, comparator, goal_acceptor, block; -@each $building in $buildingsAndVariants { - [data-icon="building_tutorials/#{$building}.png"] { - /* @load-async */ - background-image: uiResource("res/ui/building_tutorials/#{$building}.png") !important; - } -} - -[data-icon="building_tutorials/balancer-merger.png"], -[data-icon="building_tutorials/balancer-merger-inverse.png"] { - /* @load-async */ - background-image: uiResource("res/ui/building_tutorials/balancer-merger.png") !important; -} - -[data-icon="building_tutorials/balancer-splitter.png"], -[data-icon="building_tutorials/balancer-splitter-inverse.png"] { - /* @load-async */ - background-image: uiResource("res/ui/building_tutorials/balancer-splitter.png") !important; -} - -[data-icon="building_tutorials/transistor.png"], -[data-icon="building_tutorials/transistor-mirrored.png"] { - /* @load-async */ - background-image: uiResource("res/ui/building_tutorials/transistor.png") !important; -} - -// Filter and lever share tutorials -[data-icon="building_tutorials/filter.png"], -[data-icon="building_tutorials/lever.png"] { - /* @load-async */ - background-image: uiResource("res/ui/building_tutorials/lever.png") !important; -} - -// Logic gate -[data-icon="building_tutorials/logic_gate.png"] { - /* @load-async */ - background-image: uiResource("res/ui/building_tutorials/logic_gate-and.png") !important; -} - -// Virtual processor -[data-icon="building_tutorials/virtual_processor.png"] { - /* @load-async */ - background-image: uiResource("res/ui/building_tutorials/virtual_processor-cutter.png") !important; -} - -$icons: notification_saved, notification_success, notification_upgrade, notification_info, - notification_warning, notification_error; -@each $icon in $icons { - [data-icon="icons/#{$icon}.png"] { - /* @load-async */ - background-image: uiResource("res/ui/icons/#{$icon}.png") !important; - } -} - -$languages: en, de, cs, da, et, es-419, fr, it, pt-BR, sv, tr, el, ru, uk, zh-TW, zh-CN, nb, mt-MT, ar, nl, vi, - th, hu, pl, ja, kor, no, pt-PT, fi, ro, he; - -@each $language in $languages { - [data-languageicon="#{$language}"] { - background-image: uiResource("languages/#{$language}.svg") !important; - } -} - -.steam_dlbtn_0 { - background-image: uiResource("steam_link_btn/0.png") !important; -} +$buildings: belt, cutter, miner, mixer, painter, rotater, balancer, stacker, trash, underground_belt, wire, + constant_signal, logic_gate, lever, filter, wire_tunnel, display, virtual_processor, reader, storage, + transistor, analyzer, comparator, item_producer, constant_producer, goal_acceptor, block; + +@each $building in $buildings { + [data-icon="building_icons/#{$building}.png"] { + /* @load-async */ + .icon { + background-image: uiResource("res/ui/building_icons/#{$building}.png") !important; + } + } +} + +$buildingsAndVariants: belt, balancer, underground_belt, underground_belt-tier2, miner, miner-chainable, + cutter, cutter-quad, rotater, rotater-ccw, stacker, mixer, painter-double, painter-quad, trash, storage, + reader, rotater-rotate180, display, constant_signal, wire, wire_tunnel, logic_gate-or, logic_gate-not, + logic_gate-xor, analyzer, virtual_processor-rotater, virtual_processor-unstacker, item_producer, + constant_producer, virtual_processor-stacker, virtual_processor-painter, wire-second, painter, + painter-mirrored, comparator, goal_acceptor, block; +@each $building in $buildingsAndVariants { + [data-icon="building_tutorials/#{$building}.png"] { + /* @load-async */ + background-image: uiResource("res/ui/building_tutorials/#{$building}.png") !important; + } +} + +[data-icon="building_tutorials/balancer-merger.png"], +[data-icon="building_tutorials/balancer-merger-inverse.png"] { + /* @load-async */ + background-image: uiResource("res/ui/building_tutorials/balancer-merger.png") !important; +} + +[data-icon="building_tutorials/balancer-splitter.png"], +[data-icon="building_tutorials/balancer-splitter-inverse.png"] { + /* @load-async */ + background-image: uiResource("res/ui/building_tutorials/balancer-splitter.png") !important; +} + +[data-icon="building_tutorials/transistor.png"], +[data-icon="building_tutorials/transistor-mirrored.png"] { + /* @load-async */ + background-image: uiResource("res/ui/building_tutorials/transistor.png") !important; +} + +// Filter and lever share tutorials +[data-icon="building_tutorials/filter.png"], +[data-icon="building_tutorials/lever.png"] { + /* @load-async */ + background-image: uiResource("res/ui/building_tutorials/lever.png") !important; +} + +// Logic gate +[data-icon="building_tutorials/logic_gate.png"] { + /* @load-async */ + background-image: uiResource("res/ui/building_tutorials/logic_gate-and.png") !important; +} + +// Virtual processor +[data-icon="building_tutorials/virtual_processor.png"] { + /* @load-async */ + background-image: uiResource("res/ui/building_tutorials/virtual_processor-cutter.png") !important; +} + +$icons: notification_saved, notification_success, notification_upgrade, notification_info, + notification_warning, notification_error; +@each $icon in $icons { + [data-icon="icons/#{$icon}.png"] { + /* @load-async */ + background-image: uiResource("res/ui/icons/#{$icon}.png") !important; + } +} + +$languages: en, de, cs, da, et, es-419, fr, it, pt-BR, sv, tr, el, ru, uk, zh-TW, zh-CN, nb, mt-MT, ar, nl, vi, + th, hu, pl, ja, kor, no, pt-PT, fi, ro, he; + +@each $language in $languages { + [data-languageicon="#{$language}"] { + 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/ingame.scss b/src/css/states/ingame.scss index d67ee00f..064a7210 100644 --- a/src/css/states/ingame.scss +++ b/src/css/states/ingame.scss @@ -1,52 +1,52 @@ -#state_InGameState { - .gameLoadingOverlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 9999; - align-items: center; - justify-content: center; - pointer-events: all; - display: flex; - background: $mainBgColor; - flex-direction: column; - } - - .prefab_GameHint { - position: absolute; - @include S(bottom, 40px); - @include S(left, 20px); - @include S(right, 20px); - @include PlainText; - text-align: center; - - color: #666; - - @include DarkThemeOverride() { - color: lighten($darkModeGameBackground, 50); - } - } - - #ingame_Canvas { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - } - #ingame_HUD_ModalDialogs { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - } - - @include DarkThemeOverride { - .gameLoadingOverlay { - background: $darkModeGameBackground; - } - } -} +#state_InGameState { + .gameLoadingOverlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 9999; + align-items: center; + justify-content: center; + pointer-events: all; + display: flex; + background: $mainBgColor; + flex-direction: column; + } + + .prefab_GameHint { + position: absolute; + @include S(bottom, 40px); + @include S(left, 20px); + @include S(right, 20px); + @include PlainText; + text-align: center; + + color: #666; + + @include DarkThemeOverride() { + color: lighten($darkModeGameBackground, 50); + } + } + + #ingame_Canvas { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + #ingame_HUD_ModalDialogs { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + + @include DarkThemeOverride { + .gameLoadingOverlay { + background: $darkModeGameBackground; + } + } +} diff --git a/src/css/states/keybindings.scss b/src/css/states/keybindings.scss index 991d2af4..a23b1d38 100644 --- a/src/css/states/keybindings.scss +++ b/src/css/states/keybindings.scss @@ -1,72 +1,72 @@ -#state_KeybindingsState { - .content { - .topEntries { - display: grid; - grid-template-columns: 1fr auto; - @include S(grid-gap, 5px); - @include S(margin-bottom, 10px); - } - - .hint { - display: block; - background: #eee; - @include S(padding, 6px, 10px); - @include PlainText; - @include S(border-radius, $globalBorderRadius); - } - - .category { - .entry { - display: grid; - @include S(margin-top, 2px); - @include S(padding-top, 2px); - @include S(grid-gap, 4px); - grid-template-columns: 1fr #{D(100px)} auto auto; - border-bottom: #{D(1px)} dotted #eee; - color: #888c8f; - .mapping { - color: $colorBlueBright; - text-align: center; - } - - button { - @include S(height, 15px); - @include S(width, 15px); - @include IncreasedClickArea(0px); - background: transparent center center / 40% no-repeat; - opacity: 0.9; - &.editKeybinding { - background-image: uiResource("icons/edit_key.png"); - } - - &.resetKeybinding { - background-image: uiResource("icons/reset_key.png"); - } - - &.disabled { - pointer-events: none; - cursor: default; - opacity: 0.1 !important; - } - } - } - } - } - - @include DarkThemeOverride { - .content { - .hint { - background: darken($darkModeControlsBackground, 4); - } - - .category .entry { - color: #c0c4c8; - border-bottom-color: #888; - - button { - filter: invert(1); - } - } - } - } -} +#state_KeybindingsState { + .content { + .topEntries { + display: grid; + grid-template-columns: 1fr auto; + @include S(grid-gap, 5px); + @include S(margin-bottom, 10px); + } + + .hint { + display: block; + background: #eee; + @include S(padding, 6px, 10px); + @include PlainText; + @include S(border-radius, $globalBorderRadius); + } + + .category { + .entry { + display: grid; + @include S(margin-top, 2px); + @include S(padding-top, 2px); + @include S(grid-gap, 4px); + grid-template-columns: 1fr #{D(100px)} auto auto; + border-bottom: #{D(1px)} dotted #eee; + color: #888c8f; + .mapping { + color: $colorBlueBright; + text-align: center; + } + + button { + @include S(height, 15px); + @include S(width, 15px); + @include IncreasedClickArea(0px); + background: transparent center center / 40% no-repeat; + opacity: 0.9; + &.editKeybinding { + background-image: uiResource("icons/edit_key.png"); + } + + &.resetKeybinding { + background-image: uiResource("icons/reset_key.png"); + } + + &.disabled { + pointer-events: none; + cursor: default; + opacity: 0.1 !important; + } + } + } + } + } + + @include DarkThemeOverride { + .content { + .hint { + background: darken($darkModeControlsBackground, 4); + } + + .category .entry { + color: #c0c4c8; + border-bottom-color: #888; + + button { + filter: invert(1); + } + } + } + } +} diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index d8ce48d6..916b361f 100644 --- a/src/css/states/main_menu.scss +++ b/src/css/states/main_menu.scss @@ -1,1235 +1,1237 @@ -#state_MainMenuState { - display: grid; - align-items: center; - justify-content: center; - grid-template-rows: D(95px) 1fr D(100px); - grid-template-columns: 1fr; - - // background: #aaacb4 center center / cover !important; - background: #bbc2cf center center / cover !important; - - .topButtons { - position: absolute; - @include S(top, 25px); - @include S(right, 25px); - display: flex; - flex-direction: row; - z-index: 20; - @include S(gap, 9px); - - .settingsButton, - .exitAppButton, - .languageChoose { - @include S(width, 35px); - @include S(height, 35px); - pointer-events: all; - border-radius: 50%; - box-shadow: 0 D(2px) D(3px) rgba(#000, 0.1); - background: rgba(#fff, 1) uiResource("icons/main_menu_settings.png") center center / 70% no-repeat; - - cursor: pointer; - transition: opacity 0.12s ease-in-out; - @include IncreasedClickArea(2px); - opacity: 0.85; - &:hover { - opacity: 1; - } - } - - .exitAppButton { - background-image: uiResource("icons/main_menu_exit.png"); - background-size: 56%; - } - - .languageChoose { - background: rgba(#fff, 1) center center / contain no-repeat; - border-radius: 50%; - background-color: #222428 !important; - background-size: contain !important; - background-position: center center !important; - opacity: 0.8; - transform: scale(0.98); - } - } - - &::after { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: uiResource("vignette-strong.lossless.png") center center / cover no-repeat; - pointer-events: none; - z-index: 2; - content: ""; - } - - .fullscreenBackgroundVideo { - // display: none !important; - z-index: 1; - position: fixed; - right: 50%; - bottom: 50%; - min-width: 100%; - min-height: 100%; - - opacity: 0; - display: none; - transform: translate(50%, 50%); - filter: blur(D(10px)); - - $opacity: 0.4; - &.loaded { - display: block; - opacity: $opacity; - - @include InlineAnimation(0.1s ease-in-out) { - 0% { - opacity: 0; - } - 100% { - opacity: $opacity; - } - } - } - } - - .mainWrapper { - @include S(margin-top, 15px); - align-items: start; - justify-items: center; - align-self: center; - justify-self: center; - @include S(grid-column-gap, 20px); - display: grid; - - position: relative; - z-index: 10; - grid-template-rows: 1fr; - - &[data-columns="1"] { - grid-template-columns: 1fr; - } - &[data-columns="2"] { - grid-template-columns: D(290px) 1fr; - } - } - - .logo { - display: flex; - flex-grow: 1; - align-items: center; - justify-content: center; - z-index: 20; - - flex-direction: column; - @include S(padding-top, 0px); - - img { - @include S(width, 710px / 3); - @include S(height, 180px / 3); - } - position: relative; - @include S(left, -8px); - - .updateLabel { - position: absolute; - transform: translateX(50%) rotate(-5deg); - color: #fff; - @include PlainText; - font-weight: bold; - @include S(right, 40px); - @include S(bottom, 20px); - background: $modsColor; - @include S(border-radius, $globalBorderRadius); - @include S(padding, 0, 5px, 1px, 5px); - - @include InlineAnimation(1.3s ease-in-out infinite) { - 50% { - transform: translateX(50%) rotate(-7deg) scale(1.1); - } - } - } - } - - .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%; - grid-column: 2 / 3; - 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; - justify-content: center; - flex-direction: column; - background: $colorBlueBright; - grid-row: 1 / 2; - width: 100%; - box-sizing: border-box; - position: relative; - @include S(border-radius, $globalBorderRadius); - box-shadow: 0 D(5px) D(10px) rgba(#000, 0.4); - border: D(1px) solid rgba(#000, 0.1); - overflow: hidden; - - > .badge { - color: #fff; - text-transform: uppercase; - font-weight: bold; - position: absolute; - @include S(top, 10px); - @include S(right, 10px); - - transform: translateX(50%) rotate(10deg); - @include Heading; - font-weight: bold; - - @include InlineAnimation(1.3s ease-in-out infinite) { - 50% { - transform: translateX(50%) rotate(12deg) scale(1.1); - } - } - } - - > .hint { - @include SuperDuperSmallText; - @include S(margin-top, 10px); - @include S(width, 200px); - } - - > .dlcLogo { - @include S(width, 120px); - } - - > button { - @include S(margin-top, 20px); - @include Heading; - @include S(padding, 10px, 30px); - background-color: #333; - color: #fff; - } - - &.owned { - @include S(height, 118px); - @include S(width, 250px); - background: uiResource("puzzle_460x215_15.png") center D(-5px) / cover repeat; - .dlcLogo { - display: none; - } - - > button { - pointer-events: all; - @include S(padding, 4px, 10px); - margin: 0; - background: #47c599; - box-sizing: border-box; - position: absolute; - @include S(top, 10px); - @include S(right, 10px); - z-index: 100; - @include PlainText; - z-index: 200; - color: #111215; - 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 { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - background: #fff; - grid-row: 1 / 2; - position: relative; - text-align: left; - align-items: flex-start; - @include S(width, 250px); - @include S(padding, 15px); - @include S(padding-bottom, 10px); - @include S(border-radius, $globalBorderRadius); - box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2); - - .header { - display: flex; - width: 100%; - align-items: center; - text-transform: uppercase; - - @include S(margin-bottom, 10px); - - .editMods { - margin-left: auto; - @include S(width, 20px); - @include S(height, 20px); - padding: 0; - opacity: 0.5; - background: transparent center center/ 80% no-repeat; - & { - background-image: uiResource("icons/edit_key.png") !important; - } - @include DarkThemeInvert; - &:hover { - opacity: 0.6; - } - } - } - - h3 { - @include Heading; - color: $modsColor; - margin: 0; - } - - .dlcHint { - @include SuperSmallText; - @include S(margin-top, 10px); - width: 100%; - - display: grid; - grid-template-columns: 1fr auto; - grid-gap: 20px; - align-items: center; - } - - .mod { - background: #eee; - width: 100%; - @include S(border-radius, $globalBorderRadius); - @include S(padding, 5px); - box-sizing: border-box; - @include PlainText; - @include S(margin-bottom, 5px); - display: flex; - flex-direction: column; - - .author, - .version { - @include SuperSmallText; - align-self: end; - opacity: 0.4; - } - .name { - overflow: hidden; - } - } - - .modsList { - box-sizing: border-box; - @include S(height, 100px); - @include S(padding, 5px); - border: D(1px) solid #eee; - overflow-y: scroll; - width: 100%; - display: flex; - flex-direction: column; - @include S(border-radius, $globalBorderRadius); - pointer-events: all; - - :last-child { - margin-bottom: auto; - } - } - } - } - - .mainContainer { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - background: rgba(#fff, 0.9); - @include S(border-radius, $globalBorderRadius); - height: 100%; - box-shadow: 0 D(9px) D(15px) rgba(#000, 0.2); - width: 100%; - position: relative; - align-self: center; - justify-self: center; - grid-column: 1 / 2; - @include S(max-width, 400px); - overflow: hidden; - box-sizing: border-box; - - &[data-savegames="0"] .buttons .outer { - grid-template-rows: 1fr 1fr; - } - - .buttons { - display: grid; - grid-template-columns: auto auto; - grid-template-rows: 1fr; - // flex-direction: column; - // align-items: center; - width: 100%; - background: rgba(0, 20, 40, 0.05); - - @include S(padding, 10px); - @include S(grid-gap, 10px); - max-width: 100%; - box-sizing: border-box; - - .playButton, - .continueButton { - @include SuperHeading; - width: 100%; - @include S(padding, 15px, 10px); - letter-spacing: 0.1em !important; - @include IncreasedClickArea(0px); - box-sizing: border-box; - font-weight: bold; - color: #fff; - background-color: $colorGreenBright; - transition: transform 0.12s ease-in-out, background-color 0.12s ease-in-out; - - grid-column: 1 / 2; - min-width: auto; - grid-row: 1 / 1; - - &:hover { - background-color: darken($colorGreenBright, 4); - opacity: 1; - } - - &.continueButton { - @include Heading; - } - } - - .outer { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr 1fr; - height: 100%; - - grid-column: 2 / 3; - grid-row: 1 / 1; - min-width: auto; - - @include S(grid-gap, 5px); - width: 100%; - - > button { - @include S(padding, 3px, 6px); - width: 100%; - white-space: nowrap; - margin: 0 !important; - box-sizing: border-box; - } - - .importButton { - @include IncreasedClickArea(0px); - } - - .newGameButton { - @include IncreasedClickArea(0px); - } - - .modsButton { - @include IncreasedClickArea(0px); - background-color: $modsColor !important; - } - } - } - - .modeButtons { - display: grid; - grid-template-columns: repeat(2, 1fr); - @include S(grid-column-gap, 10px); - align-items: start; - height: 100%; - width: 100%; - } - - .steamSso { - cursor: default; - pointer-events: all; - display: inline-flex; - @include S(padding, 10px); - color: #000; - flex-direction: column; - line-height: 1em; - @include S(gap, 3px); - position: relative; - background: rgba(0, 20, 40, 0.05); - width: 100%; - box-sizing: border-box; - margin-top: auto; - display: grid; - grid-template-columns: 1fr auto; - align-items: center; - - .description { - @include SuperSmallText; - color: rgba(0, 10, 20, 0.5); - @include DarkThemeOverride { - color: rgba(#fff, 0.7); - } - } - // &:hover { - // .tooltip { - // opacity: 1; - // } - // } - - a.ssoSignIn { - background: #171a23 uiResource("steam_signin.png") center center / contain no-repeat; - width: 100%; - box-sizing: border-box; - - @include S(height, 19px); - @include S(width, 110px); - - display: inline-flex; - @include S(border-radius, $globalBorderRadius * 0.5); - transition: opacity 0.12s ease-in-out; - overflow: hidden; - text-indent: -999em; - &:hover { - opacity: 0.9; - } - - box-shadow: 0 D(1.5px) D(4px) rgba(#000, 0.21); - } - - a.ssoSignOut { - width: 100%; - background: $colorRedBright; - color: #fff !important; - display: flex; - align-items: center; - box-sizing: border-box; - justify-content: center; - @include SuperSmallText; - text-transform: uppercase; - - @include S(border-radius, $globalBorderRadius * 0.5); - - box-shadow: 0 D(1.5px) D(4px) rgba(#000, 0.21); - @include S(padding, 2px, 9px); - &:hover { - opacity: 0.95; - } - } - } - - .savegamesMount { - width: 100%; - display: flex; - flex-grow: 1; - flex-direction: column; - @include S(padding, 10px); - box-sizing: border-box; - @include S(min-height, 150px); - - .savegamesNone { - align-items: center; - justify-content: center; - display: flex; - @include PlainText; - flex-grow: 1; - text-align: center; - @include S(padding, 0, 20px); - opacity: 0.5; - - @include DarkThemeOverride { - color: #fff; - } - } - - .savegames { - overflow-y: auto; - width: 100%; - pointer-events: all; - @include S(padding-right, 5px); - margin-right: D(-5px); - @include S(max-height, 150px); - display: grid; - grid-auto-flow: row; - @include S(grid-gap, 5px); - - .savegame { - background: #eee; - @include S(border-radius, $globalBorderRadius); - @include S(padding, 5px); - display: grid; - grid-template-columns: 1fr 1fr auto auto; - grid-template-rows: auto auto; - @include S(grid-column-gap, 4px); - @include S(grid-row-gap, 1px); - - .playtime { - grid-column: 2 / 3; - grid-row: 2 / 3; - @include SuperSmallText; - opacity: 0.5; - } - - .level { - grid-column: 1 / 2; - grid-row: 2 / 3; - @include SuperSmallText; - opacity: 0.5; - } - - .name { - grid-column: 1 / 3; - grid-row: 1 / 2; - @include PlainText; - display: inline-flex; - align-items: center; - - > span { - display: inline-flex; - @include S(max-width, 140px); - overflow: hidden; - } - } - - button.resumeGame, - button.downloadGame, - button.deleteGame, - button.renameGame { - padding: 0; - align-self: center; - justify-self: center; - @include IncreasedClickArea(0px); - background: #44484a center center / 40% no-repeat; - } - - button.resumeGame { - background-color: #44484a; - & { - background-image: uiResource("icons/play.png"); - } - } - - button.downloadGame { - grid-column: 3 / 4; - grid-row: 1 / 2; - background-color: transparent; - - & { - background-image: uiResource("icons/download.png"); - } - @include S(width, 15px); - @include IncreasedClickArea(0px); - @include S(height, 15px); - background-size: 80%; - align-self: start; - border-radius: 0; - opacity: 0.4; - - &:hover { - opacity: 0.5; - } - - @include DarkThemeInvert; - } - - button.deleteGame { - grid-column: 3 / 4; - grid-row: 2 / 3; - background-color: transparent; - @include IncreasedClickArea(0px); - - & { - background-image: uiResource("icons/delete.png"); - } - @include S(width, 15px); - @include S(height, 15px); - align-self: end; - background-size: 80%; - border-radius: 0; - opacity: 0.4; - - &:hover { - opacity: 0.5; - } - - @include DarkThemeInvert; - } - - button.renameGame { - background-color: transparent; - @include IncreasedClickArea(2px); - - & { - background-image: uiResource("icons/edit_key.png"); - } - @include S(width, 10px); - @include S(height, 10px); - align-self: center; - justify-self: center; - border-radius: 0; - background-size: 90%; - opacity: 0.4; - @include S(margin-left, 4px); - - &:hover { - opacity: 0.5; - } - - @include DarkThemeInvert; - } - - button.resumeGame { - grid-column: 4 / 5; - grid-row: 1 / 3; - margin: 0; - @include S(width, 32px); - height: 100%; - @include S(margin-left, 4px); - - @include DarkThemeOverride { - background-color: lighten($darkModeControlsBackground, 10); - } - } - } - } - } - } - - .bottomContainer { - display: flex; - align-items: center; - justify-content: center; - flex-direction: row; - @include S(padding-top, 10px); - height: 100%; - width: 100%; - box-sizing: border-box; - - .buttons { - display: grid; - grid-template-columns: repeat(2, 1fr); - @include S(grid-column-gap, 10px); - align-items: start; - height: 100%; - width: 100%; - box-sizing: border-box; - } - } - - .socialLinks { - position: fixed; - z-index: 100; - display: flex; - flex-direction: row; - @include S(gap, 9px); - @include S(top, 25px); - @include S(left, 25px); - - @media (max-aspect-ratio: 1460/1000) { - position: unset; - top: unset; - left: unset; - .label { - display: none; - } - } - - > .boxLink { - pointer-events: all; - display: flex; - flex-direction: column; - align-items: center; - position: relative; - cursor: pointer; - @include S(gap, 3px); - @include S(width, 35px); - - .label { - @include SuperSmallText; - font-weight: bold; - box-sizing: border-box; - text-transform: uppercase; - opacity: 0; - transition: opacity 0.12s ease-in-out; - } - - &:hover { - .label { - opacity: 1; - .thirdpartyLogo { - background-color: #fff; - } - } - } - - .thirdpartyLogo { - display: inline-flex; - @include S(width, 35px); - @include S(height, 35px); - background: rgba(#fff, 0.9) center center / contain no-repeat; - border-radius: 50%; - box-shadow: 0 D(2px) D(3px) rgba(#000, 0.1); - - transition: background-color 0.12s ease-in-out; - - &.githubLogo { - background-image: uiResource("main_menu/github.png"); - background-size: 66%; - background-position: 54% 50%; - } - - &.discordLogo { - background-image: uiResource("main_menu/discord.svg"); - background-size: 66%; - background-position: 50% 53%; - } - - &.redditLogo { - background-image: uiResource("main_menu/reddit.svg"); - background-size: 65%; - } - &.twitterLogo { - background-image: uiResource("main_menu/twitter.svg"); - background-size: 60%; - background-position: 60% 58%; - } - - &.patreonLogo { - background-image: uiResource("main_menu/patreon.svg"); - background-size: 60%; - background-position: 60% 60%; - } - - &.steamLogo { - background-image: uiResource("main_menu/steam.svg"); - background-size: 105%; - } - } - } - } - - .footer { - display: flex; - justify-content: center; - align-self: end; - align-items: center; - position: relative; - z-index: 20; - width: 100%; - box-sizing: border-box; - @include S(gap, 30px); - @include S(padding, 15px, 25px, 15px, 20px); - - .author { - margin-left: auto; - display: flex; - @include S(width, 110px); - justify-content: flex-end; - - a { - &:hover img { - opacity: 0.85; - } - position: relative; - display: flex; - align-items: center; - justify-content: center; - - img { - transition: opacity 0.12s ease-in-out; - @include S(width, 82px * 0.8); - @include S(height, 25px * 0.8); - filter: invert(100%); - opacity: 0.75; - } - } - } - - .footerGrow { - flex-grow: 1; - display: flex; - align-items: center; - justify-content: flex-start; - @include S(gap, 15px); - > a { - @include SuperSmallText; - @include S(padding, 2px); - font-weight: bold; - color: #000; - opacity: 0.6; - transition: opacity 0.12s ease-in-out; - &:hover { - opacity: 1; - } - } - } - } - - @include DarkThemeOverride { - background: rgba($darkModeGameBackground, 0.5) center center / cover !important; - - .mainContainer { - background: $darkModeControlsBackground; - - .savegames .savegame { - background: darken($darkModeControlsBackground, 5); - color: white; - } - } - - .modsOverview { - background: $darkModeControlsBackground; - - .modsList { - border-color: darken($darkModeControlsBackground, 5); - - .mod { - background: darken($darkModeControlsBackground, 5); - color: white; - } - } - - .dlcHint { - color: $accentColorBright; - } - } - } -} +#state_MainMenuState { + display: grid; + align-items: center; + justify-content: center; + grid-template-rows: D(95px) 1fr D(100px); + grid-template-columns: 1fr; + + // background: #aaacb4 center center / cover !important; + background: #bbc2cf center center / cover !important; + + .topButtons { + position: absolute; + @include S(top, 25px); + @include S(right, 25px); + display: flex; + flex-direction: row; + z-index: 20; + @include S(gap, 9px); + + .settingsButton, + .exitAppButton, + .languageChoose { + @include S(width, 35px); + @include S(height, 35px); + pointer-events: all; + border-radius: 50%; + box-shadow: 0 D(2px) D(3px) rgba(#000, 0.1); + background: rgba(#fff, 1) uiResource("icons/main_menu_settings.png") center center / 70% no-repeat; + + cursor: pointer; + transition: opacity 0.12s ease-in-out; + @include IncreasedClickArea(2px); + opacity: 0.85; + &:hover { + opacity: 1; + } + } + + .exitAppButton { + background-image: uiResource("icons/main_menu_exit.png"); + background-size: 56%; + } + + .languageChoose { + background: rgba(#fff, 1) center center / contain no-repeat; + border-radius: 50%; + background-color: #222428 !important; + background-size: contain !important; + background-position: center center !important; + opacity: 0.8; + transform: scale(0.98); + } + } + + &::after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: uiResource("vignette-strong.lossless.png") center center / cover no-repeat; + pointer-events: none; + z-index: 2; + content: ""; + } + + .fullscreenBackgroundVideo { + // display: none !important; + z-index: 1; + position: fixed; + right: 50%; + bottom: 50%; + min-width: 100%; + min-height: 100%; + + opacity: 0; + display: none; + transform: translate(50%, 50%); + filter: blur(D(10px)); + + $opacity: 0.4; + &.loaded { + display: block; + opacity: $opacity; + + @include InlineAnimation(0.1s ease-in-out) { + 0% { + opacity: 0; + } + 100% { + opacity: $opacity; + } + } + } + } + + .mainWrapper { + @include S(margin-top, 15px); + align-items: start; + justify-items: center; + align-self: center; + justify-self: center; + @include S(grid-column-gap, 20px); + display: grid; + + position: relative; + z-index: 10; + grid-template-rows: 1fr; + + &[data-columns="1"] { + grid-template-columns: 1fr; + } + &[data-columns="2"] { + grid-template-columns: D(290px) 1fr; + } + } + + .logo { + display: flex; + flex-grow: 1; + align-items: center; + justify-content: center; + z-index: 20; + + flex-direction: column; + @include S(padding-top, 0px); + + img { + @include S(width, 710px / 3); + @include S(height, 180px / 3); + } + position: relative; + @include S(left, -8px); + + .updateLabel { + position: absolute; + transform: translateX(50%) rotate(-5deg); + color: #fff; + @include PlainText; + font-weight: bold; + @include S(right, 40px); + @include S(bottom, 20px); + background: $modsColor; + @include S(border-radius, $globalBorderRadius); + @include S(padding, 0, 5px, 1px, 5px); + + @include InlineAnimation(1.3s ease-in-out infinite) { + 50% { + transform: translateX(50%) rotate(-7deg) scale(1.1); + } + } + } + } + + .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%; + grid-column: 2 / 3; + 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; + justify-content: center; + flex-direction: column; + background: $colorBlueBright; + grid-row: 1 / 2; + width: 100%; + box-sizing: border-box; + position: relative; + @include S(border-radius, $globalBorderRadius); + box-shadow: 0 D(5px) D(10px) rgba(#000, 0.4); + border: D(1px) solid rgba(#000, 0.1); + overflow: hidden; + + > .badge { + color: #fff; + text-transform: uppercase; + font-weight: bold; + position: absolute; + @include S(top, 10px); + @include S(right, 10px); + + transform: translateX(50%) rotate(10deg); + @include Heading; + font-weight: bold; + + @include InlineAnimation(1.3s ease-in-out infinite) { + 50% { + transform: translateX(50%) rotate(12deg) scale(1.1); + } + } + } + + > .hint { + @include SuperDuperSmallText; + @include S(margin-top, 10px); + @include S(width, 200px); + } + + > .dlcLogo { + @include S(width, 120px); + } + + > button { + @include S(margin-top, 20px); + @include Heading; + @include S(padding, 10px, 30px); + background-color: #333; + color: #fff; + } + + &.owned { + @include S(height, 118px); + @include S(width, 250px); + background: uiResource("puzzle_460x215_15.png") center D(-5px) / cover repeat; + .dlcLogo { + display: none; + } + + > button { + pointer-events: all; + @include S(padding, 4px, 10px); + margin: 0; + background: #47c599; + box-sizing: border-box; + position: absolute; + @include S(top, 10px); + @include S(right, 10px); + z-index: 100; + @include PlainText; + z-index: 200; + color: #111215; + 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 { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + background: #fff; + grid-row: 1 / 2; + position: relative; + text-align: left; + align-items: flex-start; + @include S(width, 250px); + @include S(padding, 15px); + @include S(padding-bottom, 10px); + @include S(border-radius, $globalBorderRadius); + box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2); + + .header { + display: flex; + width: 100%; + align-items: center; + text-transform: uppercase; + + @include S(margin-bottom, 10px); + + .editMods { + margin-left: auto; + @include S(width, 20px); + @include S(height, 20px); + padding: 0; + opacity: 0.5; + background: transparent center center/ 80% no-repeat; + & { + background-image: uiResource("icons/edit_key.png") !important; + } + @include DarkThemeInvert; + &:hover { + opacity: 0.6; + } + } + } + + h3 { + @include Heading; + color: $modsColor; + margin: 0; + } + + .dlcHint { + @include SuperSmallText; + @include S(margin-top, 10px); + width: 100%; + + display: grid; + grid-template-columns: 1fr auto; + grid-gap: 20px; + align-items: center; + } + + .mod { + background: #eee; + width: 100%; + @include S(border-radius, $globalBorderRadius); + @include S(padding, 5px); + box-sizing: border-box; + @include PlainText; + @include S(margin-bottom, 5px); + display: flex; + flex-direction: column; + + .author, + .version { + @include SuperSmallText; + align-self: end; + opacity: 0.4; + } + .name { + overflow: hidden; + } + } + + .modsList { + box-sizing: border-box; + @include S(height, 100px); + @include S(padding, 5px); + border: D(1px) solid #eee; + overflow-y: scroll; + width: 100%; + display: flex; + flex-direction: column; + @include S(border-radius, $globalBorderRadius); + pointer-events: all; + + :last-child { + margin-bottom: auto; + } + } + } + } + + .mainContainer { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + background: rgba(#fff, 0.9); + @include S(border-radius, $globalBorderRadius); + height: 100%; + box-shadow: 0 D(9px) D(15px) rgba(#000, 0.2); + width: 100%; + position: relative; + align-self: center; + justify-self: center; + grid-column: 1 / 2; + @include S(max-width, 400px); + overflow: hidden; + box-sizing: border-box; + + &[data-savegames="0"] .buttons .outer { + grid-template-rows: 1fr 1fr; + } + + .buttons { + display: grid; + grid-template-columns: auto auto; + grid-template-rows: 1fr; + // flex-direction: column; + // align-items: center; + width: 100%; + background: rgba(0, 20, 40, 0.05); + + @include S(padding, 10px); + @include S(grid-gap, 10px); + max-width: 100%; + box-sizing: border-box; + + .playButton, + .continueButton { + @include SuperHeading; + width: 100%; + @include S(padding, 15px, 10px); + letter-spacing: 0.1em !important; + @include IncreasedClickArea(0px); + box-sizing: border-box; + font-weight: bold; + color: #fff; + background-color: $colorGreenBright; + transition: + transform 0.12s ease-in-out, + background-color 0.12s ease-in-out; + + grid-column: 1 / 2; + min-width: auto; + grid-row: 1 / 1; + + &:hover { + background-color: darken($colorGreenBright, 4); + opacity: 1; + } + + &.continueButton { + @include Heading; + } + } + + .outer { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr; + height: 100%; + + grid-column: 2 / 3; + grid-row: 1 / 1; + min-width: auto; + + @include S(grid-gap, 5px); + width: 100%; + + > button { + @include S(padding, 3px, 6px); + width: 100%; + white-space: nowrap; + margin: 0 !important; + box-sizing: border-box; + } + + .importButton { + @include IncreasedClickArea(0px); + } + + .newGameButton { + @include IncreasedClickArea(0px); + } + + .modsButton { + @include IncreasedClickArea(0px); + background-color: $modsColor !important; + } + } + } + + .modeButtons { + display: grid; + grid-template-columns: repeat(2, 1fr); + @include S(grid-column-gap, 10px); + align-items: start; + height: 100%; + width: 100%; + } + + .steamSso { + cursor: default; + pointer-events: all; + display: inline-flex; + @include S(padding, 10px); + color: #000; + flex-direction: column; + line-height: 1em; + @include S(gap, 3px); + position: relative; + background: rgba(0, 20, 40, 0.05); + width: 100%; + box-sizing: border-box; + margin-top: auto; + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + + .description { + @include SuperSmallText; + color: rgba(0, 10, 20, 0.5); + @include DarkThemeOverride { + color: rgba(#fff, 0.7); + } + } + // &:hover { + // .tooltip { + // opacity: 1; + // } + // } + + a.ssoSignIn { + background: #171a23 uiResource("steam_signin.png") center center / contain no-repeat; + width: 100%; + box-sizing: border-box; + + @include S(height, 19px); + @include S(width, 110px); + + display: inline-flex; + @include S(border-radius, $globalBorderRadius * 0.5); + transition: opacity 0.12s ease-in-out; + overflow: hidden; + text-indent: -999em; + &:hover { + opacity: 0.9; + } + + box-shadow: 0 D(1.5px) D(4px) rgba(#000, 0.21); + } + + a.ssoSignOut { + width: 100%; + background: $colorRedBright; + color: #fff !important; + display: flex; + align-items: center; + box-sizing: border-box; + justify-content: center; + @include SuperSmallText; + text-transform: uppercase; + + @include S(border-radius, $globalBorderRadius * 0.5); + + box-shadow: 0 D(1.5px) D(4px) rgba(#000, 0.21); + @include S(padding, 2px, 9px); + &:hover { + opacity: 0.95; + } + } + } + + .savegamesMount { + width: 100%; + display: flex; + flex-grow: 1; + flex-direction: column; + @include S(padding, 10px); + box-sizing: border-box; + @include S(min-height, 150px); + + .savegamesNone { + align-items: center; + justify-content: center; + display: flex; + @include PlainText; + flex-grow: 1; + text-align: center; + @include S(padding, 0, 20px); + opacity: 0.5; + + @include DarkThemeOverride { + color: #fff; + } + } + + .savegames { + overflow-y: auto; + width: 100%; + pointer-events: all; + @include S(padding-right, 5px); + margin-right: D(-5px); + @include S(max-height, 150px); + display: grid; + grid-auto-flow: row; + @include S(grid-gap, 5px); + + .savegame { + background: #eee; + @include S(border-radius, $globalBorderRadius); + @include S(padding, 5px); + display: grid; + grid-template-columns: 1fr 1fr auto auto; + grid-template-rows: auto auto; + @include S(grid-column-gap, 4px); + @include S(grid-row-gap, 1px); + + .playtime { + grid-column: 2 / 3; + grid-row: 2 / 3; + @include SuperSmallText; + opacity: 0.5; + } + + .level { + grid-column: 1 / 2; + grid-row: 2 / 3; + @include SuperSmallText; + opacity: 0.5; + } + + .name { + grid-column: 1 / 3; + grid-row: 1 / 2; + @include PlainText; + display: inline-flex; + align-items: center; + + > span { + display: inline-flex; + @include S(max-width, 140px); + overflow: hidden; + } + } + + button.resumeGame, + button.downloadGame, + button.deleteGame, + button.renameGame { + padding: 0; + align-self: center; + justify-self: center; + @include IncreasedClickArea(0px); + background: #44484a center center / 40% no-repeat; + } + + button.resumeGame { + background-color: #44484a; + & { + background-image: uiResource("icons/play.png"); + } + } + + button.downloadGame { + grid-column: 3 / 4; + grid-row: 1 / 2; + background-color: transparent; + + & { + background-image: uiResource("icons/download.png"); + } + @include S(width, 15px); + @include IncreasedClickArea(0px); + @include S(height, 15px); + background-size: 80%; + align-self: start; + border-radius: 0; + opacity: 0.4; + + &:hover { + opacity: 0.5; + } + + @include DarkThemeInvert; + } + + button.deleteGame { + grid-column: 3 / 4; + grid-row: 2 / 3; + background-color: transparent; + @include IncreasedClickArea(0px); + + & { + background-image: uiResource("icons/delete.png"); + } + @include S(width, 15px); + @include S(height, 15px); + align-self: end; + background-size: 80%; + border-radius: 0; + opacity: 0.4; + + &:hover { + opacity: 0.5; + } + + @include DarkThemeInvert; + } + + button.renameGame { + background-color: transparent; + @include IncreasedClickArea(2px); + + & { + background-image: uiResource("icons/edit_key.png"); + } + @include S(width, 10px); + @include S(height, 10px); + align-self: center; + justify-self: center; + border-radius: 0; + background-size: 90%; + opacity: 0.4; + @include S(margin-left, 4px); + + &:hover { + opacity: 0.5; + } + + @include DarkThemeInvert; + } + + button.resumeGame { + grid-column: 4 / 5; + grid-row: 1 / 3; + margin: 0; + @include S(width, 32px); + height: 100%; + @include S(margin-left, 4px); + + @include DarkThemeOverride { + background-color: lighten($darkModeControlsBackground, 10); + } + } + } + } + } + } + + .bottomContainer { + display: flex; + align-items: center; + justify-content: center; + flex-direction: row; + @include S(padding-top, 10px); + height: 100%; + width: 100%; + box-sizing: border-box; + + .buttons { + display: grid; + grid-template-columns: repeat(2, 1fr); + @include S(grid-column-gap, 10px); + align-items: start; + height: 100%; + width: 100%; + box-sizing: border-box; + } + } + + .socialLinks { + position: fixed; + z-index: 100; + display: flex; + flex-direction: row; + @include S(gap, 9px); + @include S(top, 25px); + @include S(left, 25px); + + @media (max-aspect-ratio: 1460/1000) { + position: unset; + top: unset; + left: unset; + .label { + display: none; + } + } + + > .boxLink { + pointer-events: all; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + cursor: pointer; + @include S(gap, 3px); + @include S(width, 35px); + + .label { + @include SuperSmallText; + font-weight: bold; + box-sizing: border-box; + text-transform: uppercase; + opacity: 0; + transition: opacity 0.12s ease-in-out; + } + + &:hover { + .label { + opacity: 1; + .thirdpartyLogo { + background-color: #fff; + } + } + } + + .thirdpartyLogo { + display: inline-flex; + @include S(width, 35px); + @include S(height, 35px); + background: rgba(#fff, 0.9) center center / contain no-repeat; + border-radius: 50%; + box-shadow: 0 D(2px) D(3px) rgba(#000, 0.1); + + transition: background-color 0.12s ease-in-out; + + &.githubLogo { + background-image: uiResource("main_menu/github.png"); + background-size: 66%; + background-position: 54% 50%; + } + + &.discordLogo { + background-image: uiResource("main_menu/discord.svg"); + background-size: 66%; + background-position: 50% 53%; + } + + &.redditLogo { + background-image: uiResource("main_menu/reddit.svg"); + background-size: 65%; + } + &.twitterLogo { + background-image: uiResource("main_menu/twitter.svg"); + background-size: 60%; + background-position: 60% 58%; + } + + &.patreonLogo { + background-image: uiResource("main_menu/patreon.svg"); + background-size: 60%; + background-position: 60% 60%; + } + + &.steamLogo { + background-image: uiResource("main_menu/steam.svg"); + background-size: 105%; + } + } + } + } + + .footer { + display: flex; + justify-content: center; + align-self: end; + align-items: center; + position: relative; + z-index: 20; + width: 100%; + box-sizing: border-box; + @include S(gap, 30px); + @include S(padding, 15px, 25px, 15px, 20px); + + .author { + margin-left: auto; + display: flex; + @include S(width, 110px); + justify-content: flex-end; + + a { + &:hover img { + opacity: 0.85; + } + position: relative; + display: flex; + align-items: center; + justify-content: center; + + img { + transition: opacity 0.12s ease-in-out; + @include S(width, 82px * 0.8); + @include S(height, 25px * 0.8); + filter: invert(100%); + opacity: 0.75; + } + } + } + + .footerGrow { + flex-grow: 1; + display: flex; + align-items: center; + justify-content: flex-start; + @include S(gap, 15px); + > a { + @include SuperSmallText; + @include S(padding, 2px); + font-weight: bold; + color: #000; + opacity: 0.6; + transition: opacity 0.12s ease-in-out; + &:hover { + opacity: 1; + } + } + } + } + + @include DarkThemeOverride { + background: rgba($darkModeGameBackground, 0.5) center center / cover !important; + + .mainContainer { + background: $darkModeControlsBackground; + + .savegames .savegame { + background: darken($darkModeControlsBackground, 5); + color: white; + } + } + + .modsOverview { + background: $darkModeControlsBackground; + + .modsList { + border-color: darken($darkModeControlsBackground, 5); + + .mod { + background: darken($darkModeControlsBackground, 5); + color: white; + } + } + + .dlcHint { + color: $accentColorBright; + } + } + } +} diff --git a/src/css/states/mobile_warning.scss b/src/css/states/mobile_warning.scss index 947d530c..d4c9a9a8 100644 --- a/src/css/states/mobile_warning.scss +++ b/src/css/states/mobile_warning.scss @@ -1,51 +1,51 @@ -#state_MobileWarningState { - display: flex; - align-items: center; - background: #555b75 !important; - @include S(padding, 20px); - box-sizing: border-box; - justify-content: center; - flex-direction: column; - - .logo { - width: 80%; - max-width: 200px; - margin-bottom: 10px; - } - - p { - color: rgba(#fff, 0.5); - display: block; - margin-bottom: 13px; - font-size: 16px; - line-height: 20px; - max-width: 300px; - text-align: left; - a { - color: $colorBlueBright; - } - } - - .standaloneLink { - width: 200px; - height: 48px; - min-height: 40px; - & { - background: #000 uiResource("steam_link_btn/0.png") center center / contain no-repeat; - } - display: block; - text-indent: -999em; - cursor: pointer; - margin-top: 10px; - pointer-events: all; - transition: all 0.12s ease-in; - transition-property: opacity, transform; - @include S(border-radius, $globalBorderRadius); - overflow: hidden; - - &:hover { - transform: skewX(-1deg) scale(1.02); - opacity: 0.9; - } - } -} +#state_MobileWarningState { + display: flex; + align-items: center; + background: #555b75 !important; + @include S(padding, 20px); + box-sizing: border-box; + justify-content: center; + flex-direction: column; + + .logo { + width: 80%; + max-width: 200px; + margin-bottom: 10px; + } + + p { + color: rgba(#fff, 0.5); + display: block; + margin-bottom: 13px; + font-size: 16px; + line-height: 20px; + max-width: 300px; + text-align: left; + a { + color: $colorBlueBright; + } + } + + .standaloneLink { + width: 200px; + height: 48px; + min-height: 40px; + & { + background: #000 uiResource("steam_link_btn/0.png") center center / contain no-repeat; + } + display: block; + text-indent: -999em; + cursor: pointer; + margin-top: 10px; + pointer-events: all; + transition: all 0.12s ease-in; + transition-property: opacity, transform; + @include S(border-radius, $globalBorderRadius); + overflow: hidden; + + &:hover { + transform: skewX(-1deg) scale(1.02); + opacity: 0.9; + } + } +} diff --git a/src/css/states/preload.scss b/src/css/states/preload.scss index dee33c06..0e106bd9 100644 --- a/src/css/states/preload.scss +++ b/src/css/states/preload.scss @@ -1,153 +1,153 @@ -#state_PreloadState { - .changelogDialogEntry { - @include S(margin-top, 10px); - - width: 100%; - flex-direction: column; - text-align: left; - padding: 10px; - box-sizing: border-box; - background: #eef1f4; - @include S(border-radius, $globalBorderRadius); - - @include DarkThemeOverride { - background: #33343c; - } - - .version { - @include Heading; - } - .date { - @include PlainText; - &::before { - content: " | "; - } - color: #aaabaf; - } - - .changes { - @include PlainText; - @include S(padding-left, 15px); - @include S(margin-top, 10px); - strong { - background: $colorBlueBright; - color: #fff; - text-transform: uppercase; - @include S(padding, 1px, 2px); - @include S(margin-right, 3px); - } - a { - color: $colorBlueBright; - } - li { - @include SuperSmallText; - @include S(margin-bottom, 5px); - } - } - } - - .failureBox { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 999999; - background: #d5d8de; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - - .logo { - img { - @include S(width, 240px); - } - - @include S(margin-bottom, 30px); - } - - @include InlineAnimation(0.3s ease-in-out) { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } - } - - .failureInner { - // background: darken($mainBgColor, 6); - @include S(max-width, 350px); - margin: 0 20px; - text-align: left; - - @include BoxShadow3D(#fff); - @include S(padding, 15px); - @include S(border-radius, $globalBorderRadius); - @include DropShadow; - - .errorHeader { - color: #ef5072; - } - - .errorMessage { - @include PlainText; - display: block; - color: #666; - text-align: left; - @include BreakText; - hyphens: auto; - // border: dotted #666; - // @include S(border-width, 1px, 0); - @include S(padding, 10px, 0); - @include S(margin-top, 10px); - } - - .supportHelp { - @include S(margin-top, 10px); - @include PlainText; - - .email { - color: $themeColor; - cursor: pointer; - pointer-events: all; - } - } - - .lower { - display: flex; - align-items: center; - @include S(margin-top, 16px); - - i { - flex-grow: 1; - text-align: right; - color: #777; - @include PlainText; - } - - button.resetApp { - @include Button3D($colorRedBright); - @include PlainText; - @include S(padding, 5px, 8px, 4px); - color: #fff; - } - } - } - } - - /* Animations */ - .status { - transform: scale(0.7) $hardwareAcc; - opacity: 0; - @include StateAnim(transform, opacity); - } - - &.arrived { - .status { - opacity: 1; - transform: none; - } - } -} +#state_PreloadState { + .changelogDialogEntry { + @include S(margin-top, 10px); + + width: 100%; + flex-direction: column; + text-align: left; + padding: 10px; + box-sizing: border-box; + background: #eef1f4; + @include S(border-radius, $globalBorderRadius); + + @include DarkThemeOverride { + background: #33343c; + } + + .version { + @include Heading; + } + .date { + @include PlainText; + &::before { + content: " | "; + } + color: #aaabaf; + } + + .changes { + @include PlainText; + @include S(padding-left, 15px); + @include S(margin-top, 10px); + strong { + background: $colorBlueBright; + color: #fff; + text-transform: uppercase; + @include S(padding, 1px, 2px); + @include S(margin-right, 3px); + } + a { + color: $colorBlueBright; + } + li { + @include SuperSmallText; + @include S(margin-bottom, 5px); + } + } + } + + .failureBox { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 999999; + background: #d5d8de; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + .logo { + img { + @include S(width, 240px); + } + + @include S(margin-bottom, 30px); + } + + @include InlineAnimation(0.3s ease-in-out) { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } + } + + .failureInner { + // background: darken($mainBgColor, 6); + @include S(max-width, 350px); + margin: 0 20px; + text-align: left; + + @include BoxShadow3D(#fff); + @include S(padding, 15px); + @include S(border-radius, $globalBorderRadius); + @include DropShadow; + + .errorHeader { + color: #ef5072; + } + + .errorMessage { + @include PlainText; + display: block; + color: #666; + text-align: left; + @include BreakText; + hyphens: auto; + // border: dotted #666; + // @include S(border-width, 1px, 0); + @include S(padding, 10px, 0); + @include S(margin-top, 10px); + } + + .supportHelp { + @include S(margin-top, 10px); + @include PlainText; + + .email { + color: $themeColor; + cursor: pointer; + pointer-events: all; + } + } + + .lower { + display: flex; + align-items: center; + @include S(margin-top, 16px); + + i { + flex-grow: 1; + text-align: right; + color: #777; + @include PlainText; + } + + button.resetApp { + @include Button3D($colorRedBright); + @include PlainText; + @include S(padding, 5px, 8px, 4px); + color: #fff; + } + } + } + } + + /* Animations */ + .status { + transform: scale(0.7) $hardwareAcc; + opacity: 0; + @include StateAnim(transform, opacity); + } + + &.arrived { + .status { + opacity: 1; + transform: none; + } + } +} diff --git a/src/css/states/settings.scss b/src/css/states/settings.scss index 98135909..c3d2e5d9 100644 --- a/src/css/states/settings.scss +++ b/src/css/states/settings.scss @@ -1,272 +1,272 @@ -#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; - - &.noabout { - align-self: start; - } - - @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; - z-index: 100; - justify-content: center; - background: rgba(#fff, 0.5); - text-transform: uppercase; - color: $colorRedBright; - @include S(border-radius, $globalBorderRadius); - - @include DarkThemeOverride { - background: rgba(#55585f, 0.95); - } - } - } - - .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); - - & { - 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; - - & { - 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; - } - } - } - } - } - } - } -} +#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; + + &.noabout { + align-self: start; + } + + @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; + z-index: 100; + justify-content: center; + background: rgba(#fff, 0.5); + text-transform: uppercase; + color: $colorRedBright; + @include S(border-radius, $globalBorderRadius); + + @include DarkThemeOverride { + background: rgba(#55585f, 0.95); + } + } + } + + .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); + + & { + 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; + + & { + 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; + } + } + } + } + } + } + } +} diff --git a/src/css/textual_game_state.scss b/src/css/textual_game_state.scss index 6e3fad30..16249d01 100644 --- a/src/css/textual_game_state.scss +++ b/src/css/textual_game_state.scss @@ -1,82 +1,82 @@ -.gameState.textualState { - display: grid; - grid-template-rows: auto 1fr; - box-sizing: border-box; - @include S(padding, 32px); - height: 100vh; - - .headerBar { - display: flex; - - h1 { - display: grid; - grid-template-columns: auto 1fr; - align-items: center; - pointer-events: all; - cursor: pointer; - @include SuperHeading; - text-transform: uppercase; - color: #333438; - position: relative; - @include IncreasedClickArea(10px); - } - - .backButton { - @include S(width, 30px); - @include S(height, 30px); - @include S(margin-right, 10px); - @include S(margin-left, -5px); - & { - background: uiResource("icons/state_back_button.png") center center / 70% no-repeat; - } - } - @include S(margin-bottom, 20px); - } - - > .container { - display: flex; - justify-content: center; - width: 100%; - overflow-y: auto; - - > .content { - width: 100%; - background: #fff; - @include S(border-radius, $globalBorderRadius); - @include S(padding, 10px); - height: 100%; - overflow-y: auto; - box-sizing: border-box; - pointer-events: all; - - a { - color: $colorBlueBright; - } - - .categoryLabel { - display: block; - text-transform: uppercase; - @include S(margin-top, 15px); - @include S(margin-bottom, 15px); - @include Heading; - } - } - } - - @include DarkThemeOverride { - .headerBar { - h1 { - color: #e2e0db; - } - - .backButton { - filter: invert(1); - } - } - - > .container > .content { - background: $darkModeControlsBackground; - color: #eee; - } - } -} +.gameState.textualState { + display: grid; + grid-template-rows: auto 1fr; + box-sizing: border-box; + @include S(padding, 32px); + height: 100vh; + + .headerBar { + display: flex; + + h1 { + display: grid; + grid-template-columns: auto 1fr; + align-items: center; + pointer-events: all; + cursor: pointer; + @include SuperHeading; + text-transform: uppercase; + color: #333438; + position: relative; + @include IncreasedClickArea(10px); + } + + .backButton { + @include S(width, 30px); + @include S(height, 30px); + @include S(margin-right, 10px); + @include S(margin-left, -5px); + & { + background: uiResource("icons/state_back_button.png") center center / 70% no-repeat; + } + } + @include S(margin-bottom, 20px); + } + + > .container { + display: flex; + justify-content: center; + width: 100%; + overflow-y: auto; + + > .content { + width: 100%; + background: #fff; + @include S(border-radius, $globalBorderRadius); + @include S(padding, 10px); + height: 100%; + overflow-y: auto; + box-sizing: border-box; + pointer-events: all; + + a { + color: $colorBlueBright; + } + + .categoryLabel { + display: block; + text-transform: uppercase; + @include S(margin-top, 15px); + @include S(margin-bottom, 15px); + @include Heading; + } + } + } + + @include DarkThemeOverride { + .headerBar { + h1 { + color: #e2e0db; + } + + .backButton { + filter: invert(1); + } + } + + > .container > .content { + background: $darkModeControlsBackground; + color: #eee; + } + } +} diff --git a/src/css/variables.scss b/src/css/variables.scss index 3ae8878d..1c87b3cf 100644 --- a/src/css/variables.scss +++ b/src/css/variables.scss @@ -1,180 +1,180 @@ -$globalBorderRadius: 6px; - -// When to reduce control elements size for small devices -$layoutExpandMinWidth: 340px; - -// Font sizes and line heights -$superHeadingFontSize: 25px; -$superHeadingLineHeight: 24px; - -$breakTooltipShowStatsPx: 1023px; - -$headingFontSize: 19px; -$headingLineHeight: 21px; - -$textFontSize: 16px; -$textLineHeight: 21px; - -$plainTextFontSize: 13px; -$plainTextLineHeight: 17px; - -$superDuperSmallTextFontSize: 8px; -$superDuperSmallTextLineHeight: 9px; -$superSmallTextFontSize: 10px; -$superSmallTextLineHeight: 13px; -$buttonFontSize: 14px; -$buttonLineHeight: 18px; - -// Main background color -$mainBgColor: #dee1ea; - -// Accent colors - -$accentColorBright: #e1e4ed; -$accentColorDark: #7d808a; -$colorGreenBright: #66bb6a; -$colorBlueBright: rgb(74, 151, 223); -$colorRedBright: #ef5072; -$colorOrangeBright: #ef9d50; -$themeColor: #393747; -$ingameHudBg: rgba(#33343b, 0.9); -$modsColor: rgb(214, 60, 228); - -$text3dColor: #f4ffff; - -$darkModeGameBackground: #535866; -$darkModeControlsBackground: darken($darkModeGameBackground, 5); - -// Dialog properties -$modalDialogBg: rgba(160, 165, 180, 0.8); -$dialogBgColor: lighten($mainBgColor, 10); - -$lightFontWeight: normal; -$boldFontWeight: 600; - -$iconSizeSmall: 30px; -$iconSizeMedium: 40px; -$iconSizeLarge: 60px; - -// Poppins 500 -// Rubik 400 -// Cairo 400 -// Viga 400 -// Sniglet 400 - -$mainFont: "GameFont", sans-serif; -// $mainFont: "DK Canoodle"; -// $mainFont: "MADE Florence Sans"; -$numberFont: $mainFont; -$textFont: $mainFont; - -$mainFontWeight: 400; -$mainFontSpacing: 0.01em; -$mainFontScale: 1; - -@mixin DebugText($color) { - // font-size: 3px; - // &, - // * { - // color: $color !important; - // } -} - -@mixin SuperDuperSmallText { - @include ScaleFont($superDuperSmallTextFontSize, $superDuperSmallTextLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; - @include DebugText(green); -} - -@mixin SuperSmallText { - @include ScaleFont($superSmallTextFontSize, $superSmallTextLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; - @include DebugText(green); -} - -@mixin PlainText { - @include ScaleFont($plainTextFontSize, $plainTextLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; - - @include DebugText(red); -} - -@mixin Text { - @include ScaleFont($textFontSize, $textLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - - letter-spacing: $mainFontSpacing; - - @include DebugText(blue); -} - -@mixin Heading { - @include ScaleFont($headingFontSize, $headingLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; - - @include DebugText(yellow); -} - -@mixin SuperHeading { - @include ScaleFont($superHeadingFontSize, $superHeadingLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; - - @include DebugText(orange); -} - -@mixin ButtonText { - @include ScaleFont($buttonFontSize, $buttonLineHeight); - font-weight: $mainFontWeight; - font-family: $mainFont; - letter-spacing: $mainFontSpacing; - @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")); -} +$globalBorderRadius: 6px; + +// When to reduce control elements size for small devices +$layoutExpandMinWidth: 340px; + +// Font sizes and line heights +$superHeadingFontSize: 25px; +$superHeadingLineHeight: 24px; + +$breakTooltipShowStatsPx: 1023px; + +$headingFontSize: 19px; +$headingLineHeight: 21px; + +$textFontSize: 16px; +$textLineHeight: 21px; + +$plainTextFontSize: 13px; +$plainTextLineHeight: 17px; + +$superDuperSmallTextFontSize: 8px; +$superDuperSmallTextLineHeight: 9px; +$superSmallTextFontSize: 10px; +$superSmallTextLineHeight: 13px; +$buttonFontSize: 14px; +$buttonLineHeight: 18px; + +// Main background color +$mainBgColor: #dee1ea; + +// Accent colors + +$accentColorBright: #e1e4ed; +$accentColorDark: #7d808a; +$colorGreenBright: #66bb6a; +$colorBlueBright: rgb(74, 151, 223); +$colorRedBright: #ef5072; +$colorOrangeBright: #ef9d50; +$themeColor: #393747; +$ingameHudBg: rgba(#33343b, 0.9); +$modsColor: rgb(214, 60, 228); + +$text3dColor: #f4ffff; + +$darkModeGameBackground: #535866; +$darkModeControlsBackground: darken($darkModeGameBackground, 5); + +// Dialog properties +$modalDialogBg: rgba(160, 165, 180, 0.8); +$dialogBgColor: lighten($mainBgColor, 10); + +$lightFontWeight: normal; +$boldFontWeight: 600; + +$iconSizeSmall: 30px; +$iconSizeMedium: 40px; +$iconSizeLarge: 60px; + +// Poppins 500 +// Rubik 400 +// Cairo 400 +// Viga 400 +// Sniglet 400 + +$mainFont: "GameFont", sans-serif; +// $mainFont: "DK Canoodle"; +// $mainFont: "MADE Florence Sans"; +$numberFont: $mainFont; +$textFont: $mainFont; + +$mainFontWeight: 400; +$mainFontSpacing: 0.01em; +$mainFontScale: 1; + +@mixin DebugText($color) { + // font-size: 3px; + // &, + // * { + // color: $color !important; + // } +} + +@mixin SuperDuperSmallText { + @include ScaleFont($superDuperSmallTextFontSize, $superDuperSmallTextLineHeight); + font-weight: $mainFontWeight; + font-family: $mainFont; + letter-spacing: $mainFontSpacing; + @include DebugText(green); +} + +@mixin SuperSmallText { + @include ScaleFont($superSmallTextFontSize, $superSmallTextLineHeight); + font-weight: $mainFontWeight; + font-family: $mainFont; + letter-spacing: $mainFontSpacing; + @include DebugText(green); +} + +@mixin PlainText { + @include ScaleFont($plainTextFontSize, $plainTextLineHeight); + font-weight: $mainFontWeight; + font-family: $mainFont; + letter-spacing: $mainFontSpacing; + + @include DebugText(red); +} + +@mixin Text { + @include ScaleFont($textFontSize, $textLineHeight); + font-weight: $mainFontWeight; + font-family: $mainFont; + + letter-spacing: $mainFontSpacing; + + @include DebugText(blue); +} + +@mixin Heading { + @include ScaleFont($headingFontSize, $headingLineHeight); + font-weight: $mainFontWeight; + font-family: $mainFont; + letter-spacing: $mainFontSpacing; + + @include DebugText(yellow); +} + +@mixin SuperHeading { + @include ScaleFont($superHeadingFontSize, $superHeadingLineHeight); + font-weight: $mainFontWeight; + font-family: $mainFont; + letter-spacing: $mainFontSpacing; + + @include DebugText(orange); +} + +@mixin ButtonText { + @include ScaleFont($buttonFontSize, $buttonLineHeight); + font-weight: $mainFontWeight; + font-family: $mainFont; + letter-spacing: $mainFontSpacing; + @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")); +}