MediaWiki:Common.css: Difference between revisions

Revision as of 17:13, 7 March 2024

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

/*Vector 2022 styling*/

.mw-logo-wordmark {
    border: 0 !important;
    vertical-align: middle !important;
    display: block !important;
    margin: 0 auto !important;
    width: 6.5em !important;
    height: 2.5em !important;
}

.mw-page-container, .mw-workspace-container, .mw-content-container, .vector-sticky-header, .mw-article-toolbar-container {
    max-width: unset;
}

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

/* Hides the "Discussion" tab */
#ca-talk {
  display: none;
}

/* Hides the "Talk" link */
#pt-mytalk {
  display: none;
}

/* Hides the Watchlist tab and link */
#ca-unwatch, #ca-watch, #pt-watchlist {
  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;
}

h2 {
  font-family: Roboto, Arial, sans-serif;
  color: #f89420;
  font-size:24px !important;
}

h3 {
    font-family: Roboto, Arial, sans-serif;
    color: #f89420;
    font-size:20px !important;
}

h4 {
    font-family: Roboto, Arial, sans-serif;
    font-size:18px !important;
    color:#f89420;
    font-style: italic;
    font-weight: normal !important;
}

h5 {
    font-family: Roboto, Arial, sans-serif;
    font-size:16px !important;
    color:#f89420;
    font-weight: normal !important;
}

.vector-body blockquote {
    font-size: 125%;
    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-top: 12px !important;
  margin-bottom: 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 96%;
}

.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-top: 12px !important;
  margin-bottom: 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 96%;
}

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

.attn-box td:first-of-type {
  font-size:200%;
  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-top: 12px !important;
  margin-bottom: 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 96%;
}

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

/* WIP Box Styling.  This is the one row, two column table for "Work In Progress" warning*/
.wip-box {
  border-spacing: 8px;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 96%;
}

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

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

/* Important Box Styling.  This is the one row, two column table for "ultra important" information, using the double exclamation mark (&#8252;) symbol*/
.important-box {
  border-spacing: 8px;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 96%;
}

.important-box td {
  padding: 8px;
  padding-top: 2px;
  padding-bottom: 2px;
  border: 4px solid #662d91;
  border-radius: 2px;
}

.important-box td:first-of-type {
  font-size:200%;
  background-color:#662d91;
  color: white;
  width:28px;
  text-align: center;
  vertical-align: middle;
}

/* This is for extremely rare circumstances that probably won't ever happen again.  Talk to Dylan for more info. */
.inner-box td {
  padding: 0px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  border: none !important;
  font-size: 100% !important;
  background-color: white !important;
  color: black !important;
  width: auto !important;
  text-align: left !important;
  vertical-align: top !important;
}

/* Images should be responsive */
img {
max-width:90%;
height:auto;
}