resources/sass/tracker.scss

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