Update main menu styles

pull/33/head
tobspr 4 years ago
parent 172a0398e2
commit f52d2b85c0

@ -133,7 +133,7 @@ function gulptasksHTML($, gulp, buildFolder, browserSync) {
const images = buildUtils.getAllResourceImages();
// Preload essentials
const preloads = ["fonts/LouisGeorgeCafe.woff2"];
const preloads = ["fonts/GameFont.woff2"];
// for (let i = 0; i < images.length; ++i) {
// if (preloads.indexOf(images[i]) < 0) {
@ -180,7 +180,7 @@ function gulptasksHTML($, gulp, buildFolder, browserSync) {
font-style: normal;
font-weight: normal;
font-display: swap;
src: url('${cachebust("res/fonts/LouisGeorgeCafe.woff2")}') format('woff2');
src: url('${cachebust("res/fonts/GameFont.woff2")}') format('woff2');
}
#ll_fp {

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 510 KiB

After

Width:  |  Height:  |  Size: 42 KiB

@ -284,6 +284,9 @@
<key type="filename">sprites/belt/right_3.png</key>
<key type="filename">sprites/belt/right_4.png</key>
<key type="filename">sprites/belt/right_5.png</key>
<key type="filename">sprites/blueprints/belt_left.png</key>
<key type="filename">sprites/blueprints/belt_right.png</key>
<key type="filename">sprites/blueprints/belt_top.png</key>
<key type="filename">sprites/buildings/belt_left.png</key>
<key type="filename">sprites/buildings/belt_right.png</key>
<key type="filename">sprites/buildings/belt_top.png</key>
@ -301,11 +304,11 @@
<key>scale9FromFile</key>
<false/>
</struct>
<key type="filename">sprites/buildings/cutter.png</key>
<key type="filename">sprites/buildings/mixer.png</key>
<key type="filename">sprites/buildings/painter.png</key>
<key type="filename">sprites/buildings/splitter.png</key>
<key type="filename">sprites/buildings/stacker.png</key>
<key type="filename">sprites/blueprints/cutter.png</key>
<key type="filename">sprites/blueprints/mixer.png</key>
<key type="filename">sprites/blueprints/painter.png</key>
<key type="filename">sprites/blueprints/splitter.png</key>
<key type="filename">sprites/blueprints/stacker.png</key>
<struct type="IndividualSpriteSettings">
<key>pivotPoint</key>
<point_f>0.5,0.5</point_f>
@ -314,13 +317,19 @@
<key>scale9Enabled</key>
<false/>
<key>scale9Borders</key>
<rect>64,32,128,64</rect>
<rect>96,48,192,96</rect>
<key>scale9Paddings</key>
<rect>64,32,128,64</rect>
<rect>96,48,192,96</rect>
<key>scale9FromFile</key>
<false/>
</struct>
<key type="filename">sprites/buildings/hub.png</key>
<key type="filename">sprites/blueprints/miner.png</key>
<key type="filename">sprites/blueprints/rotater.png</key>
<key type="filename">sprites/blueprints/trash.png</key>
<key type="filename">sprites/blueprints/underground_belt_entry.png</key>
<key type="filename">sprites/blueprints/underground_belt_exit.png</key>
<key type="filename">sprites/buildings/underground_belt_entry.png</key>
<key type="filename">sprites/buildings/underground_belt_exit.png</key>
<struct type="IndividualSpriteSettings">
<key>pivotPoint</key>
<point_f>0.5,0.5</point_f>
@ -329,14 +338,17 @@
<key>scale9Enabled</key>
<false/>
<key>scale9Borders</key>
<rect>192,192,384,384</rect>
<rect>48,48,96,96</rect>
<key>scale9Paddings</key>
<rect>192,192,384,384</rect>
<rect>48,48,96,96</rect>
<key>scale9FromFile</key>
<false/>
</struct>
<key type="filename">sprites/buildings/underground_belt_entry.png</key>
<key type="filename">sprites/buildings/underground_belt_exit.png</key>
<key type="filename">sprites/buildings/cutter.png</key>
<key type="filename">sprites/buildings/mixer.png</key>
<key type="filename">sprites/buildings/painter.png</key>
<key type="filename">sprites/buildings/splitter.png</key>
<key type="filename">sprites/buildings/stacker.png</key>
<struct type="IndividualSpriteSettings">
<key>pivotPoint</key>
<point_f>0.5,0.5</point_f>
@ -345,9 +357,24 @@
<key>scale9Enabled</key>
<false/>
<key>scale9Borders</key>
<rect>48,48,96,96</rect>
<rect>64,32,128,64</rect>
<key>scale9Paddings</key>
<rect>48,48,96,96</rect>
<rect>64,32,128,64</rect>
<key>scale9FromFile</key>
<false/>
</struct>
<key type="filename">sprites/buildings/hub.png</key>
<struct type="IndividualSpriteSettings">
<key>pivotPoint</key>
<point_f>0.5,0.5</point_f>
<key>spriteScale</key>
<double>1</double>
<key>scale9Enabled</key>
<false/>
<key>scale9Borders</key>
<rect>192,192,384,384</rect>
<key>scale9Paddings</key>
<rect>192,192,384,384</rect>
<key>scale9FromFile</key>
<false/>
</struct>
@ -370,6 +397,7 @@
<key>scale9FromFile</key>
<false/>
</struct>
<key type="filename">sprites/misc/deletion_marker.png</key>
<key type="filename">sprites/misc/slot_bad_arrow.png</key>
<key type="filename">sprites/misc/slot_good_arrow.png</key>
<struct type="IndividualSpriteSettings">

@ -3,10 +3,9 @@
@include S(top, 50px);
left: 50%;
transform: translateX(-50%);
@include S(width, 300px);
background: #f77;
background: rgba(#f77, 0.8);
@include S(border-radius, 4px);
@include S(padding, 10px);
@include S(padding, 9px);
@include PlainText;
color: #fff;

@ -3,7 +3,8 @@
justify-content: center;
flex-direction: column;
background: uiResource("menu_bg.noinline.jpg") center center / cover no-repeat !important;
background: $colorGreenBright uiResource("main_menu/bg_pattern.png") top left / #{D(10px)} !important;
// background: $colorGreenBright !important;
.logo {
display: flex;
@ -21,46 +22,49 @@
flex-grow: 1;
align-items: flex-start;
justify-content: center;
.playButton {
@include SuperHeading;
@include S(width, 150px);
@include S(padding, 15px, 20px);
@include S(width, 130px);
@include S(padding, 15px, 20px, 10px);
letter-spacing: 0.3em !important;
color: #fff;
background-color: $accentColorDark;
background-color: #55585a;
text-shadow: #{D(1px)} #{D(2px)} 0 rgba(0, 0, 0, 0.1);
}
}
.footer {
display: flex;
justify-content: flex-end;
justify-content: center;
@include S(padding, 15px);
> a {
display: flex;
flex-direction: column;
flex-direction: row;
align-items: center;
justify-content: center;
background: #eee;
background: lighten(#44484a, 55);
@include S(padding, 5px);
@include S(border-radius, 4px);
@include S(margin-left, 10px);
@include SuperSmallText();
border: #{D(1px)} solid #aaa;
border-bottom: #{D(3px)} solid #aaa;
border: #{D(1px)} solid #44484a;
border-bottom: #{D(3px)} solid #44484a;
box-shadow: #{D(1px)} #{D(2px)} #{D(3px)} 0 rgba(0, 10, 20, 0.1);
font-weight: bold;
text-transform: uppercase;
color: #999da3;
color: #616266;
transition: background-color 0.12s ease-in-out;
pointer-events: all;
@include S(width, 50px);
@include S(width, 120px);
@include S(height, 50px);
cursor: pointer;
&:hover {
background-color: #fafafa;
background-color: lighten(#44484a, 65);
}
.thirdpartyLogo {

@ -18,7 +18,6 @@ $plainTextLineHeight: 17px;
$supersmallTextFontSize: 10px;
$supersmallTextLineHeight: 13px;
$buttonFontSize: 14px;
$buttonLineHeight: 18px;

@ -19,7 +19,7 @@ export class HUDMassSelector extends BaseHUDPart {
[],
`
Press <code class="keybinding">DEL</code> to remove selected buildings
and <code class="keybinding">ESCAPE</code> to cancel.
and <code class="keybinding">ESC</code> to cancel.
`
);
}

@ -21,11 +21,13 @@ export class MainMenuState extends GameState {
<div class="footer">
<a href="https://github.com/tobspr/shapez.io" target="_blank">
This game is open source!
<span class="thirdpartyLogo githubLogo"></span>
</a>
<a href="https://discord.gg/HN7EVzV" target="_blank">
<span class="thirdpartyLogo discordLogo"></span>
Official discord server
<span class="thirdpartyLogo discordLogo"></span>
</a>
</div>

Loading…
Cancel
Save