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 { /* max-width: 100%; */ background-color: #008080; }

.oo-ui-popupWidget { /* has a transparent background, acts as a container so only left setting must be on screen */ color: red; background: lime ; /* margin-left:0.25em; margin-right:0.25em; padding:0; */ left: 0; right: 0; width: 350px; /* height: auto; */ text-align: center; } .ui-popupWidget-body { background-color: yellow; color: lavender; } .oo-ui-popupWidget-popup { /* width relative to container? */ position: absolute; width: 350px; max-width: 100%; background: magenta; color: darkgreen; left: 0; margin-left: 6px; margin-right:6px; padding:0; /* allow vertical scroll */ overflow-x: visible; overflow-y: visible; }

.mw-editsection-divider { display: none; }

.oo-ui-clippableElement-clippable .oo-ui-popupWidget-body { display: block; background: red ; color: yellow ; width: 350px; max-width: 100%; left: 0; /* margin-left: -25em; margin-right:6px; padding:0; */ }

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

.oo-ui-floatableElement { background: gold; color: magenta; }

.oo-ui-clippableElement { background: pink; color: yellow; }

/* 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: 95% !important; right: 1.5rem; opacity: 0.8; color: lightgreen; background-color: pink; } }

/* Add a citation */ .oo-ui-dialog-content { background: orange; opacity: 0.8; display: block ; left: 0; right:0 margin-left: -40em; margin-right:0; color: blue; width:350px!important; /* height: auto; */ } /* small screen improvements written for timeless skin */

.oo-ui-clippableElement-clippable { /* margin:0; padding-left:0; right: 1em!important; left: 1em; width: 50%; */ background: aqua; color: blue; }

/* all visual editor classes not too wide */ @media (min-width: 48em) { div[class*=oo-ui-floatableElement] { /* width: auto; max-width: 100%; */ left: 2em; background-color: orange; color: #FFD700; margin:0; } }

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

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

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 {