MediaWiki:SiteColor.css

Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

• Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
• Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
• Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
• Opera : appuyez sur Ctrl + F5.

/**
This is called from [[MediaWiki:Common.css]] for site usage.
See [[Module:SiteColor/doc]] for up-to-date values in template and module invocations.

NOTE: The editor does not know how to handle CSS variables and will complain
about there being errors when this file is saved. Be sure to double-check your
edits carefully before saving.
*/

/**************
*   TABLES    *
**************/
/** Needs to be here so site color can override below. */
/* wikitable class for skinning tables. default colors are intended for mediawiki-generated tables, like the file history table. other color schemes are available for use in mainspace; see the sitecolor classes below. */
table.wikitable {
  background-color: var(--input, #fff);
  color: var(--input-text, #222);
  margin: 1em 0;
  border-style: solid;
  border-width: 5px 2px;
  border-color: #006400;
  border-collapse: collapse;
  box-shadow: 0 2px 16px rgba(0,0,0,0.25);
  overflow-wrap: normal;  /** Thanks Chromium */
}

/* zebra class intended for use in the inkipedia namespace, for example the staff page. */
table.zebra-inkipedia > tbody > tr:nth-child(odd) > td {
  background-color: var(--ui-main-theme-b, rgba(55, 139, 0, 0.2));  /* green, the same shade used for links but with 20% opacity */
}

table.wikitable > thead > tr > th,
table.wikitable > tbody > tr > th,
table.wikitable > tbody > tr > td {
  border-style: solid;
  border-width: 1px;
  border-color: var(--ui-main-theme, #006400);
  padding: 0.2em 0.4em;
  overflow-wrap: normal;  /** Thanks Chromium */
}

table.wikitable > thead > tr > th,
table.wikitable > tbody > tr > th {
  background-color: var(--ui-main-theme, #378B00);
  color: var(--input, #fff);
}

table.wikitable > caption {
  font-weight: bold;
}

/**************
* SITE COLORS *
**************/

/** Generic: "0, 153, 255" <!-- #0099FF --> **/
.sitecolor-generic, .site-color-generic {
  color: var(--site-color-generic, rgb(0, 153, 255));
}

.sitecolor-text-generic, .site-color-text-generic {
  color: var(--site-color-text-generic, black);
}

.sitecolor-background-generic, .site-color-background-generic {
  background: var(--site-color-background-generic, rgb(0, 153, 255));
}

.sitecolor-background-shadow-generic, .site-color-background-shadow-generic {
  background: var(--site-color-background-shadow-generic, rgba(0, 153, 255, 0.2));
}

table.sitecolor-generic,
table.sitecolor-generic > thead > tr > th,
table.sitecolor-generic > tbody > tr > th,
table.sitecolor-generic > tbody > tr > td {
  border-color: var(--site-color-generic, rgba(0, 153, 255, 1));
}

table.sitecolor-generic > thead > tr > th,
table.sitecolor-generic > tbody > tr > th {
  background-color: var(--site-color-background-generic, rgba(0, 153, 255, 0.25));
  color: var(--site-color-text-generic, black);
}

/* alternates background colors for rows in zebra-classed tables.
There are even and odd options to select which row changes color first */
table.sitecolor-generic.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-generic.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: var(--site-color-background-b-generic, rgba(0, 153, 255, 0.15));
}

/* vertical zebra stripes */
table.sitecolor-generic.zebra-vert tbody td:nth-child(even) {
  background-color: var(--site-color-background-b-generic, rgba(0, 153, 255, 0.15));
}


/** NIWA: "229, 64, 52" <!-- #E54034 --> **/
.sitecolor-niwa, .site-color-niwa {
  color: var(--site-color-niwa, rgb(229, 64, 52));
}

.sitecolor-text-niwa, .site-color-text-niwa {
  color: var(--site-color-text-niwa, white);
}

.sitecolor-background-niwa, .site-color-background-niwa {
  background: var(--site-color-background-niwa, rgb(229, 64, 52));
}

.sitecolor-background-shadow-niwa, .site-color-background-shadow-niwa {
  background: var(--site-color-background-shadow-niwa, rgb(229, 64, 52, 0.2));
}

table.sitecolor-niwa,
table.sitecolor-niwa > thead > tr > th,
table.sitecolor-niwa > tbody > tr > th,
table.sitecolor-niwa > tbody > tr > td {
  border-color: var(--site-color-niwa, rgba(229, 64, 52, 1));
}

table.sitecolor-niwa > thead > tr > th,
table.sitecolor-niwa > tbody > tr > th {
  background-color: var(--site-color-background-niwa, rgba(229, 64, 52, 0.25));
  color: var(--site-color-text-niwa, black);  /* different to the text color! */
}

table.sitecolor-niwa.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-niwa.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: var(--site-color-background-b-niwa, rgba(229, 64, 52, 0.15));
}

table.sitecolor-niwa.zebra-vert tbody td:nth-child(even) {
  background-color: var(--site-color-background-b-niwa, rgba(229, 64, 52, 0.15));
}


/** Octo Expansion: "174, 21, 102" <!-- #AE1566 --> **/
.sitecolor-oe, .site-color-oe {
  color: var(--site-color-oe, rgb(174, 21, 102));
}

.sitecolor-text-oe, .site-color-text-oe {
  color: var(--site-color-text-oe, white);
}

.sitecolor-background-oe, .site-color-background-oe {
  background: var(--site-color-background-oe, rgb(174, 21, 102));
}

.sitecolor-background-shadow-oe, .site-color-background-shadow-oe {
  background: var(--site-color-background-shadow-oe, rgba(174, 21, 102, 0.2));
}

table.sitecolor-oe,
table.sitecolor-oe > thead > tr > th,
table.sitecolor-oe > tbody > tr > th,
table.sitecolor-oe > tbody > tr > td {
  border-color: var(--site-color-oe, rgba(174, 21, 102, 1));
}

table.sitecolor-oe > thead > tr > th,
table.sitecolor-oe > tbody > tr > th {
  background-color: var(--site-color-background-oe, rgba(174, 21, 102, 0.25));
  color: var(--site-color-text-oe, black);  /* different to the text color! */
}

table.sitecolor-oe.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-oe.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: var(--site-color-background-b-oe, rgba(174, 21, 102, 0.15));
}

table.sitecolor-niwa.zebra-vert tbody td:nth-child(even) {
  background-color: var(--site-color-background-b-oe, rgba(174, 21, 102, 0.15));
}


/** Salmon Run: "242, 124, 47" <!-- #F27C2F --> **/
.sitecolor-sr, .site-color-sr {
  color: var(--site-color-sr, rgb(242, 124, 47));
}

.sitecolor-text-sr, .site-color-text-sr {
  color: var(--site-color-text-sr, black);
}

.sitecolor-background-sr, .site-color-background-sr {
  background: var(--site-color-background-sr, rgb(242, 124, 47));
}

.sitecolor-background-shadow-sr, .site-color-background-shadow-sr {
  background: var(--site-color-background-shadow-sr, rgba(242, 124, 47, 0.2));
}

table.sitecolor-sr,
table.sitecolor-sr > thead > tr > th,
table.sitecolor-sr > tbody > tr > th,
table.sitecolor-sr > tbody > tr > td {
  border-color: var(--site-color-sr, rgba(242, 124, 47, 1));
}

table.sitecolor-sr > thead > tr > th,
table.sitecolor-sr > tbody > tr > th {
  background-color: var(--site-color-background-sr, rgba(242, 124, 47, 0.25));
  color: var(--site-color-text-sr, black);
}

table.sitecolor-sr.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-sr.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: var(--site-color-background-b-sr, rgba(242, 124, 47, 0.15));
}

table.sitecolor-niwa.zebra-vert tbody td:nth-child(even) {
  background-color: var(--site-color-background-b-sr, rgba(242, 124, 47, 0.15));
}


/** Side Order: "207, 133, 120" <!-- #CF8578 --> **/
.sitecolor-so, .site-color-so {
  color: var(--site-color-so, rgb(207, 133, 120));
}

.sitecolor-text-so, .site-color-text-so {
  color: var(--site-color-text-so, black);
}

.sitecolor-background-so, .site-color-background-so {
  background: var(--site-color-background-so, rgb(207, 133, 120));
}

.sitecolor-background-shadow-so, .site-color-background-shadow-so {
  background: var(--site-color-background-shadow-so, rgba(207, 133, 120, 0.2));
}

table.sitecolor-so,
table.sitecolor-so > thead > tr > th,
table.sitecolor-so > tbody > tr > th,
table.sitecolor-so > tbody > tr > td {
  border-color: var(--site-color-so, rgba(207, 133, 120, 1));
}

table.sitecolor-so > thead > tr > th,
table.sitecolor-so > tbody > tr > th {
  background-color: var(--site-color-background-so, rgba(207, 133, 120, 0.25));
  color: var(--site-color-text-so, black);
}

table.sitecolor-sr.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-sr.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: var(--site-color-background-b-so, rgba(207, 133, 120, 0.15));
}

table.sitecolor-niwa.zebra-vert tbody td:nth-child(even) {
  background-color: var(--site-color-background-b-so, rgba(207, 133, 120, 0.15));
}


/** Splatoon: "170, 220, 0" <!-- #AADC00 --> **/
.sitecolor-s, .site-color-s {
  color: var(--site-color-s, rgb(170, 220, 0));
}

.sitecolor-text-s, .site-color-text-s {
  color: var(--site-color-text-s, black);
}

.sitecolor-background-s, .site-color-background-s {
  background: var(--site-color-background-s, rgb(170, 220, 0));
}

.sitecolor-background-shadow-s, .site-color-background-shadow-s {
  background: var(--site-color-background-shadow-s, rgba(170, 220, 0, 0.2));
}

table.sitecolor-s,
table.sitecolor-s > thead > tr > th,
table.sitecolor-s > tbody > tr > th,
table.sitecolor-s > tbody > tr > td {
  border-color: var(--site-color-s, rgba(170, 220, 0, 1));
}

table.sitecolor-s > thead > tr > th,
table.sitecolor-s > tbody > tr > th {
  background-color: var(--site-color-background-s, rgba(170, 220, 0, 0.25));
  color: var(--site-color-text-s, black);
}

table.sitecolor-s.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-s.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: var(--site-color-background-b-s, rgba(170, 220, 0, 0.15));
}

table.sitecolor-s.zebra-vert tbody td:nth-child(even) {
  background-color: var(--site-color-background-b-s, rgba(170, 220, 0, 0.15));
}


/** Splatoon 2: "240, 60, 120" <!-- #F03C78 --> **/
.sitecolor-s2, .site-color-s2 {
  color: var(--site-color-s2, rgb(240, 60, 120));
}

.sitecolor-text-s2, .site-color-text-s2 {
  color: var(--site-color-text-s2, white);
}

.sitecolor-background-s2, .site-color-background-s2 {
  background: var(--site-color-background-s2, rgb(240, 60, 120));
}

.sitecolor-background-shadow-s2, .site-color-background-shadow-s2 {
  background: var(--site-color-background-shadow-s2, rgba(240, 60, 120, 0.2));
}

table.sitecolor-s2,
table.sitecolor-s2 > thead > tr > th,
table.sitecolor-s2 > tbody > tr > th,
table.sitecolor-s2 > tbody > tr > td {
  border-color: var(--site-color-s2, rgba(240, 60, 120, 1));
}

table.sitecolor-s2 > thead > tr > th,
table.sitecolor-s2 > tbody > tr > th {
  background-color: var(--site-color-background-s2, rgba(240, 60, 120, 0.25));
  color: var(--site-color-text-s2, black);  /* different to the text color! */
}

table.sitecolor-s2.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-s2.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: var(--site-color-background-b-s2, rgba(240, 60, 120, 0.15));
}

table.sitecolor-s2.zebra-vert tbody td:nth-child(even) {
  background-color: var(--site-color-background-b-s2, rgba(240, 60, 120, 0.15));
}


/** Splatoon 3: "235, 238, 61" <!-- #EBEE3D --> **/
.sitecolor-color-s3, .site-color-color-s3 {
  color: var(--site-color-s3, rgb(235, 238, 61));
}

.sitecolor-text-s3, .site-color-text-s3 {
  color: var(--site-color-text-s3, black);
}

.sitecolor-background-s3, .site-color-background-s3 {
  background: var(--site-color-background-s3, rgb(235, 238, 61));
}

.sitecolor-background-shadow-s3, .site-color-background-shadow-s3 {
  background: var(--site-color-background-shadow-s3, rgba(235, 238, 61, 0.2));
}

table.sitecolor-s3,
table.sitecolor-s3 > thead > tr > th,
table.sitecolor-s3 > tbody > tr > th,
table.sitecolor-s3 > tbody > tr > td {
  border-color: var(--site-color-s3, rgba(235, 238, 61, 1));
}

table.sitecolor-s3 > thead > tr > th,
table.sitecolor-s3 > tbody > tr > th {
  background-color: var(--site-color-background-s3, rgba(235, 238, 61, 0.25));
  color: var(--site-color-text-s3, black);
}

table.sitecolor-s3.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-s3.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: var(--site-color-background-b-s3, rgba(235, 238, 61, 0.15));
}

table.sitecolor-s3.zebra-vert tbody td:nth-child(even) {
  background-color: var(--site-color-background-b-s3, rgba(235, 238, 61, 0.15));
}


/** Default: "192, 192, 192" <!-- #C0C0C0 --> **/
.sitecolor-default, .site-color-default {
  color: var(--site-color-default, rgb(192, 192, 192));
}

.sitecolor-text-default, .site-color-text-default {
  color: var(--site-color-text-default, inherit);
}

.sitecolor-background-default, .site-color-background-default {
  background: var(--site-color-background-default, rgb(192, 192, 192));
}

.sitecolor-background-shadow-default, .site-color-background-shadow-default {
  background: var(--site-color-background-shadow-default, rgba(192, 192, 192, 0.2));
}

table.sitecolor-default,
table.sitecolor-default > thead > tr > th,
table.sitecolor-default > tbody > tr > th,
table.sitecolor-default > tbody > tr > td {
  border-color: var(--site-color-default, rgba(192, 192, 192, 1));
}

table.sitecolor-default > thead > tr > th,
table.sitecolor-default > tbody > tr > th {
  background-color: var(--site-color-background-default, rgba(192, 192, 192, 0.25));
  color: var(--site-color-text-default, black);
}

table.sitecolor-s3.zebra-even > tbody > tr:nth-child(even) > td,
table.sitecolor-s3.zebra-odd > tbody > tr:nth-child(odd) > td {
  background-color: var(--site-color-background-b-default, rgba(192, 192, 192, 0.15));
}

table.sitecolor-s3.zebra-vert tbody td:nth-child(even) {
  background-color: var(--site-color-background-b-default, rgba(192, 192, 192, 0.15));
}