resources/sass/tracker.scss

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