Template:Infobox/styles.css: Difference between revisions

From Workers & Resources: Soviet Republic Official Wiki
Add dark-theme PortableInfobox styles for the MBHH skin
 
Fix unreadable selected section tab: give tabs dark-theme colours (they use the --pi-secondary-background variable, not the class)
 
Line 31: Line 31:
.portable-infobox .pi-image {
.portable-infobox .pi-image {
border-color: #5a6068;
border-color: #5a6068;
}
/* The section tabs take their colours from the extension's
  --pi-secondary-background variable, not the .pi-secondary-background
  class, so the overrides above do not reach them. Left alone, the
  selected tab renders light text on the default light background. */
.portable-infobox .pi-section-navigation .pi-section-tab,
.portable-infobox .pi-media-collection .pi-tab-link {
border-color: #5a6068;
}
.portable-infobox .pi-section-navigation .pi-section-tab.pi-section-active,
.portable-infobox .pi-section-navigation .pi-section-tab.current,
.portable-infobox .pi-media-collection .pi-tab-link.current {
background: #3a3f45;
color: #ffffff;
}
}

Latest revision as of 16:11, 8 August 2026

/* Dark-theme PortableInfobox colors for the MBHH skin.
   Titles/labels inherit light text from the skin; the default light
   Wikipedia background made them unreadable. */
.portable-infobox {
	background: #2c3035;
	color: #e6e8ea;
	border: 1px solid #5a6068;
}

.portable-infobox .pi-title,
.portable-infobox .pi-header,
.portable-infobox .pi-data-label {
	color: #ffffff;
}

.portable-infobox .pi-data-value,
.portable-infobox .pi-font,
.portable-infobox .pi-caption {
	color: #d5d8db;
}

.portable-infobox .pi-secondary-background,
.portable-infobox .pi-header {
	background-color: #3a3f45;
}

.portable-infobox .pi-border-color,
.portable-infobox .pi-item,
.portable-infobox .pi-data,
.portable-infobox .pi-group,
.portable-infobox .pi-image {
	border-color: #5a6068;
}

/* The section tabs take their colours from the extension's
   --pi-secondary-background variable, not the .pi-secondary-background
   class, so the overrides above do not reach them. Left alone, the
   selected tab renders light text on the default light background. */
.portable-infobox .pi-section-navigation .pi-section-tab,
.portable-infobox .pi-media-collection .pi-tab-link {
	border-color: #5a6068;
}

.portable-infobox .pi-section-navigation .pi-section-tab.pi-section-active,
.portable-infobox .pi-section-navigation .pi-section-tab.current,
.portable-infobox .pi-media-collection .pi-tab-link.current {
	background: #3a3f45;
	color: #ffffff;
}