MediaWiki:Common.css

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%)
}