MediaWiki:Vector.css: Difference between revisions
Content deleted Content added
Johnrdorazio (talk | contribs) Created page with "→CSS placed here will affect users of the Vector skin: @media ( max-width: 800px ) { table.tmbox:not( .mbox-small ), table.ambox:not( .mbox-small ), table.imbox:not( .m..." |
Johnrdorazio (talk | contribs) No edit summary |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* |
/* Don't display some stuff on the main page */ |
||
@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; |
|||
} |
|||
.page-Main_Page #deleteconfirm, |
|||
.mw-body-content td.mbox-image.mbox-image { |
|||
.page-Main_Page #t-cite, |
|||
float: left; |
|||
.page-Main_Page #footer-info-lastmod, |
|||
padding: 0 4px; |
|||
.action-view.page-Main_Page #siteSub, |
|||
} |
|||
.action-view.page-Main_Page #contentSub, |
|||
.action-view.page-Main_Page #contentSub2 { |
|||
.mw-body-content td.mbox-imageright.mbox-imageright { |
|||
display: none !important; |
|||
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; |
|||
} |
|||
} |
} |
||
/* Position coordinates */ |
|||
@media only screen and ( max-width: 600px ) { |
|||
#coordinates { |
|||
/* !important to ignore inline styles */ |
|||
position: absolute; |
|||
/* .mw-body-content to increase specificity */ |
|||
top: 0; |
|||
.mw-body-content table { |
|||
right: 0; |
|||
float: none !important; |
|||
float: right; |
|||
margin-left: auto !important; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
line-height: 1.5em; |
|||
text-align: right; |
|||
.mw-body-content table { |
|||
text-indent: 0; |
|||
overflow: auto; |
|||
font-size: 85%; |
|||
overflow-y: hidden; |
|||
text-transform: none; |
|||
overflow-x: auto; |
|||
white-space: nowrap; |
|||
max-width: 100% !important; |
|||
} |
|||
/* correct position for VE */ |
|||
.ve-ce-surface-enabled #coordinates { |
|||
.mw-body-content .thumb { |
|||
margin-right: 2em; |
|||
float: none; |
|||
margin-top: -1em; |
|||
clear: none; |
|||
} |
|||
margin: 0.5em auto; |
|||
.mw-indicator #coordinates { |
|||
} |
|||
position: absolute; |
|||
top: 3.5em; |
|||
.mw-body-content .thumbinner { |
|||
right: 0; |
|||
line-height: 1.6; |
|||
text-align: right; |
|||
box-sizing: border-box; |
|||
font-size: 92%; |
|||
border: 0; |
|||
white-space: nowrap; |
|||
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; |
|||
} |
|||
} |
} |
||
/* FR topicon position */ |
|||
@media only screen and ( max-width: 600px ) and ( -webkit-min-device-pixel-ratio: 1.5 ), |
|||
body.skin-vector-legacy div.flaggedrevs_short { |
|||
only screen and ( max-width: 600px) and ( min-resolution: 1.5dppx ) { |
|||
position: absolute; |
|||
@supports ( object-fit: contain ) { |
|||
top: -3em; |
|||
.mw-body-content div.thumbinner { |
|||
right: 100px; |
|||
width: 100% !important; |
|||
z-index: 1; |
|||
} |
|||
.mw-body-content div.thumbinner .thumbimage { |
|||
width: 100%; |
|||
object-fit: contain; |
|||
max-height: 60vh; |
|||
} |
|||
} |
|||
} |
} |
||
/* Make "From Wikipedia, the free encyclopedia" a bit smaller */ |
|||
@media ( min-width: 1500px ) { |
|||
body.skin-vector-legacy #siteSub { |
|||
.ns-0 .mw-body-content .mw-parser-output > * { |
|||
font-size: 92%; |
|||
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; |
|||
} |
|||
/* Move page status indicators down slightly */ |
|||
body.skin-vector-legacy .mw-indicators { |
|||
padding-top: 0.4em; |
|||
} |
} |
||
@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; |
|||
} |
|||
/* Override [[phab:T265947]] */ |
|||
.skin-vector .mw-body h1, |
|||
.mw-body-content blockquote { |
|||
.skin-vector .mw-body h2, |
|||
border-left: none; |
|||
.skin-vector .mw-body h3 { |
|||
font-size: 1em; |
|||
font-weight: bold; |
|||
} |
|||
} |
} |
||
Latest revision as of 13:50, April 26, 2023
/* Don't display some stuff on the main page */
.page-Main_Page #deleteconfirm,
.page-Main_Page #t-cite,
.page-Main_Page #footer-info-lastmod,
.action-view.page-Main_Page #siteSub,
.action-view.page-Main_Page #contentSub,
.action-view.page-Main_Page #contentSub2 {
display: none !important;
}
/* Position coordinates */
#coordinates {
position: absolute;
top: 0;
right: 0;
float: right;
margin: 0;
padding: 0;
line-height: 1.5em;
text-align: right;
text-indent: 0;
font-size: 85%;
text-transform: none;
white-space: nowrap;
}
/* correct position for VE */
.ve-ce-surface-enabled #coordinates {
margin-right: 2em;
margin-top: -1em;
}
.mw-indicator #coordinates {
position: absolute;
top: 3.5em;
right: 0;
line-height: 1.6;
text-align: right;
font-size: 92%;
white-space: nowrap;
}
/* FR topicon position */
body.skin-vector-legacy div.flaggedrevs_short {
position: absolute;
top: -3em;
right: 100px;
z-index: 1;
}
/* Make "From Wikipedia, the free encyclopedia" a bit smaller */
body.skin-vector-legacy #siteSub {
font-size: 92%;
}
/* Move page status indicators down slightly */
body.skin-vector-legacy .mw-indicators {
padding-top: 0.4em;
}
/* Override [[phab:T265947]] */
.mw-body-content blockquote {
border-left: none;
}