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

Polishing, CSS Improvements, Improve dark mode

Browse Source
This commit is contained in:
tobspr
2020-09-19 14:27:25 +02:00
parent 5bde508f86
commit 7d6af359a1
53 changed files with 1480 additions and 1351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,6 +21,12 @@
@include S(right, 20px);
@include PlainText;
text-align: center;
color: #666;
@include DarkThemeOverride() {
color: lighten($darkModeGameBackground, 50);
}
}
#ingame_Canvas {

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

@@ -1,71 +1,71 @@
#state_KeybindingsState {
.content {
.topEntries {
display: grid;
grid-template-columns: 1fr auto;
@include S(grid-gap, 5px);
@include S(margin-bottom, 10px);
}
.hint {
display: block;
background: #eee;
@include S(padding, 4px);
@include PlainText;
}
.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;
color: #888c8f;
.mapping {
color: $colorBlueBright;
text-align: center;
}
button {
@include S(height, 15px);
@include S(width, 15px);
@include IncreasedClickArea(0px);
background: transparent center center / 40% no-repeat;
opacity: 0.9;
&.editKeybinding {
background-image: uiResource("icons/edit_key.png");
}
&.resetKeybinding {
background-image: uiResource("icons/reset_key.png");
}
&.disabled {
pointer-events: none;
cursor: default;
opacity: 0.1 !important;
}
}
}
}
}
@include DarkThemeOverride {
.content {
.hint {
background: #3b3d40;
}
.category .entry {
color: #c0c4c8;
border-bottom-color: #888;
button {
filter: invert(1);
}
}
}
}
}
#state_KeybindingsState {
.content {
.topEntries {
display: grid;
grid-template-columns: 1fr auto;
@include S(grid-gap, 5px);
@include S(margin-bottom, 10px);
}
.hint {
display: block;
background: #eee;
@include S(padding, 4px);
@include PlainText;
}
.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;
color: #888c8f;
.mapping {
color: $colorBlueBright;
text-align: center;
}
button {
@include S(height, 15px);
@include S(width, 15px);
@include IncreasedClickArea(0px);
background: transparent center center / 40% no-repeat;
opacity: 0.9;
&.editKeybinding {
background-image: uiResource("icons/edit_key.png");
}
&.resetKeybinding {
background-image: uiResource("icons/reset_key.png");
}
&.disabled {
pointer-events: none;
cursor: default;
opacity: 0.1 !important;
}
}
}
}
}
@include DarkThemeOverride {
.content {
.hint {
background: darken($darkModeControlsBackground, 4);
}
.category .entry {
color: #c0c4c8;
border-bottom-color: #888;
button {
filter: invert(1);
}
}
}
}
}

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

@@ -25,13 +25,15 @@
background: uiResource("icons/main_menu_settings.png") center center / contain no-repeat;
transition: opacity 0.12s ease-in-out;
@include IncreasedClickArea(2px);
opacity: 0.7;
&:hover {
opacity: 0.9;
opacity: 1;
}
}
.exitAppButton {
background-image: uiResource("icons/main_menu_exit.png");
background-size: 90%;
}
.languageChoose {
@@ -40,6 +42,7 @@
background-color: #fff;
@include S(border-width, 2px);
background-size: cover;
opacity: 0.8;
}
}
@@ -57,7 +60,7 @@
transform: translate(50%, 50%);
filter: blur(D(3px));
$opacity: 0.2;
$opacity: 0.07;
&.loaded {
display: block;
opacity: $opacity;
@@ -332,25 +335,39 @@
button.downloadGame {
grid-column: 3 / 4;
grid-row: 1 / 2;
background-color: $colorBlueBright;
background-color: transparent;
background-image: uiResource("icons/download.png");
@include S(width, 15px);
@include IncreasedClickArea(0px);
@include S(height, 15px);
background-size: 60%;
background-size: 80%;
align-self: start;
opacity: 0.4;
&:hover {
opacity: 0.5;
}
@include DarkThemeInvert;
}
button.deleteGame {
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: $colorRedBright;
background-color: transparent;
@include IncreasedClickArea(0px);
background-image: uiResource("icons/delete.png");
@include S(width, 15px);
@include S(height, 15px);
align-self: end;
background-size: 60%;
background-size: 80%;
opacity: 0.4;
&:hover {
opacity: 0.5;
}
@include DarkThemeInvert;
}
button.renameGame {
@@ -363,11 +380,11 @@
justify-self: center;
background-size: 90%;
opacity: 0.25;
opacity: 0.4;
@include S(margin-left, 4px);
&:hover {
opacity: 0.35;
opacity: 0.5;
}
@include DarkThemeInvert;
@@ -379,6 +396,11 @@
margin: 0;
@include S(width, 32px);
height: 100%;
@include S(margin-left, 4px);
@include DarkThemeOverride {
background-color: lighten($darkModeControlsBackground, 10);
}
}
}
}
@@ -407,13 +429,17 @@
@include S(padding, 15px);
$linkBg: #fdfdff;
$linkBgHover: darken($linkBg, 2);
$linkColor: #55586a;
> .boxLink {
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
justify-content: center;
background: #fdfdfd uiResource("icons/link.png") top D(3px) right D(3px) / D(9px) no-repeat;
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);
@@ -422,7 +448,7 @@
font-weight: bold;
box-sizing: border-box;
text-transform: uppercase;
color: #616266;
color: $linkColor;
transition: background-color 0.12s ease-in-out;
pointer-events: all;
@@ -431,7 +457,7 @@
cursor: pointer;
&:hover {
background-color: #f0f6ff;
background-color: $linkBgHover;
}
.thirdpartyLogo {
@@ -458,12 +484,12 @@
@include S(height, 60px);
> a {
color: #616266;
background: #fdfdfd;
color: $linkColor;
background: $linkBg;
height: 100%;
&:hover {
background-color: #f0f6ff;
background-color: $linkBgHover;
}
@include SuperSmallText;
text-transform: uppercase;
@@ -499,19 +525,11 @@
@include DarkThemeOverride {
background: $darkModeGameBackground center center / cover !important;
.topButtons {
filter: invert(1);
.languageChoose {
filter: invert(1);
}
}
.mainContainer {
background: darken($darkModeGameBackground, 10);
background: $darkModeControlsBackground;
.savegames .savegame {
background: darken($darkModeGameBackground, 15);
background: darken($darkModeControlsBackground, 5);
color: white;
}
}
@@ -519,11 +537,11 @@
.footer {
> a,
.sidelinks > a {
background-color: darken($darkModeGameBackground, 10);
background-color: $darkModeControlsBackground;
color: #eee;
&:hover {
background-color: darken($darkModeGameBackground, 8);
background-color: darken($darkModeControlsBackground, 5);
}
}

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

@@ -1,6 +1,6 @@
#state_SettingsState {
$colorCategoryButton: #eeeff5;
$colorCategoryButtonSelected: #5f748b;
$colorCategoryButtonSelected: $colorBlueBright;
$layoutBreak: 1000px;
@@ -177,10 +177,12 @@
.sidebar {
button.categoryButton,
button.about {
background-color: #3f3f47;
color: #ccc;
background-color: darken($darkModeControlsBackground, 5);
&.active {
background-color: $colorBlueBright;
color: #fff;
background-color: $colorCategoryButtonSelected;
}
}
}
@@ -192,8 +194,13 @@
.value.enum {
// dirty but works
filter: invert(0.78) sepia(40%) hue-rotate(190deg);
color: #222;
// color: #222;
background-color: $darkModeControlsBackground;
background-image: uiResource("icons/enum_selector_white.png");
color: #ddd;
&:hover {
background-color: darken($darkModeControlsBackground, 2);
}
}
.value.checkbox {