simple logic tracking

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

diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss
index 96da0ae2594f35aa4ab52f0e7886f9b251547fff..c4541e25de993928fd577b3c150c0eb8f214ea1f 100644 (file)
--- 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,16 +134,17 @@
        }
        .tracker-map {
                .canvas {
-                       width: 50em;
+                       width: 100%;
                        height: auto;
                        .location {
                                .box {
                                        width: 0.04px;
                                        height: 0.04px;
-                                       fill: green;
-                                       stroke: black;
-                                       stroke-width: 0.003px;
                                        transform: translate(-0.02px, -0.02px);
+                                       fill: #0d0;
+                                       stroke: black;
+                                       stroke-width: 1px;
+                                       vector-effect: non-scaling-stroke;
                                }
                                .text {
                                        fill: black;
@@ -138,6 +153,7 @@
                                        text-anchor: middle;
                                        dominant-baseline: middle;
                                        pointer-events: none;
+                                       user-select: none;
                                }
                                &.status-cleared {
                                        .box {
@@ -145,6 +161,16 @@
                                                opacity: 0.4;
                                        }
                                }
+                               &.status-partial {
+                                       .box {
+                                               fill: yellow;
+                                       }
+                               }
+                               &.status-unavailable {
+                                       .box {
+                                               fill: red;
+                                       }
+                               }
                                &.size-lg {
                                        .box {
                                                width: 0.08px;
@@ -155,6 +181,11 @@
                                                font-size: 0.04px;
                                        }
                                }
+                               &.clickable {
+                                       .box:hover {
+                                               stroke: white;
+                                       }
+                               }
                        }
                }
        }