User:Notjusttired/pivot.css: Difference between revisions

From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
m (smaller banner without margins)
m (banner size)
Line 6: Line 6:
h1 div {
h1 div {


font-size: 80%;
font-size: 75%;
margin-left, margin-right: 0.5em;
margin-left, margin-right: 0.5em;
margin-top, margin-bottom: 0;
color: #333;
color: #333;
text-shadow: none;
text-shadow: none;

Revision as of 20:24, February 22, 2020

/* test just for me 
1- smaller banner for categories etc, dark text color since on green background 
2- smaller dismiss notice 
*/

h1 div {

font-size: 75%;
margin-left, margin-right: 0.5em;
margin-top, margin-bottom: 0;
color: #333;
text-shadow: none;

}

.mw-dismissable-notice {

font-size: 80%;
}
/* end of my stuff */

/* Outstanding issues */
/* 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. Dismissable notice text too large on mobiles (all skins?)
7. Block / new line after Share bar on mobiles or before Stub / Warning table message to prevent it becoming too narrow (all skins) - mobiles only 
*/

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

/* #MEpedia logo fonts and classes */
section#middle-nav .title a.current {
  font-style: normal;
}

section#middle-nav .title a::before { 
  content: "#";
  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;
}


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