resources/sass/tracker.scss

   1 .tracker {
   2         .count-display {
   3                 background: black;
   4                 font-weight: bold;
   5                 text-align: center;
   6         }
   7         .dungeon {
   8                 display: flex;
   9                 flex-direction: row;
  10                 align-items: stretch;
  11                 justify-content: flex-start;
  12                 gap: 1ex;
  13                 > * {
  14                         width: 2em;
  15                         height: 2em;
  16                 }
  17                 .dungeon-smalls .count-display,
  18                 .dungeon-tag {
  19                         background: black;
  20                         font-family: monospace;
  21                         font-size: 115%;
  22                         font-weight: bold;
  23                         text-align: center;
  24                 }
  25                 .dungeon-checks,
  26                 .dungeon-smalls {
  27                         position: relative;
  28                         .count-display {
  29                                 pointer-events: none;
  30                                 position: absolute;
  31                                 top: .3ex;
  32                                 left: .3ex;
  33                                 bottom: .3ex;
  34                                 right: .3ex;
  35                                 &.is-zero {
  36                                         display: none;
  37                                 }
  38                         }
  39                 }
  40         }
  41         .dungeon-ep,
  42         .dungeon-pd {
  43                 margin-top: 1ex;
  44         }
  45         .equipment {
  46                 display: grid;
  47                 grid-template-columns: 3em 3em 3em 3em 3em;
  48                 gap: 1ex;
  49                 padding: 1ex;
  50         }
  51         .items {
  52                 display: grid;
  53                 grid-template-columns: 3em 3em 3em 3em 3em;
  54                 gap: 1ex;
  55                 padding: 1ex;
  56         }
  57         .item {
  58                 position: relative;
  59                 width: 3em;
  60                 height: 3em;
  61
  62                 .bottom-left,
  63                 .bottom-right,
  64                 .top-left,
  65                 .top-right {
  66                         position: absolute;
  67                         width: 50%;
  68                         height: 50%;
  69                         .zelda-icon {
  70                                 transform: scale(1.4);
  71                         }
  72                 }
  73                 .bottom-left {
  74                         bottom: 0;
  75                         left: 0;
  76                 }
  77                 .bottom-right {
  78                         bottom: 0;
  79                         right: 0;
  80                 }
  81                 .top-left {
  82                         top: 0;
  83                         left: 0;
  84                 }
  85                 .top-right {
  86                         top: 0;
  87                         right: 0;
  88                 }
  89
  90                 .left,
  91                 .right {
  92                         position: absolute;
  93                         width: 50%;
  94                         height: 100%;
  95                         overflow: hidden;
  96                         .zelda-icon {
  97                                 width: 200%;
  98                                 margin-left: -50%;
  99                         }
 100                 }
 101                 .left {
 102                         left: 0;
 103                 }
 104                 .right {
 105                         right: 0;
 106                 }
 107                 .count-display {
 108                         pointer-events: none;
 109                         &.is-zero {
 110                                 display: none;
 111                         }
 112                 }
 113         }
 114         .toggle-icon {
 115                 &.inactive {
 116                         opacity: .5;
 117                 }
 118         }
 119         .tracker-toolbar {
 120                 .toggle-icon {
 121                         display: inline-block;
 122                         width: 2em;
 123                         height: 2em;
 124                 }
 125         }
 126         .zelda-icon {
 127                 width: 100%;
 128                 height: 100%;
 129         }
 130 }