Module:WpInfobox/styles.css: Difference between revisions

Eli (talk | contribs)
m Eli moved page Module:Infobox/styles.css to Module:WpInfobox/styles.css without leaving a redirect: Misspelled title
Eli (talk | contribs)
No edit summary
 
Line 1: Line 1:
/* {{pp|small=y}} */
/*
* This TemplateStyles sheet deliberately does NOT include the full set of
* infobox styles. We are still working to migrate all of the manual
* infoboxes. See [[MediaWiki talk:Common.css/to do#Infobox]]
* DO NOT ADD THEM HERE
*/
/* NOTE: This is maintained both here and in [[MediaWiki:Common.css]] until migration is complete.
* Starting with bare minimum for the benefit of [[mw:Manual:Safemode]]. */
@media (min-width: 640px) {
.infobox {
/* @noflip */
margin-left: 1em;
/* @noflip */
float: right;
/* @noflip */
clear: right;
width: 22em;
}
}
/*
* 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 {
.infobox-subbox {
padding: 0;
  padding: 0;
border: none;
  border: none;
margin: -3px;
  margin: -3px;
width: auto;
  width: auto;
min-width: 100%;
  min-width: 100%;
font-size: 100%;
  font-size: 100%;
clear: none;
  clear: none;
float: none;
  float: none;
background-color: transparent;
  background-color: transparent;
    color:inherit;
  color: inherit;
}
}


.infobox-3cols-child {
.infobox-3cols-child {
margin: -3px;
  margin: -3px;
}
}


.infobox .navbar {
.infobox .navbar {
font-size: 100%;
  font-size: 100%;
}
 
.infobox-hiddenrow {
  display: none;
}
}


/* remove when infobox is not a table anymore */
.infobox-hiddenrow,
/* we mean it, Minerva. but also Vector 2022 in the future at some point */
body.skin--responsive.skin--responsive .infobox .infobox-hiddenrow {
body.skin--responsive.skin--responsive .infobox .infobox-hiddenrow {
display: none;
  display: none;
}
 
.infobox {
  border: 1px solid #a2a9b1;
  color: black;
  padding: 0.2em;
  font-size: 88%;
  line-height: 1.5em;
  border-spacing: 3px;
  margin: 0.5em 0;
}
 
.infobox-header {
  vertical-align: top;
}
 
.infobox-label {
  vertical-align: top;
  text-align: left;
}
 
.infobox-above {
  vertical-align: top;
}
 
.infobox-full-data {
  vertical-align: top;
}
 
.infobox-data {
  vertical-align: top;
  text-align: left;
}
 
.infobox-below {
  vertical-align: top;
}
 
.infobox-subheader {
  vertical-align: top;
}
 
.infobox-image {
  vertical-align: top;
}
 
.infobox-navbar {
  vertical-align: top;
}
 
.infobox th {
  vertical-align: top;
  text-align: left;
}
 
.infobox td {
  vertical-align: top;
  text-align: left;
}
 
.infobox .infobox-above {
  font-size: 125%;
  font-weight: bold;
  text-align: center;
}
 
.infobox .infobox-title {
  font-size: 125%;
  font-weight: bold;
  text-align: center;
}
 
.infobox caption {
  font-size: 125%;
  font-weight: bold;
  text-align: center;
  padding: 0.2em;
}
 
.infobox-title {
  padding: 0.2em;
}
 
.infobox .infobox-header {
  text-align: center;
}
 
.infobox .infobox-subheader {
  text-align: center;
}
 
.infobox .infobox-image {
  text-align: center;
}
 
.infobox .infobox-full-data {
  text-align: center;
}
 
.infobox .infobox-below {
  text-align: center;
}
 
.infobox .infobox-navbar {
  text-align: right;
}
 
@media (min-width: 640px) {
.infobox {
margin-left: 1em;
float: right;
clear: right;
width: 22em;
}
}
}
 
/* Dark theme: [[William Wragg]], [[Coral Castle]] */
@media screen {
@media screen {
html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
html.skin-theme-clientpref-night .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
background: #1f1f23 !important;
background: #1f1f23 !important;
/* switch with var( --color-base ) when supported. */
color: #f8f9fa;
color: #f8f9fa;
}
}
Line 66: Line 156:
html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
html.skin-theme-clientpref-os .infobox-full-data:not(.notheme) > div:not(.notheme)[style] {
background: #1f1f23 !important;
background: #1f1f23 !important;
/* switch with var( --color-base ) when supported. */
color: #f8f9fa;
color: #f8f9fa;
}
}
}
}


/* 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
* Currently in use on: [[Module:Infobox3cols]]
* Fixes issue described in [[phab:F55300125]] on Vector 2022.
*/
@media (min-width: 640px) {
@media (min-width: 640px) {
body.skin--responsive .infobox-table {
body.skin--responsive .infobox-table {
Line 95: Line 178:
padding-left: inherit;
padding-left: inherit;
padding-right: inherit;
padding-right: inherit;
}
}
@media screen {
.infobox {
background-color: var(--background-color-neutral-subtle, #f8f9fa);
    }
}
@media (max-width: 640px) {
.infobox {
width: 100%;
}
   
.infobox .nowrap {
white-space: normal;
}
}
}
}