X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=inline;f=resources%2Fsass%2Ftracker.scss;h=01704b75f3f69e33ac4c696604798a349bc1a99c;hb=1a3d040147c19d24b8d02ec8e594eb06b8efc1ff;hp=eae60c3586d0992746148feee5adababa5dc7cec;hpb=5fe70ee6bc5380c556169756a375956799093604;p=alttp.git diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss index eae60c3..01704b7 100644 --- a/resources/sass/tracker.scss +++ b/resources/sass/tracker.scss @@ -41,6 +41,9 @@ &.is-zero { display: none; } + &.is-full { + color: green; + } } } } @@ -57,76 +60,24 @@ gap: 1ex; padding: 1ex; } - .inventory { - font-size: 110%; - } .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); - } - } - .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; - } - .count-display, + 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; - &.is-zero { - display: none; + &.bottom-left { + transform: translate(-0.5px, 0.4px); + } + &.bottom-right { + transform: translate(0.1px, 0.4px); } - } - .med-display { - height: 30%; - font-size: 80%; - line-height: 1; } } .tracker-map { @@ -158,6 +109,16 @@ opacity: 0.4; } } + &.status-partial { + .box { + fill: yellow; + } + } + &.status-unavailable { + .box { + fill: red; + } + } &.size-lg { .box { width: 0.08px; @@ -182,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%;