Difference between revisions of "MediaWiki:Common.css"

Revision as of 15:26, 16 December 2020

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

/* Site-wide elements */

/* Hiding titles on MP and Setting Portals */

body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
/* Code derived from the original Omniverse Nexus website */


/* ---Edits the top header--- */

div#mw-page-base {
background: none
}

/* --Anchor Recolour-- */  
a:link {
color: #48BCFF;
}
a:visited {
color: #c248ff;
}
a:hover {
color: #ffffff;
}
a.new {
color: #ca0000;
}
a:link.external {
color: #c248ff !IMPORTANT;
}
a.external:visited {
color: #c248ff !IMPORTANT;
}

/* --- Modify anchors in the personal navigation bar, top right --- */
#p-personal a.new {
color: #f24141
}

/* ANCHORS: NAVBOX, LEFT. Hovering over the link will cause it to "glow". */
#mw-panel .portal .body li a:hover{
text-shadow: 0px 0px 10px rgb(255,255,255);
}

/* --Navigation Bar Modification-- */

/* -Nav Background + Border- */
div#mw-panel {
border: 2px solid rgba(0,150,130,0.85);
border-radius: 0px 50px 30px 15px;
background-color: rgba(200,200,200,0.65);
box-shadow: inset 0px 0px 3px 3px rgba(0,150,130,0.4);
}

/* -Nav List Item Modification- */
div#mw-panel li
{
font-family: verdana;
font-weight: bold;
color: #ffffff;
}

/* -Nav Header Modification- */
div#mw-panel div.portal h3
{
font-family: "Verdana"; 
font-weight: bold;
text-decoration: underline;
font-size: 17px;
color: #ffffff;
}

/* --Main Page-- */
.main-page {
  align: center;
}

/* SEARCH BOX MODIFICATION */

/* SEARCH BOX Edits the physical look of the box, change the RGBA values to get the box easily visible. Also accept HTML standard colors, RGB, or #HEX. Color changes the text color in the box when typing. */
#simpleSearch input{
background-color: rgba(255,255,255,0.45);
border: 2px solid rgba(59,88,191,1);
color: rgb(40,40,40);
}

/* SEARCH BOX Placeholder text color when the search box is empty. */
#simpleSearch input::placeholder{
color: white;
}


/* ADDITIONAL SEARCH BOX MODIFICATIONS: OPTIONAL */
/* SEARCH BUTTON. This matches the button's animation queues to the default of the box. */
#searchButton{
transition-duration: 250ms, 250ms;
transition-timing-function: ease;
}

/* SEARCH BUTTON. Changes the color of the button when you hover over it. */
#searchButton:hover{
border-color: red;
}

/* SEARCH BUTTON. Changes the color of the button when you press and hold the mouse. MUST COME AFTER "hover" to work. */
#searchButton:active{
border-color: yellow;
}

/* SEARCH BOX "Focus" selector is not working properly. Active and Hover seem to work fine. Changes the color of the search box and button when hovered over with the cursor. */
#simpleSearch:hover #searchInput{
border-color: red;
}


/* MOVE BUTTON MODIFICATION */

/* MOVE BUTTON: Changes the button color and adds a gradient to make it similar to the others in the header */
.vectorMenu{
background: linear-gradient(RGBA(0,0,0,0), RGBA(255,255,255,0.2) 7%, RGBA(0,0,0,1) 35%);
border-top-right-radius: 8px;
}

/* MOVE BUTTON: Changes drop down menu color to black, adds a border to the top to separate it from the button. */
div#mw-head div.vectorMenu ul{
background-color: RGBA(0,0,0,1) !important;
border-top: 1px solid white !important;
}

/* --Page Content Modifications-- */

/* -Body Transparency- */
div.mw-body
{
background-color: RGBA(42, 42, 40, 0.7);
color: #ffffff;
}

/* -Body Content Transparency- */
div.mw-body-content
{
background-color: RGBA(42, 42, 40, 0.7);
}
table.mp-topbanner
{
background-color: RGBA(42, 42, 40, 0.7);
}

/* --Page Background-- */
html, body
{
background-color: RGBA(42, 42, 40, 1) !important;
}

/* --Header modifications-- */
div#content h1, div#content h2, div#content h3, div#content h4 {
    font-family: arial, sans-serif;
    color: #ffffff;
}

/* Navbar styling when nested in infobox and navbox */
.infobox .navbar {
    font-size: 100%;
}
.navbox .navbar {
    display: block;
    font-size: 100%;
}
.navbox-title .navbar {
    /* @noflip */
    float: left;
    /* @noflip */
    text-align: left;
    /* @noflip */
    margin-right: 0.5em;
}

/* 'show'/'hide' buttons created dynamically by the CollapsibleTables javascript
   in [[MediaWiki:Common.js]] are styled here so they can be customised. */
.collapseButton {
    /* @noflip */
    float: right;
    font-weight: normal;
    /* @noflip */
    margin-left: 0.5em;
    /* @noflip */
    text-align: right;
    width: auto;
}

/* Styling for JQuery makeCollapsible, matching that of collapseButton */
.mw-collapsible-toggle {
    font-weight: normal;
    /* @noflip */
    text-align: right;
}

/* Infobox template style */
.infobox {
    border: 1px solid #4D5155;
    border-spacing: 3px;
    background-color: #2a2a28;
    color: white;
    /* @noflip */
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em;
    /* @noflip */
    float: right;
    /* @noflip */
    clear: right;
    font-size: 88%;
    line-height: 1.5em;
}
.infobox caption {
    font-size: 125%;
    font-weight: bold;
    padding: 0.2em;
}
.infobox td,
.infobox th {
    vertical-align: top;
    /* @noflip */
    text-align: left;
}
.infobox.bordered {
    border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
    border: 1px solid #a2a9b1;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
    border: 0;
}

.infobox.sisterproject {
    width: 20em;
    font-size: 90%;
}

.infobox.standard-talk {
    border: 1px solid #c0c090;
    background-color: #f8eaba;
}
.infobox.standard-talk.bordered td,
.infobox.standard-talk.bordered th {
    border: 1px solid #c0c090;
}

/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
    border: 0;
    border-top: 1px solid #a2a9b1;
    /* @noflip */
    border-right: 1px solid #a2a9b1;
}

.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
    border: 0;
    /* @noflip */
    border-right: 1px solid #a2a9b1;
}

/* Styles for geography infoboxes, eg countries,
   country subdivisions, cities, etc.            */
.infobox.geography {
    border-collapse: collapse;
    line-height: 1.2em;
    font-size: 90%;
}

.infobox.geography  td,
.infobox.geography  th {
    border-top: 1px solid #a2a9b1;
    padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
    border-top: 1px solid #a2a9b1;
    padding: 0.4em 0.6em 0.2em 0.6em;
}

.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th {
    border: 0;
    padding: 0 0.6em 0.2em 0.6em;
}

.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th {
    border-top: 0;
    border-bottom: 1px solid #a2a9b1;
    padding: 0 0.6em 0.4em 0.6em;
}

.infobox.geography .maptable td,
.infobox.geography .maptable th {
    border: 0;
    padding: 0;
}

/* --New header bars (WIP)-- */
.bluebarleft {
  margin: 5px; 
  padding: 5px; 
  color: white; 
  font-size: 200%; 
  font-weight: bold;
  text-shadow: 1px 1px 2px #222;
  background: linear-gradient(to right, #1972D0, transparent); 
  width: 30ex
}

.bluebarleftshort {
  margin: 5px; 
  padding: 5px; 
  color: white; 
  font-size: 200%; 
  font-weight: bold;
  text-shadow: 1px 1px 2px #222;
  background: linear-gradient(to right, #1972D0, transparent); 
  width: 22ex
}

.bluebarright {
  margin: 5px; 
  padding: 5px; 
  color: white; 
  font-size: 200%; 
  font-weight: bold;
  text-shadow: 1px 1px 2px #222;
  background: linear-gradient(to right, transparent, #1972D0); 
  width: 30ex
}

.bluebarrightshort {
  margin: 5px; 
  padding: 5px; 
  color: white; 
  font-size: 200%; 
  font-weight: bold;
  text-shadow: 1px 1px 2px #222;
  background: linear-gradient(to right, transparent, #1972D0); 
  width: 22ex
}

.bluebarcenter {
  align: center;
  margin: 5px; 
  padding: 5px; 
  color: white; 
  font-size: 200%; 
  font-weight: bold;
  text-shadow: 1px 1px 2px #222;
  background: linear-gradient(to right, transparent, #1972D0, transparent); 
  width: 30ex
}

.headerbarleft {
  margin: 5px; 
  padding: 5px; 
  color: white; 
  font-size: 200%; 
  font-weight: bold;
  text-shadow: 1px 1px 2px #222;
  width: 30ex
}

.headerbarleftshort {
  margin: 5px; 
  padding: 5px; 
  color: white; 
  font-size: 200%; 
  font-weight: bold;
  text-shadow: 1px 1px 2px #222;
  width: 22ex
}

.headerbarcenter {
  align: center;
  margin: 5px; 
  padding: 5px; 
  color: white; 
  font-size: 200%; 
  font-weight: bold;
  text-shadow: 1px 1px 2px #222;
  width: 30ex
}

/* --Footer Modifications-- */
#footer
{
background-color: rgba(30, 30, 25, 1);
} 

/* Changes the plain text in the Footer to white. */
div#footer li{
color: white;
}
/* 
.mw-label {

background-color: lightgrey;


}
*/

.mw-input {
}

.mw-footer {


}


/* Special pages */
.mw-body-content{
background-color: rgba(42,42,40,0.6);

}

/* - Special:AllPages */
.mw-allpages-table-form,
.mw-allpages-nav {
}