123 lines
3.1 KiB
SCSS
123 lines
3.1 KiB
SCSS
#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: $ingameHudBg;
|
|
@include S(padding, 7px);
|
|
|
|
color: #eee;
|
|
@include S(border-radius, $globalBorderRadius);
|
|
|
|
.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);
|
|
@include S(padding-bottom, 5px);
|
|
@include S(padding-top, 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;
|
|
& {
|
|
/* @load-async */
|
|
background: uiResource("icons/waypoint.png") left 50% / #{D(8px)} no-repeat;
|
|
}
|
|
|
|
&.layer--wires {
|
|
/* @load-async */
|
|
background-image: uiResource("icons/waypoint_wires.png");
|
|
}
|
|
|
|
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);
|
|
& {
|
|
/* @load-async */
|
|
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();
|
|
}
|
|
}
|
|
}
|
|
}
|