X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fsass%2Ftracker.scss;h=27bd55e9da9f16e6302a623a266a594c3438fd6a;hb=07c9bbbb2c6ddde460f48245699f27eaf66b8ac3;hp=f1b745a0a24c97617f4a8e0a2afd52b2b9871f3b;hpb=f145023c506cecad618e465a034933e1a5962637;p=alttp.git diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss index f1b745a..27bd55e 100644 --- a/resources/sass/tracker.scss +++ b/resources/sass/tracker.scss @@ -1,4 +1,9 @@ .tracker { + .auto-tracking { + .custom-toggle { + vertical-align: middle; + } + } .count-display, .med-display { background: black; @@ -36,9 +41,15 @@ &.is-zero { display: none; } + &.is-full { + color: green; + } } } } + .dungeons { + padding: 1ex; + } .dungeon-ep, .dungeon-pd { margin-top: 1ex; @@ -49,6 +60,9 @@ gap: 1ex; padding: 1ex; } + .inventory { + font-size: 110%; + } .items { display: grid; grid-template-columns: 3em 3em 3em 3em 3em; @@ -120,23 +134,57 @@ } .tracker-map { .canvas { - width: 50em; + width: 100%; height: auto; .location { - width: 0.04px; - height: 0.04px; - fill: green; - stroke: black; - stroke-width: 0.003px; - transform: translate(-0.02px, -0.02px); + .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 { - fill: grey; - opacity: 0.4; + .box { + fill: grey; + opacity: 0.4; + } + } + &.status-partial { + .box { + fill: yellow; + } + } + &.status-unavailable { + .box { + fill: red; + } } &.size-lg { - width: 0.08px; - height: 0.08px; - transform: translate(-0.04px, -0.04px); + .box { + width: 0.08px; + height: 0.08px; + transform: translate(-0.04px, -0.04px); + } + .text { + font-size: 0.04px; + } + } + &.clickable { + .box:hover { + stroke: white; + } } } } @@ -147,11 +195,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%;