MediaWiki:Vector.css: Difference between revisions
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: | margin:43px 0 0 0; | ||
} | } | ||
#right-navigation { | #right-navigation { | ||
margin: | 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- | /*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 { | #p-search { | ||
display:none; | display:none; | ||
} | } | ||
# | /*why do we even have this*/ | ||
#pt-uls { | |||
display:none; | display:none; | ||
} | } | ||
} | } |
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; } }