MediaWiki:Common.css

From PoliticalSG
Revision as of 12:04, 24 May 2026 by SGPolitico (talk | contribs)

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 */
.infobox-container {
    width: 30%;
    max-width: 350px;
    margin-left: 15px;
    margin-top: 0px;
    float: right;
    clear: right;
}

.infobox-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.infobox-image {
    text-align: center;
    padding: 5px;
}

.infobox-header, .infobox-section {
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: center;
}

.infobox-field {
    font-weight: bold;
    width: 35%;
}

/* Hide wiki UI elements — archive site, not community wiki */
#ca-history { display: none; }
#ca-talk { display: none; }
#ca-edit { display: none; }
#ca-ve-edit { display: none; } /* Visual editor tab if installed */
#p-tb { display: none; }       /* Toolbox sidebar */

/* --- MOBILE AD STYLING --- */
/* Centers the mobile ad banner under the article title */
.wiki-mobile-ad-container {
    display: block;
    text-align: center;
    margin: 15px auto;
    max-width: 100%;
}

/* --- DESKTOP AD SIDEBAR STYLING --- */
/* Rips the player out of the layout and floats it on the right side of the screen */
@media screen and (min-width: 1100px) {
    .wiki-desktop-ad-sidebar {
        display: block !important;
        position: fixed;
        right: 25px;         /* Distance from the right edge of the screen */
        top: 160px;          /* Distance from the top header */
        width: 300px;        /* Matches standard ad layout width */
        height: 600px;       /* TEMPORARY: Gives it height so we can see the test box */
        background-color: rgba(255, 0, 0, 0.1); /* TEMPORARY: Light red tint */
        border: 2px dashed red;                 /* TEMPORARY: Red dotted line */
        z-index: 9999;       /* Keeps it floating above content */
    }
}

/* --- RESPONSIVE VISIBILITY CONTROLS --- */
/* If the screen is too narrow (like a laptop), hide the desktop sidebar so it doesn't overlap text */
@media screen and (max-width: 1099px) {
    .wiki-desktop-ad-sidebar {
        display: none !important;
    }
}

/* If the user is on a desktop, completely hide the mobile banner container */
@media screen and (min-width: 601px) {
    .wiki-mobile-ad-container {
        display: none !important;
    }
}