resources/sass/tracker.scss

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