User:Notjusttired/pivot.css

/* Outstanding issues */ /* 1. turn search suggestions autocomplete - set autocomplete to "on" under  - repeat change after any upgrades to Pivot skin 2. visual editor - click link to edit - pop up / tooltip underneath gets mostly cut off - mobile issue?? 3. Turn on logo in LocalSettings.php? 5. Add Oswald font for heading is correct font go use

/* Visual editor popups for mobiles - did 3 toolbar buttons  */ .ve-ui-toolbar, .ve-ui-overlay-global, .ve-ui-overlay-local { left: 0.5em; right: 0.5em; max-width: 100%; padding-left:0; background-color: #008080; }

.oo-ui-popupWidget { left: 0.5em; color: red; background: lime ; padding-left: 0; margin: 0; } .oo-ui-popupWidget-popup { width:auto !important; Color: lime; background: #ccffcc; padding-left:0; margin-left:2em ; } .mw-editsection-divider { display: none; }

.oo-ui-popupWidget-body { padding: 0; background: red ; color: yellow ; margin:0; width:50%; }

/* Code from Visual editor extension adapted for pivot */

.oo-ui-lookupElement { margin:0; padding: 0; background: magenta; color: #ff0099; left:0; width: 300px; }

.oo-ui-toolbar-bar,.oo-ui-clippableElement { background: #2222ff; }

.oo-ui-dialog { background: #FFaaFF; right: 2em; padding-left:0; margin: 0; width: 80%; } .ui-dialog-content { background: orange; color: blue; } /* small screen improvements written for timeless skin */

.oo-ui-clippableElement-clippable { width:auto !important;

margin-left:2em; left: 0; right: 2em; background: blue; }

/* all visual editor classes not too wide */ @media (min-width: 48em) { div[class*=oo-ui-floatableElement] { width: auto; max-width: 100%; left: 2em; } } /* visual editor edit reference and other pop-ups */

/* .ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } .ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } .ui-draggable .ui-dialog-titlebar { cursor: move; }

/* end visual editor extension code *********************************** */

/* Fit or scroll images and graph */ .thumb, image, graph { background-size: contain; } img { max-width: none; }

/* #MEpedia logo fonts and classes */

.logo-me { font-family: Oswald, sans-serif; font-style: italic; font-variant: normal; } section#middle-nav .title a { font-family: Oswald, sans-serif; font-style: italic; font-variant: small-caps; } .logo-pedia { font-family: Oswald, sans-serif; font-style: normal; font-variant: small-caps; padding-left: 0.15em; } section#middle-nav .title a::before { content: "#"; font-family: Oswald, sans-serif; font-style: italic; font-variant: normal; margin-right: -0.3em; }

.mw-body li.gallerybox div.thumb { padding: 0; }

/* main page centering contents list in wikitable at top */

.wikitable > * th > p { text-align: center; }

/* Keep linked images from overflowing a > img { height: auto !important; max-width: 100% !important; } /* Full-width thumbnails */

div.thumb { float: none; } .thumb { margin: 1em auto; } .tright { margin-left: 0; padding-left: 0; } .tleft { margin-right: 0; padding-right: 0; } .thumbinner { padding: 1em 1.5em; width: 100% !important; box-sizing: border-box; margin-left: auto; margin-right: auto; } .thumbimage { display: block; margin: 0 auto 0.5em; } .thumbcaption { font-size: 95%; padding: 0.5em 1em; }

/* ************* end of untested code ***** */

/* disable .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; -webkit-box-shadow: 0 0 5px #aaa; box-shadow: 0 0 5px #aaa; }

/* Fades and background-images don't work well together in IE6, drop the image */

/*	background-image: none; } body .ui-tooltip { border-width: 2px; }
 * html .ui-tooltip {

.suggestions { z-index: 100 !important; margin-top:50px; }

/* end of untested new code pt 2 */

/* make donate look like button */

/* 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; } }

margin-left: 0.25em; } display:inline-block; }
 * 1) n-donate {
 * 1) n-donate a {

/* Headings centered on other skins eg for home page contents */ table.wikitable > tr > th, table.wikitable > * > tr > th { text-align: left; }

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

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

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

/* 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 don't do this in galleries or height will be too large */ @media screen and (max-width: 500px) { td, #mw-content-text li:not(.gallerybox) { margin-left: 2px; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }  } /* Color code snippets incl for errors as #ccc with some transparency */ code { background-color: #999; background-color: rgba(204, 204, 204, 0.9); color: #000; font-weight:bold; } .error code { color: #FF4444 !important; color: #fff !important; }

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