User:Notjusttired/pivot.css: Difference between revisions

From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
m (h1 margin)
m (v2.2 syntax change now in pivot.css)
 
(45 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* test just for me
/* Outstanding issues */
1- smaller banner for categories etc, dark text color since on green background
/* MW upgrade is needed to use pivot 2.2 */
2- smaller dismiss notice
/* 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
*/
*/


h1 {
/* included by v2.2 line 662 */
margin: 0;
 
.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;
}
}


h1 div {
.floatleft,.tleft
table.floatleft {
    margin: 0 .5em .5em 0;
    border: 0;
}


font-size: 75%;
.tnone {
margin: 0;
    margin: .5rem 0;
margin-left, margin-right: 0.5em;
    border: 0;
color: #333;
}
text-shadow: none;


.floatnone img {
    margin: .5rem 0;
}
}


.mw-dismissable-notice {
/* 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 */


font-size: 80%;
/*.mw-search-results {
max-width: 100%;
}
}
/* end of my stuff */
*/


/* Outstanding issues */
/* Also adjust z-index of action menu to force it on top */
/* 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
#p-cactions #drop1 {
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
    z-index: 1000;
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
/** New line below
6. Dismissable notice text too large on mobiles (all skins?)
@@ -218,9 +222,22 @@ ul#drop1.f-dropdown {
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
    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 */
/* 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 {
ul, ol {
  /* already added when li not gallerybox
  /
overflow-wrap: break-word;
}
*/
*/
}


/* Shrink article message boxes */
@media only screen and (max-width: 500px) {
@media only screen and (max-width: 500px) {
/* Shrink article message box for small screens esp for potential treatments */
 
table.ambox {
table.ambox {
   margin-left: 5px;
   margin-left: 5px;
Line 69: Line 194:
}
}
*/
*/
/* preferences fix - for pivot.css on server end if this isn't working, small screens only */
/* preferences fix - for pivot.css on server end if this isn't working, small screens only  
#preferences > fieldset td.mw-label {
#preferences > fieldset td.mw-label {
   width: 0;
   width: 0;
}
}
*/


/* fix gaps in portal pages and images  
/* fix gaps in portal pages and images  
Line 82: Line 208:




/* Image to left or right for text wrapped around images 


/* Image to left or right for text wrapped around images  */
.tleft, div.thumb.tleft {
.tleft, div.thumb.tleft {
  float: left;  
  float: left;  
Line 101: Line 226:
   padding-left: 0;
   padding-left: 0;
   }
   }
/* Full-width thumbnails */
 
div.thumb {
div.thumb {
float: none;
float: none;
Line 112: Line 237:
         padding-left: 0;
         padding-left: 0;
         padding-right: 0;
         padding-right: 0;
/*
padding: 1em;
margin-left: 0;
margin-right: 0;
*/
}
}
.thumbimage {
.thumbimage {
Line 137: Line 257:
}
}


/* Keep linked images from overflowing
 
  a > img {
  a > img {
height: auto !important;
height: auto !important;
Line 145: Line 265:
/* end of untested new code pt 2 */
/* end of untested new code pt 2 */


/*
table.diff > tbody > tr {
table.diff > tbody > tr {
background: lightskyblue;
background: lightskyblue;
max-width: 330px!important ;
max-width: 330px!important ;
}
}
/* Fix Diff table with on page history */
 
@media screen  {
@media screen  {
.ve-init-mw-diff-page {
.ve-init-mw-diff-page {
Line 196: Line 317:
margin-right:0.25em;
margin-right:0.25em;
  padding:0; */
  padding:0; */
/*
left: 0;
left: 0;
right: 0;
right: 0;
Line 233: Line 356:
overflow-y: auto;
overflow-y: auto;
overflow-x: auto;
overflow-x: auto;
/* margin-left: -25em;
*/
margin-right:6px;
padding:0; */
   }
   }


/* Code from Visual editor extension adapted for pivot */
/* Code from Visual editor extension adapted for pivot */


/*
.oo-ui-floatableElement {
.oo-ui-floatableElement {
background: yellow;
background: yellow;
Line 263: Line 385:
max-width: calc(100% - 2em);
max-width: calc(100% - 2em);
}
}
*/


/* Echo alert must not go off left of small screens */
/* Echo alert must not go off left of small screens */
/*
.mw-echo-ui-notificationBadgeButtonPopupWidget > .oo-ui-popupWidget {
.mw-echo-ui-notificationBadgeButtonPopupWidget > .oo-ui-popupWidget {
   padding-right: 0.5em!important;
   padding-right: 0.5em!important;
   left: -15.5em!important;
   left: -15.5em!important;
}
}
 
*/
/*  
/*  
.oo-ui-clippableElement-clippable .oo-ui-popupWidget-body {
.oo-ui-clippableElement-clippable .oo-ui-popupWidget-body {
Line 275: Line 399:
     height: 90%!important;
     height: 90%!important;
     right: 0.5rem;
     right: 0.5rem;
  }
}
}
*/
*/
}
 


/* Add a citation */
/* Add a citation */
/*
.oo-ui-dialog-content {
.oo-ui-dialog-content {
background: lightgreen;
background: lightgreen;
Line 290: Line 416:
padding-bottom: 1em;
padding-bottom: 1em;
width:98%!important;
width:98%!important;
*/
/* height 100% of container */
/* height 100% of container */
/*
height: 90%!important;
height: 90%!important;
overflow-x: scroll;
overflow-x: scroll;
overflow-y: scroll;
overflow-y: scroll;
}
}
*/
/* small screen improvements written for timeless skin */
/* small screen improvements written for timeless skin */


/*
.oo-ui-clippableElement-clippable {
.oo-ui-clippableElement-clippable {
/* parent for citation box element */
parent for citation box element */
 
/*
padding-left:0;
padding-left:0;
right: 0!important;
right: 0!important;
Line 308: Line 440:
font-size: 90%;
font-size: 90%;
}
}
*/


/* all visual editor classes not too wide */
/* all visual editor classes not too wide  
@media only screen and (min-width: 48em) {
@media only screen and (min-width: 48em) {
/* Visual editor popups for mobiles */
 
Visual editor popups for mobiles  
.ve-ui-toolbar,
.ve-ui-toolbar,
.ve-ui-overlay-global,
.ve-ui-overlay-global,
Line 321: Line 455:
   }
   }
}
}
 
/*
/* end visual editor extension code *********************************** */
/* end visual editor extension code *********************************** */




/* Fit or scroll  graph */


 
/*
/* Fit or scroll  graph */
img {
img {
  max-width: unset;
  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 */
/* main page centering contents list in wikitable at top */


/*
.wikitable > * th > p {  
.wikitable > * th > p {  
  text-align: center;
  text-align: center;
}
}
 
*/


/* mobiles */
/* mobiles */

Latest revision as of 23:28, September 28, 2020

/* 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) {
  }
*/