mirror of
https://github.com/tobspr/shapez.io.git
synced 2026-03-02 03:39:21 +00:00
Minor artwork update
This commit is contained in:
@@ -10,7 +10,7 @@
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
@include S(border-radius, 4px);
|
||||
background: rgba(#333, 0.5);
|
||||
background: rgba(#333, 0.9);
|
||||
@include S(width, 200px);
|
||||
|
||||
.buildingLabel {
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgb(140, 229, 140) !important;
|
||||
background: rgb(173, 221, 253) !important;
|
||||
transform: scale(1.05);
|
||||
.keybinding {
|
||||
color: #111;
|
||||
|
||||
@@ -25,12 +25,12 @@
|
||||
> .dialogInner {
|
||||
background: #fff;
|
||||
@include S(min-width, 500px);
|
||||
max-width: calc(100vw - #{D(50px)});
|
||||
max-height: calc(100vh - #{D(50px)});
|
||||
max-width: calc(100vw - #{D(40px)});
|
||||
max-height: calc(100vh - #{D(40px)});
|
||||
@include S(border-radius, 4px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include S(padding, 15px);
|
||||
@include S(padding, 12px);
|
||||
pointer-events: all;
|
||||
|
||||
> .title {
|
||||
@@ -38,6 +38,7 @@
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto;
|
||||
@include S(margin-bottom, 10px);
|
||||
|
||||
@@ -45,7 +46,7 @@
|
||||
opacity: 0.7;
|
||||
@include S(width, 20px);
|
||||
@include S(height, 20px);
|
||||
background: uiResource("icons/close.png") center center / 60% no-repeat;
|
||||
background: uiResource("icons/close.png") center center / 80% no-repeat;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
@include S(border-radius, 3px);
|
||||
@include S(margin-bottom, 4px);
|
||||
@include S(padding, 5px, 10px);
|
||||
@include S(grid-row-gap, 5px);
|
||||
@include S(height, 95px);
|
||||
@include S(grid-row-gap, 1px);
|
||||
@include S(height, 85px);
|
||||
grid-template-rows: #{D(20px)} auto;
|
||||
|
||||
&:last-child {
|
||||
@@ -19,38 +19,40 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 2 / 3;
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
@include Heading;
|
||||
@include PlainText;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
|
||||
.tier {
|
||||
@include S(margin-left, 5px);
|
||||
@include S(margin-right, 9px);
|
||||
background: $colorGreenBright;
|
||||
@include S(border-radius, 4px);
|
||||
@include S(border-radius, 2px);
|
||||
text-transform: uppercase;
|
||||
@include PlainText;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
@include S(margin-top, 1px);
|
||||
|
||||
@include S(width, 45px);
|
||||
@include S(padding, 0px, 5px);
|
||||
|
||||
&[data-tier="0"] {
|
||||
background-color: rgb(73, 186, 190);
|
||||
}
|
||||
&[data-tier="1"] {
|
||||
background-color: rgb(73, 94, 190);
|
||||
background-color: rgb(88, 110, 207);
|
||||
}
|
||||
&[data-tier="2"] {
|
||||
background-color: rgb(186, 73, 190);
|
||||
background-color: rgb(189, 100, 192);
|
||||
}
|
||||
&[data-tier="3"] {
|
||||
background-color: rgb(96, 190, 73);
|
||||
background-color: rgb(117, 192, 98);
|
||||
}
|
||||
&[data-tier="4"] {
|
||||
background-color: rgb(190, 91, 73);
|
||||
background-color: rgb(243, 77, 48);
|
||||
}
|
||||
&[data-tier="5"] {
|
||||
background-color: rgb(219, 184, 29);
|
||||
@@ -64,13 +66,15 @@
|
||||
.icon {
|
||||
@include S(width, 40px);
|
||||
@include S(height, 40px);
|
||||
background: center center / contain no-repeat;
|
||||
background: center center / 80% no-repeat;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 1 / 4;
|
||||
@include S(margin-right, 20px);
|
||||
opacity: 0.2;
|
||||
grid-row: 2 / 4;
|
||||
@include S(margin-right, 30px);
|
||||
@include S(margin-left, 10px);
|
||||
opacity: 0.32;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.description {
|
||||
@@ -87,7 +91,7 @@
|
||||
grid-row: 3 / 4;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
@include S(grid-gap, 15px);
|
||||
@include S(grid-gap, 9px);
|
||||
justify-content: start;
|
||||
|
||||
.requirement {
|
||||
@@ -110,7 +114,7 @@
|
||||
|
||||
@include S(line-height, 13px);
|
||||
@include S(border-radius, 2px);
|
||||
@include S(padding, 0, 2px, 3px);
|
||||
@include S(padding, 1px, 2px, 2px);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
@include S(min-width, 50px);
|
||||
@@ -140,7 +144,7 @@
|
||||
button.buy {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 3 / 4;
|
||||
align-self: end;
|
||||
align-self: center;
|
||||
justify-self: end;
|
||||
// @include S(padding, 4px, 5px);
|
||||
// @include PlainText;
|
||||
|
||||
Reference in New Issue
Block a user