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 "MediaWiki:Twc.css"

From TWC Wiki
Jump to navigationJump to search
(Add front-page styles so they can be skin-specific)
(remove note - that one's not in use)
 
(28 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
body {
+
/* CSS placed here will affect users of the MonoBook skin */
−
     background: #F4E9DF;
+
/* Terminally confused with colors so listed here -
−
     color: #6D6155;
+
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) {
  
−
a:link, a:visited, #p-cactions li a {
+
body, div#globalWrapper {
−
    color: #2062A3;
+
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 {
−
a:hover, a:active {
+
  color: red;
−
    color: #8C2B39;
 
 
}
 
}
−
 
+
#p-cactions li.new a  {
−
h1, h2, h3, h4, h5, h6, .pBody {  
+
  color: black;
−
    color: inherit;
 
 
}
 
}
−
 
+
/* SIDEBAR NAVIGATION*/
−
#content, #footer {
+
div#sidebar {
−
    background: #E9DED4;
+
  width: 13.5em;
−
    color: #473D33;
+
  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;
  
−
#content {
 
−
    border: 2px solid #CEBEAE;
 
 
}
 
}
−
 
+
.portlet ul, .portlet.generated-sidebar ul {
−
#footer {
+
  list-style-image: none;
−
    border: 2px solid #CEBEAE;
+
  list-style-type: none;
−
    border-width: 2px 0;
 
 
}
 
}
−
#content table {
+
.mobile-menu-active, .pBody {
−
    background: #E9DED4;
+
  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 {
−
.mw-h1, .mw-h2, .mw-h3, .mw-h4, .mw-h5, .mw-h6 {
+
  background: rgb(234, 220, 193);
−
    font-weight: bolder;
+
  border: none;
 
}
 
}
−
 
−
/* Left portlets */
 
 
.portlet {
 
.portlet {
−
    margin-bottom: 0;
+
  width: 12.2em;
−
    margin-top: 0;
+
}
 +
.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;
 
}
 
}
  
−
.portlet h5, .portlet h6 {
+
/* THE BOTTOM */
−
    display: none;
+
#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 {
−
.pBody {
+
     color: #FFF;
−
     border: none;
 
−
    background: #838492;
 
 
}
 
}
 +
/* 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);
  
−
.pBody ul {
 
−
    list-style-type: none;
 
−
    list-style-image: none;
 
−
    padding: 0;
 
−
    margin: 0;
 
 
}
 
}
−
 
+
} /******************END OF FULL WIDTH SECTION - don't delete the '}' !**********************/
−
.pBody li {
+
/* COMMON STUFF */
−
     padding: 0.1em 0;
+
.toc, .mw-warning, .toccolours, .catlinks {
 +
     background-color: rgb(253, 250, 243);
 
}
 
}
−
 
+
h3, h4, h5, h6 {
−
.pBody a:link, .pBody a:visited, .pBody a:hover {
+
     font-weight: 500;
−
     color: white;
 
 
}
 
}
−
 
+
/* USER GENERATED CONTENT */
−
/* Content actions */
+
table.infobox th {
−
 
+
  background-color:rgb(207, 171, 121);
−
#p-cactions ul {
 
−
    /* Same as normal ul */
 
−
    margin: 0.3em 0 0 1.5em;
 
 
}
 
}
−
 
+
table.wikitable > tr > th, table.wikitable > * > tr > th {
−
#p-cactions li.selected a {
+
     background: none repeat scroll 0 0 rgb(207, 171, 121);
−
     background-color: #E9DED4;
+
    text-align: center;
 
}
 
}
−
 
+
table.wikitable, table.infobox {
−
#p-cactions li a {
+
  background:rgb(247, 236, 214);
−
    /* Slightly darker */
 
−
    background-color: #E3D8C8;
 
 
}
 
}
−
 
+
/*TWC brown coloured versions of the front page boxes*/
−
 
+
.TWCportal_1, .TWCportal_2, .TWCportal_3 {   border: none;
−
/* Front page */
+
     padding: .4em .9em .1em;
−
 
 
−
.frontpage-wikinews, .frontpage-generalmodding, .frontpage-m2tw {
 
−
    border: 2px solid grey;
 
−
     padding: .4em .9em .9em;
 
 
     color: black;
 
     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 {
−
.frontpage-wikinews {
+
     margin: 0;
−
     width: 25%;
 
−
    background-color: #d7c7c7;
 
 
}
 
}
−
 
+
.TWCportal_2 h1 {
−
.frontpage-generalmodding {
+
     margin: 0;
−
     background-color: #e5e0df;
 
 
}
 
}
−
 
+
.TWCportal_3 h1 {
−
.frontpage-m2tw {
+
     margin: 0;
−
     width: 65%;
 
−
    background-color: #cdc7c7;
 
 
}
 
}

Latest revision as of 10:18, 15 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 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;
}
Retrieved from "https://wiki.twcenter.net/index.php?title=MediaWiki:Twc.css&oldid=82120"