.tracker {
- .count-display,
- .med-display {
- background: black;
- font-weight: bold;
- text-align: center;
- }
- .dungeon {
- display: flex;
- flex-direction: row;
- align-items: stretch;
- justify-content: flex-start;
- gap: 1ex;
- > * {
- width: 2em;
- height: 2em;
- }
- .dungeon-smalls .count-display,
- .dungeon-tag {
- background: black;
- font-family: monospace;
- font-size: 115%;
- font-weight: bold;
- text-align: center;
- }
- .dungeon-checks,
- .dungeon-smalls {
- position: relative;
- .count-display {
- pointer-events: none;
- position: absolute;
- top: .3ex;
- left: .3ex;
- bottom: .3ex;
- right: .3ex;
- &.is-zero {
- display: none;
- }
- }
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ align-items: stretch;
+ justify-content: flex-start;
+
+ .auto-tracking {
+ .custom-toggle {
+ vertical-align: middle;
}
}
- .dungeon-ep,
- .dungeon-pd {
- margin-top: 1ex;
- }
- .equipment {
- display: grid;
- grid-template-columns: 3em 3em 3em 3em 3em;
- gap: 1ex;
- padding: 1ex;
- }
- .items {
- display: grid;
- grid-template-columns: 3em 3em 3em 3em 3em;
- gap: 1ex;
- padding: 1ex;
+ .canvas {
+ width: 100%;
+ height: auto;
+ max-height: 100%;
}
- .item {
- position: relative;
- width: 3em;
- height: 3em;
-
- .bottom-left,
- .bottom-right,
- .top-left,
- .top-right {
- position: absolute;
- width: 50%;
- height: 50%;
- .zelda-icon {
- transform: scale(1.4);
- }
- }
- .bottom-left {
- bottom: 0;
- left: 0;
- }
- .bottom-right {
- bottom: 0;
- right: 0;
- }
- .top-left {
- top: 0;
- left: 0;
- }
- .top-right {
- top: 0;
- right: 0;
- }
-
- .left,
- .right {
- position: absolute;
- width: 50%;
- height: 100%;
- overflow: hidden;
- .zelda-icon {
- width: 200%;
- margin-left: -50%;
- }
- }
- .left {
- left: 0;
- }
- .right {
- right: 0;
- }
+ .dungeons {
.count-display,
- .med-display {
+ .dungeon-tag {
+ font-size: 0.45px;
+ font-weight: bold;
+ fill: white;
+ stroke: black;
+ stroke-width: 0.2px;
+ stroke-linejoin: round;
+ paint-order: stroke fill;
+ dominant-baseline: middle;
+ text-anchor: middle;
pointer-events: none;
+ user-select: none;
&.is-zero {
display: none;
}
+ &.is-full {
+ fill: green;
+ }
+ }
+ .count-display {
+ font-size: 0.65px;
+ stroke-width: 0.3px;
}
+ }
+ .items {
.med-display {
- height: 30%;
- font-size: 80%;
- line-height: 1;
+ font-size: 0.3px;
+ font-weight: bold;
+ fill: white;
+ stroke: black;
+ stroke-width: 0.15px;
+ stroke-linejoin: round;
+ paint-order: stroke fill;
+ pointer-events: none;
+ &.bottom-left {
+ transform: translate(-0.5px, 0.4px);
+ }
+ &.bottom-right {
+ transform: translate(0.1px, 0.4px);
+ }
}
}
.tracker-map {
- .canvas {
- width: 50em;
- height: auto;
- .location {
+ .location {
+ .box {
width: 0.04px;
height: 0.04px;
- fill: green;
- stroke: black;
- stroke-width: 0.003px;
transform: translate(-0.02px, -0.02px);
- &.status-cleared {
+ 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 {
fill: grey;
opacity: 0.4;
}
- &.size-lg {
+ }
+ &.status-partial {
+ .box {
+ fill: yellow;
+ }
+ }
+ &.status-unavailable {
+ .box {
+ fill: red;
+ }
+ }
+ &.size-lg {
+ .box {
width: 0.08px;
height: 0.08px;
transform: translate(-0.04px, -0.04px);
}
+ .text {
+ font-size: 0.04px;
+ }
+ }
+ &.clickable {
+ .box:hover {
+ stroke: white;
+ }
}
}
}
}
}
.tracker-toolbar {
+ label .zelda-icon,
.toggle-icon {
display: inline-block;
width: 2em;
height: 2em;
}
+ .form-select {
+ background-image: none;
+ padding-right: 0.75rem;
+ border: none;
+ }
}
.zelda-icon {
width: 100%;