MediaWiki:Vector.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.
:root{
--reveal-button-arrow-color: #fff;
--reveal-button-background-color: #323642;
--panel-background-color: rgba(29, 31, 38, 0.9);
--sidebar-entries-background-color: linear-gradient(to bottom,rgb(27, 27, 33, 0.95),rgb(23, 23, 33, 0.65));
}
/* For elements which only display in the mobile view */
.mobileonly {
display: none;
}
/* Sidebar */
/* Styles for collapsible sidebar sections, only shown if JS is enabled */
.client-js .vector-menu.mw-portlet.vector-menu-portal.portal:not(#p-navigation)::before{
content: '';
width: 1.23076923em;
height: 1.23076923em;
opacity: .84;
display: block;
position: absolute;
margin: 2px 0 0 -7rem;
filter: drop-shadow(14rem 0px 0px var(--fpheader-color));
}
.collapsed::before{
transform: scaleY(-1);
}
/********************************************
* Improved responsiveness for narrow widths *
*********************************************/
@media screen and (max-width:720px) {
#p-logo a {
margin-left: 18px;
}
/* fancy schmancy pull-out sidebar to save on screen space */
#mw-navigation #mw-panel {
position: fixed;
z-index: 999;
top: 0;
left: -13rem;
width: 12.5rem;
margin: 0;
padding: 0;
margin-top: 2.5rem;
max-height: calc(99vh - 2.5rem);
transition: 0.2s left ease-in-out;
overflow: auto;
background-color: var(--panel-background-color);
border: var(--wiki-content-border);
border-radius: var(--content-border-radius);
}
#mw-navigation #mw-panel a {
pointer-events: none;
}
#mw-navigation #mw-panel:hover {
left: 0;
margin-left: 5px;
}
#mw-navigation #mw-panel .vector-menu:hover a {
pointer-events: auto;
}
#mw-navigation #mw-panel::after {
content: '>';
display: block;
position: fixed;
left: 0;
top: 65vh;
background-color: var(--reveal-button-background-color);
font-size: 2rem;
padding: 0.5rem 0.75rem;
box-shadow: 0 0 4px 0px var(--reveal-button-background-color);
border-radius: 0 50% 50% 0;
transition: 0.2s opacity ease-in-out, 0.2s left ease-in-out;
color: var(--reveal-button-arrow-color);
opacity: 1;
}
#mw-navigation #mw-panel:hover::after {
opacity: 0;
left: -5rem;
}
#mw-navigation #mw-panel .portal {
width: auto;
margin: 4px 0.25em;
}
#mw-panel .portal:not(#p-claimWiki):not(#p-socialProfiles):not(#p-sitePromos) {
background: var(--sidebar-entries-background-color);
}
#mw-panel .portal .vector-menu-heading:not(#p-socialProfiles-label):not(#p-sitePromos-label) {
padding-right: 20px;
}
#mw-panel.collapsible-nav .portal .body {
margin: 5px;
}
#mw-panel.collapsible-nav .portal .body ul {
margin: 0;
}
:is(#mw-panel, #mw-panel.collapsible-nav) .portal .body ul li {
padding: 0.25em;
}
.vector-menu-dropdown .vector-menu-heading::after {
filter: drop-shadow(0px 0px 0.5px var(--fpheader-color));
}
/* end sidebar */