Welcome to the TWC Wiki! You are not logged in. Please log in to the Wiki to vote in polls, change skin preferences, or edit pages. See HERE for details of how to LOG IN.

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

From TWC Wiki
Jump to navigationJump to search
Line 1: Line 1:
/* Terminally confused with colors -
+
/* Terminally confused with colors so listed here -
 
Dark brown for borders - rgb(66, 49, 33)
 
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
 
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
Line 5: Line 5:
 
Yucky orangy color - rgb(207, 171, 121)
 
Yucky orangy color - rgb(207, 171, 121)
 
Creamy body bg - rgb(234, 220, 193)
 
Creamy body bg - rgb(234, 220, 193)
Dark Text - rgb(66, 49, 33)
+
Dark Text - 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) {
 
@media screen and (min-width:551px) {
 
body, div#globalWrapper {  
 
body, div#globalWrapper {  
Line 21: Line 19:
 
}
 
}
 
}
 
}
 +
/*over-rides additions needed for mobile width version*/
 
@media screen and (max-width:550px) {
 
@media screen and (max-width:550px) {
 
body, div#globalWrapper {
 
body, div#globalWrapper {
Line 44: Line 43:
 
   width: 12.2em;
 
   width: 12.2em;
 
   padding:0;
 
   padding:0;
   z-index:1;
+
   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-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-repeat: repeat-x, repeat-x;
   background-size: auto 3.5em, auto 3.5em;
+
   background-size: auto 3.2em, auto 3.2em;
 
   background-position: bottom, bottom;
 
   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*/
 
/*HORIZONTAL BUTTONS*/
Line 121: Line 124:
 
div#sidebar {
 
div#sidebar {
 
   width: 13.5em;
 
   width: 13.5em;
 +
  margin-top: -3.25em;
 
   padding-top: 0.5em;
 
   padding-top: 0.5em;
 
   padding-bottom: 1em;
 
   padding-bottom: 1em;
 
   background-color: rgb(207, 171, 121);
 
   background-color: rgb(207, 171, 121);
   border-top: 1px solid rgb(66, 49, 33);
+
   border-top: 3.25em solid rgb(141, 117, 83); /*this is to give the fake border above the fake bar under logo */
 
   box-shadow: -6px 6px 4px -4px rgba(0,0,0,0.5),
 
   box-shadow: -6px 6px 4px -4px rgba(0,0,0,0.5),
 
   5px 0 5px -5px rgba(0,0,0,0.6);  
 
   5px 0 5px -5px rgba(0,0,0,0.6);  
   z-index: 2;
+
   z-index: 1;
 
   position: relative;
 
   position: relative;
 
}
 
}

Revision as of 04:48, 29 April 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) */
/*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
}
}
/*over-rides additions needed for mobile width version*/
@media screen and (max-width:550px) {
body, div#globalWrapper {
background-image: none;
}
}
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.25em;
  padding-top: 0.5em;
  padding-bottom: 1em;
  background-color: rgb(207, 171, 121);
  border-top: 3.25em solid rgb(141, 117, 83); /*this is to give the fake border above the fake bar under logo */
  box-shadow: -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 CONTENT AND USER GENERATED CONTENT */
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);

}

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