Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-03-02 03:39:21 +00:00
Code Issues Projects Releases Wiki Activity

Rebranding and minor polishing, part 2

Browse Source
This commit is contained in:
tobspr
2022-06-02 14:06:33 +02:00
parent c848f21725
commit 559c0fa854
19 changed files with 69 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/common.scss
View File

@@ -195,6 +195,7 @@ button {
border: 0;
background: $colorBlueBright;
color: #fff;
@include S(border-radius, $globalBorderRadius);
// border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
@include S(border-bottom-width, 2px);
@@ -673,7 +674,7 @@ input.rangeInput {
text-transform: uppercase;
@include S(padding, 1.5px, 3px, 2px);
@include PlainText;
@include S(border-radius, $globalBorderRadius);
@include S(border-radius, 0.5 * $globalBorderRadius);
&,
> span {
@include S(font-size, 9px);
@@ -682,6 +683,7 @@ input.rangeInput {
text-shadow: none !important;
// font-family: Arial, sans-serif !important;
}
font-weight: bold;
color: $accentColorDark;
text-align: center;

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

@@ -14,9 +14,9 @@
grid-template-columns: 1fr auto;
grid-template-rows: auto 1fr;
@include DarkThemeOverride {
background-color: #55585a;
}
// @include DarkThemeOverride {
// // background-color: #55585a;
// }
transition: opacity 0.1s ease-out;
&.hovered {
@@ -133,7 +133,7 @@
grid-row: 2 / 3;
@include S(border-radius, $globalBorderRadius);
background: rgba($ingameHudBg, 0.3);
background: rgba($ingameHudBg, 0.5);
opacity: 0.5;
display: inline-flex;
vertical-align: top;

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

@@ -7,6 +7,7 @@
display: grid;
grid-template-rows: auto auto;
justify-items: center;
@include S(grid-gap, 4px);
background: transparent;
transition: transform 120ms ease-in-out;
@@ -32,8 +33,6 @@
&.secondary {
grid-row: 1 / 2;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.building {
@include S(width, 30px);
@@ -108,7 +107,7 @@
&.selected {
// transform: scale(1.05);
background-color: rgba(lighten($colorBlueBright, 9), 0.4);
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
.keybinding {
color: #111;

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

@@ -96,6 +96,8 @@
@include S(grid-gap, 5px);
grid-template-columns: 1fr 1fr;
.option {
@include S(border-radius, $globalBorderRadius);
pointer-events: all;
cursor: pointer;
@include S(padding, 10px);

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

@@ -10,7 +10,7 @@
@include S(width, 150px);
background: $ingameHudBg;
@include S(padding, 4px);
@include S(padding, 7px);
color: #eee;
display: flex;
flex-direction: column;
@@ -60,5 +60,6 @@
@include S(height, 150px);
background: center center / cover no-repeat;
transition: opacity 0.1s ease-out;
@include S(border-radius, $globalBorderRadius);
}
}

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

@@ -51,6 +51,7 @@
display: flex;
align-items: center;
justify-content: center;
@include S(border-radius, $globalBorderRadius);
> canvas {
@include S(width, 50px);

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

@@ -8,10 +8,11 @@
@include PlainText;
@include S(width, 150px);
background: rgba(0, 10, 20, 0.5);
@include S(padding, 5px);
background: $ingameHudBg;
@include S(padding, 7px);
color: #eee;
@include S(border-radius, $globalBorderRadius);
.desc {
@include SuperSmallText;

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

@@ -63,9 +63,9 @@
opacity: 0;
display: none;
transform: translate(50%, 50%);
filter: blur(D(3px));
filter: blur(D(7px));
$opacity: 0.07;
$opacity: 0.4;
&.loaded {
display: block;
opacity: $opacity;
@@ -241,6 +241,7 @@
position: relative;
@include S(padding, 20px);
@include S(border-radius, $globalBorderRadius);
box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2);
> .badge {
color: #fff;
@@ -398,6 +399,8 @@
@include S(padding, 20px);
@include S(border-radius, $globalBorderRadius);
// border: #{D(2px)} solid rgba(0, 10, 20, 0.1);
box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2);
height: 100%;
width: 100%;
box-sizing: border-box;
@@ -716,18 +719,31 @@
}
.author {
flex-grow: 1;
margin-left: auto;
text-align: right;
@include PlainText;
color: #888a8f;
color: #000;
a {
color: #333438;
&:hover {
opacity: 0.8;
}
display: flex;
align-items: center;
justify-content: center;
img {
@include S(margin-left, 5px);
@include S(margin-top, 3px);
@include S(width, 50px);
filter: invert(100%);
}
}
}
@include S(padding, 15px);
$linkBg: #fdfdff;
$linkBg: rgba(#fdfdff, 0.5);
$linkBgHover: darken($linkBg, 2);
$linkColor: #55586a;
@@ -737,11 +753,9 @@
grid-template-columns: 1fr auto;
justify-content: center;
backdrop-filter: blur(5px);
background: $linkBg;
& {
/* @load-async */
background: $linkBg uiResource("icons/link.png") top D(3px) right D(3px) / D(9px) no-repeat;
}
@include S(padding, 5px);
@include S(padding-left, 10px);
@include S(border-radius, $globalBorderRadius);
@@ -830,7 +844,7 @@
}
@include DarkThemeOverride {
background: $darkModeGameBackground center center / cover !important;
background: rgba($darkModeGameBackground, 0.5) center center / cover !important;
.mainContainer {
background: $darkModeControlsBackground;
@@ -861,19 +875,11 @@
.footer {
> a,
.sidelinks > a {
background-color: $darkModeControlsBackground;
background-color: rgba($darkModeControlsBackground, 0.3);
color: #eee;
&:hover {
background-color: darken($darkModeControlsBackground, 5);
}
}
.author {
color: #bdbdbd;
> a {
color: white;
background-color: rgba(darken($darkModeControlsBackground, 5), 0.5);
}
}

2
src/css/variables.scss
View File

@@ -1,4 +1,4 @@
$globalBorderRadius: 2px;
$globalBorderRadius: 6px;
// When to reduce control elements size for small devices
$layoutExpandMinWidth: 340px;