resources/sass/map.scss

   1 .map-pin {
   2         path {
   3                 fill: red;
   4                 stroke: black;
   5                 stroke-width: 1px;
   6                 vector-effect: non-scaling-stroke;
   7         }
   8         > a .zelda-icon {
   9                 height: 1em;
  10                 width: 1em;
  11         }
  12 }
  13
  14 .map-popover {
  15         position: absolute;
  16         width: 40vw;
  17         min-width: 20em;
  18
  19         &.hidden {
  20                 display: none;
  21         }
  22
  23         .tech-title-icons {
  24                 margin-right: 1ex;
  25         }
  26 }
  27
  28 .pin-list {
  29         margin: 1em 0;
  30         padding: 0;
  31         list-style: none;
  32
  33         li {
  34                 margin: 1ex 0;
  35                 padding: 1ex;
  36                 border-top: thin solid silver;
  37         }
  38
  39         h2 > a, h3 > a {
  40                 text-decoration: none;
  41         }
  42 }
  43
  44 .uw-super-tiles {
  45         display: grid;
  46         height: 100%;
  47         grid-template-columns: repeat(16, 1fr);
  48
  49         > div {
  50                 position: relative;
  51                 border: thin solid black;
  52                 padding: .25ex;
  53
  54                 &.dark {
  55                         border: medium solid black;
  56                 }
  57                 &.kick {
  58                         border: medium solid yellow;
  59                 }
  60                 &.weak-eg {
  61                         border: medium solid orange;
  62                 }
  63                 &.strong-eg {
  64                         border: medium solid green;
  65                 }
  66
  67                 &::before,
  68                 &::after {
  69                         position: absolute;
  70                         top: 0;
  71                         left: 0;
  72                         width: 100%;
  73                         height: 100%;
  74                         pointer-events: none;
  75                 }
  76
  77                 &.cam-x::before {
  78                         content: '';
  79                         height: 50%;
  80                         border-bottom: thin solid cyan;
  81                 }
  82                 &.cam-xl::before {
  83                         content: '';
  84                         position: absolute;
  85                         width: 50%;
  86                         height: 50%;
  87                         border-bottom: thin solid cyan;
  88                 }
  89                 &.cam-xr::before {
  90                         content: '';
  91                         position: absolute;
  92                         left: 50%;
  93                         width: 50%;
  94                         height: 50%;
  95                         border-bottom: thin solid cyan;
  96                 }
  97                 &.cam-y::after {
  98                         content: '';
  99                         position: absolute;
 100                         width: 50%;
 101                         border-right: thin solid cyan;
 102                 }
 103                 &.cam-yu::after {
 104                         content: '';
 105                         position: absolute;
 106                         width: 50%;
 107                         height: 50%;
 108                         border-right: thin solid cyan;
 109                 }
 110                 &.cam-yd::after {
 111                         content: '';
 112                         position: absolute;
 113                         top: 50%;
 114                         width: 50%;
 115                         height: 50%;
 116                         border-right: thin solid cyan;
 117                 }
 118         }
 119
 120         .cell-id,
 121         .cell-drop {
 122                 margin: 0;
 123                 line-height: 1;
 124         }
 125         .cell-drop {
 126                 font-size: 80%;
 127         }
 128         .cell-link {
 129                 color: inherit;
 130                 cursor: pointer;
 131                 text-decoration: none;
 132         }
 133 }