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?? 4. mobile screen size - alert / bell notices / notifications drop-down is too wide 5. Tables scroll off the screen

/* 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 */ @media screen and (max-width: 500px) { td, #mw-content-text li { 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; }

/* 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; } @media screen and (max-width: 500px) { }	#hauptseite { display:block; width:auto; } } .suggestions { z-index: 100 !important; margin-top:50px; }

/* end of untested new code */

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