mirror of
https://github.com/tobspr/shapez.io.git
synced 2025-12-09 16:21:51 +00:00
Remove and simplify SCSS styles
Remove some unused classes, mixins and variables, then inline ones that have just a few usages. Also remove a few redundant properties and replace align-items: center + justify-items: center with place-items: center.
This commit is contained in:
Даниїл Григор'єв
parent
7c8e11573b
commit
d845cb33a5
@ -27,7 +27,7 @@ body {
|
||||
color: #555;
|
||||
user-select: none;
|
||||
background: inherit !important;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
@each $animName in ("changeAnimEven", "changeAnimOdd") {
|
||||
@keyframes #{$animName} {
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -31,7 +31,7 @@ body {
|
||||
color: #555;
|
||||
user-select: none;
|
||||
background: inherit;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@include Text;
|
||||
@ -64,7 +64,7 @@ button {
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@include TextShadow3D;
|
||||
color: $legacyTextShadow3DColor;
|
||||
}
|
||||
|
||||
.styledButton {
|
||||
@ -113,7 +113,7 @@ input[type="email"] {
|
||||
opacity: 0.4;
|
||||
}
|
||||
transition: background-color 0.1s ease-in-out !important;
|
||||
@include TextShadow3D(#fff);
|
||||
color: #fff;
|
||||
@include BoxShadow3D(lighten($mainBgColor, 30));
|
||||
&:focus {
|
||||
@include BoxShadow3D(lighten($mainBgColor, 35));
|
||||
@ -212,17 +212,13 @@ canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.badged {
|
||||
color: color($purple, 300);
|
||||
}
|
||||
|
||||
.prefab_LoadingTextWithAnim {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-transform: uppercase;
|
||||
@include Text;
|
||||
@include TextShadow3D;
|
||||
color: $legacyTextShadow3DColor;
|
||||
opacity: 1;
|
||||
z-index: 20;
|
||||
color: #393747;
|
||||
@ -317,7 +313,7 @@ canvas {
|
||||
width: 80vw;
|
||||
@include BoxShadow3D(lighten($mainBgColor, 10), $size: 1px);
|
||||
position: relative;
|
||||
@include TextShadow3D(#fff);
|
||||
color: #fff;
|
||||
height: 2px;
|
||||
.inner {
|
||||
position: absolute !important;
|
||||
@ -374,7 +370,7 @@ canvas {
|
||||
background-color 0.3s ease-in-out,
|
||||
box-shadow 0.4s ease-in-out !important;
|
||||
position: relative;
|
||||
@include BorderRadius(20px);
|
||||
@include S(border-radius, 20px);
|
||||
@include BoxShadow3D($bgColor, $size: 2px);
|
||||
&.loading {
|
||||
opacity: 0.2;
|
||||
@ -389,7 +385,7 @@ canvas {
|
||||
transition: margin-left 0.4s ease-in-out !important;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
@include BorderRadius(20px);
|
||||
@include S(border-radius, 20px);
|
||||
@include BoxShadow3D(#fff, $size: 1px);
|
||||
}
|
||||
&.checked {
|
||||
|
||||
@ -192,22 +192,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
place-items: center;
|
||||
|
||||
canvas {
|
||||
pointer-events: all;
|
||||
@ -244,9 +235,6 @@
|
||||
@include SuperSmallText;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.name {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
> button,
|
||||
> .button {
|
||||
@include PlainText;
|
||||
background: green;
|
||||
@include S(width, 30px);
|
||||
@include S(height, 30px);
|
||||
|
||||
|
||||
@ -8,8 +8,7 @@
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
grid-auto-columns: 1fr;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
place-items: center;
|
||||
|
||||
strong {
|
||||
text-transform: uppercase;
|
||||
|
||||
@ -22,8 +22,7 @@
|
||||
display: grid;
|
||||
width: 100%;
|
||||
@include S(grid-row-gap, 10px);
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.infoArea {
|
||||
|
||||
@ -184,8 +184,7 @@
|
||||
@include S(height, 60px);
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
place-items: center;
|
||||
|
||||
.counter {
|
||||
grid-column: 1 / 2;
|
||||
|
||||
@ -18,12 +18,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.withinDemo {
|
||||
> .dialog {
|
||||
@include S(padding-top, 60px);
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
// background: rgba(#222428, 0.5);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
|
||||
@ -7,13 +7,11 @@
|
||||
}
|
||||
|
||||
@import "resources";
|
||||
@import "material_colors";
|
||||
@import "dynamic_ui";
|
||||
@import "variables";
|
||||
|
||||
@import "mixins";
|
||||
@import "common";
|
||||
@import "animations";
|
||||
@import "game_state";
|
||||
@import "textual_game_state";
|
||||
|
||||
|
||||
@ -1,319 +0,0 @@
|
||||
//
|
||||
// color palette
|
||||
|
||||
// sass-lint:disable hex-length
|
||||
|
||||
@function color($color, $value: 500) {
|
||||
@return map-get($color, $value);
|
||||
}
|
||||
|
||||
$red: (
|
||||
50: #ffebee,
|
||||
100: #ffcdd2,
|
||||
200: #ef9a9a,
|
||||
300: #e57373,
|
||||
400: #ef5350,
|
||||
500: #f44336,
|
||||
600: #e53935,
|
||||
700: #d32f2f,
|
||||
800: #c62828,
|
||||
900: #b71c1c,
|
||||
a100: #ff8a80,
|
||||
a200: #ff5252,
|
||||
a400: #ff1744,
|
||||
a700: #d50000,
|
||||
);
|
||||
|
||||
$pink: (
|
||||
50: #fce4ec,
|
||||
100: #f8bbd0,
|
||||
200: #f48fb1,
|
||||
300: #f06292,
|
||||
400: #ec407a,
|
||||
500: #e91e63,
|
||||
600: #d81b60,
|
||||
700: #c2185b,
|
||||
800: #ad1457,
|
||||
900: #880e4f,
|
||||
a100: #ff80ab,
|
||||
a200: #ff4081,
|
||||
a400: #f50057,
|
||||
a700: hsl(333, 84%, 42%),
|
||||
);
|
||||
|
||||
$purple: (
|
||||
50: #f3e5f5,
|
||||
100: #e1bee7,
|
||||
200: #ce93d8,
|
||||
300: #ba68c8,
|
||||
400: #ab47bc,
|
||||
500: #9c27b0,
|
||||
600: #8e24aa,
|
||||
700: #7b1fa2,
|
||||
800: #6a1b9a,
|
||||
900: #4a148c,
|
||||
a100: #ea80fc,
|
||||
a200: #e040fb,
|
||||
a400: #d500f9,
|
||||
a700: #aa00ff,
|
||||
);
|
||||
|
||||
$deep-purple: (
|
||||
50: #ede7f6,
|
||||
100: #d1c4e9,
|
||||
200: #b39ddb,
|
||||
300: #9575cd,
|
||||
400: #7e57c2,
|
||||
500: #673ab7,
|
||||
600: #5e35b1,
|
||||
700: #512da8,
|
||||
800: #4527a0,
|
||||
900: #311b92,
|
||||
a100: #b388ff,
|
||||
a200: #7c4dff,
|
||||
a400: #651fff,
|
||||
a700: #6200ea,
|
||||
);
|
||||
|
||||
$indigo: (
|
||||
50: #e8eaf6,
|
||||
100: #c5cae9,
|
||||
200: #9fa8da,
|
||||
300: #7986cb,
|
||||
400: #5c6bc0,
|
||||
500: #3f51b5,
|
||||
600: #3949ab,
|
||||
700: #303f9f,
|
||||
800: #283593,
|
||||
900: #1a237e,
|
||||
a100: #8c9eff,
|
||||
a200: #536dfe,
|
||||
a400: #3d5afe,
|
||||
a700: #304ffe,
|
||||
);
|
||||
|
||||
$blue: (
|
||||
50: #e3f2fd,
|
||||
100: #bbdefb,
|
||||
200: #90caf9,
|
||||
300: #64b5f6,
|
||||
400: #42a5f5,
|
||||
500: #2196f3,
|
||||
600: #1e88e5,
|
||||
700: #1976d2,
|
||||
800: #1565c0,
|
||||
900: #0d47a1,
|
||||
a100: #82b1ff,
|
||||
a200: #448aff,
|
||||
a400: #2979ff,
|
||||
a700: #2962ff,
|
||||
);
|
||||
|
||||
$light-blue: (
|
||||
50: #e1f5fe,
|
||||
100: #b3e5fc,
|
||||
200: #81d4fa,
|
||||
300: #4fc3f7,
|
||||
400: #29b6f6,
|
||||
500: #03a9f4,
|
||||
600: #039be5,
|
||||
700: #0288d1,
|
||||
800: #0277bd,
|
||||
900: #01579b,
|
||||
a100: #80d8ff,
|
||||
a200: #40c4ff,
|
||||
a400: #00b0ff,
|
||||
a700: #0091ea,
|
||||
);
|
||||
|
||||
$cyan: (
|
||||
50: #e0f7fa,
|
||||
100: #b2ebf2,
|
||||
200: #80deea,
|
||||
300: #4dd0e1,
|
||||
400: #26c6da,
|
||||
500: #00bcd4,
|
||||
600: #00acc1,
|
||||
700: #0097a7,
|
||||
800: #00838f,
|
||||
900: #006064,
|
||||
a100: #84ffff,
|
||||
a200: #18ffff,
|
||||
a400: #00e5ff,
|
||||
a700: #00b8d4,
|
||||
);
|
||||
|
||||
$teal: (
|
||||
50: #e0f2f1,
|
||||
100: #b2dfdb,
|
||||
200: #80cbc4,
|
||||
300: #4db6ac,
|
||||
400: #26a69a,
|
||||
500: #009688,
|
||||
600: #00897b,
|
||||
700: #00796b,
|
||||
800: #00695c,
|
||||
900: #004d40,
|
||||
a100: #a7ffeb,
|
||||
a200: #64ffda,
|
||||
a400: #1de9b6,
|
||||
a700: #00bfa5,
|
||||
);
|
||||
|
||||
$green: (
|
||||
50: #e8f5e9,
|
||||
100: #c8e6c9,
|
||||
200: #a5d6a7,
|
||||
300: #81c784,
|
||||
400: #66bb6a,
|
||||
500: #4caf50,
|
||||
600: #43a047,
|
||||
700: #388e3c,
|
||||
800: #2e7d32,
|
||||
900: #1b5e20,
|
||||
a100: #b9f6ca,
|
||||
a200: #69f0ae,
|
||||
a400: #00e676,
|
||||
a700: #00c853,
|
||||
);
|
||||
|
||||
$light-green: (
|
||||
50: #f1f8e9,
|
||||
100: #dcedc8,
|
||||
200: #c5e1a5,
|
||||
300: #aed581,
|
||||
400: #9ccc65,
|
||||
500: #8bc34a,
|
||||
600: #7cb342,
|
||||
700: #689f38,
|
||||
800: #558b2f,
|
||||
900: #33691e,
|
||||
a100: #ccff90,
|
||||
a200: #b2ff59,
|
||||
a400: #76ff03,
|
||||
a700: #64dd17,
|
||||
);
|
||||
|
||||
$lime: (
|
||||
50: #f9fbe7,
|
||||
100: #f0f4c3,
|
||||
200: #e6ee9c,
|
||||
300: #dce775,
|
||||
400: #d4e157,
|
||||
500: #cddc39,
|
||||
600: #c0ca33,
|
||||
700: #afb42b,
|
||||
800: #9e9d24,
|
||||
900: #827717,
|
||||
a100: #f4ff81,
|
||||
a200: #eeff41,
|
||||
a400: #c6ff00,
|
||||
a700: #aeea00,
|
||||
);
|
||||
|
||||
$yellow: (
|
||||
50: #fffde7,
|
||||
100: #fff9c4,
|
||||
200: #fff59d,
|
||||
300: #fff176,
|
||||
400: #ffee58,
|
||||
500: #ffeb3b,
|
||||
600: #fdd835,
|
||||
700: #fbc02d,
|
||||
800: #f9a825,
|
||||
900: #f57f17,
|
||||
a100: #ffff8d,
|
||||
a200: #ffff00,
|
||||
a400: #ffea00,
|
||||
a700: #ffd600,
|
||||
);
|
||||
|
||||
$amber: (
|
||||
50: #fff8e1,
|
||||
100: #ffecb3,
|
||||
200: #ffe082,
|
||||
300: #ffd54f,
|
||||
400: #ffca28,
|
||||
500: #ffc107,
|
||||
600: #ffb300,
|
||||
700: #ffa000,
|
||||
800: #ff8f00,
|
||||
900: #ff6f00,
|
||||
a100: #ffe57f,
|
||||
a200: #ffd740,
|
||||
a400: #ffc400,
|
||||
a700: #ffab00,
|
||||
);
|
||||
|
||||
$orange: (
|
||||
50: #fff3e0,
|
||||
100: #ffe0b2,
|
||||
200: #ffcc80,
|
||||
300: #ffb74d,
|
||||
400: #ffa726,
|
||||
500: #ff9800,
|
||||
600: #fb8c00,
|
||||
700: #f57c00,
|
||||
800: #ef6c00,
|
||||
900: #e65100,
|
||||
a100: #ffd180,
|
||||
a200: #ffab40,
|
||||
a400: #ff9100,
|
||||
a700: #ff6d00,
|
||||
);
|
||||
|
||||
$deep-orange: (
|
||||
50: #fbe9e7,
|
||||
100: #ffccbc,
|
||||
200: #ffab91,
|
||||
300: #ff8a65,
|
||||
400: #ff7043,
|
||||
500: #ff5722,
|
||||
600: #f4511e,
|
||||
700: #e64a19,
|
||||
800: #d84315,
|
||||
900: #bf360c,
|
||||
a100: #ff9e80,
|
||||
a200: #ff6e40,
|
||||
a400: #ff3d00,
|
||||
a700: #dd2c00,
|
||||
);
|
||||
|
||||
$brown: (
|
||||
50: #efebe9,
|
||||
100: #d7ccc8,
|
||||
200: #bcaaa4,
|
||||
300: #a1887f,
|
||||
400: #8d6e63,
|
||||
500: #795548,
|
||||
600: #6d4c41,
|
||||
700: #5d4037,
|
||||
800: #4e342e,
|
||||
900: #3e2723,
|
||||
);
|
||||
|
||||
$grey: (
|
||||
50: #fafafa,
|
||||
100: #f5f5f5,
|
||||
200: #eeeeee,
|
||||
300: #e0e0e0,
|
||||
400: #bdbdbd,
|
||||
500: #9e9e9e,
|
||||
600: #757575,
|
||||
700: #616161,
|
||||
800: #424242,
|
||||
900: #212121,
|
||||
);
|
||||
|
||||
$blue-grey: (
|
||||
50: #eceff1,
|
||||
100: #cfd8dc,
|
||||
200: #b0bec5,
|
||||
300: #90a4ae,
|
||||
400: #78909c,
|
||||
500: #607d8b,
|
||||
600: #546e7a,
|
||||
700: #455a64,
|
||||
800: #37474f,
|
||||
900: #263238,
|
||||
);
|
||||
@ -1,16 +1,3 @@
|
||||
// ----------------------------------------
|
||||
/* 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;
|
||||
}
|
||||
|
||||
// Helper which includes the translateZ webkit fix, use together with Fast animation
|
||||
// $hardwareAcc: translateZ(0);
|
||||
$hardwareAcc: null;
|
||||
|
||||
// ----------------------------------------
|
||||
/* Duplicates an animation and adds two classes .<classPrefix>Even and .<classPrefix>Odd which uses the
|
||||
animation. This can be used to replay the animation by toggling between the classes, because
|
||||
@ -51,76 +38,6 @@ $hardwareAcc: null;
|
||||
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;
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* 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) {
|
||||
@ -158,10 +75,6 @@ $hardwareAcc: null;
|
||||
// }
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
@ -170,57 +83,11 @@ $hardwareAcc: null;
|
||||
@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;
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
$legacyTextShadow3DColor: rgb(222, 234, 238);
|
||||
|
||||
@mixin DarkThemeOverride {
|
||||
@at-root html[data-theme="dark"] &,
|
||||
|
||||
@ -130,25 +130,6 @@
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sideContainer {
|
||||
@ -173,35 +154,6 @@
|
||||
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;
|
||||
@ -214,9 +166,6 @@
|
||||
@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;
|
||||
@ -425,15 +374,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.modeButtons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@include S(grid-column-gap, 10px);
|
||||
align-items: start;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.savegamesMount {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -607,27 +547,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
@ -96,7 +96,7 @@
|
||||
display: block;
|
||||
color: #666;
|
||||
text-align: left;
|
||||
@include BreakText;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
// border: dotted #666;
|
||||
// @include S(border-width, 1px, 0);
|
||||
@ -139,7 +139,7 @@
|
||||
|
||||
/* Animations */
|
||||
.status {
|
||||
transform: scale(0.7) $hardwareAcc;
|
||||
transform: scale(0.7);
|
||||
opacity: 0;
|
||||
@include StateAnim(transform, opacity);
|
||||
}
|
||||
|
||||
@ -85,30 +85,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
$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;
|
||||
|
||||
@ -40,8 +35,6 @@ $themeColor: #393747;
|
||||
$ingameHudBg: rgba(#33343b, 0.9);
|
||||
$modsColor: rgb(214, 60, 228);
|
||||
|
||||
$text3dColor: #f4ffff;
|
||||
|
||||
$darkModeGameBackground: #535866;
|
||||
$darkModeControlsBackground: darken($darkModeGameBackground, 5);
|
||||
|
||||
@ -49,13 +42,6 @@ $darkModeControlsBackground: darken($darkModeGameBackground, 5);
|
||||
$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
|
||||
@ -65,8 +51,6 @@ $iconSizeLarge: 60px;
|
||||
$mainFont: "GameFont", sans-serif;
|
||||
// $mainFont: "DK Canoodle";
|
||||
// $mainFont: "MADE Florence Sans";
|
||||
$numberFont: $mainFont;
|
||||
$textFont: $mainFont;
|
||||
|
||||
@mixin DebugText($color) {
|
||||
// font-size: 3px;
|
||||
|
||||
@ -45,7 +45,6 @@ export class MainMenuState extends GameState {
|
||||
width="${Math.round((710 / 3) * this.app.getEffectiveUiScale())}"
|
||||
height="${Math.round((180 / 3) * this.app.getEffectiveUiScale())}"
|
||||
>
|
||||
${/*showUpdateLabel ? `<span class="updateLabel">MODS UPDATE!</span>` : ""*/ ""}
|
||||
</div>
|
||||
|
||||
<div class="mainWrapper" data-columns="2">
|
||||
|
||||
@ -30,8 +30,8 @@ export class SettingsState extends TextualGameState {
|
||||
: ""
|
||||
}
|
||||
|
||||
<button class="styledButton categoryButton manageMods">${T.mods.title}
|
||||
<span class="newBadge">${T.settings.newBadge}</span>
|
||||
<button class="styledButton categoryButton manageMods">
|
||||
${T.mods.title}
|
||||
</button>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user