MediaWiki:Common.css: Difference between revisions
From The Blockheads Wiki
FloofyPlasma (talk | contribs) No edit summary Tag: Reverted |
FloofyPlasma (talk | contribs) (Attempt to improve mobile compatibility) Tag: 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, |
Revision as of 18:48, 24 October 2024
/* 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%)
}