Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2025-06-13 13:04:03 +00:00
Code Issues Projects Releases Wiki Activity

remove pinned shapes drop shadow

Browse Source
This commit is contained in:
tobspr 2020-09-19 12:22:43 +02:00
parent 2075f4d011
commit ee67470e34
1 changed files with 137 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

275
src/css/ingame_hud/pinned_shapes.scss
View File

@ -1,138 +1,137 @@
#ingame_HUD_PinnedShapes {
position: absolute;
@include S(left, 9px);
@include S(top, 150px);
@include PlainText;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
> .shape {
position: relative;
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr 1fr;
@include S(margin-bottom, 4px);
color: #333438;
// text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2);
filter: drop-shadow(#{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2));
&.unpinable {
> canvas {
cursor: pointer;
pointer-events: all;
}
}
> canvas {
@include S(width, 25px);
@include S(height, 25px);
grid-column: 1 / 2;
grid-row: 1 / 3;
pointer-events: all;
transition: transform 0.1s ease-in-out;
transform-origin: D(2px) center;
will-change: transform;
position: relative;
z-index: 20;
&:hover {
transform: scale(2);
z-index: 21;
}
}
> .amountLabel,
> .goalLabel {
@include S(margin-left, 5px);
@include SuperSmallText;
font-weight: bold;
display: inline-flex;
align-items: center;
flex-direction: row;
grid-column: 2 / 3;
@include S(height, 9px);
@include DarkThemeOverride {
color: #eee;
}
}
> .goalLabel {
@include S(font-size, 7px);
opacity: 0.9;
align-self: start;
justify-self: start;
font-weight: normal;
grid-row: 2 / 3;
}
> .amountLabel {
align-self: end;
justify-self: start;
grid-row: 1 / 2;
}
> .infoButton {
@include S(width, 8px);
@include S(height, 8px);
background: uiResource("icons/info_button.png") center center / 95% no-repeat;
position: absolute;
opacity: 0.7;
@include S(top, 13px);
@include S(left, -7px);
@include DarkThemeInvert;
@include IncreasedClickArea(2px);
transition: opacity 0.12s ease-in-out;
z-index: 100;
&:hover {
opacity: 0.8;
}
}
&.goal,
&.blueprint {
.amountLabel::after {
content: " ";
position: absolute;
display: inline-block;
@include S(width, 8px);
@include S(height, 8px);
@include S(top, 4px);
@include S(left, -7px);
background: center center / contain no-repeat;
}
&.goal .amountLabel {
&::after {
background-image: uiResource("icons/current_goal_marker.png");
background-size: 90%;
}
@include DarkThemeOverride {
&::after {
background-image: uiResource("icons/current_goal_marker_inverted.png") !important;
}
}
}
&.blueprint .amountLabel {
&::after {
background-image: uiResource("icons/blueprint_marker.png");
background-size: 90%;
}
@include DarkThemeOverride {
&::after {
background-image: uiResource("icons/blueprint_marker_inverted.png") !important;
}
}
}
}
&.completed {
opacity: 0.5;
}
}
}
#ingame_HUD_PinnedShapes {
position: absolute;
@include S(left, 9px);
@include S(top, 150px);
@include PlainText;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
> .shape {
position: relative;
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr 1fr;
@include S(margin-bottom, 4px);
color: #333438;
// text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2);
&.unpinable {
> canvas {
cursor: pointer;
pointer-events: all;
}
}
> canvas {
@include S(width, 25px);
@include S(height, 25px);
grid-column: 1 / 2;
grid-row: 1 / 3;
pointer-events: all;
transition: transform 0.1s ease-in-out;
transform-origin: D(2px) center;
will-change: transform;
position: relative;
z-index: 20;
&:hover {
transform: scale(2);
z-index: 21;
}
}
> .amountLabel,
> .goalLabel {
@include S(margin-left, 5px);
@include SuperSmallText;
font-weight: bold;
display: inline-flex;
align-items: center;
flex-direction: row;
grid-column: 2 / 3;
@include S(height, 9px);
@include DarkThemeOverride {
color: #eee;
}
}
> .goalLabel {
@include S(font-size, 7px);
opacity: 0.9;
align-self: start;
justify-self: start;
font-weight: normal;
grid-row: 2 / 3;
}
> .amountLabel {
align-self: end;
justify-self: start;
grid-row: 1 / 2;
}
> .infoButton {
@include S(width, 8px);
@include S(height, 8px);
background: uiResource("icons/info_button.png") center center / 95% no-repeat;
position: absolute;
opacity: 0.7;
@include S(top, 13px);
@include S(left, -7px);
@include DarkThemeInvert;
@include IncreasedClickArea(2px);
transition: opacity 0.12s ease-in-out;
z-index: 100;
&:hover {
opacity: 0.8;
}
}
&.goal,
&.blueprint {
.amountLabel::after {
content: " ";
position: absolute;
display: inline-block;
@include S(width, 8px);
@include S(height, 8px);
@include S(top, 4px);
@include S(left, -7px);
background: center center / contain no-repeat;
}
&.goal .amountLabel {
&::after {
background-image: uiResource("icons/current_goal_marker.png");
background-size: 90%;
}
@include DarkThemeOverride {
&::after {
background-image: uiResource("icons/current_goal_marker_inverted.png") !important;
}
}
}
&.blueprint .amountLabel {
&::after {
background-image: uiResource("icons/blueprint_marker.png");
background-size: 90%;
}
@include DarkThemeOverride {
&::after {
background-image: uiResource("icons/blueprint_marker_inverted.png") !important;
}
}
}
}
&.completed {
opacity: 0.5;
}
}
}