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