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.45px;
  22                         font-weight: bold;
  23                         fill: white;
  24                         stroke: black;
  25                         stroke-width: 0.2px;
  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                         stroke-width: 0.3px;
  42                 }
  43         }
  44         .items {
  45                 .med-display {
  46                         font-size: 0.3px;
  47                         font-weight: bold;
  48                         fill: white;
  49                         stroke: black;
  50                         stroke-width: 0.15px;
  51                         stroke-linejoin: round;
  52                         paint-order: stroke fill;
  53                         pointer-events: none;
  54                         &.bottom-left {
  55                                 transform: translate(-0.5px, 0.4px);
  56                         }
  57                         &.bottom-right {
  58                                 transform: translate(0.1px, 0.4px);
  59                         }
  60                 }
  61         }
  62         .tracker-map {
  63                 .location {
  64                         .box {
  65                                 width: 0.04px;
  66                                 height: 0.04px;
  67                                 transform: translate(-0.02px, -0.02px);
  68                                 fill: #0d0;
  69                                 stroke: black;
  70                                 stroke-width: 1px;
  71                                 vector-effect: non-scaling-stroke;
  72                         }
  73                         .text {
  74                                 fill: black;
  75                                 font-size: 0.02px;
  76                                 font-weight: bold;
  77                                 text-anchor: middle;
  78                                 dominant-baseline: middle;
  79                                 pointer-events: none;
  80                                 user-select: none;
  81                         }
  82                         &.status-cleared {
  83                                 .box {
  84                                         fill: grey;
  85                                         opacity: 0.4;
  86                                 }
  87                         }
  88                         &.status-partial {
  89                                 .box {
  90                                         fill: yellow;
  91                                 }
  92                         }
  93                         &.status-unavailable {
  94                                 .box {
  95                                         fill: red;
  96                                 }
  97                         }
  98                         &.size-lg {
  99                                 .box {
 100                                         width: 0.08px;
 101                                         height: 0.08px;
 102                                         transform: translate(-0.04px, -0.04px);
 103                                 }
 104                                 .text {
 105                                         font-size: 0.04px;
 106                                 }
 107                         }
 108                         &.clickable {
 109                                 .box:hover {
 110                                         stroke: white;
 111                                 }
 112                         }
 113                 }
 114         }
 115         .toggle-icon {
 116                 &.inactive {
 117                         opacity: .5;
 118                 }
 119         }
 120         .tracker-toolbar {
 121                 label .zelda-icon,
 122                 .toggle-icon {
 123                         display: inline-block;
 124                         width: 2em;
 125                         height: 2em;
 126                 }
 127                 .form-select {
 128                         background-image: none;
 129                         padding-right: 0.75rem;
 130                         border: none;
 131                 }
 132         }
 133         .zelda-icon {
 134                 width: 100%;
 135                 height: 100%;
 136         }
 137 }