User:Archimedes5000/vector.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 5: | Line 5: | ||
word-wrap:break-word; | word-wrap:break-word; | ||
} | } | ||
/*remove spacing from head | /*remove spacing from head and navigation*/ | ||
#mw-head-base { | #mw-head-base { | ||
margin-left:0; | margin-left:0; | ||
Line 36: | 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; | ||
flex-base:calc(100% - 215px); | |||
min-width: | 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; } }