User:Notjusttired/pivot.css

/* Outstanding issues */ /* MW upgrade is needed to use pivot 2.2 */ /* 1. turn search suggestions autocomplete - set autocomplete to "on" under  - repeat change after any upgrades to Pivot skin 2. Insert, template dropdown opacity 3.Diff history width fix eg on https://www.me-pedia.org/index.php?title=Two-day_cardiopulmonary_exercise_test&curid=1261&diff=78225&oldid=78154&diffmode=source 4. Article box for mobiles - shrink 5. Image layout problems using pivot eg text not wrapping despite setting wrap text for images added in visual editor 6. Block / new line after Share bar on mobiles or before Stub / Warning table message to prevent it becoming too narrow (all skins) - mobiles only


 * 1) p-whatlinkshere { margin-top: 1.5em;}

ul.side-nav li:focus, ul.side-nav li:hover { background-color: #0BA7CD; color: #fff; }

/* v2.2 onwards requires this change */ h4,h5,h6 {color: #2e2e2e;}

/* Temporary patches that v2.2 will add automatically */ /* these also need checking to see if they are already in our code and should be removed on update to v2.2 */

.mw-search-results { max-width: 100%; }

/* Also adjust z-index of action menu to force it on top */ z-index: 1000; /** New line below */ @@ -218,9 +222,22 @@ ul#drop1.f-dropdown { color: #222; border-bottom: 1px solid #eee; }
 * 1) p-cactions #drop1 {

/* removed / changed this line to the ol one .mw-content-ltr ul {  *****/ .mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ol { margin: .5em 0 1em 2em; }

.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul { margin: .5em 0 1em 2em; } .mw-content-ltr ul li > ul, .mw-content-rtl .mw-content-ltr ul li > ul { margin-bottom: .5em; margin-left: 1em; } .mw-content-ltr ol li > ol, .mw-content-rtl .mw-content-ltr ol li > ol { margin-bottom: .5em; margin-left: 1em; }

@@ -798,6 +815,7 @@ ul.side-nav label { pointer-events: none; }

/* end v2.2 extras */

/* toc level 2 line spacing too big,and line spacing too big in table ol li of site notice - for mobiles only under 600px */ ul, ol { /* already added when li not gallerybox overflow-wrap: break-word; }

@media only screen and (max-width: 500px) { /* Shrink article message box for small screens esp for potential treatments */ table.ambox { margin-left: 5px; margin-right: 0; } .mbox-small-left > td, td.mbox-image { width: 22px; padding-left: 1px; padding-right: 1px; } img.mbox-image-small, td.mbox-image > img.mbox-image-small { width: 20px; margin: 0; padding: 0; } .thumbcaption { font-size: 90%; } }

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

/* fix gaps in portal pages and images

.thumb { white-space: normal; }

/* Image to left or right for text wrapped around images */ .tleft, div.thumb.tleft { float: left; margin-right: 0; padding-right: 0; } .tright, div.thumb.tright { margin-left: 0; padding-left: 0; float: right; } .tleft .thumbinner { padding-right: 0; } .tright .thumbinner { padding-left: 0; } /* Full-width thumbnails */ div.thumb { float: none; } .thumb { margin: 1em auto; } .thumbinner { width: 100%; padding-left: 0; padding-right: 0; /*	padding: 1em; margin-left: 0; margin-right: 0; } .thumbimage { display: block; margin-top: 0; margin-bottom: 0.5em; } .thumbcaption { font-size: 95%; padding: 0.5em 1em; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .suggestions { z-index: 100 !important; margin-top:50px; }

/* Keep linked images from overflowing a > img { height: auto !important; max-width: 100% !important; } /* end of untested new code pt 2 */

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; overflow-wrap: break-word; background: lightpink; }   table.diff > tbody > tr { width: 98% !important; overflow-x: hidden!important; word-wrap: break-word; overflow-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;

} table.diff { width: 99%!important; background: lightpink; overflow-x: auto; word-wrap: break-word; overflow-wrap: break-word; } table.diff > td { width:320px; word-wrap: break-word; overflow-wrap: break-word; } }

.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: lightseagreen; 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 only screen and (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 graph */ img { max-width: unset; }

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

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

/* mobiles */ /* @media screen and (max-width: 500px) { }