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) {
}
}