Template:Color box/styles.css: Difference between revisions

.color-box {
  border-radius: 4px;
  padding: 0.75em 1em;
  margin: 0.5em 0;
  border: 1px solid transparent;
  font-size: 95%;
}

/* Light theme */
.color-box--green    { background:#e6f4ea; color:#0a5c2a; border-color:#b7e1c0; }
.color-box--turquoise{ background:#e0f7f9; color:#006b6b; border-color:#b3e6ea; }
.color-box--blue     { background:#e6f0ff; color:#0645ad; border-color:#c0d4ff; }
.color-box--yellow   { background:#fff8d6; color:#7a5a00; border-color:#f2e2a0; }
.color-box--red      { background:#ffe6e6; color:#b00020; border-color:#f5b3b3; }
.color-box--brown    { background:#f3e6dc; color:#5b3b1f; border-color:#d9bda3; }
.color-box--purple   { background:#f1e6ff; color:#5b2b8a; border-color:#d3b8ff; }

/* Dark theme */
@media (prefers-color-scheme: dark) {
  .color-box--green    { background:#0f2d1f; color:#b5f7c8; border-color:#1f5a37; }
  .color-box--turquoise{ background:#062b30; color:#9df2f2; border-color:#0f5a61; }
  .color-box--blue     { background:#0a1c33; color:#a9c7ff; border-color:#234a7a; }
  .color-box--yellow   { background:#2f2804; color:#ffeaa0; border-color:#7a6510; }
  .color-box--red      { background:#2f0c0f; color:#ffb3b8; border-color:#7a1f26; }
  .color-box--brown    { background:#24170f; color:#e2c3a3; border-color:#5b3b24; }
  .color-box--purple   { background:#1f102d; color:#d7b8ff; border-color:#4f2f7a; }
}