Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2024-10-27 20:34:29 +00:00
Code Issues Projects Releases Wiki Activity

Make waypoint list scrollable

Browse Source
This commit is contained in:
tobspr 2020-09-13 09:31:41 +02:00
parent 10507b735a
commit d4b6a2b34e
1 changed files with 107 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
src/css/ingame_hud/waypoints.scss
View File

@ -1,95 +1,107 @@
#ingame_HUD_Waypoints_Hint {
position: absolute;
@include S(right, 10px);
@include S(bottom, 10px);
display: flex;
flex-direction: column;
@include PlainText;
@include S(width, 150px);
background: rgba(0, 10, 20, 0.5);
@include S(padding, 5px);
color: #eee;
.desc {
@include SuperSmallText;
color: #babcbf;
.keybinding {
position: relative;
}
strong {
color: #fff;
}
}
}
#ingame_HUD_Waypoints {
position: absolute;
@include S(right, 10px);
@include S(top, 45px);
display: flex;
flex-direction: column;
@include DarkThemeInvert();
.waypoint {
@include SuperSmallText;
pointer-events: all;
cursor: pointer;
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.7;
@include S(margin-bottom, 1px);
font-weight: bold;
&:hover {
opacity: 0.8;
}
.editButton {
@include S(width, 10px);
@include S(height, 10px);
@include S(margin-left, 4px);
background: uiResource("icons/edit_key.png") center center / 70% no-repeat;
pointer-events: all;
cursor: pointer;
position: relative;
@include IncreasedClickArea(2px);
transition: transform 0.04s ease-in-out;
&:hover {
transform: scale(1.5);
}
}
&.hub {
// Transform because there is a canvas before
@include S(margin-left, -2px);
grid-template-columns: auto 1fr;
background: none !important;
@include S(padding-left, 0);
canvas {
@include S(width, 12px);
@include S(height, 12px);
@include S(margin-right, 1px);
}
}
&.shapeIcon {
canvas {
@include S(width, 15px);
@include S(height, 15px);
pointer-events: none;
// Double invert, to make sure it has the right color
@include DarkThemeInvert();
}
}
}
}
#ingame_HUD_Waypoints_Hint {
position: absolute;
@include S(right, 10px);
@include S(bottom, 10px);
display: flex;
flex-direction: column;
@include PlainText;
@include S(width, 150px);
background: rgba(0, 10, 20, 0.5);
@include S(padding, 5px);
color: #eee;
.desc {
@include SuperSmallText;
color: #babcbf;
.keybinding {
position: relative;
}
strong {
color: #fff;
}
}
}
#ingame_HUD_Waypoints {
position: absolute;
@include S(right, 10px);
@include S(top, 45px);
display: flex;
flex-direction: column;
@include DarkThemeInvert();
max-height: 50vh;
overflow-x: hidden;
overflow-y: auto;
pointer-events: all;
@include S(padding-right, 5px);
// Scrollbar
&::-webkit-scrollbar {
@include S(width, 2px);
@include S(height, 6px);
}
.waypoint {
@include SuperSmallText;
pointer-events: all;
cursor: pointer;
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.7;
@include S(margin-bottom, 1px);
font-weight: bold;
&:hover {
opacity: 0.8;
}
.editButton {
@include S(width, 10px);
@include S(height, 10px);
@include S(margin-left, 4px);
background: uiResource("icons/edit_key.png") center center / 70% no-repeat;
pointer-events: all;
cursor: pointer;
position: relative;
@include IncreasedClickArea(2px);
transition: transform 0.04s ease-in-out;
&:hover {
transform: scale(1.5);
}
}
&.hub {
// Transform because there is a canvas before
@include S(margin-left, -2px);
grid-template-columns: auto 1fr;
background: none !important;
@include S(padding-left, 0);
canvas {
@include S(width, 12px);
@include S(height, 12px);
@include S(margin-right, 1px);
}
}
&.shapeIcon {
canvas {
@include S(width, 15px);
@include S(height, 15px);
pointer-events: none;
// Double invert, to make sure it has the right color
@include DarkThemeInvert();
}
}
}
}