MediaWiki:Twc.css
From TWC Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 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 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;
}