MediaWiki:Vector.css: Difference between revisions

From Deceive Inc. Wiki
Jump to navigation Jump to search
(Created page with "→‎All CSS here will be loaded for users of the Vector skin: →‎Mobile styles: @media (max-width:700px) { #left-navigation { margin:40px 0 0 0; } #right-navigation { margin:40px 0 0 0; } .vector-menu-content-list { padding-left:0 !important; } #footer { padding: 0 12px 0 12px; margin-left:0; } #mw-head-base { margin-left:0; } #p-search { display:none; /*can be moved with js to where it was in o...")
 
No edit summary
 
Line 3: Line 3:
/*Mobile styles*/
/*Mobile styles*/
@media (max-width:700px) {
@media (max-width:700px) {
  /*break page names*/
  h1 {
      word-wrap:break-word;
  }
  /*remove spacing from head and navigation*/
  #mw-head-base {
      margin-left:0;
  }
   #left-navigation {
   #left-navigation {
       margin:40px 0 0 0;
       margin:43px 0 0 0;
   }
   }
   #right-navigation {
   #right-navigation {
       margin:40px 0 0 0;
       margin:43px 0 0 0;
   }
   }
   .vector-menu-content-list {
   .vector-menu-content-list {
       padding-left:0 !important;
       padding-left:0 !important;
   }
   }
  /*remove spacing from body*/
  #content.mw-body {
      margin:0 !important;
  }
  /*remove spacing from footer*/
   #footer {
   #footer {
       padding: 0 12px 0 12px;
       padding: 0 12px 0 12px;/*optional*/
       margin-left:0;
       margin-left:0;
   }
   }
   #mw-head-base {
  /*remove menu panel*/
       margin-left:0;
   #mw-panel {
      display:none;
  }
  /*mirror the dropdown to prevent it from overflowing the viewport when it's the first element from the right*/
  #p-cactions>div.vector-menu-content {
       right:-1px;
      left:-27.5833px;
  }
  /*flexbox to contain the following monstrosity*/
  #p-personal>div.vector-menu-content {
      display:flex;
  }
  /*flex styles for search bar moved with js*/
  div.vector-menu-content>#p-search{
      display:inline-block;
      flex-base:calc(100% - 215px);
      flex-shrink:1;
      flex-grow:1.55;
      min-width:144px;
  }
  /*the actual search bar has to fill the container*/
  #simpleSearch {
      width:100%;
      height:auto;
   }
   }
  /*flex styles on the menu list too*/
  ul.vector-menu-content-list {
      flex-base:215px;
      flex-shrink:1.55;
      flex-grow:2;
}
  /*backup styles in case js fails*/
   #p-search {
   #p-search {
       display:none; /*can be moved with js to where it was in older versions and displayed there*/
       display:none;
   }
   }
   #mw-panel {
  /*why do we even have this*/
   #pt-uls {
       display:none;
       display:none;
  }
  #content.mw-body {
      margin:0 !important;
   }
   }
}
}

Latest revision as of 16:35, 27 March 2024

/* All CSS here will be loaded for users of the Vector skin */

/*Mobile styles*/
@media (max-width:700px) {
   /*break page names*/
   h1 {
      word-wrap:break-word;
   }
   /*remove spacing from head and navigation*/
   #mw-head-base {
      margin-left:0;
   }
   #left-navigation {
      margin:43px 0 0 0;
   }
   #right-navigation {
      margin:43px 0 0 0;
   }
   .vector-menu-content-list {
      padding-left:0 !important;
   }
   /*remove spacing from body*/
   #content.mw-body {
      margin:0 !important;
   }
   /*remove spacing from footer*/
   #footer {
      padding: 0 12px 0 12px;/*optional*/
      margin-left:0;
   }
   /*remove menu panel*/
   #mw-panel {
      display:none;
   }
   /*mirror the dropdown to prevent it from overflowing the viewport when it's the first element from the right*/
   #p-cactions>div.vector-menu-content {
      right:-1px;
      left:-27.5833px;
   }
   /*flexbox to contain the following monstrosity*/
   #p-personal>div.vector-menu-content {
      display:flex;
   }
   /*flex styles for search bar moved with js*/
   div.vector-menu-content>#p-search{
      display:inline-block;
      flex-base:calc(100% - 215px);
      flex-shrink:1;
      flex-grow:1.55;
      min-width:144px;
   }
   /*the actual search bar has to fill the container*/
   #simpleSearch {
      width:100%;
      height:auto;
   }
   /*flex styles on the menu list too*/
   ul.vector-menu-content-list {
      flex-base:215px;
      flex-shrink:1.55;
      flex-grow:2;
}
   /*backup styles in case js fails*/
   #p-search {
      display:none;
   }
   /*why do we even have this*/
   #pt-uls {
      display:none;
   }
}