User:Notjusttired/pivot.css: Difference between revisions
From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
Notjusttired (talk | contribs) m (shrink h1 for mobiles too) |
Notjusttired (talk | contribs) m (v2.2 syntax change now in pivot.css) |
||
(33 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* | /* Outstanding issues */ | ||
1- | /* 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; | |||
6. | 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 { | ||
/ | / | ||
} | |||
*/ | */ | ||
/* Shrink article message boxes */ | |||
@media only screen and (max-width: 500px) { | @media only screen and (max-width: 500px) { | ||
table.ambox { | table.ambox { | ||
margin-left: 5px; | margin-left: 5px; | ||
Line 82: | 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 95: | Line 208: | ||
/* Image to left or right for text wrapped around images | |||
.tleft, div.thumb.tleft { | .tleft, div.thumb.tleft { | ||
float: left; | float: left; | ||
Line 114: | Line 226: | ||
padding-left: 0; | padding-left: 0; | ||
} | } | ||
div.thumb { | div.thumb { | ||
float: none; | float: none; | ||
Line 125: | Line 237: | ||
padding-left: 0; | padding-left: 0; | ||
padding-right: 0; | padding-right: 0; | ||
} | } | ||
.thumbimage { | .thumbimage { | ||
Line 150: | Line 257: | ||
} | } | ||
a > img { | a > img { | ||
height: auto !important; | height: auto !important; | ||
Line 158: | 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 ; | ||
} | } | ||
@media screen { | @media screen { | ||
.ve-init-mw-diff-page { | .ve-init-mw-diff-page { | ||
Line 209: | Line 317: | ||
margin-right:0.25em; | margin-right:0.25em; | ||
padding:0; */ | padding:0; */ | ||
/* | |||
left: 0; | left: 0; | ||
right: 0; | right: 0; | ||
Line 246: | Line 356: | ||
overflow-y: auto; | overflow-y: auto; | ||
overflow-x: auto; | overflow-x: auto; | ||
*/ | |||
} | } | ||
/* 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 276: | 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 288: | 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 303: | 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 */ | |||
/* | |||
padding-left:0; | padding-left:0; | ||
right: 0!important; | right: 0!important; | ||
Line 321: | 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 | |||
.ve-ui-toolbar, | .ve-ui-toolbar, | ||
.ve-ui-overlay-global, | .ve-ui-overlay-global, | ||
Line 334: | Line 455: | ||
} | } | ||
} | } | ||
/* | |||
/* end visual editor extension code *********************************** */ | /* end visual editor extension code *********************************** */ | ||
/* Fit or scroll graph */ | |||
/* | |||
/* | |||
img { | img { | ||
max-width: unset; | max-width: unset; | ||
} | } | ||
*/ | |||
/* 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) {
}
*/