MediaWiki:Common.css
Aus DACH KM wiki
(Unterschied zwischen Versionen)
Zeile 4: | Zeile 4: | ||
body { | body { | ||
font-size:130%; | font-size:130%; | ||
+ | } | ||
+ | |||
+ | |||
+ | @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; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @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 .navbox, | ||
+ | .mw-body-content .navbox > .navbox-inner { | ||
+ | width: 100% !important; | ||
+ | box-sizing: border-box; | ||
+ | display: table; | ||
+ | } | ||
+ | |||
+ | .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 > .sidebar, | ||
+ | .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 > .sidebar, | ||
+ | .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 > .sidebar, | ||
+ | .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 { | ||
+ | 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: 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: 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; | ||
+ | } | ||
} | } |
Version vom 13. August 2022, 10:57 Uhr
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ body { font-size:130%; } @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; } } @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 .navbox, .mw-body-content .navbox > .navbox-inner { width: 100% !important; box-sizing: border-box; display: table; } .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 > .sidebar, .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 > .sidebar, .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 > .sidebar, .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 { 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: 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: 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; } }