Mascali
/
shapez.io
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Minor css improvements

This commit is contained in:
tobspr 2020-07-21 10:14:06 +02:00
parent c111d88dc9
commit 35018d2778
7 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
res/ui/icons/download.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 712 B

After

Width:  |  Height:  |  Size: 756 B

BIN
res/ui/icons/link.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

3
src/css/common.scss
View File

@ -205,7 +205,7 @@ button {
border: 0;
background: $colorBlueBright;
color: #fff;
@include S(border-radius, $globalBorderRadius);
// border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
@include S(border-bottom-width, 2px);
// color: $accentColorDark;
@ -345,6 +345,7 @@ canvas {
::-webkit-scrollbar-thumb {
// border-radius: 4px;
@include S(border-radius, $globalBorderRadius);
background: #cdd0d4;
}

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

@ -23,6 +23,9 @@
transform: translateX(-50%) translateY(#{D(100px)});
}
@include S(border-top-left-radius, $globalBorderRadius);
@include S(border-top-right-radius, $globalBorderRadius);
.buildings {
display: grid;
grid-auto-flow: column;

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

@ -15,6 +15,8 @@
display: flex;
flex-direction: column;
@include S(border-radius, $globalBorderRadius);
@include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
0% {
}

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

@ -265,13 +265,15 @@
@include S(min-width, 130px);
@include S(padding, 15px, 20px);
letter-spacing: 0.3em !important;
@include IncreasedClickArea(0px);
font-weight: bold;
color: #fff;
background-color: $colorGreenBright;
transition: transform 0.12s ease-in-out;
transition: transform 0.12s ease-in-out, background-color 0.12s ease-in-out;
&:hover {
transform: scale(1.02);
background-color: darken($colorGreenBright, 4);
opacity: 1;
}
&.continueButton {
@ -281,9 +283,11 @@
.importButton {
@include S(margin-top, 15px);
@include IncreasedClickArea(0px);
}
.newGameButton {
@include IncreasedClickArea(0px);
@include S(margin-top, 15px);
@include S(margin-left, 15px);
}
@ -306,8 +310,8 @@
display: grid;
grid-template-columns: 1fr auto auto;
grid-template-rows: auto auto;
@include S(grid-column-gap, 5px);
@include S(grid-row-gap, 3px);
@include S(grid-column-gap, 4px);
@include S(grid-row-gap, 1px);
.playtime {
grid-column: 1 / 2;
@ -325,12 +329,9 @@
button.resumeGame,
button.downloadGame,
button.deleteGame {
grid-column: 3 / 4;
grid-row: 1 / 3;
@include S(width, 30px);
@include S(height, 30px);
padding: 0;
align-self: center;
justify-self: center;
@include IncreasedClickArea(0px);
background: #44484a uiResource("icons/play.png") center center / 40% no-repeat;
}
@ -338,12 +339,13 @@
button.downloadGame {
grid-column: 2 / 3;
grid-row: 1 / 2;
background-color: $colorBlueBright;
background-image: uiResource("icons/download.png");
@include S(width, 15px);
@include IncreasedClickArea(0px);
@include S(height, 15px);
align-self: end;
background-size: 60%;
align-self: start;
}
button.deleteGame {
@ -357,6 +359,14 @@
align-self: end;
background-size: 60%;
}
button.resumeGame {
grid-column: 3 / 4;
grid-row: 1 / 3;
margin: 0;
@include S(width, 32px);
height: 100%;
}
}
}
}
@ -370,7 +380,7 @@
grid-template-columns: auto auto auto 1fr;
@include S(padding, 10px);
box-sizing: border-box;
@include S(grid-gap, 5px);
@include S(grid-gap, 4px);
.author {
flex-grow: 1;
@ -390,7 +400,7 @@
grid-template-columns: 1fr auto;
justify-content: center;
background: #fdfdfd;
background: #fdfdfd 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);
@ -401,15 +411,14 @@
text-transform: uppercase;
color: #616266;
transition: all 0.12s ease-in-out;
transition-property: background-color, transform;
transition: background-color 0.12s ease-in-out;
pointer-events: all;
@include S(width, 120px);
@include S(height, 60px);
cursor: pointer;
&:hover {
background-color: #fff;
background-color: #f0f6ff;
}
.thirdpartyLogo {
@ -432,7 +441,7 @@
align-items: flex-start;
justify-content: flex-start;
grid-template-rows: 1fr 1fr 1fr;
@include S(grid-gap, 2px);
@include S(grid-gap, 3px);
@include S(height, 60px);
> a {
@ -441,7 +450,7 @@
height: 100%;
&:hover {
background-color: #fff;
background-color: #f0f6ff;
}
@include SuperSmallText;
text-transform: uppercase;
@ -457,6 +466,9 @@
background-position: #{D(5px)} center;
background-size: #{D(12px)};
background-repeat: no-repeat;
@include S(border-radius, $globalBorderRadius);
transition: background-color 0.12s ease-in-out;
&.redditLink {
background-image: uiResource("main_menu/reddit.svg");

2
src/css/variables.scss
View File

@ -1,4 +1,4 @@
$globalBorderRadius: 0px;
$globalBorderRadius: 2px;
// When to reduce control elements size for small devices
$layoutExpandMinWidth: 340px;