MediaWiki:Vector-2022.css

/* This controls the default (new) Vector skin bundled in MW1.39 and above (vector-2022). The legacy vector skin code is on MediaWiki:Vector.css.

MediaWiki:Vector.css runs before this file, changes to both vector skins should be added there.

Note: skin-vector and skin-vector-2022 classes can also be used.

When responsive is ticked in user preferences the .skin--responsive class is used

/* Wordmark color defaults to blue so set to MEAction red, mostly affects small screens */
.mw-logo-wordmark  { 
    color: #E7453A;
    background: white;
}
/* always hide Wordmark image which currently shows on 1024px non-responsive, giving dual logos */
.mw-logo-container {
    display: none;
}


@media screen and (max-width: 999px) {
/* Code from https://www.mediawiki.org/wiki/User:Quiddity/Vector-2022-condensed.css
*/

:not(.skin--responsive) .mw-logo-container {
    display: none;
}
:not(.skin--responsive) .mw-logo-icon {
    display: block;
  }
.skin--responsive .mw-logo-container {
    display: none;
}
.skin--responsive .mw-logo-icon {
    display: block;
  }
}
@media screen and (max-width: 768px) {
/* Code from https://www.mediawiki.org/wiki/User:Quiddity/Vector-2022-condensed.css
*/
/* Remove whitespace beside Search box */
.mw-logo {
  min-width: unset !important;
  left: 0;
}
/* shrink sidebar */
#mw-panel {
    width: 150px !important;
    margin: 0;
    padding: 0;
}
  #mw-sidebar-checkbox:checked ~ .mw-page-container-inner  {
    border: 1px lightgray solid
  }
.vector-menu-portal, 
.vector-menu-portal .vector-menu-content {
  margin-left: 2px;
}
/* Remove whitespace at edges */
.mw-page-container {
  padding-left: 10px;
  padding-right: 12px;
}
.mw-portlet .mw-portlet-navigation .vector-menu .vector-menu-portal .portal {
  margin-left: 5px;
}
/* Nudge the personal bar inwards */
#vector-user-links-dropdown {
  margin-right: 1em;
}
/* end */

/* full size logo when needed */
.mw-wiki-logo {
   height: 55px;
   min-width: 55px;
   left: 0;
   top: 0;
   background-size: contain;
   background-image: url("https://me-pedia.org/w/resources/assets/mepedia_logo_mobile.png");
   margin: 0;
   overflow: hidden;
}

.skin--responsive .mw-logo  {
   margin-left: -1em;
   padding-left: 0;
}
.skin--responsive .mw-logo-container {
 display: block;
}
:not(.skin--responsive) .mw-logo-container {
    display: none;
}
:not(.skin--responsive) .mw-logo-icon {
    display: block;
  }

.skin--responsive a.mw-logo:last-child > span.mw-logo-container:last-child > img.mw-logo-wordmark   {
   display: block;
   width: 55px;
   max-width: 135px;
   height: auto;
  /* use fallback width */
   max-width: 35vw;
   object-fit: contain;
   /* when supported, contain but scale down not up */
   object-fit: scale-down;
  }
/* move notifications, messages and user tools to center */
#searchButton { 
  position: absolute!important;
  left: unset!important;
  right: 11em!important;
}
 #p-personal { 
  position: absolute;
  left: unset;
  right: 7em;
  margin-left: 0;
}
#user-tools { 
  position: absolute!important;
  left: unset!important;
  right: 5em!important;
}
}
/* Change padding so gallery fits 2 portals wide on welcome page when small screens have responsive ticked */

@media screen and (max-width: 720px) {
.skin--responsive ul.gallery.mw-gallery-traditional {
  padding: 0; 
  margin: 0;
}     
                         
/* gallery boxes are 40% of screen width for 2 per row with 20% left as space so at 100% zoom 150px wide x2 giving 75px space width left
*/
.skin--responsive ul.gallery.mw-gallery-traditional li.gallerybox div { 
  margin-left: 0;
  margin-right: 0;
}
          
.skin--responsive ul.gallery.mw-gallery-traditional li.gallerybox div div.thumb div { 
 margin-right: 4px;
 padding: 2px;
  }
}
/* end small screen code */

/* Patch: mobile popup alert box width part 1 - do not change breakpoint from 850px! https://phabricator.wikimedia.org/T287132  */
@media (max-width: 850px) {
	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body {
		width: unset !important; /* overrides inline style */
	}
	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup {
		width: unset !important; /* overrides inline style */
	}
	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
		left: 5px !important; /* overrides inline style */
		width: calc(100% - 10px) !important; /* overrides inline style */
	}
	/* Hide the little triangle at the top */
	.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-anchor {
		display: none;
	}
/* mobile popup alert box width part 2
Avoid hardcoded width for the popup's footer buttons https://gerrit.wikimedia.org/r/862370 
*/

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup-body {
		max-height: 60vh;
		overflow-y: scroll;
	}
}