tracker layout

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

diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss
index ca20b6342d2893f47c77c694cf2a3ee7020c1df8..cf6cb6df77302212fcdb64902b93f2b04ac017f7 100644 (file)
--- a/resources/sass/tracker.scss
+++ b/resources/sass/tracker.scss
@@ -1,12 +1,21 @@
 .tracker {
+       display: flex;
+       flex-direction: column;
+       height: 100vh;
+       align-items: stretch;
+       justify-content: flex-start;
+
        .auto-tracking {
                .custom-toggle {
                        vertical-align: middle;
                }
        }
-       .dungeons {
+       .canvas {
                width: 100%;
                height: auto;
+               max-height: 100%;
+       }
+       .dungeons {
                .count-display,
                .dungeon-tag {
                        font-size: 0.5px;
@@ -32,8 +41,6 @@
                }
        }
        .items {
-               width: 100%;
-               height: auto;
                .med-display {
                        font-size: 0.3px;
                        font-weight: bold;
@@ -52,58 +59,54 @@
                }
        }
        .tracker-map {
-               .canvas {
-                       width: 100%;
-                       height: auto;
-                       .location {
+               .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 {
-                                       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;
+                                       fill: grey;
+                                       opacity: 0.4;
                                }
-                               &.status-cleared {
-                                       .box {
-                                               fill: grey;
-                                               opacity: 0.4;
-                                       }
+                       }
+                       &.status-partial {
+                               .box {
+                                       fill: yellow;
                                }
-                               &.status-partial {
-                                       .box {
-                                               fill: yellow;
-                                       }
+                       }
+                       &.status-unavailable {
+                               .box {
+                                       fill: red;
                                }
-                               &.status-unavailable {
-                                       .box {
-                                               fill: red;
-                                       }
+                       }
+                       &.size-lg {
+                               .box {
+                                       width: 0.08px;
+                                       height: 0.08px;
+                                       transform: translate(-0.04px, -0.04px);
                                }
-                               &.size-lg {
-                                       .box {
-                                               width: 0.08px;
-                                               height: 0.08px;
-                                               transform: translate(-0.04px, -0.04px);
-                                       }
-                                       .text {
-                                               font-size: 0.04px;
-                                       }
+                               .text {
+                                       font-size: 0.04px;
                                }
-                               &.clickable {
-                                       .box:hover {
-                                               stroke: white;
-                                       }
+                       }
+                       &.clickable {
+                               .box:hover {
+                                       stroke: white;
                                }
                        }
                }