MediaWiki:Common.css: Difference between revisions

From WikiLegend
Jump to navigation Jump to search
No edit summary
Tags: Reverted Mobile edit Mobile web edit
No edit summary
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
/* CSS placed here will be applied to all skins */


/* Style for the infobox */
.infobox {
.infobox {
    width: 100%;
  border-collapse: collapse;
    max-width: 400px; /* Maximum width for larger screens */
  background: #f9f9f9;
    margin: 0 auto; /* Center the infobox horizontally */
  border: 1px solid #aaa;
    border: 1px solid #ccc;
  width: 22em;
    background-color: #f9f9f9;
  font-size: 90%;
    padding: 10px;
  text-align: left; /* Default text alignment for table content */
    box-sizing: border-box; /* Include padding and border in width */
    font-size: 1rem; /* Responsive font size */
}
}


/* Ensure images in the infobox are responsive */
.infobox th {
.infobox img {
  background: #d0e0f0;
    max-width: 100%;
  padding: 4px;
    height: auto;
    display: block;
    margin: 0 auto; /* Center images */
}
}


/* Style for table rows and cells */
.infobox th,
.infobox td {
.infobox td {
    padding: 8px;
  padding: 4px;
    text-align: left;
    vertical-align: top;
    font-size: 0.9rem;
}
}


/* Center text in headers for better mobile appearance */
.infobox .image-cell {
.infobox th {
  text-align: center; /* Explicitly center the image cell */
    text-align: center;
}
}


/* Media query for mobile devices (screens smaller than 600px) */
@media screen and (max-width: 600px) {
    .infobox {
        width: 90%; /* Slightly smaller width for mobile */
        margin: 0 auto; /* Center on mobile */
        font-size: 0.85rem; /* Slightly smaller font for mobile */
    }
    .infobox th,
    .infobox td {
        padding: 5px; /* Reduced padding for mobile */
    }
}


/* Media query for very small screens (e.g., older phones) */
/* Hide 'View source' tab for non-logged-in users */
@media screen and (max-width: 400px) {
body.action-viewsource .mw-editsection,
     .infobox {
body.action-viewsource #ca-viewsource {
        width: 95%; /* Use almost full width */
     display: none !important;
        font-size: 0.8rem; /* Further reduce font size */
    }
}
}

Latest revision as of 18:10, 4 June 2025

/* CSS placed here will be applied to all skins */

.infobox {
  border-collapse: collapse;
  background: #f9f9f9;
  border: 1px solid #aaa;
  width: 22em;
  font-size: 90%;
  text-align: left; /* Default text alignment for table content */
}

.infobox th {
  background: #d0e0f0;
  padding: 4px;
}

.infobox td {
  padding: 4px;
}

.infobox .image-cell {
  text-align: center; /* Explicitly center the image cell */
}


/* Hide 'View source' tab for non-logged-in users */
body.action-viewsource .mw-editsection,
body.action-viewsource #ca-viewsource {
    display: none !important;
}