Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2025-12-09 16:21:51 +00:00
Code Issues Projects Releases Wiki Activity

Clean up SCSS stylesheets

Browse Source 
Can have minor effect on game appearance, most importantly the removal
of letter-spacing by default. Styles are now much lighter though.
Changes all keybinding code to use kbd instead of code as well.
This commit is contained in:
Даниїл Григор'єв 2024-08-13 17:46:10 +03:00
parent b26a43c57c
commit c265145c19
No known key found for this signature in database
GPG Key ID: B890DF16341D8C1D
32 changed files with 51 additions and 830 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
gulp/preloader/preloader.css
View File

@ -9,14 +9,13 @@
* {
margin: 0;
padding: 0;
touch-action: pan-x pan-y !important;
touch-action: pan-x pan-y;
pointer-events: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
html {
position: fixed;
touch-action: pan-x, pan-y;
top: 0;
left: 0;
bottom: 0;
@ -28,23 +27,9 @@ body {
color: #555;
user-select: none;
background: inherit !important;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
word-wrap: break-word;
font-style: normal;
line-break: auto;
font-stretch: 100%;
text-rendering: optimizeLegibility;
text-decoration: none;
text-size-adjust: 100%;
letter-spacing: normal;
-webkit-font-smoothing: antialiased;
-webkit-touch-callout: none;
/* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;
/* prevent webkit from resizing text to fit */
}
#ll_fp {

188
src/css/common.scss
View File

@ -2,7 +2,7 @@
* {
margin: 0;
padding: 0;
touch-action: pan-x pan-y !important;
touch-action: pan-x pan-y;
pointer-events: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
@ -21,16 +21,7 @@ body {
}
html {
position: fixed;
// scroll-behavior: smooth;
background: $mainBgColor;
// Disable zooming and thus
touch-action: pan-x, pan-y;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #dee1ea;
@include DarkThemeOverride {
background: $darkModeGameBackground;
}
@ -39,41 +30,11 @@ html {
body {
color: #555;
user-select: none;
background: inherit !important;
text-transform: none;
white-space: normal;
word-break: normal;
word-spacing: normal;
background: inherit;
word-wrap: break-word;
font-style: normal;
line-break: auto;
font-stretch: 100%;
text-rendering: optimizeLegibility;
text-decoration: none;
text-size-adjust: 100%;
letter-spacing: normal;
-webkit-font-smoothing: antialiased;
-webkit-touch-callout: none;
/* prevent callout to copy image, etc when tap to hold */
overflow: hidden;
@include Text;
// For recording the bg video
// filter: blur(5px);
// &::after {
// position: fixed;
// top: 0;
// left: 0;
// right: 0;
// bottom: 0;
// z-index: 9999;
// content: " ";
// background: rgba($ingameHudBg, 0.5);
// }
}
img {
-webkit-touch-callout: none;
/* prevent callout to copy image, etc when tap to hold */
}
i {
@ -94,8 +55,6 @@ input,
textarea,
select {
font-size: inherit;
font-weight: inherit;
font-family: inherit;
line-height: inherit;
}
@ -106,69 +65,24 @@ button {
cursor: pointer;
position: relative;
@include TextShadow3D;
&.prefab_BuyButtonWithResources {
display: flex;
box-sizing: border-box;
@include S(padding, 6px, 4px);
// letter-spacing: 0;
background-color: color($cyan, 400);
flex-direction: row;
justify-content: center;
align-items: center;
@include S(width, 85px);
&.tooExpensive {
color: $colorRedBright;
background-color: #555;
cursor: default;
}
.cost_entry {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
}
b {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
}
&.tooExpensive {
cursor: default !important;
background-color: #565859 !important;
b {
color: $colorRedBright !important;
}
.cost_entry {
opacity: 0.6;
}
}
}
}
.styledButton {
background: $themeColor;
text-transform: uppercase;
box-sizing: content-box;
@include S(padding, 3px, 10px);
@include IncreasedClickArea(10px);
@include TextShadow3D(#fff, $borderColor: #28292a);
@include ButtonText;
border: 0;
background: $colorBlueBright;
color: #fff;
@include S(border-radius, 0.8 * $globalBorderRadius);
// border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
@include S(border-bottom-width, 2px);
// color: $accentColorDark;
letter-spacing: 0em !important;
// box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2);
transition: opacity 0.12s ease-in-out;
.keybinding {
@include S(bottom, -2.5px);
@include S(right, -2px);
}
transition: opacity 0.12s ease-in-out;
&:hover {
opacity: 0.9;
}
@ -184,7 +98,6 @@ input[type="email"] {
@include S(padding, 11px, 12px);
@include S(margin, 10px, 0);
border: 0;
cursor: text;
display: block;
text-align: left;
box-sizing: border-box;
@ -194,7 +107,6 @@ input[type="email"] {
user-select: text !important;
pointer-events: all !important;
@include Text;
@include IncreasedClickArea(15px);
@include S(border-radius, $globalBorderRadius);
&::placeholder {
color: #fff;
@ -239,8 +151,6 @@ a {
a {
text-decoration: none;
cursor: pointer;
pointer-events: all;
}
i {
@ -250,28 +160,15 @@ i {
input {
user-select: text;
pointer-events: all;
cursor: text;
border-radius: 0;
}
canvas {
pointer-events: all;
// image-rendering: pixelated;
// &.smoothed {
// }1
// &.unsmoothed {
// }
letter-spacing: 0 !important;
transform: translateZ(0);
backface-visibility: hidden;
}
.fontPreload {
position: absolute;
top: -100px;
left: -100px;
}
// Scrollbar
::-webkit-scrollbar {
@include S(width, 6px);
@ -292,21 +189,6 @@ canvas {
background: #d8dce0;
}
#uiTestPlaybackCursor {
position: fixed;
top: 100px;
left: 100px;
z-index: 9999;
border-radius: 50%;
background: rgba(255, 255, 0, 0.4);
width: 24px;
height: 24px;
border: 3px solid rgba(0, 0, 0, 0.5);
margin-top: -12px;
margin-left: -12px;
box-sizing: border-box;
}
.pressed:not(.noPressEffect) {
transform: scale(0.98) !important;
animation: none !important;
@ -334,8 +216,7 @@ canvas {
color: color($purple, 300);
}
.prefab_LoadingTextWithAnim,
.prefab_LoadingTextWithAnimDelayed {
.prefab_LoadingTextWithAnim {
display: inline-flex;
align-items: center;
justify-content: center;
@ -368,20 +249,6 @@ canvas {
}
}
.prefab_LoadingTextWithAnimDelayed {
@include InlineAnimation(0.6s ease-in-out) {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
.prefab_LoadingProgressIndicator {
@include PlainText;
@include S(margin-top, 20px);
@ -392,43 +259,6 @@ canvas {
text-align: center;
}
.prefab_FeatureComingSoon {
position: relative;
&::after {
@include S(top, -5px);
@include S(left, -5px);
@include S(right, -5px);
@include S(bottom, -5px);
content: "Coming soon!";
z-index: 10000;
background: rgba(lighten($mainBgColor, 0), 0.4);
@include S(border-radius, $globalBorderRadius);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
pointer-events: all;
@include PlainText;
text-transform: uppercase;
}
opacity: 0.6;
> * {
opacity: 0.5 !important;
}
}
.prefab_InfoIcon {
@include S(width, 25px);
@include S(height, 25px);
z-index: 100;
opacity: 0.8;
cursor: pointer;
pointer-events: all;
display: inline-block;
position: relative;
@include IncreasedClickArea(10px);
}
.gameState.prefab_LoadingState {
text-align: center;
display: flex;
@ -545,7 +375,6 @@ canvas {
box-shadow 0.4s ease-in-out !important;
position: relative;
@include BorderRadius(20px);
@include IncreasedClickArea(10px);
@include BoxShadow3D($bgColor, $size: 2px);
&.loading {
opacity: 0.2;
@ -637,6 +466,7 @@ input.rangeInput {
.keybinding {
background: #fff;
text-transform: uppercase;
font-family: inherit;
@include S(padding, 1.5px, 3px, 2px);
@include PlainText;
@include S(border-radius, 0.5 * $globalBorderRadius);
@ -644,12 +474,8 @@ input.rangeInput {
> span {
@include S(font-size, 9px);
@include S(line-height, 11px);
font-weight: bold !important;
text-shadow: none !important;
// font-family: Arial, sans-serif !important;
}
font-weight: bold;
color: $accentColorDark;
text-align: center;
justify-content: center;

6
src/css/dynamic_ui.scss
View File

@ -13,12 +13,6 @@
@return calc(#{$baseValue} * var(--ui-scale));
}
// Helper method to scale the font size
@mixin ScaleFont($fontSize, $lineHeight) {
font-size: D($fontSize * $mainFontScale);
line-height: D($lineHeight * $mainFontScale);
}
// Helper method to scale a property value
@mixin S($propName, $v1, $v2: "", $v3: "", $v4: "", $important: false) {
$impSuffix: "";

12
src/css/game_state.scss
View File

@ -6,22 +6,10 @@ $gameStateTransition: 0.2s ease-out;
}
.gameState {
display: block;
// background: $mainBgColor;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
overflow: hidden !important;
@include Text;
@include StateAnim(opacity, transform, filter);
opacity: 0;
// transform: scaleX(0.99) skewX(1deg) translate(1%, 0.5%);
&.arrived {
opacity: 1;

1
src/css/ingame_hud/debug_info.scss
View File

@ -28,7 +28,6 @@
font-size: 14px;
line-height: 15px;
padding: 1px;
font-family: "GameFont";
border-radius: 3px;
}
}

1
src/css/ingame_hud/dialogs.scss
View File

@ -215,7 +215,6 @@
@include S(height, 25px);
position: relative;
cursor: pointer;
@include IncreasedClickArea(3px);
&:hover {
opacity: 0.9;

1
src/css/ingame_hud/game_menu.scss
View File

@ -11,7 +11,6 @@
> button,
> .button {
@include PlainText;
@include IncreasedClickArea(0px);
background: green;
@include S(width, 30px);
@include S(height, 30px);

3
src/css/ingame_hud/keybindings_overlay.scss
View File

@ -41,11 +41,12 @@
// @include S(margin, 0, 3px);
}
code {
kbd {
position: relative;
top: unset;
left: unset;
margin: 0;
&.rightMouse {
/* @load-async */
background: #fff uiResource("icons/mouse_right.png") center center / 85% no-repeat;

2
src/css/ingame_hud/pinned_shapes.scss
View File

@ -71,7 +71,6 @@
@include S(top, 13px);
@include S(left, -7px);
@include DarkThemeInvert;
@include IncreasedClickArea(2px);
transition: opacity 0.12s ease-in-out;
z-index: 100;
@ -93,7 +92,6 @@
@include S(top, 3px);
@include S(left, -7px);
@include DarkThemeInvert;
@include IncreasedClickArea(2px);
transition: opacity 0.12s ease-in-out;
z-index: 100;

2
src/css/ingame_hud/puzzle_complete_notification.scss
View File

@ -100,7 +100,6 @@
transition:
opacity 0.12s ease-in-out,
background-color 0.12s ease-in-out;
@include IncreasedClickArea(0px);
&.liked-yes {
/* @load-async */
@ -153,7 +152,6 @@
@include S(min-width, 100px);
@include S(padding, 8px, 16px);
@include S(margin, 0, 6px);
@include IncreasedClickArea(0px);
}
}

1
src/css/ingame_hud/puzzle_editor_review.scss
View File

@ -11,7 +11,6 @@
> .button {
@include ButtonText;
@include IncreasedClickArea(0px);
pointer-events: all;
cursor: pointer;
position: relative;

1
src/css/ingame_hud/puzzle_editor_settings.scss
View File

@ -35,7 +35,6 @@
justify-content: center;
@include S(width, 15px);
@include S(height, 15px);
@include IncreasedClickArea(0px);
}
.value {

1
src/css/ingame_hud/puzzle_next.scss
View File

@ -11,7 +11,6 @@
> .button {
@include ButtonText;
@include IncreasedClickArea(0px);
pointer-events: all;
cursor: pointer;
position: relative;

2
src/css/ingame_hud/sandbox_controller.scss
View File

@ -33,7 +33,6 @@
justify-content: center;
@include S(width, 15px);
@include S(height, 15px);
@include IncreasedClickArea(0px);
}
}
@ -43,7 +42,6 @@
@include S(margin-top, 10px);
button {
@include S(margin-bottom, 2px);
@include IncreasedClickArea(0px);
@include SuperSmallText;
}
}

3
src/css/ingame_hud/shop.scss
View File

@ -126,7 +126,6 @@
opacity: 0.6;
cursor: pointer;
pointer-events: all;
@include IncreasedClickArea(5px);
transition: opacity 0.12s ease-in-out;
@include DarkThemeInvert;
@ -215,7 +214,6 @@
opacity: 0.5;
cursor: pointer;
pointer-events: all;
@include IncreasedClickArea(5px);
transition: opacity 0.12s ease-in-out;
@include DarkThemeInvert;
@ -237,7 +235,6 @@
@include S(margin-top, 4px);
z-index: 10;
@include SuperSmallText;
letter-spacing: 0;
background: #e2e4e6;
@include S(line-height, 13px);

1
src/css/ingame_hud/statistics.scss
View File

@ -14,7 +14,6 @@
@include S(padding, 1px, 10px);
border: 0;
box-shadow: none;
@include IncreasedClickArea(1px);
@include S(min-width, 30px);
color: #fff;
opacity: 0.25;

1
src/css/ingame_hud/tutorial_hints.scss
View File

@ -58,7 +58,6 @@
button.toggleHint {
@include PlainText;
@include IncreasedClickArea(0px);
}
}

1
src/css/ingame_hud/waypoints.scss
View File

@ -87,7 +87,6 @@
pointer-events: all;
cursor: pointer;
position: relative;
@include IncreasedClickArea(2px);
transition: transform 0.04s ease-in-out;
&:hover {

1
src/css/main.scss
View File

@ -7,7 +7,6 @@
}
@import "resources";
@import "trigonometry";
@import "material_colors";
@import "dynamic_ui";
@import "variables";

57
src/css/mixins.scss
View File

@ -11,25 +11,6 @@ the performance when animated. Use only transform and opacity in animations! */
// $hardwareAcc: translateZ(0);
$hardwareAcc: null;
// ----------------------------------------
/** Increased click area for this element, helpful on mobile */
@mixin IncreasedClickArea($size) {
// &::after {
// content: "";
// position: absolute;
// top: #{D(-$size)};
// bottom: #{D(-$size)};
// left: #{D(-$size)};
// right: #{D(-$size)};
// // background: rgba(255, 0, 0, 0.3);
// }
}
button,
.increasedClickArea {
position: relative;
@include IncreasedClickArea(15px);
}
// ----------------------------------------
/* Duplicates an animation and adds two classes .<classPrefix>Even and .<classPrefix>Odd which uses the
animation. This can be used to replay the animation by toggling between the classes, because
@ -101,20 +82,6 @@ button,
opacity: 1;
}
// ----------------------------------------
/* Automatically transforms the game state if a hardware keyboard is open */
@mixin TransformToMatchKeyboard {
transition: transform 0.2s ease-in-out;
@include AndroidHwKeyboardOpen {
@include VerticalStyle {
transform: translateY(#{D(-125px)}) $hardwareAcc;
}
@include HorizontalStyle {
transform: translateY(#{D(-100px)}) $hardwareAcc;
}
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport is at least X pixels wide */
@mixin StyleAtWidth($minW) {
@ -233,19 +200,6 @@ button,
color: $color;
}
// ----------------------------------------
/* String replacement */
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@mixin BounceInFromSide($mul, $duration: 0.18s ease-in-out) {
@include InlineAnimation($duration) {
0% {
@ -268,17 +222,6 @@ button,
overflow-wrap: break-all;
}
@mixin SupportsAndroidNotchQuery {
@supports (color: constant(--notch-inset-left)) {
@content;
}
}
@mixin SupportsiOsNotchQuery {
@supports (color: env(safe-area-inset-left, 0px)) {
@content;
}
}
@mixin DarkThemeOverride {
@at-root html[data-theme="dark"] &,
&[data-theme="dark"] {

4
src/css/resources.scss
View File

@ -78,7 +78,3 @@ $languages: en, de, cs, da, et, es-419, fr, it, pt-BR, sv, tr, el, ru, uk, zh-TW
background-image: uiResource("languages/#{$language}.svg") !important;
}
}
.steam_dlbtn_0 {
background-image: uiResource("steam_link_btn/0.png") !important;
}

1
src/css/states/keybindings.scss
View File

@ -32,7 +32,6 @@
button {
@include S(height, 15px);
@include S(width, 15px);
@include IncreasedClickArea(0px);
background: transparent center center / 40% no-repeat;
opacity: 0.9;
&.editKeybinding {

363
src/css/states/main_menu.scss
View File

@ -29,7 +29,6 @@
cursor: pointer;
transition: opacity 0.12s ease-in-out;
@include IncreasedClickArea(2px);
opacity: 0.85;
&:hover {
opacity: 1;
@ -152,17 +151,6 @@
}
}
.betaWarning {
@include S(width, 400px);
@include PlainText;
background: $colorRedBright;
@include S(padding, 10px);
@include S(border-radius, $globalBorderRadius);
color: #fff;
@include S(margin-top, 10px);
border: #{D(2px)} solid rgba(0, 10, 20, 0.1);
}
.sideContainer {
display: flex;
width: 100%;
@ -170,287 +158,6 @@
flex-direction: column;
@include S(grid-gap, 20px);
.mainNews {
background: linear-gradient(220deg, rgb(74, 93, 201), rgb(93, 255, 150));
&::before {
background: uiResource("shapez2.png") center center / 100% no-repeat;
content: "";
@include S(width, 100px);
@include S(height, 100px);
position: absolute;
top: 55%;
right: 8%;
pointer-events: none;
transform: translateY(-50%);
transition: transform 0.5s ease-in-out;
}
// .close {
// position: absolute;
// pointer-events: all;
// background: uiResource("icons/main_menu_exit.png") center center / 50% no-repeat;
// display: inline-flex;
// @include S(width, 15px);
// @include S(height, 15px);
// @include S(top, 2px);
// opacity: 0.3;
// @include S(right, 2px);
// z-index: 200;
// transition: opacity 0.12s ease-in-out;
// &:hover {
// opacity: 0.7;
// }
// }
&:hover::before {
transform: translate(0, -51%);
}
box-shadow: 0 D(9px) D(15px) rgba(#000, 0.2);
width: 100%;
display: flex;
flex-direction: column;
@include S(height, 60px);
pointer-events: all;
flex-grow: 1;
z-index: 100;
position: relative;
grid-row: 2 / 3;
@include S(border-radius, $globalBorderRadius);
justify-content: center;
@include S(padding, 10px);
@include S(padding-right, 100px);
box-sizing: border-box;
transition: opacity 0.12s ease-in-out;
cursor: pointer;
&:hover {
opacity: 0.85;
}
.text {
@include SuperSmallText;
@include S(width, 100px);
color: rgba(#000, 1);
}
}
.standaloneBanner {
background: transparent;
@include S(border-radius, $globalBorderRadius);
@include S(min-width, 320px);
@include S(max-width, 370px);
width: 100%;
box-sizing: border-box;
grid-row: 1 / 3;
display: flex;
flex-direction: column;
margin: 0;
strong {
font-weight: 700 !important;
}
h3 {
@include Heading;
font-weight: bold;
@include S(margin-bottom, 20px);
text-align: center;
color: #222;
text-shadow: 0 D(1px) D(5px) rgba(#fff, 0.7);
}
p {
@include Text;
color: #333;
}
ul {
@include S(margin-top, 5px);
@include S(padding-left, 20px);
li {
@include Text;
color: #fff;
}
}
.playtimeDisclaimer {
color: #333;
@include S(margin-top, 15px);
@include SuperSmallText;
text-align: center;
}
.steamLink {
align-self: center;
justify-self: center;
width: 100%;
@include S(height, 40px * 1.2);
@include S(width, 180px * 1.2);
background: #171a23 center center / contain no-repeat;
// overflow: hidden;
display: block;
cursor: pointer;
@include S(margin-top, 15px);
pointer-events: all;
transition: all 0.12s ease-in;
transition-property: opacity, transform;
position: relative;
@include S(border-radius, $globalBorderRadius);
color: transparent;
box-shadow: 0 D(3px) D(7px) rgba(#000, 0.3);
&:hover {
opacity: 0.9;
}
@include InlineAnimation(1s ease-in-out infinite) {
50% {
transform: scale(1.02, 1.03);
}
}
> .discount {
position: absolute;
@include S(top, -7px);
@include S(right, -5px);
background: #4c6b22;
color: #c5ea3f;
@include S(border-radius, $globalBorderRadius);
@include S(padding, 1px, 3px, 1px, 4px);
@include PlainText;
text-transform: uppercase;
transform: rotate(5deg);
}
}
.specialOffer {
color: #000000;
@include PlainText;
align-self: center;
text-align: center;
@include S(margin-top, 5px);
@include InlineAnimation(1s ease-in-out infinite) {
50% {
transform: scale(1.02, 1.03) translateY(2%);
}
}
}
.points {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
@include S(grid-gap, 5px);
}
.point {
display: grid;
grid-template-columns: #{D(27px)} auto;
grid-template-rows: 1fr 1fr;
background: #fff #{D(10px)} center / #{D(17px)} no-repeat;
@include S(grid-row-gap, 2px);
align-items: center;
@include S(padding, 6px);
@include S(border-radius, $globalBorderRadius);
@include S(height, 26px);
box-shadow: 0 D(5px) D(10px) rgba(#000, 0.2);
> strong {
grid-column: 2 / 3;
grid-row: 1 / 2;
@include PlainText;
@include S(font-size, 12px);
line-height: 0.8em;
white-space: nowrap;
text-transform: uppercase;
font-weight: bold;
align-self: end;
}
> p {
grid-column: 2 / 3;
grid-row: 2 / 3;
@include SuperSmallText;
@include S(font-size, 8px);
line-height: 1em;
align-self: center;
opacity: 0.8;
}
&.levels {
background-image: uiResource("res/ui/icons/advantage_new_levels.png");
> strong {
color: #f13555;
}
}
&.upgrades {
background-image: uiResource("res/ui/icons/advantage_upgrades.png");
> strong {
color: #8a00ff;
}
}
&.buildings {
background-image: uiResource("res/ui/icons/advantage_buildings.png");
> strong {
color: #3fce8b;
}
}
&.wires {
background-image: uiResource("res/ui/icons/advantage_wires.png");
> strong {
color: #ef2fdb;
}
}
&.markers {
background-image: uiResource("res/ui/icons/advantage_markers.png");
> strong {
color: #4294ff;
}
}
&.mods {
background-image: uiResource("res/ui/icons/advantage_mods.png");
> strong {
color: #8a00ff;
}
}
&.savegames {
background-image: uiResource("res/ui/icons/advantage_savegames.png");
> strong {
color: #ff9500;
}
}
&.darkmode {
background-image: uiResource("res/ui/icons/advantage_dark_mode.png");
> strong {
color: #292c32;
}
}
&.support {
background-image: uiResource("res/ui/icons/advantage_support.png");
> strong {
color: #e72d2d;
}
}
&.achievements {
background-image: uiResource("res/ui/icons/advantage_achievements.png");
> strong {
color: #ffac0f;
}
}
}
}
.puzzleContainer {
display: flex;
align-items: center;
@ -527,54 +234,6 @@
box-shadow: 0 D(2px) D(9px) rgba(#000, 0.4);
}
}
&.notOwned {
@include S(height, 200px);
@include S(width, 250px);
border: 0;
background: uiResource("puzzle_460x215_15.png") center D(-5px) / 100% repeat;
.dlcLogo {
display: none;
}
&::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(180deg, rgba(#222529, 0.1) 40%, rgba(#222529, 1) 70%);
}
p {
position: absolute;
left: 0;
right: 0;
@include S(bottom, 35px);
z-index: 50;
box-sizing: border-box;
display: block;
@include PlainText;
color: rgba(#fff, 0.9);
@include S(padding, 10px);
@include SuperSmallText;
}
> button {
pointer-events: all;
@include S(padding, 4px, 10px);
margin: 0;
background: #47c599;
box-sizing: border-box;
position: absolute;
@include S(bottom, 10px);
@include S(right, 10px);
z-index: 100;
@include PlainText;
z-index: 200;
color: #111215;
box-shadow: 0 D(2px) D(4px) rgba(#000, 1);
}
}
}
.modsOverview {
@ -717,11 +376,9 @@
@include SuperHeading;
width: 100%;
@include S(padding, 15px, 10px);
letter-spacing: 0.1em !important;
@include IncreasedClickArea(0px);
letter-spacing: 0.1em;
box-sizing: border-box;
font-weight: bold;
color: #fff;
background-color: $colorGreenBright;
transition:
transform 0.12s ease-in-out,
@ -762,16 +419,7 @@
box-sizing: border-box;
}
.importButton {
@include IncreasedClickArea(0px);
}
.newGameButton {
@include IncreasedClickArea(0px);
}
.modsButton {
@include IncreasedClickArea(0px);
background-color: $modsColor !important;
}
}
@ -866,7 +514,6 @@
padding: 0;
align-self: center;
justify-self: center;
@include IncreasedClickArea(0px);
background: #44484a center center / 40% no-repeat;
}
@ -886,7 +533,6 @@
background-image: uiResource("icons/download.png");
}
@include S(width, 15px);
@include IncreasedClickArea(0px);
@include S(height, 15px);
background-size: 80%;
align-self: start;
@ -904,7 +550,6 @@
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: transparent;
@include IncreasedClickArea(0px);
& {
background-image: uiResource("icons/delete.png");
@ -925,7 +570,6 @@
button.renameGame {
background-color: transparent;
@include IncreasedClickArea(2px);
& {
background-image: uiResource("icons/edit_key.png");
@ -1067,11 +711,6 @@
background-size: 60%;
background-position: 60% 60%;
}
&.steamLogo {
background-image: uiResource("main_menu/steam.svg");
background-size: 105%;
}
}
}
}

21
src/css/states/mods.scss
View File

@ -1,22 +1,19 @@
#state_ModsState {
.modsGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5em;
grid-template-columns: 1fr auto;
align-items: center;
.noMods {
grid-template-columns: unset;
place-items: center;
> h1 {
justify-self: start;
}
.openModsFolder {
background-color: $modsColor;
}
}
.mod {
display: flex;
flex-direction: column;
padding: 0.6em;
gap: 0.3em;
background-color: $mainBgColor;
@include S(border-radius, 0.75 * $globalBorderRadius);
.modsStats {
@include PlainText;
.title b {

1
src/css/textual_game_state.scss
View File

@ -18,7 +18,6 @@
text-transform: uppercase;
color: #333438;
position: relative;
@include IncreasedClickArea(10px);
}
.backButton {

66
src/css/trigonometry.scss
View File

@ -1,66 +0,0 @@
///////////////////////////////////////////////////////////
// Plain SASS Trigonometry Algorithm in Taylor Expansion //
// //
// Based on //
// http://japborst.net/posts/sass-sines-and-cosines //
///////////////////////////////////////////////////////////
$pi: 3.14159265359;
$_precision: 10;
@function pow($base, $exp) {
$value: $base;
@if $exp > 1 {
@for $i from 2 through $exp {
$value: $value * $base;
}
}
@if $exp < 1 {
@for $i from 0 through -$exp {
$value: $value / $base;
}
}
@return $value;
}
@function fact($num) {
$fact: 1;
@if $num > 0 {
@for $i from 1 through $num {
$fact: $fact * $i;
}
}
@return $fact;
}
@function _to_unitless_rad($angle) {
@if unit($angle) == "deg" {
$angle: $angle / 180deg * $pi;
}
@if unit($angle) == "rad" {
$angle: $angle / 1rad;
}
@return $angle;
}
@function sin($angle) {
$a: _to_unitless_rad($angle);
$sin: $a;
@for $n from 1 through $_precision {
$sin: $sin + (pow(-1, $n) / fact(2 * $n + 1)) * pow($a, (2 * $n + 1));
}
@return $sin;
}
@function cos($angle) {
$a: _to_unitless_rad($angle);
$cos: 1;
@for $n from 1 through $_precision {
$cos: $cos + (pow(-1, $n) / fact(2 * $n)) * pow($a, 2 * $n);
}
@return $cos;
}
@function tan($angle) {
@return sin($angle) / cos($angle);
}

89
src/css/variables.scss
View File

@ -68,10 +68,6 @@ $mainFont: "GameFont", sans-serif;
$numberFont: $mainFont;
$textFont: $mainFont;
$mainFontWeight: 400;
$mainFontSpacing: 0.01em;
$mainFontScale: 1;
@mixin DebugText($color) {
// font-size: 3px;
// &,
@ -81,100 +77,43 @@ $mainFontScale: 1;
}
@mixin SuperDuperSmallText {
@include ScaleFont($superDuperSmallTextFontSize, $superDuperSmallTextLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
font-size: D($superDuperSmallTextFontSize);
line-height: D($superDuperSmallTextLineHeight);
@include DebugText(green);
}
@mixin SuperSmallText {
@include ScaleFont($superSmallTextFontSize, $superSmallTextLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
font-size: D($superSmallTextFontSize);
line-height: D($superSmallTextLineHeight);
@include DebugText(green);
}
@mixin PlainText {
@include ScaleFont($plainTextFontSize, $plainTextLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
font-size: D($plainTextFontSize);
line-height: D($plainTextLineHeight);
@include DebugText(red);
}
@mixin Text {
@include ScaleFont($textFontSize, $textLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
font-size: D($textFontSize);
line-height: D($textLineHeight);
@include DebugText(blue);
}
@mixin Heading {
@include ScaleFont($headingFontSize, $headingLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
font-size: D($headingFontSize);
line-height: D($headingLineHeight);
@include DebugText(yellow);
}
@mixin SuperHeading {
@include ScaleFont($superHeadingFontSize, $superHeadingLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
font-size: D($superHeadingFontSize);
line-height: D($superHeadingLineHeight);
@include DebugText(orange);
}
@mixin ButtonText {
@include ScaleFont($buttonFontSize, $buttonLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
font-size: D($buttonFontSize);
line-height: D($buttonLineHeight);
@include DebugText(purple);
}
@function str-split($string, $separator) {
// empty array/list
$split-arr: ();
// first index of separator in string
$index: str-index($string, $separator);
// loop through string
@while $index != null {
// get the substring from the first character to the separator
$item: str-slice($string, 1, $index - 1);
// push item to array
$split-arr: append($split-arr, $item);
// remove item and separator from string
$string: str-slice($string, $index + 1);
// find new index of separator
$index: str-index($string, $separator);
}
// add the remaining string to list (the last item)
$split-arr: append($split-arr, $string);
@return $split-arr;
}
@function _first-index($string, $direction: "left") {
@for $i from 1 through str-length($string) {
$index: if($direction == "left", $i, -$i);
@if str-slice($string, $index, $index) != " " {
@return $index;
}
}
@return 0;
}
@function trim($string) {
@return str-slice($string, _first-index($string, "left"), _first-index($string, "right"));
}

2
src/js/core/modal_dialog_elements.ts
View File

@ -207,7 +207,7 @@ export class Dialog<T extends string = never, U extends unknown[] = []> {
if (isEnter || isEscape) {
// if (this.app.settings.getShowKeyboardShortcuts()) {
// Show keybinding
const spacer = document.createElement("code");
const spacer = document.createElement("kbd");
spacer.classList.add("keybinding");
spacer.innerHTML = getStringForKeyCode(isEnter ? kbEnter : kbCancel);
button.appendChild(spacer);

16
src/js/game/hud/parts/building_placer.js
View File

@ -1,3 +1,4 @@
import { makeOffscreenBuffer } from "../../../core/buffer_utils";
import { ClickDetector } from "../../../core/click_detector";
import { globalConfig } from "../../../core/config";
import { DrawParameters } from "../../../core/draw_parameters";
@ -5,21 +6,20 @@ import { drawRotatedSprite } from "../../../core/draw_utils";
import { Loader } from "../../../core/loader";
import { clamp, makeDiv, removeAllChildren } from "../../../core/utils";
import {
Vector,
enumDirection,
enumDirectionToAngle,
enumDirectionToVector,
enumInvertedDirections,
Vector,
enumDirection,
} from "../../../core/vector";
import { T } from "../../../translations";
import { getCodeFromBuildingData } from "../../building_codes";
import { KEYMAPPINGS } from "../../key_action_mapper";
import { defaultBuildingVariant } from "../../meta_building";
import { layers } from "../../root";
import { THEME } from "../../theme";
import { DynamicDomAttach } from "../dynamic_dom_attach";
import { HUDBuildingPlacerLogic } from "./building_placer_logic";
import { makeOffscreenBuffer } from "../../../core/buffer_utils";
import { layers } from "../../root";
import { getCodeFromBuildingData } from "../../building_codes";
export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
/**
@ -130,7 +130,7 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
const binding = this.root.keyMapper.getBinding(rawBinding);
this.buildingInfoElements.hotkey.innerHTML = T.ingame.buildingPlacement.hotkeyLabel.replace(
"<key>",
"<code class='keybinding'>" + binding.getKeyCodeString() + "</code>"
"<kbd class='keybinding'>" + binding.getKeyCodeString() + "</kbd>"
);
} else {
this.buildingInfoElements.hotkey.innerHTML = "";
@ -197,11 +197,11 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
["explanation"],
T.ingame.buildingPlacement.cycleBuildingVariants.replace(
"<key>",
"<code class='keybinding'>" +
"<kbd class='keybinding'>" +
this.root.keyMapper
.getBinding(KEYMAPPINGS.placement.cycleBuildingVariants)
.getKeyCodeString() +
"</code>"
"</kbd>"
)
);

10
src/js/game/hud/parts/keybinding_overlay.js
View File

@ -290,13 +290,13 @@ export class HUDKeybindingOverlay extends BaseHUDPart {
switch (key) {
case KEYCODE_LMB:
html += `<code class="keybinding leftMouse"></code>`;
html += `<kbd class="keybinding leftMouse"></kbd>`;
break;
case KEYCODE_RMB:
html += `<code class="keybinding rightMouse"></code>`;
html += `<kbd class="keybinding rightMouse"></kbd>`;
break;
case KEYCODE_MMB:
html += `<code class="keybinding middleMouse"></code>`;
html += `<kbd class="keybinding middleMouse"></kbd>`;
break;
case DIVIDER_TOKEN:
html += `<i></i>`;
@ -305,9 +305,9 @@ export class HUDKeybindingOverlay extends BaseHUDPart {
html += `+`;
break;
default:
html += `<code class="keybinding">${getStringForKeyCode(
html += `<kbd class="keybinding">${getStringForKeyCode(
mapper.getBinding(/** @type {KeyCode} */ (key)).keyCode
)}</code>`;
)}</kbd>`;
}
}
html += `<label>${handle.label}</label>`;

4
src/js/game/hud/parts/waypoints.js
View File

@ -54,9 +54,9 @@ export class HUDWaypoints extends BaseHUDPart {
<strong class='title'>${T.ingame.waypoints.waypoints}</strong>
<span class='desc'>${T.ingame.waypoints.description.replace(
"<keybinding>",
`<code class='keybinding'>${this.root.keyMapper
`<kbd class='keybinding'>${this.root.keyMapper
.getBinding(KEYMAPPINGS.navigation.createMarker)
.getKeyCodeString()}</code>`
.getKeyCodeString()}</kbd>`
)}</span>
`
);

2
src/js/game/key_action_mapper.js
View File

@ -386,7 +386,7 @@ export class Keybinding {
if (IS_MOBILE) {
return null;
}
const spacer = document.createElement("code");
const spacer = document.createElement("kbd");
spacer.classList.add("keybinding");
spacer.innerHTML = getStringForKeyCode(this.keyCode);
elem.appendChild(spacer);