Wikipedia

MediaWiki:Gadget-responsiveContentBase.css: Perbedaan antara revisi

Jelajahi riwayat secara interaktif
Konten dihapus Konten ditambahkan
←Membuat halaman berisi '@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(.mb...'
 
ABreault (WMF) (bicara | kontrib)
15 suntingan
 
Baris 1:
@media only screen and ( max-width:800px 600px ) {
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;
display: block;
max-width: 100% !important;
}
 
.mw-body-content .thumb {,
.mw-body-content figure[typeof~='mw:File/Thumb'],
.mw-body-content figure[typeof~='mw:File/Frame'] {
float: none;
clear: none;
margin: 0.5em auto;
}
 
.mw-body-content .thumbinner {
margin: 0 auto;
Baris 78 ⟶ 30:
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 figure[typeof~='mw:File/Thumb'],
.mw-body-content figure[typeof~='mw:File/Frame'],
.mw-body-content figure[typeof~='mw:File/Thumb'] > figcaption,
.mw-body-content figure[typeof~='mw:File/Frame'] > figcaption {
border: 0;
background-color: transparent;
}
 
.mw-body-content figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
.mw-body-content figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
margin: 0 auto;
max-width: calc(100% - 6px);
height: auto;
object-fit: contain;
box-sizing: border-box;
border: 0;
background-color: transparent;
}
 
.mw-body-content .thumbcaption > .magnify {
display: none;
}
 
.mw-body-content figure[typeof~='mw:File/Thumb'] > figcaption::before,
.mw-body-content figure[typeof~='mw:File/Thumb'] > .mw-file-description::after,
.mw-body-content figure[typeof~='mw:File/Thumb'] > .mw-file-magnify::after {
content: none;
}
 
/* amboxes become normal blocks */
.mw-body-content table.ambox > tbody,
Baris 95 ⟶ 76:
display: block;
}
 
/* of which we hide some parts by default to shorten them */
.mw-body-content .ambox .mbox-image,
Baris 101 ⟶ 83:
cursor: pointer;
}
 
.mw-body-content table.ambox {
font-size: 80%;
Baris 108 ⟶ 91:
border-width: 0 0 0 3px;
}
 
.mw-body-content .ambox .mbox-text-span {
text-overflow: ellipsis;
Baris 114 ⟶ 98:
display: block;
}
 
/* But we can flip a class to undo the hiding */
.ambox.mbox-expand .mbox-text-span {
Baris 120 ⟶ 105:
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 {
Baris 137 ⟶ 122:
display: table;
}
 
/* Single column refs */
.mw-body-content .references-column-countimage > img,
.mw-body-content [typeof~='mw:File'] .columnmw-count {file-element,
.mw-body-content [typeof~='mw:File/Frameless'] .mw-file-element {
-moz-column-width: 35em;
-webkit-column-width: 35em;
column-width: 35em;
}
.mw-body-content .image > img {
max-width: 100%;
min-width: 20px;
Baris 150 ⟶ 131:
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),
@media only screen and ( max-width: 600px ) and ( -webkit-min-resolutiondevice-pixel-ratio: 1.5dppx5 ),
only screen and ( max-width: 600px) and ( min-resolution: 1.5dppx ) {
{
@supports ( object-fit: contain ) {
.mw-body-content div.thumbinner {,
.mw-body-content figure[typeof~='mw:File/Thumb'],
.mw-body-content figure[typeof~='mw:File/Frame'] {
width: 100% !important;
}
 
.mw-body-content div.thumbinner .thumbimage {
.mw-body-content div.thumbinner .thumbimage,
.mw-body-content figure[typeof~='mw:File/Thumb'] > :not(figcaption) .mw-file-element,
.mw-body-content figure[typeof~='mw:File/Frame'] > :not(figcaption) .mw-file-element {
width: 100%;
object-fit: contain;
Baris 169 ⟶ 156:
}
 
@media ( min-width: 1500px ) {
.ns-0:not(.page-Main_Page) .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-navboxsidebar,
.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 > .trightmbox-small, {
.ns-0 .mw-body-content .mw-parser-output > .tright,
.ns-0 .mw-body-content .mw-parser-output > .mw-halign-right,
.ns-0 .mw-body-content.mw-content-ltr .mw-parser-output > figure[typeof~='mw:File/Thumb']:not(.mw-halign-left, .mw-halign-none, .mw-halign-center),
.ns-0 .mw-body-content.mw-content-ltr .mw-parser-output > figure[typeof~='mw:File/Frame']:not(.mw-halign-left, .mw-halign-none, .mw-halign-center) {
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-navboxsidebar,
.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-navboxsidebar,
.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 > .mw-halign-right > :not(figcaption) .mw-file-element,
.ns-0 .mw-body-content.mw-content-ltr .mw-parser-output > figure[typeof~='mw:File/Thumb']:not(.mw-halign-left, .mw-halign-none, .mw-halign-center) > :not(figcaption) .mw-file-element ,
.ns-0 .mw-body-content.mw-content-ltr .mw-parser-output > figure[typeof~='mw:File/Frame']:not(.mw-halign-left, .mw-halign-none, .mw-halign-center) > :not(figcaption) .mw-file-element {
width: 330px !important;
box-sizing: border-box;
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 {,
.ns-0 .mw-body-content .mw-parser-output > .mw-halign-left,
.ns-0 .mw-body-content.mw-content-rtl .mw-parser-output > figure[typeof~='mw:File/Thumb']:not(.mw-halign-right, .mw-halign-none, .mw-halign-center),
.ns-0 .mw-body-content.mw-content-rtl .mw-parser-output > figure[typeof~='mw:File/Frame']:not(.mw-halign-right, .mw-halign-none, .mw-halign-center) {
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 {
max-width: calc( 100% - 350px );
 
max-width: -webkit-calc(100% - 350px);
max-width: -moz-calc(100% - 350px);
max-width: calc(100% - 350px);
}
}
 
@media ( min-width: 1900px ) {
.ns-0:not(.page-Main_Page) .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 {,
.ns-0 .mw-body-content .mw-parser-output > .mw-halign-left,
.ns-0 .mw-body-content.mw-content-rtl .mw-parser-output > figure[typeof~='mw:File/Thumb']:not(.mw-halign-right, .mw-halign-none, .mw-halign-center),
.ns-0 .mw-body-content.mw-content-rtl .mw-parser-output > figure[typeof~='mw:File/Frame']:not(.mw-halign-right, .mw-halign-none, .mw-halign-center) {
margin-left: 0 !important;
}
 
.ns-0 .mw-body-content .mw-parser-output > #toc,
.ns-0 .mw-body-content .mw-parser-output > .floatleft,
Baris 235 ⟶ 247:
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;
}
 
.ns-0 .mw-body-content .mw-parser-output > .mw-halign-left > :not(figcaption) .mw-file-element,
.ns-0 .mw-body-content.mw-content-rtl .mw-parser-output > figure[typeof~='mw:File/Thumb']:not(.mw-halign-right, .mw-halign-none, .mw-halign-center) > :not(figcaption) .mw-file-element,
.ns-0 .mw-body-content.mw-content-rtl .mw-parser-output > figure[typeof~='mw:File/Frame']:not(.mw-halign-right, .mw-halign-none, .mw-halign-center) > :not(figcaption) .mw-file-element {
width: 330px !important;
box-sizing: border-box;
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 {
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 {
Baris 272 ⟶ 293:
 
}
@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,
Diperoleh dari "https://id.wikipedia.org/wiki/MediaWiki:Gadget-responsiveContentBase.css"