Jump to content

MediaWiki:Common.css

An idea by Jeff Lawlor
Created on 2024-10-08
Revision as of 17:57, 17 June 2025 by Admin (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
body
{
     font-family: Trebuchet MS, Tahoma, sans-serif;
}

 /* Display all footer items in Minerva Neue skin */
ul.footer-info li, 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;
}

.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 {
	margin-right: 1em; 
	font-size: 75%;
}

.page-Main_Page .page-quick-details,
body[class*=' page-MediaWiki_'] .page-quick-details,
body[class*=' page-Idea_Supreme_'] .page-quick-details,
body[class*=' ns-special '] .page-quick-details {
	display: none;
}

.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*=' ns-special '] .vector-page-titlebar {
	margin-bottom: unset;
}

.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-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 div {
	font-size: 75%;
    color: var(--color-placeholder);
}

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

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

/* 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;
}

/* 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;
}

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;
}

/* 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: 7px;
  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;
	/*border: 1em solid var(--tab-active-bg, #f0f0f0);*/
}

.infobox-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.infobox-user {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1em;
}

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

.user-name {
  font-weight: bold;
}

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

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

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

.infobox-panel {
  background-color: var(--tab-active-bg, #d0d0d0);
  padding: 0.4em 0.8em;
  overflow-y: auto;
  height: 6em;
}

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

.infobox-wishes {
/*	background-color: var(--tab-active-bg, #f0f0f0);*/
	padding: 0 0.5em .5em .5em;
	font-size: 0.95em;
}

.infobox-wishes h1 {
	margin: 0;
	padding-top: .25em;
	font-size: 1.5em;
}

.content .infobox-wishes p {
	font-size: .86em;
}

.infobox-list {
  padding-left: 1.2em;
  margin-top: 0.5em;
  font-size: 0.95em;
  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;
}


/* 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;
}*/