Template:Version/styles.css

/* [[Category:CSS from Wikimedia]] */
.version-legend {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
}

.version-legend-vertical {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4px;
  flex-direction: column;
}

.version-legend .legend-item,
.version-legend-vertical .legend-item {
  page-break-inside: avoid;
  break-inside: avoid-column;
  gap: 4px;
}

.version-legend .legend-item .swatch,
.version-legend-vertical .legend-item .swatch {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  border: 1px solid #aaa;
  margin-top: 1px;
}

/* Colors */
.swatch-unsupported {
  background-color: #fdb3ab;
}
.swatch-maintained {
  background-color: #fef8c6;
}
.swatch-latest {
  background-color: #d4f4b4;
}
.swatch-preview {
  background-color: #fed1a0;
}
.swatch-future {
  background-color: #c1e6f5;
}

/* Dark mode colors */
@media screen {
  html.skin-theme-clientpref-night .version-legend .legend-item .swatch,
  html.skin-theme-clientpref-night
    .version-legend-vertical
    .legend-item
    .swatch {
    border-color: #72777d;
  }

  html.skin-theme-clientpref-night .swatch-unsupported {
    background-color: #421511;
  }
  html.skin-theme-clientpref-night .swatch-maintained {
    background-color: #443f19;
  }
  html.skin-theme-clientpref-night .swatch-latest {
    background-color: #2b4115;
  }
  html.skin-theme-clientpref-night .swatch-preview {
    background-color: #4b3114;
  }
  html.skin-theme-clientpref-night .swatch-future {
    background-color: #143b4b;
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .version-legend .legend-item .swatch,
  html.skin-theme-clientpref-os .version-legend-vertical .legend-item .swatch {
    border-color: #72777d;
  }

  html.skin-theme-clientpref-os .swatch-unsupported {
    background-color: #421511;
  }
  html.skin-theme-clientpref-os .swatch-maintained {
    background-color: #443f19;
  }
  html.skin-theme-clientpref-os .swatch-latest {
    background-color: #2b4115;
  }
  html.skin-theme-clientpref-os .swatch-preview {
    background-color: #4b3114;
  }
  html.skin-theme-clientpref-os .swatch-future {
    background-color: #143b4b;
  }
}