X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fsass%2Ftracker.scss;h=01704b75f3f69e33ac4c696604798a349bc1a99c;hb=1a3d040147c19d24b8d02ec8e594eb06b8efc1ff;hp=06f157779a3b5eb5f3a46469e2a57ae4d480651c;hpb=b5a50d74cf042fa7fc874d8184dc37ae20bb74dd;p=alttp.git diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss index 06f1577..01704b7 100644 --- a/resources/sass/tracker.scss +++ b/resources/sass/tracker.scss @@ -1,5 +1,11 @@ .tracker { - .count-display { + .auto-tracking { + .custom-toggle { + vertical-align: middle; + } + } + .count-display, + .med-display { background: black; font-weight: bold; text-align: center; @@ -35,9 +41,15 @@ &.is-zero { display: none; } + &.is-full { + color: green; + } } } } + .dungeons { + padding: 1ex; + } .dungeon-ep, .dungeon-pd { margin-top: 1ex; @@ -49,65 +61,79 @@ padding: 1ex; } .items { - display: grid; - grid-template-columns: 3em 3em 3em 3em 3em; - gap: 1ex; - padding: 1ex; - } - .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); + width: 100%; + height: auto; + .med-display { + 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-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%; + &.bottom-right { + transform: translate(0.1px, 0.4px); } } - .left { - left: 0; - } - .right { - right: 0; - } - .count-display { - pointer-events: none; - &.is-zero { - display: none; + } + .tracker-map { + .canvas { + width: 100%; + height: auto; + .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 { + fill: grey; + opacity: 0.4; + } + } + &.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; + } + } } } } @@ -117,11 +143,17 @@ } } .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%;