Difference between revisions of "MediaWiki:Vector.css"

From Pangaea Wiki
Jump to: navigation, search
m
(rearranging code to make it responsive)
Line 1: Line 1:
/* CSS placed here will affect users of the Vector skin */
 
 
 
*{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 */
 
/* 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 ************/
 
/* Navigation ************/
#mw-navigation{grid-area:navigation;display:flex;align-items:flex-end;position:relative}
 
  div#mw-head{position:initial;bottom: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;}
 
 
/* 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;}
 
 
/* 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 **************/
 
#content.mw-body{
 
#content.mw-body{
  grid-area:content;
 
  margin:0;
 
 
   background:#F9E7B9;
 
   background:#F9E7B9;
 
   border:none;}
 
   border:none;}
Line 90: Line 21:
 
/* Footer**************/
 
/* Footer**************/
 
div#footer{
 
div#footer{
  grid-area:footer;
+
   background:#171717;}
   background:#171717;
+
  margin:0;}
+
 
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) {

  }
}