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;
}

.article-box-red,
.article-box-red.article-box div {
  background-color: rgb(255, 225, 225);
  border-color: rgb(240, 160, 160);
}

.article-box-red h2 {
  background-color: rgb(240, 160, 160);
  border-color: rgb(200, 40, 40);
}

.article-box-orange,
.article-box-orange.article-box div {
  background-color: rgb(251, 233, 231);
  border-color: rgb(255, 171, 145);
}

.article-box-orange h2 {
  background-color: rgb(255, 171, 145);
  border-color: rgb(255, 112, 67)
}

.article-box-green,
.article-box-green.article-box div {
  background-color: rgb(232, 245, 233);
  border-color: rgb(165, 214, 167);
}

.article-box-green h2 {
  background-color: rgb(165, 214, 167);
  border-color: rgb(102, 187, 106);
}

.article-box-blue,
.article-box-blue.article-box div {
  background-color: rgb(227, 242, 253);
  border-color: rgb(144, 202, 249);
}

.article-box-blue h2 {
  background-color: rgb(144, 202, 249);
  border-color: rgb(66, 165, 245);
}

.article-box-purple,
.article-box-purple.article-box div {
  background-color: rgb(237, 231, 246);
  border-color: rgb(179, 157, 219);
}

.article-box-purple h2 {
  background-color: rgb(179, 157, 219);
  border-color: rgb(126, 87, 194);
}



:root.skin-theme-clientpref-night {
  
  /* RED */
.article-box-red,
.article-box-red.article-box div {
  background-color: rgb(60, 20, 20) !important;
  border-color: rgb(120, 40, 40);
}

.article-box-red h2 {
  background-color: rgb(120, 40, 40);
  border-color: rgb(200, 60, 60);
}

/* ORANGE */
.article-box-orange,
.article-box-orange.article-box div {
  background-color: rgb(60, 30, 20);
  border-color: rgb(140, 80, 50);
}

.article-box-orange h2 {
  background-color: rgb(140, 80, 50);
  border-color: rgb(200, 90, 50);
}

/* GREEN */
.article-box-green,
.article-box-green.article-box div {
  background-color: rgb(20, 40, 25);
  border-color: rgb(60, 120, 70);
}

.article-box-green h2 {
  background-color: rgb(60, 120, 70);
  border-color: rgb(100, 160, 100);
}

/* BLUE */
.article-box-blue,
.article-box-blue.article-box div {
  background-color: rgb(15, 30, 45);
  border-color: rgb(60, 120, 170);
}

.article-box-blue h2 {
  background-color: rgb(60, 120, 170);
  border-color: rgb(90, 150, 200);
}

/* PURPLE */
.article-box-purple,
.article-box-purple.article-box div {
  background-color: rgb(30, 20, 45);
  border-color: rgb(100, 70, 150);
}

.article-box-purple h2 {
  background-color: rgb(100, 70, 150);
  border-color: rgb(140, 90, 190);
}
}