MediaWiki:Gadget-responsiveContentBase.css: Difference between revisions
Content deleted Content added
sync in requested update from User:Trialpears/Gadget-responsiveContentBase.css |
Spacing etc (mw coding style) |
||
Line 1: | Line 1: | ||
@media (max-width:800px) { |
@media ( max-width: 800px ) { |
||
table.tmbox:not(.mbox-small),table.ambox:not(.mbox-small), |
table.tmbox:not( .mbox-small ), |
||
table.ambox:not( .mbox-small ), |
|||
table.imbox:not(.mbox-small),table.cmbox:not(.mbox-small), |
table.imbox:not( .mbox-small ), |
||
table.cmbox:not( .mbox-small ), |
|||
table.ombox:not(.mbox-small) { |
table.ombox:not( .mbox-small ) { |
||
margin: 0; |
|||
padding: 5px; |
|||
box-sizing: border-box; |
|||
border-collapse: separate; |
|||
} |
} |
||
⚫ | |||
.mw-body-content td.mbox-image.mbox-image { |
.mw-body-content td.mbox-image.mbox-image { |
||
float: left; |
|||
padding: 0 4px; |
|||
} |
} |
||
.mw-body-content td.mbox-imageright.mbox-imageright { |
.mw-body-content td.mbox-imageright.mbox-imageright { |
||
float:right; |
float: right; |
||
padding: 0 4px; |
padding: 0 4px; |
||
} |
} |
||
.mw-body-content td.mbox-text { |
.mw-body-content td.mbox-text { |
||
display: block; |
display: block; |
||
width: auto; |
width: auto; |
||
} |
} |
||
/* Main page fixes */ |
/* Main page fixes */ |
||
#mp-topbanner > tbody > tr { |
#mp-topbanner > tbody > tr { |
||
Line 28: | Line 32: | ||
width: auto !important; |
width: auto !important; |
||
} |
} |
||
#mp-topbanner > tbody > tr > td:nth-child(1) { |
#mp-topbanner > tbody > tr > td:nth-child( 1 ) { |
||
flex:3 0 auto; |
flex: 3 0 auto; |
||
width: auto !important; |
width: auto !important; |
||
} |
} |
||
#mp-topbanner > tbody > tr > td:nth-child(n+2) { |
#mp-topbanner > tbody > tr > td:nth-child( n+2 ) { |
||
flex: |
flex: 0 0 auto; |
||
width: auto !important; |
width: auto !important; |
||
} |
} |
||
/* main page table */ |
/* main page table */ |
||
#mp-upper > tbody > tr, |
#mp-upper > tbody > tr, |
||
Line 50: | Line 57: | ||
} |
} |
||
@media only screen and (max-width:600px) { |
@media only screen and ( max-width: 600px ) { |
||
/* !important to ignore inline styles */ |
/* !important to ignore inline styles */ |
||
/* .mw-body-content to increase specificity */ |
/* .mw-body-content to increase specificity */ |
||
.mw-body-content table { |
.mw-body-content table { |
||
float: none!important; |
float: none !important; |
||
margin-left: auto !important; |
margin-left: auto !important; |
||
margin-right: auto !important; |
margin-right: auto !important; |
||
} |
} |
||
.mw-body-content table { |
.mw-body-content table { |
||
overflow: auto; |
overflow: auto; |
||
Line 68: | Line 76: | ||
float: none; |
float: none; |
||
clear: none; |
clear: none; |
||
margin: .5em auto; |
margin: 0.5em auto; |
||
} |
} |
||
.mw-body-content .thumbinner { |
.mw-body-content .thumbinner { |
||
margin: 0 auto; |
margin: 0 auto; |
||
Line 77: | Line 86: | ||
background-color: transparent; |
background-color: transparent; |
||
} |
} |
||
.mw-body-content .thumbinner .thumbimage { |
.mw-body-content .thumbinner .thumbimage { |
||
max-width: 100%; |
max-width: 100%; |
||
Line 82: | Line 92: | ||
object-fit: contain; |
object-fit: contain; |
||
} |
} |
||
.mw-body-content .thumbimage { |
.mw-body-content .thumbimage { |
||
border: 0; |
border: 0; |
||
background-color: transparent; |
background-color: transparent; |
||
} |
} |
||
.mw-body-content .thumbcaption > .magnify { |
.mw-body-content .thumbcaption > .magnify { |
||
display: none; |
display: none; |
||
} |
} |
||
/* amboxes become normal blocks */ |
/* amboxes become normal blocks */ |
||
.mw-body-content table.ambox > tbody, |
.mw-body-content table.ambox > tbody, |
||
Line 95: | Line 107: | ||
display: block; |
display: block; |
||
} |
} |
||
/* of which we hide some parts by default to shorten them */ |
/* of which we hide some parts by default to shorten them */ |
||
.mw-body-content .ambox .mbox-image, |
.mw-body-content .ambox .mbox-image, |
||
Line 101: | Line 114: | ||
cursor: pointer; |
cursor: pointer; |
||
} |
} |
||
.mw-body-content table.ambox { |
.mw-body-content table.ambox { |
||
font-size: 80%; |
font-size: 80%; |
||
Line 108: | Line 122: | ||
border-width: 0 0 0 3px; |
border-width: 0 0 0 3px; |
||
} |
} |
||
.mw-body-content .ambox .mbox-text-span { |
.mw-body-content .ambox .mbox-text-span { |
||
text-overflow: ellipsis; |
text-overflow: ellipsis; |
||
Line 114: | Line 129: | ||
display: block; |
display: block; |
||
} |
} |
||
/* But we can flip a class to undo the hiding */ |
/* But we can flip a class to undo the hiding */ |
||
.ambox.mbox-expand .mbox-text-span { |
.ambox.mbox-expand .mbox-text-span { |
||
Line 120: | Line 136: | ||
overflow: auto; |
overflow: auto; |
||
} |
} |
||
.ambox.mbox-expand .mbox-text .hide-when-compact { |
.ambox.mbox-expand .mbox-text .hide-when-compact { |
||
display: inline; |
display: inline; |
||
} |
} |
||
#firstHeading .mw-editsection, |
#firstHeading .mw-editsection, |
||
#coordinates { |
#coordinates { |
||
display: none; |
display: none; |
||
} |
} |
||
.mw-body-content .infobox, |
.mw-body-content .infobox, |
||
.mw-body-content .vertical-navbox, |
.mw-body-content .vertical-navbox, |
||
Line 137: | Line 154: | ||
display: table; |
display: table; |
||
} |
} |
||
/* Single column refs */ |
/* Single column refs */ |
||
.mw-body-content .references-column-count, |
.mw-body-content .references-column-count, |
||
Line 144: | Line 162: | ||
column-width: 35em; |
column-width: 35em; |
||
} |
} |
||
.mw-body-content .image > img { |
.mw-body-content .image > img { |
||
max-width: 100%; |
max-width: 100%; |
||
Line 150: | Line 169: | ||
object-fit: contain; |
object-fit: contain; |
||
} |
} |
||
.mw-body-content { |
.mw-body-content { |
||
word-wrap: break-word; |
word-wrap: break-word; |
||
} |
} |
||
} |
} |
||
⚫ | |||
@media only screen and ( max-width: 600px ) and ( -webkit-min-device-pixel-ratio: 1.5 ), |
|||
⚫ | |||
{ |
|||
@supports (object-fit: contain) { |
@supports ( object-fit: contain ) { |
||
.mw-body-content div.thumbinner { |
.mw-body-content div.thumbinner { |
||
width: 100% !important; |
width: 100% !important; |
||
} |
} |
||
.mw-body-content div.thumbinner .thumbimage { |
.mw-body-content div.thumbinner .thumbimage { |
||
width: 100%; |
width: 100%; |
||
Line 169: | Line 190: | ||
} |
} |
||
@media (min-width:1500px) { |
@media ( min-width: 1500px ) { |
||
.ns-0 .mw-body-content .mw-parser-output > * { |
.ns-0 .mw-body-content .mw-parser-output > * { |
||
margin-right: 350px !important; |
margin-right: 350px !important; |
||
} |
} |
||
.ns-0 .mw-body-content .mw-parser-output > * > li { |
.ns-0 .mw-body-content .mw-parser-output > * > li { |
||
list-style-position: inside; |
list-style-position: inside; |
||
} |
} |
||
.ns-0 .mw-body-content .mw-parser-output > .infobox, |
.ns-0 .mw-body-content .mw-parser-output > .infobox, |
||
.ns-0 .mw-body-content .mw-parser-output > .vertical-navbox, |
.ns-0 .mw-body-content .mw-parser-output > .vertical-navbox, |
||
Line 185: | Line 208: | ||
margin-left: 1.4em !important; |
margin-left: 1.4em !important; |
||
} |
} |
||
.ns-0 .mw-body-content .mw-parser-output > .infobox, |
.ns-0 .mw-body-content .mw-parser-output > .infobox, |
||
.ns-0 .mw-body-content .mw-parser-output > .vertical-navbox, |
.ns-0 .mw-body-content .mw-parser-output > .vertical-navbox, |
||
Line 191: | Line 215: | ||
min-width: 330px !important; |
min-width: 330px !important; |
||
} |
} |
||
.ns-0 .mw-body-content .mw-parser-output > .infobox, |
.ns-0 .mw-body-content .mw-parser-output > .infobox, |
||
.ns-0 .mw-body-content .mw-parser-output > .vertical-navbox, |
.ns-0 .mw-body-content .mw-parser-output > .vertical-navbox, |
||
Line 197: | Line 222: | ||
box-sizing: border-box; |
box-sizing: border-box; |
||
} |
} |
||
.ns-0 .mw-body-content .mw-parser-output > .tright .thumbimage { |
.ns-0 .mw-body-content .mw-parser-output > .tright .thumbimage { |
||
width: 100%; |
width: 100%; |
||
height: auto; |
height: auto; |
||
} |
} |
||
.ns-0 .mw-body-content .mw-parser-output > #toc, |
.ns-0 .mw-body-content .mw-parser-output > #toc, |
||
.ns-0 .mw-body-content .mw-parser-output > .floatleft, |
.ns-0 .mw-body-content .mw-parser-output > .floatleft, |
||
Line 206: | Line 233: | ||
margin-right: 1.4em !important; |
margin-right: 1.4em !important; |
||
} |
} |
||
.ns-0 .mw-body-content .mw-parser-output > table, |
.ns-0 .mw-body-content .mw-parser-output > table, |
||
.ns-0 .mw-body-content .mw-parser-output > .center, |
.ns-0 .mw-body-content .mw-parser-output > .center, |
||
.ns-0 .mw-body-content .mw-parser-output > .navbox, |
.ns-0 .mw-body-content .mw-parser-output > .navbox, |
||
#mp-topbanner{ |
#mp-topbanner{ |
||
⚫ | |||
max-width: - |
max-width: -moz-calc( 100% - 350px ); |
||
max-width: |
max-width: calc( 100% - 350px ); |
||
⚫ | |||
} |
} |
||
} |
} |
||
@media (min-width:1900px) { |
@media ( min-width: 1900px ) { |
||
.ns-0 .mw-body-content .mw-parser-output > * { |
.ns-0 .mw-body-content .mw-parser-output > * { |
||
margin-left: 350px !important; |
margin-left: 350px !important; |
||
} |
} |
||
.ns-0 .mw-body-content .mw-parser-output > #toc { |
.ns-0 .mw-body-content .mw-parser-output > #toc { |
||
box-sizing: border-box; |
box-sizing: border-box; |
||
float: left; |
float: left; |
||
} |
} |
||
.ns-0 .mw-body-content .mw-parser-output > #toc, |
.ns-0 .mw-body-content .mw-parser-output > #toc, |
||
.ns-0 .mw-body-content .mw-parser-output > .floatleft, |
.ns-0 .mw-body-content .mw-parser-output > .floatleft, |
||
Line 231: | Line 260: | ||
margin-left: 0 !important; |
margin-left: 0 !important; |
||
} |
} |
||
.ns-0 .mw-body-content .mw-parser-output > #toc, |
.ns-0 .mw-body-content .mw-parser-output > #toc, |
||
.ns-0 .mw-body-content .mw-parser-output > .floatleft, |
.ns-0 .mw-body-content .mw-parser-output > .floatleft, |
||
Line 237: | Line 267: | ||
max-width: 330px !important; |
max-width: 330px !important; |
||
} |
} |
||
.ns-0 .mw-body-content .mw-parser-output > .tleft > .thumbinner { |
.ns-0 .mw-body-content .mw-parser-output > .tleft > .thumbinner { |
||
width: 330px !important; |
width: 330px !important; |
||
box-sizing: border-box; |
box-sizing: border-box; |
||
} |
} |
||
.ns-0 .mw-body-content .mw-parser-output > .tleft .thumbimage { |
.ns-0 .mw-body-content .mw-parser-output > .tleft .thumbimage { |
||
width: 100%; |
width: 100%; |
||
height: auto; |
height: auto; |
||
} |
} |
||
/* Do this in all namespaces */ |
/* Do this in all namespaces */ |
||
:not( .ns-0 ) .mw-body-content .mw-parser-output { |
|||
max-width: 1900px; |
max-width: 1900px; |
||
margin-left: auto; |
margin-left: auto; |
||
margin-right: auto; |
margin-right: auto; |
||
⚫ | |||
} |
|||
.ns-0 .mw-body > :not(.mw-body-content), |
.ns-0 .mw-body > :not(.mw-body-content), |
||
.ns-0 .mw-body-content > :not(#mw-content-text) |
.ns-0 .mw-body-content > :not(#mw-content-text) { |
||
{ |
|||
max-width: -webkit-calc( 1900px - 700px ); |
max-width: -webkit-calc( 1900px - 700px ); |
||
max-width: -moz-calc( 1900px - 700px ); |
|||
max-width: calc( 1900px - 700px ); |
max-width: calc( 1900px - 700px ); |
||
margin-left: auto; |
margin-left: auto; |
||
margin-right: auto; |
margin-right: auto; |
||
} |
} |
||
/* 700 is 350+350 (right side bar + left side bar) */ |
/* 700 is 350+350 (right side bar + left side bar) */ |
||
.ns-0 .mw-body-content .mw-parser-output > table, |
.ns-0 .mw-body-content .mw-parser-output > table, |
||
Line 265: | Line 299: | ||
.ns-0 .mw-body-content .mw-parser-output > .navbox, |
.ns-0 .mw-body-content .mw-parser-output > .navbox, |
||
#mp-topbanner { |
#mp-topbanner { |
||
max-width: -webkit-calc(100% - 700px); |
max-width: -webkit-calc( 100% - 700px ); |
||
max-width: -moz-calc( 100% - 700px ); |
|||
max-width: calc( 100% - 700px ); |
|||
} |
} |
||
/* We increase the font size a bit */ |
/* We increase the font size a bit */ |
||
.skin-vector .mw-body-content { |
.skin-vector .mw-body-content { |
||
Line 275: | Line 310: | ||
} |
} |
||
@media only screen and (max-width:600px) and (-webkit-min-device-pixel-ratio: 2), |
@media only screen and ( max-width: 600px ) and ( -webkit-min-device-pixel-ratio: 2 ), |
||
only screen and (max-width:600px) and (min-resolution: 2dppx) |
only screen and ( max-width:600px ) and ( min-resolution: 2dppx ) { |
||
{ |
|||
/* We reduce the font size a bit, since retina screens rule */ |
/* We reduce the font size a bit, since retina screens rule */ |
||
.skin-vector .mw-body-content { |
.skin-vector .mw-body-content { |
||
font-size: 0.75em; |
font-size: 0.75em; |
||
} |
} |
||
.skin-vector .mw-body h1, |
.skin-vector .mw-body h1, |
||
.skin-vector .mw-body h2, |
.skin-vector .mw-body h2, |
Revision as of 02:40, 15 November 2019
@media ( max-width: 800px ) {
table.tmbox:not( .mbox-small ),
table.ambox:not( .mbox-small ),
table.imbox:not( .mbox-small ),
table.cmbox:not( .mbox-small ),
table.ombox:not( .mbox-small ) {
margin: 0;
padding: 5px;
box-sizing: border-box;
border-collapse: separate;
}
.mw-body-content td.mbox-image.mbox-image {
float: left;
padding: 0 4px;
}
.mw-body-content td.mbox-imageright.mbox-imageright {
float: right;
padding: 0 4px;
}
.mw-body-content td.mbox-text {
display: block;
width: auto;
}
/* Main page fixes */
#mp-topbanner > tbody > tr {
display: flex;
flex-wrap: wrap;
width: auto !important;
}
#mp-topbanner > tbody > tr > td:nth-child( 1 ) {
flex: 3 0 auto;
width: auto !important;
}
#mp-topbanner > tbody > tr > td:nth-child( n+2 ) {
flex: 0 0 auto;
width: auto !important;
}
/* main page table */
#mp-upper > tbody > tr,
#mp-upper > tbody > tr > *,
#mp-bottom > tbody > tr,
#mp-bottom > tbody > tr > *,
#mp-tfp > table > tbody > tr,
#mp-tfp > table > tbody > tr > * {
display: block;
width: 100% !important;
max-width: 100%;
box-sizing: border-box;
}
}
@media only screen and ( max-width: 600px ) {
/* !important to ignore inline styles */
/* .mw-body-content to increase specificity */
.mw-body-content table {
float: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
.mw-body-content table {
overflow: auto;
overflow-y: hidden;
overflow-x: auto;
max-width: 100% !important;
}
.mw-body-content .thumb {
float: none;
clear: none;
margin: 0.5em auto;
}
.mw-body-content .thumbinner {
margin: 0 auto;
max-width: 100%;
box-sizing: border-box;
border: 0;
background-color: transparent;
}
.mw-body-content .thumbinner .thumbimage {
max-width: 100%;
height: auto;
object-fit: contain;
}
.mw-body-content .thumbimage {
border: 0;
background-color: transparent;
}
.mw-body-content .thumbcaption > .magnify {
display: none;
}
/* amboxes become normal blocks */
.mw-body-content table.ambox > tbody,
.mw-body-content table.ambox > tbody > tr {
display: block;
}
/* of which we hide some parts by default to shorten them */
.mw-body-content .ambox .mbox-image,
.mw-body-content .ambox .mbox-text .hide-when-compact {
display: none;
cursor: pointer;
}
.mw-body-content table.ambox {
font-size: 80%;
background-color: transparent;
margin-left: 0 !important;
padding: 0 !important;
border-width: 0 0 0 3px;
}
.mw-body-content .ambox .mbox-text-span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
/* But we can flip a class to undo the hiding */
.ambox.mbox-expand .mbox-text-span {
text-overflow: initial;
white-space: normal;
overflow: auto;
}
.ambox.mbox-expand .mbox-text .hide-when-compact {
display: inline;
}
#firstHeading .mw-editsection,
#coordinates {
display: none;
}
.mw-body-content .infobox,
.mw-body-content .vertical-navbox,
.mw-body-content .navbox,
.mw-body-content .navbox > .navbox-inner {
width: 100% !important;
box-sizing: border-box;
display: table;
}
/* Single column refs */
.mw-body-content .references-column-count,
.mw-body-content .column-count {
-moz-column-width: 35em;
-webkit-column-width: 35em;
column-width: 35em;
}
.mw-body-content .image > img {
max-width: 100%;
min-width: 20px;
height: auto;
object-fit: contain;
}
.mw-body-content {
word-wrap: break-word;
}
}
@media only screen and ( max-width: 600px ) and ( -webkit-min-device-pixel-ratio: 1.5 ),
only screen and ( max-width: 600px) and ( min-resolution: 1.5dppx ) {
@supports ( object-fit: contain ) {
.mw-body-content div.thumbinner {
width: 100% !important;
}
.mw-body-content div.thumbinner .thumbimage {
width: 100%;
object-fit: contain;
max-height: 60vh;
}
}
}
@media ( min-width: 1500px ) {
.ns-0 .mw-body-content .mw-parser-output > * {
margin-right: 350px !important;
}
.ns-0 .mw-body-content .mw-parser-output > * > li {
list-style-position: inside;
}
.ns-0 .mw-body-content .mw-parser-output > .infobox,
.ns-0 .mw-body-content .mw-parser-output > .vertical-navbox,
.ns-0 .mw-body-content .mw-parser-output > .floatright,
.ns-0 .mw-body-content .mw-parser-output > .sistersitebox,
.ns-0 .mw-body-content .mw-parser-output > .mbox-small,
.ns-0 .mw-body-content .mw-parser-output > .tright {
margin-right: 0 !important;
margin-left: 1.4em !important;
}
.ns-0 .mw-body-content .mw-parser-output > .infobox,
.ns-0 .mw-body-content .mw-parser-output > .vertical-navbox,
.ns-0 .mw-body-content .mw-parser-output > .floatright,
.ns-0 .mw-body-content .mw-parser-output > .tright {
min-width: 330px !important;
}
.ns-0 .mw-body-content .mw-parser-output > .infobox,
.ns-0 .mw-body-content .mw-parser-output > .vertical-navbox,
.ns-0 .mw-body-content .mw-parser-output > .tright > .thumbinner {
width: 330px !important;
box-sizing: border-box;
}
.ns-0 .mw-body-content .mw-parser-output > .tright .thumbimage {
width: 100%;
height: auto;
}
.ns-0 .mw-body-content .mw-parser-output > #toc,
.ns-0 .mw-body-content .mw-parser-output > .floatleft,
.ns-0 .mw-body-content .mw-parser-output > .tleft {
margin-right: 1.4em !important;
}
.ns-0 .mw-body-content .mw-parser-output > table,
.ns-0 .mw-body-content .mw-parser-output > .center,
.ns-0 .mw-body-content .mw-parser-output > .navbox,
#mp-topbanner{
max-width: -webkit-calc( 100% - 350px );
max-width: -moz-calc( 100% - 350px );
max-width: calc( 100% - 350px );
}
}
@media ( min-width: 1900px ) {
.ns-0 .mw-body-content .mw-parser-output > * {
margin-left: 350px !important;
}
.ns-0 .mw-body-content .mw-parser-output > #toc {
box-sizing: border-box;
float: left;
}
.ns-0 .mw-body-content .mw-parser-output > #toc,
.ns-0 .mw-body-content .mw-parser-output > .floatleft,
.ns-0 .mw-body-content .mw-parser-output > .mbox-small-left,
.ns-0 .mw-body-content .mw-parser-output > .tleft {
margin-left: 0 !important;
}
.ns-0 .mw-body-content .mw-parser-output > #toc,
.ns-0 .mw-body-content .mw-parser-output > .floatleft,
.ns-0 .mw-body-content .mw-parser-output > .tleft {
min-width: 330px !important;
max-width: 330px !important;
}
.ns-0 .mw-body-content .mw-parser-output > .tleft > .thumbinner {
width: 330px !important;
box-sizing: border-box;
}
.ns-0 .mw-body-content .mw-parser-output > .tleft .thumbimage {
width: 100%;
height: auto;
}
/* Do this in all namespaces */
:not( .ns-0 ) .mw-body-content .mw-parser-output {
max-width: 1900px;
margin-left: auto;
margin-right: auto;
}
.ns-0 .mw-body > :not(.mw-body-content),
.ns-0 .mw-body-content > :not(#mw-content-text) {
max-width: -webkit-calc( 1900px - 700px );
max-width: -moz-calc( 1900px - 700px );
max-width: calc( 1900px - 700px );
margin-left: auto;
margin-right: auto;
}
/* 700 is 350+350 (right side bar + left side bar) */
.ns-0 .mw-body-content .mw-parser-output > table,
.ns-0 .mw-body-content .mw-parser-output > .center,
.ns-0 .mw-body-content .mw-parser-output > .navbox,
#mp-topbanner {
max-width: -webkit-calc( 100% - 700px );
max-width: -moz-calc( 100% - 700px );
max-width: calc( 100% - 700px );
}
/* We increase the font size a bit */
.skin-vector .mw-body-content {
font-size: 0.95em;
}
}
@media only screen and ( max-width: 600px ) and ( -webkit-min-device-pixel-ratio: 2 ),
only screen and ( max-width:600px ) and ( min-resolution: 2dppx ) {
/* We reduce the font size a bit, since retina screens rule */
.skin-vector .mw-body-content {
font-size: 0.75em;
}
.skin-vector .mw-body h1,
.skin-vector .mw-body h2,
.skin-vector .mw-body h3 {
font-size: 1em;
font-weight: bold;
}
}