MediaWiki:Common.css: Difference between revisions

Latest revision as of 19:40, 29 November 2025

/* CSS placed here will be applied to all skins */
body {
     font-family: Trebuchet MS, Tahoma, sans-serif;
}

/* Hide options in preferences, particularly the ability to change skin in Vector and Minerva */
#mw-htmlform-skin, 
#mw-input-wpskin, 
#mw-prefsection-rendering-skin legend,
#mw-htmlform-skin {
	display: none;
}

/* Logo tweaks */
body.skin-vector-2022 .mw-logo-icon {
	margin-right: 6px;
}

 /* Display all footer items in Minerva Neue skin */
.skin-minerva ul.footer-info li, .skin-minerva ul.footer-places li {
	display: inline-block;
}

.skin-minerva #content ul {
	margin: 0 0 1em 1.5em;
}

body.skin-vector-2022 ul {
	margin-bottom: 1em;
}

.skin-minerva #content ul.mw-gallery-traditional {
	margin: 0 0 1em 0;
}

.mw-body h1, .mw-body-content h2, h3, h4, h5, h6, h7
{
     font-family: Verdana, sans-serif;
}

.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6, .content .mw-parser-output > .mw-heading2, .content .mw-parser-output > h2, .content .mw-parser-output[data-mw-parsoid-version] > section > .mw-heading2, .content .section-heading {
    border-bottom: none;
    padding-bottom: 0;
    margin: 0.25em 0 0 0;
}

#firstHeading {
	margin: 0;
}

.mf-icon-expand {
	display: none;
}

/* Remove hamburger menu with nothing in it in Vector */
.vector-main-menu-landmark {
	display: none;
}

.vector-page-titlebar, .skin-minerva .page-heading {
    border-top: var(--is-border-color) solid 1px;
    border-right: var(--is-border-color) solid 1px;
    border-radius: 0 8px 8px 0;
    border-bottom: var(--is-border-color) solid 1px;
    padding: .6em .6em .6em 0;
    background-color: var(--background-color-interactive);
    background-image: linear-gradient(90deg,var(--background-color-base) 33%, var(--background-color-interactive) 100%);
}

.page-Main_Page .vector-page-titlebar, 
.page-Main_Page.skin-minerva .page-heading, 
body[class*=' page-MediaWiki_'] .vector-page-titlebar,
body[class*=' page-MediaWiki_'].skin-minerva .page-heading,
body[class*=' page-Idea_Supreme_'] .vector-page-titlebar,
body[class*=' page-Idea_Supreme_'].skin-minerva .page-heading,
body[class*=' ns-special '] .vector-page-titlebar, 
body[class*=' ns-special '].skin-minerva .page-heading {
    border: none;
    padding: unset;
    background-color: unset;
    background-image: unset;
}

.page-quick-details {
	font-size: 75%;
}

.page-Main_Page .hide-when-not-idea,
body[class*=' page-MediaWiki_'] .hide-when-not-idea,
body[class*=' page-User_'] .hide-when-not-idea,
body[class*=' page-Idea_Supreme_'] .hide-when-not-idea,
body[class*=' page-Special_'] .hide-when-not-idea,
body[class*=' ns-special '] .hide-when-not-idea {
	display: none;
}

/* Hide heading on user profiles
body[class*=' page-User_'].skin-minerva .page-heading,
body[class*=' page-User_'].skin-vector header.vector-page-titlebar {
    display: none;
}
 */
body[class*=' page-User_'] .oo-ui-windowManager .oo-ui-fieldsetLayout-group>.oo-ui-layout {
	display: none;
}

body[class*=' page-User_'] .oo-ui-windowManager .oo-ui-fieldsetLayout-group > div:nth-child(1), 
body[class*=' page-User_'] .oo-ui-windowManager .oo-ui-fieldsetLayout-group > div:nth-child(5), 
body[class*=' page-User_'] .oo-ui-windowManager .oo-ui-fieldsetLayout-group > div:nth-child(6)  {
	display: block;
}

.vector-page-titlebar {
    margin-bottom: .25em;
}

.page-Main_Page .vector-page-titlebar,
body[class*=' page-MediaWiki_'] .vector-page-titlebar,
body[class*=' page-Idea_Supreme_'] .vector-page-titlebar,
/*body[class*=' page-User_'] .vector-page-titlebar,*/
body[class*=' ns-special '] .vector-page-titlebar {
	margin-bottom: unset;
}

.header-button {
	border: none;
    width: 2rem;
    height: 2rem;
    background-color: #6b8edf;
    color: #ffffff;
    border-radius: 50%;
    margin-left: 1em;
    text-align: center;
    line-height: 2rem;
}

.header-button:hover {
	cursor: pointer;
}

.header-button a, .header-button a:hover, .header-button a:visited {
	color: #ffffff;
}

.skin-minerva .page-heading {
    margin-bottom: 1.5em;
}

.page-Main_Page.skin-minerva .page-heading, 
body[class*=' page-MediaWiki_'].skin-minerva .page-heading,
/*body[class*=' page-User_'].skin-minerva .page-heading,*/
body[class*=' page-Idea_Supreme_'].skin-minerva .page-heading,
body[class*=' ns-special '].skin-minerva .page-heading {
    margin-bottom: unset;
}

.is-vector-quick-page-info {
	margin-right: 1em; 
	font-size: 75%;
}

.page-heading-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
}

.page-heading-left-column {
	justify-self: start;
}

.page-heading-right-column {
	justify-self: end;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
}

.page-heading-left-column div {
	font-size: 75%;
    color: var(--color-placeholder);
}

.page-Main_Page.skin-minerva .hide-when-not-idea, 
body[class*=' page-MediaWiki_'].skin-minerva .hide-when-not-idea,
/*body[class*=' page-User_'].skin-minerva .page-heading div,*/
body[class*=' page-Idea_Supreme_'].skin-minerva .hide-when-not-idea,
body[class*=' ns-special '].skin-minerva .hide-when-not-idea {
	display: none;
}

.vector-page-titlebar::after {
	background-color: transparent;
}

/* User profile modifications */
.profile-masthead {
	margin-top: 1.25rem;
}

.profile-masthead .profile-header-attributes h2 {
	margin-right: 1rem;
}

.profile-masthead .profile-user-group {
	background-color: var(--background-color-inverted);
	color: var(--color-inverted);
}
/*
#profile-top {
	border-bottom: none;
}

#profile-toggle-button {
	display: none;
}

#profile-image {
	margin: 0 1.25rem 0 0;
}

#profile-right {
	float: none;
}*/

/* Show subtitle */
#siteSub {
    display: block; font-weight: normal; font-size: normal;
}

/* No gray background behind pictures! */
.mw-parser-output figure[typeof='mw:File'] img {
	background-color: transparent;
}

/* Turn the brightness to 10 for pictures in dark mode */
html.skin-theme-clientpref-night .mw-parser-output > figure[typeof='mw:File/Thumb'] img {
	filter: brightness(1);
}

/* Remove filter on bottom logo in mobile dark mode */
html.skin-theme-clientpref-night .minerva-footer-logo > img {
	filter: unset;
}

/* Remove toolbar on home page and when not logged in */
.vector-page-toolbar {
	display: none;
}

body.page-We_Are_Idea_Supreme .vector-page-toolbar {
    display: none;
}

/* Remove toolbar for mobile */
.page-actions-menu {
	display: none;
}

/* Remove Main menu (sidebar) */
#vector-main-menu {
	display: none;
}

/* Remove spacing between title and body content */
.vector-body #mw-content-text {
	margin-top: 0;
}

.vector-body #contentSub {
	margin: 0;
}

.vector-body-before-content {
	display: none;
}

.mw-body p {
    margin: 0.1em 0 1em 0;
}

/* Intersect extension */
.mw-body .gallerytext p {
	display: none;
}

.mw-body .mw-gallery-traditional .gallerycaption {
	margin-top: 3em;
    font-size: 1.5em;
}

/* Hide Categories until we know what to do with them */
#catlinks {
	display: none;
}

/* Updates to MediaWiki's Image Box */
.mw-content-ltr figure[typeof~='mw:File/Thumb'] {
	border-radius: 8px;
	border: 1px solid var(--is-border-color);
	display: block;
	width: 322px;
}

.skin-minerva .content figure[typeof~='mw:File/Thumb'], 
.skin-minerva .content figure[typeof~='mw:File/Frame'] {
	margin: 0.6em auto 1.75em auto;
}

figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element {
	padding: 7px;
}

.mw-parser-output figure[typeof='mw:File/Thumb'] img {
	background-color: transparent !important;
}

figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element {
	margin: 4px;
	border: none;
}

.content figure[typeof~='mw:File/Thumb'] > figcaption {
	display: block;
	background-color: transparent;
	margin: -4px 4px 4px 4px;
	color: var(--color-base);
	border: none;
}

#bodyContent figure[typeof~='mw:File/Thumb'] > figcaption {
	padding: 0px 10px 10px 10px !important;
	display: block;
	border: none;
	margin: -4px 4px 4px 4px;
}

#toc {
	display: none;
}

/* Hide Discussion button at bottom of mobile page */
#page-secondary-actions {
	display: none;
}

/* Infoboxes */
.infobox-idea {
  clear: right;
  float: right;
  max-width: 324px;
  width: 324px;
  /*margin: 1em 0 1em 1em;*/
  color: var(--color-base);
  background-color: var(--background-color-interactive-subtle);
  border: 1px solid var(--is-border-color);
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  margin: 0.5em 0 1.3em 1.4em;
  line-height: 1.4em;
}

@media (max-width: 768px) {
  .infobox-idea {
    float: none;
    width: 100%;
    margin: 2em auto;
 }
 
.mw-content-ltr figure[typeof~='mw:File/Thumb'] {
  	clear: right;
  	float: none;
  }
}

.infobox-image {
	text-align: center;
}

.infobox-wishes {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75em;
  margin-bottom: .5em;
}

.infobox-wishes img {
	border-radius: 10%;
}

.infobox-wishes .infobox-heading {
	margin: 0;
	padding: 0;
	font-size: 1.25em;
}

.infobox-wishes-p {
	padding-bottom: 0 !important;
	margin-bottom: .5em !important;
	font-size: .875rem;
}

.infobox-user {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 1em;
}

.user-avatar img {
  border-radius: 50%;
}

.user-name {
  font-weight: bold;
  font-size: 1.25em;
  margin-left: .25em;
}

.user-email {
  font-size: 2em;
}

.user-email a, .user-email a:hover {
	text-decoration: none;
}

.infobox-actions {
  display: flex;
  gap: 0.5em;
}

.infobox-tab {
  padding: 0.4em 0.8em;
  border-radius: 8px 8px 0 0;
  background-color: var(--tab-bg);
  cursor: pointer;
  font-weight: bold;
}

.infobox-tab.active {
  background-color: var(--tab-active-bg);
}

.infobox-panel {
  background-color: var(--tab-active-bg);
  padding: 0.8em;
  overflow-y: auto;
  height: 7em;
  border-radius: 0 8px 8px 8px;
}

.infobox-wishes-panel {
  background-color: var(--tab-active-bg);
  padding: 0.8em;
  border-radius: 8px;
}

.infobox-user, .infobox-panel.about-idea .panel-content {
  white-space: normal;
}

.infobox-list {
  padding-left: 0;
  font-size: .875rem;
  list-style-type: disc;
}

:root {
  --tab-active-bg: #eaecf0; 
  --tab-bg: #c8ccd1;
  --is-border-color: #000;
}

html.skin-theme-clientpref-night {
  --tab-active-bg: #54595d; 
  --tab-bg: #72777d;
  --is-border-color: #ccc;
}

/* Printer touch-ups */
@media print {
    .firstHeading::before {
    	display: none;
    }
    
    .vector-page-titlebar, .skin-minerva .page-heading {
	    border: 0;
	    background: none;
    }
    
    header .share-container, .header-button {
    	display: none;
    }
    
    .page-quick-details {
    	float: right;
    }
    
    .infobox-tab.active, .infobox-panel, .infobox-wishes-panel {
    	background-color: #CCCCCC;
    }
    
    .infobox-tab {
    	background-color: #EEEEEE;
    }
    
    .mw-content-ltr figure[typeof~='mw:File/Thumb'], .mw-content-ltr figure[typeof~='mw:File/Frame'] {
    	margin: 1em 0 1em 2em;
    	float: right;
    	clear: right;
    }
    
    .infobox-actions [data-tab='about-idea'] {
    	display: none;
    }
    
    .infobox-idea {
		page-break-inside: avoid;
    }
}

/* Lastest Big Ideas Tweaks */
@media (max-width: 639px) {
	/* Center and bold Latest Big Ideas text */
    .gallery .gallerybox {
        text-align: center;
        font-weight: bold;
    }
}

@media (min-width: 640px) {
	/* Header is left-aligned in desktop */
	li.gallerycaption {
		text-align: unset;
	}
}

/* Light/dark mode 
.skin-vector-2022 .infobox-idea,
.skin-minerva .infobox-idea {
  --border-color: #aaa;
  --background-color: #f8f9fa;
  --text-color: #000;
  --tab-bg: #e9ecef;
  --tab-active-bg: #dee2e6;
}

.skin-vector-2022.skin-dark .infobox-idea,
.skin-minerva.skin-dark .infobox-idea {
  --border-color: #444;
  --background-color: #1e1e1e;
  --text-color: #ddd;
  --tab-bg: #2a2a2a;
  --tab-active-bg: #3a3a3a;
}*/