.tracker {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ align-items: stretch;
+ justify-content: flex-start;
+
.auto-tracking {
.custom-toggle {
vertical-align: middle;
}
}
- .dungeons {
+ .canvas {
width: 100%;
height: auto;
+ max-height: 100%;
+ }
+ .dungeons {
.count-display,
.dungeon-tag {
- font-size: 0.5px;
+ font-size: 0.45px;
font-weight: bold;
fill: white;
stroke: black;
- stroke-width: 0.25px;
+ stroke-width: 0.2px;
stroke-linejoin: round;
paint-order: stroke fill;
dominant-baseline: middle;
}
.count-display {
font-size: 0.65px;
+ stroke-width: 0.3px;
}
}
.items {
- width: 100%;
- height: auto;
.med-display {
font-size: 0.3px;
font-weight: bold;
}
}
.tracker-map {
- .canvas {
- width: 100%;
- height: auto;
- .location {
+ .location {
+ .box {
+ width: 0.04px;
+ height: 0.04px;
+ transform: translate(-0.02px, -0.02px);
+ fill: #0d0;
+ stroke: black;
+ stroke-width: 1px;
+ vector-effect: non-scaling-stroke;
+ }
+ .text {
+ fill: black;
+ font-size: 0.02px;
+ font-weight: bold;
+ text-anchor: middle;
+ dominant-baseline: middle;
+ pointer-events: none;
+ user-select: none;
+ }
+ &.status-cleared {
.box {
- width: 0.04px;
- height: 0.04px;
- transform: translate(-0.02px, -0.02px);
- fill: #0d0;
- stroke: black;
- stroke-width: 1px;
- vector-effect: non-scaling-stroke;
- }
- .text {
- fill: black;
- font-size: 0.02px;
- font-weight: bold;
- text-anchor: middle;
- dominant-baseline: middle;
- pointer-events: none;
- user-select: none;
+ fill: grey;
+ opacity: 0.4;
}
- &.status-cleared {
- .box {
- fill: grey;
- opacity: 0.4;
- }
+ }
+ &.status-partial {
+ .box {
+ fill: yellow;
}
- &.status-partial {
- .box {
- fill: yellow;
- }
+ }
+ &.status-unavailable {
+ .box {
+ fill: red;
}
- &.status-unavailable {
- .box {
- fill: red;
- }
+ }
+ &.size-lg {
+ .box {
+ width: 0.08px;
+ height: 0.08px;
+ transform: translate(-0.04px, -0.04px);
}
- &.size-lg {
- .box {
- width: 0.08px;
- height: 0.08px;
- transform: translate(-0.04px, -0.04px);
- }
- .text {
- font-size: 0.04px;
- }
+ .text {
+ font-size: 0.04px;
}
- &.clickable {
- .box:hover {
- stroke: white;
- }
+ }
+ &.clickable {
+ .box:hover {
+ stroke: white;
}
}
}