Template:ClusterMap/style.css

/**
 * Each of the colour pairs we use has the same saturation, lightness, and alpha as the other pairs on the page.
 * The color pairs vary only in their hue.
 *
 * - Dark:  hsl(HUE, 100%, 35%)
 * - Light: hsla(HUE, 100%, 75%, 0.25)
 *
 * Hues:
 * - Codfw = 120 Green
 * - Eqiad = 210 Blue
 * - Eqsin = 270 Purple
 * - Drmrs = 352 Red (+10% lightness correction)
 * - Esams =  23 Orange (+10% lightness correction)
 * - Ulsfo =  50 Yellow (+10% lightness correction, +0.10 2nd-shadow-lightness correction)
 *
 * For harmony and visual muscle memory, try to keep these in sync with overview graphs:
 * - https://grafana.wikimedia.org/d/000000066/resourceloader
 * - https://grafana.wikimedia.org/d/000000093/varnish-traffic
 */
.tpl-clustermap-dc {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  text-align: center;
  background: #a2a9b1; /* default for inactive DCs and as fallback for browsers without HSL support. */
}
.tpl-clustermap-dc .mw-selflink::before {
  background: #a2a9b1;
}
.tpl-clustermap-dc--eqiad {
  background: hsl(210, 100%, 35%);
  box-shadow: 0px 0px 0px 20px hsla(210, 100%, 75%, 0.4),
              0px 0px 0px 30px hsla(210, 100%, 75%, 0.2),
              0px 0px 0px 40px hsla(210, 100%, 75%, 0.2);
}
.tpl-clustermap-dc--eqiad .mw-selflink::before {
  background: hsl(210, 100%, 35%);
  box-shadow: 0px 0px 0px 25px hsla(210, 100%, 75%, 0.2);
}
.tpl-clustermap-dc--codfw {
  background: hsl(120, 100%, 35%);
  box-shadow: 0px 0px 0px 20px hsla(120, 100%, 75%, 0.4),
              0px 0px 0px 30px hsla(120, 100%, 75%, 0.2),
              0px 0px 0px 40px hsla(120, 100%, 75%, 0.2);
}
.tpl-clustermap-dc--codfw .mw-selflink::before {
  background: hsl(120, 100%, 35%);
  box-shadow: 0px 0px 0px 25px hsla(120, 100%, 75%, 0.2);
}
.tpl-clustermap-dc--esams {
  z-index: 1;
  background: hsl(23, 100%, 45%);
  box-shadow: 0px 0px 0px 20px hsla(23, 100%, 75%, 0.4),
              0px 0px 0px 30px hsla(23, 100%, 75%, 0.2),
              0px 0px 0px 40px hsla(23, 100%, 75%, 0.2);
}
.tpl-clustermap-dc--esams .mw-selflink::before {
  background: hsl(23, 100%, 45%);
  box-shadow: 0px 0px 0px 25px hsla(23, 100%, 75%, 0.2);
}
.tpl-clustermap-dc--ulsfo {
  background: hsl(50, 100%, 45%);
  box-shadow: 0px 0px 0px 10px hsla(50, 100%, 75%, 0.4),
              0px 0px 0px 20px hsla(50, 100%, 75%, 0.3),
              0px 0px 0px 30px hsla(50, 100%, 75%, 0.2);
}
.tpl-clustermap-dc--ulsfo .mw-selflink::before {
  background: hsl(50, 100%, 45%);
  box-shadow: 0px 0px 0px 25px hsla(50, 100%, 75%, 0.2);
}
.tpl-clustermap-dc--eqsin {
  background: hsl(270, 100%, 35%);
  box-shadow: 0px 0px 0px 20px hsla(270, 100%, 75%, 0.4),
              0px 0px 0px 30px hsla(270, 100%, 75%, 0.2),
              0px 0px 0px 40px hsla(270, 100%, 75%, 0.2);
}
.tpl-clustermap-dc--eqsin .mw-selflink::before {
  background: hsl(270, 100%, 35%);
  box-shadow: 0px 0px 0px 25px hsla(270, 100%, 75%, 0.2);
}
.tpl-clustermap-dc--drmrs {
  background: hsl(352, 100%, 45%);
  box-shadow: 0px 0px 0px 20px hsla(352, 100%, 75%, 0.4),
              0px 0px 0px 30px hsla(352, 100%, 75%, 0.2),
              0px 0px 0px 40px hsla(352, 100%, 75%, 0.2);
}
.tpl-clustermap-dc--drmrs .mw-selflink::before {
  background: hsl(352, 100%, 35%);
  box-shadow: 0px 0px 0px 25px hsla(352, 100%, 75%, 0.2);
}


.tpl-clustermap {
  position: relative;
}


.tpl-clustermap-label {
  position: absolute;
  text-decoration: inherit;
  text-shadow: /* improve readability */
    -1px -1px 5px #fff, 1px -1px 5px #fff,
    -1px 1px 5px #fff, 1px 1px 5px #fff; 
}
.tpl-clustermap-label--top {
  bottom: 100%;
}
.tpl-clustermap-label--bottom {
  top: 100%;
}
.tpl-clustermap-label--left {
  right: 100%;
}
.tpl-clustermap-label--right {
  left: 100%;
}


.tpl-clustermap-info {
  position: absolute;
  bottom: 0;
  right: 0;
}


.tpl-clustermap--minimap .tpl-clustermap-dc {
  box-shadow: none;
  background: none;
  border: 1px solid #54595d;
  margin-left: -5px;
  margin-top: -5px;
}
.tpl-clustermap--minimap .tpl-clustermap-dc .mw-selflink::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  position: absolute;
  border-radius: 100%;
  top: -1px;
  left: -1px;
}

.tpl-clustermap--minimap .tpl-clustermap-label {
  font-weight: normal;
  line-height: 1;
  font-size: 12px;
  text-shadow: -2px -2px 2px #fff, 0px -2px 2px #fff, 2px -2px 2px #fff, 0px -2px 2px #fff, 0px 2px 2px #fff, 2px -2px 2px #fff, 2px 0px 2px #fff, 2px 2px 2px #fff; /* white border around text for readability */
}
.tpl-clustermap--minimap .mw-selflink .tpl-clustermap-label {
  font-weight: bold;
}