User:Notjusttired/pivot.css: Difference between revisions

From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
m (shrink h1 blank lines)
m (v2.2 syntax change now in pivot.css)
 
(44 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, original text size 1.6em
/* 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 br {
/* included by v2.2 line 662 */
font-size: 0.25em;
 
.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;
}
}


h1 div {
/* line 1104 v2.2 */
/* Images the MediaWiki way */


font-size: 1.25em;
/* Images, Thumbs and Captions */
margin: 0;
.thumbinner {
margin-left, margin-right: 0.5em;
    border: 1px solid #c8ccd1;
color: #333;
    padding: 3px;
text-shadow: none;
    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-dismissable-notice {


font-size: 80%;
.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;
}
}
/* end of my stuff */


/* Outstanding issues */
@@ -798,6 +815,7 @@ ul.side-nav label {
/* 1. turn search suggestions autocomplete - set autocomplete to "on" under <pre><ul class="side-nav"></pre> - repeat change after any upgrades to Pivot skin
    pointer-events: none;
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
*/
*/
/* 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) {
  }
*/