You are browsing a read-only backup copy of Wikitech. The primary site can be found at wikitech.wikimedia.org

Template:ClusterMap/style.css: Difference between revisions

From Wikitech-static
Jump to navigation Jump to search
imported>Krinkle
No edit summary
imported>Krinkle
No edit summary
Line 23: Line 23:
   border-radius: 50%;
   border-radius: 50%;
   text-align: center;
   text-align: center;
   background: #a2a9b1; /* default, and as fallback for missing HSL support. */
   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 {
.tpl-clustermap-dc--eqiad {
Line 32: Line 35:
}
}
.tpl-clustermap-dc--eqiad .mw-selflink::before {
.tpl-clustermap-dc--eqiad .mw-selflink::before {
   background: hsla(210, 100%, 75%, 0.2);
   background: hsl(210, 100%, 35%);
  box-shadow: 0px 0px 0px 25px hsla(210, 100%, 75%, 0.2);
}
}
.tpl-clustermap-dc--codfw {
.tpl-clustermap-dc--codfw {
Line 41: Line 45:
}
}
.tpl-clustermap-dc--codfw .mw-selflink::before {
.tpl-clustermap-dc--codfw .mw-selflink::before {
   background: hsla(120, 100%, 75%, 0.2);
   background: hsl(120, 100%, 35%);
  box-shadow: 0px 0px 0px 25px hsla(120, 100%, 75%, 0.2);
}
}
.tpl-clustermap-dc--esams {
.tpl-clustermap-dc--esams {
Line 51: Line 56:
}
}
.tpl-clustermap-dc--esams .mw-selflink::before {
.tpl-clustermap-dc--esams .mw-selflink::before {
   background: hsla(23, 100%, 75%, 0.2);
   background: hsl(23, 100%, 45%);
  box-shadow: 0px 0px 0px 25px hsla(23, 100%, 75%, 0.2);
}
}
.tpl-clustermap-dc--ulsfo {
.tpl-clustermap-dc--ulsfo {
Line 60: Line 66:
}
}
.tpl-clustermap-dc--ulsfo .mw-selflink::before {
.tpl-clustermap-dc--ulsfo .mw-selflink::before {
   background: hsla(50, 100%, 75%, 0.2);
   background: hsl(50, 100%, 45%);
  box-shadow: 0px 0px 0px 25px hsla(50, 100%, 75%, 0.2);
}
}
.tpl-clustermap-dc--eqsin {
.tpl-clustermap-dc--eqsin {
Line 69: Line 76:
}
}
.tpl-clustermap-dc--eqsin .mw-selflink::before {
.tpl-clustermap-dc--eqsin .mw-selflink::before {
   background: hsla(270, 100%, 75%, 0.2);
   background: hsl(270, 100%, 35%);
  box-shadow: 0px 0px 0px 25px hsla(270, 100%, 75%, 0.2);
}
}
.tpl-clustermap-dc--drmrs {
.tpl-clustermap-dc--drmrs {
Line 76: Line 84:
               0px 0px 0px 30px hsla(352, 100%, 75%, 0.2),
               0px 0px 0px 30px hsla(352, 100%, 75%, 0.2),
               0px 0px 0px 40px 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);
}
}


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


Line 128: Line 142:
   line-height: 1;
   line-height: 1;
   font-size: 12px;
   font-size: 12px;
   text-shadow: -1px -1px 1px #fff, 1px 1px 1px #fff;
   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 {
.tpl-clustermap--minimap .mw-selflink .tpl-clustermap-label {
   font-weight: bold;
   font-weight: bold;
}
}

Revision as of 17:09, 14 January 2022

/**
 * 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: 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%;
}


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


.tpl-clustermap--minimap .tpl-clustermap-dc {
  box-shadow: none;
  background: none;
  border: 1px solid #54595d;
}
.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;
}