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