MediaWiki:Common.css: Difference between revisions

Revision as of 13:56, 7 July 2023

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

/*Vector 2022 styling*/

.mw-page-container {
  max-width: 1800px;
  width: 100%;
}

.mw-body {
    grid-template-columns: minmax(0,1fr) min-content !important;
}

.vector-main-menu-container * {
  font-size: 85%;
}

div.vector-pinnable-header.vector-main-menu-pinnable-header.vector-pinnable-header-pinned > div.vector-pinnable-header-label {
  font-size: 100%;
}

#mw-sidebar-button {
  display: none !important;
}

/* BEGIN Styling to match original wiki by Adebayo */
* {
    font-family: Roboto, Arial, sans-serif;
}

div .firstHeading,
#firstHeading,
h2,
h3 {
    font-family: Roboto, Arial, sans-serif;
    color: #f89420;
}

h4 {
    font-family: Roboto, Arial, sans-serif;
    font-size:115% !important;
    color:#662d91;
}

.vector-body blockquote {
    font-size: 150%;
    padding: 0;
    border: 0;
}
/* END Styling to match original wiki by Adebayo */

/*Remove Special Pages, Page Information, Related Changes, and Permanent Link links from Tools menu in left-hand Navigation bar*/
#t-specialpages,
#t-info,
#t-recentchangeslinked,
#t-permalink {
  display: none;
}

/*Added to scale and wrap images*/
img {
    max-width:100%;
    height:auto;
    image-rendering: -webkit-optimize-contrast !important;
}

@media only screen and (max-width: 1200px) {
.tabs-container td,
.how-to-table td {
    display: block;
    width: 95% !important;
    padding: 5px !important;
}

.tabs-container tr,
.how-to-table tr {
    width: 100%;
}


}



/* Tabbed container styling.  Adjusts margins for the <tabs> box and the <tab> content for each tab. */
.tabs-content, .tabs-tabbox {
  margin: 20px;
}

/* "How To" table styling.  This is the two column table.  Instructions are in the left column.  Screenshots are in the right column. */

.how-to-table {
  border-collapse: separate;
  border-spacing: 8px;
}

.how-to-table th, .how-to-table td {
  padding: 8px;
  vertical-align: top;
}

.how-to-table td:first-of-type {
  width:40%;
}

/* FYI Box Styling.  This is the one row, two column table for "FYI" information.*/
.fyi-box {
  border-spacing: 8px;
  margin: 12px !important;
}

.fyi-box td {
  padding: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  border: 4px solid #36b0a7;
  border-radius: 2px;
}

.fyi-box td:first-of-type {
  font-size:125%;
  background-color:#36b0a7;
  color: white;
  width:28px;
  text-align: center;
  vertical-align: middle;
}

/* Attention Box Styling.  This is the one row, two column table for "Attention" information, using the ⚠ (&#9888;) symbol*/
.attn-box {
  border-spacing: 8px;
  margin: 12px !important;
}

.attn-box td {
  padding: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  border: 4px solid #f89420;
  border-radius: 2px;
}

.attn-box td:first-of-type {
  font-size:250%;
  background-color:#f89420;
  color: white;
  width:28px;
  text-align: center;
  vertical-align: middle;
}

/* Download Box Styling.  This is the one row, two column table calling out ZIPs users can download. FYI: This uses [[File:Asset 22@4x.png]] in the first cell.*/
.download-box {
  border-spacing: 8px;
  margin: 12px !important;
  width: 100%;
}

.download-box td {
  padding: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  border: 2px solid #f89420;
  border-radius: 2px;
}

.download-box td:first-of-type {
  width:40px;
}