Difference between revisions of "MediaWiki:Monobook.css"

Revision as of 10:30, 4 May 2020

/* CSS placed here will affect users of the MonoBook skin */
/* Terminally confused with colors so listed here -
Dark brown for borders - rgb(66, 49, 33)
Rusty color applied by image https://wiki.twcenter.net/images/8/8b/Rusty-color.png or rgb(156, 108, 58) or BG2.png from forum
Dark brown/greyer buttons/bars -rgb(141, 117, 83)
Yucky orangy color - rgb(207, 171, 121)
Creamy body bg - rgb(234, 220, 193)
Dark Text - rgb(66, 49, 33) */
/****************************************/
/* mobile width version*/
@media screen and (max-width:550px) {

body, div#globalWrapper, div#content, .mobile-menu-active, .mobile-menu-active h3 {
  background-image: none;
  background-color: rgb(234, 220, 193);
  color: rgb(66, 49, 33);
}
.mobile-menu-active, .menu-toggle, #p-cactions-mobile li, #searchBody {
    border: solid 1px rgb(66, 49, 33);
}
.mw-body {
   border-top: solid 1px rgb(66, 49, 33);
}
.mobile-menu-active ul {
    list-style-image: none;
    list-style-type: square;
}
table.info-right {
  width: auto;
  float: none;
}
} /**********END OF MOBILE SECTION - don't delete the '}' ! **************/
/***** MAIN BODY LINKS - common to both sizes (has to be above sidebar links *******/
a, .mw-parser-output a.external {
    color: #04B; 
}
a:hover, a:visited, a.external:visited, a.external:hover, .mw-parser-output a.external:visited, .mw-parser-output a.external:hover {
    color: #449;
}
/*********Things for full width version only - to save having to negate everything for mobile version!*********/
@media screen and (min-width:551px) {

body, div#globalWrapper { 
background-image: url("https://www.twcenter.net/forums/images/y2skin/Background2.png"), url("https://www.twcenter.net/forums/images/y2skin/Background7.png");
  background-position:0 0, 0 0;
  background-repeat: repeat-x, repeat;
  background-size: auto 14em, auto;
  background-clip: padding-box, padding-box;
}
.mw-body {
  margin: 4em 0 0 12.2em; /* sets the main content box position - match width with p-logo */
  z-index:3
}
body, div#globalWrapper {
  background-color: rgb(156, 108, 58);
}
div#p-personal {
  background-color: rgb(66, 49, 33);
  padding: 0.25em 0 0.4em 0;
  box-shadow:  inset 0 -6px 4px -4px rgba(0,0,0,0.8);
  z-index:0; 
}
#p-personal li a {
  color: rgb(234, 220, 193) ;
  padding: 0.25em 0.4em 0.4em 0.4em;
  font-size: 1em;
  font-weight: normal;
}
#p-personal a.new, #p-personal a.new:visited {
  color: rgb(207, 171, 121);
}
#p-personal a.new:hover {
  color:red;
}
#p-personal li a:hover {
  background-color:rgb(234, 220, 193);
  color:rgb(66, 49, 33);
}
#p-logo {
  top:0.5em;
  width: 12.2em;
  padding:0;
  z-index:2;
  background-image: url("https://www.twcenter.net/forums/images/buttons/newbtn_middle.png"), url("https://wiki.twcenter.net/images/8/8e/Dark-brown-buttons.png");
  background-repeat: repeat-x, repeat-x;
  background-size: auto 3.2em, auto 3.2em;
  background-position: bottom, bottom;
  border-bottom: 1px solid rgb(66, 49, 33);
}
#p-logo a:hover, #p-logo a {
    background-position: 70% 50% !important;
}
/*HORIZONTAL BUTTONS*/
div#p-cactions {
  position: absolute;
  padding:0;
  margin-top: 0.5em;
  left: 12.2em;
  width: auto;
  height: auto;
  line-height: 1em;
  font-size:1em; /* needed to make this line up with the content body */
}
div#p-cactions ul {
  font-size:95%;
  line-height: 1em;
  margin: 0;
  padding: 0.7em 0 1em 0;
  position: relative;
  width: auto;
  border-left: 1px solid rgb(66, 49, 33); /*to match edge of page*/
  border-right: 1px solid rgb(66, 49, 33);
}
#p-cactions li a, #p-cactions li.istalk a  {
  padding: 0.7em 1.3em 1em 1.3em;
  color: black;
  font-weight: normal;
  text-transform: capitalize;
  margin: 0 0 0 0;
  border-top: 1px solid rgb(141, 117, 83);
  border-left: 1px solid rgb(141, 117, 83);
  border-right: 1px solid rgb(141, 117, 83);
  background: rgb(141, 117, 83) url("https://www.twcenter.net/forums/images/buttons/newbtn_middle.png")   repeat-x;
  z-index: 1;
}
#p-cactions li.selected, #p-cactions li  {
  border: 0;
  margin: 0;
  background-color: transparent;
}
#p-cactions li.selected a {
  background-color: rgb(234, 220, 193);
  margin: 0;
  border: 0;
  border-top: 1px solid rgb(141, 117, 83);
  border-left: 1px solid rgb(234, 220, 193);
  border-right: 1px solid rgb(234, 220, 193);
  font-weight: bold;
  box-shadow: none;
  padding-bottom: 2em;
  z-index: 3;
}
#p-cactions li.selected a:hover, #p-cactions li a:hover {
  background-color: rgb(234, 220, 193);
  border-top: 1px solid rgb(141, 117, 83);
  border-left: 1px solid rgb(234, 220, 193);
  border-right: 1px solid rgb(234, 220, 193);
  box-shadow:  inset 0 10px 6px -4px rgba(141, 117, 83,0.2); 
  padding-bottom: 2em;
}
#p-cactions li.new a:hover, #p-cactions li.selected.new a {
  color: red;
}
#p-cactions li.new a  {
  color: black;
}
/* SIDEBAR NAVIGATION*/
div#sidebar {
  width: 13.5em;
  margin-top: -3.2em;
  padding-top: 3.7em;
  padding-bottom: 1em;
  background-color: rgb(207, 171, 121);
  border: 1px solid rgb(66, 49, 33); /*top gives the fake border above the fake bar under logo */
  border-left: none;
  box-shadow: inset   0 6px 0 0 rgba(141, 117, 83,1), 
  1px 5px 3px -1px rgba(66, 49, 33,0.3); 
  z-index: 1;
  position: relative;
}
.portlet a, .portlet.generated-sidebar a, .portlet.generated-sidebar a:visited, .portlet a:visited, .portlet.generated-sidebar a:hover, .portlet a:hover {
  color: rgb(66, 49, 33);
  font-size: 0.95em;
  font-weight: bold;
  padding-top: 0em;

}
.portlet ul, .portlet.generated-sidebar ul {
  list-style-image: none;
  list-style-type: none;
}
.mobile-menu-active, .pBody {
  background-color: rgb(234, 220, 193);
  border: 0;
}
div#p-navigation div, div#p-Important_Pages div, div#p-My_Sidebar div, div#p-search div, div#p-tb div, div#p-Visit_TWC div {
  background: rgb(234, 220, 193);
  border: none;
}
.portlet {
  width: 12.2em;
}
.portlet h3, .portlet.generated-sidebar h3 {
  display: inline-block;
  color: rgb(66, 49, 33);
  font-weight: bold;
  text-transform: uppercase;
  margin: 0.1em 0.9em 0.1em 0.9em;
}
input.searchButton {
  background-color: rgb(234, 220, 193);
  margin-top: 0.5em;
}

/* THE BOTTOM */
#footer {
  height:100%;
  background-color: rgb(66, 49, 33);
  border-top: 2px solid #000;
  border-bottom: 1px solid #000;
  font-size: 100%;
  color: rgb(240, 230, 210);
  margin: 1em 0 0 0;
  box-shadow:  0px 5px 3px -1px rgba(66, 49, 33,0.6), 0px 1000px 0 1000px rgba(156, 108, 58,1);   
}
#footer a {
    color: #FFF;
}
/* MAIN BODY */
div#content {
  font-size:1em;
  top: 0;
  border: 0;
  padding-left: 1.3em;
  color: rgb(66, 49, 33);
  background-color: rgb(234, 220, 193);
  border:1px solid rgb(66, 49, 33); 
  border-right:none; 
  box-shadow:  1px 5px 3px -1px rgba(66, 49, 33,0.3);

}
} /******************END OF FULL WIDTH SECTION - don't delete the '}' !**********************/
/* COMMON STUFF */
.toc, .mw-warning, .toccolours, .catlinks {
    background-color: rgb(253, 250, 243);
}
h3, h4, h5, h6 {
    font-weight: 500;
}
/* USER GENERATED CONTENT */
table.infobox th {
  background-color:rgb(207, 171, 121);
}
table.wikitable > tr > th, table.wikitable > * > tr > th {
    background: none repeat scroll 0 0 rgb(207, 171, 121);
    text-align: center;
}
table.wikitable, table.infobox {
  background:rgb(247, 236, 214);
}
/*TWC brown coloured versions of the front page boxes*/
.TWCportal_1, .TWCportal_2, .TWCportal_3 {    border: none;
    padding: .4em .9em .1em;
    color: black;
    vertical-align: top;
}
.TWCportal_1 {
    background: rgb(209,175,127);
    background: linear-gradient(180deg, rgba(207,171,121,0.5) 0%, rgba(207,171,121,0.25) 25%, rgba(207,171,121,0) 100%);
}
.TWCportal_2 {
    background: rgb(209,175,127);
    background: linear-gradient(180deg, rgba(141,117,83,0.5) 0%, rgba(141,117,83,0.25) 25%, rgba(141,117,83,0) 100%);
}
.TWCportal_3 {
    background: rgb(209,175,127);
    background: linear-gradient(180deg, rgba(157,115,66,0.5) 0%, rgba(157,115,66,0.25) 25%, rgba(157,115,66,0) 100%);
}
.TWCportal_1 h1 {
    margin: 0;
}
.TWCportal_2 h1 {
    margin: 0;
}
.TWCportal_3 h1 {
    margin: 0;
}