MediaWiki:Common.css
From The Blockheads Wiki
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* CSS placed here will be applied to all skins */
div.editsection
{
font-size: 80% !important;
float: right !important;
}
/* Mobile compatibility for Infoboxes */
/* Ensure tables are responsive */
table {
max-width: 100%;
width: 100%;
margin: 0 auto;
border-collapse: collapse;
}
table img {
max-width: 100%; /* Ensure images within tables scale */
height: auto;
}
/* Style the outer table for better appearance on mobile */
.mobile-friendly-table {
border: 1px solid silver;
background-color: white;
font-size: 90%;
margin: 10px auto;
width: 100%;
max-width: 100%;
padding: 5px;
}
/* Header styling for better visibility on mobile */
.mobile-friendly-header {
font-size: 110%;
text-align: center;
background-color: #d4e3e5;
padding: 10px;
}
/* Make images responsive and centered */
.mobile-friendly-image {
background-color: #BCE2E7;
background-image: linear-gradient(to bottom, #aed6e3, #caefec);
max-width: 160px; /* Use max-width instead of fixed width */
height: auto;
margin: auto;
display: block;
text-align: center;
}
.mobile-friendly-image img {
max-width: 100%; /* Responsive image scaling */
height: auto;
}
/* Style the icon container */
.mobile-friendly-icons {
text-align: center;
margin-top: 10px;
}
/* Style icons with proper spacing */
.mobile-friendly-icons img {
max-width: 40px;
height: auto;
margin: 0 5px;
}
/* Make tables more readable on mobile */
table th,
table td {
padding: 8px;
text-align: left;
background-color: #d4e3e5;
}
@media (max-width: 600px) {
/* Scale down font size and padding for mobile devices */
.mobile-friendly-header {
font-size: 100%;
padding: 5px;
}
.mobile-friendly-table {
font-size: 85%;
}
}
.ns-6 .editsection,
.ns-8 .editsection,
.ns-12 .editsection,
.ns-14 .editsection
{
display: none !important;
}
/* Message Box */
.msgbox{
display:flex;
background:#FCFCFC;
box-sizing:border-box;
align-items:center;
width:auto;
padding:.4em .8em;
margin:0 auto;
margin-bottom:1em
}
.msgbox + .msgbox{
border-top:none;
margin-top:-1em
}
:not(.msgbox) + .msgbox,.msgbox:first-of-type{
border-top-right-radius:.15em;
border-top-left-radius:.15em
}
.msgbox #msgbox-iconimage,.msgbox #msgbox-image{
margin:0 1.5em 0 .5em
}
.msgbox-mini{
padding:.4em .5em;
margin:0 0;
margin-bottom:1em
}
.msgbox-mini #msgbox-icon{
align-self:flex-start
}
.msgbox-mini #msgbox-iconimage,.msgbox-mini #msgbox-image{
margin:0 .4em 0 .5em
}
.msgbox-mini #msgbox-text{
font-size:small
}
.msgbox-red{
background:hsl(0,75%,92%);
border-left:4px solid hsl(0,75%,85%)
}
.msgbox-orange{
background:hsl(40,75%,92%);
border-left:4px solid hsl(40,75%,85%)
}
.msgbox-yellow{
background:hsl(60,75%,92%);
border-left:4px solid hsl(60,75%,85%)
}
.msgbox-green{
background:hsl(120,75%,92%);
border-left:4px solid hsl(120,75%,85%)
}
.msgbox-blue{
background:hsl(215,75%,92%);
border-left:4px solid hsl(215,75%,85%)
}
.msgbox-magenta{
background:hsl(310,75%,92%);
border-left:4px solid hsl(310,75%,85%)
}
.msgbox-purple{
background:hsl(260,75%,92%);
border-left:4px solid hsl(260,75%,85%)
}
.msgbox-gray{
background:hsl(0,0%,92%);
border-left:4px solid hsl(0,0%,85%)
}