Update ui design

This commit is contained in:
tobspr 2020-07-23 09:07:51 +02:00
parent 2df1b8d014
commit 209fc76fc7
16 changed files with 43 additions and 31 deletions

View File

@ -1399,6 +1399,6 @@
"format": "RGBA8888",
"size": {"w":690,"h":128},
"scale": "0.1",
"smartupdate": "$TexturePacker:SmartUpdate:bf30498b7e1d76f2f7b9d1274acdd7cd:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
"smartupdate": "$TexturePacker:SmartUpdate:64fccb50e5cbc78c707e6728e5ddc881:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 70 KiB

View File

@ -1399,6 +1399,6 @@
"format": "RGBA8888",
"size": {"w":2048,"h":2708},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:bf30498b7e1d76f2f7b9d1274acdd7cd:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
"smartupdate": "$TexturePacker:SmartUpdate:64fccb50e5cbc78c707e6728e5ddc881:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
}
}

View File

@ -1399,6 +1399,6 @@
"format": "RGBA8888",
"size": {"w":490,"h":837},
"scale": "0.25",
"smartupdate": "$TexturePacker:SmartUpdate:bf30498b7e1d76f2f7b9d1274acdd7cd:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
"smartupdate": "$TexturePacker:SmartUpdate:64fccb50e5cbc78c707e6728e5ddc881:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 226 KiB

After

Width:  |  Height:  |  Size: 226 KiB

View File

@ -1399,6 +1399,6 @@
"format": "RGBA8888",
"size": {"w":1522,"h":949},
"scale": "0.5",
"smartupdate": "$TexturePacker:SmartUpdate:bf30498b7e1d76f2f7b9d1274acdd7cd:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
"smartupdate": "$TexturePacker:SmartUpdate:64fccb50e5cbc78c707e6728e5ddc881:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 527 KiB

After

Width:  |  Height:  |  Size: 527 KiB

View File

@ -1399,6 +1399,6 @@
"format": "RGBA8888",
"size": {"w":1759,"h":1834},
"scale": "0.75",
"smartupdate": "$TexturePacker:SmartUpdate:bf30498b7e1d76f2f7b9d1274acdd7cd:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
"smartupdate": "$TexturePacker:SmartUpdate:64fccb50e5cbc78c707e6728e5ddc881:7220449b6cf5c4e08c60eab73ea85805:f159918d23e5952766c6d23ab52278c6$"
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

View File

@ -449,6 +449,7 @@
<key type="filename">sprites/blueprints/miner-chainable.png</key>
<key type="filename">sprites/blueprints/miner.png</key>
<key type="filename">sprites/blueprints/rotater-ccw.png</key>
<key type="filename">sprites/blueprints/rotater-fl.png</key>
<key type="filename">sprites/blueprints/rotater.png</key>
<key type="filename">sprites/blueprints/splitter-compact-inverse.png</key>
<key type="filename">sprites/blueprints/splitter-compact.png</key>
@ -459,6 +460,7 @@
<key type="filename">sprites/blueprints/underground_belt_exit.png</key>
<key type="filename">sprites/buildings/miner-chainable.png</key>
<key type="filename">sprites/buildings/rotater-ccw.png</key>
<key type="filename">sprites/buildings/rotater-fl.png</key>
<key type="filename">sprites/buildings/splitter-compact-inverse.png</key>
<key type="filename">sprites/buildings/splitter-compact.png</key>
<key type="filename">sprites/buildings/underground_belt_entry-tier2.png</key>

View File

@ -3,16 +3,16 @@
@include S(max-width, 600px);
@include PlainText;
padding: 0;
background: transparent;
}
.head {
background: rgba(0, 0, 0, 0.2);
@include S(padding, 10px);
@include S(padding, 20px);
img {
display: block;
margin: 0 auto;
@include S(max-width, 300px);
@include S(max-width, 200px);
}
}
@ -23,10 +23,4 @@
a {
@include S(margin, 0, 3px);
}
@include DarkThemeOverride {
.head {
background: rgba(22, 21, 21, 0.1);
}
}
}

View File

@ -55,7 +55,7 @@
opacity: 0;
display: none;
transform: translate(50%, 50%);
filter: blur(10px);
// filter: blur(10px);
$opacity: 0.2;
&.loaded {
@ -178,6 +178,10 @@
transform: translateX(50%) rotate(-7deg) scale(1.1);
}
}
@include DarkThemeOverride {
color: $colorBlueBright;
}
}
}

View File

@ -1,6 +1,6 @@
#state_SettingsState {
$colorCategoryButton: #393747;
$colorCategoryButtonSelected: #5c5872;
$colorCategoryButton: #eee;
$colorCategoryButtonSelected: #5f748b;
.container .content {
display: flex;
@ -115,16 +115,23 @@
}
}
button.categoryButton {
button.categoryButton,
button.about {
background-color: $colorCategoryButton;
color: #777a7f;
&.active {
background-color: $colorCategoryButtonSelected;
}
}
color: #fff;
button.about {
background-color: $colorGreenBright;
&:hover {
opacity: 1;
}
}
&.pressed {
transform: none !important;
}
}
.versionbar {
@ -145,8 +152,9 @@
@include DarkThemeOverride {
.container .content {
.sidebar {
button.categoryButton {
background-color: #44444f;
button.categoryButton,
button.about {
background-color: #3f3f47;
&.active {
background-color: $colorBlueBright;

View File

@ -4,6 +4,7 @@ export const CHANGELOG = [
date: "unreleased",
entries: [
"WIRES",
"Reworked menu UI design (by dengr1605)",
"Allow holding ALT in belt planner to reverse direction (by jakobhellermann)",
"Clear cursor when trying to pipette the same building twice (by hexy)",
"Added keybinding to close menus (by isaisstillalive / Sandwichs-del)",

View File

@ -252,7 +252,7 @@ export const allApplicationSettings = [
changeCb: (app, id) => {},
}),
new BoolSetting("alwaysMultiplace", enumCategories.userInterface, (app, value) => {}),
new BoolSetting("alwaysMultiplace", enumCategories.advanced, (app, value) => {}),
new BoolSetting("enableTunnelSmartplace", enumCategories.advanced, (app, value) => {}),
new BoolSetting("vignette", enumCategories.userInterface, (app, value) => {}),
new BoolSetting("compactBuildingInfo", enumCategories.userInterface, (app, value) => {}),

View File

@ -18,13 +18,16 @@ export class SettingsState extends TextualGameState {
<div class="sidebar">
${this.getCategoryButtonsHtml()}
<div class="other">
${
this.app.platformWrapper.getSupportsKeyboard()
? `<button class="styledButton editKeybindings">${T.keybindings.title}</button>`
: ""
}
${
this.app.platformWrapper.getSupportsKeyboard()
? `
<button class="styledButton categoryButton editKeybindings">
${T.keybindings.title}
</button>`
: ""
}
<div class="other">
<button class="styledButton about">${T.about.title}</button>
<div class="versionbar">