User:Notjusttired/pivot.css

/* Outstanding issues */ /* 1. turn search suggestions autocomplete on for smallest screens as for tablets etc 2. visual editor - click link to edit - pop up / tooltip underneath gets mostly cut off - mobile issue?? 3. Overlapping lines around video eg ME/CFS page - upgraded EmbedVideo may fix 4. scrolling tables

/* allow scroll on tables */ table { max-width: none!important; }

max-width: none; }
 * 1) bodyContent {

/* logos even for mobiles */ .mw-wiki-logo { display: block!important; content:''!important; left: 0!important ; top: 0!important; z-index: 99999999; visibility: visible ; } display:block!important;
 * 1) p-logo {

}

.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; }

.mw-body .oo-ui-tagMultiselectWidget-handle, .mw-body .oo-ui-capsuleMultiselectWidget-handle { margin: 0; /* wat comment */ }

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

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

/* visual editor edit reference and other pop-ups */

/* .ui-dialog { position: absolute; top: 0; left: 0; padding: .2em; width: 300px; overflow-x: scroll; } .ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } .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 .ui-dialog-titlebar-close span { display: block; margin: 1px; } .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } .ui-dialog .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; } .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 {

/* Overlays */ .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* small screen improvements written for timeless skin */ .oo-ui-clippableElement-clippable { width:auto !important; } .oo-ui-popupWidget-popup { width:auto !important; max-width:350px !important; } .suggestions { z-index: 100 !important; margin-top:50px; }

/* end of untested new code */

/* make donate look like button */ 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;}

/* all visual editor classes not too wide */ div[class*=ve-ce] { max-width: 100%; draggable: true; }

@media (min-width: 48em) { div[class*=oo-ui-floatableElement] { width: auto; height: auto; max-width: 100%; max-height: 100%; zoom: 1; left: 2em; } }

/* 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; } /* end of tested code */