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. Recent changes columns - too wide on all screen sizes 3. Insert, template dropdown opacity 4.Diff history width fix 5. Image layout problems using pivot eg text not wrapping despite setting wrap text for images added in visual editor

/* toc level 2 line spacing too big, fix copied from timeless skin, for mobiles only under 600px */ .toc { line-height: 1.2; ul { margin: 1em 0 0; }	li { margin: 0.3em 0; &:last-child { margin-bottom: 0.5em; }	} }

/* preferences fix - for pivot.css on server end if this isn't working, small screens only */ width: 0; }
 * 1) preferences > fieldset td.mw-label {

/* Image to left or right for text wrapped around images */ .tleft { float: left; } .tright { float: right; }

table.diff > tbody > tr { background: lightskyblue; max-width: 330px!important ; } /* Fix Diff table with on page history */ @media screen { .ve-init-mw-diff-page { overflow-x: scroll; width: auto; max-width: 100% !important; white-space: normal; word-wrap: break-word; background: lightpink; }   table.diff > tbody > tr { width: 98% !important; overflow-x: hidden!important; word-wrap: break-word; white-space: normal; background: gray; } table.diff tbody { width: 68% !important; max-width: 185px !important; overflow-x: auto; white-space: normal; background: lightgreen; word-wrap: break-word; } table.diff { width: 99%!important; background: lightpink; overflow-x: auto; } table.diff > td { width:320px; } }

.oo-ui-popupWidget { /* has a transparent background with 100% opacity, acts as a container */ /* 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; }

.oo-ui-popupWidget-popup { position: absolute; max-width: calc(100vw - 2em)!important; max-height: calc(100vw - 5em); width: 350px; max-width: 95%; max-height: 90%; margin-left: 0.5em; margin-right: 0.5em; padding:0; height: 350px!important; 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: 95%; left: 0; height: 100%!important; overflow-y: auto; overflow-x: auto; /* margin-left: -25em; margin-right:6px; padding:0; */ }

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

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

.oo-ui-floatableElement-floatable { height: 350px!important; max-height: 95vh!important; } .oo-ui-clippableElement { max-height: 100%; max-width: 100%; }

@media only screen and (max-width: 750px) { .oo-ui-popupWidget-popup { margin-left: 0.2em !important; margin-right: 0.2em!important; right: 0.5rem; max-height: 100%; max-width: calc(100% - 2em); }

/* Echo alert must not go off left of small screens */ .mw-echo-ui-notificationBadgeButtonPopupWidget > .oo-ui-popupWidget { padding-right: 0.5em!important; left: -15.5em!important; }

/* .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: lightgreen; display: block; left: 0; right:0 margin-left: 0.25em; margin-right: 0.25em; padding-top: 0.5em; padding-bottom: 1em; width:98%!important; /* height 100% of container */ height: 90%!important; overflow-x: scroll; 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: 95%; max-width: 95%; max-height:100%; height: 85%; font-size: 90%; }

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

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