Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-03-02 03:39:21 +00:00
Code Issues Projects Releases Wiki Activity

Add notifications when saving and new upgrades are available, minor improvements

Browse Source
This commit is contained in:
tobspr
2020-05-16 12:43:11 +02:00
parent 9f0435b51d
commit c1d720ca52
20 changed files with 183 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/css/common.scss
View File

@@ -87,11 +87,6 @@ body {
// }
}
// Dirty hack
* {
@include TextShadow3DImpl;
}
img {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
}

7
src/css/icons.scss
View File

@@ -20,3 +20,10 @@ $upgrades: belt, miner, painting, processors;
background-image: uiResource("res/ui/upgrades/#{$upgrade}.png") !important;
}
}
$icons: notification_saved, notification_success, notification_upgrade;
@each $icon in $icons {
[data-icon="icons/#{$icon}.png"] {
background-image: uiResource("res/ui/icons/#{$icon}.png") !important;
}
}

44
src/css/ingame_hud/notifications.scss Normal file
View File

@@ -0,0 +1,44 @@
#ingame_HUD_Notifications {
position: absolute;
@include S(bottom, 60px);
@include S(right, 10px);
.notification {
background: rgba(#333438, 0.8);
@include S(border-radius, 2px);
@include S(margin-top, 3px);
color: #fff;
@include PlainText;
@include S(padding, 7px, 10px);
@include S(width, 200px);
&[data-icon] {
@include S(background-position-x, 8px);
background-position-y: center;
@include S(padding-left, 35px);
background-repeat: no-repeat;
@include S(background-size, 15px);
}
transform-origin: 100% 50%;
@include InlineAnimation(5s ease-in-out) {
0% {
opacity: 1;
}
87% {
opacity: 1;
transform: scale(1);
}
95% {
transform: scale(1.05);
}
100% {
opacity: 0;
transform: scale(0.5);
}
}
}
}

6
src/css/main.scss
View File

@@ -36,11 +36,13 @@
@import "ingame_hud/vignette_overlay";
@import "ingame_hud/statistics";
@import "ingame_hud/pinned_shapes";
@import "ingame_hud/notifications";
// Z-Index
$elements: ingame_Canvas, ingame_VignetteOverlay, ingame_HUD_building_placer, ingame_HUD_PinnedShapes,
ingame_HUD_buildings_toolbar, ingame_HUD_GameMenu, ingame_HUD_KeybindingOverlay, ingame_HUD_Shop,
ingame_HUD_Statistics, ingame_HUD_BetaOverlay, ingame_HUD_MassSelector, ingame_HUD_UnlockNotification;
ingame_HUD_buildings_toolbar, ingame_HUD_GameMenu, ingame_HUD_KeybindingOverlay, ingame_HUD_Notifications,
ingame_HUD_Shop, ingame_HUD_Statistics, ingame_HUD_BetaOverlay, ingame_HUD_MassSelector,
ingame_HUD_UnlockNotification;
$zindex: 100;

29
src/css/mixins.scss
View File

@@ -253,38 +253,9 @@ button,
}
@mixin TextShadow3D($color: rgb(222, 234, 238), $borderColor: #000) {
// @if $borderColor != #000 {
// @include TextShadow3DImpl($color: $color, $borderColor: $borderColor);
// }
color: $color;
}
@mixin TextShadow3DImpl(
$color: rgb(222, 234, 238),
$scale: 1,
$additionalShadowAlpha: 1,
$borderColor: #222428
) {
// color: $text3dColor;
$borderColor: rgba(15, 18, 23, 0.9);
// $shadowColor: darken($color, 40%);
$border: 0.07em;
$borderMid: $border * 1.14;
$drop1: $borderMid + 0.02;
$drop2: $borderMid + 0.06em;
// text-shadow: #{$border} #{$border} 0 $borderColor, #{-$border} #{$border} 0 $borderColor, #{$border} #{-$border} 0 $borderColor,
// #{-$border} #{-$border} 0 $borderColor, 0 #{$borderMid} 0 $borderColor, 0 #{-$borderMid} 0 $borderColor,
// #{$borderMid} 0 0 $borderColor, #{-$borderMid} 0 0 $borderColor, 0 #{$drop1} 0 $borderColor, #{$borderMid} #{$drop1} 0 $borderColor,
// #{-$borderMid} #{$drop1} 0 $borderColor, 0 #{$drop2} 0 $borderColor, #{$borderMid} #{$drop2} 0 $borderColor,
// #{-$borderMid} #{$drop2} 0 $borderColor, -0.2em 0.13em 0 rgba(#111, 0.25); // 0px 0.07em 0px $shadowColor,
// 0px 0.15em 0.09em rgba(#333539, $additionalShadowAlpha);;
}
// ----------------------------------------
/* Shine animation prefab, useful for buttons etc. Adds a bright shine which moves over
the button like a reflection. Performance heavy. */