Jump to content

Module:Infobox/styles.css: Difference between revisions

From SchoolIdolWiki
← Older editNewer edit →
SchoolIdolNet changed the content model of the page Module:Infobox/styles.css from "CSS" to "Sanitized CSS"
No edit summary
Tag: Reverted
Line 1: Line 1:
/* {{pp|small=y}} */
/* Character Infobox Styles */
/*
.character-infobox {
* This TemplateStyles sheet deliberately does NOT include the full set of
  float: right;
* infobox styles. We are still working to migrate all of the manual
  padding: 0 20px 20px 20px;
* infoboxes. See [[MediaWiki talk:Common.css/to do#Infobox]]
* DO NOT ADD THEM HERE
*/
/*
* not strictly certain these styles are necessary since the modules now
* exclusively output infobox-subbox or infobox, not both
* just replicating the module faithfully
*/
.infobox-subbox {
padding: 0;
border: none;
margin: -3px;
width: auto;
min-width: 100%;
font-size: 100%;
clear: none;
float: none;
background-color: transparent;
}
}


.infobox-3cols-child {
/* Infobox table */
margin: auto;
.character-infobox .infobox {
  width: 270px;
  font-size: 90%;
  text-align: left;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-collapse: collapse;
}
}


.infobox .navbar {
/* Infobox title (caption) */
font-size: 100%;
.character-infobox .infobox > caption {
  text-align: center;
  font-weight: bold;
  font-size: 120%;
  background-color: #ff3399;
  color: white;
  padding: 8px;
}
}


/* Dark theme: [[William_Wragg]], [[Coral_Castle]] */
/* Centered image row */
.character-infobox .infobox td.image-cell {
  text-align: center;
  background-color: #eee;
}
 
/* Table headers */
.character-infobox .infobox th {
  background-color: #f2f2f2;
  color: #333;
  padding: 6px;
  text-align: left;
  vertical-align: top;
}


@media screen {
/* Table data cells */
    html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
.character-infobox .infobox td {
    background: #1f1f23 !important;
  padding: 6px;
      /* switch with var( --color-base ) when supported. */
  vertical-align: top;
      color: #f8f9fa;
}
}
}


/* Section header row */
.character-infobox .infobox tr.section-header th,
.character-infobox .infobox tr.section-header td {
  background-color: #ff3399;
  color: white;
  text-align: center;
  font-weight: bold;
  padding: 6px;
}


@media screen and ( prefers-color-scheme: dark) {
/* Subsection header row */
    html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) div:not(.notheme) {
.character-infobox .infobox tr.subsection-header th,
      background: #1f1f23 !important;
.character-infobox .infobox tr.subsection-header td {
      /* switch with var( --color-base ) when supported. */
  background-color: #ff3399;
      color: #f8f9fa;
  color: white;
    }
  text-align: center;
  font-weight: bold;
  padding: 6px;
}
}


/* Icon and signature image cells */
.character-infobox .infobox td.icon-cell,
.character-infobox .infobox td.signature-cell {
  text-align: center;
  padding: 6px;
}


/* Since infobox is a table, many infobox templates take advantage of this to add columns and rows to the infobox itself rather than as part of a new table inside them. This class should be discouraged and removed on the long term, but allows us to at least identify these tables going forward
/* Optional dark mode overrides */
Currently in use on: [[Module:Infobox3cols]]
@media screen {
Fixes issue described in https://phabricator.wikimedia.org/F55300125 on Vector 2022.
  html.skin-theme-clientpref-night .character-infobox .infobox td:not(.notheme),
*/
   html.skin-theme-clientpref-night .character-infobox .infobox th:not(.notheme) {
@media (min-width: 640px) {
     background: #1f1f23 !important;
   body.skin--responsive .infobox-table {
    color: #f8f9fa;
     display: table !important;
   }
   }
  body.skin--responsive .infobox-table > caption {
}
    display: table-caption !important;
 
   }
@media screen and (prefers-color-scheme: dark) {
  body.skin--responsive .infobox-table > tbody {
   html.skin-theme-clientpref-os .character-infobox .infobox td:not(.notheme),
    display: table-row-group;
   html.skin-theme-clientpref-os .character-infobox .infobox th:not(.notheme) {
  }
     background: #1f1f23 !important;
  body.skin--responsive .infobox-table tr {
     color: #f8f9fa;
    display: table-row !important;
  }
   body.skin--responsive .infobox-table th,
  body.skin--responsive .infobox-table td {
     padding-left: inherit;
     padding-right: inherit;
   }
   }
}
}

Revision as of 06:18, 12 April 2025

/* Character Infobox Styles */
.character-infobox {
  float: right;
  padding: 0 20px 20px 20px;
}

/* Infobox table */
.character-infobox .infobox {
  width: 270px;
  font-size: 90%;
  text-align: left;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  border-collapse: collapse;
}

/* Infobox title (caption) */
.character-infobox .infobox > caption {
  text-align: center;
  font-weight: bold;
  font-size: 120%;
  background-color: #ff3399;
  color: white;
  padding: 8px;
}

/* Centered image row */
.character-infobox .infobox td.image-cell {
  text-align: center;
  background-color: #eee;
}

/* Table headers */
.character-infobox .infobox th {
  background-color: #f2f2f2;
  color: #333;
  padding: 6px;
  text-align: left;
  vertical-align: top;
}

/* Table data cells */
.character-infobox .infobox td {
  padding: 6px;
  vertical-align: top;
}

/* Section header row */
.character-infobox .infobox tr.section-header th,
.character-infobox .infobox tr.section-header td {
  background-color: #ff3399;
  color: white;
  text-align: center;
  font-weight: bold;
  padding: 6px;
}

/* Subsection header row */
.character-infobox .infobox tr.subsection-header th,
.character-infobox .infobox tr.subsection-header td {
  background-color: #ff3399;
  color: white;
  text-align: center;
  font-weight: bold;
  padding: 6px;
}

/* Icon and signature image cells */
.character-infobox .infobox td.icon-cell,
.character-infobox .infobox td.signature-cell {
  text-align: center;
  padding: 6px;
}

/* Optional dark mode overrides */
@media screen {
  html.skin-theme-clientpref-night .character-infobox .infobox td:not(.notheme),
  html.skin-theme-clientpref-night .character-infobox .infobox th:not(.notheme) {
    background: #1f1f23 !important;
    color: #f8f9fa;
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .character-infobox .infobox td:not(.notheme),
  html.skin-theme-clientpref-os .character-infobox .infobox th:not(.notheme) {
    background: #1f1f23 !important;
    color: #f8f9fa;
  }
}
Retrieved from "http://wiki.schoolidol.net/w/index.php?title=Module:Infobox/styles.css&oldid=823"