tracker items as svg

[alttp.git] / resources / sass / tracker.scss

diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss
index eae60c3586d0992746148feee5adababa5dc7cec..01704b75f3f69e33ac4c696604798a349bc1a99c 100644 (file)
--- 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%;