Difference between revisions of "MediaWiki:Vector.css"
From Pangaea Wiki
MyraMidnight (Talk | contribs) m |
MyraMidnight (Talk | contribs) (rearranging code to make it responsive) |
||
Line 1: | Line 1: | ||
− | |||
− | |||
*{box-sizing:border-box} | *{box-sizing:border-box} | ||
Line 13: | Line 11: | ||
.mw-body a:link.external { } /* external links */ | .mw-body a:link.external { } /* external links */ | ||
.mw-body a:link.stub { } /* hovered links */ | .mw-body a:link.stub { } /* hovered links */ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/* Navigation ************/ | /* Navigation ************/ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/* Content **************/ | /* Content **************/ | ||
#content.mw-body{ | #content.mw-body{ | ||
− | |||
− | |||
background:#F9E7B9; | background:#F9E7B9; | ||
border:none;} | border:none;} | ||
Line 90: | Line 21: | ||
/* Footer**************/ | /* Footer**************/ | ||
div#footer{ | div#footer{ | ||
− | + | background:#171717;} | |
− | background:#171717 | + | |
− | + | ||
div#footer ul li {color:#a55858} | div#footer ul li {color:#a55858} | ||
Line 98: | Line 27: | ||
.editOptions{background:#f7e1a9} | .editOptions{background:#f7e1a9} | ||
#editform textarea{padding:5px 10px} | #editform textarea{padding:5px 10px} | ||
− | |||
.mw-code, | .mw-code, | ||
Line 116: | Line 44: | ||
h3#p-cactions-label span {color:#fff;} | h3#p-cactions-label span {color:#fff;} | ||
+ | |||
+ | @supports (display:grid) { | ||
+ | @media only screen and (min-width:900px) { | ||
+ | /* Grid system *******/ | ||
+ | #mw-page-base{background:transparent} | ||
+ | |||
+ | .mediawiki {background:#000 url(/skins/images/pang-bg-lower.jpg) top center no-repeat;display:grid; | ||
+ | grid-template-columns:auto 900px auto; | ||
+ | grid-template-rows: 235px 60px auto 100px; | ||
+ | grid-template-areas: | ||
+ | ". . ." | ||
+ | ". navigation ." | ||
+ | ". content ." | ||
+ | ". footer ."; | ||
+ | } | ||
+ | |||
+ | /* Navigation *******/ | ||
+ | #mw-navigation{grid-area:navigation;display:flex;align-items:flex-end;position:relative} | ||
+ | |||
+ | div#mw-head{position:initial;bottom:0;} | ||
+ | |||
+ | /* Navigation tabs (read,edit,history... ) */ | ||
+ | div.vectorTabs, | ||
+ | div.vectorTabs ul, | ||
+ | div.vectorTabs ul li, | ||
+ | div.vectorTabs ul li span, | ||
+ | div.vectorTabs h3 span | ||
+ | {background:none;} | ||
+ | |||
+ | #left-navigation{float:none;margin:0} | ||
+ | #right-navigation{margin:0;} | ||
+ | |||
+ | #mw-head .vectorTabs ul li { | ||
+ | border-radius:10px 10px 0 0; | ||
+ | padding:0px 10px; | ||
+ | margin-right:2px; | ||
+ | background: #8a2405; | ||
+ | color:#fff; | ||
+ | border-right:2px #4c1300 solid;} | ||
+ | |||
+ | #mw-head .vectorTabs a{color:#fff;} | ||
+ | #mw-head .vectorTabs .selected{background:#F9E7B9;} | ||
+ | #mw-head .vectorTabs .selected a{color:#000;} | ||
+ | |||
+ | /* sidebar panel*/ | ||
+ | #mw-panel, #p-personal { | ||
+ | position:absolute; | ||
+ | top:100px; | ||
+ | background:#171717; | ||
+ | padding-bottom:16px; | ||
+ | width:152px; | ||
+ | margin:0} | ||
+ | |||
+ | div#mw-head{position:initial;} | ||
+ | div#mw-panel div.portal h3, | ||
+ | div#mw-panel div.portal div.body ul li a, | ||
+ | div#mw-panel div.portal div.body ul li a:visited, | ||
+ | #p-personal a | ||
+ | {color:#c6bcb3} | ||
+ | |||
+ | #mw-panel{ | ||
+ | transform:translate(-100%); | ||
+ | border-radius:10px 0 0 10px;} | ||
+ | |||
+ | #p-personal { | ||
+ | transform:translate(100%); | ||
+ | border-radius: 0 10px 10px 0 ; | ||
+ | right:0; | ||
+ | padding:16px 8px 16px 0; | ||
+ | } | ||
+ | |||
+ | #p-personal ul {padding:10px;} | ||
+ | #p-personal li {float:none;} | ||
+ | |||
+ | /* Content *********/ | ||
+ | #content.mw-body{ | ||
+ | grid-area:content; | ||
+ | margin:0;} | ||
+ | |||
+ | /* Footer **********/ | ||
+ | grid-area:footer; | ||
+ | margin:0;} | ||
+ | } | ||
+ | @media only screen and (min-width:970px) { | ||
+ | |||
+ | } | ||
+ | } |
Revision as of 08:52, 15 July 2018
*{box-sizing:border-box} div#p-logo .mw-wiki-logo {display:none;} /* standard link colors */ .mw-body a:link { color:#8a2405 } /* normal unvisited links */ .mw-body a:link:active { } /* active links */ .mw-body a:link.new { color:red;} /* new links */ .mw-body a:visited.new { color:red; } /* new links */ .mw-body a:link.interwiki { } /* interwiki links */ .mw-body a:link.external { } /* external links */ .mw-body a:link.stub { } /* hovered links */ /* Navigation ************/ /* Content **************/ #content.mw-body{ background:#F9E7B9; border:none;} /* Footer**************/ div#footer{ background:#171717;} div#footer ul li {color:#a55858} /* editing and code ******************/ .editOptions{background:#f7e1a9} #editform textarea{padding:5px 10px} .mw-code, .thumb .thumbinner, .mw-search-profile-tabs, pre, #toc, ul#pagehistory .selected, #catlinks { background:#fff7e4; border:1px dashed #8a2405; color:#8a2405; } #toc ul {margin:5px 10px} #catlinks {background: #f7e1a9;border:none;} h3#p-cactions-label span {color:#fff;} @supports (display:grid) { @media only screen and (min-width:900px) { /* Grid system *******/ #mw-page-base{background:transparent} .mediawiki {background:#000 url(/skins/images/pang-bg-lower.jpg) top center no-repeat;display:grid; grid-template-columns:auto 900px auto; grid-template-rows: 235px 60px auto 100px; grid-template-areas: ". . ." ". navigation ." ". content ." ". footer ."; } /* Navigation *******/ #mw-navigation{grid-area:navigation;display:flex;align-items:flex-end;position:relative} div#mw-head{position:initial;bottom:0;} /* Navigation tabs (read,edit,history... ) */ div.vectorTabs, div.vectorTabs ul, div.vectorTabs ul li, div.vectorTabs ul li span, div.vectorTabs h3 span {background:none;} #left-navigation{float:none;margin:0} #right-navigation{margin:0;} #mw-head .vectorTabs ul li { border-radius:10px 10px 0 0; padding:0px 10px; margin-right:2px; background: #8a2405; color:#fff; border-right:2px #4c1300 solid;} #mw-head .vectorTabs a{color:#fff;} #mw-head .vectorTabs .selected{background:#F9E7B9;} #mw-head .vectorTabs .selected a{color:#000;} /* sidebar panel*/ #mw-panel, #p-personal { position:absolute; top:100px; background:#171717; padding-bottom:16px; width:152px; margin:0} div#mw-head{position:initial;} div#mw-panel div.portal h3, div#mw-panel div.portal div.body ul li a, div#mw-panel div.portal div.body ul li a:visited, #p-personal a {color:#c6bcb3} #mw-panel{ transform:translate(-100%); border-radius:10px 0 0 10px;} #p-personal { transform:translate(100%); border-radius: 0 10px 10px 0 ; right:0; padding:16px 8px 16px 0; } #p-personal ul {padding:10px;} #p-personal li {float:none;} /* Content *********/ #content.mw-body{ grid-area:content; margin:0;} /* Footer **********/ grid-area:footer; margin:0;} } @media only screen and (min-width:970px) { } }