Difference between revisions of "User:Makanyane/monobook.css"

Revision as of 08:28, 1 May 2020

/* 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 {
  background-image: none;
  background-color: rgb(234, 220, 193);
  color: rgb(66, 49, 33);
}

}

/****************************************/
/*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;
}
.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(214, 200, 176);
  font-size: 1em;
  font-weight: normal;
}
#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*/
.portlet ul, {

}
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;
}
.mobile-menu-active#p-cactions li a {
  background-color: rgb(157, 115, 66);
  color: black;
  border: 0;
  padding-bottom: 0;
}
/* 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-top: 1px solid rgb(66, 49, 33); /*this is to give the fake border above the fake bar under logo */
  box-shadow: inset   0 6px 0 0 rgba(141, 117, 83,1), 
  -6px 6px 4px -4px rgba(0,0,0,0.5),
  5px 0 5px -5px rgba(0,0,0,0.6); 
  z-index: 1;
  position: relative;
}
div#sidebar::after {
  background: url("https://www.twcenter.net/forums/images/y2skin/Background2.png") repeat-x;
  background-origin: border-box;
}
.portlet a, .portlet.generated-sidebar a {
  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: normal;
  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 {
  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:  0 6px 4px -4px rgba(0,0,0,0.4); 
}
#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:  0 5px 4px -4px rgba(66, 49, 33, 0.6);

}
} /******************END OF FULL WIDTH SECTION - don't delete the } !**********************/

/* 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);
}