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

Replace usages of D() and S() SCSS mixins

Browse Source 
Replace all instances of D() and S() mixins with rem units. Also,
replace deprecated slash division with math.div as suggested by
dart-sass. Finally, remove the mixins as they are no longer used.
This commit is contained in:
Даниїл Григор'єв 2025-06-20 09:16:53 +03:00
parent 06154b408e
commit c184d08ece
No known key found for this signature in database
GPG Key ID: B890DF16341D8C1D
45 changed files with 712 additions and 774 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/css/common.scss
View File

@ -70,17 +70,17 @@ button {
.styledButton {
text-transform: uppercase;
box-sizing: content-box;
@include S(padding, 3px, 10px);
padding: 0.3rem 1rem;
@include ButtonText;
border: 0;
background: $colorBlueBright;
color: #fff;
@include S(border-radius, 0.8 * $globalBorderRadius);
border-radius: 0.8 * $globalBorderRadius;
transition: opacity 0.12s ease-in-out;
.keybinding {
@include S(bottom, -2.5px);
@include S(right, -2px);
bottom: -0.25rem;
right: -0.2rem;
}
&:hover {
@ -95,8 +95,8 @@ button {
input[type="text"],
input[type="email"] {
@include S(padding, 11px, 12px);
@include S(margin, 10px, 0);
padding: 1.1rem 1.2rem;
margin: 1rem 0;
border: 0;
display: block;
text-align: left;
@ -107,7 +107,7 @@ input[type="email"] {
user-select: text !important;
pointer-events: all !important;
@include Text;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
&::placeholder {
color: #fff;
opacity: 0.4;
@ -127,8 +127,8 @@ input[type="email"] {
&.input-token {
@include SuperHeading;
text-align: center;
@include S(letter-spacing, 30px);
@include S(padding-left, 30px);
letter-spacing: 3rem;
padding-left: 3rem;
}
}
@ -171,8 +171,8 @@ canvas {
// Scrollbar
::-webkit-scrollbar {
@include S(width, 6px);
@include S(height, 6px);
width: 0.6rem;
height: 0.6rem;
}
::-webkit-scrollbar-track {
@ -181,7 +181,7 @@ canvas {
::-webkit-scrollbar-thumb {
// border-radius: 4px;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
background: #cdd0d4;
}
@ -224,8 +224,8 @@ canvas {
color: #393747;
&::after {
content: " ";
@include S(width, 35px);
@include S(height, 35px);
width: 3.5rem;
height: 3.5rem;
display: inline-block;
vertical-align: middle;
@ -247,10 +247,10 @@ canvas {
.prefab_LoadingProgressIndicator {
@include PlainText;
@include S(margin-top, 20px);
margin-top: 2rem;
width: 100%;
color: #336c9f;
@include S(height, 20px);
height: 2rem;
text-transform: uppercase;
text-align: center;
}
@ -273,15 +273,15 @@ canvas {
}
& {
background: uiResource("loading.svg") center center / #{D(40px)} no-repeat;
background: uiResource("loading.svg") center center / 4rem no-repeat;
}
}
.prefab_GameHint {
position: absolute;
@include S(left, 20px);
@include S(right, 20px);
@include S(bottom, 60px);
left: 2rem;
right: 2rem;
bottom: 6rem;
@include Text;
color: #666;
@ -292,9 +292,9 @@ canvas {
.loadingStatus {
position: absolute;
@include S(left, 20px);
@include S(right, 20px);
@include S(bottom, 30px);
left: 2rem;
right: 2rem;
bottom: 3rem;
@include Text;
@include PlainText;
color: #aaa;
@ -309,7 +309,7 @@ canvas {
align-items: center;
> .bar {
display: none;
@include S(margin-top, 15px);
margin-top: 1.5rem;
width: 80vw;
@include BoxShadow3D(lighten($mainBgColor, 10), $size: 1px);
position: relative;
@ -322,7 +322,7 @@ canvas {
bottom: 0;
z-index: 1;
@include BoxShadow3D($themeColor, $size: 1px);
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
transform-origin: 0% 50%;
@include InlineAnimation(1.3s ease-in-out infinite) {
0% {
@ -344,7 +344,7 @@ canvas {
position: relative;
z-index: 2;
display: inline-flex;
@include S(padding, 5px);
padding: 0.5rem;
@include PlainText;
}
}
@ -358,10 +358,10 @@ canvas {
.checkbox {
$bgColor: darken($mainBgColor, 3);
background-color: $bgColor;
@include S(width, 35px);
@include S(height, 17px);
width: 3.5rem;
height: 1.7rem;
display: flex;
@include S(padding, 3px);
padding: 0.3rem;
box-sizing: content-box;
cursor: pointer;
pointer-events: all;
@ -370,7 +370,7 @@ canvas {
background-color 0.3s ease-in-out,
box-shadow 0.4s ease-in-out !important;
position: relative;
@include S(border-radius, 20px);
border-radius: 2rem;
@include BoxShadow3D($bgColor, $size: 2px);
&.loading {
opacity: 0.2;
@ -379,20 +379,20 @@ canvas {
background-color: darken($bgColor, 5);
}
.knob {
@include S(width, 20px);
@include S(height, 17px);
width: 2rem;
height: 1.7rem;
display: inline-block;
transition: margin-left 0.4s ease-in-out !important;
background: #fff;
position: relative;
@include S(border-radius, 20px);
border-radius: 2rem;
@include BoxShadow3D(#fff, $size: 1px);
}
&.checked {
background-color: $themeColor;
@include BoxShadow3D($themeColor, $size: 2px);
.knob {
@include S(margin-left, 15px);
margin-left: 1.5rem;
}
&:hover {
background-color: lighten($themeColor, 15);
@ -413,7 +413,7 @@ canvas {
justify-content: center;
label {
@include S(margin-right, 5px);
margin-right: 0.5rem;
&,
& * {
@include PlainText;
@ -424,14 +424,14 @@ canvas {
input.rangeInput {
cursor: pointer;
background-color: transparent;
@include S(width, 100px);
@include S(height, 16px);
width: 10rem;
height: 1.6rem;
&::-webkit-slider-runnable-track {
background-color: darken($mainBgColor, 3);
color: darken($mainBgColor, 3);
// @include S(height, 16px);
@include S(border-radius, 8px);
// height: 1.6rem;
border-radius: 0.8rem;
}
@include DarkThemeOverride {
@ -440,13 +440,13 @@ input.rangeInput {
}
&::-webkit-slider-thumb {
box-shadow: inset 0 0 0 D(10px) #eee;
box-shadow: inset 0 0 0 1rem #eee;
}
}
&::-webkit-slider-thumb {
appearance: none;
box-shadow: inset 0 0 0 D(10px) $themeColor;
box-shadow: inset 0 0 0 1rem $themeColor;
border-radius: 50%;
transition: box-shadow 0.3s;
@ -454,7 +454,7 @@ input.rangeInput {
&:hover {
&::-webkit-slider-thumb {
box-shadow: inset 0 0 0 D(10px) lighten($themeColor, 15);
box-shadow: inset 0 0 0 1rem lighten($themeColor, 15);
}
}
}
@ -463,33 +463,33 @@ input.rangeInput {
background: #fff;
text-transform: uppercase;
font-family: inherit;
@include S(padding, 1.5px, 3px, 2px);
padding: 0.15rem 0.3rem 0.2rem;
@include PlainText;
@include S(border-radius, 0.5 * $globalBorderRadius);
border-radius: 0.5 * $globalBorderRadius;
&,
> span {
@include S(font-size, 9px);
@include S(line-height, 11px);
font-size: 0.9rem;
line-height: 1.1rem;
}
color: $accentColorDark;
text-align: center;
justify-content: center;
align-items: center;
@include S(min-width, 12px);
min-width: 1.2rem;
display: inline-flex;
position: absolute;
@include S(bottom, 0px);
@include S(right, 0px);
bottom: 0rem;
right: 0rem;
z-index: 999;
box-sizing: border-box;
@include S(height, 12px);
height: 1.2rem;
overflow: hidden;
border: #{D(0px)} solid $accentColorDark;
border: 0rem solid $accentColorDark;
.keybinding_space {
@include S(font-size, 17px);
@include S(line-height, 11px);
@include S(margin-top, -12px);
font-size: 1.7rem;
line-height: 1.1rem;
margin-top: -1.2rem;
}
}

36
src/css/dynamic_ui.scss
View File

@ -1,36 +0,0 @@
// Removes the unit (px, %, etc) from a value
@function strip-unit($number) {
@if type-of($number) == "number" and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
// Helper method to scale a value, for use in calc() etc
@function D($v) {
@return strip-unit($v) * 0.1rem;
}
// Helper method to scale a property value
@mixin S($propName, $v1, $v2: "", $v3: "", $v4: "", $important: false) {
$impSuffix: "";
@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};
}

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

@ -1,6 +1,6 @@
#ingame_HUD_BetaOverlay {
position: fixed;
@include S(top, 70px);
top: 7rem;
left: 50%;
transform: translateX(-50%);
color: $colorRedBright;

14
src/css/ingame_hud/blueprint_placer.scss
View File

@ -1,19 +1,19 @@
#ingame_HUD_BlueprintPlacer {
position: absolute;
@include S(top, 70px);
top: 7rem;
left: 50%;
transform: translateX(-50%);
color: #333;
z-index: 9999;
background: $ingameHudBg;
@include S(padding, 5px);
padding: 0.5rem;
display: flex;
flex-direction: column;
color: #fff;
@include S(width, 120px);
width: 12rem;
align-items: center;
justify-content: center;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
.label {
@include PlainText;
@ -25,9 +25,9 @@
@include Heading;
> canvas {
@include S(margin-left, 5px);
@include S(width, 30px);
@include S(height, 30px);
margin-left: 0.5rem;
width: 3rem;
height: 3rem;
}
}

56
src/css/ingame_hud/building_placer.scss
View File

@ -1,14 +1,14 @@
#ingame_HUD_PlacementHints {
position: fixed;
@include S(top, 60px);
@include S(right, 10px);
top: 6rem;
right: 1rem;
display: grid;
@include S(padding, 6px);
@include S(border-radius, $globalBorderRadius);
@include S(width, 240px);
@include S(grid-column-gap, 5px);
padding: 0.6rem;
border-radius: $globalBorderRadius;
width: 24rem;
grid-column-gap: 0.5rem;
background: $ingameHudBg;
grid-template-columns: 1fr auto;
@ -28,7 +28,7 @@
.buildingLabel {
@include PlainText;
@include S(margin-bottom, 2px);
margin-bottom: 0.2rem;
color: #fff;
text-transform: uppercase;
grid-column: 1 / 3;
@ -55,7 +55,7 @@
label {
color: lighten($colorGreenBright, 10);
font-weight: bold;
@include S(margin-right, 5px);
margin-right: 0.5rem;
}
}
@ -67,17 +67,17 @@
align-items: center;
.keybinding {
position: relative;
@include S(margin-left, 5px);
margin-left: 0.5rem;
}
}
.buildingImage {
grid-column: 2 / 3;
grid-row: 1 / 3;
@include S(width, 100px);
@include S(height, 100px);
width: 10rem;
height: 10rem;
background: top left / 100% 100% no-repeat;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
transition: opacity 0.1s ease-in-out;
}
@ -97,15 +97,15 @@
#ingame_HUD_PlacerVariants {
position: absolute;
@include S(right, 10px);
@include S(top, 200px);
right: 1rem;
top: 20rem;
display: flex;
@include S(grid-gap, 5px);
grid-gap: 0.5rem;
flex-direction: column;
align-items: flex-end;
&.compact {
@include S(top, 150px);
top: 15rem;
}
.explanation {
@ -125,22 +125,22 @@
.variants {
display: grid;
@include S(grid-gap, 5px);
grid-gap: 0.5rem;
.variant {
pointer-events: all;
cursor: pointer;
grid-row: 2 / 3;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
background: rgba($ingameHudBg, 0.5);
opacity: 0.5;
display: inline-flex;
vertical-align: top;
position: relative;
align-items: center;
@include S(padding, 3px);
@include S(grid-gap, 10px);
padding: 0.3rem;
grid-gap: 1rem;
transition: background-color 0.12s ease-in-out;
@ -154,30 +154,30 @@
background-color: rgba($colorBlueBright, 0.8);
}
$iconSize: 25px;
$iconSize: 2.5rem;
.iconWrap {
grid-column: 1 / 2;
grid-row: 1 / 2;
position: relative;
@include S(width, $iconSize);
@include S(height, $iconSize);
width: $iconSize;
height: $iconSize;
background: center center / contain no-repeat;
&[data-tile-w="2"] {
@include S(width, 2 * $iconSize);
width: 2 * $iconSize;
}
&[data-tile-h="2"] {
@include S(height, 2 * $iconSize);
height: 2 * $iconSize;
}
&[data-tile-h="3"] {
@include S(height, 3 * $iconSize);
height: 3 * $iconSize;
}
&[data-tile-w="3"] {
@include S(width, 3 * $iconSize);
width: 3 * $iconSize;
}
&[data-tile-w="4"] {
@include S(width, 4 * $iconSize);
width: 4 * $iconSize;
}
}

42
src/css/ingame_hud/buildings_toolbar.scss
View File

@ -1,20 +1,20 @@
.ingame_buildingsToolbar {
position: absolute;
@include S(bottom, 10px);
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
display: grid;
grid-template-rows: auto auto;
justify-items: center;
@include S(grid-gap, 4px);
grid-gap: 0.4rem;
background: transparent;
transition: transform 120ms ease-in-out;
will-change: transform;
&:not(.visible) {
transform: translateX(-50%) translateY(#{D(100px)});
transform: translateX(-50%) translateY(10rem);
}
.buildings {
@ -22,11 +22,11 @@
grid-auto-flow: column;
justify-items: center;
align-self: center;
grid-gap: D(2px);
grid-gap: 0.2rem;
grid-row: 2 / 3;
@include S(border-radius, $globalBorderRadius);
@include S(padding, 2px);
border-radius: $globalBorderRadius;
padding: 0.2rem;
background-color: rgba($ingameHudBg, 0.07);
@include DarkThemeOverride {
@ -37,13 +37,13 @@
grid-row: 1 / 2;
.building {
@include S(width, 30px);
@include S(height, 30px);
width: 3rem;
height: 3rem;
background-size: 45%;
&:not(.unlocked) {
&::before {
background-size: #{D(13px)};
background-size: 1.3rem;
}
}
}
@ -51,9 +51,9 @@
.building {
display: flex;
@include S(width, 40px);
width: 4rem;
position: relative;
@include S(height, 40px);
height: 4rem;
@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),
@ -67,8 +67,8 @@
background: uiResource("icons/tutorial_arrow.png") center center / contain no-repeat;
}
@include S(width, 25px);
@include S(height, 25px);
width: 2.5rem;
height: 2.5rem;
position: absolute;
left: 50%;
bottom: 100%;
@ -79,8 +79,8 @@
}
}
}
@include S(border-radius, $globalBorderRadius);
box-shadow: 0 0 D(10px) D(5px) rgba(74, 237, 134, 0.5) !important;
border-radius: $globalBorderRadius;
box-shadow: 0 0 1rem 0.5rem rgba(74, 237, 134, 0.5) !important;
background: rgba(74, 237, 134, 0.5) !important;
}
@ -100,7 +100,7 @@
}
&:not(.unlocked) {
@include S(width, 25px);
width: 2.5rem;
.icon {
opacity: 0.15;
}
@ -122,7 +122,7 @@
&.unlocked {
.icon {
@include S(border-radius, $globalBorderRadius * 0.9);
border-radius: $globalBorderRadius * 0.9;
pointer-events: all;
transition: all 0.12s ease-in-out;
@ -146,7 +146,7 @@
background-color: rgba(lighten($colorBlueBright, 9), 0.4);
}
// transform: scale(1.05);
// @include S(border-radius, $globalBorderRadius);
// border-radius: $globalBorderRadius;
.keybinding {
color: #111;
@ -163,7 +163,7 @@
grid-auto-flow: column;
position: absolute;
@include S(top, -15px);
top: -1.5rem;
left: 50%;
transform: translateX(-50%) !important;
transition: all 0.12s ease-in-out;
@ -172,8 +172,8 @@
cursor: pointer;
pointer-events: all;
@include S(width, 12px);
@include S(height, 12px);
width: 1.2rem;
height: 1.2rem;
&:hover {
opacity: 0.5;

4
src/css/ingame_hud/color_blind_helper.scss
View File

@ -4,8 +4,8 @@
@include SuperSmallText;
color: #fff;
background: $ingameHudBg;
@include S(padding, 5px);
@include S(top, 20px);
padding: 0.5rem;
top: 2rem;
left: 50%;
transform: translateX(-50%);
text-transform: uppercase;

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

@ -1,7 +1,7 @@
#ingame_HUD_DebugInfo {
position: absolute;
@include S(bottom, 5px);
@include S(right, 5px);
bottom: 0.5rem;
right: 0.5rem;
text-align: right;
font-size: 15px;

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

@ -55,7 +55,7 @@
.dialogInner {
opacity: 1;
}
backdrop-filter: blur(D(3px));
backdrop-filter: blur(0.3rem);
}
.dialogInner {
@ -73,19 +73,19 @@
.text {
text-transform: uppercase;
@include S(margin-bottom, 10px);
margin-bottom: 1rem;
}
}
> .dialogInner {
background: #fff;
max-height: calc(100vh - #{D(40px)});
@include S(border-radius, $globalBorderRadius);
max-height: calc(100vh - 4rem);
border-radius: $globalBorderRadius;
display: flex;
flex-direction: column;
@include S(padding, 12px);
padding: 1.2rem;
box-shadow: 0 D(5px) D(15px) rgba(#000, 0.1);
box-shadow: 0 0.5rem 1.5rem rgba(#000, 0.1);
pointer-events: all;
@include DarkThemeOverride {
@ -95,15 +95,15 @@
&.optionChooserDialog {
.optionParent {
display: grid;
@include S(grid-gap, 5px);
@include S(padding-right, 5px);
grid-gap: 0.5rem;
padding-right: 0.5rem;
grid-template-columns: 1fr 1fr;
.option {
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
pointer-events: all;
cursor: pointer;
@include S(padding, 10px);
padding: 1rem;
background: #eee;
@ -128,13 +128,13 @@
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
@include S(margin-bottom, 10px);
margin-bottom: 1rem;
@include DarkThemeInvert();
> .closeButton {
opacity: 0.7;
@include S(width, 20px);
@include S(height, 20px);
width: 2rem;
height: 2rem;
cursor: pointer;
pointer-events: all;
transition: opacity 0.2s ease-in-out;
@ -151,7 +151,7 @@
@include PlainText;
overflow-y: auto;
pointer-events: all;
@include S(width, 350px);
width: 35rem;
@include DarkThemeOverride {
color: #aaa;
@ -174,7 +174,7 @@
}
h3 {
@include S(margin-top, 10px);
margin-top: 1rem;
}
input {
@ -193,17 +193,17 @@
}
.ingameItemChooser {
@include S(margin, 10px, 0);
margin: 1rem 0;
display: grid;
@include S(grid-column-gap, 3px);
@include S(grid-row-gap, 5px);
grid-column-gap: 0.3rem;
grid-row-gap: 0.5rem;
grid-template-columns: repeat(10, 1fr);
place-items: center;
canvas {
pointer-events: all;
@include S(width, 25px);
@include S(height, 25px);
width: 2.5rem;
height: 2.5rem;
position: relative;
cursor: pointer;
@ -215,11 +215,11 @@
.dialogModsMod {
background: rgba(0, 0, 0, 0.05);
@include S(padding, 5px);
@include S(margin, 10px, 0);
@include S(border-radius, $globalBorderRadius);
padding: 0.5rem;
margin: 1rem 0;
border-radius: $globalBorderRadius;
display: grid;
grid-template-columns: 1fr D(100px);
grid-template-columns: 1fr 10rem;
@include DarkThemeOverride {
background: rgba(0, 0, 0, 0.2);
@ -239,14 +239,14 @@
}
> .buttons {
@include S(margin-top, 15px);
margin-top: 1.5rem;
display: flex;
justify-content: flex-end;
> button {
@include S(margin-left, 8px);
margin-left: 0.8rem;
@include Text;
@include S(min-width, 60px);
@include S(padding, 5px, 15px);
min-width: 6rem;
padding: 0.5rem 1.5rem;
transition: opacity 0.12s ease-in-out;
&:hover {

18
src/css/ingame_hud/entity_debugger.scss
View File

@ -1,8 +1,8 @@
#ingame_HUD_EntityDebugger {
position: absolute;
background: $ingameHudBg;
@include S(padding, 5px);
@include S(right, 30px);
padding: 0.5rem;
right: 3rem;
top: 50%;
transform: translateY(-50%);
@ -26,7 +26,7 @@
}
.propertyTable {
@include S(margin-top, 8px);
margin-top: 0.8rem;
}
.propertyTable,
@ -34,16 +34,16 @@
.entityComponents .object > div {
display: grid;
grid-template-columns: 1fr auto;
@include S(column-gap, 10px);
column-gap: 1rem;
}
.entityComponents {
grid-column: 1 / 3;
@include S(margin-top, 5px);
margin-top: 0.5rem;
font-family: "Roboto Mono", "Fira Code", monospace;
font-size: 90%;
@include S(letter-spacing, -0.5px);
letter-spacing: -0.05rem;
label,
span {
@ -56,8 +56,8 @@
&,
* {
@include SuperSmallText;
@include S(font-size, 7px, $important: true);
@include S(line-height, 12px, $important: true);
font-size: 0.7rem !important;
line-height: 1.2rem !important;
}
.object {
@ -72,7 +72,7 @@
}
}
> div {
@include S(margin-left, 4px);
margin-left: 0.4rem;
cursor: pointer;
}
}

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

@ -1,18 +1,18 @@
#ingame_HUD_GameMenu {
position: absolute;
@include S(top, 10px);
@include S(right, 10px);
top: 1rem;
right: 1rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
@include S(grid-gap, 6px);
grid-gap: 0.6rem;
backdrop-filter: blur(D(1px));
backdrop-filter: blur(0.1rem);
> button,
> .button {
@include PlainText;
@include S(width, 30px);
@include S(height, 30px);
width: 3rem;
height: 3rem;
pointer-events: all;
cursor: pointer;

20
src/css/ingame_hud/interactive_tutorial.scss
View File

@ -1,21 +1,21 @@
#ingame_HUD_InteractiveTutorial {
position: absolute;
@include S(left, 10px);
@include S(bottom, 10px);
left: 1rem;
bottom: 1rem;
@include StyleBelowWidth(1430px) {
@include S(bottom, 10px + 40px);
bottom: 5rem;
}
@include S(width, 150px);
width: 15rem;
background: $ingameHudBg;
@include S(padding, 7px);
padding: 0.7rem;
color: #eee;
display: flex;
flex-direction: column;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
@include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
0% {
@ -49,11 +49,11 @@
}
.helperGif {
@include S(margin-top, 5px);
@include S(width, 150px);
@include S(height, 150px);
margin-top: 0.5rem;
width: 15rem;
height: 15rem;
background: center center / cover no-repeat;
transition: opacity 0.1s ease-out;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
}
}

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

@ -1,14 +1,14 @@
#ingame_HUD_KeybindingOverlay {
position: absolute;
@include S(top, 10px);
@include S(left, 10px);
top: 1rem;
left: 1rem;
display: flex;
flex-direction: column;
align-items: flex-start;
color: #333438;
backdrop-filter: blur(D(1px));
padding: D(3px);
backdrop-filter: blur(0.1rem);
padding: 0.3rem;
@include DarkThemeOverride {
color: #fff;
@ -27,18 +27,18 @@
display: inline-grid;
@include PlainText;
align-items: center;
@include S(margin-bottom, 3px);
margin-bottom: 0.3rem;
grid-auto-flow: column;
@include S(grid-gap, 2px);
grid-gap: 0.2rem;
i {
display: inline-block;
@include S(height, 10px);
height: 1rem;
width: 1px;
@include S(margin, 0, 3px);
margin: 0 0.3rem;
background-color: #fff;
transform: rotate(10deg);
// @include S(margin, 0, 3px);
// margin: 0 .3rem;
}
kbd {
@ -67,7 +67,7 @@
color: #fff;
}
@include S(margin-left, 5px);
margin-left: 0.5rem;
}
}
}

18
src/css/ingame_hud/notifications.scss
View File

@ -1,27 +1,27 @@
#ingame_HUD_Notifications {
position: absolute;
@include S(bottom, 60px);
@include S(right, 10px);
bottom: 6rem;
right: 1rem;
.notification {
background: rgba(#333438, 0.8);
@include S(border-radius, $globalBorderRadius);
@include S(margin-top, 3px);
border-radius: $globalBorderRadius;
margin-top: 0.3rem;
color: #fff;
@include SuperSmallText;
@include S(padding, 7px, 10px);
@include S(width, 150px);
padding: 0.7rem 1rem;
width: 15rem;
@include DarkThemeOverride {
background-color: rgba(#55595d, 0.8);
}
&[data-icon] {
@include S(background-position-x, 8px);
background-position-x: 0.8rem;
background-position-y: center;
@include S(padding-left, 35px);
padding-left: 3.5rem;
background-repeat: no-repeat;
@include S(background-size, 15px);
background-size: 1.5rem;
}
transform-origin: 100% 50%;

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

@ -1,7 +1,7 @@
#ingame_HUD_PinnedShapes {
position: absolute;
@include S(left, 9px);
@include S(top, 150px);
left: 0.9rem;
top: 15rem;
@include PlainText;
display: flex;
flex-direction: column;
@ -15,7 +15,7 @@
justify-content: center;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr 1fr;
@include S(margin-bottom, 4px);
margin-bottom: 0.4rem;
color: #333438;
&.removable {
@ -23,8 +23,8 @@
}
> canvas {
@include S(width, 25px);
@include S(height, 25px);
width: 2.5rem;
height: 2.5rem;
grid-column: 1 / 2;
grid-row: 1 / 3;
pointer-events: none;
@ -34,14 +34,14 @@
> .amountLabel,
> .goalLabel {
@include S(margin-left, 5px);
margin-left: 0.5rem;
@include SuperSmallText;
font-weight: bold;
display: inline-flex;
align-items: center;
flex-direction: row;
grid-column: 2 / 3;
@include S(height, 9px);
height: 0.9rem;
@include DarkThemeOverride {
color: #eee;
@ -49,7 +49,7 @@
}
> .goalLabel {
@include S(font-size, 7px);
font-size: 0.7rem;
opacity: 0.9;
align-self: start;
justify-self: start;
@ -64,12 +64,12 @@
}
> .infoButton {
@include S(width, 8px);
@include S(height, 8px);
width: 0.8rem;
height: 0.8rem;
position: absolute;
opacity: 0.7;
@include S(top, 13px);
@include S(left, -7px);
top: 1.3rem;
left: -0.7rem;
@include DarkThemeInvert;
transition: opacity 0.12s ease-in-out;
z-index: 100;
@ -85,12 +85,12 @@
}
> .unpinButton {
@include S(width, 8px);
@include S(height, 8px);
width: 0.8rem;
height: 0.8rem;
position: absolute;
opacity: 0.7;
@include S(top, 3px);
@include S(left, -7px);
top: 0.3rem;
left: -0.7rem;
@include DarkThemeInvert;
transition: opacity 0.12s ease-in-out;
z-index: 100;
@ -111,10 +111,10 @@
content: " ";
position: absolute;
display: inline-block;
@include S(width, 8px);
@include S(height, 8px);
@include S(top, 4px);
@include S(left, -7px);
width: 0.8rem;
height: 0.8rem;
top: 0.4rem;
left: -0.7rem;
background: center center / contain no-repeat;
}

14
src/css/ingame_hud/puzzle_back_to_menu.scss
View File

@ -1,13 +1,13 @@
#ingame_HUD_PuzzleBackToMenu {
position: absolute;
@include S(top, 10px);
@include S(left, 0px);
top: 1rem;
left: 0rem;
display: flex;
flex-direction: column;
align-items: flex-start;
backdrop-filter: blur(D(1px));
padding: D(3px);
backdrop-filter: blur(0.1rem);
padding: 0.3rem;
> .button {
@include PlainText;
@ -19,8 +19,8 @@
transition-property: opacity, transform;
text-transform: uppercase;
@include PlainText;
@include S(width, 30px);
@include S(height, 30px);
width: 3rem;
height: 3rem;
@include DarkThemeInvert;
@ -35,7 +35,7 @@
& {
/* @load-async */
background: uiResource("icons/state_back_button.png") center center / D(15px) no-repeat;
background: uiResource("icons/state_back_button.png") center center / 1.5rem no-repeat;
}
}
}

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

@ -13,7 +13,7 @@
& {
/* @load-async */
background: rgba(#333538, 0.95) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
background: rgba(#333538, 0.95) uiResource("dialog_bg_pattern.png") top left / 1rem repeat;
}
@include InlineAnimation(0.1s ease-in-out) {
@ -24,8 +24,8 @@
> .dialog {
// background: rgba(#222428, 0.5);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 30px);
border-radius: $globalBorderRadius;
padding: 3rem;
@include InlineAnimation(0.5s ease-in-out) {
0% {
@ -43,8 +43,8 @@
> .title {
@include SuperHeading;
text-transform: uppercase;
@include S(font-size, 30px);
@include S(margin-bottom, 40px);
font-size: 3rem;
margin-bottom: 4rem;
color: $colorGreenBright !important;
@include InlineAnimation(0.5s ease-in-out) {
@ -82,19 +82,19 @@
> .stepLike {
display: flex;
flex-direction: column;
@include S(margin-bottom, 10px);
margin-bottom: 1rem;
@include SuperSmallText;
> .buttons {
display: flex;
align-items: center;
justify-content: center;
@include S(margin, 10px, 0);
margin: 1rem 0;
> button {
@include S(width, 60px);
@include S(height, 60px);
@include S(margin, 0, 10px);
width: 6rem;
height: 6rem;
margin: 0 1rem;
box-sizing: border-box;
border-radius: 50%;
transition:
@ -134,7 +134,7 @@
> .buttonBar {
display: flex;
@include S(margin-top, 20px);
margin-top: 2rem;
button.continue {
background: #555;
@ -149,18 +149,18 @@
}
> button {
@include S(min-width, 100px);
@include S(padding, 8px, 16px);
@include S(margin, 0, 6px);
min-width: 10rem;
padding: 0.8rem 1.6rem;
margin: 0 0.6rem;
}
}
> .actions {
position: absolute;
@include S(bottom, 40px);
bottom: 4rem;
display: grid;
@include S(grid-gap, 15px);
grid-gap: 1.5rem;
grid-auto-flow: column;
button {

8
src/css/ingame_hud/puzzle_dlc_logo.scss
View File

@ -1,9 +1,9 @@
#ingame_HUD_PuzzleDLCLogo {
position: absolute;
@include S(width, 120px);
@include S(height, 40px);
@include S(left, 40px);
@include S(top, 7px);
width: 12rem;
height: 4rem;
left: 4rem;
top: 0.7rem;
& {
/* @load-async */

10
src/css/ingame_hud/puzzle_editor_controls.scss
View File

@ -1,16 +1,16 @@
#ingame_HUD_PuzzleEditorControls {
position: absolute;
@include S(top, 70px);
@include S(left, 10px);
top: 7rem;
left: 1rem;
display: flex;
flex-direction: column;
@include SuperDuperSmallText;
@include S(width, 200px);
width: 20rem;
> span {
@include S(margin-bottom, 10px);
margin-bottom: 1rem;
strong {
font-weight: bold;
@ -23,7 +23,7 @@
#ingame_HUD_PuzzleEditorTitle {
position: absolute;
@include S(top, 18px);
top: 1.8rem;
left: 50%;
transform: translateX(-50%);
text-transform: uppercase;

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

@ -1,13 +1,13 @@
#ingame_HUD_PuzzleEditorReview {
position: absolute;
@include S(top, 17px);
@include S(right, 10px);
top: 1.7rem;
right: 1rem;
display: flex;
flex-direction: column;
align-items: flex-end;
backdrop-filter: blur(D(1px));
padding: D(3px);
backdrop-filter: blur(0.1rem);
padding: 0.3rem;
> .button {
@include ButtonText;
@ -19,7 +19,7 @@
text-transform: uppercase;
transition-property: opacity, transform;
@include PlainText;
@include S(padding-right, 25px);
padding-right: 2.5rem;
opacity: 1;
@include DarkThemeInvert;
@ -34,14 +34,14 @@
& {
/* @load-async */
background: uiResource("icons/state_next_button.png") right center / D(15px) no-repeat;
background: uiResource("icons/state_next_button.png") right center / 1.5rem no-repeat;
}
}
> .content {
@include SuperDuperSmallText;
@include S(width, 180px);
@include S(padding-right, 25px);
width: 18rem;
padding-right: 2.5rem;
text-align: right;
text-transform: uppercase;
color: $accentColorDark;

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

@ -1,15 +1,15 @@
#ingame_HUD_PuzzleEditorSettings {
position: absolute;
background: $ingameHudBg;
@include S(padding, 10px);
@include S(bottom, 60px);
@include S(left, 10px);
padding: 1rem;
bottom: 6rem;
left: 1rem;
@include SuperSmallText;
color: #eee;
display: flex;
flex-direction: column;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
> .section {
> label {
@ -17,29 +17,29 @@
}
.plusMinus {
@include S(margin-top, 5px);
margin-top: 0.5rem;
display: grid;
grid-template-columns: 1fr auto auto auto;
align-items: center;
@include S(grid-gap, 5px);
grid-gap: 0.5rem;
label {
@include S(margin-right, 10px);
margin-right: 1rem;
}
button {
@include PlainText;
@include S(padding, 0);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
@include S(width, 15px);
@include S(height, 15px);
width: 1.5rem;
height: 1.5rem;
}
.value {
text-align: center;
@include S(min-width, 15px);
min-width: 1.5rem;
}
}
@ -47,9 +47,9 @@
> .buttonBar {
display: flex;
align-items: center;
@include S(margin-top, 10px);
margin-top: 1rem;
> button {
@include S(margin-right, 4px);
margin-right: 0.4rem;
@include SuperSmallText;
&:last-child {
margin-right: 0;
@ -60,7 +60,7 @@
> .buildingsButton {
display: grid;
align-items: center;
@include S(margin-top, 4px);
margin-top: 0.4rem;
> button {
@include SuperSmallText;
}

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

@ -1,13 +1,13 @@
#ingame_HUD_PuzzleNextPuzzle {
position: absolute;
@include S(top, 17px);
@include S(right, 10px);
top: 1.7rem;
right: 1rem;
display: flex;
flex-direction: column;
align-items: flex-end;
backdrop-filter: blur(D(1px));
padding: D(3px);
backdrop-filter: blur(0.1rem);
padding: 0.3rem;
> .button {
@include ButtonText;
@ -19,7 +19,7 @@
text-transform: uppercase;
transition-property: opacity, transform;
@include PlainText;
@include S(padding-right, 25px);
padding-right: 2.5rem;
opacity: 1;
@include DarkThemeInvert;
@ -34,7 +34,7 @@
& {
/* @load-async */
background: uiResource("icons/state_next_button.png") right center / D(15px) no-repeat;
background: uiResource("icons/state_next_button.png") right center / 1.5rem no-repeat;
}
}
}

28
src/css/ingame_hud/puzzle_play_metadata.scss
View File

@ -1,18 +1,18 @@
#ingame_HUD_PuzzlePlayMetadata {
position: absolute;
@include S(top, 70px);
@include S(left, 10px);
top: 7rem;
left: 1rem;
display: flex;
flex-direction: column;
@include S(width, 200px);
width: 20rem;
> .info {
display: flex;
flex-direction: column;
@include SuperSmallText;
@include S(margin-bottom, 5px);
margin-bottom: 0.5rem;
> label {
text-transform: uppercase;
@ -35,7 +35,7 @@
justify-self: end;
align-self: end;
flex-direction: row;
@include S(margin-bottom, 10px);
margin-bottom: 1rem;
opacity: 0.8;
@include DarkThemeInvert;
@include DarkThemeOverride {
@ -48,8 +48,8 @@
align-self: start;
justify-self: start;
font-weight: bold;
@include S(margin-right, 10px);
@include S(padding-left, 14px);
margin-right: 1rem;
padding-left: 1.4rem;
opacity: 0.7;
display: inline-flex;
align-items: center;
@ -57,7 +57,7 @@
& {
/* @load-async */
background: uiResource("icons/puzzle_plays.png") #{D(2px)} center / #{D(8px)} #{D(8px)} no-repeat;
background: uiResource("icons/puzzle_plays.png") 0.2rem center / 0.8rem 0.8rem no-repeat;
}
}
@ -69,25 +69,25 @@
align-self: start;
justify-self: start;
font-weight: bold;
@include S(padding-left, 14px);
padding-left: 1.4rem;
opacity: 0.7;
& {
/* @load-async */
background: uiResource("icons/puzzle_upvotes.png") #{D(2px)} center / #{D(8px)} #{D(8px)} no-repeat;
background: uiResource("icons/puzzle_upvotes.png") 0.2rem center / 0.8rem 0.8rem no-repeat;
}
}
}
> .key {
button {
@include S(margin-top, 2px);
margin-top: 0.2rem;
}
}
button {
@include SuperSmallText;
align-self: start;
@include S(min-width, 50px);
min-width: 5rem;
&.report {
background-color: $accentColorDark;
@ -100,7 +100,7 @@
flex-direction: column;
> button {
@include S(margin-bottom, 4px);
margin-bottom: 0.4rem;
}
}
}
@ -108,7 +108,7 @@
#ingame_HUD_PuzzlePlayTitle {
position: absolute;
@include S(top, 18px);
top: 1.8rem;
left: 50%;
transform: translateX(-50%);
text-transform: uppercase;

10
src/css/ingame_hud/puzzle_play_settings.scss
View File

@ -1,19 +1,19 @@
#ingame_HUD_PuzzlePlaySettings {
position: absolute;
background: $ingameHudBg;
@include S(padding, 10px);
@include S(bottom, 60px);
@include S(left, 10px);
padding: 1rem;
bottom: 6rem;
left: 1rem;
@include SuperSmallText;
color: #eee;
display: flex;
flex-direction: column;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
> .section {
display: grid;
@include S(grid-gap, 5px);
grid-gap: 0.5rem;
grid-auto-flow: row;
> button {

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

@ -1,9 +1,9 @@
#ingame_HUD_SandboxController {
position: absolute;
background: $ingameHudBg;
@include S(padding, 5px);
@include S(bottom, 10px);
@include S(left, 10px);
padding: 0.5rem;
bottom: 1rem;
left: 1rem;
@include SuperSmallText;
color: #eee;
@ -19,29 +19,29 @@
}
.plusMinus {
@include S(margin-top, 4px);
margin-top: 0.4rem;
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
@include S(grid-gap, 4px);
grid-gap: 0.4rem;
button {
@include PlainText;
@include S(padding, 0);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
@include S(width, 15px);
@include S(height, 15px);
width: 1.5rem;
height: 1.5rem;
}
}
.additionalOptions {
display: flex;
flex-direction: column;
@include S(margin-top, 10px);
margin-top: 1rem;
button {
@include S(margin-bottom, 2px);
margin-bottom: 0.2rem;
@include SuperSmallText;
}
}

14
src/css/ingame_hud/settings_menu.scss
View File

@ -1,9 +1,9 @@
#ingame_HUD_SettingsMenu {
.statsElement {
position: absolute;
@include S(left, 30px);
@include S(right, 30px);
@include S(bottom, 30px);
left: 3rem;
right: 3rem;
bottom: 3rem;
color: #fff;
display: grid;
grid-template-rows: auto auto;
@ -31,8 +31,8 @@
.buttons {
display: grid;
grid-auto-flow: column;
@include S(grid-gap, 50px);
@include S(margin-top, -10px);
grid-gap: 5rem;
margin-top: -1rem;
button {
background: transparent;
@ -40,8 +40,8 @@
content: "";
opacity: 0.8;
@include S(width, 35px);
@include S(height, 35px);
width: 3.5rem;
height: 3.5rem;
&.settings {
/* @load-async */

56
src/css/ingame_hud/shape_viewer.scss
View File

@ -1,39 +1,41 @@
@use "sass:math";
#ingame_HUD_ShapeViewer {
$dims: 170px;
$dims: 17rem;
.content {
display: flex;
@include S(width, $dims);
width: $dims;
width: 100%;
flex-direction: column;
overflow-x: hidden;
&[data-layers="3"],
&[data-layers="4"] {
@include S(width, 2 * $dims);
width: 2 * $dims;
.renderArea {
display: grid;
grid-template-columns: 1fr 1fr;
@include S(grid-row-gap, 15px);
grid-row-gap: 1.5rem;
}
}
.renderArea {
display: grid;
width: 100%;
@include S(grid-row-gap, 10px);
grid-row-gap: 1rem;
place-items: center;
}
.infoArea {
align-self: flex-end;
@include S(margin-top, 10px);
margin-top: 1rem;
display: flex;
flex-direction: column;
overflow: hidden;
button {
@include S(margin, 0);
margin: 0;
@include PlainText;
}
}
@ -45,16 +47,16 @@
@include DarkThemeOverride {
background: rgba(0, 10, 20, 0.2);
}
@include S(width, 150px);
@include S(height, 100px);
width: 15rem;
height: 10rem;
display: flex;
align-items: center;
justify-content: center;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
> canvas {
@include S(width, 50px);
@include S(height, 50px);
width: 5rem;
height: 5rem;
}
.quad {
@ -66,27 +68,27 @@
align-items: center;
box-sizing: border-box;
$arrowDims: 23px;
$spacing: 9px;
@include S(padding, 6px);
$arrowDims: 2.3rem;
$spacing: 0.9rem;
padding: 0.6rem;
.colorLabel {
text-transform: uppercase;
@include SuperSmallText;
@include S(font-size, 9px);
font-size: 0.9rem;
}
.emptyLabel {
text-transform: uppercase;
@include SuperSmallText;
@include S(font-size, 9px);
font-size: 0.9rem;
}
&::after {
content: " ";
background: rgba(0, 10, 20, 0.5);
@include S(width, $arrowDims);
@include S(height, 1px);
width: $arrowDims;
height: 0.1rem;
position: absolute;
transform: rotate(45deg);
transform-origin: 50% 50%;
@ -104,8 +106,8 @@
justify-content: flex-end;
&::after {
@include S(left, $spacing);
@include S(bottom, $arrowDims / 2 + $spacing);
left: $spacing;
bottom: math.div($arrowDims, 2) + $spacing;
transform: rotate(-45deg);
}
}
@ -117,8 +119,8 @@
justify-content: flex-end;
&::after {
@include S(left, $spacing);
@include S(top, $arrowDims / 2 + $spacing);
left: $spacing;
top: math.div($arrowDims, 2) + $spacing;
transform: rotate(45deg);
}
}
@ -130,8 +132,8 @@
justify-content: flex-start;
&::after {
@include S(right, $spacing);
@include S(top, $arrowDims / 2 + $spacing);
right: $spacing;
top: math.div($arrowDims, 2) + $spacing;
transform: rotate(135deg);
}
}
@ -143,8 +145,8 @@
justify-content: flex-start;
&::after {
@include S(right, $spacing);
@include S(bottom, $arrowDims / 2 + $spacing);
right: $spacing;
bottom: math.div($arrowDims, 2) + $spacing;
transform: rotate(225deg);
}
}

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

@ -1,20 +1,20 @@
#ingame_HUD_Shop {
.content {
@include S(padding-right, 10px);
padding-right: 1rem;
display: flex;
flex-direction: column;
@include S(width, 500px);
width: 50rem;
.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;
border-radius: $globalBorderRadius;
margin-bottom: 0.4rem;
padding: 0.5rem 1rem;
grid-row-gap: 0.1rem;
height: 8.5rem;
grid-template-rows: #{2rem} auto;
&:last-child {
margin-bottom: 0;
@ -38,16 +38,16 @@
}
.tier {
@include S(margin-right, 9px);
margin-right: 0.9rem;
background: $colorGreenBright;
@include S(border-radius, $globalBorderRadius);
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);
min-width: 5rem;
padding: 0rem 0.5rem;
&[data-tier="0"] {
background-color: rgb(73, 186, 190);
@ -74,15 +74,15 @@
}
.icon {
@include S(width, 40px);
@include S(height, 40px);
width: 4rem;
height: 4rem;
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);
margin-right: 3rem;
margin-left: 1rem;
opacity: 0.32;
display: none;
}
@ -101,7 +101,7 @@
grid-row: 3 / 4;
display: grid;
grid-auto-flow: column;
@include S(grid-gap, 9px);
grid-gap: 0.9rem;
justify-content: start;
.requirement {
@ -109,7 +109,7 @@
display: flex;
flex-direction: column;
align-items: center;
@include S(width, 70px);
width: 7rem;
overflow: hidden;
button.pin {
@ -118,11 +118,11 @@
background: uiResource("icons/pin.png") center center / 95% no-repeat;
}
@include S(width, 12px);
@include S(height, 12px);
width: 1.2rem;
height: 1.2rem;
position: absolute;
@include S(top, 2px);
@include S(right, 2px);
top: 0.2rem;
right: 0.2rem;
opacity: 0.6;
cursor: pointer;
pointer-events: all;
@ -206,11 +206,11 @@
}
button.showInfo {
@include S(width, 11px);
@include S(height, 11px);
width: 1.1rem;
height: 1.1rem;
position: absolute;
@include S(top, 17px);
@include S(right, 2.5px);
top: 1.7rem;
right: 0.25rem;
opacity: 0.5;
cursor: pointer;
pointer-events: all;
@ -227,23 +227,23 @@
}
canvas {
@include S(width, 40px);
@include S(height, 40px);
width: 4rem;
height: 4rem;
}
.amount {
@include S(margin-top, 4px);
margin-top: 0.4rem;
z-index: 10;
@include SuperSmallText;
background: #e2e4e6;
@include S(line-height, 13px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 1px, 0px, 2px);
line-height: 1.3rem;
border-radius: $globalBorderRadius;
padding: 0.1rem 0 0.2rem;
position: relative;
text-align: center;
@include S(min-width, 50px);
// @include S(max-width, 100px);
min-width: 5rem;
// max-width: 10.0rem;
overflow: hidden;
width: 100%;
@ -257,7 +257,7 @@
left: 0;
right: 0;
top: 0;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
position: absolute;
display: inline-block;
z-index: -1;
@ -286,7 +286,7 @@
grid-row: 3 / 4;
align-self: center;
justify-self: end;
// @include S(padding, 4px, 5px);
// padding: .4rem .5rem;
// @include PlainText;
background-color: $colorGreenBright;
color: #fff;

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

@ -1,6 +1,6 @@
#ingame_HUD_Statistics {
.content {
@include S(width, 500px);
width: 50rem;
}
.filterHeader {
@ -10,31 +10,31 @@
justify-items: end;
button {
@include S(height, 20px);
@include S(padding, 1px, 10px);
height: 2rem;
padding: 0.1rem 1rem;
border: 0;
box-shadow: none;
@include S(min-width, 30px);
min-width: 3rem;
color: #fff;
opacity: 0.25;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
border-radius: 0;
&:first-child {
@include S(border-top-left-radius, $globalBorderRadius);
@include S(border-bottom-left-radius, $globalBorderRadius);
border-top-left-radius: $globalBorderRadius;
border-bottom-left-radius: $globalBorderRadius;
}
&:last-child {
@include S(border-top-right-radius, $globalBorderRadius);
@include S(border-bottom-right-radius, $globalBorderRadius);
border-top-right-radius: $globalBorderRadius;
border-bottom-right-radius: $globalBorderRadius;
}
&.displayIcons,
&.displayDetailed,
&.displaySorted,
&.displayIterateUnit {
background: transparent center center / #{D(15px)} no-repeat;
background: transparent center center / 1.5rem no-repeat;
}
&.displayDetailed {
@ -45,12 +45,12 @@
&.displayIcons {
/* @load-async */
background-image: uiResource("icons/display_icons.png");
background-size: #{D(11.5px)};
background-size: 1.15rem;
}
&.displayDetailed {
@include S(border-top-left-radius, $globalBorderRadius);
@include S(border-bottom-left-radius, $globalBorderRadius);
border-top-left-radius: $globalBorderRadius;
border-bottom-left-radius: $globalBorderRadius;
}
&.displaySorted {
@ -58,12 +58,12 @@
/* @load-async */
background-image: uiResource("icons/display_sorted.png");
}
background-size: #{D(11.5px)};
background-size: 1.15rem;
margin-right: 5px;
@include S(border-top-right-radius, $globalBorderRadius);
@include S(border-bottom-right-radius, $globalBorderRadius);
border-top-right-radius: $globalBorderRadius;
border-bottom-right-radius: $globalBorderRadius;
@include S(padding, 1px, 0);
padding: 0.1rem 0;
}
&.displayIterateUnit {
@ -72,7 +72,7 @@
background-image: uiResource("icons/toggle_unit.png");
}
opacity: 0.8;
@include S(padding, 1px, 0);
padding: 0.1rem 0;
}
background-color: #44484a !important;
@ -100,20 +100,20 @@
.sourceExplanation {
@include SuperSmallText();
@include S(margin-top, 5px);
margin-top: 0.5rem;
color: #aaa;
}
.content {
@include S(margin-top, 10px);
@include S(height, 350px);
margin-top: 1rem;
height: 35rem;
overflow-y: scroll;
display: flex;
flex-direction: column;
justify-content: flex-start;
@include S(padding-right, 4px);
padding-right: 0.4rem;
> .noEntries {
width: 100%;
@ -127,12 +127,12 @@
> div {
background: #f4f4f4;
@include S(margin-bottom, 4px);
margin-bottom: 0.4rem;
display: grid;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
grid-template-columns: 1fr auto;
@include S(padding, 5px);
padding: 0.5rem;
&:last-child {
margin-bottom: 0;
}
@ -152,13 +152,13 @@
canvas.icon {
grid-column: 1 / 2;
grid-row: 1 / 2;
@include S(width, 40px);
@include S(height, 40px);
width: 4rem;
height: 4rem;
}
.counter {
@include SuperSmallText;
@include S(padding, 0, 3px);
padding: 0, 0.3rem;
}
}
}
@ -176,12 +176,12 @@
&[data-displaymode="icons"] .content.hasEntries {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: #{D(73px)};
grid-auto-rows: 7.3rem;
align-items: flex-start;
@include S(grid-column-gap, 3px);
grid-column-gap: 0.3rem;
> div {
@include S(grid-row-gap, 5px);
@include S(height, 60px);
grid-row-gap: 0.5rem;
height: 6rem;
grid-template-columns: 1fr;
grid-template-rows: 1fr auto;
place-items: center;
@ -200,10 +200,10 @@
}
&[data-displaymode="detailed"] .content.hasEntries {
> div {
@include S(padding, 10px);
@include S(height, 40px);
padding: 1rem;
height: 4rem;
grid-template-columns: auto 1fr auto;
@include S(grid-column-gap, 15px);
grid-column-gap: 1.5rem;
.counter {
grid-column: 3 / 4;
@ -219,14 +219,13 @@
}
canvas.graph {
@include S(width, 270px);
@include S(height, 40px);
@include S(border-radius, 0, 0, 2px, 2px);
width: 27rem;
height: 4rem;
border-radius: 0 0 0.2rem 0.2rem;
$color: rgba(0, 10, 20, 0.04);
// background: $color;
border: #{D(4px)} solid transparent;
// @include S(border-width, 1px, 0, 1px, 0);
@include S(margin-top, -3px);
border: 0.4rem solid transparent;
margin-top: -0.3rem;
}
}
}

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

@ -1,10 +1,10 @@
#ingame_HUD_TutorialHints {
position: absolute;
@include S(left, 10px);
@include S(bottom, 10px);
left: 1rem;
bottom: 1rem;
@include StyleBelowWidth(1430px) {
@include S(bottom, 50px);
bottom: 5rem;
}
display: flex;
@ -16,11 +16,11 @@
transition-property: background-color, transform, bottom, left;
@include S(padding, 5px);
padding: 0.5rem;
video {
transition: all 0.2s ease-in-out;
transition-property: opacity, width;
@include S(width, 0px);
width: 0rem;
opacity: 0;
z-index: 10;
position: relative;
@ -30,9 +30,9 @@
color: #333438;
display: grid;
align-items: center;
@include S(grid-gap, 2px);
grid-gap: 0.2rem;
grid-template-columns: 1fr;
@include S(margin-bottom, 3px);
margin-bottom: 0.3rem;
z-index: 11;
position: relative;
@ -44,10 +44,10 @@
justify-content: flex-start;
align-items: center;
&::before {
@include S(margin-right, 4px);
margin-right: 0.4rem;
content: " ";
@include S(width, 12px);
@include S(height, 12px);
width: 1.2rem;
height: 1.2rem;
display: inline-block;
& {
/* @load-async */
@ -100,12 +100,12 @@
@include InlineAnimation(0.2s ease-in-out) {
0% {
opacity: 0;
@include S(width, 0px);
width: 0rem;
}
}
opacity: 1;
@include S(width, 500px);
width: 50rem;
}
button.toggleHint {
.hide {

30
src/css/ingame_hud/unlock_notification.scss
View File

@ -9,7 +9,7 @@
& {
/* @load-async */
background: rgba(#333538, 0.98) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
background: rgba(#333538, 0.98) uiResource("dialog_bg_pattern.png") top left / 1rem repeat;
}
@include InlineAnimation(0.1s ease-in-out) {
@ -20,8 +20,8 @@
.dialog {
// background: rgba(#222428, 0.5);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 30px);
border-radius: $globalBorderRadius;
padding: 3rem;
@include InlineAnimation(0.5s ease-in-out) {
0% {
@ -38,7 +38,7 @@
.subTitle {
@include SuperHeading;
text-transform: uppercase;
@include S(font-size, 40px);
font-size: 4rem;
@include InlineAnimation(0.5s ease-in-out) {
0% {
@ -56,10 +56,10 @@
.subTitle {
@include PlainText;
display: inline-block;
@include S(margin, 5px, 0, 20px);
margin: 0.5rem 0 2rem;
color: $colorGreenBright;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateY(-60vh);
@ -74,7 +74,7 @@
}
.contents {
@include S(width, 400px);
width: 40rem;
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateX(-100vw);
@ -91,7 +91,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
@include S(grid-gap, 10px);
grid-gap: 1rem;
.rewardName {
grid-column: 1 / 3;
@ -113,9 +113,9 @@
.rewardDesc {
grid-column: 1 / 3;
@include PlainText;
@include S(margin-bottom, 15px);
margin-bottom: 1.5rem;
color: #aaacaf;
@include S(width, 400px);
width: 40rem;
text-align: left;
strong {
color: #fff;
@ -125,14 +125,14 @@
.images {
display: flex;
.buildingExplanation {
@include S(width, 200px);
@include S(height, 200px);
width: 20rem;
height: 20rem;
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);
border-radius: $globalBorderRadius;
box-shadow: 0.2rem 0.3rem 0 0 rgba(0, 0, 0, 0.15);
}
}
}
@ -140,7 +140,7 @@
button.close {
border: 0;
position: relative;
@include S(margin-top, 30px);
margin-top: 3rem;
&:not(.unlocked) {
pointer-events: none;

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

@ -1,18 +1,18 @@
#ingame_HUD_Waypoints_Hint {
position: absolute;
@include S(right, 10px);
@include S(bottom, 10px);
right: 1rem;
bottom: 1rem;
display: flex;
flex-direction: column;
@include PlainText;
@include S(width, 150px);
width: 15rem;
background: $ingameHudBg;
@include S(padding, 7px);
padding: 0.7rem;
color: #eee;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
.desc {
@include SuperSmallText;
@ -29,8 +29,8 @@
#ingame_HUD_Waypoints {
position: absolute;
@include S(right, 10px);
@include S(top, 45px);
right: 1rem;
top: 4.5rem;
display: flex;
flex-direction: column;
@include DarkThemeInvert();
@ -39,14 +39,14 @@
overflow-x: hidden;
overflow-y: auto;
pointer-events: all;
@include S(padding-right, 5px);
@include S(padding-bottom, 5px);
@include S(padding-top, 5px);
padding-right: 0.5rem;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
// Scrollbar
&::-webkit-scrollbar {
@include S(width, 2px);
@include S(height, 6px);
width: 0.2rem;
height: 0.6rem;
}
.waypoint {
@ -54,13 +54,13 @@
pointer-events: all;
cursor: pointer;
color: #333438;
@include S(padding-left, 11px);
padding-left: 1.1rem;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
& {
/* @load-async */
background: uiResource("icons/waypoint.png") left 50% / #{D(8px)} no-repeat;
background: uiResource("icons/waypoint.png") left 50% / 0.8rem no-repeat;
}
&.layer--wires {
@ -69,7 +69,7 @@
}
opacity: 0.7;
@include S(margin-bottom, 1px);
margin-bottom: 0.1rem;
font-weight: bold;
&:hover {
@ -77,9 +77,9 @@
}
.editButton {
@include S(width, 10px);
@include S(height, 10px);
@include S(margin-left, 4px);
width: 1rem;
height: 1rem;
margin-left: 0.4rem;
& {
/* @load-async */
background: uiResource("icons/edit_key.png") center center / 70% no-repeat;
@ -96,22 +96,22 @@
&.hub {
// Transform because there is a canvas before
@include S(margin-left, -2px);
margin-left: -0.2rem;
grid-template-columns: auto 1fr;
background: none !important;
@include S(padding-left, 0);
padding-left: 0;
canvas {
@include S(width, 12px);
@include S(height, 12px);
@include S(margin-right, 1px);
width: 1.2rem;
height: 1.2rem;
margin-right: 0.1rem;
}
}
&.shapeIcon {
canvas {
@include S(width, 15px);
@include S(height, 15px);
width: 1.5rem;
height: 1.5rem;
pointer-events: none;
// Double invert, to make sure it has the right color
@include DarkThemeInvert();

1
src/css/main.scss
View File

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

27
src/css/mixins.scss
View File

@ -54,33 +54,10 @@
$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 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 DropShadow($yOffset: 0.2rem, $blur: 0.2rem, $amount: 0.2) {
box-shadow: 0 $yOffset $blur 0 rgba(#000, $amount);
}
@mixin Button3D($bgColor, $pressEffect: true) {

10
src/css/states/about.scss
View File

@ -1,26 +1,26 @@
#state_AboutState {
> .container .content {
@include S(max-width, 600px);
max-width: 60rem;
@include PlainText;
padding: 0;
background: transparent;
}
.head {
@include S(padding, 20px);
padding: 2rem;
img {
display: block;
margin: 0 auto;
@include S(max-width, 200px);
max-width: 20rem;
}
}
.text {
@include S(margin, 10px);
margin: 1rem;
}
a {
@include S(margin, 0, 3px);
margin: 0 0.3rem;
}
}

8
src/css/states/changelog.scss
View File

@ -1,6 +1,6 @@
#state_ChangelogState {
.content {
@include S(max-width, 800px);
max-width: 80rem;
display: flex;
flex-direction: column;
}
@ -19,12 +19,12 @@
.changes {
@include PlainText;
@include S(padding-left, 20px);
padding-left: 2rem;
strong {
color: #aaa;
text-transform: uppercase;
@include S(padding, 1px, 2px);
@include S(margin-right, 3px);
padding: 0.1rem 0.2rem;
margin-right: 0.3rem;
}
}
}

6
src/css/states/ingame.scss
View File

@ -16,9 +16,9 @@
.prefab_GameHint {
position: absolute;
@include S(bottom, 40px);
@include S(left, 20px);
@include S(right, 20px);
bottom: 4rem;
left: 2rem;
right: 2rem;
@include PlainText;
text-align: center;

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

@ -3,26 +3,26 @@
.topEntries {
display: grid;
grid-template-columns: 1fr auto;
@include S(grid-gap, 5px);
@include S(margin-bottom, 10px);
grid-gap: 0.5rem;
margin-bottom: 1rem;
}
.hint {
display: block;
background: #eee;
@include S(padding, 6px, 10px);
padding: 0.6rem 1rem;
@include PlainText;
@include S(border-radius, $globalBorderRadius);
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;
margin-top: 0.2rem;
padding-top: 0.2rem;
grid-gap: 0.4rem;
grid-template-columns: 1fr 10rem auto auto;
border-bottom: 0.1rem dotted #eee;
color: #888c8f;
.mapping {
color: $colorBlueBright;
@ -30,8 +30,8 @@
}
button {
@include S(height, 15px);
@include S(width, 15px);
height: 1.5rem;
width: 1.5rem;
background: transparent center center / 40% no-repeat;
opacity: 0.9;
&.editKeybinding {

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

@ -2,7 +2,7 @@
display: grid;
align-items: center;
justify-content: center;
grid-template-rows: D(95px) 1fr D(100px);
grid-template-rows: 9.5rem 1fr 10rem;
grid-template-columns: 1fr;
// background: #aaacb4 center center / cover !important;
@ -10,21 +10,21 @@
.topButtons {
position: absolute;
@include S(top, 25px);
@include S(right, 25px);
top: 2.5rem;
right: 2.5rem;
display: flex;
flex-direction: row;
z-index: 20;
@include S(gap, 9px);
gap: 0.9rem;
.settingsButton,
.exitAppButton,
.languageChoose {
@include S(width, 35px);
@include S(height, 35px);
width: 3.5rem;
height: 3.5rem;
pointer-events: all;
border-radius: 50%;
box-shadow: 0 D(2px) D(3px) rgba(#000, 0.1);
box-shadow: 0 0.2rem 0.3rem rgba(#000, 0.1);
background: rgba(#fff, 1) uiResource("icons/main_menu_settings.png") center center / 70% no-repeat;
cursor: pointer;
@ -75,7 +75,7 @@
opacity: 0;
display: none;
transform: translate(50%, 50%);
filter: blur(D(10px));
filter: blur(1rem);
$opacity: 0.4;
&.loaded {
@ -94,12 +94,12 @@
}
.mainWrapper {
@include S(margin-top, 15px);
margin-top: 1.5rem;
align-items: start;
justify-items: center;
align-self: center;
justify-self: center;
@include S(grid-column-gap, 20px);
grid-column-gap: 2rem;
display: grid;
position: relative;
@ -110,7 +110,7 @@
grid-template-columns: 1fr;
}
&[data-columns="2"] {
grid-template-columns: D(290px) 1fr;
grid-template-columns: 29rem 1fr;
}
}
@ -122,14 +122,14 @@
z-index: 20;
flex-direction: column;
@include S(padding-top, 0px);
padding-top: 0rem;
img {
@include S(width, 710px / 3);
@include S(height, 180px / 3);
width: 710px / 3;
height: 180px / 3;
}
position: relative;
@include S(left, -8px);
left: -0.8rem;
}
.sideContainer {
@ -137,7 +137,7 @@
width: 100%;
grid-column: 2 / 3;
flex-direction: column;
@include S(grid-gap, 20px);
grid-gap: 2rem;
.puzzleContainer {
display: flex;
@ -149,38 +149,38 @@
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);
border-radius: $globalBorderRadius;
box-shadow: 0 0.5rem 1rem rgba(#000, 0.4);
border: 0.1rem solid rgba(#000, 0.1);
overflow: hidden;
> button {
@include S(margin-top, 20px);
margin-top: 2rem;
@include Heading;
@include S(padding, 10px, 30px);
padding: 1rem 3rem;
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;
height: 11.8rem;
width: 25rem;
background: uiResource("puzzle_460x215_15.png") center -0.5rem / cover repeat;
> button {
pointer-events: all;
@include S(padding, 4px, 10px);
padding: 0.4rem 1rem;
margin: 0;
background: #47c599;
box-sizing: border-box;
position: absolute;
@include S(top, 10px);
@include S(right, 10px);
top: 1rem;
right: 1rem;
z-index: 100;
@include PlainText;
z-index: 200;
color: #111215;
box-shadow: 0 D(2px) D(9px) rgba(#000, 0.4);
box-shadow: 0 0.2rem 0.9rem rgba(#000, 0.4);
}
}
}
@ -195,11 +195,11 @@
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);
width: 25rem;
padding: 1.5rem;
padding-bottom: 1rem;
border-radius: $globalBorderRadius;
box-shadow: 0 0.5rem 1.5rem rgba(#000, 0.2);
.header {
display: flex;
@ -207,12 +207,12 @@
align-items: center;
text-transform: uppercase;
@include S(margin-bottom, 10px);
margin-bottom: 1rem;
.editMods {
margin-left: auto;
@include S(width, 20px);
@include S(height, 20px);
width: 2rem;
height: 2rem;
padding: 0;
opacity: 0.5;
background: transparent center center/ 80% no-repeat;
@ -234,7 +234,7 @@
.dlcHint {
@include SuperSmallText;
@include S(margin-top, 10px);
margin-top: 1rem;
width: 100%;
display: grid;
@ -246,11 +246,11 @@
.mod {
background: #eee;
width: 100%;
@include S(border-radius, $globalBorderRadius);
@include S(padding, 5px);
border-radius: $globalBorderRadius;
padding: 0.5rem;
box-sizing: border-box;
@include PlainText;
@include S(margin-bottom, 5px);
margin-bottom: 0.5rem;
display: flex;
flex-direction: column;
@ -267,14 +267,14 @@
.modsList {
box-sizing: border-box;
@include S(height, 100px);
@include S(padding, 5px);
border: D(1px) solid #eee;
height: 10rem;
padding: 0.5rem;
border: 0.1rem solid #eee;
overflow-y: scroll;
width: 100%;
display: flex;
flex-direction: column;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
pointer-events: all;
:last-child {
@ -290,15 +290,15 @@
justify-content: center;
flex-direction: column;
background: rgba(#fff, 0.9);
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
height: 100%;
box-shadow: 0 D(9px) D(15px) rgba(#000, 0.2);
box-shadow: 0 0.9rem 1.5rem rgba(#000, 0.2);
width: 100%;
position: relative;
align-self: center;
justify-self: center;
grid-column: 1 / 2;
@include S(max-width, 400px);
max-width: 40rem;
overflow: hidden;
box-sizing: border-box;
@ -315,8 +315,8 @@
width: 100%;
background: rgba(0, 20, 40, 0.05);
@include S(padding, 10px);
@include S(grid-gap, 10px);
padding: 1rem;
grid-gap: 1rem;
max-width: 100%;
box-sizing: border-box;
@ -324,7 +324,7 @@
.continueButton {
@include SuperHeading;
width: 100%;
@include S(padding, 15px, 10px);
padding: 1.5rem 1rem;
letter-spacing: 0.1em;
box-sizing: border-box;
font-weight: bold;
@ -357,11 +357,11 @@
grid-row: 1 / 1;
min-width: auto;
@include S(grid-gap, 5px);
grid-gap: 0.5rem;
width: 100%;
> button {
@include S(padding, 3px, 6px);
padding: 0.3rem 0.6rem;
width: 100%;
white-space: nowrap;
margin: 0 !important;
@ -379,9 +379,9 @@
display: flex;
flex-grow: 1;
flex-direction: column;
@include S(padding, 10px);
padding: 1rem;
box-sizing: border-box;
@include S(min-height, 150px);
min-height: 15rem;
.savegamesNone {
align-items: center;
@ -390,7 +390,7 @@
@include PlainText;
flex-grow: 1;
text-align: center;
@include S(padding, 0, 20px);
padding: 0 2rem;
opacity: 0.5;
@include DarkThemeOverride {
@ -402,22 +402,22 @@
overflow-y: auto;
width: 100%;
pointer-events: all;
@include S(padding-right, 5px);
margin-right: D(-5px);
@include S(max-height, 150px);
padding-right: 0.5rem;
margin-right: -0.5rem;
max-height: 15rem;
display: grid;
grid-auto-flow: row;
@include S(grid-gap, 5px);
grid-gap: 0.5rem;
.savegame {
background: #eee;
@include S(border-radius, $globalBorderRadius);
@include S(padding, 5px);
border-radius: $globalBorderRadius;
padding: 0.5rem;
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);
grid-column-gap: 0.4rem;
grid-row-gap: 0.1rem;
.playtime {
grid-column: 2 / 3;
@ -442,7 +442,7 @@
> span {
display: inline-flex;
@include S(max-width, 140px);
max-width: 14rem;
overflow: hidden;
}
}
@ -472,8 +472,8 @@
& {
background-image: uiResource("icons/download.png");
}
@include S(width, 15px);
@include S(height, 15px);
width: 1.5rem;
height: 1.5rem;
background-size: 80%;
align-self: start;
border-radius: 0;
@ -494,8 +494,8 @@
& {
background-image: uiResource("icons/delete.png");
}
@include S(width, 15px);
@include S(height, 15px);
width: 1.5rem;
height: 1.5rem;
align-self: end;
background-size: 80%;
border-radius: 0;
@ -514,14 +514,14 @@
& {
background-image: uiResource("icons/edit_key.png");
}
@include S(width, 10px);
@include S(height, 10px);
width: 1rem;
height: 1rem;
align-self: center;
justify-self: center;
border-radius: 0;
background-size: 90%;
opacity: 0.4;
@include S(margin-left, 4px);
margin-left: 0.4rem;
&:hover {
opacity: 0.5;
@ -534,9 +534,9 @@
grid-column: 4 / 5;
grid-row: 1 / 3;
margin: 0;
@include S(width, 32px);
width: 3.2rem;
height: 100%;
@include S(margin-left, 4px);
margin-left: 0.4rem;
@include DarkThemeOverride {
background-color: lighten($darkModeControlsBackground, 10);
@ -552,9 +552,9 @@
z-index: 100;
display: flex;
flex-direction: row;
@include S(gap, 9px);
@include S(top, 25px);
@include S(left, 25px);
gap: 0.9rem;
top: 2.5rem;
left: 2.5rem;
@media (max-aspect-ratio: 1460/1000) {
position: unset;
@ -572,8 +572,8 @@
align-items: center;
position: relative;
cursor: pointer;
@include S(gap, 3px);
@include S(width, 35px);
gap: 0.3rem;
width: 3.5rem;
.label {
@include SuperSmallText;
@ -595,11 +595,11 @@
.thirdpartyLogo {
display: inline-flex;
@include S(width, 35px);
@include S(height, 35px);
width: 3.5rem;
height: 3.5rem;
background: rgba(#fff, 0.9) center center / contain no-repeat;
border-radius: 50%;
box-shadow: 0 D(2px) D(3px) rgba(#000, 0.1);
box-shadow: 0 0.2rem 0.3rem rgba(#000, 0.1);
transition: background-color 0.12s ease-in-out;
@ -638,13 +638,13 @@
z-index: 20;
width: 100%;
box-sizing: border-box;
@include S(gap, 30px);
@include S(padding, 15px, 25px, 15px, 20px);
gap: 3rem;
padding: 1.5rem 2.5rem 1.5rem 2rem;
.author {
margin-left: auto;
display: flex;
@include S(width, 110px);
width: 11rem;
justify-content: flex-end;
a {
@ -658,8 +658,8 @@
img {
transition: opacity 0.12s ease-in-out;
@include S(width, 82px * 0.8);
@include S(height, 25px * 0.8);
width: 82px * 0.8;
height: 25px * 0.8;
filter: invert(100%);
opacity: 0.75;
}
@ -671,10 +671,10 @@
display: flex;
align-items: center;
justify-content: flex-start;
@include S(gap, 15px);
gap: 1.5rem;
> a {
@include SuperSmallText;
@include S(padding, 2px);
padding: 0.2rem;
font-weight: bold;
color: #000;
opacity: 0.6;

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

@ -3,7 +3,7 @@
.modsGrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
@include S(gap, 10px);
gap: 1rem;
}
.modsGrid.noMods {
@ -14,9 +14,9 @@
.mod {
width: 100%;
box-sizing: border-box;
@include S(padding, 10px);
padding: 1rem;
@include S(border-radius, 4px);
border-radius: 0.4rem;
background: #eee;
@include DarkThemeOverride {

35
src/css/states/preload.scss
View File

@ -1,6 +1,6 @@
#state_PreloadState {
.changelogDialogEntry {
@include S(margin-top, 10px);
margin-top: 1rem;
width: 100%;
flex-direction: column;
@ -8,7 +8,7 @@
padding: 10px;
box-sizing: border-box;
background: #eef1f4;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
@include DarkThemeOverride {
background: #33343c;
@ -27,21 +27,21 @@
.changes {
@include PlainText;
@include S(padding-left, 15px);
@include S(margin-top, 10px);
padding-left: 1.5rem;
margin-top: 1rem;
strong {
background: $colorBlueBright;
color: #fff;
text-transform: uppercase;
@include S(padding, 1px, 2px);
@include S(margin-right, 3px);
padding: 0.1rem 0.2rem;
margin-right: 0.3rem;
}
a {
color: $colorBlueBright;
}
li {
@include SuperSmallText;
@include S(margin-bottom, 5px);
margin-bottom: 0.5rem;
}
}
}
@ -61,10 +61,10 @@
.logo {
img {
@include S(width, 240px);
width: 24rem;
}
@include S(margin-bottom, 30px);
margin-bottom: 3rem;
}
@include InlineAnimation(0.3s ease-in-out) {
@ -78,13 +78,13 @@
.failureInner {
// background: darken($mainBgColor, 6);
@include S(max-width, 350px);
max-width: 35rem;
margin: 0 20px;
text-align: left;
@include BoxShadow3D(#fff);
@include S(padding, 15px);
@include S(border-radius, $globalBorderRadius);
padding: 1.5rem;
border-radius: $globalBorderRadius;
@include DropShadow;
.errorHeader {
@ -99,13 +99,12 @@
overflow-wrap: break-word;
hyphens: auto;
// border: dotted #666;
// @include S(border-width, 1px, 0);
@include S(padding, 10px, 0);
@include S(margin-top, 10px);
padding: 1rem 0;
margin-top: 1rem;
}
.supportHelp {
@include S(margin-top, 10px);
margin-top: 1rem;
@include PlainText;
.email {
@ -118,7 +117,7 @@
.lower {
display: flex;
align-items: center;
@include S(margin-top, 16px);
margin-top: 1.6rem;
i {
flex-grow: 1;
@ -130,7 +129,7 @@
button.resetApp {
@include Button3D($colorRedBright);
@include PlainText;
@include S(padding, 5px, 8px, 4px);
padding: 0.5rem 0.8rem 0.4rem;
color: #fff;
}
}

120
src/css/states/puzzle_menu.scss
View File

@ -10,7 +10,7 @@
.createPuzzle {
background-color: $colorGreenBright;
@include S(margin-left, 5px);
margin-left: 0.5rem;
}
}
@ -22,8 +22,8 @@
color: #333;
background: $accentColorBright;
@include S(padding, 5px);
@include S(border-radius, $globalBorderRadius);
padding: 0.5rem;
border-radius: $globalBorderRadius;
flex-wrap: wrap;
@include DarkThemeOverride {
@ -35,8 +35,8 @@
margin: 0;
display: inline-block;
flex-grow: 1;
@include S(padding, 5px, 10px);
@include S(min-width, 50px);
padding: 0.5rem 1rem;
min-width: 5rem;
&::placeholder {
color: #aaa;
@ -46,15 +46,15 @@
select {
color: #333;
border: 0;
@include S(padding, 5px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 7px, 10px);
@include S(margin-left, 5px);
padding: 0.5rem;
border-radius: $globalBorderRadius;
padding: 0.7rem 1rem;
margin-left: 0.5rem;
@include PlainText;
}
.filterCompleted {
@include S(margin-left, 20px);
margin-left: 2rem;
pointer-events: all;
cursor: pointer;
display: flex;
@ -62,26 +62,26 @@
justify-content: center;
text-transform: uppercase;
@include PlainText;
@include S(margin-right, 10px);
margin-right: 1rem;
@include DarkThemeOverride {
color: #bbbbc4;
}
input {
@include S(width, 15px);
@include S(height, 15px);
@include S(margin-right, 5px);
@include S(border-radius, $globalBorderRadius);
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
border-radius: $globalBorderRadius;
border: 0;
}
}
button[type="submit"] {
@include S(padding, 7px, 10px, 5px);
@include S(margin-left, 20px);
@include S(margin-top, 4px);
@include S(margin-bottom, 4px);
padding: 0.7rem 1rem 0.5rem;
margin-left: 2rem;
margin-top: 0.4rem;
margin-bottom: 0.4rem;
margin-left: auto;
}
}
@ -96,9 +96,9 @@
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
@include S(grid-gap, 2px);
@include S(padding-right, 10px);
@include S(margin-bottom, 5px);
grid-gap: 0.2rem;
padding-right: 1rem;
margin-bottom: 0.5rem;
.category {
background: $accentColorBright;
@ -108,8 +108,8 @@
transition-property: opacity, background-color, color;
&:first-child {
@include S(border-top-left-radius, $globalBorderRadius);
@include S(border-bottom-left-radius, $globalBorderRadius);
border-top-left-radius: $globalBorderRadius;
border-bottom-left-radius: $globalBorderRadius;
}
&:last-child {
border-top-right-radius: $globalBorderRadius;
@ -134,8 +134,8 @@
}
&.root {
@include S(padding-top, 10px);
@include S(padding-bottom, 10px);
padding-top: 1rem;
padding-bottom: 1rem;
@include Text;
}
&.child {
@ -147,11 +147,11 @@
> .puzzles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(D(240px), 1fr));
@include S(grid-auto-rows, 65px);
@include S(grid-gap, 7px);
@include S(margin-top, 10px);
@include S(padding-right, 4px);
grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
grid-auto-rows: 6.5rem;
grid-gap: 0.7rem;
margin-top: 1rem;
padding-right: 0.4rem;
overflow-y: scroll;
flex-grow: 1;
pointer-events: all;
@ -159,20 +159,20 @@
> .puzzle {
width: 100%;
@include S(height, 65px);
height: 6.5rem;
background: #f3f3f8;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: D(15px) D(15px) 1fr;
@include S(padding, 5px);
@include S(grid-column-gap, 5px);
grid-template-rows: 1.5rem 1.5rem 1fr;
padding: 0.5rem;
grid-column-gap: 0.5rem;
box-sizing: border-box;
pointer-events: all;
cursor: pointer;
position: relative;
@include S(padding-left, 10px);
padding-left: 1rem;
@include DarkThemeOverride {
background: rgba(0, 0, 10, 0.2);
@ -202,8 +202,8 @@
justify-self: start;
width: 100%;
box-sizing: border-box;
@include S(padding, 2px, 5px);
@include S(height, 17px);
padding: 0.2rem 0.5rem;
height: 1.7rem;
}
> .author {
@ -215,7 +215,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@include S(padding, 2px, 5px);
padding: 0.2rem 0.5rem;
}
> .icon {
@ -223,8 +223,8 @@
grid-row: 1 / 4;
align-self: center;
justify-self: center;
@include S(width, 45px);
@include S(height, 45px);
width: 4.5rem;
height: 4.5rem;
canvas {
width: 100%;
@ -234,14 +234,14 @@
> button.delete {
position: absolute;
@include S(top, 5px);
@include S(right, 5px);
top: 0.5rem;
right: 0.5rem;
background-repeat: no-repeat;
background-position: center center;
background-size: 70%;
background-color: transparent !important;
@include S(width, 20px);
@include S(height, 20px);
width: 2rem;
height: 2rem;
padding: 0;
opacity: 0.7;
@include DarkThemeInvert;
@ -259,14 +259,14 @@
justify-self: end;
justify-content: center;
align-self: end;
@include S(height, 14px);
height: 1.4rem;
> .downloads {
@include SuperSmallText;
color: #000;
font-weight: bold;
@include S(margin-right, 5px);
@include S(padding-left, 12px);
margin-right: 0.5rem;
padding-left: 1.2rem;
opacity: 0.7;
display: inline-flex;
align-items: center;
@ -274,9 +274,8 @@
@include DarkThemeInvert;
& {
background: uiResource("icons/puzzle_plays.png") #{D(2px)} #{D(2.5px)} / #{D(
8px
)} #{D(8px)} no-repeat;
background: uiResource("icons/puzzle_plays.png") 0.2rem 0.25rem / 0.8rem
0.8rem no-repeat;
}
}
@ -286,14 +285,13 @@
justify-content: center;
color: #000;
font-weight: bold;
@include S(padding-left, 14px);
padding-left: 1.4rem;
opacity: 0.7;
@include DarkThemeInvert;
& {
background: uiResource("icons/puzzle_upvotes.png") #{D(2px)} #{D(2.4px)} / #{D(
9px
)} #{D(9px)} no-repeat;
background: uiResource("icons/puzzle_upvotes.png") 0.2rem 0.24rem / 0.9rem
0.9rem no-repeat;
}
}
@ -303,7 +301,7 @@
justify-content: center;
color: #000;
font-weight: bold;
@include S(margin-right, 3px);
margin-right: 0.3rem;
opacity: 0.7;
text-transform: uppercase;
@ -339,10 +337,10 @@
&::after {
content: "";
position: absolute;
@include S(top, 10px);
@include S(right, 10px);
@include S(width, 30px);
@include S(height, 30px);
top: 1rem;
right: 1rem;
width: 3rem;
height: 3rem;
opacity: 0.1;
& {

42
src/css/states/settings.scss
View File

@ -7,7 +7,7 @@
.container .content {
display: grid;
grid-template-columns: auto 1fr;
@include S(grid-gap, 10px);
grid-gap: 1rem;
@include StyleBelowWidth($layoutBreak) {
grid-template-columns: 1fr;
@ -16,20 +16,20 @@
.sidebar {
display: flex;
@include S(min-width, 210px);
@include S(max-width, 320px);
min-width: 21rem;
max-width: 32rem;
flex-direction: column;
@include StyleBelowWidth($layoutBreak) {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
@include S(grid-gap, 5px);
grid-gap: 0.5rem;
max-width: unset !important;
}
button {
text-align: left;
@include S(margin-bottom, 3px);
margin-bottom: 0.3rem;
&::after {
content: unset;
}
@ -38,8 +38,8 @@
@include StyleBelowWidth($layoutBreak) {
text-align: center;
height: D(30px) !important;
padding: D(5px) !important;
height: 3rem !important;
padding: 0.5rem !important;
}
}
@ -55,7 +55,7 @@
margin-top: 0;
display: grid;
grid-template-columns: 1fr 1fr;
@include S(grid-gap, 5px);
grid-gap: 0.5rem;
max-width: unset !important;
grid-column: 1 / 3;
@ -86,7 +86,7 @@
}
.versionbar {
@include S(margin-top, 10px);
margin-top: 1rem;
@include StyleBelowWidth($layoutBreak) {
display: none;
@ -107,7 +107,7 @@
.categoryContainer {
overflow-y: scroll;
pointer-events: all;
@include S(padding-right, 10px);
padding-right: 1rem;
.category {
display: none;
@ -117,13 +117,13 @@
}
.setting {
@include S(padding, 10px);
padding: 1rem;
background: #eeeff5;
@include S(border-radius, $globalBorderRadius);
@include S(margin-bottom, 5px);
border-radius: $globalBorderRadius;
margin-bottom: 0.5rem;
.desc {
@include S(margin-top, 5px);
margin-top: 0.5rem;
@include SuperSmallText;
color: #aaadb2;
}
@ -162,7 +162,7 @@
background: rgba(#fff, 0.5);
text-transform: uppercase;
color: $colorRedBright;
@include S(border-radius, $globalBorderRadius);
border-radius: $globalBorderRadius;
@include DarkThemeOverride {
background: rgba(#55585f, 0.95);
@ -178,14 +178,14 @@
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);
min-width: 10rem;
border-radius: $globalBorderRadius;
padding: 0.4rem;
padding-right: 1.5rem;
& {
background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
background: #fff uiResource("icons/enum_selector.png") calc(100% - 0.5rem)
calc(50% + 0.1rem) / 1.5rem no-repeat;
}
transition: background-color 0.12s ease-in-out;

20
src/css/textual_game_state.scss
View File

@ -2,7 +2,7 @@
display: grid;
grid-template-rows: auto 1fr;
box-sizing: border-box;
@include S(padding, 32px);
padding: 3.2rem;
height: 100vh;
.headerBar {
@ -21,15 +21,15 @@
}
.backButton {
@include S(width, 30px);
@include S(height, 30px);
@include S(margin-right, 10px);
@include S(margin-left, -5px);
width: 3rem;
height: 3rem;
margin-right: 1rem;
margin-left: -0.5rem;
& {
background: uiResource("icons/state_back_button.png") center center / 70% no-repeat;
}
}
@include S(margin-bottom, 20px);
margin-bottom: 2rem;
}
> .container {
@ -41,8 +41,8 @@
> .content {
width: 100%;
background: #fff;
@include S(border-radius, $globalBorderRadius);
@include S(padding, 10px);
border-radius: $globalBorderRadius;
padding: 1rem;
height: 100%;
overflow-y: auto;
box-sizing: border-box;
@ -55,8 +55,8 @@
.categoryLabel {
display: block;
text-transform: uppercase;
@include S(margin-top, 15px);
@include S(margin-bottom, 15px);
margin-top: 1.5rem;
margin-bottom: 1.5rem;
@include Heading;
}
}

58
src/css/variables.scss
View File

@ -1,24 +1,24 @@
$globalBorderRadius: 6px;
$globalBorderRadius: 0.6rem;
// Font sizes and line heights
$superHeadingFontSize: 25px;
$superHeadingLineHeight: 24px;
$superHeadingFontSize: 2.5rem;
$superHeadingLineHeight: 2.4rem;
$headingFontSize: 19px;
$headingLineHeight: 21px;
$headingFontSize: 1.9rem;
$headingLineHeight: 2.1rem;
$textFontSize: 16px;
$textLineHeight: 21px;
$textFontSize: 1.6rem;
$textLineHeight: 2.1rem;
$plainTextFontSize: 13px;
$plainTextLineHeight: 17px;
$plainTextFontSize: 1.3rem;
$plainTextLineHeight: 1.7rem;
$superDuperSmallTextFontSize: 8px;
$superDuperSmallTextLineHeight: 9px;
$superSmallTextFontSize: 10px;
$superSmallTextLineHeight: 13px;
$buttonFontSize: 14px;
$buttonLineHeight: 18px;
$superDuperSmallTextFontSize: 0.8rem;
$superDuperSmallTextLineHeight: 0.9rem;
$superSmallTextFontSize: 1rem;
$superSmallTextLineHeight: 1.3rem;
$buttonFontSize: 1.4rem;
$buttonLineHeight: 1.8rem;
// Main background color
$mainBgColor: #dee1ea;
@ -61,43 +61,43 @@ $mainFont: "GameFont", sans-serif;
}
@mixin SuperDuperSmallText {
font-size: D($superDuperSmallTextFontSize);
line-height: D($superDuperSmallTextLineHeight);
font-size: $superDuperSmallTextFontSize;
line-height: $superDuperSmallTextLineHeight;
@include DebugText(green);
}
@mixin SuperSmallText {
font-size: D($superSmallTextFontSize);
line-height: D($superSmallTextLineHeight);
font-size: $superSmallTextFontSize;
line-height: $superSmallTextLineHeight;
@include DebugText(green);
}
@mixin PlainText {
font-size: D($plainTextFontSize);
line-height: D($plainTextLineHeight);
font-size: $plainTextFontSize;
line-height: $plainTextLineHeight;
@include DebugText(red);
}
@mixin Text {
font-size: D($textFontSize);
line-height: D($textLineHeight);
font-size: $textFontSize;
line-height: $textLineHeight;
@include DebugText(blue);
}
@mixin Heading {
font-size: D($headingFontSize);
line-height: D($headingLineHeight);
font-size: $headingFontSize;
line-height: $headingLineHeight;
@include DebugText(yellow);
}
@mixin SuperHeading {
font-size: D($superHeadingFontSize);
line-height: D($superHeadingLineHeight);
font-size: $superHeadingFontSize;
line-height: $superHeadingLineHeight;
@include DebugText(orange);
}
@mixin ButtonText {
font-size: D($buttonFontSize);
line-height: D($buttonLineHeight);
font-size: $buttonFontSize;
line-height: $buttonLineHeight;
@include DebugText(purple);
}