MediaWiki:Common.css: Difference between revisions

Latest revision as of 18:19, 27 October 2025

/** * Custom CSS for Right Column Ad Banner.
 * * The ad element (#right-column-banner-ad) is injected after the main 
 * content using the SkinAfterContent hook in LocalSettings.php.
 * * This CSS uses a Media Query to ensure the ad is ONLY displayed 
 * when the viewport is wide enough to prevent content overlap.
 */

/* ---------------------------------------------------------------------- */
/* 1. DEFAULT STATE: Hide the ad element by default on small screens.     */
/* ---------------------------------------------------------------------- */
#right-column-banner-ad {
    display: none; /* Hidden by default */
}

/* ---------------------------------------------------------------------- */
/* 2. MEDIA QUERY: Show the ad only on wide screens (Desktop/Full-screen) */
/* ---------------------------------------------------------------------- */
/* MediaWiki's Vector skin often uses ~1200px or ~1400px as a breakpoint 
   for the side column. Adjust 1400px if needed for your specific layout. 
*/
@media screen and (min-width: 1400px) {
    
    #right-column-banner-ad {
        /* Re-enable visibility */
        display: block; 

        /* Positioning as defined before */
        position: absolute; 
        
        /* Adjust these values based on your specific skin layout. */
        /* 15px is a safe padding from the right edge. */
        right: 2em;   
        
        /* Vertical position: Controls how far down it appears. 
           Adjust 300px based on how far below the page tools you want it. */
        top: 450px; 
        
        /* Size */
        width: 200px; 
        
        /* Visuals */
        padding: 0px;
        background-color: transparent; 
        border: 0px;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        
        /* Ensure it layers correctly (if it was overlapping the toolbox) */
        z-index: 10; 
    }
    
}

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

.code {
	padding-left:0.5em;
}

.bullet_margin {
    padding-left:1.5em;
}