MediaWiki:SiteColor.css

/** 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.

/************** /** 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 */ }
 * TABLES   *

/* 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" **/ .site-color-generic { color: var(--site-color-generic, rgb(0, 153, 255)); }

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

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

.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" **/ .site-color-niwa { color: var(--site-color-niwa, rgb(229, 64, 52)); }

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

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

.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, white); }

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" **/ .site-color-oe { color: var(--site-color-oe, rgb(174, 21, 102)); }

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

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

.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, white); }

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" **/ .site-color-sr { color: var(--site-color-sr, rgb(242, 124, 47)); }

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

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

.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" **/ .site-color-so { color: var(--site-color-so, rgb(207, 133, 120)); }

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

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

.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" **/ .site-color-s { color: var(--site-color-s, rgb(170, 220, 0)); }

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

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

.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" **/ .site-color-s2 { color: var(--site-color-s2, rgb(240, 60, 120)); }

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

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

.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" **/ .site-color-color-s3 { color: var(--site-color-s3, rgb(235, 238, 61)); }

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

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

.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" **/ .site-color-default { color: var(--site-color-default, rgb(192, 192, 192)); }

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

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

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