Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2024-10-27 20:34:29 +00:00
Code Issues Projects Releases Wiki Activity

Improve settings on low resolution

Browse Source
This commit is contained in:
tobspr 2020-09-19 12:41:07 +02:00
parent ee67470e34
commit 5bde508f86
1 changed files with 86 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,95 @@
#state_SettingsState { #state_SettingsState {
$colorCategoryButton: #eee; $colorCategoryButton: #eeeff5;
$colorCategoryButtonSelected: #5f748b; $colorCategoryButtonSelected: #5f748b;
$layoutBreak: 1000px;
.container .content { .container .content {
display: flex; display: grid;
overflow-y: scroll; grid-template-columns: auto 1fr;
@include S(grid-gap, 10px);
@include StyleBelowWidth($layoutBreak) {
grid-template-columns: 1fr;
}
.sidebar {
display: grid;
@include S(min-width, 210px);
@include S(max-width, 320px);
@include S(grid-gap, 3px);
grid-template-rows: auto auto auto auto auto 1fr;
@include StyleBelowWidth($layoutBreak) {
grid-template-rows: 1fr 1fr;
grid-template-columns: auto auto;
max-width: unset !important;
}
button {
text-align: left;
&::after {
content: unset;
}
width: 100%;
box-sizing: border-box;
@include StyleBelowWidth($layoutBreak) {
text-align: center;
}
}
.other {
@include S(margin-top, 10px);
align-self: end;
@include StyleBelowWidth($layoutBreak) {
margin-top: 0;
}
}
button.categoryButton,
button.about {
background-color: $colorCategoryButton;
color: #777a7f;
&.active {
background-color: $colorCategoryButtonSelected;
color: #fff;
&:hover {
opacity: 1;
}
}
&.pressed {
transform: none !important;
}
}
.versionbar {
@include S(margin-top, 10px);
@include StyleBelowWidth($layoutBreak) {
display: none;
}
@include SuperSmallText;
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
.buildVersion {
display: flex;
flex-direction: column;
color: #aaadaf;
}
}
}
.categoryContainer { .categoryContainer {
width: 100%; overflow-y: scroll;
pointer-events: all;
@include S(padding-right, 10px);
.category { .category {
display: none; display: none;
@ -88,65 +170,6 @@
} }
} }
} }
.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);
.other {
margin-top: auto;
}
button {
@include S(margin-top, 4px);
width: calc(100% - #{D(20px)});
text-align: start;
&::after {
content: unset;
}
}
button.categoryButton,
button.about {
background-color: $colorCategoryButton;
color: #777a7f;
&.active {
background-color: $colorCategoryButtonSelected;
color: #fff;
&:hover {
opacity: 1;
}
}
&.pressed {
transform: none !important;
}
}
.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;
}
}
}
} }
@include DarkThemeOverride { @include DarkThemeOverride {