User:Notjusttired/pivot.css
From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* Outstanding issues */
/* MW upgrade is needed to use pivot 2.2 */
/* 1. turn search suggestions autocomplete - set autocomplete to "on" under <pre><ul class="side-nav"></pre> - 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
*/
/* included by v2.2 line 662 */
.mw-htmlform-field-HTMLCheckField .mw-label {
height:0; }
/* line 594 */
input[type="date"] {
margin: .5rem 0;
}
input[type="date"] {
width: auto;
}
input[type="file"] {
margin: .5rem 0;
}
input:not([type]), textarea, p.meta {
margin: .5rem 0;
}
input[type="text"] {
margin: .5rem 0;
}
select {
padding: 5px 20px 5px 5px;
margin: .5rem 0;
width: auto;
}
/* line 1104 v2.2 */
/* Images the MediaWiki way */
/* Images, Thumbs and Captions */
.thumbinner {
border: 1px solid #c8ccd1;
padding: 3px;
background-color: #f8f9fa;
font-size: 94%;
text-align: center;
overflow: hidden;
margin: auto;
max-width: 100%;
}
.thumb.tright, .thumb.left {
max-width: 100%;
}
.thumbcaption {
border: 0;
line-height: 1.4em;
padding: 3px;
font-size: 94%;
text-align: left;
}
.magnify a {
display: block;
text-indent: 15px;
white-space: nowrap;
overflow: hidden;
width: 15px;
height: 11px;
}
.mw-content-ltr .magnify a {
background-image: url(/w/resources/src/mediawiki.skinning/images/magnify-clip-ltr.png);
}
/* Float right and left styles - Make all MW images responsive for mobile when floated */
.floatright, .tright,
table.floatright {
margin: 0 0 .5em .5em;
border: 0;
}
.floatleft,.tleft
table.floatleft {
margin: 0 .5em .5em 0;
border: 0;
}
.tnone {
margin: .5rem 0;
border: 0;
}
.floatnone img {
margin: .5rem 0;
}
/* Kill the float for smaller screens and make them align center. */
@media only screen and (max-width: 640px) {
.floatright,
table.floatright,
.floatleft,
table.floatleft,
.thumb.tleft,
.thumb.tright {
text-align: center;
float: none !important;
margin: .5em auto;
}
/* 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 */
/*
#p-cactions #drop1 {
z-index: 1000;
*/
/** New line below
@@ -218,9 +222,22 @@ ul#drop1.f-dropdown {
color: #222;
border-bottom: 1px solid #eee;
}
*/
/*
.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 {
/
}
*/
/* Shrink article message boxes */
@media only screen and (max-width: 500px) {
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
#preferences > fieldset td.mw-label {
width: 0;
}
*/
/* 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;
}
div.thumb {
float: none;
}
.thumb {
margin: 1em auto;
}
.thumbinner {
width: 100%;
padding-left: 0;
padding-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;
}
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 ;
}
@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;
*/
}
/* 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) {
}
*/