Anonymous

MediaWiki:Common.css: Difference between revisions

From The Blockheads Wiki
m
Reverted edits by FloofyPlasma (talk) to last revision by [[User:>Abcboy|>Abcboy]]
(Attempt to improve mobile compatibility)
Tag: Reverted
m (Reverted edits by FloofyPlasma (talk) to last revision by [[User:>Abcboy|>Abcboy]])
Tags: Replaced Rollback Reverted
Line 6: Line 6:
float: right !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-6 .editsection,
Line 95: Line 13:
{
{
display: none !important;
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%)
}
}