MediaWiki:Common.css: Difference between revisions

/* CSS placed here will be applied to all skins */

@media (min-width: 875px) {
  .article-box-container {
    display: flex;
    justify-content: space-evenly;
  }
}

.article-box {
  flex: 1;
  border-width: 1px;
  border-style: solid;
  margin: 5px;
}

.article-box div:not(.mw-heading),
.article-box ul {
  margin: 0px 15px 10px 15px;
}

.article-box .mw-heading {
  margin-top: 5px;
}

.article-box h2 {
  border-width: 1px;
  border-style: solid;
  margin: 0.3em 0.5em;
  padding: 0.1em 0.5em;
  font-size: 120%;
  font-weight: bold;
  font-family: inherit;
}

:root.skin-theme-clientpref-day {
  /* RED */
  --article-red-light: rgb(255, 225, 225);
  --article-red-mid: rgb(240, 160, 160);
  --article-red-dark: rgb(200, 40, 40);

  /* ORANGE */
  --article-orange-light: rgb(251, 233, 231);
  --article-orange-mid: rgb(255, 171, 145);
  --article-orange-dark: rgb(255, 112, 67);

  /* GREEN */
  --article-green-light: rgb(232, 245, 233);
  --article-green-mid: rgb(165, 214, 167);
  --article-green-dark: rgb(102, 187, 106);

  /* BLUE */
  --article-blue-light: rgb(227, 242, 253);
  --article-blue-mid: rgb(144, 202, 249);
  --article-blue-dark: rgb(66, 165, 245);

  /* PURPLE */
  --article-purple-light: rgb(237, 231, 246);
  --article-purple-mid: rgb(179, 157, 219);
  --article-purple-dark: rgb(126, 87, 194);
}

:root.skin-theme-clientpref-night {
  --article-red-light: rgb(60, 20, 20);
  --article-red-mid: rgb(120, 40, 40);
  --article-red-dark: rgb(200, 60, 60);

  --article-orange-light: rgb(60, 30, 20);
  --article-orange-mid: rgb(140, 80, 50);
  --article-orange-dark: rgb(200, 90, 50);

  --article-green-light: rgb(20, 40, 25);
  --article-green-mid: rgb(60, 120, 70);
  --article-green-dark: rgb(100, 160, 100);

  --article-blue-light: rgb(15, 30, 45);
  --article-blue-mid: rgb(60, 120, 170);
  --article-blue-dark: rgb(90, 150, 200);

  --article-purple-light: rgb(30, 20, 45);
  --article-purple-mid: rgb(100, 70, 150);
  --article-purple-dark: rgb(140, 90, 190);
}

@media screen and (prefers-color-scheme:light) {
  :root.skin-theme-clientpref-os {
    /* RED */
    --article-red-light: rgb(255, 225, 225);
    --article-red-mid: rgb(240, 160, 160);
    --article-red-dark: rgb(200, 40, 40);

    /* ORANGE */
    --article-orange-light: rgb(251, 233, 231);
    --article-orange-mid: rgb(255, 171, 145);
    --article-orange-dark: rgb(255, 112, 67);

    /* GREEN */
    --article-green-light: rgb(232, 245, 233);
    --article-green-mid: rgb(165, 214, 167);
    --article-green-dark: rgb(102, 187, 106);

    /* BLUE */
    --article-blue-light: rgb(227, 242, 253);
    --article-blue-mid: rgb(144, 202, 249);
    --article-blue-dark: rgb(66, 165, 245);

    /* PURPLE */
    --article-purple-light: rgb(237, 231, 246);
    --article-purple-mid: rgb(179, 157, 219);
    --article-purple-dark: rgb(126, 87, 194);
  }
}

@media screen and (prefers-color-scheme:dark) {
  :root.skin-theme-clientpref-os {
    --article-red-light: rgb(60, 20, 20);
    --article-red-mid: rgb(120, 40, 40);
    --article-red-dark: rgb(200, 60, 60);

    --article-orange-light: rgb(60, 30, 20);
    --article-orange-mid: rgb(140, 80, 50);
    --article-orange-dark: rgb(200, 90, 50);

    --article-green-light: rgb(20, 40, 25);
    --article-green-mid: rgb(60, 120, 70);
    --article-green-dark: rgb(100, 160, 100);

    --article-blue-light: rgb(15, 30, 45);
    --article-blue-mid: rgb(60, 120, 170);
    --article-blue-dark: rgb(90, 150, 200);

    --article-purple-light: rgb(30, 20, 45);
    --article-purple-mid: rgb(100, 70, 150);
    --article-purple-dark: rgb(140, 90, 190);
  }
}

/* RED */
.article-box-red,
.article-box-red.article-box div {
  background-color: var(--article-red-light);
  border-color: var(--article-red-mid);
}

.article-box-red h2 {
  background-color: var(--article-red-mid);
  border-color: var(--article-red-dark);
}

/* ORANGE */
.article-box-orange,
.article-box-orange.article-box div {
  background-color: var(--article-orange-light);
  border-color: var(--article-orange-mid);
}

.article-box-orange h2 {
  background-color: var(--article-orange-mid);
  border-color: var(--article-orange-dark);
}

/* GREEN */
.article-box-green,
.article-box-green.article-box div {
  background-color: var(--article-green-light);
  border-color: var(--article-green-mid);
}

.article-box-green h2 {
  background-color: var(--article-green-mid);
  border-color: var(--article-green-dark);
}

/* BLUE */
.article-box-blue,
.article-box-blue.article-box div {
  background-color: var(--article-blue-light);
  border-color: var(--article-blue-mid);
}

.article-box-blue h2 {
  background-color: var(--article-blue-mid);
  border-color: var(--article-blue-dark);
}

/* PURPLE */
.article-box-purple,
.article-box-purple.article-box div {
  background-color: var(--article-purple-light);
  border-color: var(--article-purple-mid);
}

.article-box-purple h2 {
  background-color: var(--article-purple-mid);
  border-color: var(--article-purple-dark);
}