MediaWiki:Common.css

@media screen {
  /* Underline (but only text, not full page with hr) for bigger difference between h3 and h4 */
  h3 > .mw-headline {
    text-decoration: underline;
    text-decoration-thickness: 1px;
  }

  /* Make section stand out slightly more */
  .mw-body-content h2 {
    margin-top: 1.25em; /* originally 1em */
    font-size: 1.6em; /* originally 1.5em */
    margin-bottom: 0.5em; /* originally not set */
  }

  /* avoid that powered-by icons are glued together */
  #footer-icons li a {
    padding: 0px 5px;
  }

   /* can be used for a very noticeable warning that is sticky (scrolls along) */
  .warn-box {
    position: sticky;
    top: 10px;
    background-color: white;
    border: 3px solid orange;
    font-size: 1.1em;
    font-weight: bold;
    padding: 5px 10px;
  }
  .warn-box::before {
    content: '⚠️ ';
  }
  .sticky-box {
    position:sticky;
    top:5px;
  }
  /* can be used for a decently noticeable info-notice box that is sticky (scrolls along) */
  .notice-box {
    background-color:white;
    border:2px solid cornflowerblue;
    font-size: 1.1em;
    font-weight: 600;
    padding:3px 5px
  }
  .notice-box::before {
    content: '🛈 ';
  }
}

/* make code-tags inside headings stand out less */
h1 code, h2 code, h3 code, h4 code {
  padding: 1px 2px;
  font-size: 0.9em;
  border: none;
}

/* Style the keyboard shortcut semantic html element */
kbd {
    background-color: #fbfcfe;
    border-radius: 1px;
    border: 1px solid #b4b4b4;
    color: #333;
    display: inline-block;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
}

/* allows to wrap some content into somewhat responsive columns */
/* .responsive-column-count { column-count: 2; } */
.responsive-column-count {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
@media  screen and (max-width: 1440px) {
    .responsive-column-count {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Allow people to optionally wrap lines in source listings */
div.wrapPreLines pre {
	white-space: pre-wrap;
}

/* Give a bit of space to the TOC */
#toc {
	margin: 1em 2em 0 0.5em;
	min-width: 200px;
}

/* Allow easy floating of TOC, left and right, example use:
 * 
 * <div class="toclimit-3 float-right">__TOC__</div>
 */
.float-left {
	float: left;
}
.float-right {
	float: right;
}

/* Give floating TOCs also a bit of space */
.float-left #toc {
	margin: 1em 2em 0 0;
}
.float-right #toc {
	margin: 1em 0 0 2em;
}

/*
 * Allow limiting of which header levels are shown in a TOC;
 * <div class="toclimit-3">, for instance, will limit to
 * showing ==headings== and ===headings=== but no further.
 * Used in [[Template:TOC]]
 */
.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;
}

/*
 * Makes bigger tables a bit nicer to read
 */
.wikitable tr:hover {
  background-color: #e8e9ea;
}

/*
 * Utility classes to make the text of a specific column center or right aligned
 */
table.col-1-center td:nth-child(1) { text-align: center; }
table.col-2-center td:nth-child(2) { text-align: center; }
table.col-3-center td:nth-child(3) { text-align: center; }
table.col-4-center td:nth-child(4) { text-align: center; }
table.col-5-center td:nth-child(5) { text-align: center; }
table.col-6-center td:nth-child(6) { text-align: center; }
table.col-7-center td:nth-child(7) { text-align: center; }
table.col-8-center td:nth-child(8) { text-align: center; }
table.col-9-center td:nth-child(9) { text-align: center; }

table.col-1-right td:nth-child(1) { text-align: right; }
table.col-2-right td:nth-child(2) { text-align: right; }
table.col-3-right td:nth-child(3) { text-align: right; }
table.col-4-right td:nth-child(4) { text-align: right; }
table.col-5-right td:nth-child(5) { text-align: right; }
table.col-6-right td:nth-child(6) { text-align: right; }
table.col-7-right td:nth-child(7) { text-align: right; }
table.col-8-right td:nth-child(8) { text-align: right; }
table.col-9-right td:nth-child(9) { text-align: right; }