Difference between revisions of "MediaWiki:Twc.css"
From TWC Wiki
Jump to navigationJump to search (fix in case of pagebanner) |
(remove note - that one's not in use) |
||
(8 intermediate revisions by the same user not shown) | |||
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 { | |
− | + | 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 | + | .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 */ | |
− | background-color: | + | .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); |
− | background- | + | 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 | + | 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%); | |
− | |||
− | |||
− | background: | ||
− | |||
− | |||
} | } | ||
− | + | .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; | |
} | } |
Latest revision as of 11: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; }