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. Main page search section - don't use display block etc for widths of 851px or more? Too much space appears on the right 5. See MediaWiki_talk:Pivot.css Pyrrhus changes 6. Recent changes columns - too wide on all screen sizes

.oo-ui-popupWidget { /* has a transparent background, acts as a container */ background: lightgray; /* margin-left:0.25em; margin-right:0.25em; padding:0; */ left: 0; right: 0; width: 360px; height: 780px; max-width: calc(100vw - 1em) !important; max-height: calc(100vh - 4em); text-align: center; } .ui-popupWidget-body { background-color: yellow; color: blue; } .oo-ui-popupWidget-popup { position: absolute; width: 350px; max-width: 100%; max-height: 100%; background: lightpink; margin-left: 6px; margin-right:6px; padding:0; height: 350px; overflow-x: auto; overflow-y: auto; }

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

.oo-ui-clippableElement-clippable .oo-ui-popupWidget-body { display: block; background: paleseagreen; width: 350px; max-width: 100%; left: 0; height: 100%!important; overflow-y: auto; opacity: 0.8; /* margin-left: -25em; margin-right:6px; padding:0; */ }

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

.oo-ui-floatableElement { background: yellow; margin: 0; color: #013; }

.oo-ui-floatableElement-floatable { height: 350px!important; max-height: 90vh!important; } .oo-ui-clippableElement { background: gold; color: darkgreen; max-height: 100%; }

/* untested */ @media only screen and (max-width: 750px) { .oo-ui-popupWidget-popup { margin-left: 0.2em !important; margin-right: 0.2em!important; right: 0.5rem; background: lightpink; max-height: 100%; } /* .oo-ui-clippableElement-clippable .oo-ui-popupWidget-body { width: 95% !important; height: 90%!important; right: 0.5rem; } }

/* Add a citation */ .oo-ui-dialog-content { background: orange; opacity: 0.8; display: block ; left: 0; right:0 margin-left: 0.25em; margin-right: 0.25em; padding-top: 0.5em; padding-bottom: 1em; width:90%!important; /* height 100% of container */ height: 100%!important; overflow-y: scroll; } /* small screen improvements written for timeless skin */

.oo-ui-clippableElement-clippable { /* parent for citation box element */ padding-left:0; right: 0!important; left: 0; width: 100%; background: cyan; color: blue; max-height:100%; height: 80%; opacity: 0.8 }

/* all visual editor classes not too wide */ @media (min-width: 48em) { /* Visual editor popups for mobiles - did 3 toolbar buttons  */ .ve-ui-toolbar, .ve-ui-overlay-global, .ve-ui-overlay-local { max-width: 100%; } div[class*=oo-ui-floatableElement] { max-width: 100%; background-color: gold; color: #FFD700; } }

/* 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.current { font-family: Oswald, sans-serif; font-style: normal; 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.15em; }

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

/*** testing the li:not for gallery - all other statements are ok */

/* 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) { #mw-content, /* used on special pages */ #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; }  }

/* end of tested code */