basic auto tracking

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

diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss
new file mode 100644 (file)
index 0000000..06f1577
--- /dev/null
+++ b/resources/sass/tracker.scss
@@ -0,0 +1,130 @@
+.tracker {
+       .count-display {
+               background: black;
+               font-weight: bold;
+               text-align: center;
+       }
+       .dungeon {
+               display: flex;
+               flex-direction: row;
+               align-items: stretch;
+               justify-content: flex-start;
+               gap: 1ex;
+               > * {
+                       width: 2em;
+                       height: 2em;
+               }
+               .dungeon-smalls .count-display,
+               .dungeon-tag {
+                       background: black;
+                       font-family: monospace;
+                       font-size: 115%;
+                       font-weight: bold;
+                       text-align: center;
+               }
+               .dungeon-checks,
+               .dungeon-smalls {
+                       position: relative;
+                       .count-display {
+                               pointer-events: none;
+                               position: absolute;
+                               top: .3ex;
+                               left: .3ex;
+                               bottom: .3ex;
+                               right: .3ex;
+                               &.is-zero {
+                                       display: none;
+                               }
+                       }
+               }
+       }
+       .dungeon-ep,
+       .dungeon-pd {
+               margin-top: 1ex;
+       }
+       .equipment {
+               display: grid;
+               grid-template-columns: 3em 3em 3em 3em 3em;
+               gap: 1ex;
+               padding: 1ex;
+       }
+       .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 {
+                       pointer-events: none;
+                       &.is-zero {
+                               display: none;
+                       }
+               }
+       }
+       .toggle-icon {
+               &.inactive {
+                       opacity: .5;
+               }
+       }
+       .tracker-toolbar {
+               .toggle-icon {
+                       display: inline-block;
+                       width: 2em;
+                       height: 2em;
+               }
+       }
+       .zelda-icon {
+               width: 100%;
+               height: 100%;
+       }
+}