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

Major ui changes (#482)

Browse Source 
* "discord" -> "Discord", sync most translations

* that major settings update you'll like

* Finish new settings, add logo to about page

* sync & format translations
This commit is contained in:
dengr1065
2020-07-23 09:48:23 +03:00
committed by GitHub
parent db52e0400b
commit 2df1b8d014
41 changed files with 573 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/css/common.scss
View File

@@ -73,6 +73,9 @@ body {
scrollbar-face-color: #888;
scrollbar-track-color: rgba(255, 255, 255, 0.1);
// Firefox
scrollbar-color: #cdd0d4 rgba(#000, 0.05);
overflow: hidden;
@include Text;

23
src/css/states/about.scss
View File

@@ -1,9 +1,32 @@
#state_AboutState {
> .container .content {
@include S(max-width, 600px);
@include PlainText;
padding: 0;
}
.head {
background: rgba(0, 0, 0, 0.2);
@include S(padding, 10px);
img {
display: block;
margin: 0 auto;
@include S(max-width, 300px);
}
}
.text {
@include S(margin, 10px);
}
a {
@include S(margin, 0, 3px);
}
@include DarkThemeOverride {
.head {
background: rgba(22, 21, 21, 0.1);
}
}
}

1
src/css/states/changelog.scss
View File

@@ -1,5 +1,6 @@
#state_ChangelogState {
.content {
@include S(max-width, 800px);
display: flex;
flex-direction: column;
}

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

@@ -1,113 +1,180 @@
#state_SettingsState {
.content {
.versionbar {
@include S(margin-top, 20px);
@include SuperSmallText;
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
.buildVersion {
display: flex;
flex-direction: column;
color: #aaadaf;
$colorCategoryButton: #393747;
$colorCategoryButtonSelected: #5c5872;
.container .content {
display: flex;
overflow-y: scroll;
.categoryContainer {
width: 100%;
.category {
display: none;
&.active {
display: block;
}
.setting {
@include S(padding, 10px);
background: #eeeff5;
@include S(border-radius, $globalBorderRadius);
@include S(margin-bottom, 5px);
label {
text-transform: uppercase;
@include Text;
}
.desc {
@include S(margin-top, 5px);
@include SuperSmallText;
color: #aaadb2;
}
> .row {
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
}
&.disabled {
// opacity: 0.3;
pointer-events: none;
* {
pointer-events: none !important;
cursor: default !important;
}
position: relative;
.standaloneOnlyHint {
@include PlainText;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: all;
display: flex;
align-items: center;
justify-content: center;
background: rgba(#fff, 0.5);
text-transform: uppercase;
color: $colorRedBright;
}
}
.value.enum {
background: #fff;
@include PlainText;
display: flex;
align-items: flex-start;
pointer-events: all;
cursor: pointer;
justify-content: center;
@include S(min-width, 100px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 4px);
@include S(padding-right, 15px);
background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
transition: background-color 0.12s ease-in-out;
&:hover {
background-color: #fafafa;
}
}
}
}
}
button.about {
background-color: $colorGreenBright;
}
.sidebar {
display: flex;
flex-direction: column;
@include S(min-width, 210px);
@include S(max-width, 320px);
width: 30%;
height: 100%;
position: sticky;
top: 0;
@include S(margin-left, 20px);
@include S(margin-right, 32px);
.setting {
@include S(padding, 10px);
background: #eeeff5;
@include S(border-radius, $globalBorderRadius);
@include S(margin-bottom, 5px);
label {
text-transform: uppercase;
@include Text;
.other {
margin-top: auto;
}
.desc {
@include S(margin-top, 5px);
button {
@include S(margin-top, 4px);
width: calc(100% - #{D(20px)});
text-align: start;
&::after {
content: unset;
}
}
button.categoryButton {
background-color: $colorCategoryButton;
&.active {
background-color: $colorCategoryButtonSelected;
}
}
button.about {
background-color: $colorGreenBright;
}
.versionbar {
@include S(margin-top, 20px);
@include SuperSmallText;
color: #aaadb2;
}
> .row {
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
}
&.disabled {
// opacity: 0.3;
pointer-events: none;
* {
pointer-events: none !important;
cursor: default !important;
}
position: relative;
.standaloneOnlyHint {
@include PlainText;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: all;
.buildVersion {
display: flex;
align-items: center;
justify-content: center;
background: rgba(#fff, 0.5);
text-transform: uppercase;
color: $colorRedBright;
}
}
.value.enum {
background: #fff;
@include PlainText;
display: flex;
align-items: flex-start;
pointer-events: all;
cursor: pointer;
justify-content: center;
@include S(min-width, 100px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 4px);
@include S(padding-right, 15px);
background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
transition: background-color 0.12s ease-in-out;
&:hover {
background-color: #fafafa;
flex-direction: column;
color: #aaadaf;
}
}
}
}
@include DarkThemeOverride {
.content {
.setting {
background: darken($darkModeGameBackground, 10);
.container .content {
.sidebar {
button.categoryButton {
background-color: #44444f;
.value.enum {
// dirty but works
filter: invert(0.85);
color: #222;
}
.value.checkbox {
background-color: #74767b;
&.checked {
&.active {
background-color: $colorBlueBright;
}
}
}
.categoryContainer {
.category {
.setting {
background: darken($darkModeGameBackground, 10);
.value.enum {
// dirty but works
filter: invert(0.78) sepia(40%) hue-rotate(190deg);
color: #222;
}
.value.checkbox {
background-color: #74767b;
&.checked {
background-color: $colorBlueBright;
}
}
}
}
}
}
}
}

30
src/css/textual_game_state.scss
View File

@@ -1,24 +1,18 @@
.gameState.textualState {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
$padding: 15px;
.headerBar,
> .container .content {
@include S(width, 500px);
}
display: grid;
grid-template-rows: auto 1fr;
box-sizing: border-box;
@include S(padding, 32px);
height: 100vh;
.headerBar {
display: flex;
align-items: center;
justify-content: flex-start;
h1 {
display: flex;
pointer-events: all;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
pointer-events: all;
cursor: pointer;
@include SuperHeading;
text-transform: uppercase;
@@ -39,11 +33,17 @@
}
> .container {
display: flex;
justify-content: center;
width: 100%;
overflow-y: auto;
> .content {
width: 100%;
background: #fff;
@include S(border-radius, $globalBorderRadius);
@include S(padding, 10px);
height: calc(80vh - #{D(60px)});
height: 100%;
overflow-y: auto;
box-sizing: border-box;
pointer-events: all;