MediaWiki:Common.css: Difference between revisions

Revision as of 14:13, 22 November 2023

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

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


/* Custom animated hints */
.custom-collapsible {
  cursor: pointer;
  padding: 3px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.custom-collapsible-link {
  color: #3366cc; /* Ideally this would grab the link color from the wiki's skin instead. */
}
.custom-collapsible-link:hover {
  text-decoration: underline;
}

.custom-collapsible-content {
  padding: 0px 15px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: whitesmoke;
  border: none; /* A border would be visible even with max-height: 0px. */
}
.custom-collapsible-padded {
  padding: 10px 0px;
}
.custom-collapsible-content-visible {
  border: 1px solid #ccc;
}
.custom-collapsible:not(.active) .custom-collapsible-link:before{
  content: 'Show'
}
.custom-collapsible.active .custom-collapsible-link:before{
  content: 'Hide'
}

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


/* Tooltips for mobile */
@media (pointer: coarse), (hover: none) {
  [title] {
    position: relative;
    display: inline-flex;
    justify-content: center;
  }
  [title]:focus::after {
    content: attr(title);
    position: absolute;
    top: 90%;
    color: #000;
    background-color: #fff;
    border: 1px solid;
    width: fit-content;
    padding: 3px;
    font-size: 10px;
  }

}