Difference between revisions of "MediaWiki:Vector.css"

From Pangaea Wiki
Jump to: navigation, search
(rearranging code to make it responsive)
m
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
 
*{box-sizing:border-box}
 
*{box-sizing:border-box}
 
+
.mediawiki {background:#000 url('/skins/images/pang-bg-lower.jpg') top center no-repeat}
div#p-logo .mw-wiki-logo {display:none;}
+
div#p-logo .mw-wiki-logo {
 
+
  display:none;}
/* standard link colors */
+
#mw-page-base{
.mw-body a:link { color:#8a2405 } /* normal unvisited links */
+
  background:transparent;}
.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{
 
#content.mw-body{
 
   background:#F9E7B9;
 
   background:#F9E7B9;
   border:none;}
+
  margin:0;
 +
   border:none;}
 +
div#mw-panel{
 +
  background:#171717;}
 +
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-head .vectorTabs ul li { 
 +
  border-radius:10px 10px 0 0;
 +
  padding:0px 10px;
 +
  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;}
 +
#left-navigation{margin-left: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;}
  
/* Footer**************/
+
/******** Footer**************/
 
div#footer{
 
div#footer{
   background:#171717;}
+
   background:#171717;
div#footer ul li {color:#a55858}
+
  margin:0;}
 +
div#footer ul li {color:#c6bcb3}
 +
div#footer ul li a {color:#c6bcb3}
  
/* editing and code ******************/
+
/****************************
.editOptions{background:#f7e1a9}
+
GRID SUPPORT
#editform textarea{padding:5px 10px}
+
*********/
  
.mw-code,
+
@supports (display:grid) {
.thumb .thumbinner,
+
    .mediawiki {display:grid;}
.mw-search-profile-tabs,
+
   
pre, #toc,
+
    #mw-navigation{grid-area:navigation}
ul#pagehistory .selected,
+
    #content.mw-body{grid-area:content}
#catlinks
+
     div#footer{grid-area:footer}
  {
+
    
    background:#fff7e4;
+
     border:1px dashed #8a2405;
+
    color:#8a2405;
+
   }
+
  
#toc ul {margin:5px 10px}
+
/******** Navigation */
#catlinks {background: #f7e1a9;border:none;}
+
    div#mw-head{position:relative;bottom:0;}
 +
    #mw-navigation{display:flex;align-items:flex-end} 
 +
  #p-personal{position:absolute;top:-100%;}
 +
 
 +
    #left-navigation{float:none;margin:0}
 +
    #right-navigation{margin:0;}
 +
 
 +
    div#mw-navigation{position:relative}
 +
    div#mw-panel{left:0;top:90px;transform:translate(-100%)} 
 +
/******** editing and code ******************/
 +
    .editOptions{background:#f7e1a9}
  
h3#p-cactions-label span {color:#fff;}
+
    .mw-code,
 +
    .thumb .thumbinner,
 +
    .mw-search-profile-tabs,
 +
    pre, #toc,
 +
    ul#pagehistory .selected,
 +
    #catlinks
 +
      {
 +
        background:#fff7e4;
 +
        border:1px dashed #8a2405;
 +
        color:#8a2405;
 +
      }
  
@supports (display:grid) {
+
    #toc ul {margin:5px 10px}
   @media only screen and (min-width:900px) {
+
    #catlinks {background: #f7e1a9;border:none;}
    /* Grid system *******/
+
    h3#p-cactions-label span {color:#fff;} 
    #mw-page-base{background:transparent}
+
   
 
+
  /* SMALL */
    .mediawiki {background:#000 url(/skins/images/pang-bg-lower.jpg) top center no-repeat;display:grid;
+
   @media screen and (max-width:900px) {
 +
      .mediawiki {
 +
      grid-template-columns: auto ;
 +
      grid-template-rows:  80px auto 100px ;
 +
      grid-template-areas:
 +
        "navigation"
 +
        "content"
 +
        "footer";}
 +
      div#mw-panel{
 +
        position:fixed;
 +
        top:0;
 +
        left:0;
 +
        padding-bottom:8px;
 +
        border-radius:0  10px 10px  0;
 +
        transform:translateY(-100%);
 +
        transition:0.4s;}
 +
      #mw-panel:after{
 +
        content:'menu';
 +
        display:block;
 +
        position:absolute;
 +
        left:0;
 +
        bottom:-25px;
 +
        color:#731e00;
 +
        background:#fff;
 +
        padding:4px 10px;
 +
        border-radius:0 0 10px 10px;}
 +
      #mw-panel:hover{
 +
        transform:translate(0%);
 +
        transition:0.6s;} 
 +
    }
 +
  }
 +
  /* MEDIUM */
 +
  @media screen and (min-width:900px) {
 +
      .mediawiki {
 +
      background-position:top left;
 +
      grid-template-columns:150px auto;
 +
      grid-template-rows: 235px 60px auto 100px;
 +
      grid-template-areas:
 +
        ".  .        "
 +
        ".  navigation"
 +
        ".  content  "
 +
        ".  footer    ";}
 +
  }
 +
  /* med/large  */
 +
  @media screen and (min-width:1040px) {
 +
      .mediawiki {
 +
      background-position:top left;
 +
      grid-template-columns:150px 900px auto;  
 +
      grid-template-rows: 235px 60px auto 100px;
 +
      grid-template-areas:
 +
        ".  .        "
 +
        ".  navigation"
 +
        ".  content  "
 +
        ".  footer    ";}
 +
  }
 +
  /* LARGE */
 +
  @media screen and (min-width:1200px) { 
 +
      .mediawiki {
 +
      background-position:top center;
 
       grid-template-columns:auto 900px auto;  
 
       grid-template-columns:auto 900px auto;  
 
       grid-template-rows: 235px 60px auto 100px;
 
       grid-template-rows: 235px 60px auto 100px;
 
       grid-template-areas:
 
       grid-template-areas:
      ".  .            ."
+
        ".  .            ."
      ".  navigation  ."
+
        ".  navigation  ."
      ".  content      ."
+
        ".  content      ."
      ".  footer      .";
+
        ".  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) {
+
 
+
 
   }
 
   }
 
}
 
}

Latest revision as of 08:36, 17 November 2018


*{box-sizing:border-box}
.mediawiki {background:#000 url('/skins/images/pang-bg-lower.jpg') top center no-repeat}
div#p-logo .mw-wiki-logo {
  display:none;}
#mw-page-base{
  background:transparent;}
#content.mw-body{
  background:#F9E7B9;
  margin:0;
  border:none;} 
div#mw-panel{
  background:#171717;}
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-head .vectorTabs ul li {  
  border-radius:10px 10px 0 0;
  padding:0px 10px;
  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;}
#left-navigation{margin-left: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;}

/******** Footer**************/
div#footer{
  background:#171717;
  margin:0;}
div#footer ul li {color:#c6bcb3}
div#footer ul li a {color:#c6bcb3}

/****************************
GRID SUPPORT
*********/

@supports (display:grid) {
    .mediawiki {display:grid;}
    
    #mw-navigation{grid-area:navigation}
    #content.mw-body{grid-area:content}
    div#footer{grid-area:footer}
  

/******** Navigation */
    div#mw-head{position:relative;bottom:0;}
    #mw-navigation{display:flex;align-items:flex-end}  
  #p-personal{position:absolute;top:-100%;}
  
    #left-navigation{float:none;margin:0}
    #right-navigation{margin:0;}
  
    div#mw-navigation{position:relative}
    div#mw-panel{left:0;top:90px;transform:translate(-100%)}  
 /******** editing and code ******************/
    .editOptions{background:#f7e1a9}

    .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;}   
    
  /* SMALL */
  @media screen and (max-width:900px) {  
      .mediawiki {
      grid-template-columns: auto ; 
      grid-template-rows:  80px auto 100px ;
      grid-template-areas:
        "navigation"
        "content"
        "footer";}
      div#mw-panel{
        position:fixed;
        top:0;
        left:0;
        padding-bottom:8px;
        border-radius:0  10px 10px  0;
        transform:translateY(-100%);
        transition:0.4s;}
      #mw-panel:after{
        content:'menu';
        display:block;
        position:absolute;
        left:0;
        bottom:-25px;
        color:#731e00;
        background:#fff;
        padding:4px 10px;
        border-radius:0 0 10px 10px;}
      #mw-panel:hover{
        transform:translate(0%);
        transition:0.6s;}  
     } 
  }
   /* MEDIUM */
  @media screen and (min-width:900px) { 
      .mediawiki {
      background-position:top left;
      grid-template-columns:150px auto; 
      grid-template-rows: 235px 60px auto 100px;
      grid-template-areas:
        ".  .         "
        ".  navigation"
        ".  content   "
        ".  footer    ";}
  } 
  /* med/large  */
  @media screen and (min-width:1040px) { 
      .mediawiki {
      background-position:top left;
      grid-template-columns:150px 900px auto; 
      grid-template-rows: 235px 60px auto 100px;
      grid-template-areas:
        ".  .         "
        ".  navigation"
        ".  content   "
        ".  footer    ";}
  }
  /* LARGE */
  @media screen and (min-width:1200px) {  
      .mediawiki {
      background-position:top center;
      grid-template-columns:auto 900px auto; 
      grid-template-rows: 235px 60px auto 100px;
      grid-template-areas:
        ".  .            ."
        ".  navigation   ."
        ".  content      ."
        ".  footer       .";}
  }
}