MediaWiki:Pivot.css

/* normalize paragraphs, lists and tables to reduce margins */
p {
 margin: 0 0 1em 0;
 padding: 0;
}
table {
  display: table;
  overflow-x: visible;
  margin: 0;
  padding: 0;
}
td {
 display: table-cell;
 margin: 0;
 padding: 0;
}
ul, ol {
 padding: 0;
 margin-top: 0.3em;
 margin-bottom: 0;
}

/* Code by Notjusttired */
/* Custom colors - top bar MEActionRed */
.tab-bar {
    background: #E7453A;
    color: #FFF;
    font-family: "Helvetica Neue", sans-serif;
    font-weight:bold;
}
/* style the sidebar navigation labels */
ul.side-nav label {
    background: #E7453A;
    color: #fff;
    padding: .25em .5em;
}

/* sidebar background color */
body {
    background-color: #f2f2f2;
}

/* controls the main body area styling */
#p-cactions {
    padding-top: 1.5em;
    padding-bottom: .5em;
    margin-left: 0;
    margin-right:0;
    background-color: #f6f6f6;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

/* pull out side bar icons MEAction grey */
ul.off-canvas-list li label {
	background-color: #E7453A;
	color: #FFF;
}
ul.off-canvas-list li a {
   background-color: transparent;
   color: #333333;
   
}
/* very light grey pull out side bar */
.right-off-canvas-menu, .left-off-canvas-menu {
	background-color: #F6F6F6;
}
ul.off-canvas-list li a:hover {
	background-color: #F6F6F6;
}
.side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {
	background-color: #0BA7CD;
}
/* category button color dark grey */
h4.namespace.label {
	background-color: #767c7e;
}

/* new code */
#p-cactions {
	padding-left:5px;
	padding-right:5px;
   }
.center, text-center {
	text-align: center;
  }
/* paragraphs inside tables must not overwrite alignment */
th p, td p, th > p, td > p {
	text-align: inherit;
}
/* gallery margins are zero on vector */
ul.gallery {
	margin-left: 0;
	margin-right: 0;
}
/* gallery image border */
div.thumb div {
	margin: 0.5rem auto;
}

.gallerybox {
	text-align: center;
}

/* Fit images to containers */
img, .thumb, .image {
    max-width: 100%;
    height: auto;
}

/* unless image is clicked on set max width */
.gallery > img, table > img, img {
    max-width: 75%;
    height: auto;
}
h1.mw-body-content {
  font-size: 1.8rem; }
h2.mw-body-content, td.h2, th.h2 {
  font-size: 1.375rem; }
h3.mw-body-content {
  font-size: 1.25rem; }
h4.mw-body-content { font-size: 1.1rem; 
  font-weight: bold; }

h5.mw-body-content,
 h6.mw-body-content, 
 h7.mw-body-content {
  font-size: 1rem; 
 }

/* all visual editor classes not too wide */
  div[class*=ve-ce] { 
  max-width: 100%;
  draggable: true;
}

@media (min-width: 48em) {
  div[class*=oo-ui-floatableElement] { 
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  zoom: 1;
  left: 2em;
   }
}
/* end of tested code */

/* Make Echo extension more mobile friendly on small widths including mobiles in landscape view */

@media only screen and (max-width: 750px) {
.oo-ui-popupWidget-popup { 
    width: auto !important;
    position: relative !important;
    margin-left: 10rem !important;
    margin-right: 0!important;
    left: auto;
    right: 0.9rem;
    font-size: 75% !important;
}
.oo-ui-clippableElement-clippable.oo-ui-popupWidget-body {
    width: 100% !important;
    right: 1.5rem;
}
}

/* make donate look like button */
#n-donate {
 margin-left: 0.25em;
}
#n-donate a {
 display:inline-block;
}

/* pre tag must wrap, also break crazily long words in lists and tables */
pre {  
 padding-left: 2em;
 white-space: pre-wrap; /* css-3 */ 
 white-space: -moz-pre-wrap;
 white-space: -o-pre-wrap;   
 word-wrap: normal;
 } 

/* break long citation urls */
.citation { word-wrap: break-word; }


/* mobiles: break crazily long words in lists and tables, using hyphens and keep broken items in same column, put columns closer together */
@media screen and (max-width: 500px) {
  #mw-content, /* special pages */
  td,
  #mw-content-text li:not(.gallerybox) { 
 margin-left: 2px;
 overflow-wrap: break-word;
 word-wrap: break-word;
 -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
 -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
 -webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
    } 
  }
/* Headings centered on other skins eg for home page contents */
table.wikitable > tr > th,
table.wikitable > * > tr > th {
  text-align: left;
}

#footer-developers,
 #footer-cookiestatement {
 padding-right: 2rem;
 display: inline;
 text-align: center;
} 
#footer-left,
 #footer-places,
 #footer-disclaimers,
 #footer-privacypolicy,
 #footer-about {
  display: inline;
  text-align: center;
}
/* removed powered by mediawiki - which has several different names oddly */
#footer-poweredbyico,
 #footer-poweredby,
.poweredby { 
   display:none; 
}
/* center block - won't overlap sidebar */
#footer-left {
 display: inline-block;
 width: 100%!important;
 text-align: center;
 padding-right:8px;
}

/* fix footer bleed by fixing negative margin */
footer { margin-left: 0!important; margin-right: 0!important; padding-right: 8px;}

/* Color code snippets incl for errors  */
  code { 
  background: #999;
  background: rgba(204,204,204,0.9);
  color: #000; 
  font-weight:bold;
}
.error code { 
    background-color: #fff;
    color: #FF4444 !important;
}

/* allow scroll on tables */
table { 
 max-width: none;
 overflow-x: auto;
 display: block;
}
#p-cactions {
 max-width: none;
}
/* end of tested code May 23 2019 */

#mw-normal-catlinks a.new { 
  color: #BA0000;
 }

/* recent changes improvements for small  screens */
.mw-enhancedchanges-arrow-space,
.mw-enhanced-rc-time,
.mw-changeslist-diff-cur {
   white-space: normal;
}
.mw-changeslist-line-prefix,
  .mw-enhanced-rc,
  .mw-changeslist-line-inner,
  .mw-enhanced-rc-nested {
    white-space: pre-line;
   }

/* Mobiles and tablets - smaller category banner */
@media (max-width: 768px) {
  h1 {
   font-size: 1.4rem;
   margin-top: 4px;
   margin-bottom: 4px;
  }
  h1 div, .firstHeading {
   font-size: 1.25rem;
   padding: 2px!important;
   margin-left:0;
   margin-right: 0;
   color: #333;
   text-shadow: none;
 }
/* Mobiles and tablets (cont) - dismissable site notice - remove large gap on left to reduce the space it takes up, shrink top and bottom margins, reduce left margin on numbered lists */
  .sitedir-ltr .mw-dismissable-notice-body {
  margin: 2px 4.5em 2px 0.5em;
    }
   .mw-dismissable-notice {
     font-size: 90%;
   }
   ul { 
     padding-left: 0.25em;
    }
   ol {
    margin-left: 2em;
   }
}
/* end of mobile code */