Шаблон: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, and as fallback for missing HSL support. */
}
.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);
  z-index: 1;
}
.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--esams {
  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);
  z-index: 1;
}
.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--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--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-label {
  position: absolute;
  text-decoration: inherit;
  text-shadow: 0px 0px 5px #fff; /* improve readability */
}
.tpl-clustermap-label--top {
  bottom: 100%;
}
.tpl-clustermap-label--bottom {
  top: 100%;
}
.tpl-clustermap-label--left {
  right: 100%;
}
.tpl-clustermap-label--right {
  left: 100%;
}