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

Color blind mode

Browse Source
This commit is contained in:
tobspr
2020-06-22 14:32:24 +02:00
parent f204189fdb
commit 9a67115ba7
22 changed files with 518 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/css/ingame_hud/color_blind_helper.scss Normal file
View File

@@ -0,0 +1,18 @@
#ingame_HUD_ColorBlindBelowTileHelper {
position: absolute;
@include SuperSmallText;
color: #fff;
background: $ingameHudBg;
@include S(padding, 5px);
@include S(top, 20px);
left: 50%;
transform: translateX(-50%);
text-transform: uppercase;
&:not(.visible) {
display: none;
}
@include DarkThemeInvert;
}

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

@@ -72,6 +72,24 @@
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 {

131
src/css/ingame_hud/shape_viewer.scss Normal file
View File

@@ -0,0 +1,131 @@
#ingame_HUD_ShapeViewer {
.dialogInner {
@include S(width, 160px);
}
.content {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
justify-items: center;
.seperator {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.layer {
position: relative;
background: #eee;
@include DarkThemeOverride {
background: rgba(0, 10, 20, 0.2);
}
@include S(width, 150px);
@include S(height, 100px);
display: flex;
align-items: center;
justify-content: center;
> canvas {
@include S(width, 50px);
@include S(height, 50px);
}
.quad {
position: absolute;
width: 50%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
$arrowDims: 23px;
$spacing: 9px;
@include S(padding, 6px);
.colorLabel {
text-transform: uppercase;
@include SuperSmallText;
@include S(font-size, 9px);
}
.emptyLabel {
text-transform: uppercase;
@include SuperSmallText;
@include S(font-size, 9px);
}
&::after {
content: " ";
background: rgba(0, 10, 20, 0.5);
@include S(width, $arrowDims);
@include S(height, 1px);
position: absolute;
transform: rotate(45deg);
transform-origin: 50% 50%;
}
@include DarkThemeOverride {
&::after {
background: rgba(255, 255, 255, 0.5);
}
}
&.quad-0 {
right: 0;
top: 0;
align-items: flex-start;
justify-content: flex-end;
&::after {
@include S(left, $spacing);
@include S(bottom, $arrowDims / 2 + $spacing);
transform: rotate(-45deg);
}
}
&.quad-1 {
bottom: 0;
right: 0;
align-items: flex-end;
justify-content: flex-end;
&::after {
@include S(left, $spacing);
@include S(top, $arrowDims / 2 + $spacing);
transform: rotate(45deg);
}
}
&.quad-2 {
bottom: 0;
left: 0;
align-items: flex-end;
justify-content: flex-start;
&::after {
@include S(right, $spacing);
@include S(top, $arrowDims / 2 + $spacing);
transform: rotate(135deg);
}
}
&.quad-3 {
top: 0;
left: 0;
align-items: flex-start;
justify-content: flex-start;
&::after {
@include S(right, $spacing);
@include S(bottom, $arrowDims / 2 + $spacing);
transform: rotate(225deg);
}
}
}
}
}
}

21
src/css/ingame_hud/shop.scss
View File

@@ -195,6 +195,25 @@
}
}
button.showInfo {
@include S(width, 11px);
@include S(height, 11px);
background: uiResource("icons/info_button.png") center center / 95% no-repeat;
position: absolute;
@include S(top, 17px);
@include S(right, 2.5px);
opacity: 0.5;
cursor: pointer;
pointer-events: all;
@include IncreasedClickArea(5px);
transition: opacity 0.12s ease-in-out;
@include DarkThemeInvert;
&:hover {
opacity: 0.6;
}
}
canvas {
@include S(width, 40px);
@include S(height, 40px);
@@ -241,7 +260,7 @@
&.complete {
background-color: $colorGreenBright;
@include DarkThemeOverride {
background-color: $colorGreenBright;
}

4
src/css/main.scss
View File

@@ -49,6 +49,8 @@
@import "ingame_hud/blueprint_placer";
@import "ingame_hud/waypoints";
@import "ingame_hud/interactive_tutorial";
@import "ingame_hud/color_blind_helper";
@import "ingame_hud/shape_viewer";
// prettier-ignore
$elements:
@@ -74,6 +76,7 @@ ingame_HUD_buildings_toolbar,
ingame_HUD_BlueprintPlacer,
ingame_HUD_Waypoints_Hint,
ingame_HUD_Watermark,
ingame_HUD_ColorBlindBelowTileHelper,
// Overlays
ingame_HUD_BetaOverlay,
@@ -81,6 +84,7 @@ ingame_HUD_BetaOverlay,
// Dialogs
ingame_HUD_Shop,
ingame_HUD_Statistics,
ingame_HUD_ShapeViewer,
ingame_HUD_UnlockNotification,
ingame_HUD_SettingsMenu,
ingame_HUD_ModalDialogs;