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                         }
  45                 }
  46         }
  47         .dungeons {
  48                 padding: 1ex;
  49         }
  50         .dungeon-ep,
  51         .dungeon-pd {
  52                 margin-top: 1ex;
  53         }
  54         .equipment {
  55                 display: grid;
  56                 grid-template-columns: 3em 3em 3em 3em 3em;
  57                 gap: 1ex;
  58                 padding: 1ex;
  59         }
  60         .inventory {
  61                 font-size: 110%;
  62         }
  63         .items {
  64                 display: grid;
  65                 grid-template-columns: 3em 3em 3em 3em 3em;
  66                 gap: 1ex;
  67                 padding: 1ex;
  68         }
  69         .item {
  70                 position: relative;
  71                 width: 3em;
  72                 height: 3em;
  73
  74                 .bottom-left,
  75                 .bottom-right,
  76                 .top-left,
  77                 .top-right {
  78                         position: absolute;
  79                         width: 50%;
  80                         height: 50%;
  81                         .zelda-icon {
  82                                 transform: scale(1.4);
  83                         }
  84                 }
  85                 .bottom-left {
  86                         bottom: 0;
  87                         left: 0;
  88                 }
  89                 .bottom-right {
  90                         bottom: 0;
  91                         right: 0;
  92                 }
  93                 .top-left {
  94                         top: 0;
  95                         left: 0;
  96                 }
  97                 .top-right {
  98                         top: 0;
  99                         right: 0;
 100                 }
 101
 102                 .left,
 103                 .right {
 104                         position: absolute;
 105                         width: 50%;
 106                         height: 100%;
 107                         overflow: hidden;
 108                         .zelda-icon {
 109                                 width: 200%;
 110                                 margin-left: -50%;
 111                         }
 112                 }
 113                 .left {
 114                         left: 0;
 115                 }
 116                 .right {
 117                         right: 0;
 118                 }
 119                 .count-display,
 120                 .med-display {
 121                         pointer-events: none;
 122                         &.is-zero {
 123                                 display: none;
 124                         }
 125                 }
 126                 .med-display {
 127                         height: 30%;
 128                         font-size: 80%;
 129                         line-height: 1;
 130                 }
 131         }
 132         .tracker-map {
 133                 .canvas {
 134                         width: 100%;
 135                         height: auto;
 136                         .location {
 137                                 .box {
 138                                         width: 0.04px;
 139                                         height: 0.04px;
 140                                         transform: translate(-0.02px, -0.02px);
 141                                         fill: #0d0;
 142                                         stroke: black;
 143                                         stroke-width: 1px;
 144                                         vector-effect: non-scaling-stroke;
 145                                 }
 146                                 .text {
 147                                         fill: black;
 148                                         font-size: 0.02px;
 149                                         font-weight: bold;
 150                                         text-anchor: middle;
 151                                         dominant-baseline: middle;
 152                                         pointer-events: none;
 153                                         user-select: none;
 154                                 }
 155                                 &.status-cleared {
 156                                         .box {
 157                                                 fill: grey;
 158                                                 opacity: 0.4;
 159                                         }
 160                                 }
 161                                 &.size-lg {
 162                                         .box {
 163                                                 width: 0.08px;
 164                                                 height: 0.08px;
 165                                                 transform: translate(-0.04px, -0.04px);
 166                                         }
 167                                         .text {
 168                                                 font-size: 0.04px;
 169                                         }
 170                                 }
 171                                 &.clickable {
 172                                         .box:hover {
 173                                                 stroke: white;
 174                                         }
 175                                 }
 176                         }
 177                 }
 178         }
 179         .toggle-icon {
 180                 &.inactive {
 181                         opacity: .5;
 182                 }
 183         }
 184         .tracker-toolbar {
 185                 .toggle-icon {
 186                         display: inline-block;
 187                         width: 2em;
 188                         height: 2em;
 189                 }
 190         }
 191         .zelda-icon {
 192                 width: 100%;
 193                 height: 100%;
 194         }
 195 }