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

Further UI improvements

Browse Source
This commit is contained in:
tobspr 2022-06-21 13:29:33 +02:00
parent 3988d71f5a
commit 99b5688039
1 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -169,27 +169,31 @@
grid-column: 2 / 3; grid-column: 2 / 3;
flex-direction: column; flex-direction: column;
@include S(grid-gap, 20px); @include S(grid-gap, 20px);
height: 100%;
.mainNews { .mainNews {
background: rgb(248, 232, 130); background: linear-gradient(220deg, rgb(248, 232, 130), rgb(248, 171, 90));
&::before { &::before {
background: uiResource("kiwi_clicker.png") center center / 100% no-repeat; background: uiResource("kiwi_clicker.png") center center / 100% no-repeat;
content: ""; content: "";
@include S(width, 130px); @include S(width, 140px);
@include S(height, 130px); @include S(height, 140px);
position: absolute; position: absolute;
top: 50%; top: 50%;
right: -5%; right: -5%;
pointer-events: none; pointer-events: none;
transform: translateY(-50%); transform: translateY(-50%);
transition: transform 0.5s ease-in-out;
}
&:hover::before {
transform: translate(0, -51%);
} }
box-shadow: 0 D(9px) D(15px) rgba(#000, 0.2); box-shadow: 0 D(9px) D(15px) rgba(#000, 0.2);
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include S(min-height, 60px); @include S(height, 60px);
@include S(max-height, 150px);
pointer-events: all; pointer-events: all;
flex-grow: 1; flex-grow: 1;
z-index: 100; z-index: 100;
@ -209,7 +213,7 @@
.text { .text {
@include SuperSmallText; @include SuperSmallText;
@include S(width, 120px); @include S(width, 120px);
color: rgba(0, 10, 20, 0.7); color: rgba(#000, 0.8);
} }
} }
@ -491,11 +495,19 @@
} }
> button { > button {
pointer-events: all;
@include S(padding, 4px, 10px);
margin: 0; margin: 0;
@include S(padding, 2px, 10px); background: #47c599;
box-sizing: border-box;
position: absolute; position: absolute;
@include S(top, 10px); @include S(top, 10px);
@include S(right, 10px); @include S(right, 10px);
z-index: 100;
@include PlainText;
z-index: 200;
color: #111215;
box-shadow: 0 D(2px) D(9px) rgba(#000, 0.4);
} }
} }