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