MediaWiki:Citizen.css: Difference between revisions

Latest revision as of 23:43, 19 September 2025

/* All CSS here will be loaded for users of the Citizen skin */
.citizen-overflow-wrapper:has(.citizen-overflow-content > .wikitable) { 
  float: right;
  box-shadow: none;
  margin: 0px;
  padding: 0px;
  /* Temporary workaround */
}

.mw-parser-output .home-header::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 4.75rem;
  left: 0;
  right: 0;
  opacity: 0.1;
  background-image: url("/w/resources/assets/starsiege-logo.svg");
  background-repeat: no-repeat;
  background-position: right;
  pointer-events: none;
  
}

.home-header__title__image {
  margin-top: -10px;
}

.invertable img { 
  filter: var( --filter-invert );
}

html.skin-theme-clientpref-day .invertablew img {
  filter: invert(1) hue-rotate(180deg); 
}


html.skin-theme-clientpref-night .invertablew img {
  filter: ;
}

html.skin-theme-clientpref-day .dzr_needs_dark_bg img {
  background-color: #000; 
}

@media screen and (prefers-color-scheme: light) {
	html.skin-theme-clientpref-os .invertablew img {
	  filter: invert(1) hue-rotate(180deg); 
	}

	html.skin-theme-clientpref-os .invertablew img { 
	  filter: ;
	}

	html.skin-theme-clientpref-os .dzr_needs_dark_bg img { 
	  background-color: #000; 
	}
}


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

/* Default style for navigation boxes */
table.navbox {            /* Navbox container style */
    /* border: 1px solid #aaa; */
    border: 1px solid var(--border-color-base);
    border-radius: var(--border-radius--medium);
}
.navbox,
.navbox-subgroup {
    background:  var( --color-surface-2 );      /* Background color */
}
.navbox-list {
    border-color:  var( --color-surface-2 );    /* Must match background color */
}
.navbox th,
.navbox-title {
    /* background:  var( --color-surface-3 ); */      /* Level 1 color */
    background: var(--color-surface-2);
}
.navbox-title-text {
    font-size: var(--font-size-h3);
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
    /*background:  var( --color-surface-4 );*/      /* Level 2 color */
    background-color: var(--color-surface-0);
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background: var( --color-surface-1 );      /* Level 3 color */
}
.navbox-even {
    background: var( --color-surface-2 );      /* Even row striping */
}
.navbox-odd {
    /* background: var( --color-surface-3 ); */   /* Odd row striping */
    background: var( --color-surface-1 );
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
    var(--color-surface-3)
}
/* Infobox template style */
.infobox {
    border: 1px solid var( --border-color-base );
    background-color: var( --border-color-base );
    color: var( --filter-invert );
}

.infobox.bordered td,
.infobox.bordered th {
    border: 1px solid var( --color-base );
}

.infobox.standard-talk {
    border: 1px solid #c0c090;
    background-color: #f8eaba;
}
.infobox.standard-talk.bordered td,
.infobox.standard-talk.bordered th {
    border: 1px solid #c0c090;
}

/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
    border: 0;
    border-top: 1px solid #aaa;
    border-right: 1px solid #aaa;
}

.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
    border: 0;
    border-right: 1px solid #aaa;
}

/* Styles for geography infoboxes, eg countries,
   country subdivisions, cities, etc.            */
.infobox.geography  td,
.infobox.geography  th {
    border-top: 1px solid #aaa;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
    border-top: 1px solid #aaa;
}

.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th {
    border: 0;
}

.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th {
    border-top: 0;
    border-bottom: 1px solid #aaa;
    padding: 0 0.6em 0.4em 0.6em;
}

/* Normal font styling for table row headers with scope="row" tag */

/* Messagebox templates */
.messagebox {
    border: 1px solid #aaa;
    background-color: #f9f9f9;
}
.messagebox.merge {
    border: 1px solid #c0b8cc;
    background-color: #f0e5ff;
}
.messagebox.cleanup {
    border: 1px solid #9f9fff;
    background-color: #efefff;
}
.messagebox.standard-talk {
    border: 1px solid #c0c090;
    background-color: #f8eaba;
}
/* For old WikiProject banners inside banner shells. */
.mbox-inside .standard-talk,
.messagebox.nested-talk {
    border: 1px solid #c0c090;
    background-color: #f8eaba;
}


.messagebox.small-talk {
    background: #F8EABA;
}

/* Article message box styles */
table.ambox {
    border: 1px solid #aaa; 
    /* @noflip */
    border-left: 10px solid #1e90ff;  /* Default "notice" blue */
    background: #fbfbfb; 
}

table.ambox-notice {
    /* @noflip */
    border-left: 10px solid #1e90ff;    /* Blue */
}
table.ambox-speedy {
    /* @noflip */
    border-left: 10px solid #b22222;    /* Red */
    background: #fee;                   /* Pink */
}
table.ambox-delete {
    /* @noflip */
    border-left: 10px solid #b22222;    /* Red */
}
table.ambox-content {
    /* @noflip */
    border-left: 10px solid #f28500;    /* Orange */
}
table.ambox-style {
    /* @noflip */
    border-left: 10px solid #f4c430;    /* Yellow */
}
table.ambox-move {
    /* @noflip */
    border-left: 10px solid #9932cc;    /* Purple */
}
table.ambox-protection {
    /* @noflip */
    border-left: 10px solid #bba;       /* Gray-gold */
}

/* Image message box styles */
table.imbox {
    border: 3px solid #1e90ff;    /* Default "notice" blue */
    background: #fbfbfb;
}

table.imbox-notice {
    border: 3px solid #1e90ff;    /* Blue */
}
table.imbox-speedy {
    border: 3px solid #b22222;    /* Red */
    background: #fee;             /* Pink */
}
table.imbox-delete {
    border: 3px solid #b22222;    /* Red */
}
table.imbox-content {
    border: 3px solid #f28500;    /* Orange */
}
table.imbox-style {
    border: 3px solid #f4c430;    /* Yellow */
}
table.imbox-move {
    border: 3px solid #9932cc;    /* Purple */
}
table.imbox-protection {
    border: 3px solid #bba;       /* Gray-gold */
}
table.imbox-license {
    border: 3px solid #88a;       /* Dark gray */
    background: #f7f8ff;          /* Light gray */
}
table.imbox-featured {
    border: 3px solid #cba135;    /* Brown-gold */
}

/* Category message box styles */
table.cmbox {
    border: 1px solid #aaa; 
    background: #DFE8FF;    /* Default "notice" blue */
}

/* Mainly for VGS pages */
table.reducedpadding {
     padding: 1px var(--space-sm) 1px var(--space-sm)
}

table.alternating tbody tr:nth-child(odd) {
     background: var(--color-surface-2)
}







table.cmbox-notice {
    background: #D8E8FF;    /* Blue */
}
table.cmbox-speedy {
    border: 4px solid #b22222;    /* Red */
    background: #FFDBDB;          /* Pink */
}
table.cmbox-delete {
    background: #FFDBDB;    /* Red */
}
table.cmbox-content {
    background: #FFE7CE;    /* Orange */
}
table.cmbox-style {
    background: #FFF9DB;    /* Yellow */
}
table.cmbox-move {
    background: #E4D8FF;    /* Purple */
}
table.cmbox-protection {
    background: #EFEFE1;    /* Gray-gold */
}

/* Other pages message box styles */
table.ombox {
    border: 1px solid #aaa;       /* Default "notice" gray */
    background: #f9f9f9;
}

table.ombox-notice {
    border: 1px solid #aaa;       /* Gray */
}
table.ombox-speedy {
    border: 2px solid #b22222;    /* Red */
    background: #fee;             /* Pink */
}
table.ombox-delete {
    border: 2px solid #b22222;    /* Red */
}
table.ombox-content {
    border: 1px solid #f28500;    /* Orange */
}
table.ombox-style {
    border: 1px solid #f4c430;    /* Yellow */
}
table.ombox-move {
    border: 1px solid #9932cc;    /* Purple */
}
table.ombox-protection {
    border: 2px solid #bba;       /* Gray-gold */
}
 
/* Talk page message box styles */
table.tmbox {
    margin: 4px 10%;
    border-collapse: collapse;
    border: 1px solid #c0c090;    /* Default "notice" gray-brown */
    background: #f8eaba;
}
.mediawiki .mbox-inside .tmbox { /* For tmboxes inside other templates. The "mediawiki" class ensures that */
    margin: 2px 0;               /* this declaration overrides other styles (including mbox-small above)   */
    width: 100%;                 /* For Safari and Opera */
}
.mbox-inside .tmbox.mbox-small { /* "small" tmboxes should not be small when  */
    line-height: 1.5em;          /* also "nested", so reset styles that are   */   
    font-size: 100%;             /* set in "mbox-small" above.                */
}

table.tmbox-speedy {
    border: 2px solid #b22222;    /* Red */
    background: #fee;             /* Pink */
}
table.tmbox-delete {
    border: 2px solid #b22222;    /* Red */
}
table.tmbox-content {
    border: 2px solid #f28500;    /* Orange */
}
table.tmbox-style {
    border: 2px solid #f4c430;    /* Yellow */
}
table.tmbox-move {
    border: 2px solid #9932cc;    /* Purple */
}
table.tmbox-protection,
table.tmbox-notice {
    border: 1px solid #c0c090;    /* Gray-brown */
}

/* Disambig and set index box styles */
table.dmbox {
    clear: both; 
    margin: 0.9em 1em; 
    border-top: 1px solid #ccc; 
    border-bottom: 1px solid #ccc; 
    background: transparent;
}
 
/* Footer and header message box styles */
table.fmbox {
    border: 1px solid #aaa;
    background: #f9f9f9;     /* Default "system" gray */
}
table.fmbox-system {
    background: #f9f9f9;
}
table.fmbox-warning {
    border: 1px solid #bb7070;  /* Dark pink */
    background: #ffdbdb;        /* Pink */
}
table.fmbox-editnotice {
    background: transparent;
}
/* Div based "warning" style fmbox messages. */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon {

    border: 1px solid #bb7070;
    background: #ffdbdb;

}
/* Div based "system" style fmbox messages. 
   Used in [[MediaWiki:Readonly lag]]. */
div.mw-lag-warn-normal,
div.fmbox-system {

    border: 1px solid #aaa;
    background: #f9f9f9;

}


/* IUMB */


.iumb,.ooumb {
    border-width: 0;
    text-align: left;
    padding: 0
}

.iumb table,.ooumb table {
    padding: 5px 10px 5px 10px;
    background: transparent;
    color: inherit;
    border-collapse: unset
}

.iumb table.hidable-content,.ooumb table.hidable-content {
    padding: 0
}

.iumb-icon,.ooumb-icon {
    vertical-align: middle;
    padding: 0
}

.iumb-main,.ooumb-main {
    padding: 0 0 0 10px
}

.iumb-caption {
    font-size: 1.3em;
    font-weight: bold
}

.ooumb-caption {
    font-size: 1em;
    font-weight: bold
}

.iumb-comment {
    font-size: 0.8em
}

.iumb-hidable-button,.ooumb-hidable-button {
    text-align: right;
    margin: 0;
    padding: 0 5px 0 0;
    font-size: 0.8em;
    vertical-align: bottom
}

.iumb-table-container,.ooumb-table-container {
    width: 100%
}

.iumb p {
    margin-top: 0;
    margin-bottom: 0
}


.tabletop, .tabletop td {
    vertical-align: top;
}



#mw-createaccount-cta { 
    url(/wiki/File:Glyph-people-large-tribes.png) no-repeat 50%;
}


.nofloat { float: none; clear: both; }

.citizen-overflow-wrapper:has(.citizen-overflow-content > .wikitable) { float: none; }

.citizen-overflow-wrapper:has(.citizen-overflow-content > .infobox ) { float: right; }

.home-card__background:after, .template-navpill-background:after { background: linear-gradient(to right, var( --color-surface-2 ), transparent); }

.mw-parser-output .template-navpill>.template-navpill-background+a {
    color: var( --color-base );
    text-shadow: -1px 0 .2em var( --color-surface-1 ), 0 1px .2em var( --color-surface-1 ), 1px 0 .2em var( --color-surface-1 ), 0 -1px .2em var( --color-surface-1 );
}