MediaWiki:Monobook.css: Difference between revisions

Revision as of 15:41, 14 June 2024

/* -------- CUSTOM NAMESPACE CSS -------- */
/*
Each wiki namespace can receive its own styling to match its game's theme.
Please note that both the standard and talk namespace should each receive the same attributes.
Styling per namespace will typically require it be labeled as "!important" in order for it to be applied over the site-wide styling.
*/
/* Kirby Super Star */
.ns-3000 #p-logo a, .ns-3001 #p-logo a { background-image: url(https://kirbyspeedrun.com/images/logos/kss-logo.png) !important; }
body.ns-3000, body.ns-3001 { background-image: url(https://kirbyspeedrun.com/images/backgrounds/kss-background.png) !important; }

/*KA*/
body.ns-3002, body.ns-3003 { background-image: url(https://kirbyspeedrun.com/images/backgrounds/ka-background.png) !important; }

/* KDL2 */
.ns-3004 #p-logo a, .ns-3005 #p-logo a { background-image: url(https://kirbyspeedrun.com/images/logos/kdl2-logo.png) !important; }

/* KDL3 */
.ns-3008 #p-logo a, .ns-3009 #p-logo a { background-image: url(https://kirbyspeedrun.com/images/logos/kdl3-logo.png) !important }

/* Kirby 64 */
body.ns-3010, body.ns-3011 { background-image: url(https://kirbyspeedrun.com/images/logos/k64-background.png) !important; }

/* NiDL */
.ns-3024 #p-logo a, .ns-3025 #p-logo a { background-image: url(https://kirbyspeedrun.com/images/logos/knidl-logo.png) !important; }

/*KatAM*/
body.ns-3026, body.ns-3027 { background-image: url(https://kirbyspeedrun.com/images/logos/katam-background.jpg) !important; }

/* Krtdl */
.ns-3038 #p-logo a, .ns-3039 #p-logo a { background-image: url(https://kirbyspeedrun.com/w/images/b/b2/Owlgulf_Icon.png) !important; }

/* RtDLDX */
.ns-3048 #p-logo a, .ns-3049 #p-logo a { background-image: url(https://kirbyspeedrun.com/images/logos/rtdldx-logo.png) !important; }


/*----------Main Page Styling-------------*/

body.page-Main_Page #content, body.page-Main_Page_ja #content { background-color: rgba(24, 13, 26, 0.87); }

h1, h2 { color: #ffe6ff; }
h3, h4, h5 { color: white; }

/* Main page header styling */
.mainpage-titles {
 font-family: Delfino;
 color: pink;0px 0px 10px rgb(252, 194, 255)
 margin-top: 20px;
 font-weight: bold;
 text-shadow: -2px 2px 5px #231F20, 2px 2px 5px #231F20;
}

.mainpage-main-category-title {
 font-size: 48px;
}

.mainpage-spinoff-category-title {
 font-size: 30px;
}


/* ---------- Site-wide Styling ---------- */
body {
 color: white;
 background-color: #181F4B;
 background-image: url("https://milkyway.ocremix.org/images/body.jpg");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
}

body #content {
 color: white;
 background: #1E1933;
 border-width: 3px;
 border-style: solid;
 border-color: rgb(151, 59, 255);
 -moz-border-radius-topleft: 1em;
 -moz-border-radius-bottomleft: 1em;
 -webkit-border-top-left-radius: 1em;
 -webkit-border-bottom-left-radius: 1em;
 border-top-left-radius: 1em;
 border-bottom-left-radius: 1em;
 khtml-border-top-left-radius: 1em;
 khtml-border-bottom-left-radius: 1em;
 -icab-border-top-left-radius: 1em;
 -icab-border-bottom-left-radius: 1em;
}

body #footer {
 background: rgba(24, 13, 26, 0.87);
 border-width: 3px;
 border-style: solid;
 border-color: rgb(151, 59, 255);
}

/*Link Colors*/
a, a:link, a.external, a:visited, a.external:visited {color: #ff99ff !important;}
a.new, a.new:visited {color: #FF3399 !important;}
a:hover, a.external:hover {color: #ff66cc !important;}
a:active, a.external:active {color: #9966ff !important;}

/*Differences between revisions page*/
.diff-deletedline .diffchange { background: #800040; }
.diff-deletedline { border-color: #800040; }
.diff-addedline .diffchange { background: #b30077; }
.diff-addedline { border-color: #b30077; }

/* Styling for picture boxes */
body .thumb { border-color: #white; }
body .thumbinner {
 background-color: #2A2435; 
}

/* --- Game Main Pages --- */
/* Game Info Boxes (info box that appears on each game's main page, can be used for templates and other things too) */
.game-info-box { background-color: #2a2435; }
.game-info-box-header { background-color: #3d374c; }

/* Page Link Lists */
.game-page-links-container {
 justify-content: space-around;
 display: flex;
 align-items: center;
 max-width: 100%;
 margin: 20px;
}

.game-page-links-container ul {
 list-style: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
}

.game-page-links-container li {
 vertical-align: top;
 margin-left: 15px;
 margin-right: 15px;
 text-align: left;
 display: inline-block;
 min-width: 300px;
 width: 20%;
}

/*Preferences Page*/
/*For some reason the dropdown colors wont change!!!*/
.oo-ui-dropdownWidget-handle .oo-ui-labelElement-label {
  color: black !important;
}
.oo-ui-optionWidget .oo-ui-labelElement-label {
  color: black !important;
}

body.page-Special_Preferences .mw-prefs-tabs-wrapper.oo-ui-panelLayout-framed, body.page-Special_Preferences .mw-prefs-tabs > .oo-ui-menuLayout-content > .oo-ui-indexLayout-stackLayout > .oo-ui-tabPanelLayout { background-color: transparent; border-color: transparent; }
.oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
  color: white !important;
}
body.page-Special_Preferences .oo-ui-toolbar-bar, body.page-Special_Preferences .oo-ui-popupWidget-popup, body.page-Special_Preferences .ve-ce-mwBlockImageNode > figcaption p, body.page-Special_Preferences .oo-ui-labelElement.oo-ui-labelElement-label, body.page-Special_Preferences .oo-ui-labelElement .oo-ui-labelElement-label{
  color: white !important;
}
body.page-Special_Preferences .oo-ui-buttonElement-framed > input.oo-ui-buttonElement-button, body.page-Special_Preferences .oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
  color: black !important;
}
body.page-Special_Preferences .mw-prefs-buttons {
  background-color: transparent;
  border-top: transparent;
}
body.page-Special_Preferences .oo-ui-tabSelectWidget-framed {
  background-color: transparent;
}
body.page-Special_Preferences .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected {
  background-color: transparent;
}

body.page-Special_Preferences .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget {
  border-width: 1px 1px 1px 1px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

body.page-Special_Preferences .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
  background-color: rgba(255,255,255,0.2);
}



/* Table Of Contents */
#toc {
 background: #2A2435;
 border-color: #645F6F;
 color: white;
}

.tocnumber {
    color: white;
}

.toctogglelabel {
    color: #FF3399;
}

#filetoc {
  text-align: left;
  border: transparent;
  background-color: transparent;
}

/* Category Links (bottom of page) */
.catlinks {
 background-color: transparent;
 border: 0;
}


/* Tables */
.wikitable {
    background-color: #1E1933;
    color: white;
}

.wikitable > tr > th, .wikitable > * > tr > th {
    background-color: #3D374C;
}

.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
    border: 1px solid #645F6F;
}

.mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend {
    background-color: #2A2435;
}

/*Sidebar*/
.portlet#p-navigation .pBody, .portlet#p-search .pBody, .portlet#p-tb .pBody {
    background-color: rgba(24, 13, 26, 0.87);
    border: 2px solid #1034A6;
}

.portlet#p-personal li a, .portlet#p-personal li a:visited {
    color: purple;
}

.pBody {
    background: transparent;
    border: 2px outset #1034A6;
    padding-left: 8px;
    margin: 2px 5px 0 5px;
    -webkit-border-radius: 15px 15px / 15px 15px;
    -moz-border-radius: 15px 15px;
    border-radius: 15px 15px;
}

.portlet h3 {
 color: #ff80aa;
 text-decoration: bold;
}

.pBody li a {
 color: #ffb3ff !important;
}

#p-personal a:hover {
    background: none !important;
    text-decoration: underline !important;
}

/*Search Box*/
.oo-ui-panelLayout-framed {
  background-color: #ffbdeb;
  border: 1px solid #b55b9a;
}

/*Tabs*/
#p-cactions li {
    border-radius: 10px 10px 0px 0px;
}

#p-cactions li a {
    border: none;
    border-radius: 10px 10px 0px 0px;
}

/* Tab Link Colors */
body.skin--responsive #p-cactions li, body.skin--responsive #p-cactions li a { background-color: #1E1933; }
body.skin--responsive #p-cactions li.selected, body.skin--responsive #p-cactions li.selected a  { background-color: rgb(151, 59, 255); }
body.skin--responsive #p-cactions li:hover, body.skin--responsive #p-cactions li a:hover { background-color: #732673; }
body.skin--responsive #p-cactions li:active, body.skin--responsive #p-cactions li a:active { background-color: #e6b3e6; }

/*Button Color*/
.oo-ui-buttonElement-framed.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
  background-color: #cde7f4;
  background-image: linear-gradient(to bottom,#fff2fb 0,#ffccf0 100%);
  border: 1px solid #ffbdeb;
}


/* ----- Extension Edits ------ */
/*
A lot of extensions are designed for sites that have a bright background.
The site is not designed with this in mind, so there are a lot of style changes to be made.
This goes for new extensions that are added in the future.
*/

/*Translation Extension*/
ol.references li:target, sup.reference:target { background-color: transparent; }
.mw-translate-fuzzy { background-color: rgb(72, 89, 117, .30); }
.grid.ext-translate-container .row, .tux-message-filter-box, .tux-breadcrumb { color: white; }
.tux-breadcrumb__item--aggregate { color:#ff99ff }
.oo-ui-toolbar-bar, .oo-ui-popupWidget-popup, .ve-ce-mwBlockImageNode > figcaption p, .oo-ui-labelElement .oo-ui-labelElement-label, .oo-ui-labelElement.oo-ui-labelElement-label { color: white; }
.mw-pt-translate-header {border: 0;}
.mw-pt-languages {background-color: transparent; border: 0;}
.grid .tux-message-editor .sourcemessage { color: black; }
.grid.ext-translate-container .row { background-color: transparent !important; }
.tux-messagelist, .tux-message-pagemode, .tux-pagemode-source { color: white !important; }
.tux-messagelist .tux-message-pagemode .tux-pagemode-translation { color: white; }

/*"Mark for Translation" page*/
body.page-Special_PageTranslation .oo-ui-toolbar-bar, .oo-ui-popupWidget-popup, body.page-Special_PageTranslation .ve-ce-mwBlockImageNode > figcaption p, body.page-Special_PageTranslation .oo-ui-labelElement .oo-ui-labelElement-label, body.page-Special_PageTranslation .oo-ui-labelElement.oo-ui-labelElement-label { color: white; }
.oo-ui-buttonElement-framed > input.oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: black; }

/* WikiEditor */
.wikiEditor-ui-toolbar .booklet > .index > div { color: black; }

/*Visual Editor Extension*/
.oo-ui-toolbar-bar, .oo-ui-popupWidget-popup, .ve-ce-mwBlockImageNode > figcaption p, .oo-ui-labelElement .oo-ui-labelElement-label, .oo-ui-labelElement.oo-ui-labelElement-label { color: black; }
.oo-ui-buttonElement-frameless.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: white; }
.oo-ui-icon-notice, .mw-ui-icon-notice::before { filter: drop-shadow(0px 0px 2px rgb(255, 255, 255)); }
.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #d45353 !important; }

/* Moderation */
#mw-editing-your-version { color: black; }


/* Difference Boxes Fix */
.diffchange .diff-side-added .diff-side-deleted {
   background-color: transparent !important;
}