MediaWiki:Timeless.css: Unterschied zwischen den Versionen
Dadada (Diskussion | Beiträge) (Tut nicht funktionieren) |
(Optimize css for mobile) |
||
| Zeile 1: | Zeile 1: | ||
| − | /* CSS placed here will affect users of the Timeless skin */ | + | /* CSS placed here will affect users of the Timeless skin */ |
| − | + | ||
| − | /* | + | /* -------------------------------------------------------------------------- |
| − | #mw-content-container { | + | Desktop & Global Settings |
| − | + | -------------------------------------------------------------------------- */ | |
| − | + | /* Keep the top bar scrolling with content (existing setting) */ | |
| − | } | + | #mw-content-container { |
| − | #mw-header-container { | + | margin-top: 0em; |
| − | + | padding-bottom: 1em; | |
| − | } | + | } |
| − | #mw-header-nav-hack, #mw-header-hack { | + | #mw-header-container { |
| − | + | position: static; | |
| − | } | + | } |
| + | #mw-header-nav-hack, #mw-header-hack { | ||
| + | position: static; | ||
| + | } | ||
| + | |||
| + | /* -------------------------------------------------------------------------- | ||
| + | Mobile Optimizations (Timeless mobile breakpoint: <= 850px) | ||
| + | -------------------------------------------------------------------------- */ | ||
| + | @media screen and (max-width: 850px) { | ||
| + | |||
| + | /* 1. Viewport & Padding Optimization */ | ||
| + | /* Reclaim screen real estate from Timeless skin's large default 2em side padding */ | ||
| + | #mw-header-container { | ||
| + | padding-left: 1.25em; | ||
| + | padding-right: 1.25em; | ||
| + | } | ||
| + | #mw-content { | ||
| + | padding: 1.25em 1.25em 2.5em; | ||
| + | } | ||
| + | #mw-footer { | ||
| + | padding: 0 1.25em; | ||
| + | } | ||
| + | #catlinks { | ||
| + | margin: 0 1.25em; | ||
| + | } | ||
| + | |||
| + | /* 2. Fix Squished Float Elements (Images, Infoboxes) */ | ||
| + | /* Un-float right/left aligned images and callout boxes so text is not compressed */ | ||
| + | .mw-parser-output .floatright, | ||
| + | .mw-parser-output .floatleft, | ||
| + | .mw-parser-output div[style*="float:right"], | ||
| + | .mw-parser-output div[style*="float: right"], | ||
| + | .mw-parser-output div[style*="float:left"], | ||
| + | .mw-parser-output div[style*="float: left"], | ||
| + | .mw-parser-output table.floatright, | ||
| + | .mw-parser-output table.floatleft { | ||
| + | float: none !important; | ||
| + | clear: both !important; | ||
| + | margin: 1em auto !important; | ||
| + | text-align: center; | ||
| + | max-width: 100% !important; | ||
| + | } | ||
| + | |||
| + | /* 3. Proportional Responsive Images */ | ||
| + | .mw-parser-output img, | ||
| + | #mw-content img { | ||
| + | max-width: 100% !important; | ||
| + | height: auto !important; | ||
| + | } | ||
| + | |||
| + | /* 4. Multi-Column Layout Tables (e.g. Hauptseite Projekte & Community) */ | ||
| + | /* Stack multi-column borderless layout tables vertically into full-width blocks */ | ||
| + | .mw-parser-output table[style*="border:0"] > tbody > tr > td, | ||
| + | .mw-parser-output table[style*="border: 0"] > tbody > tr > td, | ||
| + | .mw-parser-output table[style*="border:none"] > tbody > tr > td, | ||
| + | .mw-parser-output table[style*="border: none"] > tbody > tr > td, | ||
| + | .mw-parser-output table[style*="border:0"] > tr > td, | ||
| + | .mw-parser-output table[style*="border: 0"] > tr > td, | ||
| + | .mw-parser-output table[style*="border:none"] > tr > td, | ||
| + | .mw-parser-output table[style*="border: none"] > tr > td { | ||
| + | display: block !important; | ||
| + | width: 100% !important; | ||
| + | box-sizing: border-box !important; | ||
| + | padding: 0.5em 0 !important; | ||
| + | } | ||
| + | |||
| + | /* 5. Data Tables (wikitable, prettytable, etc.) */ | ||
| + | /* Allow wide tables to scroll horizontally within their box instead of breaking page | ||
| + | width */ | ||
| + | .mw-parser-output table { | ||
| + | max-width: 100% !important; | ||
| + | box-sizing: border-box !important; | ||
| + | } | ||
| + | .mw-parser-output table.wikitable, | ||
| + | .mw-parser-output table.prettytable, | ||
| + | .mw-parser-output .mw-datatable { | ||
| + | display: block !important; | ||
| + | width: 100% !important; | ||
| + | overflow-x: auto !important; | ||
| + | -webkit-overflow-scrolling: touch; | ||
| + | margin: 1em 0 !important; | ||
| + | } | ||
| + | |||
| + | /* 6. Code & Pre Blocks */ | ||
| + | /* Contain long code strings and wrap inline code */ | ||
| + | pre, | ||
| + | .mw-code, | ||
| + | .mw-highlight { | ||
| + | max-width: 100% !important; | ||
| + | box-sizing: border-box !important; | ||
| + | overflow-x: auto !important; | ||
| + | -webkit-overflow-scrolling: touch; | ||
| + | } | ||
| + | code { | ||
| + | word-break: break-word; | ||
| + | } | ||
| + | |||
| + | /* 7. Typography & Long Word Wrapping */ | ||
| + | h1, h2, h3, h4, h5, h6, | ||
| + | .mw-headline, | ||
| + | #bodyContent { | ||
| + | overflow-wrap: break-word; | ||
| + | word-wrap: break-word; | ||
| + | } | ||
| + | |||
| + | /* 8. Touch Targets for Page Actions */ | ||
| + | /* Expand touch targets from 20px to 36px for easier tapping on mobile */ | ||
| + | #mw-page-header-links li { | ||
| + | margin: 0 0.25em 0.75em 0.25em !important; | ||
| + | } | ||
| + | #mw-page-header-links li a, | ||
| + | #mw-page-header-links li.dropdown-toggle { | ||
| + | min-width: 36px; | ||
| + | min-height: 36px; | ||
| + | line-height: 36px; | ||
| + | background-position: center center !important; | ||
| + | } | ||
| + | |||
| + | /* 9. Search Bar */ | ||
| + | /* 16px font-size prevents iOS Safari from auto-zooming on focus */ | ||
| + | #searchInput { | ||
| + | font-size: 16px !important; | ||
| + | min-height: 36px; | ||
| + | box-sizing: border-box; | ||
| + | } | ||
| + | |||
| + | /* 10. Partner / Sponsor Logos */ | ||
| + | .mw-parser-output p a > img[src*="thumb"] { | ||
| + | margin: 0.35em 0.5em; | ||
| + | vertical-align: middle; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /* -------------------------------------------------------------------------- | ||
| + | Extra Small Devices (<= 450px) | ||
| + | -------------------------------------------------------------------------- */ | ||
| + | @media screen and (max-width: 450px) { | ||
| + | #mw-header-container { | ||
| + | padding-left: 0.75em; | ||
| + | padding-right: 0.75em; | ||
| + | } | ||
| + | #mw-content { | ||
| + | padding: 1em 0.75em 2em; | ||
| + | } | ||
| + | #mw-footer { | ||
| + | padding: 0 0.75em; | ||
| + | } | ||
| + | #catlinks { | ||
| + | margin: 0 0.75em; | ||
| + | } | ||
| + | |||
| + | /* Header spacing and title font sizing to prevent collision */ | ||
| + | #p-logo-text { | ||
| + | left: 4.25em; | ||
| + | } | ||
| + | #p-logo-text a { | ||
| + | font-size: 1.35em; | ||
| + | } | ||
| + | #site-navigation h2 { | ||
| + | left: 0.75em; | ||
| + | } | ||
| + | #user-tools h2 { | ||
| + | right: 0.75em; | ||
| + | } | ||
| + | #site-tools h2 { | ||
| + | right: 4.25em; | ||
| + | } | ||
| + | } | ||
Version vom 29. Oktober 2026, 19:49 Uhr
/* CSS placed here will affect users of the Timeless skin */
/* --------------------------------------------------------------------------
Desktop & Global Settings
-------------------------------------------------------------------------- */
/* Keep the top bar scrolling with content (existing setting) */
#mw-content-container {
margin-top: 0em;
padding-bottom: 1em;
}
#mw-header-container {
position: static;
}
#mw-header-nav-hack, #mw-header-hack {
position: static;
}
/* --------------------------------------------------------------------------
Mobile Optimizations (Timeless mobile breakpoint: <= 850px)
-------------------------------------------------------------------------- */
@media screen and (max-width: 850px) {
/* 1. Viewport & Padding Optimization */
/* Reclaim screen real estate from Timeless skin's large default 2em side padding */
#mw-header-container {
padding-left: 1.25em;
padding-right: 1.25em;
}
#mw-content {
padding: 1.25em 1.25em 2.5em;
}
#mw-footer {
padding: 0 1.25em;
}
#catlinks {
margin: 0 1.25em;
}
/* 2. Fix Squished Float Elements (Images, Infoboxes) */
/* Un-float right/left aligned images and callout boxes so text is not compressed */
.mw-parser-output .floatright,
.mw-parser-output .floatleft,
.mw-parser-output div[style*="float:right"],
.mw-parser-output div[style*="float: right"],
.mw-parser-output div[style*="float:left"],
.mw-parser-output div[style*="float: left"],
.mw-parser-output table.floatright,
.mw-parser-output table.floatleft {
float: none !important;
clear: both !important;
margin: 1em auto !important;
text-align: center;
max-width: 100% !important;
}
/* 3. Proportional Responsive Images */
.mw-parser-output img,
#mw-content img {
max-width: 100% !important;
height: auto !important;
}
/* 4. Multi-Column Layout Tables (e.g. Hauptseite Projekte & Community) */
/* Stack multi-column borderless layout tables vertically into full-width blocks */
.mw-parser-output table[style*="border:0"] > tbody > tr > td,
.mw-parser-output table[style*="border: 0"] > tbody > tr > td,
.mw-parser-output table[style*="border:none"] > tbody > tr > td,
.mw-parser-output table[style*="border: none"] > tbody > tr > td,
.mw-parser-output table[style*="border:0"] > tr > td,
.mw-parser-output table[style*="border: 0"] > tr > td,
.mw-parser-output table[style*="border:none"] > tr > td,
.mw-parser-output table[style*="border: none"] > tr > td {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 0.5em 0 !important;
}
/* 5. Data Tables (wikitable, prettytable, etc.) */
/* Allow wide tables to scroll horizontally within their box instead of breaking page
width */
.mw-parser-output table {
max-width: 100% !important;
box-sizing: border-box !important;
}
.mw-parser-output table.wikitable,
.mw-parser-output table.prettytable,
.mw-parser-output .mw-datatable {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
margin: 1em 0 !important;
}
/* 6. Code & Pre Blocks */
/* Contain long code strings and wrap inline code */
pre,
.mw-code,
.mw-highlight {
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
code {
word-break: break-word;
}
/* 7. Typography & Long Word Wrapping */
h1, h2, h3, h4, h5, h6,
.mw-headline,
#bodyContent {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* 8. Touch Targets for Page Actions */
/* Expand touch targets from 20px to 36px for easier tapping on mobile */
#mw-page-header-links li {
margin: 0 0.25em 0.75em 0.25em !important;
}
#mw-page-header-links li a,
#mw-page-header-links li.dropdown-toggle {
min-width: 36px;
min-height: 36px;
line-height: 36px;
background-position: center center !important;
}
/* 9. Search Bar */
/* 16px font-size prevents iOS Safari from auto-zooming on focus */
#searchInput {
font-size: 16px !important;
min-height: 36px;
box-sizing: border-box;
}
/* 10. Partner / Sponsor Logos */
.mw-parser-output p a > img[src*="thumb"] {
margin: 0.35em 0.5em;
vertical-align: middle;
}
}
/* --------------------------------------------------------------------------
Extra Small Devices (<= 450px)
-------------------------------------------------------------------------- */
@media screen and (max-width: 450px) {
#mw-header-container {
padding-left: 0.75em;
padding-right: 0.75em;
}
#mw-content {
padding: 1em 0.75em 2em;
}
#mw-footer {
padding: 0 0.75em;
}
#catlinks {
margin: 0 0.75em;
}
/* Header spacing and title font sizing to prevent collision */
#p-logo-text {
left: 4.25em;
}
#p-logo-text a {
font-size: 1.35em;
}
#site-navigation h2 {
left: 0.75em;
}
#user-tools h2 {
right: 0.75em;
}
#site-tools h2 {
right: 4.25em;
}
}
