MediaWiki:Timeless.css
Version vom 19:49, 29. Okt. 2026 von Speedsquirrel (Diskussion | Beiträge)
Hinweis: Leere nach dem Speichern den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Internet Explorer: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Gehe zu Menü → Einstellungen (Opera → Einstellungen auf dem Mac) und dann auf Datenschutz & Sicherheit → Browserdaten löschen → Gespeicherte Bilder und Dateien.
/* 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;
}
}
