MediaWiki:Gadget-mobileMenuToggle.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* Developed by westgrass */
/* Decoupled and turned into a gadget by Mr Pie 5 */
/* Source code: https://apexlegends.wiki.gg/wiki/MediaWiki:Gadget-mobileMenuToggle.js / https://apexlegends.wiki.gg/wiki/MediaWiki:Gadget-mobileMenuToggle.css */
/* screen and (max-width:900px) */
@media screen and (max-width: 720px) {
:root {
--logo-height:5rem;
--upper-nav-height: 48px;
--lower-nav-height: 3.1rem;
}
.content-wrapper {
position:relative;
margin-top:35px;
}
#mw-navigation {
position:absolute;
top:0px;
z-index:2;
height:calc(var(--logo-height) + var(--upper-nav-height));
width:100%;
}
#mw-head-base,
#mw-page-base {
display:none;
}
#mw-head {
top:var(--logo-height);
}
#p-logo {
position:absolute;
top:calc(var(--logo-height) * -1);
height:var(--logo-height);
width: 100%;
}
#p-logo a {
width:100%;
height:100%;
}
#mw-panel {
display: block;
margin-top:var(--logo-height);
margin-left: 0;
width:100%;
height:var(--upper-nav-height);
float:unset;
position:relative;
}
#mw-panel .portal {
box-sizing: border-box;
display: none;
box-shadow: none;
border-left: 1px solid rgba(255,255,255,0.2);
border-right: 1px solid rgba(255,255,255,0.2);
margin: 0;
border-radius: 0;
}
div#mw-panel div.portal:not(#p-claimWiki):not(#p-socialProfiles):not(#p-sitePromos) {
margin:0;
}
#mw-panel .portal .vector-menu-heading {
padding: 0 12px 4px;
margin-top:0;
border: 0;
display: block;
background: none;
}
#mw-panel .portal .vector-menu-heading::after {
display: none;
}
#mw-panel .portal:hover .vector-menu-heading {
background: none;
}
#mw-panel .portal .body {
display: block !important; /* !important is required, since there is inline-css from sidebar collapse/expand */
position: unset;
border: 0;
background: none;
backdrop-filter: none;
padding: 4px 12px;
margin:0;
width: 100%;
box-sizing:border-box;
}
#mw-panel .portal .body ul {
padding: 0;
display: flex;
flex-flow:row wrap;
justify-content: unset;
}
#mw-panel .portal .body li a {
padding: 4px 8px;
white-space: nowrap;
}
#mw-panel .portal:last-child {
padding-bottom: 12px;
border-bottom: 1px solid rgba(255,255,255,0.2);
}
#mw-panel .menu-toggle {
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-category-2' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M14 4h6v6h-6z'%3E%3C/path%3E%3Cpath d='M4 14h6v6h-6z'%3E%3C/path%3E%3Cpath d='M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'%3E%3C/path%3E%3Cpath d='M7 7m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--theme-link-color);
cursor: pointer;
display: block;
flex: 0 0 auto;
width: 24px;
height: 24px;
margin: 5px 12px;
position:absolute;
bottom:12px;
}
#mw-panel .menu-toggle.expanded ~ .portal {
display: block;
}
#mw-panel .menu-toggle + .portal {
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.2);
}
#left-navigation,
#right-navigation {
margin-top:var(--upper-nav-height);
}
#left-navigation,
#right-navigation,
.vector-menu-tabs-legacy li a {
height:var(--lower-nav-height);
}
.vector-search-box {
position:absolute;
top:0;
right:0.5em;
margin:0;
float:none;
}
.vector-search-box-inner {
width: calc(100vw - 1em - 48px);
}
.mw-body {
margin-top:var(--logo-height);
padding-top:calc(var(--upper-nav-height) + var(--lower-nav-height));
}
}