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

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

/* dark timeless */ /* CSS placed here will affect users of the Timeless skin */ @import url('https://fonts.googleapis.com/css?family=Merriweather'); html { background: rgb(0,0,0) !important; height: 100%; font-size: 1.1em; filter: brightness(100%) contrast(100%) grayscale(0%) !important; -webkit-filter: brightness(100%) contrast(100%) grayscale(0%) !important; overflow-x: hidden; } body { margin: 0; background: #000; color: #ccccff; font-family: 'Merriweather', serif; } a { color: #cc6600; } a:hover, a:visited { color: #cc3300; } h1 { color: white; text-shadow: 1px 1px 1px #000; font-size: 40px !important; } h1, h2, h3, h4 { color: #6699ff; font-family: 'Merriweather', serif; }	font-weight: normal; } b, strong { text-shadow: 1px 1px 1px #000; }	text-align: center; font-size: 14px; } div.editOptions { border: #222; background: #555; }	border-top: solid 2px #333; background: #333; }	background: #333; border: 0; } @media screen and (min-width: 851px) { position: fixed; right: 75vw; } } @media screen and (max-width: 850px) { margin-top: 0; } } @media screen and (max-width: 1099px) and (min-width: 851px) { padding-left: 7px; float: left; font-size: 26px; } } @media screen and (max-width: 1099px) and (min-width: 851px) { background: #222 !important; border: solid #111; } } @media screen and (max-width: 1099px) and (min-width: 851px) { background: #222; border: solid #111; } }	border: outset #222; background: #333; box-shadow: 2px 2px 1px rgba(0,0,0,0.5); border-radius: 3px; } @media screen and (max-width: 851px) { padding: 0 15px 5px 20px; } } @media screen and (max-width: 1099px) and (min-width: 851px) { background: #222 !important; border: solid #111 !important; } } .mw-parser-output a.external { color: #ff9900; }	padding: 0.2em 4.5em 0.2em 2em !important; margin: 0; }	background: #333; height: 35px; }	border: inset 1px #000; border-radius: 3px; background: #333; height: 35px; width: 48vw; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 7px; }	position: fixed; right: 86px; } @media screen and (min-width: 851px) { left: 74vw; top: 5px; } } .mw-notification { background: #222; border: #111; background: #111; border-radius: 5px; color: #999; width: 200px; } .postedit-container { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; padding: 0; padding: 15px 0 15px 15px; text-align: right; } .postedit-icon { margin: auto; padding: 0; } .mw-wiki-logo { background: url("https://www.YOURDOMAIN/logo.png"); background-size: contain; }	background: #555; }	width: 100%; max-width: 100%; padding: 0; position: static; } @media screen and (max-width: 850px) { background: #000; } } @media screen and (max-width: 850px) { display: none; } }	background: #1d1d16; } @media screen and (max-width: 850px) { background: #000; } } @media screen and (max-width: 850px) { right: 3em; top: 0.9em; padding-bottom: 5px; } } @media screen and (max-width: 850px) { width: 100%; top: 7px; text-align: center; font-size: 40px !important; } } @media screen and (min-width: 851px) { width: 29em; } } @media screen and (min-width: 851px) { width: 36px; } } @media screen and (max-width: 850px) { position: static; left: 0 !important; right: 0; margin-left: 0; margin-right: 0; width: 100%; top: 3.3em; } } @media only screen and (min-width: 992px) and (max-width:768p) { right:74vw; } } @media only screen and (min-width: 900px) and (max-width:100px) { right: 74vw; top: 3em; } } @media screen and (max-width: 900) and (min-width: 100px) { font-size: 43px !important; } } @media screen and (max-width: 1700px) and (min-width: 800px) { left: 12px !important; } } @media screen and (max-width: 1700px) and (mix: 851px) { background: #000; } }	background: #333; border: solid #946c20; -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; }	color: #cccc00; }	background: #333; border: outset #222; box-shadow: 2px 2px 1px rgba(0,0,0,0.5); border-radius: 3px; } @media screen and (max-width: 1099px) and (min-width: 851px) { background: #333; border: outset #222; box-shadow: 2px 2px 1px rgba(0,0,0,0.5); border-radius: 3px; padding: 0 15px 5px 20px; } } .color-middle-container, .ts-inner { padding: 0; }	left: 120px; }	padding-top: 5px; padding-left: 6px; font-size: 23px; text-shadow: 1px 1px 1px #222; }	width: 70em; padding-right: 33px; }	line-height: 25px; }	text-shadow: 2px 2px 0 #333; padding-top: 7px; font-size: 24px; text-transform: lowercase; }	background: #222!important; border: solid #000; } .codeEditor-status { color: #000; } .oo-ui-labelElement-label { text-shadow: 1px 2px #333; }	height: 700px; }	text-shadow: 2px 2px 2px #000 !important }	background: #000; padding-top: 1em; } fieldset { background: #222!important; border: solid #111; } input { background: #333; border: solid 1px #111!important; border-radius: 2px; padding-left: 5px; color: #999; } .mw-ui-button.mw-ui-progressive, .mw-ui-button.mw-ui-progressive:active, .mw-ui-button.mw-ui-progressive.mw-ui-checked, input[type='submit'], input[type='button'], button { border: solid 1px #333!important; border-bottom: 0!important; text-shadow: 0 0 0 #000 !important; border-bottom: solid 1px #333!important; } .oo-ui-flaggedElement-destructive { background: #111; border: 1px solid #444; color: #FF333 !important; padding-left: 15px !important; padding-right: 15px !important; } .oo-ui-flaggedElement-destructive:hover { background: #222; color: #CC0000 !important; }	border: 0!important; } @media screen and (max-width: 850px) { padding: 0 0 0 6px !important; } } .oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea { background-color: #333; color: #fff; } .oo-ui-textInputWidget > .oo-ui-labelElement-label { line-height: 0.5em; }	background-color: #555; } .warningbox { background: #1d1d16; } a.new:hover, .new a:hover, a.new:visited, .new a:visited { color: #FF3333; } .mw-plusminus-neg { color: #FF0000; }	border: 0 !important; left: 38vw; right: 0; margin-left: auto; margin-right: auto; }	color: #ffff33; }	color: #ffff66; }	float: right; display: block; }	margin: 0 auto; }	float: left; left: 25px; } .diff-addedline .diffchange { background: #1d1d16; padding-left: 7px; } .oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button, .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { text-shadow: 0 0 0 #000 !important; } .oo-ui-labelElement-label { text-shadow: 0 0 0 #000 } .oo-ui-panelLayout-expanded { background: #222; } .oo-ui-messageDialog-message { color: #999; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button { color: #999; } .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget { border-right: 1px solid #111 } .oo-ui-dialog-content > .oo-ui-window-body { outline: 1px solid #111; } .oo-ui-messageDialog-content > .oo-ui-window-foot { outline: 1px solid #111; } .wikiEditor-ui .wikiEditor-ui-view { border: 1px solid #000; } .wikiEditor-ui .wikiEditor-ui-top { border-bottom: 1px solid #000; } textarea[style] { background: #111 !important; color: #fff; } pre, .mw-code { background: #222; color: #B0B0B0; border: 1px solid #444; } .oo-ui-iconWidget.oo-ui-iconElement.oo-ui-iconElement-icon { background-color: #B0B0B0; border: 1px solid #333; }
 * 1) personal .dropdown b {
 * 1) f-list {
 * 1) mw-header-nav-hack {
 * 1) mw-site-navigation .sidebar-inner {
 * 1) p-logo-text a {
 * 1) p-logo-text {
 * 1) p-logo-text a.long {
 * 1) mw-related-navigation .sidebar-inner {
 * 1) mw-site-navigation .sidebar-inner {
 * 1) mw-site-navigation .sidebar-chunk {
 * 1) mw-site-navigation .sidebar-chunk {
 * 1) mw-site-navigation .sidebar-inner {
 * 1) searchInput {
 * 1) searchInput-container {
 * 1) simpleSearch {
 * 1) user-tools {
 * 1) user-tools {
 * 1) mw-header-container {
 * 1) mw-header {
 * 1) menus-cover {
 * 1) personal h2 {
 * 1) mw-content-container {
 * 1) mw-content-block {
 * 1) site-tools h2 {
 * 1) p-logo-text a.long {
 * 1) p-logo-text {
 * 1) personal h2:after {
 * 1) p-logo-text {
 * 1) p-logo-text {
 * 1) p-logo-text {
 * 1) p-logo-text a.long {
 * 1) p-logo-text {
 * 1) mw-site-navigation {
 * 1) mw-content {
 * 1) mw-page-header-links li.selected a {
 * 1) mw-related-navigation .sidebar-chunk {
 * 1) mw-related-navigation .sidebar-chunk {
 * 1) p-logo-text {
 * 1) p-logo-text a.long {
 * 1) p-search {
 * 1) personal .dropdown h3 {
 * 1) personal h2 {
 * 1) personal .dropdown {
 * 1) iframeframe {
 * 1) wpSave {
 * 1) mw-footer-container {
 * 1) searchInput {
 * 1) searchInput {
 * 1) pagehistory li.selected {
 * 1) searchButton, #mw-searchButton {
 * 1) mw-footer-container a:hover {
 * 1) mw-footer-container a:visited {
 * 1) mw-footer .footer-places li {
 * 1) mw-footer ul, #mw-footer li {
 * 1) mw-footer #lastmod {