mirror of
https://github.com/tobspr/shapez.io.git
synced 2025-06-13 13:04:03 +00:00
Fixed scss spaces
This commit is contained in:
DJ1TJOO
parent
7b755c8956
commit
82a830e9a2
@ -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;
|
||||
}
|
||||
|
||||
@ -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};
|
||||
}
|
||||
|
||||
@ -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 */
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user