Mascali
/
shapez
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

remove pinned shapes drop shadow

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