User:Archimedes5000/vector.css: Difference between revisions

From Deceive Inc. Wiki
Jump to navigation Jump to search
mNo edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
/*Mobile styles*/
/*Mobile styles*/
@media (max-width:700px) {
@media (max-width:700px) {
   /*remove spacing from head an navigation*/
  /*break page names*/
  h1 {
      word-wrap:break-word;
  }
   /*remove spacing from head and navigation*/
   #mw-head-base {
   #mw-head-base {
       margin-left:0;
       margin-left:0;
Line 18: Line 22:
       margin:0 !important;
       margin:0 !important;
   }
   }
   /*remove spacing from footer (optional)*/
   /*remove spacing from footer*/
   #footer {
   #footer {
       padding: 0 12px 0 12px;
       padding: 0 12px 0 12px;/*optional*/
       margin-left:0;
       margin-left:0;
   }
   }
Line 32: Line 36:
       left:-27.5833px;
       left:-27.5833px;
   }
   }
   /*styles for search bar moved with js*/
   /*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{
   div.vector-menu-content>#p-search{
       display:inline-block;
       display:inline-block;
       max-width:calc(100% - 210px);
       flex-base:calc(100% - 215px);
       min-width:175px;
      flex-shrink:1;
      flex-grow:1.55;
       min-width:144px;
   }
   }
  /*the actual search bar has to fill the container*/
   #simpleSearch {
   #simpleSearch {
       width:100%;
       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*/
   /*backup styles in case js fails*/
   #p-search {
   #p-search {
      display:none;
  }
  /*why do we even have this*/
  #pt-uls {
       display:none;
       display:none;
   }
   }
}
}

Latest revision as of 11:54, 24 March 2024

/*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;
   }
}