Monobook.css: Difference between revisions
From TWC Wiki
this should now be old medieval coloured TWC wiki skin |
GrnEyedDvl (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* CSS placed here will affect users of the MonoBook skin */ | ||
div#globalWrapper { | /* 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 { | 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 { | |||
a | color: rgb(207, 171, 121); | ||
} | } | ||
#p-personal a.new:hover { | |||
a | color:red; | ||
} | } | ||
#p-personal li a:hover { | |||
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; | |||
background: | |||
} | } | ||
/*HORIZONTAL BUTTONS*/ | |||
div. | 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. | 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, #p-Wiki_Editing div{ | |||
background: rgb(234, 220, 193); | |||
border: none; | |||
} | } | ||
.portlet | .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%); | |||
background: | |||
} | } | ||
.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: | 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 { | .TWCportal_1 h1 { | ||
margin: 0; | |||
} | } | ||
.TWCportal_2 h1 { | .TWCportal_2 h1 { | ||
margin: 0; | |||
} | } | ||
.TWCportal_3 h1 { | .TWCportal_3 h1 { | ||
margin: 0; | |||
} | } | ||
Revision as of 20:40, 1 April 2025
/* 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, #p-Wiki_Editing 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;
}