resources/sass/tracker.scss

   1 .tracker {
   2         display: flex;
   3         flex-direction: column;
   4         height: 100vh;
   5         align-items: stretch;
   6         justify-content: flex-start;
   7
   8         .auto-tracking {
   9                 .custom-toggle {
  10                         vertical-align: middle;
  11                 }
  12         }
  13         .canvas {
  14                 width: 100%;
  15                 height: auto;
  16                 max-height: 100%;
  17         }
  18         .dungeons {
  19                 .count-display,
  20                 .dungeon-tag {
  21                         font-size: 0.5px;
  22                         font-weight: bold;
  23                         fill: white;
  24                         stroke: black;
  25                         stroke-width: 0.25px;
  26                         stroke-linejoin: round;
  27                         paint-order: stroke fill;
  28                         dominant-baseline: middle;
  29                         text-anchor: middle;
  30                         pointer-events: none;
  31                         user-select: none;
  32                         &.is-zero {
  33                                 display: none;
  34                         }
  35                         &.is-full {
  36                                 fill: green;
  37                         }
  38                 }
  39                 .count-display {
  40                         font-size: 0.65px;
  41                 }
  42         }
  43         .items {
  44                 .med-display {
  45                         font-size: 0.3px;
  46                         font-weight: bold;
  47                         fill: white;
  48                         stroke: black;
  49                         stroke-width: 0.15px;
  50                         stroke-linejoin: round;
  51                         paint-order: stroke fill;
  52                         pointer-events: none;
  53                         &.bottom-left {
  54                                 transform: translate(-0.5px, 0.4px);
  55                         }
  56                         &.bottom-right {
  57                                 transform: translate(0.1px, 0.4px);
  58                         }
  59                 }
  60         }
  61         .tracker-map {
  62                 .location {
  63                         .box {
  64                                 width: 0.04px;
  65                                 height: 0.04px;
  66                                 transform: translate(-0.02px, -0.02px);
  67                                 fill: #0d0;
  68                                 stroke: black;
  69                                 stroke-width: 1px;
  70                                 vector-effect: non-scaling-stroke;
  71                         }
  72                         .text {
  73                                 fill: black;
  74                                 font-size: 0.02px;
  75                                 font-weight: bold;
  76                                 text-anchor: middle;
  77                                 dominant-baseline: middle;
  78                                 pointer-events: none;
  79                                 user-select: none;
  80                         }
  81                         &.status-cleared {
  82                                 .box {
  83                                         fill: grey;
  84                                         opacity: 0.4;
  85                                 }
  86                         }
  87                         &.status-partial {
  88                                 .box {
  89                                         fill: yellow;
  90                                 }
  91                         }
  92                         &.status-unavailable {
  93                                 .box {
  94                                         fill: red;
  95                                 }
  96                         }
  97                         &.size-lg {
  98                                 .box {
  99                                         width: 0.08px;
 100                                         height: 0.08px;
 101                                         transform: translate(-0.04px, -0.04px);
 102                                 }
 103                                 .text {
 104                                         font-size: 0.04px;
 105                                 }
 106                         }
 107                         &.clickable {
 108                                 .box:hover {
 109                                         stroke: white;
 110                                 }
 111                         }
 112                 }
 113         }
 114         .toggle-icon {
 115                 &.inactive {
 116                         opacity: .5;
 117                 }
 118         }
 119         .tracker-toolbar {
 120                 label .zelda-icon,
 121                 .toggle-icon {
 122                         display: inline-block;
 123                         width: 2em;
 124                         height: 2em;
 125                 }
 126                 .form-select {
 127                         background-image: none;
 128                         padding-right: 0.75rem;
 129                         border: none;
 130                 }
 131         }
 132         .zelda-icon {
 133                 width: 100%;
 134                 height: 100%;
 135         }
 136 }