Jump to content

MediaWiki:Common.css

An idea by Jeff Lawlor
Created on 2024-10-08
Revision as of 20:13, 25 April 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;
}

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

.mf-icon-expand {
	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! */
html.skin-theme-clientpref-night .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;
}


/* What Do I Want Infobox */
.infobox-idea {
  clear: both;
  float: right;
  max-width: 300px;
  width: 100%;
  margin: 1em 0 1em 1em;
  background-color: var(--background-color, #f9f9f9);
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.5em;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .infobox-idea {
    float: none;
    width: 100%;
    margin: 1em 0;
  }
}

.infobox-image {
  text-align: center;
  margin-bottom: 1em;
}

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

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

.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;
  background-color: var(--tab-bg, #e0e0e0);
  cursor: pointer;
  font-weight: bold;
}

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

.infobox-panel {
  margin-bottom: 1em;
}

.infobox-idea {
  clear: both;
  float: right;
  max-width: 300px;
  width: 100%;
  margin: 1em 0 1em 1em;
  background-color: var(--background-color, #f9f9f9);
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.5em;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .infobox-idea {
    float: none;
    width: 100%;
    margin: 1em 0;
  }
}

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

.infobox-note {
  background-color: var(--infobox-note-bg, #f0f0f0);
  border-left: 4px solid #bbb;
  padding: 0.5em;
  margin: 1em 0 0.5em;
  font-size: 0.95em;
}

.infobox-list {
  padding-left: 1.2em;
  margin-top: 0;
  font-size: 0.95em;
  list-style-type: disc;
}

.show-more {
  color: #3366cc;
  cursor: pointer;
  font-size: 0.9em;
  margin-top: 0.5em;
}

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