Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Suppressors, Administrators
6,161
edits
MediaWiki:Mobile.css: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary Tag: Reverted |
||
| Line 6: | Line 6: | ||
display: none !important; | display: none !important; | ||
} | } | ||
/*remove header on Main_Page*/ | /*remove header on Main_Page*/ | ||
| Line 16: | Line 15: | ||
.infobox th { | .infobox th { | ||
text-align: center; | text-align: center; | ||
} | } | ||
/** TABLES **/ | /** TABLES **/ | ||
/* KTV Table */ | /* KTV Table */ | ||
.table.ktv-table > :first-child > tr:first-child, | |||
.table.ktv-table > tbody > tr.heading, | |||
.table.ktv-table > :first-child > tr:first-child > *, | |||
.table.ktv-table > tbody > tr.heading > * { | |||
background-color: #522F65 !important; | |||
border-color: #777d9e !important; | |||
} | |||
.table.ktv-table > tbody > tr:nth-child(odd), | |||
.table > tbody > tr.ktv-table:nth-child(odd) { | |||
background-color: #dfe1ec; | |||
} | |||
/* General Mobile Enhancements */ | |||
/* Make buttons full width on mobile */ | |||
.button, input[type="submit"], input[type="button"] { | |||
width: 100%; | |||
box-sizing: border-box; | |||
margin-bottom: 10px; | |||
} | |||
/* Ensure images are responsive */ | |||
img { | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
/* Adjust padding and margins for better readability */ | |||
body { | |||
padding: 10px; | |||
margin: 0; | |||
font-size: 16px; | |||
} | |||
/* Make sure tables are responsive */ | |||
table { | |||
width: 100%; | |||
overflow-x: auto; | |||
display: block; | |||
} | |||
/* Adjust infobox width */ | |||
.infobox { | |||
width: 100%; | |||
margin: 10px 0; | |||
box-sizing: border-box; | |||
} | |||
/* Improve readability of text */ | |||
p { | |||
margin-bottom: 15px; | |||
line-height: 1.5; | |||
} | |||
/* Ensure form elements are responsive */ | |||
input[type="text"], input[type="password"], textarea { | |||
width: 100%; | |||
box-sizing: border-box; | |||
margin-bottom: 10px; | |||
padding: 10px; | |||
} | |||
/* Navigation Enhancements */ | |||
nav#p-namespaces div.vector-menu-content, | |||
nav#p-views div.vector-menu-content, | |||
nav#p-navigation div.vector-menu-content, | |||
nav#p-tb div.vector-menu-content { | |||
width: 100%; | |||
} | |||
nav#p-namespaces div.vector-menu-content > ul.vector-menu-content-list, | |||
nav#p-views div.vector-menu-content > ul.vector-menu-content-list, | |||
nav#p-navigation div.vector-menu-content > ul.vector-menu-content-list, | |||
nav#p-tb div.vector-menu-content > ul.vector-menu-content-list { | |||
display: flex; | |||
flex-direction: column; | |||
padding: 0; | |||
} | |||
nav#p-namespaces div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a, | |||
nav#p-views div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a, | |||
nav#p-navigation div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a, | |||
nav#p-tb div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a { | |||
padding: 10px; | |||
display: block; | |||
width: 100%; | |||
box-sizing: border-box; | |||
} | |||
/* Footer Improvements */ | |||
.footer { | |||
padding: 10px; | |||
font-size: 14px; | |||
} | |||
/* Add some space between content sections */ | |||
.section { | |||
margin-bottom: 20px; | |||
} | |||
/* Ensure links are easy to tap */ | |||
a { | |||
padding: 5px 0; | |||
display: inline-block; | |||
} | |||
a:hover { | |||
background-color: #e3d4f3; | |||
color: #5a1d8a; | |||
} | |||
/* Media Queries for Specific Mobile Adjustments */ | |||
@media (max-width: 768px) { | |||
.mw-body { | |||
padding: 15px; | |||
} | |||
.infobox { | |||
float: none; | |||
margin-left: 0; | |||
width: 100%; | |||
} | |||
nav#p-navigation div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a, | |||
nav#p-tb div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a { | |||
padding: 10px 10px; | |||
} | } | ||
} | |||
. | @media (max-width: 480px) { | ||
.header, .footer { | |||
padding: 5px; | |||
} | } | ||
.button, input[type="submit"], input[type="button"] { | |||
padding: 10px; | |||
} | |||
nav#p-namespaces div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a, | |||
nav#p-views div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a, | |||
nav#p-navigation div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a, | |||
nav#p-tb div.vector-menu-content > ul.vector-menu-content-list > li.mw-list-item a { | |||
padding: 8px; | |||
} | |||
} | |||