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

Dark mode support and much other stuff

Browse Source
This commit is contained in:
tobspr
2020-05-17 13:24:47 +02:00
parent 53386e1cd9
commit 68769cb7ef
35 changed files with 243 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@
display: grid;
@include S(padding, 6px);
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(width, 240px);
@include S(grid-column-gap, 5px);
@@ -14,6 +14,10 @@
grid-template-columns: 1fr auto;
grid-template-rows: auto 1fr;
@include DarkThemeOverride {
background-color: #55585a;
}
.buildingLabel {
@include PlainText;
@include S(margin-bottom, 2px);
@@ -54,7 +58,7 @@
@include S(width, 100px);
@include S(height, 100px);
background: top left / 100% 100% no-repeat;
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
}
@include StyleBelowWidth(700px) {
@@ -77,10 +81,14 @@
.keybinding {
position: relative;
}
@include DarkThemeOverride {
color: rgba(#fff, 0.5);
}
}
.variant {
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
background: rgba(0, 10, 20, 0.1);
display: flex;
position: relative;

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

@@ -56,10 +56,10 @@
}
}
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
&.selected {
background-color: rgba(74, 163, 223, 0.3) !important;
background-color: rgba($colorBlueBright, 0.3) !important;
transform: scale(1.05);
.keybinding {
color: #111;

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

@@ -21,6 +21,19 @@
}
}
@include DarkThemeOverride {
background: rgba(#33363d, 0.9);
@include InlineAnimation(0.12s ease-in-out) {
0% {
background-color: transparent;
opacity: 0.5;
}
100% {
background-color: rgba(#33363d, 0.9);
}
}
}
&.visible {
.dialogInner {
opacity: 1;
@@ -43,12 +56,16 @@
@include S(min-width, 300px);
max-width: calc(100vw - #{D(40px)});
max-height: calc(100vh - #{D(40px)});
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
display: flex;
flex-direction: column;
@include S(padding, 12px);
pointer-events: all;
@include DarkThemeOverride {
background: #333438;
}
&.optionChooserDialog {
.optionParent {
display: grid;
@@ -59,6 +76,16 @@
cursor: pointer;
@include S(padding, 10px);
background: #eee;
transition: background-color 0.12s ease-in-out;
&:hover {
background-color: #e7e7e7;
}
&.active {
background-color: $colorBlueBright;
color: #fff;
}
}
}
}
@@ -72,6 +99,7 @@
grid-template-columns: 1fr auto;
@include S(margin-bottom, 10px);
@include DarkThemeInvert();
> .closeButton {
opacity: 0.7;
@include S(width, 20px);
@@ -87,6 +115,7 @@
}
> .content {
@include PlainText;
overflow-y: auto;
pointer-events: all;
}
@@ -101,6 +130,11 @@
@include S(min-width, 60px);
@include S(padding, 5px, 15px);
transition: opacity 0.12s ease-in-out;
&:hover {
opacity: 0.9;
}
&.good {
background-color: $colorGreenBright;
color: #fff;

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

@@ -27,6 +27,8 @@
position: relative;
@include IncreasedClickArea(0px);
@include DarkThemeInvert;
&:hover {
opacity: 0.8;
}
@@ -79,7 +81,6 @@
border-color: rgba(0, 0, 0, 0.1);
@include S(padding, 5px, 5px, 5px);
border-radius: 0 0 #{D(4px)} #{D(4px)};
@include S(padding-left, 30px);
@include S(margin-right, 3px);
@include IncreasedClickArea(0px);
@@ -144,7 +145,7 @@
@include S(min-width, 5px);
@include S(height, 10px);
@include S(padding, 1px, 3px, 2px);
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
border: #{D(1px)} solid #fff;
@include InlineAnimation(1s ease-in-out infinite) {
50% {

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

@@ -4,7 +4,7 @@
left: 50%;
transform: translateX(-50%);
background: rgba(lighten(#f77, 5), 0.95);
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 6px, 10px);
@include SuperSmallText;
color: #fff;

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

@@ -5,13 +5,17 @@
.notification {
background: rgba(#333438, 0.8);
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(margin-top, 3px);
color: #fff;
@include SuperSmallText;
@include S(padding, 7px, 10px);
@include S(width, 150px);
@include DarkThemeOverride {
background-color: rgba(#55595d, 0.8);
}
&[data-icon] {
@include S(background-position-x, 8px);
background-position-y: center;

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

@@ -41,6 +41,10 @@
flex-direction: row;
grid-column: 2 / 3;
@include S(height, 9px);
@include DarkThemeOverride {
color: #eee;
}
}
> .goalLabel {
@@ -68,6 +72,8 @@
@include S(top, -4px);
@include S(left, -4px);
background: uiResource("icons/current_goal_marker.png") center center / contain no-repeat;
@include DarkThemeInvert;
}
}
}

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

@@ -27,6 +27,6 @@
@include S(grid-gap, 10px);
background: rgba(0, 10, 20, 0.1);
@include S(padding, 20px);
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
}
}

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

@@ -9,7 +9,7 @@
display: grid;
grid-template-columns: auto 1fr auto;
background: #eee;
@include S(border-radius, 3px);
@include S(border-radius, $globalBorderRadius);
@include S(margin-bottom, 4px);
@include S(padding, 5px, 10px);
@include S(grid-row-gap, 1px);
@@ -20,6 +20,10 @@
margin-bottom: 0;
}
@include DarkThemeOverride {
background: #55585a;
}
.title {
grid-column: 1 / 3;
grid-row: 1 / 2;
@@ -32,7 +36,7 @@
.tier {
@include S(margin-right, 9px);
background: $colorGreenBright;
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
text-transform: uppercase;
@include PlainText;
color: #fff;
@@ -160,19 +164,23 @@
background: #e2e4e6;
@include S(line-height, 13px);
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 1px, 2px, 2px);
position: relative;
text-align: center;
@include S(min-width, 50px);
overflow: hidden;
@include DarkThemeOverride {
background: #333438;
}
.progressBar {
bottom: 0;
left: 0;
right: 0;
top: 0;
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
position: absolute;
display: inline-block;
z-index: -1;

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

@@ -80,10 +80,14 @@
> div {
background: #f4f4f4;
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(margin-bottom, 4px);
display: grid;
@include DarkThemeOverride {
background: #222428;
}
grid-template-columns: 1fr auto;
@include S(padding, 5px);
&:last-child {
@@ -100,7 +104,7 @@
.counter {
@include SuperSmallText;
@include S(border-radius, 2px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 0, 3px);
}
}

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

@@ -17,7 +17,7 @@
.dialog {
background: rgba(#222428, 0.5);
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 30px);
@include InlineAnimation(0.5s ease-in-out) {
@@ -54,7 +54,7 @@
@include S(padding, 1px, 6px);
@include S(margin, 20px, 0, 20px);
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateY(-60vh);
@@ -111,7 +111,7 @@
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
@include S(border-radius, 4px);
@include S(border-radius, $globalBorderRadius);
box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15);
}
}

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

@@ -6,4 +6,9 @@
bottom: 0;
background: uiResource("vignette.lossless.png") center center / cover no-repeat;
pointer-events: none;
@include DarkThemeOverride {
// Too many artifacts
display: none;
}
}