MediaWiki:Common.css: Difference between revisions

Revision as of 17:36, 20 May 2025

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

/* Updates to MediaWiki's Image Box */
.mw-content-ltr figure[typeof~='mw:File/Thumb'] {
	border: 0;
}

figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element {
	border-radius: 8px 8px 0 0;
	padding: 7px;
	border: 1px solid var(--is-border-color);
	border-bottom: none;
}

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

.content figure[typeof~='mw:File/Thumb'] > figcaption {
	background-color: transparent;
	margin: 0;
	padding: 0px 10px 10px 10px !important;
	color: var(--color-base);
}

figure[typeof~='mw:File/Thumb'] > figcaption {
	border-radius: 0 0 8px 8px;
	border: 1px solid var(--is-border-color);
	border-top: none;
	margin: -3px 3px 0 3px;
	padding: 0px 10px 10px 10px;
}

/* What Do I Want Infobox */
.infobox-idea {
  clear: right;
  float: right;
  max-width: 322px;
  width: 322px;
  /*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;
  }
  
  .infobox-idea p {
    font-size: .86em;
  }
}

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

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