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