MediaWiki:Common.css: Difference between revisions

Latest revision as of 05:51, 15 January 2025

/* CSS placed here will be applied to all skins */

/* Additional styling for the mw-gather class */
    .mw-gather {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .mw-gather div {
      flex: 1;
      margin: 10px;
      box-sizing: border-box;
    }

    /* Media query for small screens */
    @media (max-width: 600px) {
      .mw-gather div {
        flex: 100%; /* Full width on small screens */
      }
    }


/* Collapsible elements. Toggle-link moved to left. */
/* Margin around it adjusted. */
/* https://www.mediawiki.org/wiki/Manual:Collapsible_elements */

.mw-collapsible span.mw-collapsible-toggle {
    float:none;
    margin-left:0;
    margin-right:1em;
}

a.mw-collapsible-text {
  margin-left: 0.2em;
  margin-right: 0.2em;
}

.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
	display: none;
}

/* Some styles common to all infoboxes */
.infobox {
  margin-top: 0.5em;
  margin-right: 0px;
  margin-bottom: 0.5em;
  margin-left: 1em;
  padding: 0.2em;
  float:right;
  border:1px solid black;
  border-collapse: collapse;
}

table.infobox td:first-child:not([colspan]) {
  text-align: left;
  padding-left: 0.33em;
  vertical-align: top;
}

table.infobox td:last-child:not([colspan]) {
  text-align: right;
  padding-right: 0.33em;
  vertical-align: top;
}



/* Custom collapsibles for hints (cannot be nested): */
.collapsible-hint {
  cursor: pointer;
  padding: 3px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}
.collapsible-hint-link {
  color: #3366cc; /* Ideally this would grab the link color from the wiki's skin instead. */
}
.collapsible-hint-link:hover {
  text-decoration: underline;
}
.collapsible-hint-content {
  padding: 0px 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  border: none; /* A border would be visible even with max-height: 0px. */
  background-color: whitesmoke;
}

/* override the background color of the hint content in dark mode using the next two rules */
html.skin-theme-clientpref-night .collapsible-hint-content {
  background-color: #333;
}
@media screen and ( prefers-color-scheme: dark ) {
  html.skin-theme-clientpref-os .collapsible-hint-content {
    background-color: #333;
  }
}

.collapsible-hint-padded {
  padding: 10px 0px;
}
.collapsible-hint-content-visible {
  border: 1px solid #ccc;
}
.collapsible-hint:not(.active) .collapsible-hint-link:before{
  content: 'Show'
}
.collapsible-hint.active .collapsible-hint-link:before{
  content: 'Hide'
}


/* Custom collapsibles for social media threads */
.collapsible-dialogue-link {
  color: #3366cc; /* Ideally this would grab the link color from the wiki's skin instead. */
}
.collapsible-dialogue-link:hover {
  text-decoration: underline;
}
.collapsible-dialogue-content {
  display: none;
  padding-left:10px;
  border: 1px solid transparent;
  border-left: 3px solid #888;
}


/* Custom hex strings */
.hex-string-with-translation {
  text-decoration: underline dotted black;
  overflow-wrap: anywhere;
}
.hex-string-without-translation {
  text-decoration: underline dotted red;
  overflow-wrap: anywhere;
}


/* Used by Template:Hatnote */
.hatnote {
  font-style:italic;
  padding-bottom:0.4em;
  margin-bottom:0.4em;
  color:#555;
  border-bottom:1px solid #ccc
}