diff --git a/src/css/animations.scss b/src/css/animations.scss index 7be01daa..16ba7fd1 100644 --- a/src/css/animations.scss +++ b/src/css/animations.scss @@ -3,13 +3,16 @@ 0% { transform: scale(1, 1); } + 50% { transform: scale(1.03, 1.03); } + 100% { transform: scale(1, 1); } } + .#{$animName} { animation: $animName 0.2s ease-in-out; } diff --git a/src/css/dynamic_ui.scss b/src/css/dynamic_ui.scss index c27028ed..80b9892c 100644 --- a/src/css/dynamic_ui.scss +++ b/src/css/dynamic_ui.scss @@ -3,6 +3,7 @@ @if type-of($number) == "number" and not unitless($number) { @return $number / ($number * 0 + 1); } + @return $number; } @@ -24,15 +25,19 @@ @if $important == true { $impSuffix: "!important"; } + $v1: D($v1); @if $v2 != "" { $v2: D($v2); } + @if $v3 != "" { $v3: D($v3); } + @if $v4 != "" { $v4: D($v4); } + #{$propName}: #{$v1} #{$v2} #{$v3} #{$v4} #{$impSuffix}; } diff --git a/src/css/resources.scss b/src/css/resources.scss index 93f4092d..08bfa43f 100644 --- a/src/css/resources.scss +++ b/src/css/resources.scss @@ -1,6 +1,7 @@ $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; + @each $building in $buildings { [data-icon="building_icons/#{$building}.png"] { /* @load-async */ @@ -67,6 +68,7 @@ $icons: notification_saved, notification_success, notification_upgrade; $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; + @each $language in $languages { [data-languageicon="#{$language}"] { /* @load-async */ diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index 929025b9..1eccb2d7 100644 --- a/src/css/states/main_menu.scss +++ b/src/css/states/main_menu.scss @@ -3,8 +3,10 @@ align-items: center; justify-content: center; flex-direction: column; + // background: #aaacb4 center center / cover !important; background: #bbc2cf center center / cover !important; + .topButtons { position: absolute; @include S(top, 20px); @@ -12,6 +14,7 @@ display: grid; grid-auto-flow: column; @include S(grid-gap, 15px); + .settingsButton, .exitAppButton, .languageChoose { @@ -30,11 +33,13 @@ opacity: 1; } } + .exitAppButton { /* @load-async */ background-image: uiResource("icons/main_menu_exit.png"); background-size: 90%; } + .languageChoose { @include S(border-radius, 8px); border: solid #222428; @@ -44,6 +49,7 @@ opacity: 0.8; } } + .fullscreenBackgroundVideo { // display: none !important; z-index: -1; @@ -52,14 +58,17 @@ bottom: 50%; min-width: 100%; min-height: 100%; + opacity: 0; display: none; transform: translate(50%, 50%); filter: blur(D(3px)); + $opacity: 0.07; &.loaded { display: block; opacity: $opacity; + @include InlineAnimation(0.1s ease-in-out) { 0% { opacity: 0; @@ -70,16 +79,20 @@ } } } + .mainWrapper { @include S(padding, 0, 10px); align-items: start; justify-items: center; + @include S(grid-column-gap, 10px); display: grid; grid-template-columns: 1fr; + &.demo { grid-template-columns: 1fr 1fr; } + .standaloneBanner { background: rgb(255, 75, 84); @include S(border-radius, $globalBorderRadius + 4); @@ -87,12 +100,15 @@ border: solid rgba(#fff, 0.15); @include S(border-width, 4px); @include S(padding, 15px); + display: flex; flex-direction: column; + strong { font-weight: bold; @include S(margin, 0, 4px); } + h3 { @include Heading; font-weight: bold; @@ -100,10 +116,12 @@ text-transform: uppercase; color: #fff; } + p { @include Text; color: #fff; } + ul { @include S(margin-top, 5px); @include S(padding-left, 20px); @@ -111,6 +129,7 @@ @include Text; } } + .steamLink { align-self: center; justify-self: center; @@ -127,7 +146,9 @@ transition: all 0.12s ease-in; transition-property: opacity, transform; transform: skewX(-0.5deg); + @include S(border-radius, $globalBorderRadius); + &:hover { transform: scale(1.02); opacity: 0.9; @@ -135,16 +156,19 @@ } } } + .logo { display: flex; flex-grow: 1; align-items: center; justify-content: center; + flex-direction: column; @include S(padding-top, 20px); img { @include S(width, 350px); } + .demoBadge { @include S(margin, 10px, 0); @include S(width, 100px); @@ -155,6 +179,7 @@ } display: inline-block; } + position: relative; .updateLabel { position: absolute; @@ -164,16 +189,19 @@ font-weight: bold; @include S(right, 40px); @include S(bottom, 20px); + @include InlineAnimation(1.3s ease-in-out infinite) { 50% { transform: translateX(50%) rotate(-7deg) scale(1.1); } } + @include DarkThemeOverride { color: $colorBlueBright; } } } + .betaWarning { @include S(width, 400px); @include PlainText; @@ -184,15 +212,18 @@ @include S(margin-top, 10px); border: #{D(2px)} solid rgba(0, 10, 20, 0.1); } + .sideContainer { display: flex; flex-direction: column; @include S(width, 300px); + .standaloneBanner { flex-grow: 1; @include S(margin-bottom, 10px); } } + .mainContainer { display: flex; align-items: center; @@ -205,11 +236,13 @@ height: 100%; width: 100%; box-sizing: border-box; + .buttons { display: flex; flex-direction: column; align-items: center; } + .browserWarning { @include S(margin-bottom, 10px); background-color: $colorRedBright; @@ -219,6 +252,7 @@ @include S(padding, 5px); @include S(width, 300px); } + .playButton, .continueButton { @include SuperHeading; @@ -230,23 +264,28 @@ color: #fff; background-color: $colorGreenBright; transition: transform 0.12s ease-in-out, background-color 0.12s ease-in-out; + &:hover { background-color: darken($colorGreenBright, 4); opacity: 1; } + &.continueButton { @include Heading; } } + .importButton { @include S(margin-top, 15px); @include IncreasedClickArea(0px); } + .newGameButton { @include IncreasedClickArea(0px); @include S(margin-top, 15px); @include S(margin-left, 15px); } + .savegames { @include S(max-height, 105px); overflow-y: auto; @@ -257,6 +296,7 @@ grid-auto-flow: row; @include S(grid-gap, 5px); @include S(margin-top, 10px); + .savegame { background: #eee; @include S(border-radius, $globalBorderRadius); @@ -266,12 +306,14 @@ 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; @@ -284,18 +326,21 @@ vertical-align: middle; } } + .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, @@ -307,6 +352,7 @@ @include IncreasedClickArea(0px); background: #44484a center center / 40% no-repeat; } + button.resumeGame { background-color: #44484a; & { @@ -314,10 +360,12 @@ background-image: uiResource("icons/play.png"); } } + button.downloadGame { grid-column: 3 / 4; grid-row: 1 / 2; background-color: transparent; + & { /* @load-async */ background-image: uiResource("icons/download.png"); @@ -328,16 +376,20 @@ background-size: 80%; align-self: start; 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); + & { /* @load-async */ background-image: uiResource("icons/delete.png"); @@ -347,14 +399,18 @@ align-self: end; background-size: 80%; opacity: 0.4; + &:hover { opacity: 0.5; } + @include DarkThemeInvert; } + button.renameGame { background-color: transparent; @include IncreasedClickArea(2px); + & { /* @load-async */ background-image: uiResource("icons/edit_key.png"); @@ -363,19 +419,24 @@ @include S(height, 10px); align-self: center; justify-self: center; + background-size: 90%; opacity: 0.4; @include S(margin-left, 4px); + &:hover { opacity: 0.5; } + @include DarkThemeInvert; } + button.gamemode { display: inline-flex; vertical-align: middle; background-color: transparent; @include IncreasedClickArea(2px); + & { /* @load-async */ background-image: uiResource("icons/edit_key.png"); @@ -384,14 +445,18 @@ @include S(height, 8px); align-self: center; justify-self: center; + 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; @@ -399,6 +464,7 @@ @include S(width, 32px); height: 100%; @include S(margin-left, 4px); + @include DarkThemeOverride { background-color: lighten($darkModeControlsBackground, 10); } @@ -406,6 +472,7 @@ } } } + .footer { display: grid; flex-grow: 1; @@ -416,6 +483,7 @@ @include S(padding, 10px); box-sizing: border-box; @include S(grid-gap, 4px); + .author { flex-grow: 1; text-align: right; @@ -425,10 +493,13 @@ color: #333438; } } + @include S(padding, 15px); + $linkBg: #fdfdff; $linkBgHover: darken($linkBg, 2); $linkColor: #55586a; + > .boxLink { display: grid; align-items: center; @@ -442,18 +513,22 @@ @include S(padding-left, 10px); @include S(border-radius, $globalBorderRadius); @include SuperSmallText(); + font-weight: bold; box-sizing: border-box; text-transform: uppercase; color: $linkColor; + transition: background-color 0.12s ease-in-out; pointer-events: all; @include S(width, 120px); @include S(height, 60px); + cursor: pointer; &:hover { background-color: $linkBgHover; } + .thirdpartyLogo { display: inline-block; @include S(width, 50px); @@ -470,6 +545,7 @@ } } } + > .sidelinks { display: grid; align-items: flex-start; @@ -477,10 +553,12 @@ grid-template-rows: 1fr 1fr 1fr; @include S(grid-gap, 3px); @include S(height, 60px); + > a { color: $linkColor; background: $linkBg; height: 100%; + &:hover { background-color: $linkBgHover; } @@ -491,6 +569,7 @@ display: flex; align-items: center; justify-content: flex-start; + @include S(padding-left, 25px); box-sizing: border-box; font-weight: bold; @@ -498,7 +577,9 @@ background-size: #{D(12px)}; background-repeat: no-repeat; @include S(border-radius, $globalBorderRadius); + transition: background-color 0.12s ease-in-out; + &.redditLink { /* @load-async */ background-image: uiResource("main_menu/reddit.svg"); @@ -514,26 +595,32 @@ } } } + @include DarkThemeOverride { background: $darkModeGameBackground center center / cover !important; + .mainContainer { background: $darkModeControlsBackground; + .savegames .savegame { background: darken($darkModeControlsBackground, 5); color: white; } } + .footer { > a, .sidelinks > a { background-color: $darkModeControlsBackground; color: #eee; + &:hover { background-color: darken($darkModeControlsBackground, 5); } } .author { color: #bdbdbd; + > a { color: white; }