1
0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-03-02 03:39:21 +00:00

Increase readability of certain HUD elements

This commit is contained in:
tobspr
2020-06-01 13:18:44 +02:00
parent 356bb2b73a
commit 922f8f47d7
5 changed files with 23 additions and 12 deletions

View File

@@ -11,7 +11,11 @@
border-bottom-width: 0;
transition: transform 0.12s ease-in-out;
background: rgba(mix(#ddd, $colorBlueBright, 80%), 0.69);
background: rgba(mix(#ddd, $colorBlueBright, 90%), 0.75);
@include DarkThemeOverride {
background: #222428;
}
&:not(.visible) {
transform: translateX(-50%) translateY(#{D(100px)});

View File

@@ -6,8 +6,12 @@
display: flex;
flex-direction: column;
align-items: flex-start;
color: #fff;
text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.1);
color: #333438;
// text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.1);
@include DarkThemeOverride {
color: #fff;
}
> .binding {
display: inline-grid;
@@ -42,10 +46,13 @@
}
label {
color: $accentColorDark;
color: #333438;
@include SuperSmallText;
text-transform: uppercase;
color: #fff;
// color: #fff;
@include DarkThemeOverride {
color: #fff;
}
@include S(margin-left, 5px);
}

View File

@@ -16,8 +16,8 @@
grid-template-columns: auto 1fr;
grid-template-rows: 1fr 1fr;
@include S(margin-bottom, 4px);
color: #fff;
text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2);
color: #333438;
// text-shadow: #{D(1px)} #{D(1px)} 0 rgba(0, 10, 20, 0.2);
&.unpinable {
> canvas {
@@ -59,7 +59,7 @@
> .goalLabel {
@include S(font-size, 7px);
opacity: 0.5;
opacity: 0.9;
align-self: start;
justify-self: start;
font-weight: normal;
@@ -81,7 +81,6 @@
display: inline-block;
@include S(width, 8px);
@include S(height, 8px);
opacity: 0.8;
@include S(top, 4px);
@include S(left, -7px);
background: uiResource("icons/current_goal_marker.png") center center / contain no-repeat;

View File

@@ -38,13 +38,13 @@
@include SuperSmallText;
pointer-events: all;
cursor: pointer;
color: #000;
color: #333438;
@include S(padding-left, 11px);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
background: uiResource("icons/waypoint.png") left 50% / #{D(8px)} no-repeat;
opacity: 0.5;
opacity: 0.7;
@include S(margin-bottom, 1px);
font-weight: bold;
&:hover {